@sage/design-tokens 5.2.0 → 6.0.0

package/js/es6/marketing/large/light/components/status.js

@@ -7,59 +7,78 @@
  */
 
 export const statusColorNone = "#fff0"; // transparent override used for hiding colors when needed.
-export const statusColorBgDefault = "#FFFFFF";
-export const statusColorBgReadonly = "#a6a6a6"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorBorderReadonly = "#a6a6a6"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorIconDefault = "#FFFFFF"; // Decorative message icons
-export const statusColorLabelDefault = "#FFFFFF";
-export const statusColorLabelReadonly = "#FFFFFF"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorLabelHover = "#FFFFFF";
-export const statusColorLabelAltDefault = "#000000f2";
-export const statusColorLabelAltReadonly = "#000000ab"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorLabelAltHover = "#000000";
-export const statusColorText = "#000000"; // Message text.
-export const statusColorAiBgDefault = "#000000";
-export const statusColorAiBorderDefault = "#000000";
-export const statusColorCalloutBgAlt = "#e5fae2"; // Subtle message bg
-export const statusColorCalloutBgAltDefault = "#e5fae2"; // Global message bg
-export const statusColorCalloutBgAltHover = "#d8ecd5"; // Subtle message bg
-export const statusColorErrorBgDefault = "#CD384B";
-export const statusColorErrorBgAlt = "#fdeceb"; // Subtle message bg
-export const statusColorErrorBgAltHover = "#efdfde";
-export const statusColorErrorBgHover = "#aa323f";
-export const statusColorErrorBorderDefault = "#CD384B";
-export const statusColorErrorIcon = "#CD384B"; // Icon on tinted bgs
-export const statusColorInfoBgDefault = "#0060A7";
-export const statusColorInfoBgAlt = "#eaeef6"; // Subtle message bg
-export const statusColorInfoBgAltDefault = "#eaeef6"; // Global message bg
-export const statusColorInfoBgAltHover = "#dde1e8";
-export const statusColorInfoBgHover = "#10508a";
-export const statusColorInfoBorderDefault = "#0060A7";
-export const statusColorInfoIcon = "#0060A7"; // Icon on tinted bgs
-export const statusColorNeutralBgDefault = "#656565";
-export const statusColorNeutralBgAlt = "#efefef"; // Subtle message bg
-export const statusColorNeutralBgAltHover = "#e2e2e2";
-export const statusColorNeutralBgHover = "#555";
-export const statusColorNeutralBorderDefault = "#656565";
-export const statusColorNeutralIcon = "#656565"; // Icon on tinted bgs
+export const statusColorMessageGlobalLabelDefault = "#000000f2";
+export const statusColorMessageGlobalLabelHover = "#000000f2";
+export const statusColorMessageGlobalCalloutBgDefault = "#e5fae2"; // Global message bg
+export const statusColorMessageGlobalCalloutBgHover = "#d8ecd5"; // global message bg hover
+export const statusColorMessageGlobalCalloutIcon = "#000000f2"; // Icon on tinted bgs
+export const statusColorMessageGlobalInfoBgDefault = "#eaeef6"; // Global message bg
+export const statusColorMessageGlobalInfoBgHover = "#dde1e8";
+export const statusColorMessageGlobalInfoIcon = "#0060A7"; // Icon on tinted bgs
+export const statusColorMessageGlobalWarningBgDefault = "#ffede5"; // Global message bg
+export const statusColorMessageGlobalWarningBgHover = "#f1e0d8";
+export const statusColorMessageGlobalWarningIcon = "#D64309"; // Icon on tinted bgs
+export const statusColorMessageContextualBg = "#FFFFFF";
+export const statusColorMessageContextualIcon = "#FFFFFF"; // decorative icon on standard contextual messages
+export const statusColorMessageContextualText = "#000000"; // Message text.
+export const statusColorMessageContextualAiBgDefault = "#000000";
+export const statusColorMessageContextualAiBgAlt = "#efefef";
+export const statusColorMessageContextualAiBorderDefault = "#000000";
+export const statusColorMessageContextualCalloutBgAlt = "#e5fae2"; // Subtle message bg
+export const statusColorMessageContextualCalloutIcon = "#000000f2";
+export const statusColorMessageContextualErrorBgDefault = "#CD384B";
+export const statusColorMessageContextualErrorBgAlt = "#fdeceb"; // Subtle message bg
+export const statusColorMessageContextualErrorBorderDefault = "#CD384B";
+export const statusColorMessageContextualErrorIcon = "#CD384B"; // Icon on tinted bgs
+export const statusColorMessageContextualInfoBgDefault = "#0060A7";
+export const statusColorMessageContextualInfoBgAlt = "#eaeef6"; // Subtle message bg
+export const statusColorMessageContextualInfoBorderDefault = "#0060A7";
+export const statusColorMessageContextualInfoIcon = "#0060A7"; // Icon on tinted bgs
+export const statusColorMessageContextualSuccessBgDefault = "#008A21";
+export const statusColorMessageContextualSuccessBgAlt = "#eaf3e8"; // Subtle message bg
+export const statusColorMessageContextualSuccessBorderDefault = "#008A21";
+export const statusColorMessageContextualSuccessIcon = "#008A21"; // Icon on tinted bgs
+export const statusColorMessageContextualWarningBgDefault = "#D64309";
+export const statusColorMessageContextualWarningBgAlt = "#ffede5"; // Subtle message bg
+export const statusColorMessageContextualWarningBorderDefault = "#D64309";
+export const statusColorMessageContextualWarningIcon = "#D64309"; // Icon on tinted bgs
+export const statusColorPillLabelDefault = "#FFFFFF";
+export const statusColorPillLabelHover = "#FFFFFF";
+export const statusColorPillLabelAltDefault = "#000000f2";
+export const statusColorPillLabelAltHover = "#000000f2";
+export const statusColorPillErrorBgDefault = "#CD384B";
+export const statusColorPillErrorBgAltDefault = "#fdeceb"; // outline pill bg
+export const statusColorPillErrorBgAltHover = "#efdfde";
+export const statusColorPillErrorBgHover = "#aa323f";
+export const statusColorPillErrorBorderDefault = "#CD384B";
+export const statusColorPillInfoBgDefault = "#0060A7";
+export const statusColorPillInfoBgAltDefault = "#eaeef6"; // outline pill bg
+export const statusColorPillInfoBgAltHover = "#dde1e8";
+export const statusColorPillInfoBgHover = "#10508a";
+export const statusColorPillInfoBorderDefault = "#0060A7";
+export const statusColorPillNeutralBgDefault = "#656565";
+export const statusColorPillNeutralBgAltDefault = "#efefef"; // outline pill bg
+export const statusColorPillNeutralBgAltHover = "#e2e2e2";
+export const statusColorPillNeutralBgHover = "#555";
+export const statusColorPillNeutralBorderDefault = "#656565";
+export const statusColorPillSuccessBgDefault = "#008A21";
+export const statusColorPillSuccessBgAltDefault = "#eaf3e8"; // outline pill bg
+export const statusColorPillSuccessBgAltHover = "#dde5db";
+export const statusColorPillSuccessBgHover = "#0f731e";
+export const statusColorPillSuccessBorderDefault = "#008A21";
+export const statusColorPillWarningBgDefault = "#D64309";
+export const statusColorPillWarningBgAltDefault = "#ffede5"; // Global message bg
+export const statusColorPillWarningBgAltHover = "#f1e0d8";
+export const statusColorPillWarningBgHover = "#b13a0d";
+export const statusColorPillWarningBorderDefault = "#D64309";
+export const statusColorPillReadonlyBgDefault = "#a6a6a6"; // Pill (all types, readonly, when nested in disabled parent components)
+export const statusColorPillReadonlyBorderDefault = "#a6a6a6"; // Pill (all types, readonly, when nested in disabled parent components)
+export const statusColorPillReadonlyLabel = "#000000ab"; // Pill (all types, readonly, when nested in disabled parent components)
 export const statusColorRatingBgDefault = "#00811F";
 export const statusColorRatingBgDefaultAlt =
   "linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%)";
 export const statusColorRatingBgHover = "#0e6b1d";
 export const statusColorRatingBorderDefault = "#00811F";
