@esri/calcite-design-tokens 4.0.0-next.1 → 4.0.0-next.11

package/dist/scss/breakpoints.scss

@@ -2,9 +2,12 @@
 // Calcite Design System
 // Do not edit directly, this file was auto-generated.
 
-$calcite-container-size-height-xxs-min: 0; // Small handheld devices and mini-windows
-$calcite-container-size-width-xxs-min: 0; // Small handheld devices and mini-windows
-$calcite-container-size-height-xxs-max: 154px; // Small handheld devices and mini-windows
+$calcite-container-size-height-xxs-min: 0; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-height-2xs-min: 0; // Small handheld devices and mini-windows
+$calcite-container-size-width-xxs-min: 0; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-width-2xs-min: 0; // Small handheld devices and mini-windows
+$calcite-container-size-height-xxs-max: 154px; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-height-2xs-max: 154px; // Small handheld devices and mini-windows
 $calcite-container-size-height-xs-min: 155px; // Handheld devices
 $calcite-container-size-height-xs-max: 328px; // Handheld devices
 $calcite-container-size-height-sm-min: 329px; // Small tablets
@@ -14,7 +17,8 @@ $calcite-container-size-height-md-max: 678px; // Small laptops
 $calcite-container-size-height-lg-min: 679px; // Large laptops and desktop computers
 $calcite-container-size-height-lg-max: 854px; // Large laptops and desktop computers
 $calcite-container-size-height-xl-min: 855px; // Projectors and televisions
-$calcite-container-size-width-xxs-max: 320px; // Small handheld devices and mini-windows
+$calcite-container-size-width-xxs-max: 320px; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-width-2xs-max: 320px; // Small handheld devices and mini-windows
 $calcite-container-size-width-xs-min: 321px; // Handheld devices
 $calcite-container-size-width-xs-max: 476px; // Handheld devices
 $calcite-container-size-width-sm-min: 477px; // Small tablets

package/dist/scss/core.scss

@@ -564,6 +564,20 @@ $calcite-size-relative-162: 162.5%;
 $calcite-size-relative-200: 200%;
 $calcite-size-relative-auto: auto;
 $calcite-size-relative-normal: normal;
+$calcite-size-rem-1: 1rem;
+$calcite-size-rem-2: 2rem;
+$calcite-size-rem-3: 3rem;
+$calcite-size-rem-4: 4rem;
+$calcite-size-rem-5: 5rem;
+$calcite-size-rem-0-625: 0.625rem;
+$calcite-size-rem-0-75: 0.75rem;
+$calcite-size-rem-0-875: 0.875rem;
+$calcite-size-rem-1-125: 1.125rem;
+$calcite-size-rem-1-25: 1.25rem;
+$calcite-size-rem-1-5: 1.5rem;
+$calcite-size-rem-1-625: 1.625rem;
+$calcite-size-rem-2-5: 2.5rem;
+$calcite-size-rem-3-5: 3.5rem;
 $calcite-z-index-0: -999999;
 $calcite-z-index-1: 1;
 $calcite-z-index-3: 300;

package/dist/scss/dark.scss

@@ -2,11 +2,11 @@
 // Calcite Design System
 // Do not edit directly, this file was auto-generated.
 
-$calcite-color-background: #363636;
+$calcite-color-background: #212121;
 $calcite-color-background-none: rgba(255, 255, 255, 0);
 $calcite-color-foreground-1: #2b2b2b;
-$calcite-color-foreground-2: #212121;
-$calcite-color-foreground-3: #141414;
+$calcite-color-foreground-2: #363636;
+$calcite-color-foreground-3: #404040;
 $calcite-color-foreground-current: #2b465f; // deprecated, use --calcite-color-surface-highlight instead
 $calcite-color-surface-highlight: #2b465f;
 $calcite-color-transparent: rgba(255, 255, 255, 0);
@@ -33,8 +33,8 @@ $calcite-color-status-danger: #fe583e;
 $calcite-color-status-danger-hover: #ff0015;
 $calcite-color-status-danger-press: #d90012;
 $calcite-color-inverse: #f7f7f7;
-$calcite-color-inverse-hover: #ffffff;
-$calcite-color-inverse-press: #f2f2f2;
+$calcite-color-inverse-hover: #f2f2f2;
+$calcite-color-inverse-press: #ebebeb;
 $calcite-color-text-1: #ffffff;
 $calcite-color-text-2: #bfbfbf;
 $calcite-color-text-3: #9e9e9e;

package/dist/scss/global.scss

@@ -32,7 +32,20 @@ $calcite-font-size: 14px;
 $calcite-font-size-md: 16px;
 $calcite-font-size-lg: 18px;
 $calcite-font-size-xl: 20px;
