refactor(tokens): Update JSON files to support Tokens Studio management#11852
Merged
refactor(tokens): Update JSON files to support Tokens Studio management#11852
Conversation
This was referenced Apr 4, 2025
Member
|
FWIW, here's the expected test failure before updating the snapshots. |
jcfranco
approved these changes
Apr 7, 2025
macandcheese
approved these changes
Apr 7, 2025
benelan
approved these changes
Apr 7, 2025
Contributor
benelan
left a comment
There was a problem hiding this comment.
LGTM! I have one code suggestion but it can be done in a follow up if this needs to land ASAP
Comment on lines
+11
to
+20
| const sameValueThemeTokens = light.allTokens | ||
| .filter((token) => isThemed(token)) | ||
| .filter((token, index) => token.value === dark.allTokens[index].value); | ||
| const keyToToken = new Map<string, DesignToken>(); | ||
|
|
||
| sameValueThemeTokens.forEach((token) => { | ||
| if (token.key) { | ||
| keyToToken.set(token.key, token); | ||
| } | ||
| }); |
Contributor
There was a problem hiding this comment.
Suggested change
| const sameValueThemeTokens = light.allTokens | |
| .filter((token) => isThemed(token)) | |
| .filter((token, index) => token.value === dark.allTokens[index].value); | |
| const keyToToken = new Map<string, DesignToken>(); | |
| sameValueThemeTokens.forEach((token) => { | |
| if (token.key) { | |
| keyToToken.set(token.key, token); | |
| } | |
| }); | |
| const keyToToken = new Map<string, DesignToken>(); | |
| light.allTokens.forEach((token, index) => { | |
| if (isThemed(token) && token.value === dark.allTokens[index].value && token.key) { | |
| keyToToken.set(token.key, token); | |
| } | |
| }); | |
I think this could be simplified, can you confirm?
5 tasks
matgalla
added a commit
that referenced
this pull request
Apr 9, 2025
**Related Issue:** #11391 ## Summary Since #11655 allows us to build the final variables with the base token info, we don't need the excess token metadata. This PR removes all the fields within `attributes` from core and semantic tokens aside from the `category` field, which we will keep to assist with niche token instances and documentation purposes. ## Criteria for completion - [x] Remove `attributes` (except for `category`) from all semantic and core tokens - [x] Ensure that organization and token values are retained - [x] Ensure that the token build process is unaffected ## Previous steps - [x] #11852 ## Next steps - Add missing core color tokens - Fix incorrect core color values - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11581 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>
6 tasks
matgalla
added a commit
that referenced
this pull request
Apr 11, 2025
…11924) **Related Issue:** #11581 ## Summary Adds `low-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo:  Adds `medium-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo:  Fixes incorrect value for `--calcite-color-vibrant-blue-v-bb-180`:  Fixes incorrect value for `--calcite-color-dark-green-d-gg-430`:  NOTE: In this PR, Tokens Studio changed some minor formatting for all otherwise unchanged token JSON files. This is due to Tokens Studio bypassing the linting process. Addressed in @jcfranco's recent PR here: #11918 This PR is a part of a series of updates that address token-related issues and set them up for use with Tokens Studio. ## Criteria for completion - [x] change `--calcite-color-vibrant-blue-v-bb-180` token value to #0089DE - [x] change `--calcite-color-dark-green-d-gg-430` token value to #11AD1D - [x] add all `low-saturation` color tokens - [x] add all `medium-saturation` color tokens ## Previous steps - [x] #11655 - [x] #11852 ## Next steps - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>
benelan
pushed a commit
that referenced
this pull request
May 14, 2025
…nt (#11852) **Related Issue:** #11391 ## Summary This update makes changes necessary for the modification of Calcite tokens within Tokens Studio. No changes are made to the final tokens themselves in this update. Criteria for completion: - [x] Import current token files into TStudio (TStudio automatically moves things around, but there should be no functional change) - [x] Separate light/dark semantic color tokens into their own files so that TStudio can use them as themes - [x] Change all instances of `"type": "size"` to `"type": "sizing"` For TStudio organization - [x] Change all instances of `"type": "space"` to `"type": "spacing"` For TStudio organization - [x] Change all instances of `"type": "breakpoint"` to `"type": "dimension"` For TStudio organization - [x] Add TStudio themes for different token types This update is one step in the process of moving our token management over to Tokens Studio. ## Next steps - Update snapshot tests - Remove token attributes - Add missing core color tokens - Fix incorrect core color values - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Resolve #10050 - Resolve #11565 - Resolve #11581 - Resolve #11725 - Audit the value differences between tokens and Figma variables (mainly for percentages, and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>
benelan
pushed a commit
that referenced
this pull request
May 14, 2025
**Related Issue:** #11391 ## Summary Since #11655 allows us to build the final variables with the base token info, we don't need the excess token metadata. This PR removes all the fields within `attributes` from core and semantic tokens aside from the `category` field, which we will keep to assist with niche token instances and documentation purposes. ## Criteria for completion - [x] Remove `attributes` (except for `category`) from all semantic and core tokens - [x] Ensure that organization and token values are retained - [x] Ensure that the token build process is unaffected ## Previous steps - [x] #11852 ## Next steps - Add missing core color tokens - Fix incorrect core color values - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11581 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>
benelan
pushed a commit
that referenced
this pull request
May 14, 2025
…11924) **Related Issue:** #11581 ## Summary Adds `low-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo:  Adds `medium-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo:  Fixes incorrect value for `--calcite-color-vibrant-blue-v-bb-180`:  Fixes incorrect value for `--calcite-color-dark-green-d-gg-430`:  NOTE: In this PR, Tokens Studio changed some minor formatting for all otherwise unchanged token JSON files. This is due to Tokens Studio bypassing the linting process. Addressed in @jcfranco's recent PR here: #11918 This PR is a part of a series of updates that address token-related issues and set them up for use with Tokens Studio. ## Criteria for completion - [x] change `--calcite-color-vibrant-blue-v-bb-180` token value to #0089DE - [x] change `--calcite-color-dark-green-d-gg-430` token value to #11AD1D - [x] add all `low-saturation` color tokens - [x] add all `medium-saturation` color tokens ## Previous steps - [x] #11655 - [x] #11852 ## Next steps - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Related Issue: #11391
Summary
This update makes changes necessary for the modification of Calcite tokens within Tokens Studio. No changes are made to the final tokens themselves in this update.
Criteria for completion:
"type": "size"to"type": "sizing"For TStudio organization"type": "space"to"type": "spacing"For TStudio organization"type": "breakpoint"to"type": "dimension"For TStudio organizationThis update is one step in the process of moving our token management over to Tokens Studio.
Next steps