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

package/CHANGELOG.v1.md

@@ -1,6 +1,20 @@
 Change Log
 ============
 
+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 +30,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.
@@ -366,9 +369,55 @@ var uiColors = {
   focusColor: ''
 };
 
+/**
+ * #### 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 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: ''
+};
+
 /**
  * #### 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.
+ * 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 decoratively.
  *
  * @categoryColor
  */
@@ -490,6 +539,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(_objectSpread({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), notificationColors), severityColors), statusColors), 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 ...
    */

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
  */

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 = {

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',

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',

package/enterprise/dark.js

@@ -20,13 +20,31 @@ var dark = {
   borderColorStrong: '#9c9fa0',
   borderActiveColor: "rgba(225,225,225, 0.5)"
 };
-
-/**
- * ## 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 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'
+};
 var statusColors = {
   statusColorInfo: _light["default"].infoColor,
   statusColorInfoWeak: _light["default"].infoColorD10,
@@ -47,13 +65,6 @@ var statusColors = {
   statusColorCriticalWeak: _light["default"].errorColorD20,
   statusColorCriticalStrong: _light["default"].errorColor
 };
-
-/**
- * ## Syntax colors
- * Syntax colors are used only for code blocks.
- *
- * @colorSet verbose alphabetical
- */
 var syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
@@ -65,13 +76,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 +94,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 +124,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 +133,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 +150,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 +160,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),
@@ -227,8 +189,9 @@ 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
 };
-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(_objectSpread({}, _light["default"]), dark), actionColors), notificationColors), severityColors), statusColors), backgroundColors), neutralColors), syntaxColors), contentColors), shadows), interactiveColors), deprecated), backgrounds);
 var _default = theme;
 exports["default"] = _default;

package/enterprise/dataViz.js

@@ -10,11 +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); }
-/**
- * #### Static colors
- *
- * @colorSet verbose
- */
 var staticColors = {
   static1: '#7B56DB',
   static2: '#009CEB',
@@ -37,12 +32,6 @@ var staticColors = {
   static19: '#FF969E',
   static20: '#E47BFE'
 };
-
-/**
- * #### Categorical 1D
- *
- * @colorSet verbose
- */
 exports.staticColors = staticColors;
 var categorical1D = {
   categorical1D1: '#5C33FF',
@@ -53,12 +42,6 @@ var categorical1D = {
   categorical1D6: '#2F8811',
   categorical1D7: '#555555'
 };
-
-/**
- * #### Categorical 1L
- *
- * @colorSet verbose
- */
 var categorical1L = {
   categorical1L1: '#9980FF',
   categorical1L2: '#45D4BA',
@@ -68,12 +51,6 @@ var categorical1L = {
   categorical1L6: '#88EE66',
   categorical1L7: '#F0B000'
 };
-
-/**
- * #### Categorical 2D
- *
- * @colorSet verbose
- */
 var categorical2D = {
   categorical2D1: '#1F4D5B',
   categorical2D2: '#CC0AD6',
@@ -83,12 +60,6 @@ var categorical2D = {
   categorical2D6: '#348350',
   categorical2D7: '#555555'
 };
-
-/**
- * #### Categorical 2L
- *
- * @colorSet verbose
- */
 var categorical2L = {
   categorical2L1: '#5599BE',
   categorical2L2: '#FB9DFB',
@@ -99,12 +70,6 @@ var categorical2L = {
   categorical2L7: '#F58B00'
 };
 var categorical = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, categorical1D), categorical1L), categorical2D), categorical2L);
-
-/**
- * #### Divergent 1D
- *
- * @colorSet verbose
- */
 exports.categorical = categorical;
 var divergent1D = {
   divergent1D1: '#118832',
@@ -115,12 +80,6 @@ var divergent1D = {
   divergent1D6: '#9E2520',
   divergent1D7: '#D41F1F'
 };
-
-/**
- * #### Divergent 1L
- *
- * @colorSet verbose
- */
 var divergent1L = {
   divergent1L1: '#08AE37',
   divergent1L2: '#55C169',
@@ -130,12 +89,6 @@ var divergent1L = {
   divergent1L6: '#F98C83',
   divergent1L7: '#FF5E5E'
 };
-
-/**
- * #### Divergent 2D
- *
- * @colorSet verbose
- */
 var divergent2D = {
   divergent2D1: '#0070F3',
   divergent2D2: '#115BAD',
@@ -145,12 +98,6 @@ var divergent2D = {
   divergent2D6: '#9E2520',
   divergent2D7: '#D41F1F'
 };
-
-/**
- * #### Divergent 2L
- *
- * @colorSet verbose
- */
 var divergent2L = {
   divergent2L1: '#2A99FF',
   divergent2L2: '#6BB3EE',
@@ -160,12 +107,6 @@ var divergent2L = {
   divergent2L6: '#F98C83',
   divergent2L7: '#FF5E5E'
 };
-
-/**
- * #### Divergent 3D
- *
- * @colorSet verbose
- */
 var divergent3D = {
   divergent3D1: '#299986',
   divergent3D2: '#277C52',
@@ -175,12 +116,6 @@ var divergent3D = {
   divergent3D6: '#602CA1',
   divergent3D7: '#8747DA'
 };
-
-/**
- * #### Divergent 3L
- *
- * @colorSet verbose
- */
 var divergent3L = {
   divergent3L1: '#14846C',
   divergent3L2: '#45D4BA',
@@ -190,12 +125,6 @@ var divergent3L = {
   divergent3L6: '#C093F9',
   divergent3L7: '#9156DD'
 };
-
-/**
- * #### Divergent 4D
- *
- * @colorSet verbose
- */
 var divergent4D = {
   divergent4D1: '#0D8387',
   divergent4D2: '#1A6765',
@@ -205,12 +134,6 @@ var divergent4D = {
   divergent4D6: '#9F3B23',
   divergent4D7: '#D54124'
 };
-
-/**
- * #### Divergent 4L
- *
- * @colorSet verbose
- */
 var divergent4L = {
   divergent4L1: '#008287',
   divergent4L2: '#2EA39B',