feat!: reduce global design tokens in calcite.css (#8215)

**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>
Esri · Nov 23, 2023 · f0f1f25 · f0f1f25
1 parent d761007
commit f0f1f25
Show file tree

Hide file tree

Showing 317 changed files with 8,429 additions and 14,773 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -3,6 +3,7 @@
     "calcite-dev",
     "css",
     "en-common-misspellings",
+    "fonts",
     "fullstack",
     "html",
     "html-symbol-entities",

diff --git a/package.json b/package.json
@@ -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",

diff --git a/packages/calcite-components/.storybook/preview-head.html b/packages/calcite-components/.storybook/preview-head.html
@@ -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 {

diff --git a/packages/calcite-components/FAQ.md b/packages/calcite-components/FAQ.md
@@ -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;
 }
 ```
 

diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -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"),
@@ -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",
@@ -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)",
@@ -212,7 +211,7 @@ export default {
         },
       },
       opacity: {
-        disabled: "var(--calcite-ui-opacity-disabled)",
+        disabled: "var(--calcite-opacity-disabled)",
       },
       spacing: {
         0.5: "0.125rem",
@@ -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)",
       },
     },
   },
@@ -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",

diff --git a/packages/calcite-components/conventions/Styling.md b/packages/calcite-components/conventions/Styling.md
@@ -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);
 }
 ```
 
@@ -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;
 }
 ```
 

diff --git a/packages/calcite-components/src/05-custom-theme.stories.mdx b/packages/calcite-components/src/05-custom-theme.stories.mdx
@@ -10,28 +10,28 @@ import markdown from "./custom-theme.md";
 export const Template = () =>
   `<div
     style="
-      --calcite-ui-brand: ${color("--calcite-ui-brand", "#007ac2")};
-      --calcite-ui-brand-hover: ${color("--calcite-ui-brand-hover", "#00619b")};
-      --calcite-ui-brand-press: ${color("--calcite-ui-brand-press", "#004874")};
-      --calcite-ui-info: ${color("--calcite-ui-info", "#00619b")};
-      --calcite-ui-success: ${color("--calcite-ui-success", "#35ac46")};
-      --calcite-ui-warning: ${color("--calcite-ui-warning", "#edd317")};
-      --calcite-ui-danger: ${color("--calcite-ui-danger", "#d83020")};
-      --calcite-ui-danger-hover: ${color("--calcite-ui-danger-hover", "#a82b1e")};
-      --calcite-ui-danger-press: ${color("--calcite-ui-danger-press", "#7c1d13")};
-      --calcite-ui-background: ${color("--calcite-ui-background", "#f8f8f8")};
-      --calcite-ui-foreground-1: ${color("--calcite-ui-foreground-1", "#ffffff")};
-      --calcite-ui-foreground-2: ${color("--calcite-ui-foreground-2", "#f3f3f3")};
-      --calcite-ui-foreground-3: ${color("--calcite-ui-foreground-3", "#eaeaea")};
-      --calcite-ui-text-1: ${color("--calcite-ui-text-1", "#151515")};
-      --calcite-ui-text-2: ${color("--calcite-ui-text-2", "#4a4a4a")};
-      --calcite-ui-text-3: ${color("--calcite-ui-text-3", "#6a6a6a")};
-      --calcite-ui-text-inverse: ${color("--calcite-ui-text-inverse", "#ffffff")};
-      --calcite-ui-text-link: ${color("--calcite-ui-text-link", "#00619b")};
-      --calcite-ui-border-1: ${color("--calcite-ui-border-1", "#cacaca")};
-      --calcite-ui-border-2: ${color("--calcite-ui-border-2", "#d4d4d4")};
-      --calcite-ui-border-3: ${color("--calcite-ui-border-3", "#dfdfdf")};
-      --calcite-ui-border-input: ${color("--calcite-ui-border-input", "#949494")};
+      --calcite-color-brand: ${color("--calcite-color-brand", "#007ac2")};
+      --calcite-color-brand-hover: ${color("--calcite-color-brand-hover", "#00619b")};
+      --calcite-color-brand-press: ${color("--calcite-color-brand-press", "#004874")};
+      --calcite-color-info: ${color("--calcite-color-info", "#00619b")};
+      --calcite-color-success: ${color("--calcite-color-success", "#35ac46")};
+      --calcite-color-warning: ${color("--calcite-color-warning", "#edd317")};
+      --calcite-color-danger: ${color("--calcite-color-danger", "#d83020")};
+      --calcite-color-danger-hover: ${color("--calcite-color-danger-hover", "#a82b1e")};
+      --calcite-color-danger-press: ${color("--calcite-color-danger-press", "#7c1d13")};
+      --calcite-color-background: ${color("--calcite-color-background", "#f8f8f8")};
+      --calcite-color-foreground-1: ${color("--calcite-color-foreground-1", "#ffffff")};
+      --calcite-color-foreground-2: ${color("--calcite-color-foreground-2", "#f3f3f3")};
+      --calcite-color-foreground-3: ${color("--calcite-color-foreground-3", "#eaeaea")};
+      --calcite-color-text-1: ${color("--calcite-color-text-1", "#151515")};
+      --calcite-color-text-2: ${color("--calcite-color-text-2", "#4a4a4a")};
+      --calcite-color-text-3: ${color("--calcite-color-text-3", "#6a6a6a")};
+      --calcite-color-text-inverse: ${color("--calcite-color-text-inverse", "#ffffff")};
+      --calcite-color-text-link: ${color("--calcite-color-text-link", "#00619b")};
+      --calcite-color-border-1: ${color("--calcite-color-border-1", "#cacaca")};
+      --calcite-color-border-2: ${color("--calcite-color-border-2", "#d4d4d4")};
+      --calcite-color-border-3: ${color("--calcite-color-border-3", "#dfdfdf")};
+      --calcite-color-border-input: ${color("--calcite-color-border-input", "#949494")};
       --calcite-ui-icon-color: ${color("--calcite-ui-icon-color", "currentColor")};
     "
   >

