Draft: Design tokens - using .json for tokens using style dictionary as conversion #2321
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Thanks for the improvements! Browse a preview of your changes using the link below.
To edit notification comments on pull requests, go to your Netlify project configuration. |
…sponding .json files contain also renaming json Previously tokens was an object containing all tokens and when we iterated over it we didnt scope the output. We were still applying all tokens to every css output. This change _should_ update that to generate one css file per json source, each file should be registered individually in the files array with the corresponding input file as a scoped source. Also simplifying the example by removing some json files. Also this works hand in hand with some json file generation changes from Figma.
Trying new organization structure out of Figma
…ly in the style dictionary config I also verified in this commit that having a directory under base with any tokens in it duplicates the structure in css. AKA I created a dir a json file under base/sizing to verify.
This required a refactor of cfpb-button.component.scss so that it includes reference to custom css properties and no longer uses the old component button.scss. This may not be the best ending but it gets us pretty close to having the tokens hooked up.
Based on a review with Ans on Friday there were a few changes suggested. Fixed up @use in the web component scss so that it uses all of abstracts again. (I initially thought that custom-props scss was still using $ variables. It wasnt) Refactor button styles for cfpb-button to not be a mixin any longer. Update index.js in cfpb-button to no longer include cfpb-color-palettes-default-tokens.css because we can just use custom-props from the standard components. *todo* Figure out if there is another way to include the btn-default-tokens.css. Right now I have included it in the index.js in order for the styles to be available to the shadow dom. Adding them into cfpb-button.scss with @use or @import is always leaving the css custom properties undefined.
This commit adds: Json tokens saved out of Figma using my plugin: https://github.com/itsmedavep/figma-dtcg with Style Dictionary JSON (emit #RRGGBB color values) turned on in the export tab. JSON tokens have been added to a "tokens" folder that the root of src. Style dictionary then takes all of the json tokens and outputs them to .css which is then added into the web components respective folders (elements) as sidecar files and ultimately they are used in the web components themselves. You can do that with this command: yarn style-dictionary build --config ./style-dictionary.config.js The config walks the tokens folder and then emits .css files into the elements dir mirroring the same structure as the tokens folder. Style dictionary has output references set to TRUE. Which means that we preserve the alias values instead of the resolved values foer the css (e.g. --block-border: var(--gray-40); vs --block-border: #b4b5b6;) All css files are generated with :host vs :root These changes are only for color. All of the sizing variables have been pulled out into a partials file _sizing-vars.scss. Instead of pulling in everything from scr/abstracts I have opted to only use the mixins, media queries, and var-breakpoints since I have duplicated the custom-props and vars to be used with the web components. An eventual clean up TODO: would be to just bring all of src/abstracts over to src/elements/abstracts and then do a import clean up.
npm error Could not resolve dependency: npm error peer react@"^16.8.0" from [email protected] npm error node_modules/react-liquid npm error react-liquid@"2.0.1" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution.
Run yarn style-dictionary build --config ./style-dictionary.config.js
yarn style-dictionary build --config ./style-dictionary.config.js
shell: /usr/bin/bash -e {0}
Internal Error: cfpb-design-system@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
Added yarn install step to GH action
Moving yarn install to right before trying to build tokens with style-dictionary
This reverts commit 02e19b3.
This reverts commit 016530b.
This reverts commit 298c786.
This reverts commit 0c8e137.
This reverts commit a7819bd.
This reverts commit dd15eb2.
This reverts commit b8930be.
This makes it so that the action will run when there is a push to the tokens dir or a pr is opened on main and a file changes in the tokens dir
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Opening a PR for design token work. We are exploring how feasible it would be to output design tokens from Figma using the free version of Token Studio in .json format and then subsequently ingesting the .json into the build process of the DS.
Additions
Adding in .json files. One file contains all of the CFPB color pallets. The second file contains the vars.scss variables in .json format
Changes
Eventually, will add style dictionary or similar translation tool into the project as a dep and hook it into the build process for the DS
Testing
Screenshots
Notes
This is a first step proof of concept for moving over to using platform agnostic tokens.
Todos
Checklist
Testing checklist
Browsers
Accessibility
Other