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

package/dist/es6/breakpoints.d.ts

@@ -3,8 +3,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeHeightXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeHeight2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeHeightXs: { min: string; max: string };
 /** Small tablets */
@@ -15,8 +17,10 @@ export const calciteContainerSizeHeightMd: { min: string; max: string };
 export const calciteContainerSizeHeightLg: { min: string; max: string };
 /** Projectors and televisions */
 export const calciteContainerSizeHeightXl: { min: string };
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeWidthXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeWidth2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeWidthXs: { min: string; max: string };
 /** Small tablets */

package/dist/es6/breakpoints.js

@@ -3,13 +3,15 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Small handheld devices and mini-windows
+export const calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+export const calciteContainerSizeHeight2xs = { min: "0", max: "154px" }; // Small handheld devices and mini-windows
 export const calciteContainerSizeHeightXs = { min: "155px", max: "328px" }; // Handheld devices
 export const calciteContainerSizeHeightSm = { min: "329px", max: "504px" }; // Small tablets
 export const calciteContainerSizeHeightMd = { min: "505px", max: "678px" }; // Small laptops
 export const calciteContainerSizeHeightLg = { min: "679px", max: "854px" }; // Large laptops and desktop computers
 export const calciteContainerSizeHeightXl = { min: "855px" }; // Projectors and televisions
-export const calciteContainerSizeWidthXxs = { min: "0", max: "320px" }; // Small handheld devices and mini-windows
+export const calciteContainerSizeWidthXxs = { min: "0", max: "320px" }; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+export const calciteContainerSizeWidth2xs = { min: "0", max: "320px" }; // Small handheld devices and mini-windows
 export const calciteContainerSizeWidthXs = { min: "321px", max: "476px" }; // Handheld devices
 export const calciteContainerSizeWidthSm = { min: "477px", max: "768px" }; // Small tablets
 export const calciteContainerSizeWidthMd = { min: "769px", max: "1152px" }; // Small laptops

package/dist/es6/core.d.ts

@@ -610,6 +610,7 @@ export const calciteSize192: string;
 export const calciteSize224: string;
 export const calciteSize256: string;
 export const calciteSize288: string;
+export const calciteSize9999: string;
 export const calciteSizeNone: string;
 export const calciteSizeRelative50: string;
 export const calciteSizeRelative100: string;
@@ -620,6 +621,20 @@ export const calciteSizeRelative162: string;
 export const calciteSizeRelative200: string;
 export const calciteSizeRelativeAuto: string;
 export const calciteSizeRelativeNormal: string;
+export const calciteSizeRem1: string;
+export const calciteSizeRem2: string;
+export const calciteSizeRem3: string;
+export const calciteSizeRem4: string;
+export const calciteSizeRem5: string;
+export const calciteSizeRem0625: string;
+export const calciteSizeRem075: string;
+export const calciteSizeRem0875: string;
+export const calciteSizeRem1125: string;
+export const calciteSizeRem125: string;
+export const calciteSizeRem15: string;
+export const calciteSizeRem1625: string;
+export const calciteSizeRem25: string;
+export const calciteSizeRem35: string;
 export const calciteZIndex0: string;
 export const calciteZIndex1: string;
 export const calciteZIndex3: string;

package/dist/es6/core.js

@@ -347,7 +347,7 @@ export const calciteColorHighSaturationOrangeYellowHOy030 = "#fcc582";
 export const calciteColorHighSaturationOrangeYellowHOy040 = "#fbb664";
 export const calciteColorHighSaturationOrangeYellowHOy050 = "#f9a845";
 export const calciteColorHighSaturationOrangeYellowHOy060 = "#f89927";
-export const calciteColorHighSaturationOrangeYellowHOy070 = "#c67718";
+export const calciteColorHighSaturationOrangeYellowHOy070 = "#da7c0b";
 export const calciteColorHighSaturationOrangeYellowHOy080 = "#9a5b10";
 export const calciteColorHighSaturationOrangeYellowHOy090 = "#6d3f08";
 export const calciteColorHighSaturationOrangeYellowHOy100 = "#402300";
