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

package/CHANGELOG.v1.md

@@ -1,6 +1,26 @@
 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:

package/design-tokens/colors.js

@@ -414,88 +414,6 @@ var severityColors = {
   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 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: ''
-};
-
 /**
  * #### Syntax colors
  *
@@ -539,6 +457,6 @@ var borderColors = {
    */
   borderColorStrong: ''
 };
-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 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

@@ -88,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

@@ -38,7 +38,6 @@ var elevationShadows = {
   modalShadow: '',
   focusShadow: '',
   focusShadowInset: '',
-  hoverShadow: '',
   draggableBackground: ''
 };
 var elevation = _objectSpread(_objectSpread({}, zIndexes), elevationShadows);

package/design-tokens/spacing-sizing.js

@@ -37,6 +37,7 @@ var spacing = {
  */
 var measures = {
   borderRadius: '',
+  inputBorderWidth: '',
   inputHeight: ''
 };
 var spacingSizing = _objectSpread(_objectSpread({}, spacing), measures);

package/enterprise/comfortable.js

@@ -18,6 +18,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '32px',
   borderRadius: '4px'
 };

package/enterprise/compact.js

@@ -18,6 +18,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '28px',
   borderRadius: '4px'
 };

package/enterprise/dark.js

@@ -14,11 +14,9 @@ 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'
 };
 var notificationColors = {
   notificationColorInfoWeak: '#2E1B4B',
@@ -45,26 +43,6 @@ var severityColors = {
   severityColorCritical: '#F2638C',
   severityColorEmergency: '#E85FC6'
 };
-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 syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
@@ -174,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
@@ -190,8 +170,26 @@ var deprecated = {
   border: "1px solid ".concat(_light["default"].gray22),
   borderDark: "1px solid ".concat(_light["default"].black),
   borderLight: "1px solid ".concat(_light["default"].gray60),
-  interactiveColorPrimary: _light["default"].brandColor
+  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(_objectSpread(_objectSpread({}, _light["default"]), dark), actionColors), notificationColors), severityColors), 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;

package/enterprise/light.js

