Refactor theme tokens to use SCSS and TypeScript #740
Conversation
Replaces CSS variables and JSON token files with a new SCSS file (tokens-light-dark.scss) and TypeScript token files for light and dark themes. Updates the build-tokens.js script to use a new configuration-based approach, removes direct imports of old CSS variable files, and updates dependencies to use the latest style-dictionary and @tokens-studio/sd-transforms. Cleans up unused variable files and updates related imports and scripts for improved theme management.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Updated all font family string values in dark and light theme token files to use double quotes for consistency and style compliance. Also enhanced the 'generate-tokens' script in package.json to run eslint --fix after formatting with Prettier.
Changed ESLint quote rule to allow avoiding escapes and removed eslint from the generate-tokens script. Updated theme token files to use single quotes for string values containing double quotes, improving consistency and readability.
Cleaned up the useColumns test by removing an unused eslint-disable-next-line comment.
Replaces large, sparse color arrays in theme palette tokens with more concise representations. This change improves maintainability and readability of the theme token files. Also updates a script in package.json to properly quote the glob pattern.
vineethasok
requested review from
ariser,
Copilot,
kunalpanchal and
natalyjazzviolin
There was a problem hiding this comment.
Pull request overview
This PR modernizes the theming infrastructure by migrating from style-dictionary v3 to v5, replacing CSS variable files with a unified SCSS file using the light-dark() function, and generating TypeScript theme files for better type safety. The new approach enables improved tree-shaking, better autocomplete support, and reduces redundancy by consolidating light/dark theme handling into a single SCSS file.
Key changes:
- Migrated from style-dictionary v3 to v5 with updated configuration approach
- Replaced separate CSS variable files with a single SCSS file using
light-dark()function - Updated TypeScript type inference to use generated theme files instead of manually maintained types
Reviewed changes
Copilot reviewed 15 out of 21 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| style-dictionary.config.js | New configuration file defining SCSS and TypeScript output formats with custom formatters for light-dark() generation |
| build-tokens.js | Simplified build script using new style-dictionary v5 configuration API |
| vite.config.ts | Added SCSS preprocessor configuration and PostCSS plugin for wrapping tokens in CSS layers |
| src/theme/index.ts | Updated to import generated TypeScript theme files and revised type definitions |
| package.json | Updated @tokens-studio/sd-transforms to v1.2.0 and added style-dictionary v5.0.0 |
| src/styles/variables.*.css | Removed deprecated CSS variable files |
| src/theme/tokens/variables.*.json | Removed JSON theme files (replaced by TypeScript) |
| src/App.tsx | Removed direct CSS variable imports |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@vineethasok I don't see any visible issues, however it's hard for me to give a 👍 as I'm unsure whether all of the automation still works. Have you tested whether the |
I have tested it |
Nice, all worked for me and I could use generate and use the new token. |
Introduces new loading background color tokens for button variants in both light and dark themes. Updates alert spacing variables for medium and small sizes, adds banner spacing, and includes new test tokens for gareth.test.main.text and gareth.test.main.danger.
Replaces CSS variables and JSON token files with a new SCSS file (tokens-light-dark.scss) and TypeScript token files for light and dark themes. Updates the build-tokens.js script to use a new configuration-based approach, removes direct imports of old CSS variable files, and updates dependencies to use the latest style-dictionary and @tokens-studio/sd-transforms. Cleans up unused variable files and updates related imports and scripts for improved theme management.
Style-dictionary v3 was deprecated and we are moving to the latest v5
We also deleted the unused css files which were generated previously
We have also created a type which would infer from the generated content and does not need regeneration.
This also includes the changes for scss migration logic as we would be using this scss tokens for the autocomplete and convertion from the styled-components function format
The new scss is configured to provide better tree shaking ability once we migrate each components to scss