chore: sync calcite components with design token updates

.cspell.json

@@ -3,6 +3,7 @@
     "calcite-dev",
     "css",
     "en-common-misspellings",
+    "fonts",
     "fullstack",
     "html",
     "html-symbol-entities",

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,30 +45,30 @@ 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)",
-        icon: "var(--calcite-ui-icon-color)",
+        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-icon-color)",
       },
       transparent: "transparent",
     },
@@ -164,8 +164,8 @@ export default {
         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-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)",
-        "outline-active": "0 0 0 1px var(--calcite-ui-brand)",
+        "border-bottom": "0 1px 0 var(--calcite-border-3)",
+        "outline-active": "0 0 0 1px var(--calcite-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)",
@@ -211,7 +211,7 @@ export default {
         },
       },
       opacity: {
-        disabled: "var(--calcite-ui-opacity-disabled)",
+        disabled: "var(--calcite-opacity-disabled)",
       },
       spacing: {
         0.5: "0.125rem",
@@ -232,16 +232,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)",
       },
     },
   },
@@ -256,23 +256,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-focus-color, var(--calcite-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-focus-color, var(--calcite-brand))",
+          "outline-offset": invert("2px", "--calcite-focus-offset-invert"),
         },
         ".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-focus-color, var(--calcite-brand))",
+          "outline-offset": invert("-2px", "--calcite-focus-offset-invert"),
         },
         ".focus-outset-danger": {
-          outline: "2px solid var(--calcite-ui-danger)",
-          "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"),
+          outline: "2px solid var(--calcite-danger)",
+          "outline-offset": invert("2px", "--calcite-focus-offset-invert"),
         },
         ".focus-inset-danger": {
-          outline: "2px solid var(--calcite-ui-danger)",
-          "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"),
+          outline: "2px solid var(--calcite-danger)",
+          "outline-offset": invert("-2px", "--calcite-focus-offset-invert"),
         },
         ".transition-default": {
           transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",

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);
   }
 }

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);
 }

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);
 }

packages/calcite-components/src/assets/styles/global.scss

@@ -1,16 +1,16 @@
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-light";
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-dark";
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-headless";
+@import "~@esri/calcite-design-tokens/dist/css/global.css";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/light";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/dark";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/global";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/index";
 @import "../../node_modules/@esri/calcite-base/dist/_index";
 
 /* CSS vars (@include in global) */
 @import "type";
 
 @mixin calcite-mode-light-extended {
-  // todo update include when calcite-colors updates to "mode" nomenclature
-  @include calcite-theme-light();
+  @include calcite-color-scheme-light();
   --calcite-mode-name: "light";
-  --calcite-ui-foreground-current: var(--calcite-semantic-ui-color-foreground-current-light);
   --calcite-ui-inverse: #{$blk-190};
   --calcite-ui-inverse-hover: #{$blk-200};
   --calcite-ui-inverse-press: #{$blk-210};
@@ -22,10 +22,8 @@
 }
 
 @mixin calcite-mode-dark-extended {
-  // todo update include when calcite-colors updates to "mode" nomenclature
-  @include calcite-theme-dark();
+  @include calcite-color-scheme-dark();
   --calcite-mode-name: "dark";
-  --calcite-ui-foreground-current: var(--calcite-semantic-ui-color-foreground-current-dark);
   --calcite-ui-inverse: #{$blk-005};
   --calcite-ui-inverse-hover: #{$blk-000};
   --calcite-ui-inverse-press: #{$blk-010};
@@ -38,28 +36,27 @@
 
 :root {
   @extend %type-vars;
-  @include calcite-theme-headless();
   @include calcite-mode-light-extended();
   @include floating-ui-base();
   @include animation-base();
 
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --calcite-popover-z-index: var(--calcite-app-z-index-popup);
-  --calcite-border-radius: var(--calcite-semantic-border-border-radius-round, 4px);
+  --calcite-popover-z-index: var(--calcite-z-index-popup);
+  --calcite-border-radius: var(--calcite-border-radius-round, 4px);
   --calcite-border-radius-base: 0;
   --calcite-panel-width-multiplier: 1;
   --calcite-ui-focus-offset-invert: 0; // should be 0 or 1
   --calcite-ui-icon-color: currentColor;
-  --calcite-ui-opacity-disabled: var(--calcite-core-opacity-50, 0.5);
+  --calcite-ui-opacity-disabled: var(--calcite-opacity-half, 0.5);
 
   @apply font-sans;
 }
 
 .calcite-mode-dark {
   @include calcite-mode-dark-extended();
-  --calcite-ui-background: var(--calcite-ui-background-1);
+  --calcite-ui-background: var(--calcite-color-background);
 }
 
 .calcite-mode-light {

packages/calcite-components/src/assets/styles/includes.scss

@@ -1,6 +1,7 @@
 @import "../../node_modules/@esri/calcite-colors/dist/colors";
 @import "../../node_modules/@esri/calcite-base/dist/_index";
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-headless";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/breakpoints";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/global";
 
 /* mixins & extensions */
 @import "animation";
@@ -122,12 +123,12 @@
 
     border-radius: 50%;
     border-color: transparent;
-    background-color: var(--calcite-ui-foreground-2);
+    background-color: var(--calcite-color-foreground-2);
 
     &:active,
     &:hover {
       @apply text-color-1;
-      background-color: var(--calcite-ui-foreground-3);
+      background-color: var(--calcite-color-foreground-3);
     }
 
     &:active {

packages/calcite-components/src/components/action-bar/action-bar.scss

@@ -41,12 +41,12 @@
 }
 
 ::slotted(calcite-action-group) {
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 :host([layout="horizontal"]) ::slotted(calcite-action-group) {
   border-block-end: 0;
-  border-inline-end: 1px solid var(--calcite-ui-border-3);
+  border-inline-end: 1px solid var(--calcite-color-border-3);
 }
 
 :host([layout="horizontal"][expand-disabled]) ::slotted(calcite-action-group:last-of-type) {

packages/calcite-components/src/components/alert/alert.scss

@@ -6,7 +6,7 @@
  * @prop --calcite-alert-width: Specifies the width of the component.
  */
 
-$border-style: 1px solid var(--calcite-ui-border-3);
+$border-style: 1px solid var(--calcite-color-border-3);
 
 :host {
   --calcite-alert-edge-distance: theme("spacing.8");
@@ -271,8 +271,8 @@ $border-style: 1px solid var(--calcite-ui-border-3);
   @apply text-color-link inline-flex;
 }
 
-$alertKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
-  "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
+$alertKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-info), "danger" var(--calcite-color-danger),
+  "success" var(--calcite-color-success), "warning" var(--calcite-color-warning);
 
 @each $alertKind in $alertKinds {
   $name: nth($alertKind, 1);
@@ -319,7 +319,7 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
   @apply absolute;
 }
 
-@container responsive-container (min-width: #{$breakpoint-width-xs}) {
+@container responsive-container (min-width: #{$calcite-container-size-width-xs-max}) {
   .content {
     @apply flex-row;
   }
@@ -336,7 +336,7 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
   }
 }
 
-@container responsive-container (min-width: #{$breakpoint-width-sm}) {
+@container responsive-container (min-width: #{$calcite-container-size-width-sm-max}) {
   .close {
     @apply self-stretch;
   }