-export const statusColorSuccessBgDefault = "#008A21";
-export const statusColorSuccessBgAlt = "#eaf3e8"; // Subtle message bg
-export const statusColorSuccessBgAltHover = "#dde5db";
-export const statusColorSuccessBgHover = "#0f731e";
-export const statusColorSuccessBorderDefault = "#008A21";
-export const statusColorSuccessIcon = "#008A21"; // Icon on tinted bgs
-export const statusColorWarningBgDefault = "#D64309";
-export const statusColorWarningBgAlt = "#ffede5"; // Subtle message bg
-export const statusColorWarningBgAltDefault = "#ffede5"; // Global message bg
-export const statusColorWarningBgAltHover = "#f1e0d8";
-export const statusColorWarningBgHover = "#b13a0d";
-export const statusColorWarningBorderDefault = "#D64309";
-export const statusColorWarningIcon = "#D64309"; // Icon on tinted bgs
 export const statusSizePillS = 20; // Min height
 export const statusSizePillM = 24; // Min height and removable button.
 export const statusSizePillL = 28; // Min height and removable button

package/js/es6/marketing/large/light/mode.d.ts

@@ -12,12 +12,7 @@ export const modesColorBrandDefaultAlt: string;
 export const modesColorBrandWithDefaultAlt: string;
 export const modesColorBrandCopilotAiIdentifierDefault: string;
 export const modesColorBrandCopilotAiIdentifierWithDefault: string;
