@splunk/themes 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "main": "./index.js",
   "types": "./types/index.d.ts",
@@ -69,15 +69,15 @@
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.0",
+    "@babel/cli": "^7.28.0",
+    "@babel/core": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/components": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/blocks": "^7.6.20",
+    "@storybook/components": "^7.6.20",
+    "@storybook/manager-api": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/theming": "^7.6.20",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -103,7 +103,7 @@
     "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.9.0"
   },
   "engines": {

package/prisma/base.js

@@ -55,7 +55,14 @@ function createPrismaBase(_ref) {
     fontWeightHeavy: 800,
     fontWeightExtraBold: 900,
     lineHeight: '1.5',
-    lineLength: '80ch'
+    lineLength: '80ch',
+    lineHeightNormal: '1.5',
+    lineHeightSingle: '1',
+    lineHeightTight: '1.2',
+    lineHeightSnug: '1.25',
+    lineHeightComfortable: '1.333',
+    lineHeightRelaxed: '1.375',
+    lineHeightSpacious: '1.429'
   };
   var zindexes = {
     zindexLayer: 1000,

package/prisma/dark.js

@@ -50,7 +50,7 @@ var actionColors = {
   actionColorBackgroundPrimaryDisabled: '#103460',
   actionColorBackgroundPrimaryHover: '#6baeff',
   actionColorBackgroundSecondary: 'transparent',
-  actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.2)',
+  actionColorBackgroundSecondaryActive: 'rgba(225, 225, 225, 0.16)',
   actionColorBackgroundSecondaryDisabled: 'transparent',
   actionColorBackgroundSecondaryHover: 'rgba(255, 255, 255, 0.05)',
   actionColorBackgroundSubtle: 'transparent',
@@ -81,7 +81,7 @@ var interactiveColors = {
   interactiveColorBorderDisabled: 'rgba(255, 255, 255, 0.30)',
   interactiveColorOverlaySelected: 'rgba(255, 255, 255, 0.1)',
   interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
-  interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
+  interactiveColorOverlayActive: 'rgba(225, 225, 225, 0.16)',
   interactiveColorOverlayDrag: 'rgba(57, 147, 255, 0.16)',
   interactiveColorBackground: 'transparent',
   interactiveColorBackgroundDisabled: 'transparent',

package/prisma/light.js

@@ -50,7 +50,7 @@ var actionColors = {
   actionColorBackgroundPrimaryDisabled: '#72b2fe',
   actionColorBackgroundPrimaryHover: '#024ba2',
   actionColorBackgroundSubtle: 'transparent',
-  actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.07)',
+  actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.12)',
   actionColorBackgroundSubtleDisabled: 'transparent',
   actionColorBackgroundSecondaryHover: 'rgba(0, 0, 0, 0.03)',
   actionColorBackgroundSecondary: 'transparent',
@@ -81,7 +81,7 @@ var interactiveColors = {
   interactiveColorBorderDisabled: 'rgba(0, 0, 0, 0.3)',
   interactiveColorOverlaySelected: 'rgba(0, 0, 0, 0.04)',
   interactiveColorOverlayHover: 'rgba(0, 0, 0, 0.03)',
-  interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.07)',
+  interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.12)',
   interactiveColorOverlayDrag: 'rgba(2, 100, 215, 0.16)',
   interactiveColorBackground: 'transparent',
   interactiveColorBackgroundDisabled: 'transparent',
@@ -133,15 +133,15 @@ var elevationShadows = {
   modalShadow: '0px 50px 200px rgba(0, 0, 0, 0.3), 0px 29px 66px rgba(0, 0, 0, 0.08), 0px 29px 47px rgba(0, 0, 0, 0.08), 0px 5px 10px rgba(0, 0, 0, 0.03)'
 };
 var syntaxColors = {
-  syntaxBlue: '#0f7594',
-  syntaxBrown: '#9f6404',
-  syntaxGray: '#6b6b6b',
-  syntaxGreen: '#5c780c',
-  syntaxOrange: '#ba4f08',
-  syntaxPink: '#cc15ae',
-  syntaxPurple: '#7b4df5',
-  syntaxRed: '#db1e47',
-  syntaxTeal: '#1d7c6b'
+  syntaxBlue: '#0e6e8b',
+  syntaxBrown: '#8b5804',
+  syntaxGray: '#666',
+  syntaxGreen: '#556f0b',
+  syntaxOrange: '#a64708',
+  syntaxPink: '#b9139e',
+  syntaxPurple: '#703ef4',
+  syntaxRed: '#ca1c41',
+  syntaxTeal: '#1b7464'
 };
 var deprecated = {
   accentColorPositive: '#407a06',

package/splunk-magnetic/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _magneticTokensCore = _interopRequireDefault(require("./magneticTokensCore"));
 var _magneticTokensDark = _interopRequireDefault(require("./magneticTokensDark"));
 var _magneticTokensLight = _interopRequireDefault(require("./magneticTokensLight"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -160,6 +161,12 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     interactiveColorBorderHover: pickMagnetic('control-border-hover'),
     linkColor: pickMagnetic('interact-text-default'),
     modalShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.12)',
+    neutral50: currentTheme.colorScheme === 'light' ? '#EFF0F1' : '#171B1F',
+    neutral100: currentTheme.colorScheme === 'light' ? _magneticTokensCore["default"]['neutral-95'] : _magneticTokensCore["default"]['neutral-25'],
+    neutral200: currentTheme.colorScheme === 'light' ? _magneticTokensCore["default"]['neutral-90'] : _magneticTokensCore["default"]['neutral-35'],
+    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'],
     overlayShadow: '0px 4px 12px 0px rgba(0,0,0,0.18)',
     statusColorHigh: pickMagnetic('negative-icon-default'),
     statusColorHighStrong: pickMagnetic('negative-border-strong-default'),
@@ -172,7 +179,16 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     statusColorMediumWeak: pickMagnetic('warning-bg-medium-default'),
     statusColorNormal: pickMagnetic('positive-icon-strong-default'),
     statusColorNormalStrong: pickMagnetic('positive-border-strong-default'),
-    statusColorNormalWeak: pickMagnetic('positive-bg-medium-default')
+    statusColorNormalWeak: pickMagnetic('positive-bg-medium-default'),
+    syntaxBlue: currentTheme.colorScheme === 'light' ? '#0f7190' : '#6cd0f0',
+    syntaxBrown: currentTheme.colorScheme === 'light' ? '#8b5804' : '#fccf87',
+    syntaxGray: currentTheme.colorScheme === 'light' ? '#666' : '#909090',
+    syntaxGreen: currentTheme.colorScheme === 'light' ? '#556f0b' : '#cef06c',
+    syntaxOrange: currentTheme.colorScheme === 'light' ? '#a64708' : '#f7933f',
+    syntaxPink: currentTheme.colorScheme === 'light' ? '#b9139e' : '#f494e5',
+    syntaxPurple: currentTheme.colorScheme === 'light' ? '#703ef4' : '#ab74f1',
+    syntaxRed: currentTheme.colorScheme === 'light' ? '#ca1c41' : '#e9627f',
+    syntaxTeal: currentTheme.colorScheme === 'light' ? '#1b7464' : '#45d4ba'
   });
 };
 var _default = splunkMagneticThemeCustomizer;

