[[ https://amzn.github.io/style-dictionary/#/ | Style Dictionary ]] (the library used for managing our design tokens) [[ https://github.com/amzn/style-dictionary/blob/main/lib/common/formats.js#L363 | supports the ability ]] to export tokens as ES6 variables. The output looks something like this:
```lang=js
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 [[ https://www.npmjs.com/package/@wikimedia/codex-design-tokens?activeTab=readme | @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). 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