-export const modesColorBrandCopilotNoBgS: string;
-export const modesColorBrandCopilotNoBgStar: string;
-export const modesColorBrandCopilotNoBgMono: string;
-export const modesColorBrandCopilotWithBgS: string;
-export const modesColorBrandCopilotWithBgStar: string;
-export const modesColorBrandCopilotWithBgBg: string;
+export const modesColorBrandCopilotNoBgMonochrome: string;
 /** This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
 export const modesColorCustomDefault: string;
 /** This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
@@ -185,7 +180,9 @@ export const modesColorStatusCautionHover: string;
 export const modesColorStatusCautionHoverAlt: string;
 export const modesColorStatusCautionText: string;
 /** used on global message bg */
-export const modesColorStatusCautionFrozenDefault: string;
+export const modesColorStatusCautionFrozenglobalDefault: string;
+/** used on global message bg */
+export const modesColorStatusCautionFrozenglobalHover: string;
 export const modesColorStatusContentWithDefault: string;
 export const modesColorStatusContentWithDefaultAlt: string;
 /** for pill hover X */
@@ -207,7 +204,9 @@ export const modesColorStatusInfoHover: string;
 /** used on pill hover states and message bg */
 export const modesColorStatusInfoHoverAlt: string;
 /** used on global message bg */
-export const modesColorStatusInfoFrozenDefault: string;
+export const modesColorStatusInfoFrozenglobalDefault: string;
+/** used on global message bg */
+export const modesColorStatusInfoFrozenglobalHover: string;
 /** For pills and messages. Not accessible with white TEXT. */
 export const modesColorStatusNegativeDefault: string;
 /** Subtle message bg */
@@ -217,7 +216,6 @@ export const modesColorStatusNegativeHover: string;
 /** used on pill hover states and message bg */
 export const modesColorStatusNegativeHoverAlt: string;
 export const modesColorStatusNegativeText: string;
-export const modesColorStatusNeutralAlt: string;
 export const modesColorStatusNeutralDefault: string;
 /** Subtle message bg */
 export const modesColorStatusNeutralDefaultAlt: string;
@@ -226,7 +224,11 @@ export const modesColorStatusNeutralHover: string;
 /** used on pill hover states and message bg */
 export const modesColorStatusNeutralHoverAlt: string;
 export const modesColorStatusNeutralFrozenDefault: string;
+/** Subtle message bg */
+export const modesColorStatusNeutralFrozenDefaultAlt: string;
 export const modesColorStatusNeutralFrozenHover: string;
+/** used on pill hover states and message bg */
+export const modesColorStatusNeutralFrozenHoverAlt: string;
 /** For pills and messages. Not accessible with white TEXT. */
 export const modesColorStatusPositiveDefault: string;
 /** Subtle message bg */

package/js/es6/marketing/large/light/mode.js

@@ -12,14 +12,7 @@ export const modesColorBrandDefaultAlt = "#000000";
 export const modesColorBrandWithDefaultAlt = "#FFFFFF";
 export const modesColorBrandCopilotAiIdentifierDefault = "#000000";
 export const modesColorBrandCopilotAiIdentifierWithDefault = "#00D639";
-export const modesColorBrandCopilotNoBgS = "#000000";
-export const modesColorBrandCopilotNoBgStar = "#000000";
-export const modesColorBrandCopilotNoBgMono = "#000000";
-export const modesColorBrandCopilotWithBgS =
-  "linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%)";
-export const modesColorBrandCopilotWithBgStar =
-  "radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%)";
-export const modesColorBrandCopilotWithBgBg = "#000000";
+export const modesColorBrandCopilotNoBgMonochrome = "#000000";
 export const modesColorCustomDefault = "#00811F"; // This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.
 export const modesColorCustomFrozen = "#008046"; // This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg.
 export const modesColorGenericBgNought = "#FFFFFF";
