Serializes DTCG 2025.10 composite token values to CSS strings.
Handles shadow, border, transition, and typography composite types. Sub-values within composites are recursively serialized using the appropriate type-specific serializer.
Summary
Functions
Serializes a border value to CSS shorthand.
Serializes a gradient value (array of stops) to CSS.
Serializes a shadow value (single object or array) to CSS.
Serializes a transition value to CSS shorthand.
Functions
Serializes a border value to CSS shorthand.
iex> Jetons.CSS.Composite.serialize_border(%{
...> "width" => %{"value" => 3, "unit" => "px"},
...> "style" => "solid",
...> "color" => %{"colorSpace" => "srgb", "components" => [0.2, 0.2, 0.2]}
...> })
"3px solid color(srgb 0.2 0.2 0.2)"Serializes a gradient value (array of stops) to CSS.
iex> Jetons.CSS.Composite.serialize_gradient([
...> %{"color" => %{"colorSpace" => "srgb", "components" => [1, 0, 0]}, "position" => 0},
...> %{"color" => %{"colorSpace" => "srgb", "components" => [0, 0, 1]}, "position" => 1}
...> ])
"linear-gradient(color(srgb 1 0 0) 0%, color(srgb 0 0 1) 100%)"Serializes a shadow value (single object or array) to CSS.
Array: comma-separated shadow values.
Inset: prepended when "inset" is true.
iex> Jetons.CSS.Composite.serialize_shadow(%{
...> "offsetX" => %{"value" => 2, "unit" => "px"},
...> "offsetY" => %{"value" => 2, "unit" => "px"},
...> "blur" => %{"value" => 4, "unit" => "px"},
...> "spread" => %{"value" => 0, "unit" => "px"},
...> "color" => %{"colorSpace" => "srgb", "components" => [0, 0, 0], "alpha" => 0.5}
...> })
"2px 2px 4px 0px color(srgb 0 0 0 / 0.5)"Serializes a transition value to CSS shorthand.
iex> Jetons.CSS.Composite.serialize_transition(%{
...> "duration" => %{"value" => 200, "unit" => "ms"},
...> "delay" => %{"value" => 0, "unit" => "ms"},
...> "timingFunction" => [0.5, 0, 1, 1]
...> })
"200ms 0ms cubic-bezier(0.5, 0, 1, 1)"