Token CSS

Token CSS is a new tool that seamlessly integrates Design Tokens into your development workflow. Conceptually, it is inspired by tools like Tailwind, Styled System, and many CSS-in-JS libraries that provide tokenized constraints for your styles—but there's one big difference.

Token CSS embraces .css files and <style> blocks.

With Token CSS, you define your tokens in an interoperable format using JSON. You author your CSS using token names as values, and they are automatically converted to custom properties.

.container {
  padding: md;          /* var(--size-md) */
  margin: lg auto;      /* var(--size-lg) auto */
  max-width: 8xl;       /* var(--size-8xl) */
}

.box {
  background: primary;  /* var(--color-primary) */
  width: full;          /* var(--size-full) */
  height: 3xl;          /* var(--size-3xl) */
  border-radius: md;    /* var(--radius-md) */
}

Of course, one of the benefits of many CSS-in-JS libraries is that they leverage TypeScript to enforce your design constraints. Token CSS comes with a Visual Studio Code Extension that brings Intellisense, hover features, and semantic token highlighting to your CSS (or Astro) files—and many more features are planned!

Try it for yourself and let us know what you think on Twitter.

Want to get involved? Token CSS is in active development. Please visit our GitHub and open some issues!