@@ -137,7 +130,8 @@ export const modesColorStatusCautionDefaultAlt = "#ffede5"; // Subtle message bg
 export const modesColorStatusCautionHover = "#b13a0d"; // used on pill hover states
 export const modesColorStatusCautionHoverAlt = "#f1e0d8"; // used on pill hover states and message bg
 export const modesColorStatusCautionText = "#bf3e0c";
-export const modesColorStatusCautionFrozenDefault = "#FF8629"; // used on global message bg
+export const modesColorStatusCautionFrozenglobalDefault = "#ff8629"; // used on global message bg
+export const modesColorStatusCautionFrozenglobalHover = "#ff9a4e"; // used on global message bg
 export const modesColorStatusContentWithDefault = "#FFFFFF";
 export const modesColorStatusContentWithDefaultAlt = "#000000f2";
 export const modesColorStatusContentWithHover = "#FFFFFF"; // for pill hover X
@@ -150,19 +144,21 @@ export const modesColorStatusInfoDefault = "#0060A7"; // For pills and messages.
 export const modesColorStatusInfoDefaultAlt = "#eaeef6"; // Subtle message bg
 export const modesColorStatusInfoHover = "#10508a"; // used on pill hover states
 export const modesColorStatusInfoHoverAlt = "#dde1e8"; // used on pill hover states and message bg
-export const modesColorStatusInfoFrozenDefault = "#65a9ff"; // used on global message bg
+export const modesColorStatusInfoFrozenglobalDefault = "#65a9ff"; // used on global message bg
+export const modesColorStatusInfoFrozenglobalHover = "#84b6ff"; // used on global message bg
 export const modesColorStatusNegativeDefault = "#CD384B"; // For pills and messages. Not accessible with white TEXT.
 export const modesColorStatusNegativeDefaultAlt = "#fdeceb"; // Subtle message bg
 export const modesColorStatusNegativeHover = "#aa323f"; // used on pill hover states
 export const modesColorStatusNegativeHoverAlt = "#efdfde"; // used on pill hover states and message bg
 export const modesColorStatusNegativeText = "#CD384B";
-export const modesColorStatusNeutralAlt = "#656565";
 export const modesColorStatusNeutralDefault = "#656565";
 export const modesColorStatusNeutralDefaultAlt = "#efefef"; // Subtle message bg
 export const modesColorStatusNeutralHover = "#555"; // used on pill hover states
 export const modesColorStatusNeutralHoverAlt = "#e2e2e2"; // used on pill hover states and message bg
 export const modesColorStatusNeutralFrozenDefault = "#335B70";
+export const modesColorStatusNeutralFrozenDefaultAlt = "#eaedf0"; // Subtle message bg
 export const modesColorStatusNeutralFrozenHover = "#20313b";
+export const modesColorStatusNeutralFrozenHoverAlt = "#dde0e2"; // used on pill hover states and message bg
 export const modesColorStatusPositiveDefault = "#008A21"; // For pills and messages. Not accessible with white TEXT.
 export const modesColorStatusPositiveDefaultAlt = "#eaf3e8"; // Subtle message bg
 export const modesColorStatusPositiveHover = "#0f731e"; // used on pill hover states

package/js/es6/marketing/small/dark/components/logo.d.ts

@@ -12,12 +12,7 @@ export const logoColorSageBgAlt: string;
 /** filled */
 export const logoColorTrustBgDefault: string;
 export const logoColorTrustOutline: string;
-export const logoColorCopilotNoBgBgS: string;
-export const logoColorCopilotNoBgBgStar: string;
 export const logoColorCopilotNoBgFgDefault: string;
-export const logoColorCopilotWithBgBgS: string;
-export const logoColorCopilotWithBgBgStar: string;
-export const logoColorCopilotWithBgBgDefault: string;
 /** star bg color */
 export const logoColorAiIdentifierBgStar: string;
 export const logoColorAiIdentifierBgDot: string;

package/js/es6/marketing/small/dark/components/logo.js

@@ -10,14 +10,7 @@ export const logoColorSageBgDefault = "#00D639"; // sage logo
 export const logoColorSageBgAlt = "#FFFFFF";
 export const logoColorTrustBgDefault = "#009023"; // filled
 export const logoColorTrustOutline = "#FFFFFF";
