feat: tailwind to use calcite-design-tokens instead of calcite-colors (…

…#6884)

## Summary
Calcite Design Tokens provides the same color variables as Calcite
Colors. This should not change the styling of calcite-components or the
experience for the design system consumers. This sets us up for success
moving forward as Calcite Components may now align to the style tokens
established by the Calcite design team.

calcite-preset.ts

@@ -231,15 +231,15 @@ export default {
         menu: "45vh"
       },
       zIndex: {
-        deep: "-999999",
-        default: "1",
-        sticky: "300",
-        header: "400",
-        toast: "500",
-        dropdown: "600",
-        overlay: "700",
-        modal: "800",
-        popover: "900",
+        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: "901"
       }
     }

package.json

@@ -85,6 +85,7 @@
     "@babel/preset-react": "7.18.6",
     "@esri/calcite-base": "^1.2.0",
     "@esri/calcite-colors": "6.1.0",
+    "@esri/calcite-design-tokens": "1.0.0",
     "@esri/calcite-ui-icons": "3.22.4",
     "@esri/eslint-plugin-calcite-components": "0.2.2",
     "@stencil-community/eslint-plugin": "0.5.0",

src/assets/styles/global.scss

@@ -1,4 +1,6 @@
-@import "./node_modules/@esri/calcite-colors/dist/colors.scss";
+@import "./node_modules/@esri/calcite-design-tokens/dist/scss/calcite-light.scss";
+@import "./node_modules/@esri/calcite-design-tokens/dist/scss/calcite-dark.scss";
+@import "./node_modules/@esri/calcite-design-tokens/dist/scss/calcite-headless.scss";
 @import "./node_modules/@esri/calcite-base/dist/_index.scss";
 
 /* CSS vars (@include in global) */
@@ -8,7 +10,7 @@
   // todo update include when calcite-colors updates to "mode" nomenclature
   @include calcite-theme-light();
   --calcite-mode-name: "light";
-  --calcite-ui-foreground-current: #c7eaff;
+  --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};
@@ -23,7 +25,7 @@
   // todo update include when calcite-colors updates to "mode" nomenclature
   @include calcite-theme-dark();
   --calcite-mode-name: "dark";
-  --calcite-ui-foreground-current: #214155;
+  --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};
@@ -36,24 +38,26 @@
 
 :root {
   @extend %type-vars;
+  @include calcite-theme-headless();
   @include calcite-mode-light-extended();
 
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  --calcite-border-radius: 4px;
+  --calcite-popover-z-index: var(--calcite-app-z-index-popup);
+  --calcite-border-radius: var(--calcite-semantic-border-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: 0.5;
+  --calcite-ui-opacity-disabled: var(--calcite-core-opacity-50, 0.5);
 
   @apply font-sans;
 }
 
 .calcite-mode-dark {
   @include calcite-mode-dark-extended();
+  --calcite-ui-background: var(--calcite-ui-background-1);
 }
 
 .calcite-mode-light {