@esri/calcite-design-tokens 4.0.0-next.2 → 4.0.0-next.20

package/LICENSE.md

@@ -1,6 +1,6 @@
 # Licensing
 
-COPYRIGHT © 2025 Esri
+COPYRIGHT © Esri
 
 All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
 

package/README.md

@@ -30,7 +30,7 @@ These are the published asset files generated by the token transformer:
 
 ## License
 
-COPYRIGHT © 2025 Esri
+COPYRIGHT © Esri
 
 All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
 

package/dist/css/breakpoints.css

@@ -4,9 +4,12 @@
  */
 
 :root {
-  --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 */
@@ -16,7 +19,8 @@
   --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/css/core.css

@@ -348,7 +348,7 @@
   --calcite-color-high-saturation-orange-yellow-h-oy-040: #fbb664;
   --calcite-color-high-saturation-orange-yellow-h-oy-050: #f9a845;
   --calcite-color-high-saturation-orange-yellow-h-oy-060: #f89927;
-  --calcite-color-high-saturation-orange-yellow-h-oy-070: #c67718;
+  --calcite-color-high-saturation-orange-yellow-h-oy-070: #da7c0b;
   --calcite-color-high-saturation-orange-yellow-h-oy-080: #9a5b10;
   --calcite-color-high-saturation-orange-yellow-h-oy-090: #6d3f08;
   --calcite-color-high-saturation-orange-yellow-h-oy-100: #402300;
@@ -435,7 +435,7 @@
   --calcite-color-vibrant-orange-yellow-v-oy-120: #ffb54d;
   --calcite-color-vibrant-orange-yellow-v-oy-140: #ff9500;
   --calcite-color-vibrant-orange-yellow-v-oy-160: #e68600;
-  --calcite-color-vibrant-orange-yellow-v-oy-180: #d17300;
+  --calcite-color-vibrant-orange-yellow-v-oy-180: #c26b00;
   --calcite-color-vibrant-red-orange-v-ro-120: #ff824d;
   --calcite-color-vibrant-red-orange-v-ro-140: #ff4d00;
   --calcite-color-vibrant-red-orange-v-ro-160: #de4300;
@@ -556,6 +556,7 @@
   --calcite-size-224: 224px;
   --calcite-size-256: 256px;
   --calcite-size-288: 288px;
+  --calcite-size-9999: 9999px;
   --calcite-size-none: 0;
   --calcite-size-relative-50: 50%;
   --calcite-size-relative-100: 100%;
@@ -566,6 +567,20 @@
   --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/css/dark.css

@@ -4,24 +4,36 @@
  */
 
 :root {
-  --calcite-color-background: #363636;
+  --calcite-color-surface-1: #212121;
+  --calcite-color-surface-2: #2b2b2b;
+  --calcite-color-surface-3: #363636;
+  --calcite-color-surface-4: #404040;
+  --calcite-color-surface-highlight: #2b465f;
+  --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
   --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-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
+  --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
+  --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
   --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);
-  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
-  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
-  --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
-  --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
-  --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
-  --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
+  --calcite-color-text-1: #ffffff;
+  --calcite-color-text-2: #bfbfbf;
+  --calcite-color-text-3: #9e9e9e;
+  --calcite-color-text-inverse: #141414;
+  --calcite-color-text-link: #00a0ff;
+  --calcite-color-text-highlight: #d6efff;
+  --calcite-color-border-1: #545454;
+  --calcite-color-border-2: #4a4a4a;
+  --calcite-color-border-3: #404040;
+  --calcite-color-border-input: #757575;
+  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
+  --calcite-color-border-white: #f7f7f7;
   --calcite-color-brand: #009af2;
   --calcite-color-brand-hover: #007ac2;
   --calcite-color-brand-press: #00619b;
   --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
+  --calcite-color-inverse: #f7f7f7;
+  --calcite-color-inverse-hover: #f2f2f2;
+  --calcite-color-inverse-press: #ebebeb;
   --calcite-color-status-info: #00a0ff;
   --calcite-color-status-info-hover: #3db8ff;
   --calcite-color-status-info-press: #009af2;
@@ -34,20 +46,12 @@
   --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-text-1: #ffffff;
-  --calcite-color-text-2: #bfbfbf;
-  --calcite-color-text-3: #9e9e9e;
-  --calcite-color-text-highlight: #d6efff;
-  --calcite-color-text-inverse: #141414;
-  --calcite-color-text-link: #00a0ff;
-  --calcite-color-border-1: #545454;
-  --calcite-color-border-2: #4a4a4a;
-  --calcite-color-border-3: #404040;
-  --calcite-color-border-input: #757575;
-  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
-  --calcite-color-border-white: #f7f7f7;
+  --calcite-color-transparent: rgba(255, 255, 255, 0);
+  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
+  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
+  --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
+  --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
+  --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
+  --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
   --calcite-color-focus: var(--calcite-color-brand);
 }

package/dist/css/global.css

@@ -19,7 +19,7 @@
   --calcite-corner-radius-xs: 2px;
   --calcite-corner-radius-sm: 4px;
   --calcite-corner-radius-round: 4px; /** deprecated, use --calcite-corner-radius-sm instead */
-  --calcite-corner-radius-pill: 100%;
+  --calcite-corner-radius-pill: 9999px;
   --calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; /** Primary font with fallbacks */
   --calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; /** Font family for code with fallbacks */
   --calcite-font-weight-light: 300; /** For Avenir Next World (secondary font family) */
@@ -34,7 +34,20 @@
   --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;
@@ -52,6 +65,18 @@
   --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 */
@@ -62,11 +87,11 @@
   --calcite-font-text-case-uppercase: uppercase; /** Deprecated */
   --calcite-font-text-case-lowercase: lowercase; /** Deprecated */
   --calcite-font-text-case-capitalize: capitalize; /** Deprecated */
+  --calcite-opacity-disabled: 0.5;
   --calcite-opacity-light: 0.4;
   --calcite-opacity-half: 0.5;
   --calcite-opacity-dark: 0.85;
   --calcite-opacity-full: 1;
-  --calcite-opacity-disabled: 0.5;
   --calcite-size-fixed-xxxs: 2px; /** deprecated */
   --calcite-size-fixed-xxs: 4px; /** deprecated */
   --calcite-size-fixed-xs: 6px; /** deprecated */
@@ -79,15 +104,20 @@
   --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-4xs: 0.625rem;
+  --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 */
@@ -96,19 +126,33 @@
   --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-space-4xl: 2.75rem;
   --calcite-z-index-deep: -999999;
   --calcite-z-index: 1;
   --calcite-z-index-sticky: 300;