-$calcite-font-size-xxl: 24px;
+$calcite-font-size-xxl: 24px; // Deprecated, use --calcite-font-size-2xl instead.
+$calcite-font-size-2xl: 24px;
+$calcite-font-size-relative-xs: 0.625rem;
+$calcite-font-size-relative-sm: 0.75rem;
+$calcite-font-size-relative-base: 0.875rem;
+$calcite-font-size-relative-md: 1rem;
+$calcite-font-size-relative-lg: 1.125rem;
+$calcite-font-size-relative-xl: 1.25rem;
+$calcite-font-size-relative-2xl: 1.625rem;
+$calcite-font-size-relative-3xl: 2rem;
+$calcite-font-size-relative-4xl: 2.5rem;
+$calcite-font-size-relative-5xl: 3rem;
+$calcite-font-size-relative-6xl: 3.5rem;
+$calcite-font-size-relative-7xl: 4rem;
 $calcite-font-style-emphasis: italic; // used in ratings
 $calcite-font-line-height-fixed-sm: 12px;
 $calcite-font-line-height-fixed-base: 16px;
@@ -50,6 +63,18 @@ $calcite-font-line-height-relative-snug: 1.375; // 1.375
 $calcite-font-line-height-relative-normal: 1.5; // 1.5
 $calcite-font-line-height-relative-relaxed: 1.625; // 1.625
 $calcite-font-line-height-relative-loose: 2; // 2
+$calcite-font-line-height-xs: 0.75rem;
+$calcite-font-line-height-sm: 1rem;
+$calcite-font-line-height-base: 1rem;
+$calcite-font-line-height-md: 1.25rem;
+$calcite-font-line-height-lg: 1.5rem;
+$calcite-font-line-height-xl: 1.5rem;
+$calcite-font-line-height-2xl: 2rem;
+$calcite-font-line-height-3xl: 2.5rem;
+$calcite-font-line-height-4xl: 3rem;
+$calcite-font-line-height-5xl: 4rem;
+$calcite-font-line-height-6xl: 4rem;
+$calcite-font-line-height-7xl: 5rem;
 $calcite-font-letter-spacing-tight: -0.4px; // Deprecated
 $calcite-font-letter-spacing-normal: 0; // Deprecated
 $calcite-font-letter-spacing-wide: 0.4px; // Deprecated
@@ -77,15 +102,19 @@ $calcite-size-fixed-xl: 20px; // deprecated
 $calcite-size-fixed-xxl: 24px; // deprecated
 $calcite-size-fixed-xxxl: 32px; // deprecated
 $calcite-size-px: 1px;
-$calcite-size-xxxs: 0.75rem;
-$calcite-size-xxs: 0.875rem;
+$calcite-size-xxxs: 0.75rem; // Deprecated, use --calcite-size-3xs instead.
+$calcite-size-3xs: 0.75rem;
+$calcite-size-xxs: 0.875rem; // Deprecated, use --calcite-size-2xs instead.
+$calcite-size-2xs: 0.875rem;
 $calcite-size-xs: 1rem;
 $calcite-size-sm: 1.5rem;
 $calcite-size-md: 2rem;
 $calcite-size-lg: 2.75rem;
 $calcite-size-xl: 3rem;
-$calcite-size-xxl: 4rem;
-$calcite-size-xxxl: 6rem;
+$calcite-size-xxl: 4rem; // Deprecated, use --calcite-size-2xl instead.
+$calcite-size-2xl: 4rem;
+$calcite-size-xxxl: 6rem; // Deprecated, use --calcite-size-3xl instead.
+$calcite-size-3xl: 6rem;
 $calcite-spacing-fixed-xxs: 4px; // deprecated
 $calcite-spacing-fixed-xs: 6px; // deprecated
 $calcite-spacing-fixed-sm: 8px; // deprecated
@@ -94,19 +123,32 @@ $calcite-spacing-fixed-lg: 14px; // deprecated
 $calcite-spacing-fixed-xl: 16px; // deprecated
 $calcite-spacing-fixed-xxl: 20px; // deprecated
 $calcite-spacing-fixed-xxxl: 32px; // deprecated