@@ -59,12 +59,10 @@ var neutralColors = {
   transparent: 'transparent'
 };
 var usageColors = {
-  borderActiveColor: "rgba(0,0,0, 0.5)",
   borderColor: '#8c8c8c',
   borderColorWeak: '#d6d6d6',
   borderColorStrong: '#666666',
-  focusColor: deprecatedEnterpriseColors.accentColorD10,
-  backgroundColorHover: deprecatedEnterpriseColors.gray96
+  focusColor: deprecatedEnterpriseColors.accentColorD10
 };
 var notificationColors = {
   notificationColorInfoWeak: '#F0E5FF',
@@ -91,26 +89,6 @@ var severityColors = {
   severityColorCritical: '#C2306F',
   severityColorEmergency: '#B53394'
 };
-var statusColors = {
-  statusColorInfo: deprecatedEnterpriseColors.infoColor,
-  statusColorInfoWeak: deprecatedEnterpriseColors.infoColorL10,
-  statusColorInfoStrong: deprecatedEnterpriseColors.infoColorD10,
-  statusColorNormal: deprecatedEnterpriseColors.successColor,
-  statusColorNormalWeak: deprecatedEnterpriseColors.successColorL10,
-  statusColorNormalStrong: deprecatedEnterpriseColors.successColorD10,
-  statusColorLow: deprecatedEnterpriseColors.warningColor,
-  statusColorLowWeak: deprecatedEnterpriseColors.warningColorL10,
-  statusColorLowStrong: deprecatedEnterpriseColors.warningColorD10,
-  statusColorMedium: deprecatedEnterpriseColors.alertColor,
-  statusColorMediumWeak: deprecatedEnterpriseColors.alertColorL10,
-  statusColorMediumStrong: deprecatedEnterpriseColors.alertColorD10,
-  statusColorHigh: deprecatedEnterpriseColors.errorColor,
-  statusColorHighWeak: deprecatedEnterpriseColors.errorColorL10,
-  statusColorHighStrong: deprecatedEnterpriseColors.errorColorD10,
-  statusColorCritical: deprecatedEnterpriseColors.errorColorD10,
-  statusColorCriticalWeak: deprecatedEnterpriseColors.errorColor,
-  statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20
-};
 var elevationShadows = {
   embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.07), 0px 0px 1px rgba(0, 0, 0, 0.07)',
   overlayShadow: '0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.06)',
@@ -240,6 +218,8 @@ var zindexes = {
 var deprecated = {
   backgroundColor: neutralColors.white,
   // @deprecated SUI-6656
+  backgroundColorHover: deprecatedEnterpriseColors.gray96,
+  borderActiveColor: "rgba(0,0,0, 0.5)",
   borderLightColor: deprecatedEnterpriseColors.gray92,
   // @deprecated SUI-5981
   // @deprecated SUI-6160
@@ -389,8 +369,26 @@ var deprecated = {
   syntaxGreenLight: '#5ba383',
   syntaxPurpleLight: '#b19cd9',
   syntaxRedLight: '#af575a',
-  interactiveColorPrimary: deprecatedEnterpriseColors.brandColor
+  interactiveColorPrimary: deprecatedEnterpriseColors.brandColor,
+  statusColorInfo: deprecatedEnterpriseColors.infoColor,
+  statusColorInfoWeak: deprecatedEnterpriseColors.infoColorL10,
+  statusColorInfoStrong: deprecatedEnterpriseColors.infoColorD10,
+  statusColorNormal: deprecatedEnterpriseColors.successColor,
+  statusColorNormalWeak: deprecatedEnterpriseColors.successColorL10,
+  statusColorNormalStrong: deprecatedEnterpriseColors.successColorD10,
+  statusColorLow: deprecatedEnterpriseColors.warningColor,
+  statusColorLowWeak: deprecatedEnterpriseColors.warningColorL10,
+  statusColorLowStrong: deprecatedEnterpriseColors.warningColorD10,
+  statusColorMedium: deprecatedEnterpriseColors.alertColor,
+  statusColorMediumWeak: deprecatedEnterpriseColors.alertColorL10,
+  statusColorMediumStrong: deprecatedEnterpriseColors.alertColorD10,
+  statusColorHigh: deprecatedEnterpriseColors.errorColor,
+  statusColorHighWeak: deprecatedEnterpriseColors.errorColorL10,
+  statusColorHighStrong: deprecatedEnterpriseColors.errorColorD10,
+  statusColorCritical: deprecatedEnterpriseColors.errorColorD10,
+  statusColorCriticalWeak: deprecatedEnterpriseColors.errorColor,
+  statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), statusColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
@@ -81,8 +81,8 @@
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.2.0",
     "@types/tinycolor2": "^1.4.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "babel-plugin-transform-define": "^2.0.0",
     "cross-env": "^6.0.3",
     "eslint": "^8.57.1",
@@ -97,7 +97,7 @@
     "jest-styled-components": "^7.0.8",
     "react": "^18.2.0",
     "styled-components": "^5.3.10",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

package/prisma/base.js

@@ -25,7 +25,6 @@ function createPrismaBase(_ref) {
     focusColor: colorSchemeVars.interactiveColorPrimary
   };
   var shadows = {
-    hoverShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(colorSchemeVars.interactiveColorOverlayHover),
     focusShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(usageColors.focusColor),
     focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
   };
@@ -67,6 +66,7 @@ function createPrismaBase(_ref) {
     zindexToastMessages: 2000
   };
   var deprecated = {
+    hoverShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(colorSchemeVars.interactiveColorOverlayHover),
     linkColor: colorSchemeVars.interactiveColorPrimary
   };
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typography), usageColors), _dataViz["default"]), shadows), borders), backgrounds), zindexes), deprecated);