diff --git a/packages/calcite-components/src/assets/styles/_focus.scss b/packages/calcite-components/src/assets/styles/_focus.scss
@@ -6,7 +6,7 @@
 
 // place on the element that receives focus style, while in focus
 @mixin focus-style-outset() {
-  outline: 2px solid var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-color-brand);
   outline-offset: 2px;
 }
 
@@ -20,8 +20,8 @@
 */
 @mixin focus-box-shadow($base-shadow: null) {
   @if $base-shadow {
-    box-shadow: $base-shadow, 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+    box-shadow: $base-shadow, 0 0 0 2px var(--calcite-color-foreground-1), 0 0 0 4px var(--calcite-color-brand);
   } @else {
-    box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1), 0 0 0 4px var(--calcite-color-brand);
   }
 }
diff --git a/packages/calcite-components/src/assets/styles/_host.scss b/packages/calcite-components/src/assets/styles/_host.scss
@@ -4,7 +4,7 @@
   * {
     box-sizing: border-box;
   }
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
+  background-color: var(--calcite-color-foreground-1);
+  color: var(--calcite-color-text-2);
   font-size: var(--calcite-font-size--1);
 }
diff --git a/packages/calcite-components/src/assets/styles/_shadow.scss b/packages/calcite-components/src/assets/styles/_shadow.scss
@@ -9,6 +9,6 @@
   --calcite-shadow-2: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   --calcite-shadow-2-hover: 0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08);
   --calcite-shadow-2-press: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
-  --calcite-shadow-border-bottom: 0 1px 0 var(--calcite-ui-border-3);
-  --calcite-shadow-border-active: 0 0 0 1px var(--calcite-ui-brand-press);
+  --calcite-shadow-border-bottom: 0 1px 0 var(--calcite-color-border-3);
+  --calcite-shadow-border-active: 0 0 0 1px var(--calcite-color-brand-press);
 }