Background/Goal
Style Dictionary (the library used for managing our design tokens) supports the ability to export tokens as ES6 variables. The output looks something like this:
export const ColorBackgroundBase = '#ffffff'; export const ColorBackgroundAlt = '#fcfcfcfc';
It's also possible to provide custom prefixes like Cdx if desired.
Is this something we should consider including in the public @wikimedia/codex-design-tokens package on NPM?
It sounds like the Language Team may have a use-case for this, where they are accessing breakpoint token values in JS to help dictate component behavior (i.e. not just styles that could be handled in Less or Sass).
Development considerations
Having access to named exports for each individual token would allow for a more efficient build when using a JS build tool like Vite because the unused tokens could be tree-shaken out. Not sure if this is possible when importing JSON.
Acceptance Criteria
- Figure out if this is something we want to do (I believe at least one use-case exists per above)
- Add a new build target with "format": "javascript/es6" in the tokens build configuration if so
Supporting documentation
- I'm not finding the style-dictionary docs to be super helpful, but here's the section in the actual code that explains how to generate tokens in this format: https://github.com/amzn/style-dictionary/blob/main/lib/common/formats.js#L363