package/prisma/comfortable.js

@@ -12,6 +12,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '32px',
   borderRadius: '4px'
 };

package/prisma/compact.js

@@ -12,6 +12,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '28px',
   borderRadius: '4px'
 };

package/prisma/dark.js

@@ -126,26 +126,6 @@ var severityColors = {
   severityColorCritical: '#F2638C',
   severityColorEmergency: '#E85FC6'
 };
-var statusColors = {
-  statusColorInfo: '#61cafa',
-  statusColorInfoWeak: (0, _tinycolor["default"])('#61cafa').darken(10).toHexString(),
-  statusColorInfoStrong: (0, _tinycolor["default"])('#61cafa').lighten(10).toHexString(),
-  statusColorNormal: '#85f415',
-  statusColorNormalWeak: (0, _tinycolor["default"])('#85f415').darken(10).toHexString(),
-  statusColorNormalStrong: (0, _tinycolor["default"])('#85f415').lighten(10).toHexString(),
-  statusColorLow: '#2cbda3',
-  statusColorLowWeak: (0, _tinycolor["default"])('#2cbda3').darken(10).toHexString(),
-  statusColorLowStrong: (0, _tinycolor["default"])('#2cbda3').lighten(10).toHexString(),
-  statusColorMedium: '#f49106',
-  statusColorMediumWeak: (0, _tinycolor["default"])('#f49106').darken(10).toHexString(),
-  statusColorMediumStrong: (0, _tinycolor["default"])('#f49106').lighten(10).toHexString(),
-  statusColorHigh: '#ff4242',
-  statusColorHighWeak: (0, _tinycolor["default"])('#ff4242').darken(10).toHexString(),
-  statusColorHighStrong: (0, _tinycolor["default"])('#ff4242').lighten(10).toHexString(),
-  statusColorCritical: '#ff3361',
-  statusColorCriticalWeak: (0, _tinycolor["default"])('#ff3361').darken(10).toHexString(),
-  statusColorCriticalStrong: (0, _tinycolor["default"])('#ff3361').lighten(10).toHexString()
-};
 var elevationShadows = {
   embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(0, 0, 0, 0.35)',
   overlayShadow: '0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32), 0px 3px 6px rgba(0, 0, 0, 0.3)',
@@ -164,12 +144,33 @@ var syntaxColors = {
   syntaxTeal: '#45d4ba'
 };
 var deprecated = {
-  accentColorPositive: statusColors.statusColorNormal,
-  accentColorWarning: statusColors.statusColorMedium,
+  accentColorPositive: '#85f415',
+  // statusColorNormal
+  accentColorWarning: '#f49106',
+  // statusColorMedium
   accentColorAlert: '#c6400d',
-  accentColorNegative: statusColors.statusColorHigh,
-  interactiveColorPrimary: '#3993FF'
+  accentColorNegative: '#ff4242',
+  // statusColorHigh
+  interactiveColorPrimary: '#3993FF',
+  statusColorInfo: '#61cafa',
+  statusColorInfoWeak: (0, _tinycolor["default"])('#61cafa').darken(10).toHexString(),
+  statusColorInfoStrong: (0, _tinycolor["default"])('#61cafa').lighten(10).toHexString(),
+  statusColorNormal: '#85f415',
+  statusColorNormalWeak: (0, _tinycolor["default"])('#85f415').darken(10).toHexString(),
+  statusColorNormalStrong: (0, _tinycolor["default"])('#85f415').lighten(10).toHexString(),
+  statusColorLow: '#2cbda3',
+  statusColorLowWeak: (0, _tinycolor["default"])('#2cbda3').darken(10).toHexString(),
+  statusColorLowStrong: (0, _tinycolor["default"])('#2cbda3').lighten(10).toHexString(),
+  statusColorMedium: '#f49106',
+  statusColorMediumWeak: (0, _tinycolor["default"])('#f49106').darken(10).toHexString(),
+  statusColorMediumStrong: (0, _tinycolor["default"])('#f49106').lighten(10).toHexString(),
+  statusColorHigh: '#ff4242',
+  statusColorHighWeak: (0, _tinycolor["default"])('#ff4242').darken(10).toHexString(),
+  statusColorHighStrong: (0, _tinycolor["default"])('#ff4242').lighten(10).toHexString(),
+  statusColorCritical: '#ff3361',
+  statusColorCriticalWeak: (0, _tinycolor["default"])('#ff3361').darken(10).toHexString(),
+  statusColorCriticalStrong: (0, _tinycolor["default"])('#ff3361').lighten(10).toHexString()
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), notificationColors), severityColors), statusColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), notificationColors), severityColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/prisma/light.js

