feat!: reduce global design tokens in calcite.css

.cspell.json

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

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",

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 {

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

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,13 +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)",
-        "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)",
@@ -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-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",

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