Generated CSS from token

Transforming Tokens into Dynamic CSS

Token values can be defined as variables, providing usefulness in maintaining consistency across multiple elements that require identical values. In such cases, the package will automatically assign the corresponding value.

Example

tokens.json

{
  "global": {
    "rounded": {
      "square-lg": {
        "value": "{xs}",
        "type": "borderRadius"
      },
      "half-button-lg": {
        "value": "0 0 {xs} {xs}",
        "type": "borderRadius"
      }
    },
    "xs": {
      "value": "0.5rem",
      "type": "dimension"
    }
  }
}

Usage

page.tsx

<div className="rounded-square-lg border h-36 relative w-full">
  <div className="rounded-half-button-lg bg-sd-slate-700/50 h-12 absolute bottom-0 inset-x-0"/>
</div>

Render