@splunk/themes 0.7.0 → 0.10.0

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 Change Log
 ============
 
+0.10.0 - February 23, 2022
+----------
+New Features:
+* Utility variables, `isPrisma`, `isEnterprise`, `isComfortable`, `isCompact`, `isDark`, and `isLight`, added to `useSplunkTheme()` and `withSplunkTheme()` (SUI-2376).
+
+0.9.0 - September 8, 2021
+----------
+API Changes:
+* Prisma content colors no longer use transparency (SUI-2688).
+
+0.8.0 - March 31, 2021
+----------
+New Features:
+* New variable `backgroundColorDialog`.
+* New Storybook Add-on, `@splunk/themes/storybook-addon-splunk-themes`.
+
+API Changes:
+* `backgroundColorModal` has been removed. Instead, use the new variable `backgroundColorDialog`.
+
+Bug Fixes:
+* Enterprise `draggable` and `draggableDark` assets updated to improve contrast (SUI-2494).
+
 0.7.0 - February 4, 2021
 ----------
 

package/enterprise/dark.js

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-var dragHandleDark = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAAW5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOnN1YmplY3Q+CiAgICAgICAgICAgIDxyZGY6QmFnLz4KICAgICAgICAgPC9kYzpzdWJqZWN0PgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K72CKvQAAADdJREFUOBFj/PDp00cGJCDAx8ePxGUgJM+ErJgc9sAbQI6rh5seRkLxTEh+4KORYhcMtzglxz8AtKEQD3hiWXMAAAAASUVORK5CYII="; // see babel-plugin-base64-png
+var dragHandleDark = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA1SURBVHgB7dKhEQAgDAPAhHmwSKZHYtmHVtZVVNTkXS53UeG57yPYazLmrB8o6h8QgPqBOAOboRAPJUGIOAAAAABJRU5ErkJggg=="; // see babel-plugin-base64-png
 
 var dark = {
   backgroundColor: _light["default"].gray20,

package/enterprise/light.js

@@ -11,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-var dragHandle = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAG0lEQVR4AWMAgioUjAoIyg9xAxBgFIymg1EAAD/iHoHfZJ8OAAAAAElFTkSuQmCC"; // see babel-plugin-base64-pngimport {
+var dragHandle = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA2SURBVHgB7dKhEQAgDAPAhDnxDMAcDIBnT1pZV1FRk3e53EWFc+2P4N3DmLN+oKh/QADqB+IMUKEQD/CeueAAAAAASUVORK5CYII="; // see babel-plugin-base64-pngimport {
 
 /**
  * # Brand Colors

package/enterprise/prismaAliases.js

@@ -36,6 +36,23 @@ function createPrismaAliases(_ref) {
    *
    * They cover all values except most `interactiveColor*` variables.
    *
+   *
+   * For example, use
+   *  ``` css
+   *  const myClickable = styled(Clickable)`
+   *      color: ${variables.contentColorDefault};
+   *  }
+   *  ```
+   * instead of
+   *  ``` css
+   *  const myClickable = styled(Clickable)`
+   *      color: ${pick({
+   *          enterprise: variables.textColor;
+   *          prisma: variables.contentColorDefault;
+   *      })};
+   *  }
+   *  ```
+   *
    * @valueSet
    */
 
@@ -59,7 +76,7 @@ function createPrismaAliases(_ref) {
     backgroundColorPage: cs.backgroundColor,
     backgroundColorNavigation: cs.backgroundColor,
     backgroundColorFloating: cs.backgroundColor,
-    backgroundColorModal: cs.backgroundColor,
+    backgroundColorDialog: cs.backgroundColor,
     backgroundColorScrim: (0, _tinycolor["default"])(cs.gray30).setAlpha(0.8).toRgbString(),
     contentColorActive: cs.textColor,
     contentColorDefault: cs.textColor,

package/getTheme.js

@@ -41,6 +41,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @param {'prisma' | 'enterprise'} [options.family = 'prisma']
  * @param {'dark' | 'light'} [options.colorScheme = 'dark']
  * @param {'comfortable' | 'compact'} [options.density = 'comfortable']
+ * @param {Boolean} [options.isPrisma = true]
+ * @param {Boolean} [options.isEnterprise = false]
+ * @param {Boolean} [options.isComfortable = true]
+ * @param {Boolean} [options.isCompact = false]
+ * @param {Boolean} [options.isDark = true]
+ * @param {Boolean} [options.isLight = false]
  * @returns {object} A flat object of all variables and their values.
  * @public
  */
@@ -52,10 +58,22 @@ function getTheme() {
       colorScheme = _addThemeDefaults.colorScheme,
       density = _addThemeDefaults.density;
 
+  var isPrisma = family === 'prisma';
+  var isEnterprise = family === 'enterprise';
+  var isComfortable = density === 'comfortable';
+  var isCompact = density === 'compact';
+  var isDark = colorScheme === 'dark';
+  var isLight = colorScheme === 'light';
   return Object.freeze(_objectSpread({
     colorScheme: colorScheme,
     density: density,
-    family: family
+    family: family,
+    isPrisma: isPrisma,
+    isEnterprise: isEnterprise,
+    isComfortable: isComfortable,
+    isCompact: isCompact,
+    isDark: isDark,
+    isLight: isLight
   }, family === 'enterprise' ? (0, _enterprise["default"])({
     colorScheme: colorScheme,
     density: density

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.7.0",
+  "version": "0.10.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "build": "cross-env NODE_ENV=production babel src -d . --ignore src/babel-plugin-base64-png,src/tests --extensions .js,.ts,.tsx && yarn types:build",
@@ -14,6 +14,11 @@
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
+    "@storybook/addon-docs": ">= 6.x",
+    "@storybook/addons": ">= 6.x",
+    "@storybook/api": ">= 6.x",
+    "@storybook/components": ">= 6.x",
+    "@storybook/theming": ">= 6.x",
     "react": "^16.8",
     "styled-components": "^5.1"
   },
@@ -23,6 +28,21 @@
     },
     "styled-components": {
       "optional": true
+    },
+    "@storybook/addon-docs": {
+      "optional": true
+    },
+    "@storybook/addons": {
+      "optional": true
+    },
+    "@storybook/api": {
+      "optional": true
+    },
+    "@storybook/components": {
+      "optional": true
+    },
+    "@storybook/theming": {
+      "optional": true
     }
   },
   "license": "Apache-2.0",
@@ -41,6 +61,11 @@
     "@babel/core": "^7.2.0",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/eslint-config": "^4.0.0",
+    "@storybook/addon-docs": "^6.0.28",
+    "@storybook/addons": "^6.0.28",
+    "@storybook/api": "^6.0.28",
+    "@storybook/components": "^6.0.28",
+    "@storybook/theming": "^6.0.28",
     "@typescript-eslint/eslint-plugin": "^3.4.0",
     "@typescript-eslint/parser": "^3.4.0",
     "babel-eslint": "^10.1.0",

package/pick.js

@@ -62,7 +62,7 @@ var getThemeVariant = function getThemeVariant(tree, theme) {
  * import { pick, variables } from '@splunk/themes';
  *
  * const Wrapper = styled.div`
- *      padding: ${pick({
+ *      color: ${pick({
  *          enterprise: {
  *              light: variables.grey35,
  *              dark:  variables.grey92,

package/prisma/dark.js

@@ -24,22 +24,22 @@ var backgroundColors = {
   backgroundColorPage: '#111215',
   backgroundColorNavigation: '#08090a',
   backgroundColorFloating: '#ffffff',
-  backgroundColorModal: '#1e2024',
+  backgroundColorDialog: '#1e2024',
   backgroundColorScrim: 'rgba(0, 0, 0, 0.8)'
 };
 /**
  * # Content Colors
- * Content colors should be used for text, icons and dividers. They use transparent colors, to ensure optimal contrast on every background.
+ * Content colors should be used for text, icons and dividers.
  *
  * @colorSet verbose
  */
 
 var contentColors = {
-  contentColorActive: 'rgba(255, 255, 255, 0.98)',
-  contentColorDefault: 'rgba(255, 255, 255, 0.7)',
-  contentColorMuted: 'rgba(255, 255, 255, 0.5)',
-  contentColorDisabled: 'rgba(255, 255, 255, 0.3)',
-  contentColorInverted: '#000'
+  contentColorActive: '#fafafa',
+  contentColorDefault: '#b5b5b5',
+  contentColorDisabled: '#6b6b6b',
+  contentColorInverted: '#000000',
+  contentColorMuted: '#909090'
 };
 /**
  * # Interactive Colors

package/prisma/light.js

@@ -24,22 +24,22 @@ var backgroundColors = {
   backgroundColorPage: '#f9f9f9',
   backgroundColorNavigation: '#f7f7f7',
   backgroundColorFloating: '#000000',
-  backgroundColorModal: '#ffffff',
+  backgroundColorDialog: '#ffffff',
   backgroundColorScrim: 'rgba(255, 255, 255, 0.75)'
 };
 /**
  * # Content Colors
- * Content colors should be used for text, icons and dividers. They use transparent colors, to ensure optimal contrast on every background.
+ * Content colors should be used for text, icons and dividers.
  *
  * @colorSet verbose
  */
 
 var contentColors = {
   contentColorActive: '#2c2c2c',
-  contentColorDefault: 'rgba(0, 0, 0, 0.65)',
-  contentColorMuted: 'rgba(0, 0, 0, 0.54)',
-  contentColorDisabled: 'rgba(0, 0, 0, 0.3)',
-  contentColorInverted: '#ffffff'
+  contentColorDefault: '#4d4d4d',
+  contentColorDisabled: '#878787',
+  contentColorInverted: '#ffffff',
+  contentColorMuted: '#6b6b6b'
 };
 /**
  * # Interactive Colors

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

@@ -0,0 +1,108 @@
+"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.SplunkThemesTool = exports.themeOptions = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _api = require("@storybook/api");
+
+var _components = require("@storybook/components");
+
+var _constants = require("./constants");
+
+var _themes = require("./themes");
+
+var _util = require("./util");
+
+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 _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 _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; }
+
+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 = function SplunkThemesTool() {
+  var _useGlobals = (0, _api.useGlobals)(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 2),
+      globals = _useGlobals2[0],
+      updateGlobals = _useGlobals2[1];
+
+  var params = (0, _api.useParameter)(_constants.PARAM_KEY, {});
+  var globalsTheme = globals[_constants.PARAM_KEY];
+  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]);
+  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 /*#__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) {
+            var active = currentTheme[themeOptionKey] === themeValue;
+            return {
+              active: active,
+              id: themeValue,
+              onClick: function onClick(e, clickProps) {
+                updateTheme(_defineProperty({}, themeOptionKey, clickProps.title));
+              },
+              right: active && /*#__PURE__*/_react["default"].createElement(_components.Icons, {
+                icon: "check"
+              }),
+              title: themeValue
+            };
+          })
+        }));
+      });
+    },
+    closeOnClick: true
+  }, /*#__PURE__*/_react["default"].createElement(_components.IconButton, {
+    key: "splunk-themes",
+    title: "Set options for @splunk/themes",
+    active: true
+  }, /*#__PURE__*/_react["default"].createElement(_components.Icons, {
+    icon: "paintbrush"
+  })));
+};
+
+exports.SplunkThemesTool = SplunkThemesTool;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedDocsContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _blocks = require("@storybook/addon-docs/blocks");
+
+var _theming = require("@storybook/theming");
+
+var _themes = require("./themes");
+
+var _util = require("./util");
+
+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; }
+
+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; }
+
+var ThemedDocsContainer = function ThemedDocsContainer(_ref) {
+  var children = _ref.children,
+      context = _ref.context;
+  var parameters = context.parameters;
+  var currentTheme = (0, _util.getThemeOptionsFromContext)(context);
+
+  var themedContext = _objectSpread(_objectSpread({}, context), {}, {
+    parameters: _objectSpread(_objectSpread({}, parameters), {}, {
+      docs: {
+        theme: currentTheme.colorScheme === 'dark' ? _theming.themes.dark : _theming.themes.light
+      }
+    })
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(_blocks.DocsContainer, {
+    context: themedContext
+  }, /*#__PURE__*/_react["default"].createElement(_themes.GlobalStyles, null), children);
+};
+
+exports.ThemedDocsContainer = ThemedDocsContainer;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decorators = void 0;
+
+var _withSplunkTheme = require("./withSplunkTheme");
+
+var decorators = [_withSplunkTheme.withSplunkTheme];
+exports.decorators = decorators;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parameters = void 0;
+
+var _blocks = require("@storybook/addon-docs/blocks");
+
+var _ThemedDocsContainer = require("./ThemedDocsContainer");
+
+var parameters = {
+  docs: {
+    container: _ThemedDocsContainer.ThemedDocsContainer,
+    page: _blocks.DocsPage
+  },
+  splunkThemes: {
+    family: 'prisma',
+    colorScheme: 'dark',
+    density: 'comfortable'
+  }
+};
+exports.parameters = parameters;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHANGED = exports.SET = exports.CONFIGURE = exports.UPDATE = 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 UPDATE = "".concat(ADDON_ID, "/update");
+exports.UPDATE = UPDATE;
+var CONFIGURE = "".concat(ADDON_ID, "/configure");
+exports.CONFIGURE = CONFIGURE;
+var SET = "".concat(ADDON_ID, "/default");
+exports.SET = SET;
+var CHANGED = "".concat(ADDON_ID, "/changed");
+exports.CHANGED = CHANGED;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SplunkThemesTool", {
+  enumerable: true,
+  get: function get() {
+    return _SplunkThemesTool.SplunkThemesTool;
+  }
+});
+Object.defineProperty(exports, "withSplunkTheme", {
+  enumerable: true,
+  get: function get() {
+    return _withSplunkTheme.withSplunkTheme;
+  }
+});
+Object.defineProperty(exports, "ThemedDocsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ThemedDocsContainer.ThemedDocsContainer;
+  }
+});
+Object.defineProperty(exports, "getThemeOptionsFromContext", {
+  enumerable: true,
+  get: function get() {
+    return _util.getThemeOptionsFromContext;
+  }
+});
+
+var _SplunkThemesTool = require("./SplunkThemesTool");
+
+var _withSplunkTheme = require("./withSplunkTheme");
+
+var _ThemedDocsContainer = require("./ThemedDocsContainer");
+
+var _util = require("./util");

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = config;
+exports.managerEntries = managerEntries;
+
+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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+function config() {
+  var entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return [].concat(_toConsumableArray(entry), [require.resolve('./addDecorator'), require.resolve('./addParameter')]);
+}
+
+function managerEntries() {
+  var entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return [].concat(_toConsumableArray(entry), [require.resolve('./register')]);
+}

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

@@ -0,0 +1,32 @@
+"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); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addons = _interopRequireWildcard(require("@storybook/addons"));
+
+var _constants = require("./constants");
+
+var _SplunkThemesTool = require("./SplunkThemesTool");
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_addons["default"].register(_constants.ADDON_ID, function () {
+  _addons["default"].add(_constants.ADDON_ID, {
+    title: 'splunk/themes',
+    type: _addons.types.TOOL,
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return !!(viewMode && viewMode.match(/^(story|docs)$/));
+    },
+    paramKey: _constants.PARAM_KEY,
+    render: function render() {
+      return /*#__PURE__*/_react["default"].createElement(_SplunkThemesTool.SplunkThemesTool, null);
+    }
+  });
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipSectionTitle = exports.GlobalStyles = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _theming = require("@storybook/theming");
+
+var _mixins = _interopRequireDefault(require("../mixins"));
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n    .sb-show-main {\n        ", ";\n        background-color: ", ";\n    }\n\n    #docs-root, .sbdocs {\n        background-color: ", ";\n    }\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 GlobalStyles = (0, _styledComponents.createGlobalStyle)(_templateObject(), _mixins["default"].reset('block'), _variables["default"].backgroundColorPage, _variables["default"].backgroundColorPage); // theming based on Storybook's <TooltipMessage>
+
+exports.GlobalStyles = GlobalStyles;
+
+var TooltipSectionTitle = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    color: theme.textColor,
+    fontWeight: theme.typography.weight.black,
+    lineHeight: '18px',
+    padding: '15px 15px 0 15px'
+  };
+});
+
+exports.TooltipSectionTitle = TooltipSectionTitle;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getThemeOptionsFromContext = exports.normalizeThemeOptions = void 0;
+
+var _constants = require("./constants");
+
+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 _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; }
+
+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);
+};
+
+exports.normalizeThemeOptions = normalizeThemeOptions;
+
+var getThemeOptionsFromContext = function getThemeOptionsFromContext(context) {
+  var globals = context.globals,
+      parameters = context.parameters;
+  var globalsTheme = globals[_constants.PARAM_KEY];
+  var themesConfig = parameters[_constants.PARAM_KEY];
+  return normalizeThemeOptions(themesConfig, globalsTheme);
+};
+
+exports.getThemeOptionsFromContext = getThemeOptionsFromContext;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withSplunkTheme = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SplunkThemeProvider = _interopRequireDefault(require("../SplunkThemeProvider"));
+
+var _constants = require("./constants");
+
+var _themes = require("./themes");
+
+var _util = require("./util");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 withSplunkTheme = WithSplunkTheme;
+exports.withSplunkTheme = withSplunkTheme;

package/types/enterprise/prismaAliases.d.ts

@@ -22,7 +22,7 @@ declare function createPrismaAliases({ colorScheme, density, }: {
     backgroundColorPage: string;
     backgroundColorNavigation: string;
     backgroundColorFloating: string;
-    backgroundColorModal: string;
+    backgroundColorDialog: string;
     backgroundColorScrim: string;
     contentColorActive: string;
     contentColorDefault: string;

package/types/pick.d.ts

@@ -12,7 +12,7 @@ export declare const getThemeVariant: <T extends AnyTheme, A extends object>(tre
  * import { pick, variables } from '@splunk/themes';
  *
  * const Wrapper = styled.div`
- *      padding: ${pick({
+ *      color: ${pick({
  *          enterprise: {
  *              light: variables.grey35,
  *              dark:  variables.grey92,

package/types/prisma/dark.d.ts

@@ -33,16 +33,16 @@ declare const theme: {
     white: string;
     contentColorActive: string;
     contentColorDefault: string;
-    contentColorMuted: string;
     contentColorDisabled: string;
     contentColorInverted: string;
+    contentColorMuted: string;
     backgroundColorPopup: string;
     backgroundColorSection: string;
     backgroundColorSidebar: string;
     backgroundColorPage: string;
     backgroundColorNavigation: string;
     backgroundColorFloating: string;
-    backgroundColorModal: string;
+    backgroundColorDialog: string;
     backgroundColorScrim: string;
     embossShadow: string;
     overlayShadow: string;

package/types/prisma/light.d.ts

@@ -33,16 +33,16 @@ declare const theme: {
     black: string;
     contentColorActive: string;
     contentColorDefault: string;
-    contentColorMuted: string;
     contentColorDisabled: string;
     contentColorInverted: string;
+    contentColorMuted: string;
     backgroundColorPopup: string;
     backgroundColorSection: string;
     backgroundColorSidebar: string;
     backgroundColorPage: string;
     backgroundColorNavigation: string;
     backgroundColorFloating: string;
-    backgroundColorModal: string;
+    backgroundColorDialog: string;
     backgroundColorScrim: string;
     embossShadow: string;
     overlayShadow: string;

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoryContext } from '@storybook/addons';
+declare const ThemedDocsContainer: ({ children, context, }: {
+    children: React.ReactNode;
+    context: StoryContext;
+}) => React.ReactNode;
+export { ThemedDocsContainer };

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

@@ -0,0 +1 @@
+export declare const decorators: import("@storybook/addons").StoryWrapper[];

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const parameters: {
+    docs: {
+        container: ({ children, context, }: {
+            children: import("react").ReactNode;
+            context: import("@storybook/addons").StoryContext;
+        }) => import("react").ReactNode;
+        page: import("react").FC<{}>;
+    };
+    splunkThemes: {
+        family: string;
+        colorScheme: string;
+        density: string;
+    };
+};

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

@@ -0,0 +1,6 @@
+export declare const ADDON_ID = "@splunk/themes";
+export declare const PARAM_KEY = "splunkThemes";
+export declare const UPDATE: string;
+export declare const CONFIGURE: string;
+export declare const SET: string;
+export declare const CHANGED: string;

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

@@ -0,0 +1,4 @@
+export { SplunkThemesTool } from './SplunkThemesTool';
+export { withSplunkTheme } from './withSplunkTheme';
+export { ThemedDocsContainer } from './ThemedDocsContainer';
+export { getThemeOptionsFromContext } from './util';

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

@@ -0,0 +1,2 @@
+export declare function config(entry?: unknown[]): unknown[];
+export declare function managerEntries(entry?: unknown[]): unknown[];

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<import("../types").OptionalThemedProps<import("../types").AnyTheme> & import("../types").ThemedProps<import("../types").AnyTheme>, import("styled-components").DefaultTheme>;
+export declare const TooltipSectionTitle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & {
+    theme: import("@storybook/theming").Theme;
+}, import("@storybook/theming").Theme>;

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

@@ -0,0 +1,4 @@
+import { StoryContext } from '@storybook/addons';
+import { ThemeSettings } from '../types';
+export declare const normalizeThemeOptions: (paramOptions?: {}, globalOptions?: {}) => Partial<ThemeSettings>;
+export declare const getThemeOptionsFromContext: (context: StoryContext) => Partial<ThemeSettings>;

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

@@ -0,0 +1,2 @@
+import { StoryWrapper } from '@storybook/addons';
+export declare const withSplunkTheme: StoryWrapper;

package/types/types.d.ts

@@ -6,15 +6,23 @@ declare type Density = 'comfortable' | 'compact';
 interface ThemeSettingsBase {
     colorScheme: ColorScheme;
     density: Density;
+    isPrisma: boolean;
+    isEnterprise: boolean;
+    isComfortable: boolean;
+    isCompact: boolean;
+    isDark: boolean;
+    isLight: boolean;
 }
 interface ThemeSettings<T extends AnyTheme = AnyTheme> extends ThemeSettingsBase {
     family: T extends Enterprise ? 'enterprise' : 'prisma';
 }
 declare type Enterprise = EnterpriseVariables & ThemeSettingsBase & {
     family: 'enterprise';
+    isEnterprise: true;
 };
 declare type Prisma = PrismaVariables & ThemeSettingsBase & {
     family: 'prisma';
+    isPrisma: true;
 };
 declare type CustomizeTheme<T extends AnyTheme = AnyTheme> = {
     bivarianceHack(theme: T): T;

package/types/useSplunkTheme.d.ts

@@ -10,11 +10,11 @@ import { AnyTheme } from './types';
  * import useSplunkTheme from '@splunk/themes/useSplunkTheme';
  * ...
  * export function() {
- *     const { density, focusColor } = useSplunkTheme();
+ *     const { isComfortable, focusColor } = useSplunkTheme();
  *
  *     const style = {
  *         color: focusColor,
- *         padding: density === 'comfortable' ? '10px' : '5px',
+ *         padding: isComfortable ? '10px' : '5px',
  *     }
  *
  *     ...

package/types/utils.d.ts

@@ -4,7 +4,7 @@ import { ThemeSettings, CustomizeTheme, AnyTheme } from './types';
  * Accepts a theme object and returns supported values and defaults.
  * @private
  */
-export declare const addThemeDefaults: ({ family, colorScheme, density, }?: Partial<ThemeSettings>) => ThemeSettings;
+export declare const addThemeDefaults: ({ family, colorScheme, density, isPrisma, isEnterprise, isComfortable, isCompact, isDark, isLight, }?: Partial<ThemeSettings>) => ThemeSettings;
 declare function getCustomizedThemeUnmemo<T extends AnyTheme>(settings?: Partial<ThemeSettings<T>>, customizer?: CustomizeTheme<T>): T;
 /**
  * Accepts a theme object and customizer, and returns supported values and defaults.

package/useSplunkTheme.js

@@ -32,11 +32,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * import useSplunkTheme from '@splunk/themes/useSplunkTheme';
  * ...
  * export function() {
- *     const { density, focusColor } = useSplunkTheme();
+ *     const { isComfortable, focusColor } = useSplunkTheme();
  *
  *     const style = {
  *         color: focusColor,
- *         padding: density === 'comfortable' ? '10px' : '5px',
+ *         padding: isComfortable ? '10px' : '5px',
  *     }
  *
  *     ...

package/utils.js

@@ -22,12 +22,30 @@ var addThemeDefaults = function addThemeDefaults() {
       _ref$colorScheme = _ref.colorScheme,
       colorScheme = _ref$colorScheme === void 0 ? 'dark' : _ref$colorScheme,
       _ref$density = _ref.density,
-      density = _ref$density === void 0 ? 'comfortable' : _ref$density;
+      density = _ref$density === void 0 ? 'comfortable' : _ref$density,
+      _ref$isPrisma = _ref.isPrisma,
+      isPrisma = _ref$isPrisma === void 0 ? true : _ref$isPrisma,
+      _ref$isEnterprise = _ref.isEnterprise,
+      isEnterprise = _ref$isEnterprise === void 0 ? false : _ref$isEnterprise,
+      _ref$isComfortable = _ref.isComfortable,
+      isComfortable = _ref$isComfortable === void 0 ? true : _ref$isComfortable,
+      _ref$isCompact = _ref.isCompact,
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+      _ref$isDark = _ref.isDark,
+      isDark = _ref$isDark === void 0 ? true : _ref$isDark,
+      _ref$isLight = _ref.isLight,
+      isLight = _ref$isLight === void 0 ? false : _ref$isLight;
 
   return {
     family: family,
     colorScheme: colorScheme,
-    density: density
+    density: density,
+    isPrisma: isPrisma,
+    isEnterprise: isEnterprise,
+    isComfortable: isComfortable,
+    isCompact: isCompact,
+    isDark: isDark,
+    isLight: isLight
   };
 };
 

package/withSplunkTheme.js

@@ -50,11 +50,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  *     };
  *
  *     render() {
- *         const { density, focusColor } = this.props.splunkTheme;
+ *         const { isComfortable, focusColor } = this.props.splunkTheme;
  *
  *         const style = {
  *             color: focusColor,
- *             padding: density === 'comfortable' ? '10px' : '5px',
+ *             padding: isComfortable ? '10px' : '5px',
  *         }
  *
  *         return (