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

package/dist/es6/global.js

@@ -4,47 +4,38 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteColorBackground = { light: "#f7f7f7", dark: "#363636" };
+export const calciteColorSurface1 = { light: "#f7f7f7", dark: "#212121" };
+export const calciteColorSurface2 = { light: "#ffffff", dark: "#2b2b2b" };
+export const calciteColorSurface3 = { light: "#f2f2f2", dark: "#363636" };
+export const calciteColorSurface4 = { light: "#ebebeb", dark: "#404040" };
+export const calciteColorSurfaceHighlight = {
+  light: "#d6efff",
+  dark: "#2b465f",
+};
+export const calciteColorBackground = { light: "#f7f7f7", dark: "#212121" }; // Deprecated, use `--calcite-color-surface-1` instead
 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 calciteColorForeground1 = { light: "#ffffff", dark: "#2b2b2b" }; // Deprecated, use `--calcite-color-surface-2` instead
+export const calciteColorForeground2 = { light: "#f2f2f2", dark: "#363636" }; // Deprecated, use `--calcite-color-surface-3` instead
+export const calciteColorForeground3 = { light: "#ebebeb", dark: "#404040" }; // Deprecated, use `--calcite-color-surface-4` instead
 export const calciteColorForegroundCurrent = {
   light: "#d6efff",
   dark: "#2b465f",
 }; // deprecated, use --calcite-color-surface-highlight instead
-export const calciteColorSurfaceHighlight = {
-  light: "#d6efff",
-  dark: "#2b465f",
-};
-export const calciteColorTransparent = {
-  light: "rgba(0, 0, 0, 0)",
-  dark: "rgba(255, 255, 255, 0)",
-};
-export const calciteColorTransparentHover = {
-  light: "rgba(0, 0, 0, 0.04)",
-  dark: "rgba(255, 255, 255, 0.12)",
-};
-export const calciteColorTransparentPress = {
-  light: "rgba(0, 0, 0, 0.08)",
-  dark: "rgba(255, 255, 255, 0.16)",
-};
-export const calciteColorTransparentInverseHover = {
-  light: "rgba(255, 255, 255, 0.12)",
-  dark: "rgba(0, 0, 0, 0.04)",
-};
-export const calciteColorTransparentInversePress = {
-  light: "rgba(255, 255, 255, 0.16)",
-  dark: "rgba(0, 0, 0, 0.08)",
-};
-export const calciteColorTransparentScrim = {
-  light: "rgba(255, 255, 255, 0.85)",
-  dark: "rgba(0, 0, 0, 0.85)",
-};
-export const calciteColorTransparentTint = {
-  light: "rgba(255, 255, 255, 0.8)",
-  dark: "rgba(43, 43, 43, 0.8)",
+export const calciteColorText1 = { light: "#141414", dark: "#ffffff" };
+export const calciteColorText2 = { light: "#4a4a4a", dark: "#bfbfbf" };
+export const calciteColorText3 = { light: "#6b6b6b", dark: "#9e9e9e" };
+export const calciteColorTextInverse = { light: "#ffffff", dark: "#141414" };
+export const calciteColorTextLink = { light: "#00619b", dark: "#00a0ff" };
+export const calciteColorTextHighlight = { light: "#004874", dark: "#d6efff" };
+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)",
+  dark: "rgba(117, 117, 117, 0.3)",
 };
+export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
 export const calciteColorBrand = { light: "#007ac2", dark: "#009af2" };
 export const calciteColorBrandHover = { light: "#00619b", dark: "#007ac2" };
 export const calciteColorBrandPress = { light: "#004874", dark: "#00619b" };
@@ -52,6 +43,9 @@ export const calciteColorBrandUnderline = {
   light: "rgba(0, 97, 155, 0.4)",
   dark: "rgba(0, 160, 255, 0.4)",
 };
