Jetons.CSS (jetons v0.2.2)

Copy Markdown View Source

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

from_config(raw_config, opts \\ [])

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")

from_resolver(resolver_doc, base_dir, opts \\ [])

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"})

from_themes(themes, opts \\ [])

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")

generate(module, opts \\ [])

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