Incorrect semantic size tokens #10014
Assignees
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
Comments
This was referenced Aug 13, 2024
This was referenced Nov 14, 2024
alisonailea
added a commit
that referenced
this issue
Nov 27, 2024
**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
|
Installed and assigned for verification. |
|
Verified on the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
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 team
Calcite (design)
The text was updated successfully, but these errors were encountered: