Skip to content

Convert Tokens to Style Dictionary 4 and Token Studio 1 #11391

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.

Sign up for GitHub

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

Jump to bottom
Closed
80 of 85 tasks
alisonailea opened this issue Jan 27, 2025 · 4 comments
Closed
80 of 85 tasks

Convert Tokens to Style Dictionary 4 and Token Studio 1 #11391

alisonailea opened this issue Jan 27, 2025 · 4 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2025-04-29 - Apr ...

Comments

@alisonailea
Copy link
Contributor

alisonailea commented Jan 27, 2025 •
edited by jcfranco
Loading

Check existing issues

Description

Requires a major refactor of calcite-design-tokens

This will remove several (now unnecessary) custom token transformer functions. Align with the latest Token Studio and Style Dictionary versions.

Blocked issues: #10051

Requirements checkoff

  • Reorganize files to align with the new StyleDictionary config format
  • Create new config files
  • Refactor or (re)write StyleDictionary functions
    • Transformers to match SD format
      • Calcite Transformation Group
      • Transform name to replace "-" with "minus" and "+" with "plus"
      • Transform name to remove the Tier
      • Transform name to remove the word "default"
      • Transform value of boxshadow for CSS platforms
      • Transform any number value to calculate sum
      • Transform px value to rem for space, size, font-size, etc.
      • Transform breakpoint value to px
    • Headers to match SD format
      • Default Calcite header for generated files
      • Calcite header for deprecated generated files
    • Formats to match SD format & normalize file names (aka "global --> semantic")
      • /css
        • breakpoints.css
        • classes.css (typography classes)
        • core.css
        • dark.css
        • light.css
        • semantic.css
        • global.css (deprecate)
        • index.css
          • import semantic.css and classes.css
          • Set light vars at :root
          • @media (prefers-color-scheme: light) { .calcite-mode-auto { …light vars } }
          • @media (prefers-color-scheme: dark) { .calcite-mode-auto { …dark vars } }
          • .calcite-mode-light { …light vars }
          • .calcite-mode-dark { …dark vars }
      • /scss
        • breakpoints.scss
        • classes.scss (typography mixins)
        • core.scss
        • dark.scss
        • light.scss
        • semantic.scss
        • global.css
          • Deprecate
          • merge semantic, light, & dark
        • index.scss
          • Import breakpoints.scss, global.scss, & mixins.scss
          • @mixin calcite-mode-light { …light vars }
          • @mixin calcite-mode-dark { …dark vars }
      • /es6
        • breakpoints.js
        • core.js
        • dark.js
        • light.js
        • semantic.js
        • global.js
          • merge semantic, light, & dark
          • deprecate
      • /js (internal)
        • core.js
        • global.js
          • merge semantic, light, & dark
          • deprecate
        • dark.js
        • light.js
        • semantic.js
      • /docs (internal)
        • core.json
        • global.json
          • merge semantic, light, & dark
          • deprecate
        • light.json
        • dark.json
        • semantic.json
    • Filters to match SD format
      • Source
      • Core
      • Breakpoints
      • Global
      • Light
      • Dark
      • Typography
  • Setup calcite color themes in Token Studio in Figma

Acceptance Criteria

@tokens-studio/sd-transforms is at or above v1.2.9
style-dictionary is at or above v4.3.2

Run npm run build

packages/calcite-design-tokens/dist includes the following assets

/css
  breakpoints.css
  core.css
  dark.css
  index.css
  light.css
  semantic.css
/scss
  breakpoints.scss
  core.scss
  dark.scss
  index.scss
  light.scss
  semantic.scss
/es6
  breakpoints.js
  core.js
  dark.js
  global.js
  light.js
  semantic.js
/js
  core.js
  dark.js
  global.js
  light.js
  semantic.js
/docs
  core.json
  dark.json
  global.json
  light.json
  semantic.json

Relevant Info

Required to resolve:

#10618
#10993
#8856

Which Component

tokens

Example Use Case

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

N/A
@alisonailea alisonailea added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Jan 27, 2025
@github-actions github-actions bot added the impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone label Jan 27, 2025
@alisonailea alisonailea added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Jan 27, 2025
@alisonailea alisonailea self-assigned this Jan 27, 2025
@geospatialem
Copy link
Member

@alisonailea Can you provide an estimate, priority, and timeline for the above?