-export const logoColorCopilotNoBgBgS =
-  "linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%)";
-export const logoColorCopilotNoBgBgStar =
-  "radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%)";
 export const logoColorCopilotNoBgFgDefault = "#FFFFFF";
-export const logoColorCopilotWithBgBgS = "#000000";
-export const logoColorCopilotWithBgBgStar = "#000000";
-export const logoColorCopilotWithBgBgDefault = "#FFFFFF";
 export const logoColorAiIdentifierBgStar = "#FFFFFF"; // star bg color
 export const logoColorAiIdentifierBgDot = "#00D639";
 export const logoColorAiIdentifierOutline = "#FFFFFF"; // star outline variant

package/js/es6/marketing/small/dark/components/status.d.ts

@@ -8,79 +8,103 @@
 
 /** transparent override used for hiding colors when needed. */
 export const statusColorNone: string;
-export const statusColorBgDefault: string;
-/** Pill (all types, readonly, when nested in disabled parent components) */
-export const statusColorBgReadonly: string;
-/** Pill (all types, readonly, when nested in disabled parent components) */
-export const statusColorBorderReadonly: string;
-/** Decorative message icons */
-export const statusColorIconDefault: string;
-export const statusColorLabelDefault: string;
-/** Pill (all types, readonly, when nested in disabled parent components) */
-export const statusColorLabelReadonly: string;
-export const statusColorLabelHover: string;
-export const statusColorLabelAltDefault: string;
-/** Pill (all types, readonly, when nested in disabled parent components) */
-export const statusColorLabelAltReadonly: string;
-export const statusColorLabelAltHover: string;
+export const statusColorMessageGlobalLabelDefault: string;
+export const statusColorMessageGlobalLabelHover: string;
+/** Global message bg */
+export const statusColorMessageGlobalCalloutBgDefault: string;
+/** global message bg hover */
+export const statusColorMessageGlobalCalloutBgHover: string;
+/** Icon on tinted bgs */
+export const statusColorMessageGlobalCalloutIcon: string;
+/** Global message bg */
+export const statusColorMessageGlobalInfoBgDefault: string;
+export const statusColorMessageGlobalInfoBgHover: string;
+/** Icon on tinted bgs */
+export const statusColorMessageGlobalInfoIcon: string;
+/** Global message bg */
+export const statusColorMessageGlobalWarningBgDefault: string;
+export const statusColorMessageGlobalWarningBgHover: string;
+/** Icon on tinted bgs */
+export const statusColorMessageGlobalWarningIcon: string;
+export const statusColorMessageContextualBg: string;
+/** decorative icon on standard contextual messages */
+export const statusColorMessageContextualIcon: string;
 /** Message text. */
-export const statusColorText: string;
-export const statusColorAiBgDefault: string;
-export const statusColorAiBorderDefault: string;
+export const statusColorMessageContextualText: string;
+export const statusColorMessageContextualAiBgDefault: string;
+export const statusColorMessageContextualAiBgAlt: string;
+export const statusColorMessageContextualAiBorderDefault: string;
 /** Subtle message bg */
-export const statusColorCalloutBgAlt: string;
-/** Global message bg */
-export const statusColorCalloutBgAltDefault: string;
+export const statusColorMessageContextualCalloutBgAlt: string;
+export const statusColorMessageContextualCalloutIcon: string;
+export const statusColorMessageContextualErrorBgDefault: string;
 /** Subtle message bg */
-export const statusColorCalloutBgAltHover: string;
-export const statusColorErrorBgDefault: string;
+export const statusColorMessageContextualErrorBgAlt: string;
+export const statusColorMessageContextualErrorBorderDefault: string;
+/** Icon on tinted bgs */
+export const statusColorMessageContextualErrorIcon: string;
+export const statusColorMessageContextualInfoBgDefault: string;
 /** Subtle message bg */
-export const statusColorErrorBgAlt: string;
-export const statusColorErrorBgAltHover: string;
-export const statusColorErrorBgHover: string;
-export const statusColorErrorBorderDefault: string;
+export const statusColorMessageContextualInfoBgAlt: string;
+export const statusColorMessageContextualInfoBorderDefault: string;
 /** Icon on tinted bgs */
-export const statusColorErrorIcon: string;
-export const statusColorInfoBgDefault: string;
+export const statusColorMessageContextualInfoIcon: string;
+export const statusColorMessageContextualSuccessBgDefault: string;
 /** Subtle message bg */
