@splunk/themes 1.2.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 Change Log
 ============
+1.4.0  - November 4, 2025
+----------
+New Features:
+* New `contentColorLinkDisabled`, `contentColorLinkVisited`, and `contentColorLinkVisitedDisabled` tokens (SUI-8244).
+
+1.3.0 - October 7, 2025
+----------
+New Features:
+* New `actionColorContent*` tokens (SUI-8101).
+* `@splunk/themes/storybook-addon-splunk-themes` now supports enabling the Splunk Magnetic theme family as an option by using the `enableSplunkMagneticOption` storybook param (SUI-8283).
+
+Bug Fixes:
+* Fix incorrect action content colors in Magnetic theme customizer (SUI-8101).
+
+Deprecations:
+* `contentColorInfo`, `contentColorNegativeStrong`, `contentColorPositive` and `contentColorWarning` have been deprecated (SUI-8251)
+* `@splunk/themes/storybook-addon-splunk-themes`'s `disableDualTheme` storybook param is deprecated, use `disableMultiThemeOptions` instead (SUI-8283).
+* `@splunk/themes/storybook-addon-splunk-themes`'s theme configuration options `both` value deprecated, use `all` instead (SUI-8283).
 
 1.2.1 - September 2, 2025
 ----------

package/design-tokens/colors.js

@@ -130,7 +130,91 @@ var actionColors = {
   /**
    * Hover border color for Destructive Secondary Buttons.
    */
-  actionColorBorderDestructiveSecondaryHover: ''
+  actionColorBorderDestructiveSecondaryHover: '',
+  /**
+   * Default text color for Primary Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentPrimary: '',
+  /**
+   * Disabled text color for Primary Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentPrimaryDisabled: '',
+  /**
+   * Default text color for Secondary Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentSecondary: '',
+  /**
+   * Disabled text color for Secondary Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentSecondaryDisabled: '',
+  /**
+   * Active text color for Subtle Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentSubtleActive: '',
+  /**
+   * Hover text color for Subtle Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentSubtleHover: '',
+  /**
+   * Default text color for Standalone Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentStandalone: '',
+  /**
+   * Active (pressed) text color for Standalone Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentStandaloneActive: '',
+  /**
+   * Disabled text color for Standalone Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentStandaloneDisabled: '',
+  /**
+   * Hover text color for Standalone Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentStandaloneHover: '',
+  /**
+   * Default text color for Destructive Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentDestructive: '',
+  /**
+   * Disabled text color for Destructive Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentDestructiveDisabled: '',
+  /**
+   * Default text color for Destructive Secondary Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentDestructiveSecondary: '',
+  /**
+   * Disabled text color for Destructive Secondary Buttons.
+   *
+   * @categoryFont
+   */
+  actionColorContentDestructiveSecondaryDisabled: ''
 };
 
 /**
@@ -301,6 +385,18 @@ var contentColors = {
    * Text color for links.
    */
   contentColorLink: '',
+  /**
+   * Text color for visited links.
+   */
+  contentColorLinkVisited: '',
+  /**
+   * Text color for disabled links.
+   */
+  contentColorLinkDisabled: '',
+  /**
+   * Text color for visited links in a disabled state.
+   */
+  contentColorLinkVisitedDisabled: '',
   /**
    * Brand accent text color.
    */