-$calcite-spacing-none: 0;
-$calcite-spacing-px: 1px;
-$calcite-spacing-base: 2px;
-$calcite-spacing-xxs: 0.25rem;
-$calcite-spacing-xs: 0.375rem;
-$calcite-spacing-sm: 0.5rem;
-$calcite-spacing-sm-plus: 0.625rem;
-$calcite-spacing-md: 0.75rem;
-$calcite-spacing-md-plus: 0.875rem;
-$calcite-spacing-lg: 1rem;
-$calcite-spacing-xl: 1.25rem;
-$calcite-spacing-xxl: 1.5rem;
-$calcite-spacing-xxxl: 2rem;
+$calcite-spacing-none: 0; // deprecated, use `--calcite-space-none` instead
+$calcite-spacing-px: 1px; // deprecated, use `--calcite-space-px` instead
+$calcite-spacing-base: 2px; // deprecated, use `--calcite-space-base` instead
+$calcite-spacing-xxs: 0.25rem; // deprecated, use `--calcite-space-2xs` instead
+$calcite-spacing-xs: 0.375rem; // deprecated, use `--calcite-space-xs` instead
+$calcite-spacing-sm: 0.5rem; // deprecated, use `--calcite-space-sm` instead
+$calcite-spacing-sm-plus: 0.625rem; // deprecated, use `--calcite-space-sm-plus` instead
+$calcite-spacing-md: 0.75rem; // deprecated, use `--calcite-space-md` instead
+$calcite-spacing-md-plus: 0.875rem; // deprecated, use `--calcite-space-md-plus` instead
+$calcite-spacing-lg: 1rem; // deprecated, use `--calcite-space-lg` instead
+$calcite-spacing-xl: 1.25rem; // deprecated, use `--calcite-space-xl` instead
+$calcite-spacing-xxl: 1.5rem; // deprecated, use `--calcite-space-2xl` instead
+$calcite-spacing-xxxl: 2rem; // deprecated, use `--calcite-space-3xl` instead
+$calcite-space-none: 0;
+$calcite-space-px: 1px;
+$calcite-space-base: 2px;
+$calcite-space-2xs: 0.25rem;
+$calcite-space-xs: 0.375rem;
+$calcite-space-sm: 0.5rem;
+$calcite-space-sm-plus: 0.625rem;
+$calcite-space-md: 0.75rem;
+$calcite-space-md-plus: 0.875rem;
+$calcite-space-lg: 1rem;
+$calcite-space-xl: 1.25rem;
+$calcite-space-2xl: 1.5rem;
+$calcite-space-3xl: 2rem;
 $calcite-z-index-deep: -999999;
 $calcite-z-index: 1;
 $calcite-z-index-sticky: 300;

package/dist/scss/index.scss

@@ -10,9 +10,9 @@
   --calcite-color-border-white: #ffffff;
   --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
   --calcite-color-border-input: #949494;
-  --calcite-color-border-3: #dedede;
-  --calcite-color-border-2: #d4d4d4;
-  --calcite-color-border-1: #c9c9c9;
+  --calcite-color-border-3: #ebebeb;
+  --calcite-color-border-2: #dedede;
+  --calcite-color-border-1: #d4d4d4;
   --calcite-color-text-link: #00619b;
   --calcite-color-text-inverse: #ffffff;
   --calcite-color-text-highlight: #004874;
@@ -66,8 +66,8 @@
   --calcite-color-text-3: #9e9e9e;
   --calcite-color-text-2: #bfbfbf;
   --calcite-color-text-1: #ffffff;
-  --calcite-color-inverse-press: #f2f2f2;
-  --calcite-color-inverse-hover: #ffffff;
+  --calcite-color-inverse-press: #ebebeb;
+  --calcite-color-inverse-hover: #f2f2f2;
   --calcite-color-inverse: #f7f7f7;
   --calcite-color-status-danger-press: #d90012;
   --calcite-color-status-danger-hover: #ff0015;
@@ -94,9 +94,9 @@
   --calcite-color-transparent: rgba(255, 255, 255, 0);
   --calcite-color-surface-highlight: #2b465f;
   --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
-  --calcite-color-foreground-3: #141414;
-  --calcite-color-foreground-2: #212121;
+  --calcite-color-foreground-3: #404040;
+  --calcite-color-foreground-2: #363636;
   --calcite-color-foreground-1: #2b2b2b;
   --calcite-color-background-none: rgba(255, 255, 255, 0);
-  --calcite-color-background: #363636;
+  --calcite-color-background: #212121;
 }

package/dist/scss/light.scss

@@ -41,9 +41,9 @@ $calcite-color-text-3: #6b6b6b;
 $calcite-color-text-highlight: #004874;
 $calcite-color-text-inverse: #ffffff;
 $calcite-color-text-link: #00619b;
-$calcite-color-border-1: #c9c9c9;
-$calcite-color-border-2: #d4d4d4;
-$calcite-color-border-3: #dedede;
+$calcite-color-border-1: #d4d4d4;
+$calcite-color-border-2: #dedede;
+$calcite-color-border-3: #ebebeb;
 $calcite-color-border-input: #949494;
 $calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
 $calcite-color-border-white: #ffffff;

