@splunk/themes 1.0.0-beta.2 → 1.0.0-beta.4

package/CHANGELOG.v1.md

@@ -1,6 +1,40 @@
 Change Log
 ============
 
+1.0.0-beta.4 - April 22, 2025
+----------
+New Features:
+* New `inputBorderWidth` variable (SUI-7384).
+
+Bug Fixes:
+* Fixes broken CSS for Splunk Magnetic's `backgroundColorNavigation` override (SUI-7653).
+
+Deprecations:
+* `statusColor*`s have been deprecated. Instead use the appropriate `notificationColor*` or `severityColor*`(SUI-7303)
+
+API Changes:
+* `typescript` version is now `^5.8.3` (SUI-7601).
+* `borderActiveColor` has been deprecated. (SUI-7633).
+  * Use `interactiveColorBorderActive` for Data Entry components or `actionColorBorderSecondaryActive` for Buttons.
+* `backgroundColorHover` have been deprecated. (SUI-7633).
+  * Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
+* `hoverShadow` has been deprecated. See notes on `backgroundColorHover` for hover affordances. (SUI-7621)
+
+
+1.0.0-beta.3 - April 2, 2025
+----------
+New Features:
+* New `neutral50` variable (SUI-7384).
+* New `notificationColor` variables (SUI-7303).
+* New `severityColor` variables (SUI-7303).
+
+Bug Fixes:
+* Updates `interactiveColorBackground` and `interactiveColorBackgroundDisabled` to be transparent in all themes (SUI-7347).
+* The `@types/react` peer dependency is now correctly set to `^18.2.0` (SUI-7548).
+
+Deprecations:
+* `interactiveColorPrimary` has been deprecated (SUI-3568).
+
 1.0.0-beta.2 - March 5, 2025
 ----------
 New Features:
@@ -16,7 +50,6 @@ API Changes:
 * `embossShadow`, `overlayShadow`, `dragShadow`, and `modalShadow` variables have been updated in Enterprise themes to match Prisma (SUI-7334).
 * Enterprise only tokens have been deprecated: `brandColor*`, `gray*`,  `accentColor*`, `errorColor*`, `alertColor*`, `warningColor*`, `successColor*`, `infoColor*`, `diverging*Color*`, and `cat*Color*`.
 
-
 1.0.0-beta.1 - February 20, 2025
 ----------
 New Features:

package/design-tokens/colors.js

