style-dictionary VS variabless

function getStyleDictionaryConfig(brand) { return { source: [`tokens/brands/${brand}/*.json`, 'tokens/globals/**/*.json'], platforms: { /** * Available platforms: https://amzn.github.io/style-dictionary/#/config?id=platform */ web: { transformGroup: 'web', buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', format: 'scss/variables', }, ], }, }, } } /** * Build the tokens for each brand. * {@see - Example based on https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform} */ ['microsoft', 'xbox'].map(function (brand) { ['web'].map(function (platform) { const StyleDictionary = StyleDictionaryPackage.extend( getStyleDictionaryConfig(brand), ) StyleDictionary.buildPlatform(platform) }) })

Check out the official examples projects provided by Style Dictionary. In our case, we just used the basic example 👍

Did you know about Style Dictionary https://github.com/amzn/style-dictionary Its a tool that creates Design Tokens for different platforms using a JSON file. Sounds similar to what you are trying to achieve.

Cool. Can you compare this to https://github.com/amzn/style-dictionary?

This brief post is an introduction to Variabless. Instead of managing two sets of theme definitions, one in CSS and one in JS, Variabless will convert your Variabless definitions file to CSS variables or properties, allowing you to use those values in JS and CSS file.