package/dist/scss/semantic.scss

@@ -30,7 +30,20 @@ $calcite-font-size: 14px;
 $calcite-font-size-md: 16px;
 $calcite-font-size-lg: 18px;
 $calcite-font-size-xl: 20px;
-$calcite-font-size-xxl: 24px;
+$calcite-font-size-xxl: 24px; // Deprecated, use --calcite-font-size-2xl instead.
+$calcite-font-size-2xl: 24px;
+$calcite-font-size-relative-xs: 0.625rem;
+$calcite-font-size-relative-sm: 0.75rem;
+$calcite-font-size-relative-base: 0.875rem;
+$calcite-font-size-relative-md: 1rem;
+$calcite-font-size-relative-lg: 1.125rem;
+$calcite-font-size-relative-xl: 1.25rem;
+$calcite-font-size-relative-2xl: 1.625rem;
+$calcite-font-size-relative-3xl: 2rem;
+$calcite-font-size-relative-4xl: 2.5rem;
+$calcite-font-size-relative-5xl: 3rem;
+$calcite-font-size-relative-6xl: 3.5rem;
+$calcite-font-size-relative-7xl: 4rem;
 $calcite-font-style-emphasis: italic; // used in ratings
 $calcite-font-line-height-fixed-sm: 12px;
 $calcite-font-line-height-fixed-base: 16px;
@@ -48,6 +61,18 @@ $calcite-font-line-height-relative-snug: 1.375; // 1.375
 $calcite-font-line-height-relative-normal: 1.5; // 1.5
 $calcite-font-line-height-relative-relaxed: 1.625; // 1.625
 $calcite-font-line-height-relative-loose: 2; // 2
+$calcite-font-line-height-xs: 0.75rem;
+$calcite-font-line-height-sm: 1rem;
+$calcite-font-line-height-base: 1rem;
+$calcite-font-line-height-md: 1.25rem;
+$calcite-font-line-height-lg: 1.5rem;
+$calcite-font-line-height-xl: 1.5rem;
+$calcite-font-line-height-2xl: 2rem;
+$calcite-font-line-height-3xl: 2.5rem;
+$calcite-font-line-height-4xl: 3rem;
+$calcite-font-line-height-5xl: 4rem;
+$calcite-font-line-height-6xl: 4rem;
+$calcite-font-line-height-7xl: 5rem;
 $calcite-font-letter-spacing-tight: -0.4px; // Deprecated
 $calcite-font-letter-spacing-normal: 0; // Deprecated
 $calcite-font-letter-spacing-wide: 0.4px; // Deprecated
@@ -75,15 +100,19 @@ $calcite-size-fixed-xl: 20px; // deprecated
 $calcite-size-fixed-xxl: 24px; // deprecated
 $calcite-size-fixed-xxxl: 32px; // deprecated
 $calcite-size-px: 1px;
-$calcite-size-xxxs: 0.75rem;
-$calcite-size-xxs: 0.875rem;
+$calcite-size-xxxs: 0.75rem; // Deprecated, use --calcite-size-3xs instead.
+$calcite-size-3xs: 0.75rem;
+$calcite-size-xxs: 0.875rem; // Deprecated, use --calcite-size-2xs instead.
+$calcite-size-2xs: 0.875rem;
 $calcite-size-xs: 1rem;
 $calcite-size-sm: 1.5rem;
 $calcite-size-md: 2rem;
 $calcite-size-lg: 2.75rem;
 $calcite-size-xl: 3rem;
-$calcite-size-xxl: 4rem;
-$calcite-size-xxxl: 6rem;
+$calcite-size-xxl: 4rem; // Deprecated, use --calcite-size-2xl instead.
+$calcite-size-2xl: 4rem;
+$calcite-size-xxxl: 6rem; // Deprecated, use --calcite-size-3xl instead.
+$calcite-size-3xl: 6rem;
 $calcite-spacing-fixed-xxs: 4px; // deprecated
 $calcite-spacing-fixed-xs: 6px; // deprecated
 $calcite-spacing-fixed-sm: 8px; // deprecated
@@ -92,19 +121,32 @@ $calcite-spacing-fixed-lg: 14px; // deprecated
 $calcite-spacing-fixed-xl: 16px; // deprecated
 $calcite-spacing-fixed-xxl: 20px; // deprecated
 $calcite-spacing-fixed-xxxl: 32px; // deprecated