@@ -13,7 +13,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 /**
  * #### Action colors
  *
- * Action colors are used **exclusively** for Button borders and backgrounds.
+ * Action colors are used **exclusively** for styling Buttons borders and backgrounds.
  * They define interaction states for primary, secondary, subtle, and destructive buttons.
  *
  * @categoryColor
@@ -138,13 +138,12 @@ var actionColors = {
  *
  * Interactive colors should be used **exclusively** for styling Data Entry components: Input, Select, etc.
  *
+ * "Overlay" colors are intended to be placed over the default background color, such as `interactiveColorAccent`.
+ * If the default background color is not transparent, the `blend` mixin can be used to create a new color that combines the two.
+ *
  * @categoryColor
  */
 var interactiveColors = {
-  /**
-   * Primary color for interactive elements in Data entry components.
-   */
-  interactiveColorPrimary: '',
   /**
    * Default border color for Data entry components.
    */
@@ -215,6 +214,10 @@ var neutralColors = {
   /**
    * Least visually emphasized. Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
    */
+  neutral50: '',
+  /**
+   * Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
+   */
   neutral100: '',
   /**
    * Not for text, does not pass 3:1 graphical contrast in light & dark color schemes.
@@ -367,84 +370,48 @@ var uiColors = {
 };
 
 /**
- * #### Status colors
- * * Use status colors to convey informative, positive, caution or negative content status. Weak variants do not meet graphical or text contrast and should only be used as decorative.
+ * #### Notification colors
+ *
+ * Use notifications colors to communicate messages and guidance directly to users.
+ * For example in Message Bars, Toasts, or other notification components to set tone and urgency in a conversational context.
+ *
+ * Weak variants do not meet graphical or text contrast and should only be used decoratively.
  *
  * @categoryColor
  */
-var statusColors = {
-  /**
-   * Default color for informational messages and notifications.
-   */
-  statusColorInfo: '',
-  /**
-   * Weaker, less prominent informational color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorInfoWeak: '',
-  /**
-   * Brighter, more prominent informational color.
-   */
-  statusColorInfoStrong: '',
-  /**
-   * Default color for neutral or standard status messages.
-   */
-  statusColorNormal: '',
-  /**
-   * Weaker, less prominent normal color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorNormalWeak: '',
-  /**
-   * Brighter, more prominent normal color.
-   */
-  statusColorNormalStrong: '',
-  /**
-   * Default color for low-priority status messages.
-   */
-  statusColorLow: '',
-  /**
-   * Weaker, less prominent low-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorLowWeak: '',
-  /**
-   * Brighter, more prominent low-priority color.
-   */
-  statusColorLowStrong: '',
-  /**
-   * Default color for medium-priority status messages.
-   */
-  statusColorMedium: '',
-  /**
-   * Weaker, less prominent medium-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorMediumWeak: '',
-  /**
-   * Brighter, more prominent medium-priority color.
-   */
-  statusColorMediumStrong: '',
-  /**
-   * Default color for high-priority status messages.
-   */
-  statusColorHigh: '',
-  /**
-   * Weaker, less prominent high-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorHighWeak: '',
-  /**
-   * Brighter, more prominent high-priority color.
-   */
-  statusColorHighStrong: '',
-  /**
-   * Default color for critical alerts or urgent messages.
-   */
-  statusColorCritical: '',
-  /**
-   * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorCriticalWeak: '',
-  /**
-   * Brighter, more prominent critical color.
-   */
-  statusColorCriticalStrong: ''
+var notificationColors = {
+  notificationColorInfoWeak: '',
+  notificationColorInfo: '',
+  notificationColorInfoStrong: '',
+  notificationColorPositiveWeak: '',
+  notificationColorPositive: '',
+  notificationColorPositiveStrong: '',
+  notificationColorCautionWeak: '',
+  notificationColorCaution: '',
+  notificationColorCautionStrong: '',
+  notificationColorNegativeWeak: '',
+  notificationColorNegative: '',
+  notificationColorNegativeStrong: ''
+};
+
+/**
+ * #### Severity colors
+ *
+ * Use severity colors for icons, indicators, and visual signals to help users quickly scan for criticality, risk, or state without relying only on text.
+ * Severity colors should be used to aid identifying the semantic meaning of an element; not used to communicate tone.
+ *
+ * @categoryColor
+ */
+var severityColors = {
+  severityColorCustom: '',
+  severityColorUnknown: '',
+  severityColorInfo: '',
+  severityColorNormal: '',
+  severityColorNotice: '',
+  severityColorWarning: '',
+  severityColorAlert: '',
+  severityColorCritical: '',
+  severityColorEmergency: ''
 };
 
 /**
@@ -490,6 +457,6 @@ var borderColors = {
    */
   borderColorStrong: ''
 };
-var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), statusColors), syntaxColors), borderColors);
+var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), notificationColors), severityColors), syntaxColors), borderColors);
 var _default = colors;
 exports["default"] = _default;

package/design-tokens/deprecated.js