@@ -434,7 +434,7 @@ export const calciteColorVibrantYellowVYy180 = "#ebba17";
 export const calciteColorVibrantOrangeYellowVOy120 = "#ffb54d";
 export const calciteColorVibrantOrangeYellowVOy140 = "#ff9500";
 export const calciteColorVibrantOrangeYellowVOy160 = "#e68600";
-export const calciteColorVibrantOrangeYellowVOy180 = "#d17300";
+export const calciteColorVibrantOrangeYellowVOy180 = "#c26b00";
 export const calciteColorVibrantRedOrangeVRo120 = "#ff824d";
 export const calciteColorVibrantRedOrangeVRo140 = "#ff4d00";
 export const calciteColorVibrantRedOrangeVRo160 = "#de4300";
@@ -590,6 +590,7 @@ export const calciteSize192 = "192px";
 export const calciteSize224 = "224px";
 export const calciteSize256 = "256px";
 export const calciteSize288 = "288px";
+export const calciteSize9999 = "9999px";
 export const calciteSizeNone = "0";
 export const calciteSizeRelative50 = "50%";
 export const calciteSizeRelative100 = "100%";
@@ -600,6 +601,20 @@ export const calciteSizeRelative162 = "162.5%";
 export const calciteSizeRelative200 = "200%";
 export const calciteSizeRelativeAuto = "auto";
 export const calciteSizeRelativeNormal = "normal";
+export const calciteSizeRem1 = "1rem";
+export const calciteSizeRem2 = "2rem";
+export const calciteSizeRem3 = "3rem";
+export const calciteSizeRem4 = "4rem";
+export const calciteSizeRem5 = "5rem";
+export const calciteSizeRem0625 = "0.625rem";
+export const calciteSizeRem075 = "0.75rem";
+export const calciteSizeRem0875 = "0.875rem";
+export const calciteSizeRem1125 = "1.125rem";
+export const calciteSizeRem125 = "1.25rem";
+export const calciteSizeRem15 = "1.5rem";
+export const calciteSizeRem1625 = "1.625rem";
+export const calciteSizeRem25 = "2.5rem";
+export const calciteSizeRem35 = "3.5rem";
 export const calciteZIndex0 = "-999999";
 export const calciteZIndex1 = "1";
 export const calciteZIndex3 = "300";

package/dist/es6/dark.d.ts

@@ -3,25 +3,41 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const calciteColorSurface1: string;
+export const calciteColorSurface2: string;
+export const calciteColorSurface3: string;
+export const calciteColorSurface4: string;
+export const calciteColorSurfaceHighlight: string;
+/** Deprecated, use `--calcite-color-surface-1` instead */
 export const calciteColorBackground: string;
 export const calciteColorBackgroundNone: string;
+/** Deprecated, use `--calcite-color-surface-2` instead */
 export const calciteColorForeground1: string;
+/** Deprecated, use `--calcite-color-surface-3` instead */
 export const calciteColorForeground2: string;
+/** Deprecated, use `--calcite-color-surface-4` instead */
 export const calciteColorForeground3: string;
 /** deprecated, use --calcite-color-surface-highlight instead */
 export const calciteColorForegroundCurrent: string;
-export const calciteColorSurfaceHighlight: string;
-export const calciteColorTransparent: string;
-export const calciteColorTransparentHover: string;
-export const calciteColorTransparentPress: string;
-export const calciteColorTransparentInverseHover: string;
-export const calciteColorTransparentInversePress: string;
-export const calciteColorTransparentScrim: string;
-export const calciteColorTransparentTint: string;
+export const calciteColorText1: string;
+export const calciteColorText2: string;
+export const calciteColorText3: string;
+export const calciteColorTextInverse: string;
+export const calciteColorTextLink: string;
+export const calciteColorTextHighlight: string;
+export const calciteColorBorder1: string;
+export const calciteColorBorder2: string;
+export const calciteColorBorder3: string;
+export const calciteColorBorderInput: string;
+export const calciteColorBorderGhost: string;
+export const calciteColorBorderWhite: string;
 export const calciteColorBrand: string;
 export const calciteColorBrandHover: string;
 export const calciteColorBrandPress: string;
 export const calciteColorBrandUnderline: string;
+export const calciteColorInverse: string;
+export const calciteColorInverseHover: string;
+export const calciteColorInversePress: string;
 export const calciteColorStatusInfo: string;
 export const calciteColorStatusInfoHover: string;
 export const calciteColorStatusInfoPress: string;
