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 Nov 29, 2023
1 parent 5fca601 commit a17daf2
Show file tree
Hide file tree
Showing 318 changed files with 8,433 additions and 14,866 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
97 changes: 4 additions & 93 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,13 @@
"jest": "29.7.0",
"jest-axe": "8.0.0",
"jest-cli": "29.7.0",
"json-to-ts": "1.7.0",
"lerna": "7.1.5",
"lint-staged": "13.2.3",
"markdownlint-cli": "0.34.0",
"postcss": "8.4.31",
"prettier": "2.8.8",
"puppeteer": "21.5.0",
"quicktype-core": "23.0.76",
"quicktype-core": "23.0.79",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rimraf": "5.0.5",
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/.storybook/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<style>
body {
font-family: var(--calcite-sans-family);
color: var(--calcite-ui-text-1);
background-color: var(--calcite-ui-background);
color: var(--calcite-color-text-1);
background-color: var(--calcite-color-background);
}

calcite-slider {
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/FAQ.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ If we want to swap the foreground and text colors, we can use the variables:

```css
calcite-notice {
--calcite-ui-foreground-1: #151515;
--calcite-ui-text-1: #ffffff;
--calcite-color-foreground-1: #151515;
--calcite-color-text-1: #ffffff;
}
```

Expand Down
93 changes: 46 additions & 47 deletions packages/calcite-components/calcite-preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ export default {
theme: {
borderColor: ({ theme }): object => ({
color: {
1: "var(--calcite-ui-border-1)",
2: "var(--calcite-ui-border-2)",
3: "var(--calcite-ui-border-3)",
input: "var(--calcite-ui-border-input)",
1: "var(--calcite-color-border-1)",
2: "var(--calcite-color-border-2)",
3: "var(--calcite-color-border-3)",
input: "var(--calcite-color-border-input)",
transparent: theme("colors.transparent"),
},
"color-brand": theme("colors.brand"),
Expand All @@ -45,29 +45,29 @@ export default {
}),
colors: {
current: "currentColor",
brand: "var(--calcite-ui-brand)",
"brand-hover": "var(--calcite-ui-brand-hover)",
"brand-press": "var(--calcite-ui-brand-press)",
info: "var(--calcite-ui-info)",
success: "var(--calcite-ui-success)",
warning: "var(--calcite-ui-warning)",
danger: "var(--calcite-ui-danger)",
"danger-hover": "var(--calcite-ui-danger-hover)",
"danger-press": "var(--calcite-ui-danger-press)",
brand: "var(--calcite-color-brand)",
"brand-hover": "var(--calcite-color-brand-hover)",
"brand-press": "var(--calcite-color-brand-press)",
info: "var(--calcite-color-info)",
success: "var(--calcite-color-success)",
warning: "var(--calcite-color-warning)",
danger: "var(--calcite-color-danger)",
"danger-hover": "var(--calcite-color-danger-hover)",
"danger-press": "var(--calcite-color-danger-press)",
background: {
background: "var(--calcite-ui-background)",
background: "var(--calcite-color-background)",
foreground: {
1: "var(--calcite-ui-foreground-1)",
2: "var(--calcite-ui-foreground-2)",
3: "var(--calcite-ui-foreground-3)",
1: "var(--calcite-color-foreground-1)",
2: "var(--calcite-color-foreground-2)",
3: "var(--calcite-color-foreground-3)",
},
},
color: {
1: "var(--calcite-ui-text-1)",
2: "var(--calcite-ui-text-2)",
3: "var(--calcite-ui-text-3)",
inverse: "var(--calcite-ui-text-inverse)",
link: "var(--calcite-ui-text-link)",
1: "var(--calcite-color-text-1)",
2: "var(--calcite-color-text-2)",
3: "var(--calcite-color-text-3)",
inverse: "var(--calcite-color-text-inverse)",
link: "var(--calcite-color-text-link)",
icon: "var(--calcite-ui-icon-color)",
},
transparent: "transparent",
Expand Down Expand Up @@ -159,14 +159,13 @@ export default {
boxShadow: {
0: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
1: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
"1-lg": "0 4px 16px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.04)",
"1-lg": "var(--calcite-box-shadow-sm)",
"1-sm": "0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08)",
2: "0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)",
"2-lg": "0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)",
"2-lg": "var(--calcite-box-shadow-md)",
"2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)",
"border-bottom": "0 1px 0 var(--calcite-ui-border-3)",
"border-top": "0 -1px 0 var(--calcite-ui-border-3)",
"outline-active": "0 0 0 1px var(--calcite-ui-brand)",
"border-bottom": "0 1px 0 var(--calcite-color-border-3)",
"outline-active": "0 0 0 1px var(--calcite-color-brand)",
none: "none",
xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
Expand Down Expand Up @@ -212,7 +211,7 @@ export default {
},
},
opacity: {
disabled: "var(--calcite-ui-opacity-disabled)",
disabled: "var(--calcite-opacity-disabled)",
},
spacing: {
0.5: "0.125rem",
Expand All @@ -234,16 +233,16 @@ export default {
menu: "45vh",
},
zIndex: {
deep: "var(--calcite-app-z-index-deep)",
default: "var(--calcite-app-z-index)",
sticky: "var(--calcite-app-z-index-sticky)",
header: "var(--calcite-app-z-index-header)",
toast: "var(--calcite-app-z-index-toast)",
dropdown: "var(--calcite-app-z-index-dropdown)",
overlay: "var(--calcite-app-z-index-overlay)",
modal: "var(--calcite-app-z-index-modal)",
popover: "var(--calcite-app-z-index-popup)",
tooltip: "var(--calcite-app-z-index-tooltip)",
deep: "var(--calcite-z-index-deep)",
default: "var(--calcite-z-index)",
sticky: "var(--calcite-z-index-sticky)",
header: "var(--calcite-z-index-header)",
toast: "var(--calcite-z-index-toast)",
dropdown: "var(--calcite-z-index-dropdown)",
overlay: "var(--calcite-z-index-overlay)",
modal: "var(--calcite-z-index-modal)",
popover: "var(--calcite-z-index-popup)",
tooltip: "var(--calcite-z-index-tooltip)",
},
},
},
Expand All @@ -258,23 +257,23 @@ export default {
"outline-color": "transparent",
},
".focus-normal": {
outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))",
outline: "2px solid var(--calcite-color-brand-hover, var(--calcite--color-brand))",
},
".focus-outset": {
outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))",
"outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"),
outline: "2px solid var(--calcite-color-brand)",
"outline-offset": invert("2px", "--calcite-offset-invert-focus"),
},
".focus-inset": {
outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))",
"outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"),
outline: "2px solid var(--calcite-color-brand)",
"outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
},
".focus-outset-danger": {
outline: "2px solid var(--calcite-ui-danger)",
"outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"),
outline: "2px solid var(--calcite-color-danger)",
"outline-offset": invert("2px", "--calcite-offset-invert-focus"),
},
".focus-inset-danger": {
outline: "2px solid var(--calcite-ui-danger)",
"outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"),
outline: "2px solid var(--calcite-color-danger)",
"outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
},
".transition-default": {
transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",
Expand Down
8 changes: 4 additions & 4 deletions packages/calcite-components/conventions/Styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ To make this work, inside a component's SASS file, _you must use colors from the

// 👍 using the CSS var will inherit correctly
:host {
color: var(--calcite-ui-brand);
color: var(--calcite-color-brand);
}
```

Expand All @@ -63,23 +63,23 @@ Since Calcite Components might be used in many different contexts such as config

```css
:root {
--calcite-ui-brand: red;
--calcite-color-brand: red;
}
```

You can apply these overrides to individual components as well:

```css
calcite-slider {
--calcite-ui-brand: red;
--calcite-color-brand: red;
}
```

Or, add a class to the specific instance:

```css
.my-custom-theme {
--calcite-ui-brand: red;
--calcite-color-brand: red;
}
```

Expand Down
Loading

0 comments on commit a17daf2

Please sign in to comment.