@splunk/themes 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,9 +1,15 @@
 Change Log
 ============
 
+0.22.0 - October 1, 2024
+----------
+New Features:
+* New Status Color tokens for weak and strong variants (SUI-6348).
+* `@splunk/themes/storybook-addon-splunk-themes` now supports showing both versions of a single theme setting side by side (SUI-6281).
+
 0.21.0 - August 26, 2024
 ----------
-New Features: 
+New Features:
 * Prisma `focusColor` transparency removed to increase contrast and meet accessibility requirements (SUI-6519).
 
 0.20.0 - August 7, 2024

package/enterprise/dark.js

@@ -35,6 +35,33 @@ var dark = {
   focusShadowInset: "inset 0 0 1px 1px ".concat(_light["default"].gray25, ", inset 0 0 0 3px ").concat(_light["default"].focusColor),
   draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
 };
+/**
+ * ## Status colors
+ * Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
+ *
+ * @colorSet verbose
+ */
+
+var statusColors = {
+  statusColorInfo: _light["default"].infoColorL10,
+  statusColorInfoWeak: _light["default"].infoColor,
+  statusColorInfoStrong: _light["default"].infoColorL20,
+  statusColorNormal: _light["default"].successColorL10,
+  statusColorNormalWeak: _light["default"].successColor,
+  statusColorNormalStrong: _light["default"].successColorL20,
+  statusColorLow: _light["default"].warningColorL10,
+  statusColorLowWeak: _light["default"].warningColor,
+  statusColorLowStrong: _light["default"].warningColorL20,
+  statusColorMedium: _light["default"].alertColorL10,
+  statusColorMediumWeak: _light["default"].alertColor,
+  statusColorMediumStrong: _light["default"].alertColorL20,
+  statusColorHigh: _light["default"].errorColorL10,
+  statusColorHighWeak: _light["default"].errorColor,
+  statusColorHighStrong: _light["default"].errorColorL20,
+  statusColorCritical: _light["default"].errorColorD20,
+  statusColorCriticalWeak: _light["default"].errorColorD30,
+  statusColorCriticalStrong: _light["default"].errorColorD10
+};
 /**
  * ## Syntax colors
  * Syntax colors are used only for code blocks.
@@ -63,7 +90,7 @@ var bordersInteractive = {
   activeBorder: "".concat(dark.borderActiveColor, " double")
 };
 
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), syntaxColors), bordersInteractive), {}, {
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), statusColors), syntaxColors), bordersInteractive), {}, {
   borderLightColor: _light["default"].gray60 // @deprecated, SUI-5981
 
 });

package/enterprise/light.js

@@ -273,6 +273,33 @@ var usageColors = {
   backgroundColor: grays.white,
   transparent: 'transparent'
 };
+/**
+ * ## Status colors
+ * Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
+ *
+ * @colorSet verbose
+ */
+
+var statusColors = {
+  statusColorInfo: infoColors.infoColorL10,
+  statusColorInfoWeak: infoColors.infoColorL20,
+  statusColorInfoStrong: infoColors.infoColor,
+  statusColorNormal: successColors.successColorL10,
+  statusColorNormalWeak: successColors.successColorL20,
+  statusColorNormalStrong: successColors.successColor,
+  statusColorLow: warningColors.warningColorL10,
+  statusColorLowWeak: warningColors.warningColorL20,
+  statusColorLowStrong: warningColors.warningColor,
+  statusColorMedium: alertColors.alertColorL10,
+  statusColorMediumWeak: alertColors.alertColorL20,
+  statusColorMediumStrong: alertColors.alertColor,
+  statusColorHigh: errorColors.errorColorL10,
+  statusColorHighWeak: errorColors.errorColorL20,
+  statusColorHighStrong: errorColors.errorColor,
+  statusColorCritical: errorColors.errorColorD20,
+  statusColorCriticalWeak: errorColors.errorColorD30,
+  statusColorCriticalStrong: errorColors.errorColorD10
+};
 /**
  * ## Syntax colors
  * The following colors should only be used for syntax coloring of code.
@@ -378,7 +405,7 @@ var zindexes = {
   zindexToastMessages: 2000
 };
 
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), bordersInteractive), borders), zindexes), {}, {
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), statusColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), bordersInteractive), borders), zindexes), {}, {
   borderLightColor: grays.gray92 // @deprecated SUI-5981
 
 });

package/enterprise/prismaAliases.js

@@ -61,12 +61,6 @@ function createPrismaAliases(_ref) {
     accentColorWarning: cs.warningColor,
     accentColorAlert: cs.alertColor,
     accentColorNegative: cs.errorColor,
-    statusColorInfo: cs.infoColorL10,
-    statusColorNormal: cs.successColorL10,
-    statusColorLow: cs.warningColorL10,
-    statusColorMedium: cs.alertColorL10,
-    statusColorHigh: cs.errorColorL10,
-    statusColorCritical: cs.errorColorD20,
     embossShadow: cs.overlayShadow,
     dragShadow: cs.overlayShadow,
     modalShadow: cs.overlayShadow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "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",

package/prisma/dark.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -79,33 +83,45 @@ var neutralColors = {
   neutral500: '#acacad',
   white: '#ffffff'
 };
-/**
- * ## Accent colors
- * Accent colors aid and categorize the visual communication of the system response.
- *
- * @colorSet verbose
- */
-
-var accentColors = {
-  accentColorPositive: '#85f415',
-  accentColorWarning: '#f49106',
-  accentColorAlert: '#f0581f',
-  accentColorNegative: '#ff4242'
-};
 /**
  * ## Status colors
- * Status colors are reserved for communicating urgency and severity associated with data objects.
+ * Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
  *
  * @colorSet verbose
  */
 
 var 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',