@@ -34,19 +50,11 @@ export const calciteColorStatusWarningPress: string;
 export const calciteColorStatusDanger: string;
 export const calciteColorStatusDangerHover: string;
 export const calciteColorStatusDangerPress: string;
-export const calciteColorInverse: string;
-export const calciteColorInverseHover: string;
-export const calciteColorInversePress: string;
-export const calciteColorText1: string;
-export const calciteColorText2: string;
-export const calciteColorText3: string;
-export const calciteColorTextHighlight: string;
-export const calciteColorTextInverse: string;
-export const calciteColorTextLink: string;
-export const calciteColorBorder1: string;
-export const calciteColorBorder2: string;
-export const calciteColorBorder3: string;
-export const calciteColorBorderInput: string;
-export const calciteColorBorderGhost: string;
-export const calciteColorBorderWhite: string;
+export const calciteColorTransparent: string;
+export const calciteColorTransparentHover: string;
+export const calciteColorTransparentPress: string;
+export const calciteColorTransparentScrim: string;
+export const calciteColorTransparentTint: string;
+export const calciteColorTransparentInverseHover: string;
+export const calciteColorTransparentInversePress: string;
 export const calciteColorFocus: string;

package/dist/es6/dark.js

@@ -3,24 +3,36 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteColorBackground = "#363636";
+export const calciteColorSurface1 = "#212121";
+export const calciteColorSurface2 = "#2b2b2b";
+export const calciteColorSurface3 = "#363636";
+export const calciteColorSurface4 = "#404040";
+export const calciteColorSurfaceHighlight = "#2b465f";
+export const calciteColorBackground = "#212121"; // Deprecated, use `--calcite-color-surface-1` instead
 export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
-export const calciteColorForeground1 = "#2b2b2b";
-export const calciteColorForeground2 = "#212121";
-export const calciteColorForeground3 = "#141414";
+export const calciteColorForeground1 = "#2b2b2b"; // Deprecated, use `--calcite-color-surface-2` instead
+export const calciteColorForeground2 = "#363636"; // Deprecated, use `--calcite-color-surface-3` instead
+export const calciteColorForeground3 = "#404040"; // Deprecated, use `--calcite-color-surface-4` instead
 export const calciteColorForegroundCurrent = "#2b465f"; // deprecated, use --calcite-color-surface-highlight instead
-export const calciteColorSurfaceHighlight = "#2b465f";
-export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
-export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
-export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
-export const calciteColorTransparentInverseHover = "rgba(0, 0, 0, 0.04)";
-export const calciteColorTransparentInversePress = "rgba(0, 0, 0, 0.08)";
-export const calciteColorTransparentScrim = "rgba(0, 0, 0, 0.85)";
-export const calciteColorTransparentTint = "rgba(43, 43, 43, 0.8)";
+export const calciteColorText1 = "#ffffff";
+export const calciteColorText2 = "#bfbfbf";
+export const calciteColorText3 = "#9e9e9e";
+export const calciteColorTextInverse = "#141414";
+export const calciteColorTextLink = "#00a0ff";
+export const calciteColorTextHighlight = "#d6efff";
+export const calciteColorBorder1 = "#545454";
+export const calciteColorBorder2 = "#4a4a4a";
+export const calciteColorBorder3 = "#404040";
+export const calciteColorBorderInput = "#757575";
+export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
+export const calciteColorBorderWhite = "#f7f7f7";
 export const calciteColorBrand = "#009af2";
 export const calciteColorBrandHover = "#007ac2";
 export const calciteColorBrandPress = "#00619b";
 export const calciteColorBrandUnderline = "rgba(0, 160, 255, 0.4)";
+export const calciteColorInverse = "#f7f7f7";
+export const calciteColorInverseHover = "#f2f2f2";
+export const calciteColorInversePress = "#ebebeb";
 export const calciteColorStatusInfo = "#00a0ff";
 export const calciteColorStatusInfoHover = "#3db8ff";
 export const calciteColorStatusInfoPress = "#009af2";
@@ -33,19 +45,11 @@ export const calciteColorStatusWarningPress = "#ff9500";
 export const calciteColorStatusDanger = "#fe583e";
 export const calciteColorStatusDangerHover = "#ff0015";
 export const calciteColorStatusDangerPress = "#d90012";
