Skip to content
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

Incorrect semantic size tokens #10014

Closed
2 tasks done
ashetland opened this issue Aug 8, 2024 · 2 comments
Closed
2 tasks done

Incorrect semantic size tokens #10014

ashetland opened this issue Aug 8, 2024 · 2 comments
Assignees
@geospatialem @SkyeSeitz @DitwanP @ashetland @brittneytewks
Labels
4 - verified Issues that have been released and confirmed resolved. breaking change Issues and pull requests with code changes that are not backwards compatible. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. calcite-design-tokens Issues specific to the @esri/calcite-design-tokens package. estimate - 2 Small fix or update, may require updates to tests. figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Milestone
2024-11-26 - 3.0....

Comments

@ashetland
Copy link
Contributor

ashetland commented Aug 8, 2024 •
edited by alisonailea
Loading

Check existing issues

Actual Behavior

The semantic size tokens do not match the size variables in the Calcite UI Kit.

Expected Behavior

I would expect that they match to following
CleanShot 2024-08-13 at 10 07 26@2x

Reproduction Sample

https://github.com/Esri/calcite-design-system/blob/dev/packages/calcite-design-tokens/src/semantic/size.json

Reproduction Steps

Compare size.json to the size collection in Figma.

Reproduction Version

v2.11.1

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

  • @esri/calcite-design-tokens

Esri team

