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

package/dist/es6/semantic.js

@@ -17,7 +17,7 @@ export const calciteCornerRadiusNone = "0";
 export const calciteCornerRadiusXs = "2px";
 export const calciteCornerRadiusSm = "4px";
 export const calciteCornerRadiusRound = "4px"; // deprecated, use --calcite-corner-radius-sm instead
-export const calciteCornerRadiusPill = "100%";
+export const calciteCornerRadiusPill = "9999px";
 export const calciteFontFamily = [
   "Avenir Next",
   "Avenir",
@@ -43,7 +43,20 @@ export const calciteFontSize = "14px";
 export const calciteFontSizeMd = "16px";
 export const calciteFontSizeLg = "18px";
 export const calciteFontSizeXl = "20px";
-export const calciteFontSizeXxl = "24px";
+export const calciteFontSizeXxl = "24px"; // Deprecated, use --calcite-font-size-2xl instead.
+export const calciteFontSize2xl = "24px";
+export const calciteFontSizeRelativeXs = "0.625rem";
+export const calciteFontSizeRelativeSm = "0.75rem";
+export const calciteFontSizeRelativeBase = "0.875rem";
+export const calciteFontSizeRelativeMd = "1rem";
+export const calciteFontSizeRelativeLg = "1.125rem";
+export const calciteFontSizeRelativeXl = "1.25rem";
+export const calciteFontSizeRelative2xl = "1.625rem";
+export const calciteFontSizeRelative3xl = "2rem";
+export const calciteFontSizeRelative4xl = "2.5rem";
+export const calciteFontSizeRelative5xl = "3rem";
+export const calciteFontSizeRelative6xl = "3.5rem";
+export const calciteFontSizeRelative7xl = "4rem";
 export const calciteFontStyleEmphasis = "italic"; // used in ratings
 export const calciteFontLineHeightFixedSm = "12px";
 export const calciteFontLineHeightFixedBase = "16px";
@@ -61,6 +74,18 @@ export const calciteFontLineHeightRelativeSnug = "1.375"; // 1.375
 export const calciteFontLineHeightRelativeNormal = "1.5"; // 1.5
 export const calciteFontLineHeightRelativeRelaxed = "1.625"; // 1.625
 export const calciteFontLineHeightRelativeLoose = "2"; // 2
+export const calciteFontLineHeightXs = "0.75rem";
+export const calciteFontLineHeightSm = "1rem";
+export const calciteFontLineHeightBase = "1rem";
+export const calciteFontLineHeightMd = "1.25rem";
+export const calciteFontLineHeightLg = "1.5rem";
+export const calciteFontLineHeightXl = "1.5rem";
+export const calciteFontLineHeight2xl = "2rem";
+export const calciteFontLineHeight3xl = "2.5rem";
+export const calciteFontLineHeight4xl = "3rem";
+export const calciteFontLineHeight5xl = "4rem";
+export const calciteFontLineHeight6xl = "4rem";
+export const calciteFontLineHeight7xl = "5rem";
 export const calciteFontLetterSpacingTight = "-0.4px"; // Deprecated
 export const calciteFontLetterSpacingNormal = "0"; // Deprecated
 export const calciteFontLetterSpacingWide = "0.4px"; // Deprecated
@@ -71,11 +96,11 @@ export const calciteFontTextCaseNone = "none"; // Deprecated
 export const calciteFontTextCaseUppercase = "uppercase"; // Deprecated
 export const calciteFontTextCaseLowercase = "lowercase"; // Deprecated
 export const calciteFontTextCaseCapitalize = "capitalize"; // Deprecated
+export const calciteOpacityDisabled = "0.5";
 export const calciteOpacityLight = "0.4";
 export const calciteOpacityHalf = "0.5";
 export const calciteOpacityDark = "0.85";
 export const calciteOpacityFull = "1";
-export const calciteOpacityDisabled = "0.5";
 export const calciteShadowNone = {
   blur: "0",
   spread: "0",
@@ -109,15 +134,20 @@ export const calciteSizeFixedXl = "20px"; // deprecated
 export const calciteSizeFixedXxl = "24px"; // deprecated
 export const calciteSizeFixedXxxl = "32px"; // deprecated
 export const calciteSizePx = "1px";
-export const calciteSizeXxxs = "0.75rem";
-export const calciteSizeXxs = "0.875rem";
+export const calciteSize4xs = "0.625rem";
+export const calciteSizeXxxs = "0.75rem"; // Deprecated, use --calcite-size-3xs instead.
+export const calciteSize3xs = "0.75rem";
+export const calciteSizeXxs = "0.875rem"; // Deprecated, use --calcite-size-2xs instead.
+export const calciteSize2xs = "0.875rem";
 export const calciteSizeXs = "1rem";
 export const calciteSizeSm = "1.5rem";
 export const calciteSizeMd = "2rem";
 export const calciteSizeLg = "2.75rem";
 export const calciteSizeXl = "3rem";
-export const calciteSizeXxl = "4rem";
-export const calciteSizeXxxl = "6rem";
+export const calciteSizeXxl = "4rem"; // Deprecated, use --calcite-size-2xl instead.
+export const calciteSize2xl = "4rem";
+export const calciteSizeXxxl = "6rem"; // Deprecated, use --calcite-size-3xl instead.
+export const calciteSize3xl = "6rem";
 export const calciteSpacingFixedXxs = "4px"; // deprecated
 export const calciteSpacingFixedXs = "6px"; // deprecated
 export const calciteSpacingFixedSm = "8px"; // deprecated
@@ -126,19 +156,33 @@ export const calciteSpacingFixedLg = "14px"; // deprecated
 export const calciteSpacingFixedXl = "16px"; // deprecated
 export const calciteSpacingFixedXxl = "20px"; // deprecated
 export const calciteSpacingFixedXxxl = "32px"; // deprecated
-export const calciteSpacingNone = "0";
-export const calciteSpacingPx = "1px";
-export const calciteSpacingBase = "2px";
-export const calciteSpacingXxs = "0.25rem";
-export const calciteSpacingXs = "0.375rem";
-export const calciteSpacingSm = "0.5rem";
-export const calciteSpacingSmPlus = "0.625rem";
-export const calciteSpacingMd = "0.75rem";
-export const calciteSpacingMdPlus = "0.875rem";
-export const calciteSpacingLg = "1rem";
-export const calciteSpacingXl = "1.25rem";
-export const calciteSpacingXxl = "1.5rem";
-export const calciteSpacingXxxl = "2rem";
+export const calciteSpacingNone = "0"; // deprecated, use `--calcite-space-none` instead
+export const calciteSpacingPx = "1px"; // deprecated, use `--calcite-space-px` instead
+export const calciteSpacingBase = "2px"; // deprecated, use `--calcite-space-base` instead
+export const calciteSpacingXxs = "0.25rem"; // deprecated, use `--calcite-space-2xs` instead
+export const calciteSpacingXs = "0.375rem"; // deprecated, use `--calcite-space-xs` instead
+export const calciteSpacingSm = "0.5rem"; // deprecated, use `--calcite-space-sm` instead
+export const calciteSpacingSmPlus = "0.625rem"; // deprecated, use `--calcite-space-sm-plus` instead
+export const calciteSpacingMd = "0.75rem"; // deprecated, use `--calcite-space-md` instead
+export const calciteSpacingMdPlus = "0.875rem"; // deprecated, use `--calcite-space-md-plus` instead
+export const calciteSpacingLg = "1rem"; // deprecated, use `--calcite-space-lg` instead
+export const calciteSpacingXl = "1.25rem"; // deprecated, use `--calcite-space-xl` instead
+export const calciteSpacingXxl = "1.5rem"; // deprecated, use `--calcite-space-2xl` instead
+export const calciteSpacingXxxl = "2rem"; // deprecated, use `--calcite-space-3xl` instead
+export const calciteSpaceNone = "0";
+export const calciteSpacePx = "1px";
+export const calciteSpaceBase = "2px";
+export const calciteSpace2xs = "0.25rem";
+export const calciteSpaceXs = "0.375rem";
+export const calciteSpaceSm = "0.5rem";
+export const calciteSpaceSmPlus = "0.625rem";
+export const calciteSpaceMd = "0.75rem";
+export const calciteSpaceMdPlus = "0.875rem";
+export const calciteSpaceLg = "1rem";
+export const calciteSpaceXl = "1.25rem";
+export const calciteSpace2xl = "1.5rem";
+export const calciteSpace3xl = "2rem";
+export const calciteSpace4xl = "2.75rem";
 export const calciteZIndexDeep = "-999999";
 export const calciteZIndex = "1";
 export const calciteZIndexSticky = "300";

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

@@ -346,7 +346,7 @@ $calcite-color-high-saturation-orange-yellow-h-oy-030: #fcc582;
 $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;
@@ -433,7 +433,7 @@ $calcite-color-vibrant-yellow-v-yy-180: #ebba17;
 $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;
@@ -554,6 +554,7 @@ $calcite-size-192: 192px;
 $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%;
@@ -564,6 +565,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,24 +2,36 @@
 // Calcite Design System
 // Do not edit directly, this file was auto-generated.
 
-$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;
@@ -32,19 +44,11 @@ $calcite-color-status-warning-press: #ff9500;
 $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: $calcite-color-brand;

package/dist/scss/global.scss

@@ -17,7 +17,7 @@ $calcite-corner-radius-none: 0;
 $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)
@@ -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
@@ -60,11 +85,11 @@ $calcite-font-text-case-none: none; // Deprecated
 $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
@@ -77,15 +102,20 @@ $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-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
@@ -94,19 +124,33 @@ $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-space-4xl: 2.75rem;
 $calcite-z-index-deep: -999999;
 $calcite-z-index: 1;
 $calcite-z-index-sticky: 300;

package/dist/scss/index.scss

@@ -7,68 +7,65 @@
 @use "./breakpoints.scss";
 @use "./mixins.scss";
 @mixin calcite-mode-light {
-  --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-text-link: #00619b;
-  --calcite-color-text-inverse: #ffffff;
-  --calcite-color-text-highlight: #004874;
-  --calcite-color-text-3: #6b6b6b;
-  --calcite-color-text-2: #4a4a4a;
-  --calcite-color-text-1: #141414;
-  --calcite-color-inverse-press: #212121;
-  --calcite-color-inverse-hover: #2b2b2b;
-  --calcite-color-inverse: #363636;
+  --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
+  --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
+  --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
+  --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
+  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
+  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
+  --calcite-color-transparent: rgba(0, 0, 0, 0);
   --calcite-color-status-danger-press: #7c1d13;
   --calcite-color-status-danger-hover: #a82b1e;
   --calcite-color-status-danger: #d83020;
   --calcite-color-status-warning-press: #9a5b10;
-  --calcite-color-status-warning-hover: #d17300;
-  --calcite-color-status-warning: #f89927;
-  --calcite-color-status-success-press: #1a6324;
-  --calcite-color-status-success-hover: #288835;
-  --calcite-color-status-success: #35ac46;
+  --calcite-color-status-warning-hover: #c26b00;
+  --calcite-color-status-warning: #da7c0b;
+  --calcite-color-status-success-press: #0d3f14;
+  --calcite-color-status-success-hover: #1a6324;
+  --calcite-color-status-success: #288835;
   --calcite-color-status-info-press: #00304d;
   --calcite-color-status-info-hover: #004874;
   --calcite-color-status-info: #00619b;
+  --calcite-color-inverse-press: #212121;
+  --calcite-color-inverse-hover: #2b2b2b;
+  --calcite-color-inverse: #363636;
   --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
   --calcite-color-brand-press: #004874;
   --calcite-color-brand-hover: #00619b;
   --calcite-color-brand: #007ac2;
-  --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
-  --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
-  --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
-  --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
-  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
-  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
-  --calcite-color-transparent: rgba(0, 0, 0, 0);
-  --calcite-color-surface-highlight: #d6efff;
+  --calcite-color-border-white: #ffffff;
+  --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
+  --calcite-color-border-input: #949494;
+  --calcite-color-border-3: #ebebeb;
+  --calcite-color-border-2: #dedede;
+  --calcite-color-border-1: #d4d4d4;
+  --calcite-color-text-highlight: #004874;
+  --calcite-color-text-link: #00619b;
+  --calcite-color-text-inverse: #ffffff;
+  --calcite-color-text-3: #6b6b6b;
+  --calcite-color-text-2: #4a4a4a;
+  --calcite-color-text-1: #141414;
   --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
-  --calcite-color-foreground-3: #ebebeb;
-  --calcite-color-foreground-2: #f2f2f2;
-  --calcite-color-foreground-1: #ffffff;
+  --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
+  --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
+  --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
   --calcite-color-background-none: rgba(255, 255, 255, 0);
-  --calcite-color-background: #f7f7f7;
+  --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
+  --calcite-color-surface-highlight: #d6efff;
+  --calcite-color-surface-4: #ebebeb;
+  --calcite-color-surface-3: #f2f2f2;
+  --calcite-color-surface-2: #ffffff;
+  --calcite-color-surface-1: #f7f7f7;
+  --calcite-color-focus: var(--calcite-color-brand);
 }
 @mixin calcite-mode-dark {
-  --calcite-color-border-white: #f7f7f7;
-  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
-  --calcite-color-border-input: #757575;
-  --calcite-color-border-3: #404040;
-  --calcite-color-border-2: #4a4a4a;
-  --calcite-color-border-1: #545454;
-  --calcite-color-text-link: #00a0ff;
-  --calcite-color-text-inverse: #141414;
-  --calcite-color-text-highlight: #d6efff;
-  --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: #f7f7f7;
+  --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
+  --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
+  --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
+  --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
+  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
+  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
+  --calcite-color-transparent: rgba(255, 255, 255, 0);
   --calcite-color-status-danger-press: #d90012;
   --calcite-color-status-danger-hover: #ff0015;
   --calcite-color-status-danger: #fe583e;
@@ -81,22 +78,35 @@
   --calcite-color-status-info-press: #009af2;
   --calcite-color-status-info-hover: #3db8ff;
   --calcite-color-status-info: #00a0ff;
+  --calcite-color-inverse-press: #ebebeb;
+  --calcite-color-inverse-hover: #f2f2f2;
+  --calcite-color-inverse: #f7f7f7;
   --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
   --calcite-color-brand-press: #00619b;
   --calcite-color-brand-hover: #007ac2;
   --calcite-color-brand: #009af2;
-  --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
-  --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
-  --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
-  --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
-  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
-  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
-  --calcite-color-transparent: rgba(255, 255, 255, 0);
-  --calcite-color-surface-highlight: #2b465f;
+  --calcite-color-border-white: #f7f7f7;
+  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
+  --calcite-color-border-input: #757575;
+  --calcite-color-border-3: #404040;
+  --calcite-color-border-2: #4a4a4a;
+  --calcite-color-border-1: #545454;
+  --calcite-color-text-highlight: #d6efff;
+  --calcite-color-text-link: #00a0ff;
+  --calcite-color-text-inverse: #141414;
+  --calcite-color-text-3: #9e9e9e;
+  --calcite-color-text-2: #bfbfbf;
+  --calcite-color-text-1: #ffffff;
   --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-1: #2b2b2b;
+  --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
+  --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
+  --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
   --calcite-color-background-none: rgba(255, 255, 255, 0);
-  --calcite-color-background: #363636;
+  --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
+  --calcite-color-surface-highlight: #2b465f;
+  --calcite-color-surface-4: #404040;
+  --calcite-color-surface-3: #363636;
+  --calcite-color-surface-2: #2b2b2b;
+  --calcite-color-surface-1: #212121;
+  --calcite-color-focus: var(--calcite-color-brand);
 }