Generates CSS custom properties from design token modules or raw config maps.
Can read from a module that uses Jetons via __jetons_config__/0, or
directly from a raw DTCG config map. Produces CSS with var() references
for token cross-references and optional inlining of specific prefixes.
Summary
Functions
Generates a CSS string from a raw DTCG config map.
Generates a multi-block CSS string from a resolver document.
Generates a CSS string from a list of named theme configs.
Generates a CSS string from a module that uses Jetons.
Functions
Generates a CSS string from a raw DTCG config map.
This is useful for file-based workflows where you don't want to define a Jetons module. The config is treated as a single unnamed theme.
Options
:inline- list of path prefixes to inline. Default:[]:selector- CSS selector for the root block. Default:":root":transforms- list of{type, fun}tuples for value transforms
Example
config = Jason.decode!(File.read!("tokens.json"))
css = Jetons.CSS.from_config(config, selector: ":root")
Generates a multi-block CSS string from a resolver document.
Resolves the default modifier combination into :root, then for each
non-default modifier context, emits only the tokens that differ under
a .{modifier}-{context} class selector.
Options
:input- map of pinned modifier values. Pinned modifiers are used in the base resolution but not expanded into diff blocks. Default:%{}:inline- list of path prefixes to inline. Default:[]:selector- CSS selector for the base block. Default:":root":transforms- list of{type, fun}tuples for value transforms
Example
# All modifier permutations
css = Jetons.CSS.from_resolver(resolver_doc, "/path/to/dir")
# Pin brand, expand only theme
css = Jetons.CSS.from_resolver(resolver_doc, "/path/to/dir", input: %{"brand" => "markant"})
Generates a CSS string from a list of named theme configs.
Each theme is a {name, config} tuple. The first theme uses the provided
selector (default :root), subsequent themes use [data-theme="name"].
Example
themes = [
{:light, light_config},
{:dark, dark_config}
]
css = Jetons.CSS.from_themes(themes, selector: ":root")
Generates a CSS string from a module that uses Jetons.
Options
:inline- list of path prefixes to inline. Tokens matching these prefixes are omitted from CSS output, and references to them are resolved to literal values. Default:[]:selector- CSS selector for the root block. Default:":root":transforms- list of{type, fun}tuples for value transforms