style-dictionary VS a11y-color-tokens

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?

I've also created a package to help me with developing accessible color palettes called a11y-color-tokens which I use for more complex projects.

Eleventy let me boilerplate certain aspects, and I created additional tools to help me create color palettes and social share images. Those freed me to focus on architecting my idea and preparing content and design and ensuring accessibility. Then - out the door it went!

Additionally, an optional Markdown document is generated with contrast cross-compatibility between all available color tokens.