Skip to content

Commit

Permalink
feat!: reduce global design tokens in calcite.css (#8215)
Browse files Browse the repository at this point in the history
**Related Issue:** #7325 #8141

Turns out, reducing the tokens set globally in calcite.css required a
refactor of how tokens were built. During discussions with Calcite
designers we also used this opportunity to update tokens to support
Figma Variables, composite tokens, and fix mis-alignments with our token
naming scheme. This work introduces breaking changes to tokens.

BREAKING CHANGE:
Platform output:
- removes component tokens from global output
- new platform output files.
    - Replaces “headless” with “global”
    - removes “calcite” from filenames

Package.json exports:
- `@esri/calcite-design-tokens/css/headless` was replaced by
    `@esri/calcite-design-tokens/css/global`
- `@esri/calcite-design-tokens/scss/headless` was replaced by
    `@esri/calcite-design-tokens/scss/global`
- `@esri/calcite-design-tokens/js/headless` was replaced by
    `@esri/calcite-design-tokens/js/global`
- `@esri/calcite-design-tokens/es6/headless` was replaced by
    `@esri/calcite-design-tokens/es6/global`

Token paths and values:
- Border
    - Border width tokens now use t-shirt sizing
        - `Border.border-width.0` is now `border.width.sm`
        - `border.border-width.1` is now `border.width.base`
        - `border.border-width.2` is now `border.width.md`
        - `border.border-width.3` is now `border.width.lg`
        - `border.border-width.4` is now `border.width.xl`
    - Unused border radius tokens were removed
        - `Core.border.border-radius.0`
        - `Core.border.border-radius.2`
        - `Core.border.border-radius.3`
    - Border-radius tokens now use t-shirt sizing
        - `semantic.ui.border.border-radius` is `semantic.border.radius.default`
        - `Core.border.border-radius.1` is now `semantic.border.radius.sm`
        - `Core.border.border-radius.4` is now `semantic.border.radius.md`
        - `Core.border.border-radius.5` is now `semantic.border.radius.lg`
        - `Core.border.border-radius.6` is now `semantic.border.radius.xl`
- Sizing
    - `core.sizing.` tokens are now `core.size.default.`
- Breakpoints
    - breakpoint tokens are now in their own separate output file for most
        platform output (except JS)
    - breakpoint token path has been updated `.breakpoint.` is now
        `.container-size.`
    - delete unused `breakpoint.cols` tokens
- Box Shadow
    - global box shadow tokens now use t-shirt sizing
        - `box-shadow.0` = `box-shadow.none`
        - `box-shadow.1` = `box-shadow.sm`
        - `box-shadow.2` = `box-shadow.md`
- Colors
    - remove “palette” from core color paths
        - `core.color.palette.high-saturation` is now
            `core.color.high-saturation`
- Light Mode and Dark Mode
    - Semantic color tokens now use the composite color scheme token type to
        reference "light" and "dark" mode instead of having separate light and
        dark tokens.
    - .calcite-mode-light and .calcite-mode-dark classes as well as the
        color scheme media queries are now provided via
        `calcite-design-tokens/css/index.css`
    - light and dark mode mixins are provided via
        `calcite-design-tokens/css/index.scss`
    - remove "ui" from output platform names in favor of "color"
        - --calcite-ui-background = --calcite-color-background
        - --calcite-ui-brand = --calcite-color-brand
        - --calcite-button-transparent-hover = --calcite-color-background-transparent-press
        - --calcite-alert-dismiss-progress-background
        - --calcite-color-background-transparent-dismiss
        - --calcite-link-blue-underline = --calcite-color-brand-underline
        - --calcite-scrim-background-internal = --calcite-color-background-transparent
- Font
    - Size
        - Font sizes now use t-shirt sizing
            - `font.font-size.0` = `semantic.font.size.xs`
            - `font.font-size.1` = `semantic.font.size.sm`
            - `font.font-size.2` = `semantic.font.size.default`
            - `font.font-size.3` = `semantic.font.size.md`
            - `font.font-size.4` = `semantic.font.size.lg`
            - `font.font-size.5` = `semantic.font.size.xl`
            - `font.font-size.6` = `semantic.font.size.xxl`
        - Unsused font-sizes have been removed
            - `font.font-size.7`
            - `font.font-size.8`

---------

Co-authored-by: Ben Elan <no-reply@benelan.dev>
Co-authored-by: JC Franco <jfranco@esri.com>
  • Loading branch information
3 people committed Dec 2, 2023
1 parent 0948c1a commit 335d010
Show file tree
Hide file tree
Showing 317 changed files with 17,651 additions and 19,399 deletions.
1 change: 1 addition & 0 deletions .cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"calcite-dev",
"css",
"en-common-misspellings",
"fonts",
"fullstack",
"html",
"html-symbol-entities",
Expand Down
Loading

0 comments on commit 335d010

Please sign in to comment.