fix(tokens)!: correct space and size tokens #10727
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alisonailea
added
breaking change
BREAKING CHANGES moves all old pixel based size tokens to a “fixed” category and marks them for deprecation. new default size tokens are different sizes new default size tokens convert to REMs when built for web platforms
BREAKING CHANGES moves all old pixel based space tokens to a “fixed” category and marks them for deprecation. new default space tokens are different values new default space tokens convert to REMs when built for web platforms
jcfranco
force-pushed
the
astump/10012-10014-space-size-tokens
branch
from
8c377c7 to
2569cfb
Compare
jcfranco
requested changes
Nov 15, 2024
There was a problem hiding this comment.
Can you update the breaking change footer to follow the conventional commits spec (see example in conventions and example PRs)? Otherwise, it won't get picked up in the changelog.
jcfranco
requested changes
Nov 16, 2024
There was a problem hiding this comment.
We'll need to keep and deprecate the spacing-named tokens in favor of space tokens since these were not deprecated beforehand.
#10012 wasn't marked as breaking, but If we restore the spacing ones, I think we could bundle it with #10014 for the 3.0 release, as they're related. I can update our 3.0 doc afterward. cc @ashetland @geospatialem
packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
Outdated
Show resolved
Hide resolved
jcfranco
approved these changes
Nov 22, 2024
There was a problem hiding this comment.
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
⭐🚀🚀🚀🚀⭐🚀⭐⭐⭐⭐⭐🚀⭐🚀🚀🚀🚀⭐⭐🚀🚀🚀⭐⭐🚀🚀⭐⭐🚀⭐⭐⭐🚀⭐🚀🚀🚀🚀⭐🚀⭐
⭐🚀⭐⭐🚀⭐🚀⭐⭐⭐⭐⭐🚀⭐🚀⭐⭐⭐⭐🚀⭐⭐⭐⭐🚀⭐⭐🚀⭐🚀🚀⭐🚀🚀⭐🚀⭐⭐⭐⭐🚀⭐
⭐🚀🚀🚀🚀⭐🚀⭐⭐🚀⭐⭐🚀⭐🚀🚀🚀⭐⭐⭐🚀🚀⭐⭐🚀⭐⭐🚀⭐🚀⭐🚀⭐🚀⭐🚀🚀🚀⭐⭐🚀⭐
⭐🚀⭐⭐🚀⭐🚀⭐🚀⭐🚀⭐🚀⭐🚀⭐⭐⭐⭐⭐⭐⭐🚀⭐🚀⭐⭐🚀⭐🚀⭐⭐⭐🚀⭐🚀⭐⭐⭐⭐⭐⭐
⭐🚀⭐⭐🚀⭐⭐🚀⭐⭐⭐🚀⭐⭐🚀🚀🚀🚀⭐🚀🚀🚀⭐⭐⭐🚀🚀⭐⭐🚀⭐⭐⭐🚀⭐🚀🚀🚀🚀⭐🚀⭐
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
Show resolved
Hide resolved
…i/calcite-design-system into ali-openPR/10012-10014-space-size-tokens-refactor
alisonailea
added
the
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
This reverts commit f18208b.
alisonailea
added
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
geospatialem
modified the milestones:
2024-12-17 - Dec Milestone,
2024-11-26 - 3.0.0 Nov Breaking Change Milestone
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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