-export const statusColorInfoBgAlt: string;
-/** Global message bg */
-export const statusColorInfoBgAltDefault: string;
-export const statusColorInfoBgAltHover: string;
-export const statusColorInfoBgHover: string;
-export const statusColorInfoBorderDefault: string;
+export const statusColorMessageContextualSuccessBgAlt: string;
+export const statusColorMessageContextualSuccessBorderDefault: string;
 /** Icon on tinted bgs */
-export const statusColorInfoIcon: string;
-export const statusColorNeutralBgDefault: string;
+export const statusColorMessageContextualSuccessIcon: string;
+export const statusColorMessageContextualWarningBgDefault: string;
 /** Subtle message bg */
-export const statusColorNeutralBgAlt: string;
-export const statusColorNeutralBgAltHover: string;
-export const statusColorNeutralBgHover: string;
-export const statusColorNeutralBorderDefault: string;
+export const statusColorMessageContextualWarningBgAlt: string;
+export const statusColorMessageContextualWarningBorderDefault: string;
 /** Icon on tinted bgs */
-export const statusColorNeutralIcon: string;
+export const statusColorMessageContextualWarningIcon: string;
+export const statusColorPillLabelDefault: string;
+export const statusColorPillLabelHover: string;
+export const statusColorPillLabelAltDefault: string;
+export const statusColorPillLabelAltHover: string;
+export const statusColorPillErrorBgDefault: string;
+/** outline pill bg */
+export const statusColorPillErrorBgAltDefault: string;
+export const statusColorPillErrorBgAltHover: string;
+export const statusColorPillErrorBgHover: string;
+export const statusColorPillErrorBorderDefault: string;
+export const statusColorPillInfoBgDefault: string;
+/** outline pill bg */
+export const statusColorPillInfoBgAltDefault: string;
+export const statusColorPillInfoBgAltHover: string;
+export const statusColorPillInfoBgHover: string;
+export const statusColorPillInfoBorderDefault: string;
+export const statusColorPillNeutralBgDefault: string;
+/** outline pill bg */
+export const statusColorPillNeutralBgAltDefault: string;
+export const statusColorPillNeutralBgAltHover: string;
+export const statusColorPillNeutralBgHover: string;
+export const statusColorPillNeutralBorderDefault: string;
+export const statusColorPillSuccessBgDefault: string;
+/** outline pill bg */
+export const statusColorPillSuccessBgAltDefault: string;
+export const statusColorPillSuccessBgAltHover: string;
+export const statusColorPillSuccessBgHover: string;
+export const statusColorPillSuccessBorderDefault: string;
+export const statusColorPillWarningBgDefault: string;
+/** Global message bg */
+export const statusColorPillWarningBgAltDefault: string;
+export const statusColorPillWarningBgAltHover: string;
+export const statusColorPillWarningBgHover: string;
+export const statusColorPillWarningBorderDefault: string;
+/** Pill (all types, readonly, when nested in disabled parent components) */
+export const statusColorPillReadonlyBgDefault: string;
+/** Pill (all types, readonly, when nested in disabled parent components) */
+export const statusColorPillReadonlyBorderDefault: string;
+/** Pill (all types, readonly, when nested in disabled parent components) */
+export const statusColorPillReadonlyLabel: string;
 export const statusColorRatingBgDefault: string;
 export const statusColorRatingBgDefaultAlt: string;
 export const statusColorRatingBgHover: string;
 export const statusColorRatingBorderDefault: string;
-export const statusColorSuccessBgDefault: string;
-/** Subtle message bg */
-export const statusColorSuccessBgAlt: string;
-export const statusColorSuccessBgAltHover: string;
-export const statusColorSuccessBgHover: string;
-export const statusColorSuccessBorderDefault: string;
-/** Icon on tinted bgs */
-export const statusColorSuccessIcon: string;
-export const statusColorWarningBgDefault: string;
-/** Subtle message bg */
-export const statusColorWarningBgAlt: string;
-/** Global message bg */
-export const statusColorWarningBgAltDefault: string;
-export const statusColorWarningBgAltHover: string;
-export const statusColorWarningBgHover: string;
-export const statusColorWarningBorderDefault: string;
-/** Icon on tinted bgs */
-export const statusColorWarningIcon: string;
 /** Min height */
 export const statusSizePillS: number;
 /** Min height and removable button. */

package/js/es6/marketing/small/dark/components/status.js

@@ -7,59 +7,78 @@
  */
 
 export const statusColorNone = "#fff0"; // transparent override used for hiding colors when needed.