@alisonailea alisonailea mentioned this issue Feb 10, 2025
Open
9 tasks
@brittneytewks brittneytewks added p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed needs triage Planning workflow - pending design/dev review. labels Feb 10, 2025
@alisonailea alisonailea mentioned this issue Feb 18, 2025
Open
@geospatialem geospatialem assigned jcfranco and unassigned alisonailea Feb 24, 2025
@geospatialem geospatialem added the resolution: refine For issues we support, but additional details are needed prior to dev work. label Feb 24, 2025
This was referenced Feb 28, 2025
Closed
Merged
@jcfranco jcfranco added estimate - 8 Requires input from team, consider smaller steps. and removed resolution: refine For issues we support, but additional details are needed prior to dev work. labels Mar 1, 2025
@jcfranco jcfranco mentioned this issue Mar 7, 2025
Merged
jcfranco added a commit that referenced this issue Mar 7, 2025
@jcfranco
fix: allow global focus color token to inherit fallback value (#11711)
f8c63e3 
**Related Issue:** #10510  

## Summary  

Removes the global focus color introduced in
[#10512](#10512) to
match the behavior of the deprecated `--calcite-ui-focus-color`.
Previously, `--calcite-color-focus` was defined at `:root`, preventing
it from inheriting updates to `--calcite-color-brand` (its fallback).

This is **not** considered a breaking change because:  

* it only affects outputs that are not publicly documented
* the default color will still be applied as expected
* `--calcite-color-focus` remains available for overriding the focus
color

**Note**: #11713
will restore `--calcite-color-focus` after #11391 lands.
jcfranco added a commit that referenced this issue Mar 11, 2025
@jcfranco
fix: allow global focus color token to inherit fallback value (#11711)
8581d50 
**Related Issue:** #10510  

## Summary  

Removes the global focus color introduced in
[#10512](#10512) to
match the behavior of the deprecated `--calcite-ui-focus-color`.
Previously, `--calcite-color-focus` was defined at `:root`, preventing
it from inheriting updates to `--calcite-color-brand` (its fallback).

This is **not** considered a breaking change because:  

* it only affects outputs that are not publicly documented
* the default color will still be applied as expected
* `--calcite-color-focus` remains available for overriding the focus
color

**Note**: #11713
will restore `--calcite-color-focus` after #11391 lands.
benelan pushed a commit that referenced this issue Mar 26, 2025
@jcfranco @benelan
fix: allow global focus color token to inherit fallback value (#11711)
a732c8d 
**Related Issue:** #10510  

## Summary  

Removes the global focus color introduced in
[#10512](#10512) to
match the behavior of the deprecated `--calcite-ui-focus-color`.
Previously, `--calcite-color-focus` was defined at `:root`, preventing
it from inheriting updates to `--calcite-color-brand` (its fallback).

This is **not** considered a breaking change because:  

* it only affects outputs that are not publicly documented
* the default color will still be applied as expected
* `--calcite-color-focus` remains available for overriding the focus
color

**Note**: #11713
will restore `--calcite-color-focus` after #11391 lands.
@jcfranco jcfranco mentioned this issue Mar 30, 2025
Merged
@matgalla matgalla mentioned this issue Apr 2, 2025
Merged
6 tasks
jcfranco added a commit that referenced this issue Apr 7, 2025
@matgalla @jcfranco
refactor(tokens): Update JSON files to support Tokens Studio manageme…
ddc5e3c 
…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 <[email protected]>
@matgalla matgalla mentioned this issue Apr 8, 2025
Open
5 tasks
@matgalla
Copy link
Contributor

matgalla commented Apr 8, 2025

Removing the task "Design to ensure typography styles are correctly setup before importing into Token Studio" from this issue in favor of a dedicated issue #11902.

@jcfranco jcfranco added 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. and removed 2 - in development Issues that are actively being worked on. labels Apr 8, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 8, 2025

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Apr 8, 2025
@jcfranco jcfranco mentioned this issue Apr 8, 2025
Open
3 tasks
@matgalla matgalla mentioned this issue Apr 9, 2025
Merged
5 tasks
matgalla added a commit that referenced this issue Apr 9, 2025
@matgalla @jcfranco
refactor(tokens): Remove unnecessary token data (#11915)
5363a1f 
**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 <[email protected]>
@DitwanP
Copy link
Contributor

DitwanP commented Apr 10, 2025

🍠 Verified locally

@DitwanP DitwanP closed this as completed Apr 10, 2025
@DitwanP DitwanP added 4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. and removed 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. labels Apr 10, 2025
benelan pushed a commit that referenced this issue May 14, 2025
@matgalla @jcfranco @benelan
refactor(tokens): Update JSON files to support Tokens Studio manageme…
ced6f79 
…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 <[email protected]>
benelan pushed a commit that referenced this issue May 14, 2025
@matgalla @jcfranco @benelan
refactor(tokens): Remove unnecessary token data (#11915)
0f8675f 
**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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2025-04-29 - Apr Milestone
Development

No branches or pull requests
6 participants
@jcfranco @alisonailea @geospatialem @matgalla @DitwanP @brittneytewks