@@ -325,10 +421,6 @@ var contentColors = {
    * Text color for disabled content that does not pass 4.5:1 contrast.
    */
   contentColorDisabled: '',
-  /**
-   * Text color used to convey informational context or status.
-   */
-  contentColorInfo: '',
   /**
    * Text color used on top of inverted backgrounds.
    */
@@ -341,22 +433,10 @@ var contentColors = {
    * Text color for error or negative status messaging.
    */
   contentColorNegative: '',
-  /**
-   * Stronger negative text color for greater emphasis.
-   */
-  contentColorNegativeStrong: '',
   /**
    * Disabled negative text color that does not pass 4.5:1 contrast.
    */
-  contentColorNegativeWeak: '',
-  /**
-   * Text color for success or positive status messaging.
-   */
-  contentColorPositive: '',
-  /**
-   * Text color for cautionary or warning status messaging.
-   */
-  contentColorWarning: ''
+  contentColorNegativeWeak: ''
 };
 
 /**

package/design-tokens/deprecated.js

@@ -16,6 +16,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * @categoryValue
  */
 var deprecated = {
+  contentColorInfo: '',
+  contentColorWarning: '',
+  contentColorPositive: '',
+  contentColorNegativeStrong: '',
   /**
    * Use a more specific token based on the semantic use case:
    * [`interactiveColorAccent`](#interactiveColorAccent), [`contentColorAccent`](#contentColorAccent), or [`focusColor`](#focusColor).

package/enterprise/dark.js

@@ -63,13 +63,12 @@ var contentColors = {
   contentColorAccent: '#20ac33',
   contentColorAccentStrong: '#a4e9ae',
   contentColorAccentWeak: '#0b4613',
-  contentColorInfo: '#66a7c4',
   contentColorNegative: '#e37267',
-  contentColorNegativeStrong: '#ffa69e',
   contentColorNegativeWeak: '#562a25',
-  contentColorPositive: '#7ecd7e',
-  contentColorWarning: '#f8be34',
-  contentColorLink: _light["default"].accentColorL10
+  contentColorLink: _light["default"].accentColorL10,
+  contentColorLinkDisabled: _light["default"].accentColorD30,
+  contentColorLinkVisited: '#a974f7',
+  contentColorLinkVisitedDisabled: '#6732b8'
 };
 var actionColors = {
   actionColorBackgroundPrimary: '#1a8929',
@@ -99,7 +98,21 @@ var actionColors = {
   actionColorBorderDestructiveSecondary: '#ff776b',
   actionColorBorderDestructiveSecondaryActive: '#ff8a80',
   actionColorBorderDestructiveSecondaryDisabled: '#562a25',
-  actionColorBorderDestructiveSecondaryHover: '#ff8a80'
+  actionColorBorderDestructiveSecondaryHover: '#ff8a80',
+  actionColorContentPrimary: contentColors.contentColorInverted,
+  actionColorContentPrimaryDisabled: contentColors.contentColorInverted,
+  actionColorContentSecondary: contentColors.contentColorActive,
+  actionColorContentSecondaryDisabled: contentColors.contentColorDisabled,
+  actionColorContentSubtleActive: contentColors.contentColorAccentStrong,
+  actionColorContentSubtleHover: contentColors.contentColorAccentStrong,
+  actionColorContentStandalone: contentColors.contentColorAccent,
+  actionColorContentStandaloneActive: contentColors.contentColorAccentStrong,
+  actionColorContentStandaloneDisabled: contentColors.contentColorAccentWeak,
+  actionColorContentStandaloneHover: contentColors.contentColorAccentStrong,
+  actionColorContentDestructive: contentColors.contentColorInverted,
+  actionColorContentDestructiveDisabled: contentColors.contentColorInverted,
+  actionColorContentDestructiveSecondary: contentColors.contentColorNegative,
+  actionColorContentDestructiveSecondaryDisabled: contentColors.contentColorNegativeWeak
 };
 var interactiveColors = {
   interactiveColorBorder: _light["default"].gray60,
@@ -150,6 +163,11 @@ var shadows = {
   modalShadow: '0px 50px 200px #000000, 0px 29px 66px rgba(0, 0, 0, 0.41), 0px 14px 47px rgba(0, 0, 0, 0.17), 0px 5px 10px rgba(0, 0, 0, 0.15)'
 };
 var deprecated = {
+  contentColorInfo: '#66a7c4',
+  // @deprecated, SUI-8251
+  contentColorNegativeStrong: '#ffa69e',
+  contentColorPositive: '#7ecd7e',
+  contentColorWarning: '#f8be34',
   backgroundColor: _light["default"].gray20,
   // @deprecated SUI-6656
   backgroundColorHover: _light["default"].gray30,

package/enterprise/light.js

@@ -32,6 +32,7 @@ var deprecatedEnterpriseColors = {
   errorColor: '#dc4e41',
   accentColorD10: '#006eaa',
   accentColor: '#007abd',
+  accentColorL30: '#7ed2ff',
   infoColor: '#006d9c',
   infoColorL10: '#338ab0',
   infoColorD10: '#00577c',
@@ -128,13 +129,12 @@ var contentColors = {
   contentColorAccent: '#1a8929',
   contentColorAccentStrong: '#0d4515',
   contentColorAccentWeak: '#b5e3b5',
-  contentColorInfo: '#006d9c',
   contentColorNegative: '#c84535',
-  contentColorNegativeStrong: '#812d22',
   contentColorNegativeWeak: '#f5aca3',
-  contentColorPositive: '#307b30',
-  contentColorWarning: '#7d600f',
-  contentColorLink: deprecatedEnterpriseColors.accentColorD10
+  contentColorLink: deprecatedEnterpriseColors.accentColorD10,
+  contentColorLinkDisabled: deprecatedEnterpriseColors.accentColorL30,
+  contentColorLinkVisited: '#864ae0',
+  contentColorLinkVisitedDisabled: '#e0ccff'
 };
 var actionColors = {
   actionColorBackgroundPrimary: '#1a8929',
@@ -164,7 +164,21 @@ var actionColors = {
   actionColorBorderDestructiveSecondary: '#c84535',
   actionColorBorderDestructiveSecondaryActive: '#a1382b',
   actionColorBorderDestructiveSecondaryDisabled: '#f5aca3',
-  actionColorBorderDestructiveSecondaryHover: '#a1382b'
+  actionColorBorderDestructiveSecondaryHover: '#a1382b',
+  actionColorContentPrimary: contentColors.contentColorInverted,
+  actionColorContentPrimaryDisabled: contentColors.contentColorInverted,
+  actionColorContentSecondary: contentColors.contentColorActive,
+  actionColorContentSecondaryDisabled: contentColors.contentColorDisabled,
+  actionColorContentSubtleActive: contentColors.contentColorAccentStrong,
+  actionColorContentSubtleHover: contentColors.contentColorAccentStrong,
+  actionColorContentStandalone: contentColors.contentColorAccent,
+  actionColorContentStandaloneActive: contentColors.contentColorAccentStrong,
+  actionColorContentStandaloneDisabled: contentColors.contentColorAccentWeak,
+  actionColorContentStandaloneHover: contentColors.contentColorAccentStrong,
+  actionColorContentDestructive: contentColors.contentColorInverted,
+  actionColorContentDestructiveDisabled: contentColors.contentColorInverted,
+  actionColorContentDestructiveSecondary: contentColors.contentColorNegative,
+  actionColorContentDestructiveSecondaryDisabled: contentColors.contentColorNegativeWeak
 };
 var interactiveColors = {
   interactiveColorBorder: deprecatedEnterpriseColors.gray60,
@@ -222,6 +236,11 @@ var zindexes = {
   zindexToastMessages: 2000
 };
 var deprecated = {
+  contentColorInfo: '#006d9c',
+  // @eprecated, SUI-8251
+  contentColorNegativeStrong: '#812d22',
+  contentColorPositive: '#307b30',
+  contentColorWarning: '#7d600f',
   backgroundColor: neutralColors.white,
   // @deprecated SUI-6656
   backgroundColorHover: deprecatedEnterpriseColors.gray96,
@@ -255,7 +274,6 @@ var deprecated = {
   gray20: '#171d21',
   accentColorL50: '#ecf8ff',
   accentColorL40: '#bfe9ff',
-  accentColorL30: '#7ed2ff',
   accentColorL20: '#3ebcff',
   accentColorL10: '#00a4fd',
   accentColorD20: '#006297',

package/index.js

@@ -14,7 +14,14 @@ var _exportNames = {
   useSplunkTheme: true,
   withSplunkTheme: true,
   variables: true,
-  clearAllCaches: true
+  clearAllCaches: true,
+  unstable_designTokens: true,
+  unstable_designTokensColors: true,
+  unstable_designTokensDataViz: true,
+  unstable_designTokensDeprecated: true,
+  unstable_designTokensElevation: true,
+  unstable_designTokensSpacingSizing: true,
+  unstable_designTokensTypography: true
 };
 Object.defineProperty(exports, "getSettingsFromThemedProps", {
   enumerable: true,
@@ -82,6 +89,48 @@ Object.defineProperty(exports, "clearAllCaches", {
     return _clearAllCaches.clearAllCaches;
   }
 });
+Object.defineProperty(exports, "unstable_designTokens", {
+  enumerable: true,
+  get: function get() {
+    return _designTokens["default"];
+  }
+});
+Object.defineProperty(exports, "unstable_designTokensColors", {
+  enumerable: true,
+  get: function get() {
+    return _colors["default"];
+  }
+});
+Object.defineProperty(exports, "unstable_designTokensDataViz", {
+  enumerable: true,
+  get: function get() {
+    return _dataViz["default"];
+  }
+});
+Object.defineProperty(exports, "unstable_designTokensDeprecated", {
+  enumerable: true,
+  get: function get() {
+    return _deprecated["default"];
+  }
+});
+Object.defineProperty(exports, "unstable_designTokensElevation", {
+  enumerable: true,
+  get: function get() {
+    return _elevation["default"];
+  }
+});
+Object.defineProperty(exports, "unstable_designTokensSpacingSizing", {
+  enumerable: true,
+  get: function get() {
+    return _spacingSizing["default"];
+  }
+});
+Object.defineProperty(exports, "unstable_designTokensTypography", {
+  enumerable: true,
+  get: function get() {
+    return _typography["default"];
+  }
+});
 var _getSettingsFromThemedProps = _interopRequireDefault(require("./getSettingsFromThemedProps"));
 var _getTheme = _interopRequireDefault(require("./getTheme"));
 var _mixins = _interopRequireDefault(require("./mixins"));
@@ -104,4 +153,11 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
+var _designTokens = _interopRequireDefault(require("./design-tokens"));
+var _colors = _interopRequireDefault(require("./design-tokens/colors"));
+var _dataViz = _interopRequireDefault(require("./design-tokens/dataViz"));
+var _deprecated = _interopRequireDefault(require("./design-tokens/deprecated"));
+var _elevation = _interopRequireDefault(require("./design-tokens/elevation"));
+var _spacingSizing = _interopRequireDefault(require("./design-tokens/spacing-sizing"));
+var _typography = _interopRequireDefault(require("./design-tokens/typography"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/mixins/prose.js

@@ -9,7 +9,7 @@ var _variables = _interopRequireDefault(require("../variables"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        /* TODO: should this also be a variable? */\n        min-width: 34ch;\n        max-width: ", ";\n\n        /*\n        * Word spacing: 0.16em\n        * Letter spacing (i.e., tracking): 0.12em\n        */\n\n        /*\n        * Style all block-level elements to be 1.5 margin-bottom by default\n        * wcag requirement 1.4.12\n        */\n        & *:is(", "):not(:last-child) {\n            margin-block-end: 1lh;\n        }\n\n        /*\n        * Separate h1 and h2 into individual rules to avoid ts-styled-plugin\u2019s parser\n        * error on comma-separated, multi-line interpolations at the start of a selector.\n        */\n        ", ":where(h1):not(:first-child){\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(h2):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(img) {\n            max-width: 100%;\n        }\n\n        ", ":where(ol), ", ":where(ul) {\n            padding-inline-start: 2rem;\n        }\n    "]);
+  var data = _taggedTemplateLiteral(["\n        /* TODO: should this also be a variable? */\n        min-width: 34ch;\n        max-width: ", ";\n\n        /*\n        * Word spacing: 0.16em\n        * Letter spacing (i.e., tracking): 0.12em\n        */\n\n        /*\n        * Style all block-level elements to be 1.5 margin-bottom by default\n        * wcag requirement 1.4.12\n        */\n        & *:is(", "):not(:last-child) {\n            margin-block-end: 1lh;\n        }\n\n        /*\n        * Separate h1 and h2 into individual rules to avoid ts-styled-plugin\u2019s parser\n        * error on comma-separated, multi-line interpolations at the start of a selector.\n        */\n        ", ":where(h1):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(h2):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(img) {\n            max-width: 100%;\n        }\n\n        ", ":where(ol), ", ":where(ul) {\n            padding-inline-start: 2rem;\n        }\n    "]);
   _templateObject = function _templateObject() {
     return data;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "main": "./index.js",
   "types": "./types/index.d.ts",
@@ -14,6 +14,7 @@
     "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
     "lint": "eslint src --ext \".ts,.tsx,.js,.jsx\"",
     "lint:ci": "yarn run lint -- -f junit -o test-reports/lint-results.xml",
+    "lint:fix": "yarn run lint --fix",
     "start": "yarn babel --watch",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -78,7 +79,7 @@
     "@storybook/manager-api": "^7.6.20",
     "@storybook/react": "^7.6.20",
     "@storybook/theming": "^7.6.20",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^18.2.0",
@@ -92,11 +93,14 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-webpack": "^0.13.4",
     "eslint-plugin-import": "^2.30.1",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-testing-library": "^6.3.0",
+    "jest": "^30.1.3",
+    "jest-environment-jsdom": "^30.1.2",
     "jest-styled-components": "^7.0.8",
     "react": "^18.2.0",
     "styled-components": "^5.3.10",

package/prisma/dark.js

@@ -34,15 +34,14 @@ var contentColors = {
   contentColorActive: '#fafafa',
   contentColorDefault: '#b5b5b5',
   contentColorDisabled: '#6b6b6b',
-  contentColorInfo: '#61cafa',
   contentColorInverted: '#000000',
   contentColorMuted: '#909090',
   contentColorNegative: '#ff5252',
-  contentColorNegativeStrong: '#ff9e9e',
   contentColorNegativeWeak: '#561a1a',
-  contentColorPositive: '#85f415',
-  contentColorWarning: '#f49106',
-  contentColorLink: '#3993ff'
+  contentColorLink: '#3993ff',
+  contentColorLinkDisabled: '#14437b',
+  contentColorLinkVisited: '#a974f7',
+  contentColorLinkVisitedDisabled: '#6732B8'
 };
 var actionColors = {
   actionColorBackgroundPrimary: '#3993ff',
@@ -72,7 +71,21 @@ var actionColors = {
   actionColorBorderDestructiveSecondary: '#ff4242',
   actionColorBorderDestructiveSecondaryActive: '#ff6b6b',
   actionColorBorderDestructiveSecondaryDisabled: '#561a1a',
-  actionColorBorderDestructiveSecondaryHover: '#ff6b6b'
+  actionColorBorderDestructiveSecondaryHover: '#ff6b6b',
+  actionColorContentPrimary: contentColors.contentColorInverted,
+  actionColorContentPrimaryDisabled: contentColors.contentColorInverted,
+  actionColorContentSecondary: contentColors.contentColorActive,
+  actionColorContentSecondaryDisabled: contentColors.contentColorDisabled,
+  actionColorContentSubtleActive: contentColors.contentColorAccentStrong,
+  actionColorContentSubtleHover: contentColors.contentColorAccentStrong,
+  actionColorContentStandalone: contentColors.contentColorAccent,
+  actionColorContentStandaloneActive: contentColors.contentColorAccentStrong,
+  actionColorContentStandaloneDisabled: contentColors.contentColorAccentWeak,
+  actionColorContentStandaloneHover: contentColors.contentColorAccentStrong,
+  actionColorContentDestructive: contentColors.contentColorInverted,
+  actionColorContentDestructiveDisabled: contentColors.contentColorInverted,
+  actionColorContentDestructiveSecondary: contentColors.contentColorNegative,
+  actionColorContentDestructiveSecondaryDisabled: contentColors.contentColorNegativeWeak
 };
 var interactiveColors = {
   interactiveColorBorder: 'rgba(255, 255, 255, 0.5)',
@@ -144,6 +157,11 @@ var syntaxColors = {
   syntaxTeal: '#45d4ba'
 };
 var deprecated = {
+  contentColorInfo: '#61cafa',
+  // @deprecated, SUI-8251
+  contentColorNegativeStrong: '#ff9e9e',
+  contentColorPositive: '#85f415',
+  contentColorWarning: '#f49106',
   accentColorPositive: '#85f415',
   // statusColorNormal
   accentColorWarning: '#f49106',

package/prisma/light.js

@@ -34,15 +34,14 @@ var contentColors = {
   contentColorActive: '#2c2c2c',
   contentColorDefault: '#4d4d4d',
   contentColorDisabled: '#878787',
-  contentColorInfo: '#006be5',
   contentColorInverted: '#ffffff',
   contentColorMuted: '#6b6b6b',
   contentColorNegative: '#e00000',
-  contentColorNegativeStrong: '#7a0000',
   contentColorNegativeWeak: '#ff9999',
-  contentColorPositive: '#407a06',
-  contentColorWarning: '#c97705',
-  contentColorLink: '#0264d7'
+  contentColorLink: '#0264d7',
+  contentColorLinkDisabled: '#b3d6fe',
+  contentColorLinkVisited: '#864ae0',
+  contentColorLinkVisitedDisabled: '#e0ccff'
 };
 var actionColors = {
   actionColorBackgroundPrimary: '#0264d7',
@@ -72,7 +71,21 @@ var actionColors = {
   actionColorBorderDestructiveSecondary: '#e00000',
   actionColorBorderDestructiveSecondaryActive: '#a30000',
   actionColorBorderDestructiveSecondaryDisabled: '#ff9999',
-  actionColorBorderDestructiveSecondaryHover: '#a30000'
+  actionColorBorderDestructiveSecondaryHover: '#a30000',
+  actionColorContentPrimary: contentColors.contentColorInverted,
+  actionColorContentPrimaryDisabled: contentColors.contentColorInverted,
+  actionColorContentSecondary: contentColors.contentColorActive,
+  actionColorContentSecondaryDisabled: contentColors.contentColorDisabled,
+  actionColorContentSubtleActive: contentColors.contentColorAccentStrong,
+  actionColorContentSubtleHover: contentColors.contentColorAccentStrong,
+  actionColorContentStandalone: contentColors.contentColorAccent,
+  actionColorContentStandaloneActive: contentColors.contentColorAccentStrong,
+  actionColorContentStandaloneDisabled: contentColors.contentColorAccentWeak,
+  actionColorContentStandaloneHover: contentColors.contentColorAccentStrong,
+  actionColorContentDestructive: contentColors.contentColorInverted,
+  actionColorContentDestructiveDisabled: contentColors.contentColorInverted,
+  actionColorContentDestructiveSecondary: contentColors.contentColorNegative,
+  actionColorContentDestructiveSecondaryDisabled: contentColors.contentColorNegativeWeak
 };
 var interactiveColors = {
   interactiveColorBorder: 'rgba(0, 0, 0, 0.48)',
@@ -144,6 +157,11 @@ var syntaxColors = {
   syntaxTeal: '#1b7464'
 };
 var deprecated = {
+  contentColorInfo: '#006be5',
+  // @deprecated, SUI-8251
+  contentColorNegativeStrong: '#7a0000',
+  contentColorPositive: '#407a06',
+  contentColorWarning: '#c97705',
   accentColorPositive: '#407a06',
   // statusColorNormal
   accentColorWarning: '#c97705',

package/splunk-magnetic/index.js

@@ -128,6 +128,20 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     actionColorDestructive: pickMagnetic('negative-bg-default'),
     actionColorDestructiveStrong: pickMagnetic('negative-bg-strong-default'),
     actionColorDestructiveWeak: pickMagnetic('negative-bg-weak-default'),
+    actionColorContentPrimary: pickMagnetic('interact-text-in-default'),
+    actionColorContentPrimaryDisabled: pickMagnetic('interact-text-in-disabled'),
+    actionColorContentSecondary: pickMagnetic('interact-text-default'),
+    actionColorContentSecondaryDisabled: pickMagnetic('interact-text-disabled'),
+    actionColorContentSubtleActive: pickMagnetic('interact-text-active'),
+    actionColorContentSubtleHover: pickMagnetic('interact-text-hover'),
+    actionColorContentStandalone: pickMagnetic('interact-text-default'),
+    actionColorContentStandaloneActive: pickMagnetic('interact-text-active'),
+    actionColorContentStandaloneDisabled: pickMagnetic('interact-text-disabled'),
+    actionColorContentStandaloneHover: pickMagnetic('interact-text-hover'),
+    actionColorContentDestructive: pickMagnetic('negative-text-in-default'),
+    actionColorContentDestructiveDisabled: pickMagnetic('negative-text-in-disabled'),
+    actionColorContentDestructiveSecondary: pickMagnetic('negative-text-default'),
+    actionColorContentDestructiveSecondaryDisabled: pickMagnetic('negative-text-disabled'),
     backgroundColorDialog: pickMagnetic('control-bg-weak-default'),
     backgroundColorInverted: pickMagnetic('inverse-bg-default'),
     backgroundColorPage: pickMagnetic('base-bg-default'),
@@ -142,8 +156,8 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     borderRadius: '6px',
     contentColorActive: pickMagnetic('base-text-default'),
     contentColorDefault: pickMagnetic('base-text-default'),
-    contentColorDisabled: pickMagnetic('interact-text-in-disabled'),
-    contentColorInverted: pickMagnetic('interact-text-in-default'),
+    contentColorDisabled: pickMagnetic('base-text-disabled'),
+    contentColorInverted: pickMagnetic('base-text-in-default'),
     contentColorMuted: pickMagnetic('base-text-weak-default'),
     contentColorNegative: pickMagnetic('negative-text-default'),
     embossShadow: '0px 2px 5px 0px rgba(0, 0, 0, 0.05)',
@@ -151,7 +165,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     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'),
+    interactiveColorAccentError: pickMagnetic('negative-border-medium-default'),
     interactiveColorAccentErrorStrong: pickMagnetic('negative-bg-strong-default'),
     interactiveColorAccentErrorWeak: pickMagnetic('negative-bg-weak-default'),
     interactiveColorBackground: pickMagnetic('control-bg-default'),
@@ -168,6 +182,9 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     neutral300: currentTheme.colorScheme === 'light' ? _magneticTokensCore["default"]['neutral-85'] : _magneticTokensCore["default"]['neutral-40'],
     neutral400: currentTheme.colorScheme === 'light' ? _magneticTokensCore["default"]['neutral-80'] : _magneticTokensCore["default"]['neutral-50'],
     neutral500: currentTheme.colorScheme === 'light' ? _magneticTokensCore["default"]['neutral-70'] : _magneticTokensCore["default"]['neutral-60'],
+    notificationColorNegativeWeak: pickMagnetic('negative-bg-weak-default'),
+    notificationColorNegativeStrong: pickMagnetic('negative-bg-strong-default'),
+    notificationColorNegative: pickMagnetic('negative-bg-default'),
     overlayShadow: '0px 4px 12px 0px rgba(0,0,0,0.18)',
     statusColorHigh: pickMagnetic('negative-icon-default'),
     statusColorHighStrong: pickMagnetic('negative-border-strong-default'),

package/storybook-addon-splunk-themes/SplunkThemesTool.js

@@ -17,6 +17,8 @@ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArra
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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); }
@@ -36,19 +38,14 @@ var SplunkThemesTool = /*#__PURE__*/(0, _react.memo)(function () {
     globals = _useGlobals2[0],
     updateGlobals = _useGlobals2[1];
   var params = (0, _managerApi.useParameter)(_constants.PARAM_KEY, {});
-  var disableDualTheme = (0, _managerApi.useParameter)(_constants.DISABLE_DUAL_THEME_KEY, false);
+  var hasEnabledSplunkMagneticOption = (0, _managerApi.useParameter)(_constants.ENABLE_SPLUNK_MAGNETIC_KEY, false);
+  var hasDisabledMultiThemeOptions = (0, _managerApi.useParameter)(_constants.DISABLE_MULTI_THEME_OPTIONS_KEY, false);
   var globalsTheme = globals[_constants.PARAM_KEY] || undefined;
   var currentTheme = (0, _util.normalizeThemeOptions)(params, globalsTheme);
   var updateTheme = (0, _react.useCallback)(function (newTheme) {
     var mergedTheme = (0, _util.getMergedTheme)(globalsTheme, newTheme);
     updateGlobals(_defineProperty({}, _constants.PARAM_KEY, mergedTheme));
   }, [globalsTheme, updateGlobals]);
-  (0, _react.useEffect)(function () {
-    if (disableDualTheme) {
-      // eslint-disable-next-line no-console
-      console.warn("This story has 'disableDualTheme' set to 'true', so 'both' option will not show in theme dropdown.");
-    }
-  }, [disableDualTheme]);
   return /*#__PURE__*/_react["default"].createElement(_components.WithTooltip, {
     placement: "top",
     trigger: "click",
@@ -56,23 +53,26 @@ var SplunkThemesTool = /*#__PURE__*/(0, _react.memo)(function () {
       return Object.keys(_themeOptions.themeOptions).map(function (themeOptionKey) {
         var themeOptionValues = _themeOptions.themeOptions[themeOptionKey];
 
-        // if story is passing disableDualTheme: true, don't display 'both' option in theme picker
-        var dualThemeOptions = disableDualTheme ? [] : ['both'];
+        // Add splunk magnetic to family options if enabled
+        var effectiveValues = themeOptionKey === 'family' && hasEnabledSplunkMagneticOption ? _objectSpread(_objectSpread({}, themeOptionValues), {}, {
+          values: [].concat(_toConsumableArray(themeOptionValues.values), ['splunk-magnetic'])
+        }) : themeOptionValues;
+        var multiThemeOptions = hasDisabledMultiThemeOptions ? [] : ['all'];
         return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
           key: themeOptionKey
-        }, /*#__PURE__*/_react["default"].createElement(_themes.TooltipSectionTitle, null, themeOptionValues.name), /*#__PURE__*/_react["default"].createElement(_components.TooltipLinkList, {
-          links: [].concat(_toConsumableArray(themeOptionValues.values), dualThemeOptions).map(function (themeValue) {
+        }, /*#__PURE__*/_react["default"].createElement(_themes.TooltipSectionTitle, null, effectiveValues.name), /*#__PURE__*/_react["default"].createElement(_components.TooltipLinkList, {
+          links: [].concat(_toConsumableArray(effectiveValues.values), multiThemeOptions).map(function (themeValue) {
             var active = currentTheme[themeOptionKey] === themeValue;
             return {
               active: active,
               id: themeValue,
-              onClick: function onClick(e, clickProps) {
-                updateTheme(_defineProperty({}, themeOptionKey, clickProps.title));
+              onClick: function onClick() {
+                updateTheme(_defineProperty({}, themeOptionKey, themeValue));
               },
               right: active && /*#__PURE__*/_react["default"].createElement(_components.Icons, {
                 icon: "check"
               }),
-              title: themeValue
+              title: themeValue === 'splunk-magnetic' ? 'splunk magnetic' : themeValue
             };
           })
         }));