-export const statusColorBgDefault = "#000000";
-export const statusColorBgReadonly = "#4b4b4b"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorBorderReadonly = "#4b4b4b"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorIconDefault = "#000000"; // Decorative message icons
-export const statusColorLabelDefault = "#000000";
-export const statusColorLabelReadonly = "#000000"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorLabelHover = "#000000";
-export const statusColorLabelAltDefault = "#fffffff2";
-export const statusColorLabelAltReadonly = "#ffffffab"; // Pill (all types, readonly, when nested in disabled parent components)
-export const statusColorLabelAltHover = "#FFFFFF";
-export const statusColorText = "#FFFFFF"; // Message text.
-export const statusColorAiBgDefault = "#FFFFFF";
-export const statusColorAiBorderDefault = "#FFFFFF";
-export const statusColorCalloutBgAlt = "#122211"; // Subtle message bg
-export const statusColorCalloutBgAltDefault = "#122211"; // Global message bg
-export const statusColorCalloutBgAltHover = "#223121"; // Subtle message bg
-export const statusColorErrorBgDefault = "#E13E53";
-export const statusColorErrorBgAlt = "#241212"; // Subtle message bg
-export const statusColorErrorBgAltHover = "#332122";
-export const statusColorErrorBgHover = "#eb646c";
-export const statusColorErrorBorderDefault = "#E13E53";
-export const statusColorErrorIcon = "#E13E53"; // Icon on tinted bgs
-export const statusColorInfoBgDefault = "#007ED9";
-export const statusColorInfoBgAlt = "#111722"; // Subtle message bg
-export const statusColorInfoBgAltDefault = "#111722"; // Global message bg
-export const statusColorInfoBgAltHover = "#212631";
-export const statusColorInfoBgHover = "#5291e0";
-export const statusColorInfoBorderDefault = "#007ED9";
-export const statusColorInfoIcon = "#007ED9"; // Icon on tinted bgs
-export const statusColorNeutralBgDefault = "#7C7C7C";
-export const statusColorNeutralBgAlt = "#171717"; // Subtle message bg
-export const statusColorNeutralBgAltHover = "#262626";
-export const statusColorNeutralBgHover = "#909090";
-export const statusColorNeutralBorderDefault = "#7C7C7C";
-export const statusColorNeutralIcon = "#7C7C7C"; // Icon on tinted bgs
+export const statusColorMessageGlobalLabelDefault = "#fffffff2";
+export const statusColorMessageGlobalLabelHover = "#fffffff2";
+export const statusColorMessageGlobalCalloutBgDefault = "#122211"; // Global message bg
+export const statusColorMessageGlobalCalloutBgHover = "#223121"; // global message bg hover
+export const statusColorMessageGlobalCalloutIcon = "#fffffff2"; // Icon on tinted bgs
+export const statusColorMessageGlobalInfoBgDefault = "#111722"; // Global message bg
+export const statusColorMessageGlobalInfoBgHover = "#212631";
+export const statusColorMessageGlobalInfoIcon = "#007ED9"; // Icon on tinted bgs
+export const statusColorMessageGlobalWarningBgDefault = "#251206"; // Global message bg
+export const statusColorMessageGlobalWarningBgHover = "#34211a";
+export const statusColorMessageGlobalWarningIcon = "#E04500"; // Icon on tinted bgs
+export const statusColorMessageContextualBg = "#000000";
+export const statusColorMessageContextualIcon = "#000000"; // decorative icon on standard contextual messages
+export const statusColorMessageContextualText = "#FFFFFF"; // Message text.
+export const statusColorMessageContextualAiBgDefault = "#FFFFFF";
+export const statusColorMessageContextualAiBgAlt = "#171717";
+export const statusColorMessageContextualAiBorderDefault = "#FFFFFF";
+export const statusColorMessageContextualCalloutBgAlt = "#122211"; // Subtle message bg
+export const statusColorMessageContextualCalloutIcon = "#fffffff2";
+export const statusColorMessageContextualErrorBgDefault = "#E13E53";
+export const statusColorMessageContextualErrorBgAlt = "#241212"; // Subtle message bg
+export const statusColorMessageContextualErrorBorderDefault = "#E13E53";
+export const statusColorMessageContextualErrorIcon = "#E13E53"; // Icon on tinted bgs
+export const statusColorMessageContextualInfoBgDefault = "#007ED9";
+export const statusColorMessageContextualInfoBgAlt = "#111722"; // Subtle message bg
+export const statusColorMessageContextualInfoBorderDefault = "#007ED9";
+export const statusColorMessageContextualInfoIcon = "#007ED9"; // Icon on tinted bgs
+export const statusColorMessageContextualSuccessBgDefault = "#009023";
+export const statusColorMessageContextualSuccessBgAlt = "#0e1a0b"; // Subtle message bg
+export const statusColorMessageContextualSuccessBorderDefault = "#009023";
+export const statusColorMessageContextualSuccessIcon = "#009023"; // Icon on tinted bgs
+export const statusColorMessageContextualWarningBgDefault = "#E04500";
+export const statusColorMessageContextualWarningBgAlt = "#251206"; // Subtle message bg
+export const statusColorMessageContextualWarningBorderDefault = "#E04500";
+export const statusColorMessageContextualWarningIcon = "#E04500"; // Icon on tinted bgs
+export const statusColorPillLabelDefault = "#000000";
+export const statusColorPillLabelHover = "#000000";
+export const statusColorPillLabelAltDefault = "#fffffff2";
+export const statusColorPillLabelAltHover = "#fffffff2";
+export const statusColorPillErrorBgDefault = "#E13E53";
+export const statusColorPillErrorBgAltDefault = "#241212"; // outline pill bg
+export const statusColorPillErrorBgAltHover = "#332122";
+export const statusColorPillErrorBgHover = "#eb646c";
+export const statusColorPillErrorBorderDefault = "#E13E53";
+export const statusColorPillInfoBgDefault = "#007ED9";
+export const statusColorPillInfoBgAltDefault = "#111722"; // outline pill bg
+export const statusColorPillInfoBgAltHover = "#212631";
+export const statusColorPillInfoBgHover = "#5291e0";
+export const statusColorPillInfoBorderDefault = "#007ED9";
+export const statusColorPillNeutralBgDefault = "#7C7C7C";
+export const statusColorPillNeutralBgAltDefault = "#171717"; // outline pill bg
+export const statusColorPillNeutralBgAltHover = "#262626";
+export const statusColorPillNeutralBgHover = "#909090";
+export const statusColorPillNeutralBorderDefault = "#7C7C7C";
+export const statusColorPillSuccessBgDefault = "#009023";
+export const statusColorPillSuccessBgAltDefault = "#0e1a0b"; // outline pill bg
+export const statusColorPillSuccessBgAltHover = "#1e291d";
+export const statusColorPillSuccessBgHover = "#2e9936";
+export const statusColorPillSuccessBorderDefault = "#009023";
+export const statusColorPillWarningBgDefault = "#E04500";
+export const statusColorPillWarningBgAltDefault = "#251206"; // Global message bg
+export const statusColorPillWarningBgAltHover = "#34211a";
+export const statusColorPillWarningBgHover = "#eb6732";
+export const statusColorPillWarningBorderDefault = "#E04500";
+export const statusColorPillReadonlyBgDefault = "#4b4b4b"; // Pill (all types, readonly, when nested in disabled parent components)
+export const statusColorPillReadonlyBorderDefault = "#4b4b4b"; // Pill (all types, readonly, when nested in disabled parent components)
+export const statusColorPillReadonlyLabel = "#ffffffab"; // Pill (all types, readonly, when nested in disabled parent components)
 export const statusColorRatingBgDefault = "#00D639";
 export const statusColorRatingBgDefaultAlt =
   "linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%)";
 export const statusColorRatingBgHover = "#18b032";
 export const statusColorRatingBorderDefault = "#00D639";
-export const statusColorSuccessBgDefault = "#009023";
-export const statusColorSuccessBgAlt = "#0e1a0b"; // Subtle message bg
-export const statusColorSuccessBgAltHover = "#1e291d";
-export const statusColorSuccessBgHover = "#2e9936";
-export const statusColorSuccessBorderDefault = "#009023";
-export const statusColorSuccessIcon = "#009023"; // Icon on tinted bgs
-export const statusColorWarningBgDefault = "#E04500";
-export const statusColorWarningBgAlt = "#251206"; // Subtle message bg
-export const statusColorWarningBgAltDefault = "#251206"; // Global message bg
-export const statusColorWarningBgAltHover = "#34211a";
-export const statusColorWarningBgHover = "#eb6732";
-export const statusColorWarningBorderDefault = "#E04500";
-export const statusColorWarningIcon = "#E04500"; // Icon on tinted bgs
 export const statusSizePillS = 20; // Min height
 export const statusSizePillM = 24; // Min height and removable button.
 export const statusSizePillL = 28; // Min height and removable button