+export const calciteColorInverse = { light: "#363636", dark: "#f7f7f7" };
+export const calciteColorInverseHover = { light: "#2b2b2b", dark: "#f2f2f2" };
+export const calciteColorInversePress = { light: "#212121", dark: "#ebebeb" };
 export const calciteColorStatusInfo = { light: "#00619b", dark: "#00a0ff" };
 export const calciteColorStatusInfoHover = {
   light: "#004874",
@@ -61,18 +55,18 @@ export const calciteColorStatusInfoPress = {
   light: "#00304d",
   dark: "#009af2",
 };
-export const calciteColorStatusSuccess = { light: "#35ac46", dark: "#36da43" };
+export const calciteColorStatusSuccess = { light: "#288835", dark: "#36da43" };
 export const calciteColorStatusSuccessHover = {
-  light: "#288835",
+  light: "#1a6324",
   dark: "#3bed52",
 };
 export const calciteColorStatusSuccessPress = {
-  light: "#1a6324",
+  light: "#0d3f14",
   dark: "#00b81b",
 };
-export const calciteColorStatusWarning = { light: "#f89927", dark: "#f89927" };
+export const calciteColorStatusWarning = { light: "#da7c0b", dark: "#f89927" };
 export const calciteColorStatusWarningHover = {
-  light: "#d17300",
+  light: "#c26b00",
   dark: "#ffb54d",
 };
 export const calciteColorStatusWarningPress = {
@@ -88,36 +82,48 @@ export const calciteColorStatusDangerPress = {
   light: "#7c1d13",
   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 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 calciteColorBorderInput = { light: "#949494", dark: "#757575" };
-export const calciteColorBorderGhost = {
-  light: "rgba(0, 0, 0, 0.3)",
-  dark: "rgba(117, 117, 117, 0.3)",
+export const calciteColorTransparent = {
+  light: "rgba(0, 0, 0, 0)",
+  dark: "rgba(255, 255, 255, 0)",
+};
+export const calciteColorTransparentHover = {
+  light: "rgba(0, 0, 0, 0.04)",
+  dark: "rgba(255, 255, 255, 0.12)",
+};
+export const calciteColorTransparentPress = {
+  light: "rgba(0, 0, 0, 0.08)",
+  dark: "rgba(255, 255, 255, 0.16)",
+};
+export const calciteColorTransparentScrim = {
+  light: "rgba(255, 255, 255, 0.85)",
+  dark: "rgba(0, 0, 0, 0.85)",
+};
+export const calciteColorTransparentTint = {
+  light: "rgba(255, 255, 255, 0.8)",
+  dark: "rgba(43, 43, 43, 0.8)",
+};
+export const calciteColorTransparentInverseHover = {
+  light: "rgba(255, 255, 255, 0.12)",
+  dark: "rgba(0, 0, 0, 0.04)",
+};
+export const calciteColorTransparentInversePress = {
+  light: "rgba(255, 255, 255, 0.16)",
+  dark: "rgba(0, 0, 0, 0.08)",
 };
-export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
 export const calciteColorFocus = { light: "#007ac2", dark: "#009af2" };
 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
@@ -133,7 +139,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",
@@ -159,7 +165,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 +196,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
@@ -187,11 +218,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",
@@ -225,15 +256,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
@@ -242,19 +278,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 calciteTypography = {
   fontFamily: ["Avenir Next", "Avenir", "Helvetica Neue", "sans-serif"],
   fontSize: "14px",

package/dist/es6/light.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/light.js

@@ -3,49 +3,53 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteColorBackground = "#f7f7f7";
+export const calciteColorSurface1 = "#f7f7f7";
+export const calciteColorSurface2 = "#ffffff";
+export const calciteColorSurface3 = "#f2f2f2";
+export const calciteColorSurface4 = "#ebebeb";
+export const calciteColorSurfaceHighlight = "#d6efff";
+export const calciteColorBackground = "#f7f7f7"; // Deprecated, use `--calcite-color-surface-1` instead
 export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
-export const calciteColorForeground1 = "#ffffff";
-export const calciteColorForeground2 = "#f2f2f2";
-export const calciteColorForeground3 = "#ebebeb";
+export const calciteColorForeground1 = "#ffffff"; // Deprecated, use `--calcite-color-surface-2` instead
+export const calciteColorForeground2 = "#f2f2f2"; // Deprecated, use `--calcite-color-surface-3` instead
+export const calciteColorForeground3 = "#ebebeb"; // Deprecated, use `--calcite-color-surface-4` instead
 export const calciteColorForegroundCurrent = "#d6efff"; // deprecated, use --calcite-color-surface-highlight instead
-export const calciteColorSurfaceHighlight = "#d6efff";
-export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
-export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
-export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
-export const calciteColorTransparentInverseHover = "rgba(255, 255, 255, 0.12)";
-export const calciteColorTransparentInversePress = "rgba(255, 255, 255, 0.16)";
-export const calciteColorTransparentScrim = "rgba(255, 255, 255, 0.85)";
-export const calciteColorTransparentTint = "rgba(255, 255, 255, 0.8)";
+export const calciteColorText1 = "#141414";
+export const calciteColorText2 = "#4a4a4a";
+export const calciteColorText3 = "#6b6b6b";
+export const calciteColorTextInverse = "#ffffff";
+export const calciteColorTextLink = "#00619b";
+export const calciteColorTextHighlight = "#004874";
+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";
 export const calciteColorBrand = "#007ac2";
 export const calciteColorBrandHover = "#00619b";
 export const calciteColorBrandPress = "#004874";
 export const calciteColorBrandUnderline = "rgba(0, 97, 155, 0.4)";
+export const calciteColorInverse = "#363636";
+export const calciteColorInverseHover = "#2b2b2b";
+export const calciteColorInversePress = "#212121";
 export const calciteColorStatusInfo = "#00619b";
 export const calciteColorStatusInfoHover = "#004874";
 export const calciteColorStatusInfoPress = "#00304d";
-export const calciteColorStatusSuccess = "#35ac46";
-export const calciteColorStatusSuccessHover = "#288835";
-export const calciteColorStatusSuccessPress = "#1a6324";
-export const calciteColorStatusWarning = "#f89927";
-export const calciteColorStatusWarningHover = "#d17300";
+export const calciteColorStatusSuccess = "#288835";
+export const calciteColorStatusSuccessHover = "#1a6324";
+export const calciteColorStatusSuccessPress = "#0d3f14";
+export const calciteColorStatusWarning = "#da7c0b";
+export const calciteColorStatusWarningHover = "#c26b00";
 export const calciteColorStatusWarningPress = "#9a5b10";
 export const calciteColorStatusDanger = "#d83020";
 export const calciteColorStatusDangerHover = "#a82b1e";
 export const calciteColorStatusDangerPress = "#7c1d13";
-export const calciteColorInverse = "#363636";
-export const calciteColorInverseHover = "#2b2b2b";
-export const calciteColorInversePress = "#212121";
-export const calciteColorText1 = "#141414";
-export const calciteColorText2 = "#4a4a4a";
-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 calciteColorBorderInput = "#949494";
-export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
-export const calciteColorBorderWhite = "#ffffff";
+export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
+export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
+export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
+export const calciteColorTransparentScrim = "rgba(255, 255, 255, 0.85)";
+export const calciteColorTransparentTint = "rgba(255, 255, 255, 0.8)";
+export const calciteColorTransparentInverseHover = "rgba(255, 255, 255, 0.12)";
+export const calciteColorTransparentInversePress = "rgba(255, 255, 255, 0.16)";
 export const calciteColorFocus = "#007ac2";

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 */
@@ -86,11 +112,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;
@@ -135,15 +161,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 */
@@ -160,19 +195,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 calciteZIndexDeep: string;
 export const calciteZIndex: string;
 export const calciteZIndexSticky: string;