@@ -126,26 +126,6 @@ var severityColors = {
   severityColorCritical: '#C2306F',
   severityColorEmergency: '#B53394'
 };
-var statusColors = {
-  statusColorInfo: '#006be5',
-  statusColorInfoWeak: (0, _tinycolor["default"])('#006be5').lighten(10).toHexString(),
-  statusColorInfoStrong: (0, _tinycolor["default"])('#006be5').darken(10).toHexString(),
-  statusColorNormal: '#407a06',
-  statusColorNormalWeak: (0, _tinycolor["default"])('#407a06').lighten(10).toHexString(),
-  statusColorNormalStrong: (0, _tinycolor["default"])('#407a06').darken(10).toHexString(),
-  statusColorLow: '#155a4e',
-  statusColorLowWeak: (0, _tinycolor["default"])('#155a4e').lighten(10).toHexString(),
-  statusColorLowStrong: (0, _tinycolor["default"])('#155a4e').darken(10).toHexString(),
-  statusColorMedium: '#c97705',
-  statusColorMediumWeak: (0, _tinycolor["default"])('#c97705').lighten(10).toHexString(),
-  statusColorMediumStrong: (0, _tinycolor["default"])('#c97705').darken(10).toHexString(),
-  statusColorHigh: '#e00000',
-  statusColorHighWeak: (0, _tinycolor["default"])('#e00000').lighten(10).toHexString(),
-  statusColorHighStrong: (0, _tinycolor["default"])('#e00000').darken(10).toHexString(),
-  statusColorCritical: '#9e1534',
-  statusColorCriticalWeak: (0, _tinycolor["default"])('#9e1534').lighten(10).toHexString(),
-  statusColorCriticalStrong: (0, _tinycolor["default"])('#9e1534').darken(10).toHexString()
-};
 var elevationShadows = {
   embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.07), 0px 0px 1px rgba(0, 0, 0, 0.07)',
   overlayShadow: '0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.06)',