package/splunk-magnetic/magneticTokensCore.js

@@ -0,0 +1,390 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  'accent-a-35': '#3b47b2',
+  'accent-a-40': '#4653c7',
+  'accent-a-45': '#505ed9',
+  'accent-a-50': '#5a68e5',
+  'accent-a-55': '#6977f0',
+  'accent-a-60': '#7d8aff',
+  'accent-a-65': '#8a95ff',
+  'accent-a-70': '#9ca6ff',
+  'accent-a-80': '#bac1ff',
+  'accent-a-85': '#ccd1ff',
+  'accent-a-90': '#d9ddff',
+  'accent-a-95': '#ebedff',
+  'accent-b-c-35': '#991d53',
+  'accent-b-c-40': '#b02863',
+  'accent-b-c-45': '#c2306f',
+  'accent-b-c-50': '#cf3a7a',
+  'accent-b-c-55': '#e3447c',
+  'accent-b-c-60': '#f2638c',
+  'accent-b-c-65': '#f57398',
+  'accent-b-c-70': '#ff87a9',
+  'accent-b-c-80': '#fcb3c8',
+  'accent-b-c-85': '#ffc4d5',
+  'accent-b-c-90': '#ffd4e0',
+  'accent-b-c-95': '#ffe8ef',
+  'accent-d-35': '#6732b8',
+  'accent-d-40': '#753bcc',
+  'accent-d-45': '#864ae0',
+  'accent-d-50': '#8d4eed',
+  'accent-d-55': '#9b5ff5',
+  'accent-d-60': '#a974f7',
+  'accent-d-65': '#b587fa',
+  'accent-d-70': '#c299ff',
+  'accent-d-80': '#d6baff',
+  'accent-d-85': '#e0ccff',
+  'accent-d-90': '#e8d9ff',
+  'accent-d-95': '#f3ebff',
+  'accent-e-35': '#425902',
+  'accent-e-40': '#4c6605',
+  'accent-e-45': '#577309',
+  'accent-e-50': '#61800e',
+  'accent-e-55': '#6c8c14',
+  'accent-e-60': '#7da11b',
+  'accent-e-65': '#89ab2c',
+  'accent-e-70': '#9dba4c',
+  'accent-e-80': '#b5d166',
+  'accent-e-85': '#c7de8a',
+  'accent-e-90': '#d7e8a9',
+  'accent-e-95': '#eaf2d3',
+  'accent-f-35': '#942e03',
+  'accent-f-40': '#ad3907',
+  'accent-f-45': '#bd410b',
+  'accent-f-50': '#c44f14',
+  'accent-f-55': '#d95a1a',
+  'accent-f-60': '#f26722',
+  'accent-f-65': '#f7782f',
+  'accent-f-70': '#fc8d4c',
+  'accent-f-80': '#fcb88d',
+  'accent-f-85': '#fcc9a7',
+  'accent-f-90': '#ffd9bf',
+  'accent-f-95': '#ffeadb',
+  'accent-g-h-35': '#005c66',
+  'accent-g-h-40': '#006773',
+  'accent-g-h-45': '#017580',
+  'accent-g-h-50': '#01818c',
+  'accent-g-h-55': '#028e99',
+  'accent-g-h-60': '#04a4b0',
+  'accent-g-h-65': '#0bb2b8',
+  'accent-g-h-70': '#17c2c2',
+  'accent-g-h-80': '#4ad9d9',
+  'accent-g-h-85': '#84e3e3',
+  'accent-g-h-90': '#a9ebeb',
+  'accent-g-h-95': '#d5f5f5',
+  'accent-i-35': '#941b76',
+  'accent-i-40': '#a62686',
+  'accent-i-45': '#b53394',
+  'accent-i-50': '#c23ea1',
+  'accent-i-55': '#d649b3',
+  'accent-i-60': '#e85fc6',
+  'accent-i-65': '#f26dd1',
+  'accent-i-70': '#f582d8',
+  'accent-i-80': '#f7b0e5',
+  'accent-i-85': '#fac5ed',
+  'accent-i-90': '#ffd1f3',
+  'accent-i-95': '#ffe8f9',
+  'accent-j-35': '#484f7a',
+  'accent-j-40': '#545c8a',
+  'accent-j-45': '#5d6596',
+  'accent-j-50': '#6871a3',
+  'accent-j-55': '#767eb2',
+  'accent-j-60': '#868ec2',
+  'accent-j-65': '#959ccc',
+  'accent-j-70': '#a3aad6',
+  'accent-j-80': '#c1c6e8',
+  'accent-j-85': '#ced3f2',
+  'accent-j-90': '#d9defa',
+  'accent-j-95': '#ebedff',
+  'accent-k-35': '#075e39',
+  'accent-k-40': '#087041',
+  'accent-k-45': '#0b7b46',
+  'accent-k-50': '#0f874c',
+  'accent-k-55': '#169855',
+  'accent-k-60': '#21a65f',
+  'accent-k-65': '#36b26e',
+  'accent-k-70': '#4cbf7f',
+  'accent-k-80': '#75d9a0',
+  'accent-k-85': '#97e5b8',
+  'accent-k-90': '#b6edcc',
+  'accent-k-95': '#d4f5e1',
+  'blue-35': '#0051af',
+  'blue-40': '#0d5cbd',
+  'blue-45': '#1d69cc',
+  'blue-50': '#2774d9',
+  'blue-55': '#3e84e5',
+  'blue-60': '#5191f0',
+  'blue-65': '#649ef5',
+  'blue-70': '#7cadf7',
+  'blue-80': '#a3c8ff',
+  'blue-85': '#bad6ff',
+  'blue-90': '#cce1ff',
+  'blue-95': '#e3eeff',
+  'blue-98': '#f0f6ff',
+  'emerald-35': '#075e39',
+  'emerald-40': '#087041',
+  'emerald-45': '#0b7b46',
+  'emerald-50': '#0f874c',
+  'emerald-55': '#169855',
+  'emerald-60': '#21a65f',
+  'emerald-65': '#36b26e',
+  'emerald-70': '#4cbf7f',
+  'emerald-80': '#75d9a0',
+  'emerald-85': '#97e5b8',
+  'emerald-90': '#b6edcc',
+  'emerald-95': '#d4f5e1',
+  'green-35': '#1f5e06',
+  'green-40': '#266b0b',
+  'green-45': '#2b7a0c',
+  'green-50': '#398519',
+  'green-55': '#45991f',
+  'green-60': '#52a62b',
+  'green-65': '#5eb035',
+  'green-70': '#6bbf41',
+  'green-80': '#98d977',
+  'green-85': '#b0e396',
+  'green-90': '#c5ebb2',
+  'green-95': '#e0f5d5',
+  'info-35': '#6732b8',
+  'info-40': '#753bcc',
+  'info-45': '#864ae0',
+  'info-50': '#8d4eed',
+  'info-55': '#9b5ff5',
+  'info-60': '#a974f7',
+  'info-65': '#b587fa',
+  'info-70': '#c299ff',
+  'info-80': '#d6baff',
+  'info-85': '#e0ccff',
+  'info-90': '#e8d9ff',
+  'info-95': '#f3ebff',
+  'interact-35': '#0051af',
+  'interact-40': '#0d5cbd',
+  'interact-45': '#1d69cc',
+  'interact-50': '#2774d9',
+  'interact-55': '#3e84e5',
+  'interact-60': '#5191f0',
+  'interact-65': '#649ef5',
+  'interact-70': '#7cadf7',
+  'interact-80': '#a3c8ff',
+  'interact-85': '#bad6ff',
+  'interact-90': '#cce1ff',
+  'interact-95': '#e3eeff',
+  'interact-98': '#f0f6ff',
+  'lavender-35': '#3b47b2',
+  'lavender-40': '#4653c7',
+  'lavender-45': '#505ed9',
+  'lavender-50': '#5a68e5',
+  'lavender-55': '#6977f0',
+  'lavender-60': '#7d8aff',
+  'lavender-65': '#8a95ff',
+  'lavender-70': '#9ca6ff',
+  'lavender-80': '#bac1ff',
+  'lavender-85': '#ccd1ff',
+  'lavender-90': '#d9ddff',
+  'lavender-95': '#ebedff',
+  'light-blue-35': '#015788',
+  'light-blue-40': '#03639c',
+  'light-blue-45': '#0570ad',
+  'light-blue-50': '#087abd',
+  'light-blue-55': '#0d8bd4',
+  'light-blue-60': '#139beb',
+  'light-blue-65': '#23a8eb',
+  'light-blue-70': '#33bbf5',
+  'light-blue-80': '#6fd2fc',
+  'light-blue-85': '#9adffc',
+  'light-blue-90': '#b5e9ff',
+  'light-blue-95': '#d9f4ff',
+  'lime-35': '#425902',
+  'lime-40': '#4c6605',
+  'lime-45': '#577309',
+  'lime-50': '#61800e',
+  'lime-55': '#6c8c14',
+  'lime-60': '#7da11b',
+  'lime-65': '#89ab2c',
+  'lime-70': '#9dba4c',
+  'lime-80': '#b5d166',
+  'lime-85': '#c7de8a',
+  'lime-90': '#d7e8a9',
+  'lime-95': '#eaf2d3',
+  'magenta-35': '#941b76',
+  'magenta-40': '#a62686',
+  'magenta-45': '#b53394',
+  'magenta-50': '#c23ea1',
+  'magenta-55': '#d649b3',
+  'magenta-60': '#e85fc6',
+  'magenta-65': '#f26dd1',
+  'magenta-70': '#f582d8',
+  'magenta-80': '#f7b0e5',
+  'magenta-85': '#fac5ed',
+  'magenta-90': '#ffd1f3',
+  'magenta-95': '#ffe8f9',
+  'negative-35': '#a01d26',
+  'negative-40': '#b2242d',
+  'negative-45': '#cc2d37',
+  'negative-50': '#d93843',
+  'negative-55': '#eb4651',
+  'negative-60': '#fa5762',
+  'negative-65': '#ff6e72',
+  'negative-70': '#ff878b',
+  'negative-80': '#ffb2b5',
+  'negative-85': '#ffc7c9',
+  'negative-90': '#ffd4d5',
+  'negative-95': '#ffe8e9',
+  'neutral-0': '#000000',
+  'neutral-5': '#0f1214',
+  'neutral-15': '#23282e',
+  'neutral-25': '#373c42',
+  'neutral-35': '#464c54',
+  'neutral-40': '#596069',
+  'neutral-45': '#656c75',
+  'neutral-50': '#6f7680',
+  'neutral-55': '#7e868f',
+  'neutral-60': '#889099',
+  'neutral-65': '#979fa8',
+  'neutral-70': '#a7adb5',
+  'neutral-80': '#c1c6cc',
+  'neutral-85': '#d0d4d9',
+  'neutral-90': '#e1e4e8',
+  'neutral-95': '#f0f1f2',
+  'neutral-98': '#f7f7f7',
+  'neutral-100': '#ffffff',
+  'neutral-transparent': '#00000000',
+  'orange-35': '#942e03',
+  'orange-40': '#ad3907',
+  'orange-45': '#bd410b',
+  'orange-50': '#c44f14',
+  'orange-55': '#d95a1a',
+  'orange-60': '#f26722',
+  'orange-65': '#f7782f',
+  'orange-70': '#fc8d4c',
+  'orange-80': '#fcb88d',
+  'orange-85': '#fcc9a7',
+  'orange-90': '#ffd9bf',
+  'orange-95': '#ffeadb',
+  'pink-35': '#991d53',
+  'pink-40': '#b02863',
+  'pink-45': '#c2306f',
+  'pink-50': '#cf3a7a',
+  'pink-55': '#e3447c',
+  'pink-60': '#f2638c',
+  'pink-65': '#f57398',
+  'pink-70': '#ff87a9',
+  'pink-80': '#fcb3c8',
+  'pink-85': '#ffc4d5',
+  'pink-90': '#ffd4e0',
+  'pink-95': '#ffe8ef',
+  'positive-35': '#015788',
+  'positive-40': '#03639c',
+  'positive-45': '#0570ad',
+  'positive-50': '#087abd',
+  'positive-55': '#0d8bd4',
+  'positive-60': '#139beb',
+  'positive-65': '#23a8eb',
+  'positive-70': '#33bbf5',
+  'positive-80': '#6fd2fc',
+  'positive-85': '#9adffc',
+  'positive-90': '#b5e9ff',
+  'positive-95': '#d9f4ff',
+  'purple-35': '#6732b8',
+  'purple-40': '#753bcc',
+  'purple-45': '#864ae0',
+  'purple-50': '#8d4eed',
+  'purple-55': '#9b5ff5',
+  'purple-60': '#a974f7',
+  'purple-65': '#b587fa',
+  'purple-70': '#c299ff',
+  'purple-80': '#d6baff',
+  'purple-85': '#e0ccff',
+  'purple-90': '#e8d9ff',
+  'purple-95': '#f3ebff',
+  'red-35': '#a01d26',
+  'red-40': '#b2242d',
+  'red-45': '#cc2d37',
+  'red-50': '#d93843',
+  'red-55': '#eb4651',
+  'red-60': '#fa5762',
+  'red-65': '#ff6e72',
+  'red-70': '#ff878b',
+  'red-80': '#ffb2b5',
+  'red-85': '#ffc7c9',
+  'red-90': '#ffd4d5',
+  'red-95': '#ffe8e9',
+  'severe-warning-35': '#942e03',
+  'severe-warning-40': '#ad3907',
+  'severe-warning-45': '#bd410b',
+  'severe-warning-50': '#c44f14',
+  'severe-warning-55': '#d95a1a',
+  'severe-warning-60': '#f26722',
+  'severe-warning-65': '#f7782f',
+  'severe-warning-70': '#fc8d4c',
+  'severe-warning-80': '#fcb88d',
+  'severe-warning-85': '#fcc9a7',
+  'severe-warning-90': '#ffd9bf',
+  'severe-warning-95': '#ffeadb',
+  'sky-blue-35': '#005980',
+  'sky-blue-40': '#006691',
+  'sky-blue-45': '#0274a1',
+  'sky-blue-50': '#027fb0',
+  'sky-blue-55': '#028ec2',
+  'sky-blue-60': '#049fd9',
+  'sky-blue-65': '#09abe8',
+  'sky-blue-70': '#14bdfa',
+  'sky-blue-80': '#5ed4ff',
+  'sky-blue-85': '#8ce0ff',
+  'sky-blue-90': '#ade9ff',
+  'sky-blue-95': '#d4f3ff',
+  'slate-35': '#484f7a',
+  'slate-40': '#545c8a',
+  'slate-45': '#5d6596',
+  'slate-50': '#6871a3',
+  'slate-55': '#767eb2',
+  'slate-60': '#868ec2',
+  'slate-65': '#959ccc',
+  'slate-70': '#a3aad6',
+  'slate-80': '#c1c6e8',
+  'slate-85': '#ced3f2',
+  'slate-90': '#d9defa',
+  'slate-95': '#ebedff',
+  'teal-35': '#005c66',
+  'teal-40': '#006773',
+  'teal-45': '#017580',
+  'teal-50': '#01818c',
+  'teal-55': '#028e99',
+  'teal-60': '#04a4b0',
+  'teal-65': '#0bb2b8',
+  'teal-70': '#17c2c2',
+  'teal-80': '#4ad9d9',
+  'teal-85': '#84e3e3',
+  'teal-90': '#a9ebeb',
+  'teal-95': '#d5f5f5',
+  'warning-35': '#804103',
+  'warning-40': '#944b03',
+  'warning-45': '#a65503',
+  'warning-50': '#b05f04',
+  'warning-55': '#bd7202',
+  'warning-60': '#cc8604',
+  'warning-65': '#d6900d',
+  'warning-70': '#e0a419',
+  'warning-80': '#f0c243',
+  'warning-85': '#f2d268',
+  'warning-90': '#f5e08e',
+  'warning-95': '#faefb9',
+  'yellow-35': '#804103',
+  'yellow-40': '#944b03',
+  'yellow-45': '#a65503',
+  'yellow-50': '#b05f04',
+  'yellow-55': '#bd7202',
+  'yellow-60': '#cc8604',
+  'yellow-65': '#d6900d',
+  'yellow-70': '#e0a419',
+  'yellow-80': '#f0c243',
+  'yellow-85': '#f2d268',
+  'yellow-90': '#f5e08e',
+  'yellow-95': '#faefb9'
+};
+exports["default"] = _default;