-export const calciteColorInverse = "#f7f7f7";
-export const calciteColorInverseHover = "#ffffff";
-export const calciteColorInversePress = "#f2f2f2";
-export const calciteColorText1 = "#ffffff";
-export const calciteColorText2 = "#bfbfbf";
-export const calciteColorText3 = "#9e9e9e";
-export const calciteColorTextHighlight = "#d6efff";
-export const calciteColorTextInverse = "#141414";
-export const calciteColorTextLink = "#00a0ff";
-export const calciteColorBorder1 = "#545454";
-export const calciteColorBorder2 = "#4a4a4a";
-export const calciteColorBorder3 = "#404040";
-export const calciteColorBorderInput = "#757575";
-export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
-export const calciteColorBorderWhite = "#f7f7f7";
+export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
+export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
+export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
+export const calciteColorTransparentScrim = "rgba(0, 0, 0, 0.85)";
+export const calciteColorTransparentTint = "rgba(43, 43, 43, 0.8)";
+export const calciteColorTransparentInverseHover = "rgba(0, 0, 0, 0.04)";
+export const calciteColorTransparentInversePress = "rgba(0, 0, 0, 0.08)";
 export const calciteColorFocus = "#009af2";

package/dist/es6/global.d.ts

@@ -4,31 +4,41 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const calciteColorSurface1: { light: string; dark: string };
+export const calciteColorSurface2: { light: string; dark: string };
+export const calciteColorSurface3: { light: string; dark: string };
+export const calciteColorSurface4: { light: string; dark: string };
+export const calciteColorSurfaceHighlight: { light: string; dark: string };
+/** Deprecated, use `--calcite-color-surface-1` instead */
 export const calciteColorBackground: { light: string; dark: string };
 export const calciteColorBackgroundNone: string;
+/** Deprecated, use `--calcite-color-surface-2` instead */
 export const calciteColorForeground1: { light: string; dark: string };
+/** Deprecated, use `--calcite-color-surface-3` instead */
 export const calciteColorForeground2: { light: string; dark: string };
+/** Deprecated, use `--calcite-color-surface-4` instead */
 export const calciteColorForeground3: { light: string; dark: string };
 /** deprecated, use --calcite-color-surface-highlight instead */
 export const calciteColorForegroundCurrent: { light: string; dark: string };
-export const calciteColorSurfaceHighlight: { light: string; dark: string };
-export const calciteColorTransparent: { light: string; dark: string };
-export const calciteColorTransparentHover: { light: string; dark: string };
-export const calciteColorTransparentPress: { light: string; dark: string };
-export const calciteColorTransparentInverseHover: {
-  light: string;
-  dark: string;
-};
-export const calciteColorTransparentInversePress: {
-  light: string;
-  dark: string;
-};
-export const calciteColorTransparentScrim: { light: string; dark: string };
-export const calciteColorTransparentTint: { light: string; dark: string };
+export const calciteColorText1: { light: string; dark: string };
+export const calciteColorText2: { light: string; dark: string };
+export const calciteColorText3: { light: string; dark: string };
+export const calciteColorTextInverse: { light: string; dark: string };
+export const calciteColorTextLink: { light: string; dark: string };
+export const calciteColorTextHighlight: { light: string; dark: string };
+export const calciteColorBorder1: { light: string; dark: string };
+export const calciteColorBorder2: { light: string; dark: string };
+export const calciteColorBorder3: { light: string; dark: string };
+export const calciteColorBorderInput: { light: string; dark: string };
+export const calciteColorBorderGhost: { light: string; dark: string };
+export const calciteColorBorderWhite: { light: string; dark: string };
 export const calciteColorBrand: { light: string; dark: string };
 export const calciteColorBrandHover: { light: string; dark: string };
 export const calciteColorBrandPress: { light: string; dark: string };
 export const calciteColorBrandUnderline: { light: string; dark: string };
+export const calciteColorInverse: { light: string; dark: string };
+export const calciteColorInverseHover: { light: string; dark: string };
+export const calciteColorInversePress: { light: string; dark: string };
 export const calciteColorStatusInfo: { light: string; dark: string };
 export const calciteColorStatusInfoHover: { light: string; dark: string };
 export const calciteColorStatusInfoPress: { light: string; dark: string };