@@ -164,12 +144,33 @@ var syntaxColors = {
   syntaxTeal: '#1d7c6b'
 };
 var deprecated = {
-  accentColorPositive: statusColors.statusColorNormal,
-  accentColorWarning: statusColors.statusColorMedium,
+  accentColorPositive: '#407a06',
+  // statusColorNormal
+  accentColorWarning: '#c97705',
+  // statusColorMedium
   accentColorAlert: '#c6400d',
-  accentColorNegative: statusColors.statusColorHigh,
-  interactiveColorPrimary: '#0264d7'
+  accentColorNegative: '#e00000',
+  // statusColorHigh
+  interactiveColorPrimary: '#0264d7',
+  statusColorInfo: '#006be5',
+  statusColorInfoWeak: (0, _tinycolor["default"])('#006be5').lighten(10).toHexString(),
+  statusColorInfoStrong: (0, _tinycolor["default"])('#006be5').darken(10).toHexString(),
+  statusColorNormal: '#407a06',
+  statusColorNormalWeak: (0, _tinycolor["default"])('#407a06').lighten(10).toHexString(),
+  statusColorNormalStrong: (0, _tinycolor["default"])('#407a06').darken(10).toHexString(),
+  statusColorLow: '#155a4e',
+  statusColorLowWeak: (0, _tinycolor["default"])('#155a4e').lighten(10).toHexString(),
+  statusColorLowStrong: (0, _tinycolor["default"])('#155a4e').darken(10).toHexString(),
+  statusColorMedium: '#c97705',
+  statusColorMediumWeak: (0, _tinycolor["default"])('#c97705').lighten(10).toHexString(),
+  statusColorMediumStrong: (0, _tinycolor["default"])('#c97705').darken(10).toHexString(),
+  statusColorHigh: '#e00000',
+  statusColorHighWeak: (0, _tinycolor["default"])('#e00000').lighten(10).toHexString(),
+  statusColorHighStrong: (0, _tinycolor["default"])('#e00000').darken(10).toHexString(),
+  statusColorCritical: '#9e1534',
+  statusColorCriticalWeak: (0, _tinycolor["default"])('#9e1534').lighten(10).toHexString(),
+  statusColorCriticalStrong: (0, _tinycolor["default"])('#9e1534').darken(10).toHexString()
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), notificationColors), severityColors), statusColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), notificationColors), severityColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/splunk-magnetic/index.js

@@ -129,7 +129,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     backgroundColorDialog: pickMagnetic('control-bg-weak-default'),
     backgroundColorInverted: pickMagnetic('inverse-bg-default'),
     backgroundColorPage: pickMagnetic('base-bg-default'),
-    backgroundColorNavigation: currentTheme.colorScheme === 'light' ? "linear-gradient(90deg, ".concat(_magneticTokensLight["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensLight["default"]['inverse-bg-gradient-end']) : "linear-gradient(90deg, ".concat(_magneticTokensDark["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensDark["default"]['inverse-bg-gradient-end']),
+    backgroundColorNavigation: currentTheme.colorScheme === 'light' ? "linear-gradient(90deg, ".concat(_magneticTokensLight["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensLight["default"]['inverse-bg-gradient-end'], ")") : "linear-gradient(90deg, ".concat(_magneticTokensDark["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensDark["default"]['inverse-bg-gradient-end'], ")"),
     backgroundColorPopup: pickMagnetic('base-bg-weak-default'),
     backgroundColorScrim: pickMagnetic('control-bg-weak-default'),
     backgroundColorSidebar: pickMagnetic('base-bg-default'),
@@ -137,6 +137,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     borderColor: pickMagnetic('base-border-default'),
     borderColorStrong: pickMagnetic('base-border-strong-default'),
     borderColorWeak: pickMagnetic('base-border-weak-default'),
+    borderRadius: '6px',
     contentBackgroundColorNegativeWeak: pickMagnetic('negative-bg-strong-default'),
     contentColorActive: pickMagnetic('base-text-default'),
     contentColorDefault: pickMagnetic('base-text-default'),
@@ -147,6 +148,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     embossShadow: '0px 2px 5px 0px rgba(0, 0, 0, 0.05)',
     focusColor: pickMagnetic('control-border-focus'),
     focusShadow: currentTheme.colorScheme === 'light' ? "0 0 0 2px ".concat(_magneticTokensLight["default"]['interact-bg-weak-active'], ",0 0 0 4px ").concat(_magneticTokensLight["default"]['control-border-focus']) : "0 0 0 2px ".concat(_magneticTokensDark["default"]['interact-bg-weak-active'], ",0 0 0 4px ").concat(_magneticTokensDark["default"]['control-border-focus']),
+    inputBorderWidth: '2px',
     interactiveColorAccent: pickMagnetic('control-bg-strong-default'),
     interactiveColorAccentError: pickMagnetic('negative-bg-medium-default'),
     interactiveColorAccentErrorStrong: pickMagnetic('negative-bg-strong-default'),