@splunk/themes 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 Change Log
 ============
+1.3.0 - October 7, 2025
+----------
+New Features: 
+* New `actionColorContent*` tokens (SUI-8101).
+
+Bug Fixes: 
+* Fix incorrect action content colors in Magnetic theme customizer (SUI-8101).
+
+Deprecations: 
+* `contentColorInfo`, `contentColorNegativeStrong`, `contentColorPositive` and `contentColorWarning` have been deprecated (SUI-8251)
+
+1.2.1 - September 2, 2025
+----------
+Bug Fixes:
+* Added missing `sansFontFamily` token in Magnetic theme customizer (SUI-8101).
+
+Docs:
+* Added missing data visualization color categories (`categorical2D`, `categorical2L`, `divergent1D`) to design tokens documentation (SUI-8139).
 
 1.2.0 - August 5, 2025
 ----------
 New Features:
 * New `lineHeight*` variables (SUI-7993).
 
-Bug fixes:
+Bug Fixes:
 * Updated `skipLink` mixin to override `min-width` and `min-height` properties.
 
 1.1.0 - July 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: ''
 };
 
 /**
@@ -325,10 +409,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 +421,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,12 +63,8 @@ var contentColors = {
   contentColorAccent: '#20ac33',
   contentColorAccentStrong: '#a4e9ae',
   contentColorAccentWeak: '#0b4613',
-  contentColorInfo: '#66a7c4',
   contentColorNegative: '#e37267',
-  contentColorNegativeStrong: '#ffa69e',
   contentColorNegativeWeak: '#562a25',
-  contentColorPositive: '#7ecd7e',
-  contentColorWarning: '#f8be34',
   contentColorLink: _light["default"].accentColorL10
 };
 var actionColors = {
@@ -99,7 +95,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 +160,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

@@ -128,12 +128,8 @@ var contentColors = {
   contentColorAccent: '#1a8929',
   contentColorAccentStrong: '#0d4515',
   contentColorAccentWeak: '#b5e3b5',
-  contentColorInfo: '#006d9c',
   contentColorNegative: '#c84535',
-  contentColorNegativeStrong: '#812d22',
   contentColorNegativeWeak: '#f5aca3',
-  contentColorPositive: '#307b30',
-  contentColorWarning: '#7d600f',
   contentColorLink: deprecatedEnterpriseColors.accentColorD10
 };
 var actionColors = {
@@ -164,7 +160,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 +232,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,

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.0",
+  "version": "1.3.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,14 +34,10 @@ 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'
 };
 var actionColors = {
@@ -72,7 +68,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 +154,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,14 +34,10 @@ 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'
 };
 var actionColors = {
@@ -72,7 +68,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 +154,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

@@ -72,6 +72,7 @@ var mapMagneticCategoricalColors = function mapMagneticCategoricalColors() {
 var magneticTypography = {
   fontFamily: "Inter, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
   fontFamilyTitle: "'Sharp Sans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  sansFontFamily: "Inter, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
   monoFontFamily: "'Roboto Mono', ui-monospace, 'Courier New', Menlo, Monaco"
 };
 var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(currentTheme) {
@@ -127,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'),
@@ -141,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)',
@@ -150,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'),
@@ -167,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'),