@@ -41,28 +51,28 @@ export const calciteColorStatusWarningPress: { light: string; dark: string };
 export const calciteColorStatusDanger: { light: string; dark: string };
 export const calciteColorStatusDangerHover: { light: string; dark: string };
 export const calciteColorStatusDangerPress: { light: string; dark: string };
-export const calciteColorInverse: { light: string; dark: string };
-export const calciteColorInverseHover: { light: string; dark: string };
-export const calciteColorInversePress: { light: string; dark: string };
-export const calciteColorText1: { light: string; dark: string };
-export const calciteColorText2: { light: string; dark: string };
-export const calciteColorText3: { light: string; dark: string };
-export const calciteColorTextHighlight: { light: string; dark: string };
-export const calciteColorTextInverse: { light: string; dark: string };
-export const calciteColorTextLink: { light: string; dark: string };
-export const calciteColorBorder1: { light: string; dark: string };
-export const calciteColorBorder2: { light: string; dark: string };
-export const calciteColorBorder3: { light: string; dark: string };
-export const calciteColorBorderInput: { light: string; dark: string };
-export const calciteColorBorderGhost: { light: string; dark: string };
-export const calciteColorBorderWhite: { light: string; dark: string };
+export const calciteColorTransparent: { light: string; dark: string };
+export const calciteColorTransparentHover: { light: string; dark: string };
+export const calciteColorTransparentPress: { light: string; dark: string };
+export const calciteColorTransparentScrim: { light: string; dark: string };
+export const calciteColorTransparentTint: { light: string; dark: string };
+export const calciteColorTransparentInverseHover: {
+  light: string;
+  dark: string;
+};
+export const calciteColorTransparentInversePress: {
+  light: string;
+  dark: string;
+};
 export const calciteColorFocus: { light: string; dark: string };
 export const calciteBorderWidthNone: string;
 export const calciteBorderWidthSm: string;
 export const calciteBorderWidthMd: string;
 export const calciteBorderWidthLg: string;
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeHeightXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeHeight2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeHeightXs: { min: string; max: string };
 /** Small tablets */
@@ -73,8 +83,10 @@ export const calciteContainerSizeHeightMd: { min: string; max: string };
 export const calciteContainerSizeHeightLg: { min: string; max: string };
 /** Projectors and televisions */
 export const calciteContainerSizeHeightXl: { min: string };
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeWidthXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeWidth2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeWidthXs: { min: string; max: string };
 /** Small tablets */
@@ -118,7 +130,21 @@ export const calciteFontSize: string;
 export const calciteFontSizeMd: string;
 export const calciteFontSizeLg: string;
 export const calciteFontSizeXl: string;
+/** Deprecated, use --calcite-font-size-2xl instead. */
 export const calciteFontSizeXxl: string;
+export const calciteFontSize2xl: string;
+export const calciteFontSizeRelativeXs: string;
+export const calciteFontSizeRelativeSm: string;
+export const calciteFontSizeRelativeBase: string;
+export const calciteFontSizeRelativeMd: string;
+export const calciteFontSizeRelativeLg: string;
+export const calciteFontSizeRelativeXl: string;
+export const calciteFontSizeRelative2xl: string;
+export const calciteFontSizeRelative3xl: string;
+export const calciteFontSizeRelative4xl: string;
+export const calciteFontSizeRelative5xl: string;
+export const calciteFontSizeRelative6xl: string;
+export const calciteFontSizeRelative7xl: string;
 /** used in ratings */
 export const calciteFontStyleEmphasis: string;
 export const calciteFontLineHeightFixedSm: string;
@@ -144,6 +170,18 @@ export const calciteFontLineHeightRelativeNormal: string;
 export const calciteFontLineHeightRelativeRelaxed: string;
 /** 2 */
 export const calciteFontLineHeightRelativeLoose: string;
