Skip to content

refactor(tokens): Update JSON files to support Tokens Studio management#11852

Merged
jcfranco merged 16 commits intodevfrom
matgalla/optimize-for-tokens-studio
Apr 7, 2025
Merged

refactor(tokens): Update JSON files to support Tokens Studio management#11852
jcfranco merged 16 commits intodevfrom
matgalla/optimize-for-tokens-studio

Conversation

@matgalla
Copy link
Copy Markdown
Contributor

@matgalla matgalla commented Apr 2, 2025

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:

  • Import current token files into TStudio (TStudio automatically moves things around, but there should be no functional change)
  • Separate light/dark semantic color tokens into their own files so that TStudio can use them as themes
  • Change all instances of "type": "size" to "type": "sizing" For TStudio organization
  • Change all instances of "type": "space" to "type": "spacing" For TStudio organization
  • Change all instances of "type": "breakpoint" to "type": "dimension" For TStudio organization
  • 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

@matgalla matgalla added the refactor Issues tied to code that needs to be significantly reworked. label Apr 2, 2025
@matgalla matgalla added this to the 2025-04-29 - Apr Milestone milestone Apr 2, 2025
@matgalla matgalla requested a review from jcfranco April 2, 2025 21:22
@matgalla matgalla self-assigned this Apr 2, 2025
@jcfranco jcfranco requested a review from benelan April 4, 2025 20:24
@jcfranco
Copy link
Copy Markdown
Member

jcfranco commented Apr 4, 2025

FWIW, here's the expected test failure before updating the snapshots.

@jcfranco jcfranco marked this pull request as ready for review April 4, 2025 22:57
@jcfranco jcfranco requested a review from alisonailea as a code owner April 4, 2025 22:57
@jcfranco jcfranco requested a review from macandcheese April 4, 2025 22:58
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 5, 2025
Copy link
Copy Markdown
Contributor

@benelan benelan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
}
});
Copy link
Copy Markdown
Contributor

@benelan benelan Apr 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I'll add that to #11860.

@jcfranco jcfranco merged commit ddc5e3c into dev Apr 7, 2025
16 checks passed
@jcfranco jcfranco deleted the matgalla/optimize-for-tokens-studio branch April 7, 2025 19:13
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>
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:


![image](https://github.com/user-attachments/assets/9fd59ef8-ead2-43be-b80f-9a6cd8e89f14)


Adds `medium-saturation` colors that are missing when compared to the
original [Calcite Colors](https://github.com/Esri/calcite-colors) repo:


![image](https://github.com/user-attachments/assets/89f58c96-7f25-40b6-a6ae-1efd998c100f)


Fixes incorrect value for `--calcite-color-vibrant-blue-v-bb-180`:


![image](https://github.com/user-attachments/assets/f250cf04-b0de-48b8-9e99-581541ec7b68)


Fixes incorrect value for `--calcite-color-dark-green-d-gg-430`:


![image](https://github.com/user-attachments/assets/80eef2e1-26d7-4311-b9d8-69353cf83b1a)


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:


![image](https://github.com/user-attachments/assets/9fd59ef8-ead2-43be-b80f-9a6cd8e89f14)


Adds `medium-saturation` colors that are missing when compared to the
original [Calcite Colors](https://github.com/Esri/calcite-colors) repo:


![image](https://github.com/user-attachments/assets/89f58c96-7f25-40b6-a6ae-1efd998c100f)


Fixes incorrect value for `--calcite-color-vibrant-blue-v-bb-180`:


![image](https://github.com/user-attachments/assets/f250cf04-b0de-48b8-9e99-581541ec7b68)


Fixes incorrect value for `--calcite-color-dark-green-d-gg-430`:


![image](https://github.com/user-attachments/assets/80eef2e1-26d7-4311-b9d8-69353cf83b1a)


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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pr ready for visual snapshots Adding this label will run visual snapshot testing. refactor Issues tied to code that needs to be significantly reworked.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants