Token CSS is a new tool that seamlessly integrates Design Tokens             into your development workflow. Conceptually, it is inspired

Token CSS

submited by
Style Pass
2022-09-22 19:00:23

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.

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.

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!

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

Leave a Comment