fix!: align tokens with figma variables

packages/calcite-components/calcite-preset.ts

@@ -48,12 +48,12 @@ export default {
       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)",
+      info: "var(--calcite-color-status-info)",
+      success: "var(--calcite-color-status-success)",
+      warning: "var(--calcite-color-status-warning)",
+      danger: "var(--calcite-color-status-danger)",
+      "danger-hover": "var(--calcite-color-status-danger-hover)",
+      "danger-press": "var(--calcite-color-status-danger-press)",
       background: {
         background: "var(--calcite-color-background)",
         foreground: {
@@ -159,10 +159,10 @@ 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": "var(--calcite-box-shadow-sm)",
+        "1-lg": "var(--calcite-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": "var(--calcite-box-shadow-md)",
+        "2-lg": "var(--calcite-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-color-border-3)",
         "border-top": "0 -1px 0 var(--calcite-color-border-3)",
@@ -269,11 +269,11 @@ export default {
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".focus-outset-danger": {
-          outline: "2px solid var(--calcite-color-danger)",
+          outline: "2px solid var(--calcite-color-status-danger)",
           "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
         },
         ".focus-inset-danger": {
-          outline: "2px solid var(--calcite-color-danger)",
+          outline: "2px solid var(--calcite-color-status-danger)",
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".transition-default": {

packages/calcite-components/src/05-custom-theme.stories.mdx

@@ -13,12 +13,12 @@ export const Template = () =>
       --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-status-info: ${color("--calcite-color-status-info", "#00619b")};
+      --calcite-color-status-success: ${color("--calcite-color-status-success", "#35ac46")};
+      --calcite-color-status-warning: ${color("--calcite-color-status-warning", "#edd317")};
+      --calcite-color-status-danger: ${color("--calcite-color-status-danger", "#d83020")};
+      --calcite-color-status-danger-hover: ${color("--calcite-color-status-danger-hover", "#a82b1e")};
+      --calcite-color-status-danger-press: ${color("--calcite-color-status-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")};

packages/calcite-components/src/components/alert/alert.e2e.ts

@@ -239,8 +239,8 @@ describe("calcite-alert", () => {
       page = await newE2EPage({ html: alertSnippet });
       progressBarStyles = await page.evaluate(() => {
         const alert = document.querySelector("calcite-alert");
-        alert.style.setProperty("--calcite-color-background-transparent-dismiss", "white");
-        return window.getComputedStyle(alert).getPropertyValue("--calcite-color-background-transparent-dismiss");
+        alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
+        return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
       });
       expect(progressBarStyles).toEqual("white");
     });
@@ -273,7 +273,7 @@ describe("calcite-alert", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-dismiss: ${overrideStyle};
+            --calcite-color-transparent-tint: ${overrideStyle};
           }
         </style>
         <div>${alertSnippet}</div>`,

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

@@ -10,6 +10,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
 :host {
   --calcite-alert-edge-distance: theme("spacing.8");
+  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);
   @apply block;
 }
 
@@ -129,7 +130,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
     block;
     block-size: 2px;
     content: "";
-    background-color: var(--calcite-color-background-transparent-dismiss);
+    background-color: var(--calcite-alert-dismiss-progress-background);
     inset-inline-end: 0;
   }
 }
@@ -258,8 +259,9 @@ $border-style: 1px solid var(--calcite-color-border-3);
   @apply text-color-link inline-flex;
 }
 
-$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);
+$alertKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-status-info),
+  "danger" var(--calcite-color-status-danger), "success" var(--calcite-color-status-success),
+  "warning" var(--calcite-color-status-warning);
 
 @each $alertKind in $alertKinds {
   $name: nth($alertKind, 1);

packages/calcite-components/src/components/button/button.e2e.ts

@@ -454,13 +454,11 @@ describe("calcite-button", () => {
       page = await newE2EPage({ html: buttonSnippet });
       const buttonStyles = await page.evaluate(() => {
         buttonEl = document.querySelector("calcite-button");
-        buttonEl.style.setProperty("--calcite-color-background-transparent-hover", "rgba(34, 23, 200, 0.4)");
-        buttonEl.style.setProperty("--calcite-color-background-transparent-press", "rgba(1, 20, 44, 0.1");
+        buttonEl.style.setProperty("--calcite-color-transparent-hover", "rgba(34, 23, 200, 0.4)");
+        buttonEl.style.setProperty("--calcite-color-transparent-press", "rgba(1, 20, 44, 0.1");
         return {
-          hoverFocus: window
-            .getComputedStyle(buttonEl)
-            .getPropertyValue("--calcite-color-background-transparent-hover"),
-          active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-background-transparent-press"),
+          hoverFocus: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-transparent-hover"),
+          active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-transparent-press"),
         };
       });
       expect(buttonStyles.hoverFocus).toEqual("rgba(34, 23, 200, 0.4)");
@@ -507,7 +505,7 @@ describe("calcite-button", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-hover: ${overrideStyle};
+            --calcite-color-transparent-hover: ${overrideStyle};
           }
         </style>
         <div>${buttonSnippet}</div>`,

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

@@ -337,17 +337,17 @@
     &:hover {
       @apply border-color-danger-hover;
       color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
     }
     &:focus {
       @apply border-color-danger;
       color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
     }
     &:active {
       @apply border-color-danger-press;
       color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
     }
     calcite-loader {
       color: theme("colors.danger");
@@ -435,17 +435,17 @@
     &:hover {
       @apply border-color-danger-hover;
       color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
     }
     &:focus {
       @apply border-color-danger;
       color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
     }
     &:active {
       @apply border-color-danger-press;
       color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
     }
     calcite-loader {
       color: theme("colors.danger");
@@ -513,10 +513,10 @@
     @apply bg-transparent;
     &:hover,
     &:focus {
-      background-color: var(--calcite-color-background-transparent-hover);
+      background-color: var(--calcite-color-transparent-hover);
     }
     &:active {
-      background-color: var(--calcite-color-background-transparent-press);
+      background-color: var(--calcite-color-transparent-press);
     }
   }
 }

packages/calcite-components/src/components/chip/chip.e2e.ts

@@ -194,7 +194,7 @@ describe("calcite-chip", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-hover: ${overrideStyle};
+            --calcite-color-transparent-hover: ${overrideStyle};
           }
         </style>
         <div>${chipSnippet}</div>`,

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

@@ -165,8 +165,8 @@
   border-radius: 50%;
   align-content: center;
   justify-content: center;
-  --calcite-chip-transparent-hover: var(--calcite-color-background-transparent-hover);
-  --calcite-chip-transparent-press: var(--calcite-color-background-transparent-press);
+  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);
+  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);
   &:hover {
     background-color: var(--calcite-chip-transparent-hover);
   }

packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss

@@ -34,7 +34,7 @@ $size-l: 28px;
   }
 
   line {
-    stroke: var(--calcite-color-danger);
+    stroke: var(--calcite-color-status-danger);
   }
 }
 

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -73,7 +73,7 @@ import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./r
 import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
 import { XButton, CSS as XButtonCSS } from "../functional/XButton";
 import { getIconScale } from "../../utils/component";
-import { calciteSize_15 } from "@esri/calcite-design-tokens/dist/es6/core";
+import { calciteSize48 } from "@esri/calcite-design-tokens/dist/es6/core.js";
 
 interface ItemData {
   label: string;
@@ -868,7 +868,7 @@ export class Combobox
     const chipContainerElWidth = getElementWidth(chipContainerEl);
     const { fontSize, fontFamily } = getComputedStyle(textInput);
     const inputTextWidth = getTextWidth(placeholder, `${fontSize} ${fontFamily}`);
-    const inputWidth = (inputTextWidth || parseInt(calciteSize_15)) + chipContainerElGap;
+    const inputWidth = (inputTextWidth || parseInt(calciteSize48)) + chipContainerElGap;
     const allSelectedIndicatorChipElWidth = getElementWidth(allSelectedIndicatorChipEl);
     const selectedIndicatorChipElWidth = getElementWidth(selectedIndicatorChipEl);
     const largestSelectedIndicatorChipWidth = Math.max(

packages/calcite-components/src/components/input-message/input-message.scss

@@ -33,15 +33,15 @@
 }
 
 :host([status="invalid"]) .calcite-input-message-icon {
-  color: var(--calcite-color-danger);
+  color: var(--calcite-color-status-danger);
 }
 
 :host([status="warning"]) .calcite-input-message-icon {
-  color: var(--calcite-color-warning);
+  color: var(--calcite-color-status-warning);
 }
 
 :host([status="valid"]) .calcite-input-message-icon {
-  color: var(--calcite-color-success);
+  color: var(--calcite-color-status-success);
 }
 
 :host([status="idle"]) .calcite-input-message-icon {