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

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

@@ -620,6 +620,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

@@ -600,6 +600,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.js

@@ -3,11 +3,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteColorBackground = "#363636";
+export const calciteColorBackground = "#212121";
 export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
 export const calciteColorForeground1 = "#2b2b2b";
-export const calciteColorForeground2 = "#212121";
-export const calciteColorForeground3 = "#141414";
+export const calciteColorForeground2 = "#363636";
+export const calciteColorForeground3 = "#404040";
 export const calciteColorForegroundCurrent = "#2b465f"; // deprecated, use --calcite-color-surface-highlight instead
 export const calciteColorSurfaceHighlight = "#2b465f";
 export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
@@ -34,8 +34,8 @@ 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 calciteColorInverseHover = "#f2f2f2";
+export const calciteColorInversePress = "#ebebeb";
 export const calciteColorText1 = "#ffffff";
 export const calciteColorText2 = "#bfbfbf";
 export const calciteColorText3 = "#9e9e9e";

package/dist/es6/global.d.ts

@@ -61,8 +61,10 @@ 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 +75,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 +122,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 +162,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 */
@@ -213,15 +243,23 @@ export const calciteSizeFixedXxl: string;
 /** deprecated */
 export const calciteSizeFixedXxxl: string;
 export const calciteSizePx: 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 +276,45 @@ 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 calciteTypography: {
   fontFamily: string[];
   fontSize: string;

package/dist/es6/global.js

@@ -4,11 +4,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteColorBackground = { light: "#f7f7f7", dark: "#363636" };
+export const calciteColorBackground = { light: "#f7f7f7", dark: "#212121" };
 export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
 export const calciteColorForeground1 = { light: "#ffffff", dark: "#2b2b2b" };
-export const calciteColorForeground2 = { light: "#f2f2f2", dark: "#212121" };
-export const calciteColorForeground3 = { light: "#ebebeb", dark: "#141414" };
+export const calciteColorForeground2 = { light: "#f2f2f2", dark: "#363636" };
+export const calciteColorForeground3 = { light: "#ebebeb", dark: "#404040" };
 export const calciteColorForegroundCurrent = {
   light: "#d6efff",
   dark: "#2b465f",
@@ -89,17 +89,17 @@ export const calciteColorStatusDangerPress = {
   dark: "#d90012",
 };
 export const calciteColorInverse = { light: "#363636", dark: "#f7f7f7" };
-export const calciteColorInverseHover = { light: "#2b2b2b", dark: "#ffffff" };
-export const calciteColorInversePress = { light: "#212121", dark: "#f2f2f2" };
+export const calciteColorInverseHover = { light: "#2b2b2b", dark: "#f2f2f2" };
+export const calciteColorInversePress = { light: "#212121", dark: "#ebebeb" };
 export const calciteColorText1 = { light: "#141414", dark: "#ffffff" };
 export const calciteColorText2 = { light: "#4a4a4a", dark: "#bfbfbf" };
 export const calciteColorText3 = { light: "#6b6b6b", dark: "#9e9e9e" };
 export const calciteColorTextHighlight = { light: "#004874", dark: "#d6efff" };
 export const calciteColorTextInverse = { light: "#ffffff", dark: "#141414" };
 export const calciteColorTextLink = { light: "#00619b", dark: "#00a0ff" };
-export const calciteColorBorder1 = { light: "#c9c9c9", dark: "#545454" };
-export const calciteColorBorder2 = { light: "#d4d4d4", dark: "#4a4a4a" };
-export const calciteColorBorder3 = { light: "#dedede", dark: "#404040" };
+export const calciteColorBorder1 = { light: "#d4d4d4", dark: "#545454" };
+export const calciteColorBorder2 = { light: "#dedede", dark: "#4a4a4a" };
+export const calciteColorBorder3 = { light: "#ebebeb", dark: "#404040" };
 export const calciteColorBorderInput = { light: "#949494", dark: "#757575" };
 export const calciteColorBorderGhost = {
   light: "rgba(0, 0, 0, 0.3)",
@@ -111,13 +111,15 @@ export const calciteBorderWidthNone = "0";
 export const calciteBorderWidthSm = "1px";
 export const calciteBorderWidthMd = "2px";
 export const calciteBorderWidthLg = "4px";
-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
@@ -159,7 +161,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";
@@ -177,6 +192,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
@@ -225,15 +252,19 @@ 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 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
@@ -242,19 +273,32 @@ 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 calciteTypography = {
   fontFamily: ["Avenir Next", "Avenir", "Helvetica Neue", "sans-serif"],
   fontSize: "14px",

package/dist/es6/light.js

@@ -42,9 +42,9 @@ export const calciteColorText3 = "#6b6b6b";
 export const calciteColorTextHighlight = "#004874";
 export const calciteColorTextInverse = "#ffffff";
 export const calciteColorTextLink = "#00619b";
-export const calciteColorBorder1 = "#c9c9c9";
-export const calciteColorBorder2 = "#d4d4d4";
-export const calciteColorBorder3 = "#dedede";
+export const calciteColorBorder1 = "#d4d4d4";
+export const calciteColorBorder2 = "#dedede";
+export const calciteColorBorder3 = "#ebebeb";
 export const calciteColorBorderInput = "#949494";
 export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
 export const calciteColorBorderWhite = "#ffffff";

package/dist/es6/semantic.d.ts

@@ -40,7 +40,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;
@@ -66,6 +80,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 */
@@ -135,15 +161,23 @@ export const calciteSizeFixedXxl: string;
 /** deprecated */
 export const calciteSizeFixedXxxl: string;
 export const calciteSizePx: 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 */
@@ -160,19 +194,45 @@ 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 calciteZIndexDeep: string;
 export const calciteZIndex: string;
 export const calciteZIndexSticky: string;

package/dist/es6/semantic.js

@@ -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
@@ -109,15 +134,19 @@ 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 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 +155,32 @@ 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 calciteZIndexDeep = "-999999";
 export const calciteZIndex = "1";
 export const calciteZIndexSticky = "300";