A utility for working with design tokens in CSS. This project converts an export.json file, generated by Variables Pro Figma plugin, into a design-tokens.css
- Complete design token system with semantic naming
- Light and dark theme support via CSS classes
- System preference detection with
prefers-color-scheme - Organized token categories:
- Typography (font family, weight, size, line height)
- Colors (brand, semantic, and functional palettes)
- Spacing and layout tokens
- Interactive element styling
Using node:
node convert.js export.json tokens.cssUsing Bun:
bun convert.js export.json tokens.cssWhere the first param is the input json file and the second param is the output css file.
Import the CSS file in your project:
// In your main entry file
import 'design-token-converter/design-tokens.css';Apply themes by adding a class to your root HTML element:
<!-- Light theme (default) -->
<html class="light-theme">
<!-- Your content -->
</html>
<!-- Dark theme -->
<html class="dark-theme">
<!-- Your content -->
</html>The CSS automatically detects system preferences if no theme class is specified:
<html>
<!-- Will follow system preference -->
</html>MIT