A Style Dictionary-powered project that manages CSS variables for the Mantine UI. This tool helps standardize and maintain design tokens, ensuring a consistent design language across your project.
- Node.js (v14 or higher)
- npm or yarn
Install dependencies using npm:
npm installBuild the design tokens using:
npm run buildThis command uses Style Dictionary configuration to generate:
tokens.json- Token definitions in JSON formattokens.css- CSS variables for application use
tokens/- Source token files in JSON formatbuild/- Generated output filesdtcg/- Token output for platforms (JSON)css/- CSS variables for application use
config/- Style Dictionary configuration filesbuild.js- Custom build script for transforms
The tokens/ directory contains:
theme-dark.json- Dark theme tokens_secondary-colors.json- Secondary color definitions_line-heights.json- Typography line height values
- Update token values in files under the
tokens/directory - Follow the JSON structure:
{
"color": {
"primary": {
"value": "#007AFF"
}
}
}- Configure transformation settings in
style-dictionary.config.js - Customize token name transformation in
build.js
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch
- Submit a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.