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 space tokens #10012

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

Incorrect semantic space tokens #10012

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. 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. design-tokens Issues requiring design tokens. 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
Milestone
2024-11-26 - 3.0....

Comments

@ashetland
Copy link
Contributor

Check existing issues

Actual Behavior

The tokens to define padding or margin at 10px and 24px are missing.

Expected Behavior

The tokens match the variables specified in the Calcite UI Kit.

Reproduction Sample

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

Reproduction Steps

Compare space.json with the Calcite UI Kit.

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-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

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. design-tokens Issues requiring design tokens. 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 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. design-tokens Issues requiring design tokens. labels Aug 8, 2024
@geospatialem geospatialem added estimate - 2 Small fix or update, may require updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Aug 8, 2024
@alisonailea alisonailea mentioned this issue Aug 14, 2024
Open
14 tasks
@geospatialem geospatialem added the design-tokens Issues requiring design tokens. label Sep 10, 2024
@geospatialem geospatialem added this to the 2024-10-29 - Oct Release milestone Sep 10, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Sep 10, 2024
@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
@jcfranco jcfranco 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. 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. design-tokens Issues requiring design tokens. 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
Projects
None yet
Milestone
2024-11-26 - 3.0.0 Nov Breaking Chang...
Development

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