-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Flush out the story around Design Tokens for Haru #30
Comments
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 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."
Specify "Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically." |
Nice summary of current thinking around 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: 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. |
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 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. |
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.
The text was updated successfully, but these errors were encountered: