Skip to main content

Token CSS

Token CSS is a design token-based CSS framework. It allows you to define design tokens (colors, spacing, typography, etc.) and use them consistently across your stylesheets. The tokens are converted to CSS custom properties and utility classes.

Usage​

Token CSS is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

When enabled, Token CSS processes your stylesheet and converts design token references into standard CSS. By default, it uses the @tokencss/core/preset preset.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Token CSS Demo</h1>\n  <p>Design tokens are converted to CSS. Check the <strong>Compiled</strong> tab to see the processed output.</p>\n  <div class=\"card\">A card component</div>\n  <div class=\"card accent\">An accent card</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: var(--color-blue-5);\n  border: 1px solid var(--color-gray-3);\n  padding: var(--space-md);\n  border-radius: var(--radius-md);\n  margin-bottom: var(--space-sm);\n}\n\n.card.accent {\n  background: var(--color-indigo-4);\n  color: white;\n}\n"
    },
    "processors": [
      "tokencss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

Processor Info​

Name​

tokencss

Editor​

style

Processor​

Token CSS

Version​

tokencss: v0.9.0

Custom Settings​

Custom settings added to the property tokencss define or override design tokens. By default, the @tokencss/core preset is applied. Custom tokens extend or override the preset values.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "tokencss": {
    "extends": "@tokencss/core/preset",
    "color": {
      "brand": {
        "value": "#4a90d9"
      }
    },
    "space": {
      "xl": {
        "value": "2rem"
      }
    }
  }
}
Sponsors