-
Notifications
You must be signed in to change notification settings - Fork 84
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
[WNMGDS-2746][WNMGDS-2776] Update token build scripts to use JSON source #2952
Merged
pwolfert
merged 49 commits into
feature/figma-json-tokens
from
pwolfert/update-token-build
May 30, 2024
Merged
Changes from all commits
Commits
Show all changes
49 commits
Select commit
Hold shift + click to select a range
0408b24
This script can just be about exporting CSS/Sass now
pwolfert 6e51206
Move these into the same folder
pwolfert 00a84de
Move the new token types and token-reading utils because they are mor…
pwolfert a42f391
Move some testing files and add some new tests
pwolfert 6380a68
In the flattened token files, keep the notation internally consistent
pwolfert b590cb5
Starting to write the new exporter for CSS vars
pwolfert 4051b57
Make it easier to test
pwolfert 80e67af
Now have the basic structure of the new exporter
pwolfert d246d21
Structure of this script starting to take shape
pwolfert 11082a9
Add variable naming logic
pwolfert 3e84d9c
Tests for var naming
pwolfert 85fe607
New alias resolving logic and a bunch of comments
pwolfert 6ffc868
Update other tests
pwolfert 7400f46
We can put both CSS and SCSS in the same file (and finish it)
pwolfert 89579e5
More snapshot tests, but now I see that layout is empty
pwolfert 2114689
Add fiddly logic for converting from and to Figma's generic number type
pwolfert 3e6b947
Turn that long commit message into comments so we can address later
pwolfert 8f26132
Get rid of extra quotes in CSS output and add support for percentages
pwolfert 1f9ee7c
Merge branch 'main' into pwolfert/update-token-build
pwolfert f1eeb7e
Update tokens package README
pwolfert 8a66a31
Move test mock files into a less conspicuous and distracting place
pwolfert 43d42e7
This list hierarchy got lost
pwolfert 022c35c
Merge branch 'main' into pwolfert/update-token-build
pwolfert 199165a
Fix minor TS errors
pwolfert 0c34171
Replace our old tokens with some test ones synced from Figma
pwolfert f72a516
Don't need these theme TS files anymore either
pwolfert 18cd414
Fix `"{spacer.4}px"` as a `$value` in the JSON
pwolfert 9f7f9da
Add checks in the unit tests for that functionality and fix it again
pwolfert 51dbd90
Round `ex` units
pwolfert 256ebda
More type refinement
pwolfert 1097525
Merge branch 'main' into pwolfert/update-token-build
pwolfert 6edf182
Create an example .env file
pwolfert 368558d
Sync full set of variables from Figma
pwolfert 0c3014c
Add duration conversion support. Pushing to Figma works!!
pwolfert 0565cd0
WIP: Prompt and store decisions about ambiguous number types from Figma
pwolfert e3c12b3
WIP: Add guessing back in. It works!
pwolfert 905bc5c
Use context clues from value and type instead of storing metadata
pwolfert 60d8ce5
Update unit tests and make sure we can get types for Figma from aliases
pwolfert 70e6c0c
Don't need these types anymore
pwolfert b8f1ad8
Add support for font weight tokens and update Figma
pwolfert fd7dd9c
Temporarily revert var printing and add some snapshot tests that will…
pwolfert 0885284
Whoops, I had used a different sort method to create the original sna…
pwolfert b8b3597
Lowercase some variables in Figma
pwolfert a063114
Remove duplicate pagination variable in Figma
pwolfert 5dcfdf8
Delete some more unused Figma variables
pwolfert 2ab241a
Add some comments
pwolfert f9be14f
Use new official Figma API types package
pwolfert c84f8b4
Some more doc comments
pwolfert 349b57e
Add a comment about the `ex` scale factor
pwolfert File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| FILE_KEY=lsJauJtKd9xJJp7f8Ks4hq | ||
| PERSONAL_ACCESS_TOKEN=YOUR_FIGMA_PERSONAL_ACCESS_TOKEN |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,45 @@ | ||
| # CMSDS Design Tokens | ||
|
|
||
| These folders contain all that is needed to generate and utilize the CMSDS Design Token Library. | ||
| This package is the source of truth for design tokens and contains scripts for exporting to useful formats and syncing with design tools. | ||
|
|
||
| This package is a dependency for most of the other packages in this repository, which expect to be able to reference CSS and SCSS files from this package's `dist` directory. In order for those packages to work correctly and be up-to-date, this package needs to be "built" using the build script. | ||
|
|
||
| We also sync our tokens with Figma so they can be used in designs across all CMS brands. Figma's multi-mode variable system allows us to define theme variants for each of our theme-level tokens and use them in a single, shared design library. Our design team can also update the tokens within Figma and sync them back to this code repository because Figma's variable tables are actually a really nice visual way of editing the tokens. | ||
|
|
||
| Folder structure is as follows: | ||
|
|
||
| ├── dist -- files exported during token build process | ||
| ├── sketch/cmsds-token-importer -- sketch plugin directory | ||
| │ ├── sketchtool -- command line tool for sketch plugins | ||
| │ └── src | ||
| │ ├── json-token-importer.js -- sketch token importer plugin code | ||
| │ └── manifest.json -- commands for plugin dropdown | ||
| ├── dist -- files exported during token build process | ||
| └── src | ||
| ├── index.ts -- command line functionality | ||
| ├── copy_themes.sh -- shell script to copy themes to child systems | ||
| ├── lib -- token exporters, utilities | ||
| ├── themes -- themes & component themes organized by brand name | ||
| └── tokens -- tokens by type | ||
| ├── css -- scripts for exporting to CSS/SCSS | ||
| ├── figma -- scripts for exporting to and importing from Figma | ||
| ├── lib -- code shared between scripts | ||
| └── tokens -- token files for both system- and theme-level tokens | ||
|
|
||
| ## Scripts | ||
|
|
||
| ## How to use | ||
| _Before you can use any of these package scripts, dependencies must be installed through `yarn install`, which can be done here or in the root of the repository._ | ||
|
|
||
| `yarn install` | ||
| `yarn build inputType outputType` | ||
| - `yarn build` | ||
| - Builds files that our other packages rely on, namely the CSS and SCSS files generated from our tokens | ||
| - `yarn clean` | ||
| - Cleans out the build (`dist`) folder | ||
| - `yarn sync:to-figma` and `yarn sync:from-figma` | ||
| - Connects to Figma's API to export our local tokens into Figma variables or updates our local tokens from Figma variables | ||
| - Requires `PERSONAL_ACCESS_TOKEN` and `FILE_KEY` environment variables to be defined, which can go in a `.env` file at the root of this package directory. The `FILE_KEY` refers to the Figma file we're syncing to (the library file). For a quick start, copy the `.env.example` to `.env` and replace `YOUR_FIGMA_PERSONAL_ACCESS_TOKEN`. | ||
|
|
||
| inputTypes: `tokens` (all tokens), `themes` (all themes) | ||
| outputTypes: `csv` (comma separated values), `json` (for sketch import or general use), `css-vars` (CSS custom properties, plus required SCSS variables) | ||
| ## Token structure | ||
|
|
||
| `yarn clean` - clean dist directory | ||
| `yarn dist` - copy themes from dist directory to appropriate settings folder for child systems | ||
| There are _three_ main tiers for our design tokens organized into _two_ general buckets: | ||
|
|
||
| ## CMSDS Theming | ||
| 1. System-level tokens | ||
| 2. Theme-level tokens, which derive their values from system-level tokens | ||
| 1. Theme-wide semantic tokens, which can be applied to multiple component tokens | ||
| 2. Component tokens | ||
|
|
||
| Themes for each brand are stored under `src/themes`. Themes are broken up into two files, the component theme variables and the main theme file. The component theme inherits the main theme file and uses it's variables for defining component-level visual settings. To create a new brand, copy the `core.ts` and `core-components.ts` files to new `brand.ts, brand-components.ts` files and modify as needed. | ||
| ### System tokens | ||
|
|
||
| After creating a new theme, you will need to update the `/src/copy_themes.sh` file, which runs during the main DS build process, to distribute the new themes to the appropriate folder. | ||
| System tokens can be thought of as the box of crayons that the whole system has to work with. They're standardized color families, spacing units, font information, etc. | ||
|
|
||
| ## Sketch | ||
| ### Theme tokens | ||
|
|
||
| The sketch plugin should generally only be used by the design team to import tokens into the main CMSDS libraries when libraries change. Instructions for use of the plugin are in the [cmsds-sketch-plugin](./sketch/cmsds-token-importer/README.md) folder. | ||
| Theme tokens apply to a specific brand or _theme_ and generally derive their values from system tokens. There are two categories for theme tokens. One is the set of high-level semantic tokens (which at the time of writing consists of colors and fonts), and the other is the component-specific tokens that deal with the most granular information like the background color of a particular type of button or the text color of a visited link. Semantic tokens can be applied to multiple component tokens and answer general questions like _what is the brand's primary color?_ Component tokens answer specific questions like _how is the brand's primary color applied?_ |
This file contains 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
This file contains 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
62 changes: 62 additions & 0 deletions
62
packages/design-system-tokens/src/__mocks__/tokens/Theme.cmsgov.json
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| { | ||
| "theme": { | ||
| "color": { | ||
| "primary-light": { | ||
| "$value": "{color.ocean.50}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| }, | ||
| "primary": { | ||
| "$value": "{color.ocean.100}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "component": { | ||
| "alert": { | ||
| "background-color": { | ||
| "$value": "{theme.color.primary-light}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| }, | ||
| "border-color": { | ||
| "$value": "{theme.color.primary}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "button": { | ||
| "border-radius": { | ||
| "$value": "{radius.small}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["CORNER_RADIUS"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
62 changes: 62 additions & 0 deletions
62
packages/design-system-tokens/src/__mocks__/tokens/Theme.core.json
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| { | ||
| "theme": { | ||
| "color": { | ||
| "primary-light": { | ||
| "$value": "{color.ocean.300}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| }, | ||
| "primary": { | ||
| "$value": "{color.ocean.500}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "component": { | ||
| "alert": { | ||
| "background-color": { | ||
| "$value": "{theme.color.primary-light}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| }, | ||
| "border-color": { | ||
| "$value": "{theme.color.primary}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["ALL_SCOPES"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "button": { | ||
| "border-radius": { | ||
| "$value": "{radius.small}", | ||
| "$extensions": { | ||
| "com.figma": { | ||
| "hiddenFromPublishing": false, | ||
| "scopes": ["CORNER_RADIUS"], | ||
| "codeSyntax": {} | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Description is now omitted if it's blank