package/splunk-magnetic/magneticTokensDark.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+/*
+ * Only add official magnetic colors here, any other customizations
+ * should be added in `packages/themes/src/splunk-magnetic/index.ts` file
+ */
 var _default = {
   'brand-bg-default': '#373c42',
   'brand-bg-hover': '#373c42',

package/splunk-magnetic/magneticTokensLight.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+/*
+ * Only add official magnetic colors here, any other customizations
+ * should be added in `packages/themes/src/splunk-magnetic/index.ts` file
+ */
 var _default = {
   'brand-bg-default': '#373c42',
   'brand-bg-hover': '#373c42',

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

@@ -12,8 +12,7 @@ var _constants = require("./constants");
 var _themeOptions = require("./themeOptions");
 var _themes = require("./themes");
 var _util = require("./util");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 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); }
@@ -37,22 +36,32 @@ 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 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",
     tooltip: function tooltip() {
       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'];
         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), ['both']).map(function (themeValue) {
+          links: [].concat(_toConsumableArray(themeOptionValues.values), dualThemeOptions).map(function (themeValue) {
             var active = currentTheme[themeOptionKey] === themeValue;
             return {
               active: active,

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CHANGED = exports.SET = exports.CONFIGURE = exports.UPDATE = exports.PARAM_KEY = exports.ADDON_ID = void 0;
+exports.CHANGED = exports.SET = exports.CONFIGURE = exports.UPDATE = exports.DISABLE_DUAL_THEME_KEY = exports.PARAM_KEY = exports.ADDON_ID = void 0;
 var ADDON_ID = '@splunk/themes';
 exports.ADDON_ID = ADDON_ID;
 var PARAM_KEY = 'splunkThemes';
 exports.PARAM_KEY = PARAM_KEY;
+var DISABLE_DUAL_THEME_KEY = 'disableDualTheme';
+exports.DISABLE_DUAL_THEME_KEY = DISABLE_DUAL_THEME_KEY;
 var UPDATE = "".concat(ADDON_ID, "/update");
 exports.UPDATE = UPDATE;
 var CONFIGURE = "".concat(ADDON_ID, "/configure");

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

@@ -16,8 +16,7 @@ var _themeOptions = require("./themeOptions");
 var _themes = require("./themes");
 var _util = require("./util");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -91,7 +90,7 @@ var WithSplunkTheme = function WithSplunkTheme(Story, context) {
   var themeProviderProps = _objectSpread(_objectSpread({}, cleanedThemeProviderProps), {}, {
     customizeTheme: (args === null || args === void 0 ? void 0 : args.withSplunkMagneticThemeCustomizer) ? _splunkMagnetic["default"] : undefined
   });
-  if (dualThemeOption != null && currentTheme[dualThemeOption] === 'both') {
+  if (!parameters.disableDualTheme && dualThemeOption != null && currentTheme[dualThemeOption] === 'both') {
     return /*#__PURE__*/_react["default"].createElement(DualStory, {
       context: context,
       themeOption: dualThemeOption,