Flush out the story around Design Tokens for Haru

[bnjmnrsh]

I have seen workflows that take Sass Maps and export them to JSON for consumption by other tooling, though I am more in favour of using JSON like the newly proposed Design Tokens Format, and transpiling it to Sass Maps for module consumption. This would be a two step process, a pre-build stage to generate the Sass variables and maps, and then compiling the CSS from Sass as a second step.

[bnjmnrsh]

Accoutrement is a suite of Sass tooling which can be used solo or with the Herman theme for DocSass. Herman also has tooling to export JSON versions of its Sass maps and variables.

Amazon Style Dictionary
Sales Force Theo ––Not Maintained

Heydon Pickering Design-Tokens-CLI Is more of a proof of concept, though does have a simplistic Sass variable exporter, nothing (yet) for Sass Maps, and conforms to the newly proposed Design Token Format.

Design Tokens Format Module Draft Community Group Report (WIP).

Diez FOS "The Design Token Framework –– Diez radically reduces the cost of delivering a consistent visual identity across your company’s apps & websites."

• Diez has a compiler which outputs to Scss
• https://diez.org/getting-started/css-sass.html
• https://diez.org/existing-project-integration/css-sass.html
• Does not appear to generate Maps, only Sass variables and CSS custom props

Specify "Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically."

[bnjmnrsh]

Nice summary of current thinking around design tokens
https://backlight.dev/blog/design-tokens

style-dictionary appears to support Sass exports. https://amzn.github.io/style-dictionary/#/formats, but generating maps isn't clear, though it appears to have some functionality, and the ability to create custom formats:
amzn/style-dictionary#358
amzn/style-dictionary#137
Formats / Custom Formats:
https://gist.github.com/griiettner/3a400039f97a400d0ffc9b6dfafa5f2d
https://amzn.github.io/style-dictionary/#/formats?id=using-formats
https://amzn.github.io/style-dictionary/#/formats?id=custom-formats

https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa

Tokens Studio plugin for Figma is also cited as a leader in this space.
https://docs.tokens.studio/
It will generate and ingest a defined suite of token types, but does not generate complied output(?) like CSS/Sass
https://docs.tokens.studio/available-tokens/available-tokens

[bnjmnrsh]

Herman is a SassDocs theme that has some built in functionality to export its internal Sass Maps as JSON, but doesn't appear to have the ability to ingest JSON and convert it to the required Sass Maps. Accoutrement by the same authors also has promising patterns for Sass tooling to support further manipulation.

https://www.oddbird.net/herman/docs/config_api-utilities
https://www.oddbird.net/accoutrement/docs/utils.html

So for us, it may be worth looking at a custom formatter to output Sass Maps, and CSS custom property generation for Tachyons-Haru, and possibly Herman/Accoutrement for inspiration on how process the internals, and export to JSON.

KISS rules mean that we structure Haru to ingest and possibly export maps to JSON in a predictable way. As a separate and independent repo we could generate a custom Haru formatter for Style Dictionary.