@@ -16,6 +16,11 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * @categoryValue
  */
 var deprecated = {
+  /**
+   * Use a more specific token based on the semantic use case:
+   * [`interactiveColorAccent`](#interactiveColorAccent), [`contentColorAccent`](#contentColorAccent), or [`focusColor`](#focusColor).
+   */
+  interactiveColorPrimary: '',
   /**
    * Use `statusColorNormal`, `accentColor`, or ...
    */
@@ -83,6 +88,76 @@ var deprecated = {
    * Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
    */
   backgroundColorHover: '',
+  /**
+   * Don't use hover shadows - see notes on backgroundColorHover for hover affordances.
+   */
+  hoverShadow: '',
+  /**
+   *  Use `notificationColorInfo` or `severityColorInfo`
+   */
+  statusColorInfo: '',
+  /**
+   *  Use `notificationColorInfoWeak`
+   */
+  statusColorInfoWeak: '',
+  /**
+   *  Use `notificationColorInfoStrong`
+   */
+  statusColorInfoStrong: '',
+  /**
+   * Use `notificationColorPositive` or `severityColorNormal`
+   */
+  statusColorNormal: '',
+  /**
+   * Use `notificationColorPositiveWeak`
+   */
+  statusColorNormalWeak: '',
+  /**
+   * Use `notificationColorPositiveStrong`
+   */
+  statusColorNormalStrong: '',
+  /**
+   * Use `notificationColorCaution` or `severityColorNotice`
+   */
+  statusColorLow: '',
+  /**
+   * Use `notificationColorCautionWeak`
+   */
+  statusColorLowWeak: '',
+  /**
+   * Use `notificationColorCautionStrong`
+   */
+  statusColorLowStrong: '',
+  /**
+   * Use `severityColorWarning`
+   */
+  statusColorMedium: '',
+  statusColorMediumWeak: '',
+  statusColorMediumStrong: '',
+  /**
+   * Use `notificationColorNegative` or `severityColorAlert`
+   */
+  statusColorHigh: '',
+  /**
+   * Use `notificationColorNegativeWeak`
+   */
+  statusColorHighWeak: '',
+  /**
+   * Use `notificationColorNegativeStrong`
+   */
+  statusColorHighStrong: '',
+  /**
+   * Default color for critical alerts or urgent messages.
+   */
+  statusColorCritical: '',
+  /**
+   * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorCriticalWeak: '',
+  /**
+   * Brighter, more prominent critical color.
+   */
+  statusColorCriticalStrong: '',
   brandColorL50: '',
   brandColorL40: '',
   brandColorL30: '',

package/design-tokens/elevation.js

@@ -12,6 +12,8 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
  * #### Z Indexes
+ * Used to position elements in the z-axis.
+ * If a variable does not suit your purpose, set a value relatively, such as `zindexModal +1`.
  *
  * @categoryValue
  */
@@ -36,7 +38,6 @@ var elevationShadows = {
   modalShadow: '',
   focusShadow: '',
   focusShadowInset: '',
-  hoverShadow: '',
   draggableBackground: ''
 };
 var elevation = _objectSpread(_objectSpread({}, zIndexes), elevationShadows);

package/design-tokens/spacing-sizing.js

@@ -13,6 +13,11 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 /**
  * #### Spacing
  *
+ * Use these tokens for adding margin between elements or padding within containers.
+ *
+ * Just because a spacing token is equal to a pixel value you may need, it does not mean it's appropriate to
+ * use the spacing variables.
+ *
  * @categorySpacing
  */
 var spacing = {
@@ -32,6 +37,7 @@ var spacing = {
  */
 var measures = {
   borderRadius: '',
+  inputBorderWidth: '',
   inputHeight: ''
 };
 var spacingSizing = _objectSpread(_objectSpread({}, spacing), measures);

package/enterprise/comfortable.js

@@ -10,13 +10,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/**
- * ## Measures
- * Spacing is used for margin on any element or padding on containers, but can be used for other
- * properties that position elements.
- *
- * @valueSet
- */
 var measures = {
   spacingXSmall: '4px',
   spacingSmall: '8px',
@@ -25,6 +18,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '32px',
   borderRadius: '4px'
 };

package/enterprise/compact.js

@@ -10,13 +10,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/**
- * ## Measures
- * Spacing is used for margin on any element or padding on containers, but can be used for other
- * properties that position elements.
- *
- * @valueSet
- */
 var measures = {
   spacingXSmall: '4px',
   spacingSmall: '8px',
@@ -25,6 +18,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '28px',
   borderRadius: '4px'
 };

package/enterprise/dark.js

@@ -14,46 +14,35 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var dragHandleDark = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA1SURBVHgB7dKhEQAgDAPAhHmwSKZHYtmHVtZVVNTkXS53UeG57yPYazLmrB8o6h8QgPqBOAOboRAPJUGIOAAAAABJRU5ErkJggg=="; // see babel-plugin-base64-png
 var dark = {
-  backgroundColorHover: _light["default"].gray30,
   borderColor: '#75797a',
   borderColorWeak: '#404547',
-  borderColorStrong: '#9c9fa0',
-  borderActiveColor: "rgba(225,225,225, 0.5)"
+  borderColorStrong: '#9c9fa0'
 };
-
-/**
- * ## Status colors
- * Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
- *
- * @colorSet verbose
- */
-var statusColors = {
-  statusColorInfo: _light["default"].infoColor,
-  statusColorInfoWeak: _light["default"].infoColorD10,
-  statusColorInfoStrong: _light["default"].infoColorL10,
-  statusColorNormal: _light["default"].successColor,
-  statusColorNormalWeak: _light["default"].successColorD10,
-  statusColorNormalStrong: _light["default"].successColorL10,
-  statusColorLow: _light["default"].warningColor,
-  statusColorLowWeak: _light["default"].warningColorD10,
-  statusColorLowStrong: _light["default"].warningColorL10,
-  statusColorMedium: _light["default"].alertColor,
-  statusColorMediumWeak: _light["default"].alertColorD10,
-  statusColorMediumStrong: _light["default"].alertColorL10,
-  statusColorHigh: _light["default"].errorColor,
-  statusColorHighWeak: _light["default"].errorColorD10,
-  statusColorHighStrong: _light["default"].errorColorL10,
-  statusColorCritical: _light["default"].errorColorD10,
-  statusColorCriticalWeak: _light["default"].errorColorD20,
-  statusColorCriticalStrong: _light["default"].errorColor
+var notificationColors = {
+  notificationColorInfoWeak: '#2E1B4B',
+  notificationColorInfo: '#AC75FF',
+  notificationColorInfoStrong: '#D1B2FF',
+  notificationColorPositiveWeak: '#092635',
+  notificationColorPositive: '#1AB2FF',
+  notificationColorPositiveStrong: '#99DDFF',
+  notificationColorCautionWeak: '#331E00',
+  notificationColorCaution: '#FFAF0F',
+  notificationColorCautionStrong: '#FDDC9B',
+  notificationColorNegativeWeak: '#391313',
+  notificationColorNegative: '#FF5252',
+  notificationColorNegativeStrong: '#FF9999'
+};
+var severityColors = {
+  severityColorCustom: '#868EC2',
+  severityColorUnknown: '#889099',
+  severityColorInfo: '#A974F7',
+  severityColorNormal: '#04A4B0',
+  severityColorNotice: '#D6900D',
+  severityColorWarning: '#F26722',
+  severityColorAlert: '#FA5762',
+  severityColorCritical: '#F2638C',
+  severityColorEmergency: '#E85FC6'
 };
-
-/**
- * ## Syntax colors
- * Syntax colors are used only for code blocks.
- *
- * @colorSet verbose alphabetical
- */
 var syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
@@ -65,13 +54,6 @@ var syntaxColors = {
   syntaxRed: '#fa94aa',
   syntaxTeal: '#45d4ba'
 };
-
-/**
- * ## Content colors
- * Content colors should be used for text, icons and dividers.
- *
- * @colorSet verbose
- */
 var contentColors = {
   contentBackgroundColorNegativeWeak: 'rgba(160, 29, 38, 0.28)',
   contentColorActive: _light["default"].white,
@@ -90,14 +72,6 @@ var contentColors = {
   contentColorWarning: '#f8be34',
   contentColorLink: _light["default"].accentColorL10
 };
-
-/**
- * ## Action colors
- * Action colors should be used for buttons.
- *
- * @colorSet verbose
- */
-
 var actionColors = {
   actionColorBackgroundPrimary: '#1a8929',
   actionColorBackgroundPrimaryActive: '#6eba78',
@@ -128,15 +102,7 @@ var actionColors = {
   actionColorBorderDestructiveSecondaryDisabled: '#562a25',
   actionColorBorderDestructiveSecondaryHover: '#ff8a80'
 };
-
-/**
- * ## Interactive colors
- * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
- *
- * @colorSet verbose
- */
 var interactiveColors = {
-  interactiveColorPrimary: _light["default"].brandColor,
   interactiveColorBorder: _light["default"].gray60,
   interactiveColorBorderActive: _light["default"].gray60,
   interactiveColorBorderHover: 'rgba(255, 255, 255, 0.7)',
@@ -145,22 +111,15 @@ var interactiveColors = {
   interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
   interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
   interactiveColorOverlayDrag: 'rgba(57, 147, 255, 0.16)',
-  interactiveColorBackground: _light["default"].gray20,
-  interactiveColorBackgroundDisabled: _light["default"].gray22,
+  interactiveColorBackground: 'transparent',
+  interactiveColorBackgroundDisabled: 'transparent',
   interactiveColorAccent: '#1A8929',
   interactiveColorAccentError: _light["default"].errorColorL10,
   interactiveColorAccentErrorStrong: '#f1b9b3'
 };
-
-/**
- * ## Neutral colors
- * Neutrals are used for dividers and as backup colors that can sparingly be used for cases, when the other defined colors are not enough.
- *
- * @colorSet verbose
- */
-
 var neutralColors = {
   white: '#ffffff',
+  neutral50: '#20262a',
   neutral100: _light["default"].gray25,
   neutral200: _light["default"].gray30,
   neutral300: _light["default"].gray45,
@@ -169,13 +128,6 @@ var neutralColors = {
   black: '#000000',
   transparent: 'transparent'
 };
-
-/**
- * ## Background colors
- * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
- *
- * @colorSet verbose
- */
 var backgroundColors = {
   backgroundColorDialog: _light["default"].gray20,
   backgroundColorFloating: _light["default"].white,
@@ -186,21 +138,9 @@ var backgroundColors = {
   backgroundColorSection: _light["default"].gray22,
   backgroundColorSidebar: _light["default"].black
 };
-
-/**
- * ## Backgrounds
- *
- * @colorSet verbose
- */
 var backgrounds = {
   draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
 };
-
-/**
- * ## Interactive state shadows
- *
- * @shadowSet
- */
 var shadows = {
   focusShadow: "0 0 0 2px ".concat(backgroundColors.backgroundColorPage, ", 0 0 0 5px ").concat(_light["default"].focusColor),
   focusShadowInset: "inset 0 0 0 3px ".concat(_light["default"].focusColor),
@@ -212,6 +152,8 @@ var shadows = {
 var deprecated = {
   backgroundColor: _light["default"].gray20,
   // @deprecated SUI-6656
+  backgroundColorHover: _light["default"].gray30,
+  borderActiveColor: "rgba(225,225,225, 0.5)",
   borderLightColor: _light["default"].gray60,
   // @deprecated, SUI-5981
   // @deprecated, SUI-6160
@@ -227,8 +169,27 @@ var deprecated = {
   linkColorHover: _light["default"].accentColorL20,
   border: "1px solid ".concat(_light["default"].gray22),
   borderDark: "1px solid ".concat(_light["default"].black),
-  borderLight: "1px solid ".concat(_light["default"].gray60)
+  borderLight: "1px solid ".concat(_light["default"].gray60),
+  interactiveColorPrimary: _light["default"].brandColor,
+  statusColorInfo: _light["default"].infoColor,
+  statusColorInfoWeak: _light["default"].infoColorD10,
+  statusColorInfoStrong: _light["default"].infoColorL10,
+  statusColorNormal: _light["default"].successColor,
+  statusColorNormalWeak: _light["default"].successColorD10,
+  statusColorNormalStrong: _light["default"].successColorL10,
+  statusColorLow: _light["default"].warningColor,
+  statusColorLowWeak: _light["default"].warningColorD10,
+  statusColorLowStrong: _light["default"].warningColorL10,
+  statusColorMedium: _light["default"].alertColor,
+  statusColorMediumWeak: _light["default"].alertColorD10,
+  statusColorMediumStrong: _light["default"].alertColorL10,
+  statusColorHigh: _light["default"].errorColor,
+  statusColorHighWeak: _light["default"].errorColorD10,
+  statusColorHighStrong: _light["default"].errorColorL10,
+  statusColorCritical: _light["default"].errorColorD10,
+  statusColorCriticalWeak: _light["default"].errorColorD20,
+  statusColorCriticalStrong: _light["default"].errorColor
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), actionColors), statusColors), backgroundColors), neutralColors), syntaxColors), contentColors), shadows), interactiveColors), deprecated), backgrounds);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), actionColors), notificationColors), severityColors), backgroundColors), neutralColors), syntaxColors), contentColors), shadows), interactiveColors), deprecated), backgrounds);
 var _default = theme;
 exports["default"] = _default;