+export const calciteFontLineHeightXs: string;
+export const calciteFontLineHeightSm: string;
+export const calciteFontLineHeightBase: string;
+export const calciteFontLineHeightMd: string;
+export const calciteFontLineHeightLg: string;
+export const calciteFontLineHeightXl: string;
+export const calciteFontLineHeight2xl: string;
+export const calciteFontLineHeight3xl: string;
+export const calciteFontLineHeight4xl: string;
+export const calciteFontLineHeight5xl: string;
+export const calciteFontLineHeight6xl: string;
+export const calciteFontLineHeight7xl: string;
 /** Deprecated */
 export const calciteFontLetterSpacingTight: string;
 /** Deprecated */
@@ -164,11 +202,11 @@ export const calciteFontTextCaseUppercase: string;
 export const calciteFontTextCaseLowercase: string;
 /** Deprecated */
 export const calciteFontTextCaseCapitalize: string;
+export const calciteOpacityDisabled: string;
 export const calciteOpacityLight: string;
 export const calciteOpacityHalf: string;
 export const calciteOpacityDark: string;
 export const calciteOpacityFull: string;
-export const calciteOpacityDisabled: string;
 export const calciteShadowNone: {
   blur: string;
   spread: string;
@@ -213,15 +251,24 @@ export const calciteSizeFixedXxl: string;
 /** deprecated */
 export const calciteSizeFixedXxxl: string;
 export const calciteSizePx: string;
+export const calciteSize4xs: string;
+/** Deprecated, use --calcite-size-3xs instead. */
 export const calciteSizeXxxs: string;
+export const calciteSize3xs: string;
+/** Deprecated, use --calcite-size-2xs instead. */
 export const calciteSizeXxs: string;
+export const calciteSize2xs: string;
 export const calciteSizeXs: string;
 export const calciteSizeSm: string;
 export const calciteSizeMd: string;
 export const calciteSizeLg: string;
 export const calciteSizeXl: string;
+/** Deprecated, use --calcite-size-2xl instead. */
 export const calciteSizeXxl: string;
+export const calciteSize2xl: string;
+/** Deprecated, use --calcite-size-3xl instead. */
 export const calciteSizeXxxl: string;
+export const calciteSize3xl: string;
 /** deprecated */
 export const calciteSpacingFixedXxs: string;
 /** deprecated */
@@ -238,19 +285,46 @@ export const calciteSpacingFixedXl: string;
 export const calciteSpacingFixedXxl: string;
 /** deprecated */
 export const calciteSpacingFixedXxxl: string;
+/** deprecated, use `--calcite-space-none` instead */
 export const calciteSpacingNone: string;
+/** deprecated, use `--calcite-space-px` instead */
 export const calciteSpacingPx: string;
+/** deprecated, use `--calcite-space-base` instead */
 export const calciteSpacingBase: string;
+/** deprecated, use `--calcite-space-2xs` instead */
 export const calciteSpacingXxs: string;
+/** deprecated, use `--calcite-space-xs` instead */
 export const calciteSpacingXs: string;
+/** deprecated, use `--calcite-space-sm` instead */
 export const calciteSpacingSm: string;
+/** deprecated, use `--calcite-space-sm-plus` instead */
 export const calciteSpacingSmPlus: string;
+/** deprecated, use `--calcite-space-md` instead */
 export const calciteSpacingMd: string;
+/** deprecated, use `--calcite-space-md-plus` instead */
 export const calciteSpacingMdPlus: string;
+/** deprecated, use `--calcite-space-lg` instead */
 export const calciteSpacingLg: string;
+/** deprecated, use `--calcite-space-xl` instead */
 export const calciteSpacingXl: string;
+/** deprecated, use `--calcite-space-2xl` instead */
 export const calciteSpacingXxl: string;
+/** deprecated, use `--calcite-space-3xl` instead */
 export const calciteSpacingXxxl: string;
+export const calciteSpaceNone: string;
+export const calciteSpacePx: string;
+export const calciteSpaceBase: string;
+export const calciteSpace2xs: string;
+export const calciteSpaceXs: string;
+export const calciteSpaceSm: string;
+export const calciteSpaceSmPlus: string;
+export const calciteSpaceMd: string;
+export const calciteSpaceMdPlus: string;
+export const calciteSpaceLg: string;
+export const calciteSpaceXl: string;
+export const calciteSpace2xl: string;
+export const calciteSpace3xl: string;
+export const calciteSpace4xl: string;
 export const calciteTypography: {
   fontFamily: string[];
   fontSize: string;