-$calcite-spacing-none: 0;
-$calcite-spacing-px: 1px;
-$calcite-spacing-base: 2px;
-$calcite-spacing-xxs: 0.25rem;
-$calcite-spacing-xs: 0.375rem;
-$calcite-spacing-sm: 0.5rem;
-$calcite-spacing-sm-plus: 0.625rem;
-$calcite-spacing-md: 0.75rem;
-$calcite-spacing-md-plus: 0.875rem;
-$calcite-spacing-lg: 1rem;
-$calcite-spacing-xl: 1.25rem;
-$calcite-spacing-xxl: 1.5rem;
-$calcite-spacing-xxxl: 2rem;
+$calcite-spacing-none: 0; // deprecated, use `--calcite-space-none` instead
+$calcite-spacing-px: 1px; // deprecated, use `--calcite-space-px` instead
+$calcite-spacing-base: 2px; // deprecated, use `--calcite-space-base` instead
+$calcite-spacing-xxs: 0.25rem; // deprecated, use `--calcite-space-2xs` instead
+$calcite-spacing-xs: 0.375rem; // deprecated, use `--calcite-space-xs` instead
+$calcite-spacing-sm: 0.5rem; // deprecated, use `--calcite-space-sm` instead
+$calcite-spacing-sm-plus: 0.625rem; // deprecated, use `--calcite-space-sm-plus` instead
+$calcite-spacing-md: 0.75rem; // deprecated, use `--calcite-space-md` instead
+$calcite-spacing-md-plus: 0.875rem; // deprecated, use `--calcite-space-md-plus` instead
+$calcite-spacing-lg: 1rem; // deprecated, use `--calcite-space-lg` instead
+$calcite-spacing-xl: 1.25rem; // deprecated, use `--calcite-space-xl` instead
+$calcite-spacing-xxl: 1.5rem; // deprecated, use `--calcite-space-2xl` instead
+$calcite-spacing-xxxl: 2rem; // deprecated, use `--calcite-space-3xl` instead
+$calcite-space-none: 0;
+$calcite-space-px: 1px;
+$calcite-space-base: 2px;
+$calcite-space-2xs: 0.25rem;
+$calcite-space-xs: 0.375rem;
+$calcite-space-sm: 0.5rem;
+$calcite-space-sm-plus: 0.625rem;
+$calcite-space-md: 0.75rem;
+$calcite-space-md-plus: 0.875rem;
+$calcite-space-lg: 1rem;
+$calcite-space-xl: 1.25rem;
+$calcite-space-2xl: 1.5rem;
+$calcite-space-3xl: 2rem;
 $calcite-z-index-deep: -999999;
 $calcite-z-index: 1;
 $calcite-z-index-sticky: 300;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-design-tokens",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.11",
   "description": "Esri's Calcite Design System Tokens",
   "keywords": [
     "Calcite",
@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "git://github.com/Esri/calcite-design-system.git",
-    "directory": "packages/calcite-design-tokens"
+    "directory": "packages/design-tokens"
   },
   "author": {
     "name": "Esri"
@@ -28,8 +28,8 @@
   },
   "license": "SEE LICENSE.md",
   "scripts": {
-    "build": "echo $MODE $GITHUB_ACTION && tsx src/build-tokens.ts",
-    "build:watch": "tsx --watch src/build-tokens.ts",
+    "build": "echo $MODE $GITHUB_ACTION && node src/build-tokens.ts",
+    "build:watch": "node --watch src/build-tokens.ts",
     "clean": "rimraf node_modules dist .turbo",
     "lint:json": "prettier --ignore-path \"../../.prettierignore\" --write \"**/*.json\" >/dev/null",
     "lint:md": "prettier --ignore-path \"../../.prettierignore\" --write \"**/*.md\" >/dev/null && markdownlint-cli2 \"**/*.md\" --fix --config \"../../.markdownlint-cli2.jsonc\"",
@@ -37,14 +37,14 @@
     "lint": "concurrently npm:lint:*",
     "test": "vitest run",
     "test:watch": "vitest",
-    "util:update-3rd-party-licenses": "tsx ../../support/createThirdPartyLicenses.ts",
+    "util:update-3rd-party-licenses": "node ../../support/createThirdPartyLicenses.mts",
     "util:update-test-snapshots": "vitest --update"
   },
   "volta": {
     "extends": "../../package.json"
   },
   "devDependencies": {
-    "vitest": "3.2.4"
+    "vitest": "4.0.14"
   },
-  "gitHead": "fdb0fc68d84e5308018aff01b834c460ce0f5f0d"
+  "gitHead": "8f61da5e9de73b7a17fc6f6fcdb4ab8484133f05"
 }