-  statusColorCritical: '#ff3361'
+  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()
+};
+/**
+ * ## Accent colors
+ * Accent colors aid and categorize the visual communication of the system response.
+ *
+ * @colorSet verbose
+ */
+
+var accentColors = {
+  accentColorPositive: statusColors.statusColorNormal,
+  accentColorWarning: statusColors.statusColorMedium,
+  accentColorAlert: '#f0581f',
+  accentColorNegative: statusColors.statusColorHigh
 };
 /**
  * ## Elevation shadows

package/prisma/light.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -79,33 +83,45 @@ var neutralColors = {
   neutral500: '#b8b8b8',
   black: '#000000'
 };
-/**
- * ## Accent colors
- * Accent colors aid and categorize the visual communication of the system response.
- *
- * @colorSet verbose
- */
-
-var accentColors = {
-  accentColorPositive: '#407a06',
-  accentColorWarning: '#c97705',
-  accentColorAlert: '#c6400d',
-  accentColorNegative: '#e00000'
-};
 /**
  * ## Status colors
- * Status colors are reserved for communicating urgency and severity associated with data objects.
+ * Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
  *
  * @colorSet verbose
  */
 
 var 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',
-  statusColorCritical: '#9e1534'
+  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()
+};
+/**
+ * ## Accent colors
+ * Accent colors aid and categorize the visual communication of the system response.
+ *
+ * @colorSet verbose
+ */
+
+var accentColors = {
+  accentColorPositive: statusColors.statusColorNormal,
+  accentColorWarning: statusColors.statusColorMedium,
+  accentColorAlert: '#c6400d',
+  accentColorNegative: statusColors.statusColorHigh
 };
 /**
  * ## Elevation shadows

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SplunkThemesTool = exports.themeOptions = void 0;
+exports.SplunkThemesTool = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,6 +15,8 @@ var _components = require("@storybook/components");
 
 var _constants = require("./constants");
 
+var _themeOptions = require("./themeOptions");
+
 var _themes = require("./themes");
 
 var _util = require("./util");
@@ -23,9 +25,13 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -41,21 +47,6 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var themeOptions = {
-  family: {
-    name: 'Family',
-    values: ['prisma', 'enterprise']
-  },
-  colorScheme: {
-    name: 'Color Scheme',
-    values: ['light', 'dark']
-  },
-  density: {
-    name: 'Density',
-    values: ['compact', 'comfortable']
-  }
-};
-exports.themeOptions = themeOptions;
 var SplunkThemesTool = /*#__PURE__*/(0, _react.memo)(function () {
   var _React$useState = _react["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -68,21 +59,22 @@ var SplunkThemesTool = /*#__PURE__*/(0, _react.memo)(function () {
       updateGlobals = _useGlobals2[1];
 
   var params = (0, _managerApi.useParameter)(_constants.PARAM_KEY, {});
-  var globalsTheme = globals[_constants.PARAM_KEY];
+  var globalsTheme = globals[_constants.PARAM_KEY] || undefined;
   var currentTheme = (0, _util.normalizeThemeOptions)(params, globalsTheme);
   var updateTheme = (0, _react.useCallback)(function (newTheme) {
-    updateGlobals(_defineProperty({}, _constants.PARAM_KEY, _objectSpread(_objectSpread({}, globals[_constants.PARAM_KEY]), newTheme)));
-  }, [globals, updateGlobals]);
+    var mergedTheme = (0, _util.getMergedTheme)(globalsTheme, newTheme);
+    updateGlobals(_defineProperty({}, _constants.PARAM_KEY, mergedTheme));
+  }, [globalsTheme, updateGlobals]);
   return /*#__PURE__*/_react["default"].createElement(_components.WithTooltip, {
     placement: "top",
     trigger: "click",
     tooltip: function tooltip() {
-      return Object.keys(themeOptions).map(function (themeOptionKey) {
-        var themeOptionValues = themeOptions[themeOptionKey];
+      return Object.keys(_themeOptions.themeOptions).map(function (themeOptionKey) {
+        var themeOptionValues = _themeOptions.themeOptions[themeOptionKey];
         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: themeOptionValues.values.map(function (themeValue) {
+          links: [].concat(_toConsumableArray(themeOptionValues.values), ['both']).map(function (themeValue) {
             var active = currentTheme[themeOptionKey] === themeValue;
             return {
               active: active,

package/storybook-addon-splunk-themes/tests/util.unit.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _util = require("../util");
+
+describe('getMergedTheme', function () {
+  // Storybook will set "null" for "globalsTheme" in some situtations so we need to validate that this doesn't throw
+  it('should not throw if globalsTheme is null', function () {
+    expect((0, _util.getMergedTheme)(null, {})).toStrictEqual({});
+  });
+  it('should merge two different keys correctly', function () {
+    expect((0, _util.getMergedTheme)({
+      density: 'compact'
+    }, {
+      colorScheme: 'dark'
+    })).toStrictEqual({
+      colorScheme: 'dark',
+      density: 'compact'
+    });
+  });
+  it('should merge the same key correctly', function () {
+    expect((0, _util.getMergedTheme)({
+      density: 'compact'
+    }, {
+      density: 'comfortable'
+    })).toStrictEqual({
+      density: 'comfortable'
+    });
+  });
+  it('should pass through properties that only exist on one side of the merge', function () {
+    expect((0, _util.getMergedTheme)({
+      density: 'compact'
+    }, {
+      colorScheme: 'dark',
+      density: 'comfortable'
+    })).toStrictEqual({
+      colorScheme: 'dark',
+      density: 'comfortable'
+    });
+  });
+  it('should pass through "both"', function () {
+    expect((0, _util.getMergedTheme)({
+      density: 'compact'
+    }, {
+      colorScheme: 'both',
+      density: 'comfortable'
+    })).toStrictEqual({
+      colorScheme: 'both',
+      density: 'comfortable'
+    });
+  });
+  it('should reset values "both" in globalsTheme to its default if the new theme has "both"', function () {
+    expect((0, _util.getMergedTheme)({
+      density: 'both',
+      family: 'prisma'
+    }, {
+      colorScheme: 'both'
+    })).toStrictEqual({
+      colorScheme: 'both',
+      density: 'comfortable',
+      family: 'prisma'
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isThemeOptionKey = isThemeOptionKey;
+exports.themeOptions = exports.themeOptionsKeys = void 0;
+var themeOptionsKeys = ['family', 'colorScheme', 'density'];
+exports.themeOptionsKeys = themeOptionsKeys;
+var themeOptions = {
+  family: {
+    name: 'family',
+    values: ['prisma', 'enterprise']
+  },
+  colorScheme: {
+    name: 'colorScheme',
+    values: ['dark', 'light']
+  },
+  density: {
+    name: 'density',
+    values: ['comfortable', 'compact']
+  }
+};
+exports.themeOptions = themeOptions;
+
+function isThemeOptionKey(key) {
+  return themeOptionsKeys.includes(key);
+}

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

@@ -3,10 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getThemeOptionsFromContext = exports.normalizeThemeOptions = void 0;
+exports.getThemeOptionsFromContext = exports.getMergedTheme = exports.normalizeThemeOptions = void 0;
 
 var _constants = require("./constants");
 
+var _themeOptions = require("./themeOptions");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -17,10 +31,51 @@ var normalizeThemeOptions = function normalizeThemeOptions() {
   var paramOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var globalOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return _objectSpread(_objectSpread({}, paramOptions), globalOptions);
-};
+}; // merge the existing theme with the newly selected theme
+// this functon only allows the most recently-selectd "both" option to persist
+// because allowing more than one "both" leads to an unwieldy visualization
+
 
 exports.normalizeThemeOptions = normalizeThemeOptions;
 
+var getMergedTheme = function getMergedTheme(globalsTheme, newTheme) {
+  var firstBothEntry = Object.entries(newTheme).find(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        value = _ref2[1];
+
+    return value === 'both';
+  });
+
+  var _ref3 = firstBothEntry || [],
+      _ref4 = _slicedToArray(_ref3, 1),
+      firstBothOption = _ref4[0];
+
+  var finalValue; // only allow "both" for a single theme setting; if a new one is passed, remove the old one
+
+  var mergedTheme = Object.entries(_themeOptions.themeOptions).reduce(function (themeAccum, _ref5) {
+    var _ref6 = _slicedToArray(_ref5, 1),
+        key = _ref6[0];
+
+    if ((0, _themeOptions.isThemeOptionKey)(key)) {
+      if ((globalsTheme === null || globalsTheme === void 0 ? void 0 : globalsTheme[key]) === 'both' && firstBothOption != null && key !== firstBothOption) {
+        var defaultThemeOptionValue = _themeOptions.themeOptions[key].values[0];
+        finalValue = defaultThemeOptionValue;
+      } else {
+        finalValue = newTheme[key] || (globalsTheme === null || globalsTheme === void 0 ? void 0 : globalsTheme[key]);
+      }
+
+      if (finalValue != null) {
+        return _objectSpread(_objectSpread({}, themeAccum), {}, _defineProperty({}, key, finalValue));
+      }
+    }
+
+    return themeAccum;
+  }, {});
+  return mergedTheme;
+};
+
+exports.getMergedTheme = getMergedTheme;
+
 var getThemeOptionsFromContext = function getThemeOptionsFromContext(context) {
   var globals = context.globals,
       parameters = context.parameters;

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

@@ -1,29 +1,139 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withSplunkTheme = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _SplunkThemeProvider = _interopRequireDefault(require("../SplunkThemeProvider"));
 
+var _variables = _interopRequireDefault(require("../variables"));
+
 var _constants = require("./constants");
 
 var _themes = require("./themes");
 
+var _themeOptions = require("./themeOptions");
+
 var _util = require("./util");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", ";\n    flex-direction: column;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n    background-color: ", ";\n    padding: ", ";\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StoryWrapper = _styledComponents["default"].div(_templateObject(), _variables["default"].backgroundColorPage, _variables["default"].spacingLarge);
+
+var DualStoryContainer = _styledComponents["default"].div(_templateObject2(), _variables["default"].spacingLarge);
+
+// Renders a story twice side-by-side in two separate color schemes
+var DualStory = function DualStory(_ref) {
+  var _children$props;
+
+  var children = _ref.children,
+      context = _ref.context,
+      themeOption = _ref.themeOption,
+      themeProviderProps = _ref.themeProviderProps;
+
+  if ( /*#__PURE__*/(0, _react.isValidElement)(children) && (children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.componentId)) {
+    var _themeOptions$themeOp;
+
+    var themeOptionValues = ((_themeOptions$themeOp = _themeOptions.themeOptions[themeOption]) === null || _themeOptions$themeOp === void 0 ? void 0 : _themeOptions$themeOp.values) || [];
+    return /*#__PURE__*/_react["default"].createElement(DualStoryContainer, null, themeOptionValues.map(function (themeOptionValue) {
+      return /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], _extends({
+        key: themeOptionValue
+      }, themeProviderProps, _defineProperty({}, themeOption, themeOptionValue)), /*#__PURE__*/_react["default"].createElement(StoryWrapper, null, children.props.undecoratedStoryFn(context)));
+    }));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+};
+
 var WithSplunkTheme = function WithSplunkTheme(Story, context) {
   var globals = context.globals,
       parameters = context.parameters;
   var globalsTheme = globals[_constants.PARAM_KEY];
   var themesConfig = parameters[_constants.PARAM_KEY];
   var currentTheme = (0, _util.normalizeThemeOptions)(themesConfig, globalsTheme);
-  return /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], currentTheme, /*#__PURE__*/_react["default"].createElement(_themes.GlobalStyles, null), /*#__PURE__*/_react["default"].createElement(Story, context));
+  var dualThemeOption = null; // ideally fromPairs would be fromEntries but our ES2015 target doesn't allow this
+
+  var cleanedThemeProviderProps = (0, _lodash.fromPairs)(Object.entries(currentTheme).filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    if ((0, _themeOptions.isThemeOptionKey)(key) && value === 'both') {
+      dualThemeOption = key;
+      return false;
+    }
+
+    return true;
+  }));
+
+  var themeProviderProps = _objectSpread({}, cleanedThemeProviderProps);
+
+  if (dualThemeOption != null && currentTheme[dualThemeOption] === 'both') {
+    return /*#__PURE__*/_react["default"].createElement(DualStory, {
+      context: context,
+      themeOption: dualThemeOption,
+      themeProviderProps: cleanedThemeProviderProps
+    }, /*#__PURE__*/_react["default"].createElement(Story, context));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], _extends({}, cleanedThemeProviderProps, {
+    colorScheme: themeProviderProps.colorScheme
+  }), /*#__PURE__*/_react["default"].createElement(_themes.GlobalStyles, null), /*#__PURE__*/_react["default"].createElement(Story, context));
 };
 
 var withSplunkTheme = WithSplunkTheme;

package/types/enterprise/dark.d.ts

@@ -10,6 +10,24 @@ declare const theme: {
     syntaxPurple: string;
     syntaxRed: string;
     syntaxTeal: string;
+    statusColorInfo: string;
+    statusColorInfoWeak: string;
+    statusColorInfoStrong: string;
+    statusColorNormal: string;
+    statusColorNormalWeak: string;
+    statusColorNormalStrong: string;
+    statusColorLow: string;
+    statusColorLowWeak: string;
+    statusColorLowStrong: string;
+    statusColorMedium: string;
+    statusColorMediumWeak: string;
+    statusColorMediumStrong: string;
+    statusColorHigh: string;
+    statusColorHighWeak: string;
+    statusColorHighStrong: string;
+    statusColorCritical: string;
+    statusColorCriticalWeak: string;
+    statusColorCriticalStrong: string;
     backgroundColor: string;
     backgroundColorHover: string;
     borderColor: string;

package/types/enterprise/light.d.ts

@@ -48,6 +48,24 @@ declare const theme: {
     syntaxRed: string;
     syntaxRedLight: string;
     syntaxTeal: string;
+    statusColorInfo: string;
+    statusColorInfoWeak: string;
+    statusColorInfoStrong: string;
+    statusColorNormal: string;
+    statusColorNormalWeak: string;
+    statusColorNormalStrong: string;
+    statusColorLow: string;
+    statusColorLowWeak: string;
+    statusColorLowStrong: string;
+    statusColorMedium: string;
+    statusColorMediumWeak: string;
+    statusColorMediumStrong: string;
+    statusColorHigh: string;
+    statusColorHighWeak: string;
+    statusColorHighStrong: string;
+    statusColorCritical: string;
+    statusColorCriticalWeak: string;
+    statusColorCriticalStrong: string;
     diverging1ColorA: string;
     diverging1ColorB: string;
     diverging2ColorA: string;

package/types/enterprise/prismaAliases.d.ts

@@ -7,12 +7,6 @@ declare function createPrismaAliases({ colorScheme, density, }: {
     accentColorWarning: string;
     accentColorAlert: string;
     accentColorNegative: string;
-    statusColorInfo: string;
-    statusColorNormal: string;
-    statusColorLow: string;
-    statusColorMedium: string;
-    statusColorHigh: string;
-    statusColorCritical: string;
     embossShadow: string;
     dragShadow: string;
     modalShadow: string;

package/types/prisma/dark.d.ts

@@ -1,9 +1,3 @@
-/**
- * ## Background colors
- * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
- *
- * @colorSet verbose
- */
 declare const theme: {
     syntaxBlue: string;
     syntaxBrown: string;
@@ -50,11 +44,23 @@ declare const theme: {
     dragShadow: string;
     modalShadow: string;
     statusColorInfo: string;
+    statusColorInfoWeak: string;
+    statusColorInfoStrong: string;
     statusColorNormal: string;
+    statusColorNormalWeak: string;
+    statusColorNormalStrong: string;
     statusColorLow: string;
+    statusColorLowWeak: string;
+    statusColorLowStrong: string;
     statusColorMedium: string;
+    statusColorMediumWeak: string;
+    statusColorMediumStrong: string;
     statusColorHigh: string;
+    statusColorHighWeak: string;
+    statusColorHighStrong: string;
     statusColorCritical: string;
+    statusColorCriticalWeak: string;
+    statusColorCriticalStrong: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;

package/types/prisma/light.d.ts

@@ -1,9 +1,3 @@
-/**
- * ## Background colors
- * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
- *
- * @colorSet verbose
- */
 declare const theme: {
     syntaxBlue: string;
     syntaxBrown: string;
@@ -50,11 +44,23 @@ declare const theme: {
     dragShadow: string;
     modalShadow: string;
     statusColorInfo: string;
+    statusColorInfoWeak: string;
+    statusColorInfoStrong: string;
     statusColorNormal: string;
+    statusColorNormalWeak: string;
+    statusColorNormalStrong: string;
     statusColorLow: string;
+    statusColorLowWeak: string;
+    statusColorLowStrong: string;
     statusColorMedium: string;
+    statusColorMediumWeak: string;
+    statusColorMediumStrong: string;
     statusColorHigh: string;
+    statusColorHighWeak: string;
+    statusColorHighStrong: string;
     statusColorCritical: string;
+    statusColorCriticalWeak: string;
+    statusColorCriticalStrong: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;

package/types/storybook-addon-splunk-themes/SplunkThemesTool.d.ts

@@ -1,10 +1,2 @@
 import React from 'react';
-import { ThemeSettings } from '../types';
-type ThemeOption = {
-    name: string;
-    values: string[];
-};
-type ThemeOptions = Pick<Record<keyof ThemeSettings, ThemeOption>, 'family' | 'colorScheme' | 'density'>;
-export declare const themeOptions: ThemeOptions;
 export declare const SplunkThemesTool: React.MemoExoticComponent<() => JSX.Element>;
-export {};

package/types/storybook-addon-splunk-themes/tests/util.unit.d.ts

@@ -0,0 +1 @@
+export {};

package/types/storybook-addon-splunk-themes/themeOptions.d.ts

@@ -0,0 +1,11 @@
+import { ThemeSettings } from '../types';
+export declare const themeOptionsKeys: readonly ["family", "colorScheme", "density"];
+export type ThemeOptionKeys = typeof themeOptionsKeys[number];
+type ThemeOption = {
+    name: ThemeOptionKeys;
+    values: string[];
+};
+export type ThemeOptions = Pick<Record<keyof ThemeSettings, ThemeOption>, ThemeOptionKeys>;
+export declare const themeOptions: ThemeOptions;
+export declare function isThemeOptionKey(key: string): key is ThemeOptionKeys;
+export {};

package/types/storybook-addon-splunk-themes/util.d.ts

@@ -1,4 +1,11 @@
 import { StoryContext } from '@storybook/types';
 import { ThemeSettings } from '../types';
-export declare const normalizeThemeOptions: (paramOptions?: {}, globalOptions?: {}) => Partial<ThemeSettings>;
-export declare const getThemeOptionsFromContext: (context: StoryContext) => Partial<ThemeSettings>;
+import { ThemeOptionKeys } from './themeOptions';
+export interface ExtendedThemeSettings extends Omit<Pick<ThemeSettings, ThemeOptionKeys>, ThemeOptionKeys> {
+    colorScheme: ThemeSettings['colorScheme'] | 'both';
+    density: ThemeSettings['density'] | 'both';
+    family: ThemeSettings['family'] | 'both';
+}
+export declare const normalizeThemeOptions: (paramOptions?: {}, globalOptions?: {}) => Partial<ExtendedThemeSettings>;
+export declare const getMergedTheme: (globalsTheme: Partial<ExtendedThemeSettings> | undefined | null, newTheme: Partial<ExtendedThemeSettings>) => {};
+export declare const getThemeOptionsFromContext: (context: StoryContext) => Partial<ExtendedThemeSettings>;