Calcite (design)
@ashetland ashetland added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Aug 8, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. calcite-design-tokens Issues specific to the @esri/calcite-design-tokens package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Aug 8, 2024
@ashetland ashetland added breaking change Issues and pull requests with code changes that are not backwards compatible. 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Aug 8, 2024
@geospatialem geospatialem added this to the 2024-11-19 - Nov Release milestone Aug 8, 2024
@geospatialem geospatialem added estimate - 2 Small fix or update, may require updates to tests. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible. and removed needs triage Planning workflow - pending design/dev review. labels Aug 8, 2024
This was referenced Aug 13, 2024
Open
Open
@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 13, 2024
@ashetland ashetland added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Nov 13, 2024
This was referenced Nov 14, 2024
Closed
Merged
alisonailea added a commit that referenced this issue Nov 27, 2024
@alisonailea
fix(tokens)!: correct space and size tokens (#10727)
febb217 
**Related Issue:** #10012 #10014

## Summary

Corrects space and size tokens to align with the Calcite UI Kit and uses
REM based tokens for the web platform token output. Updates Calcite
Components to ensure there are no visual breaking changes to components
using the updates size and space tokens.

BREAKING CHANGE: Size and Space token values have changed. Line Height
tokens exported for JS and ES6 are now unitless.

### Size

calcite-size-px: 1px;
calcite-size-xxxs: 0.75rem; // 12px was 2px
calcite-size-xxs: 0.875rem; // 14px was 4px
calcite-size-xs: 1rem; // 16px was 6px
calcite-size-sm: 1.5rem; // 24px was 8px
calcite-size-sm-plus; // removed
calcite-size-md: 2rem; // 32px was 12px
calcite-size-md-plus; // removed
calcite-size-lg: 2.75rem; // 44px was 16px
calcite-size-xl: 3rem; // 48px was 20px
calcite-size-xxl: 4rem; //  64px was 24px
calcite-size-xxxl: 6rem;  // 96px was 32px

### Space

calcite-spacing-none: 0; // new
calcite-spacing-px: 1px;
calcite-spacing-base: 2px;
calcite-spacing-xxs: 0.25rem; // 4px
calcite-spacing-xs: 0.375rem; // 6px
calcite-spacing-sm: 0.5rem; // 8px
calcite-spacing-sm-plus: 0.625rem; // new
calcite-spacing-md: 0.75rem; // 12px
calcite-spacing-md-plus: 0.875rem; // new
calcite-spacing-lg: 1rem; // 16px was 14px
calcite-spacing-xl: 1.25rem; // 20px was 16px
calcite-spacing-xxl: 1.5rem; // 24px was 20px
calcite-spacing-xxxl: 2rem; // 32px

### Pixel based tokens are now categorized under "fixed"

calcite-size-fixed-xxxl: 32px; // deprecated
calcite-size-fixed-xxl: 24px; // deprecated
calcite-size-fixed-xl: 20px; // deprecated
calcite-size-fixed-lg: 16px; // deprecated
calcite-size-fixed-md: 12px; // deprecated
calcite-size-fixed-sm: 8px; // deprecated
calcite-size-fixed-xs: 6px; // deprecated
calcite-size-fixed-xxs: 4px; // deprecated
calcite-size-fixed-xxxs: 2px; // deprecated

calcite-spacing-fixed-lg: 14px; // deprecated
calcite-spacing-fixed-md: 12px; // deprecated
calcite-spacing-fixed-sm: 8px; // deprecated
calcite-spacing-fixed-xl: 16px; // deprecated
calcite-spacing-fixed-xs: 6px; // deprecated
calcite-spacing-fixed-xxl: 20px; // deprecated
calcite-spacing-fixed-xxs: 4px; // deprecated
calcite-spacing-fixed-xxxl: 32px; // deprecated
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 27, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 28, 2024
@geospatialem
Copy link
Member

Verified on the dev branch.

benelan pushed a commit that referenced this issue Feb 8, 2025
@alisonailea @benelan
fix(tokens)!: correct space and size tokens (#10727)
13c2df8 
**Related Issue:** #10012 #10014

## Summary

Corrects space and size tokens to align with the Calcite UI Kit and uses
REM based tokens for the web platform token output. Updates Calcite
Components to ensure there are no visual breaking changes to components
using the updates size and space tokens.

BREAKING CHANGE: Size and Space token values have changed. Line Height
tokens exported for JS and ES6 are now unitless.

### Size

calcite-size-px: 1px;
calcite-size-xxxs: 0.75rem; // 12px was 2px
calcite-size-xxs: 0.875rem; // 14px was 4px
calcite-size-xs: 1rem; // 16px was 6px
calcite-size-sm: 1.5rem; // 24px was 8px
calcite-size-sm-plus; // removed
calcite-size-md: 2rem; // 32px was 12px
calcite-size-md-plus; // removed
calcite-size-lg: 2.75rem; // 44px was 16px
calcite-size-xl: 3rem; // 48px was 20px
calcite-size-xxl: 4rem; //  64px was 24px
calcite-size-xxxl: 6rem;  // 96px was 32px

### Space

calcite-spacing-none: 0; // new
calcite-spacing-px: 1px;
calcite-spacing-base: 2px;
calcite-spacing-xxs: 0.25rem; // 4px
calcite-spacing-xs: 0.375rem; // 6px
calcite-spacing-sm: 0.5rem; // 8px
calcite-spacing-sm-plus: 0.625rem; // new
calcite-spacing-md: 0.75rem; // 12px
calcite-spacing-md-plus: 0.875rem; // new
calcite-spacing-lg: 1rem; // 16px was 14px
calcite-spacing-xl: 1.25rem; // 20px was 16px
calcite-spacing-xxl: 1.5rem; // 24px was 20px
calcite-spacing-xxxl: 2rem; // 32px

### Pixel based tokens are now categorized under "fixed"

calcite-size-fixed-xxxl: 32px; // deprecated
calcite-size-fixed-xxl: 24px; // deprecated
calcite-size-fixed-xl: 20px; // deprecated
calcite-size-fixed-lg: 16px; // deprecated
calcite-size-fixed-md: 12px; // deprecated
calcite-size-fixed-sm: 8px; // deprecated
calcite-size-fixed-xs: 6px; // deprecated
calcite-size-fixed-xxs: 4px; // deprecated
calcite-size-fixed-xxxs: 2px; // deprecated

calcite-spacing-fixed-lg: 14px; // deprecated
calcite-spacing-fixed-md: 12px; // deprecated
calcite-spacing-fixed-sm: 8px; // deprecated
calcite-spacing-fixed-xl: 16px; // deprecated
calcite-spacing-fixed-xs: 6px; // deprecated
calcite-spacing-fixed-xxl: 20px; // deprecated
calcite-spacing-fixed-xxs: 4px; // deprecated
calcite-spacing-fixed-xxxl: 32px; // deprecated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@SkyeSeitz SkyeSeitz

@DitwanP DitwanP

@ashetland ashetland

@brittneytewks brittneytewks

Labels
4 - verified Issues that have been released and confirmed resolved. breaking change Issues and pull requests with code changes that are not backwards compatible. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. calcite-design-tokens Issues specific to the @esri/calcite-design-tokens package. estimate - 2 Small fix or update, may require updates to tests. figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Projects
None yet
Milestone
2024-11-26 - 3.0.0 Nov Breaking Chang...
Development

No branches or pull requests
6 participants
@alisonailea @geospatialem @SkyeSeitz @DitwanP @ashetland @brittneytewks