@splunk/themes 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,18 +1,38 @@
 Change Log
 ============
 
+1.1.0 - July 2, 2025
+----------
+New Features:
+* `@splunk/themes/storybook-addon-splunk-themes` now supports disabling 'both' option via `disableDualTheme` story param (SUI-7702).
+* Added `pageBase` mixin for `html` and `body` base styling (SUI-7665).
+* New `skipLink` mixin (SUI-7854)
+
+Bug Fixes:
+* Updated Prisma and Magnetic light syntax token values to maintain 4.5:1 contrast with line highlight (SUI-6644).
+  * Tokens updated: `syntaxBlue`, `syntaxBrown`, `syntaxGray`, `syntaxGreen`, `syntaxHighlight`, `syntaxOrange`, `syntaxPink`, `syntaxPurple`, `syntaxRed`, and `syntaxTeal`. 
+* Updated `actionColorBackgroundSecondaryActive` token values in Enterprise and Prisma themes to fix visual regression in `Radio Bar` (SUI-7864).
+* Updated `interactiveColorOverlayActive` token values in Prisma and Enterprise themes to match `actionColorBackgroundSecondaryActive` values for consistent active overlay states (SUI-7864).
+* Updated enterprise theme light mode neutral color tokens `neutral300`, `neutral400`, and `neutral500` to fix lightness steps from previous changes. (SUI-7879)
+* Added neutral tokens (`neutral50`, `neutral100`, `neutral200`, `neutral300`, `neutral400`, `neutral500`) to Magnetic theme customizer with light and dark color scheme support, matching Enterprise and Prisma theme. (SUI-7879)
+
+1.0.1 - June 5, 2025
+----------
+Bug Fixes:
+* Corrected `@types/react` peer dependency to allow `@types/react` `16` or `17` (SUI-7838).
+
 1.0.0 - June 3, 2025
 ----------
 * Includes all changes from `1.0.0-beta` and `1.0.0-rc` releases.
 
-Bug fixes:
+Bug Fixes:
 * Color variables `backgroundColorPage`, `backgroundColorNavigation`,`backgroundColorSideBar`,`neutral50`,`neutral100` and `neutral200` in Enterprise light have been updated to align better with Prisma themes (SUI-7584).
 * `@types/react` peer dependency now includes `^16 | ^17` and no longer blocks installation using `npm` in React 16 or 17 environments (SUI-7838).
 * Color variables for `actionColorBorderSecondary*`, `actionColorBackgroundSecondary*`, and `interactiveColorBorderDisabled` have been updated to align with both Prisma and Enterprise themes (SUI-7839).
 
 1.0.0-rc.2 - May 28, 2025
 ----------
-* Release candidate 2
+* Release candidate 2.
 
 1.0.0-rc.1 - May 14, 2025
 ----------
@@ -30,20 +50,20 @@ New Features:
 New Features:
 * New `inputBorderWidth` variable (SUI-7384).
 
-Bug Fixes:
-* Fixes broken CSS for Splunk Magnetic's `backgroundColorNavigation` override (SUI-7653).
-
-Deprecations:
-* `statusColor*`s have been deprecated. Instead use the appropriate `notificationColor*` or `severityColor*`(SUI-7303)
-
 API Changes:
 * `typescript` version is now `^5.8.3` (SUI-7601).
 * `borderActiveColor` has been deprecated. (SUI-7633).
-  * Use `interactiveColorBorderActive` for Data Entry components or `actionColorBorderSecondaryActive` for Buttons.
+    * Use `interactiveColorBorderActive` for Data Entry components or `actionColorBorderSecondaryActive` for Buttons.
 * `backgroundColorHover` have been deprecated. (SUI-7633).
-  * Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
+    * Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
 * `hoverShadow` has been deprecated. See notes on `backgroundColorHover` for hover affordances. (SUI-7621)
 
+Bug Fixes:
+* Fixes broken CSS for Splunk Magnetic's `backgroundColorNavigation` override (SUI-7653).
+
+Deprecations:
+* `statusColor*`s have been deprecated. Instead use the appropriate `notificationColor*` or `severityColor*`(SUI-7303).
+
 1.0.0-beta.3 - April 2, 2025
 ----------
 New Features:
@@ -64,15 +84,15 @@ New Features:
 * New `contentColorLink` variable (SUI-3568).
 * The data-viz variables are supported in all themes (SUI-3568).
 
-Deprecations:
-* `linkColor` and `linkColorHover` have been deprecated. Instead use `contentColorLink` (SUI-3568).
-
 API Changes:
 * `accentColor` variable has been removed from Prisma themes (SUI-3568).
 * `borderColor`, `borderColorStrong`, and `borderColorWeak` have had alpha removed from their values (SUI-7340).
 * `embossShadow`, `overlayShadow`, `dragShadow`, and `modalShadow` variables have been updated in Enterprise themes to match Prisma (SUI-7334).
 * Enterprise only tokens have been deprecated: `brandColor*`, `gray*`,  `accentColor*`, `errorColor*`, `alertColor*`, `warningColor*`, `successColor*`, `infoColor*`, `diverging*Color*`, and `cat*Color*`.
 
+Deprecations:
+* `linkColor` and `linkColorHover` have been deprecated. Instead use `contentColorLink` (SUI-3568).
+
 1.0.0-beta.1 - February 20, 2025
 ----------
 New Features:
@@ -93,19 +113,14 @@ New Features:
 * New `layout` mixin (SUI-6678).
 * Enterprise themes now support color variable `backgroundColorSidebar` (SUI-7102).
 
-Deprecations:
-* Enterprise theme tokens `textColor`, `textGray`, and `textDisabledColor` have been deprecated (SUI-6160).
-* Enterprise theme token `backgroundColor` has been deprecated (SUI-6656).
-* `accentColorPositive`, `accentColorWarning`, `accentColorAlert`, and `accentColorNegative` have been deprecated (SUI-3658).
-
 API Changes:
 * `react` and `react-dom` peer dependencies are now `"^16.8.0 || ^17.0.0 || ^18.0.0"`.
 * `px` sizing for `variables.fontSize*` and `mixins.typography` have been replaced with `rem` sizing (SUI-5509).
-  * This results in minor differences in text sizing; but is required to meet WCAG 1.4.4 and WCAG 1.4.10.
+    * This results in minor differences in text sizing; but is required to meet WCAG 1.4.4 and WCAG 1.4.10.
 * `typography` `size` param no longer supports `56` `36` `32` and `10`.
 * `variables.lineHeight` is no longer defined in `px` to improve readability of font at all scales (SUI-5509).
 * `typography`'s mixin for `Title5`'s has been updated to text color `variables.contentColorActive` in Prisma theme (SUI-5685).
-  * This change affects `Heading` and `Typography` components.
+    * This change affects `Heading` and `Typography` components.
 * The font size and line height no longer change with density. The default font-size in Enterprise Compact now is 14px (SUI-5508).
 * `typography`'s `line-height`, `size`, and `font-weight` values have been consolidated between Enterprise and Prisma themes (SUI-5684).
 * `typography`'s `withReset` prop has been removed (SUI-5686).
@@ -123,6 +138,11 @@ API Changes:
 * `fontSizeXLarge` size has been changed (SUI-6593).
 * Enterprise themes support the `contentColorActive`, `contentColorDefault`, `contentColorDisabled`, `contentColorInverted`, and `contentColorMuted` tokens (SUI-6160).
 
+Deprecations:
+* Enterprise theme tokens `textColor`, `textGray`, and `textDisabledColor` have been deprecated (SUI-6160).
+* Enterprise theme token `backgroundColor` has been deprecated (SUI-6656).
+* `accentColorPositive`, `accentColorWarning`, `accentColorAlert`, and `accentColorNegative` have been deprecated (SUI-3658).
+
 0.24.0 - May 6, 2025
 ----------
 Bug Fixes:
@@ -162,9 +182,9 @@ API Changes:
 New Features:
 
 * All themes now support color variables for decorative borders:
-  * `borderColorStrong` and `borderColorWeak` added to all themes
-  * `borderColor` now also available in Prisma themes
-  * Note: Use `interactiveColorBorder` when creating a border for an interactive control
+    * `borderColorStrong` and `borderColorWeak` added to all themes
+    * `borderColor` now also available in Prisma themes
+    * Note: Use `interactiveColorBorder` when creating a border for an interactive control
 
 Bug Fixes:
 * Enterprise light theme `interactiveColorBorder` value has been updated to meet contrast requirements.
@@ -179,7 +199,7 @@ API Changes:
 New Features:
 * Added new variable `activeBorder`.
 
-0.16.4 - Dec 5, 2023
+0.16.4 - December 5, 2023
 ----------
 Bug Fixes:
 * `syntaxColors` have been updated to meet A11y_WCAG 1.4.3 contrast requirements for prisma and enterprise themes (SUI-5750).
@@ -207,12 +227,12 @@ API Changes:
 
 0.16.0 - April 6, 2023
 ----------
-New Features:
-* Added variables for supported font weights; the `typography` mixin's `weight` param supports these as keyword values (SUI-5344).
-
 Breaking Changes:
 * `typography` mixin's `weight` param now only accepts keyword values. Number values have been removed (SUI-5344).
 
+New Features:
+* Added variables for supported font weights; the `typography` mixin's `weight` param supports these as keyword values (SUI-5344).
+
 Bug Fixes:
 * `typography` mixin properly applies correct CSS for `weight` params (SUI-5344).
 
@@ -401,4 +421,4 @@ Notes:
 
 0.2.0 - June 30, 2018
 ----------
-* Initial Release
+* Initial Release.

package/clearAllCaches.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clearAllCaches = void 0;
+var _getTheme = require("./getTheme");
+var _utils = require("./utils");
+var _variables = require("./variables");
+/**
+ * Note: Use with caution, as this will clear all caches in the themes package.
+ *
+ * Clear the `getTheme`, `customizedTheme`, and `variables` caches.
+ *
+ * (Note: Having this in utils causes a build time error in the themes package, due to import cycles.)
+ *
+ * @private
+ */
+var clearAllCaches = function clearAllCaches() {
+  (0, _getTheme.clearGetThemeCache)();
+  (0, _utils.clearCustomizedThemeCache)();
+  (0, _variables.clearVariablesCache)();
+};
+exports.clearAllCaches = clearAllCaches;

package/enterprise/dark.js

@@ -1,12 +1,12 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _light = _interopRequireDefault(require("./light"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -77,7 +77,7 @@ var actionColors = {
   actionColorBackgroundPrimaryDisabled: '#163b1b',
   actionColorBackgroundPrimaryHover: '#6eba78',
   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',
@@ -108,7 +108,7 @@ var interactiveColors = {
   interactiveColorBorderDisabled: 'rgba(255, 255, 255, 0.3)',
   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/enterprise/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _light = _interopRequireDefault(require("./light"));
-var _dark = _interopRequireDefault(require("./dark"));
-var _compact = _interopRequireDefault(require("./compact"));
 var _comfortable = _interopRequireDefault(require("./comfortable"));
+var _compact = _interopRequireDefault(require("./compact"));
+var _dark = _interopRequireDefault(require("./dark"));
+var _light = _interopRequireDefault(require("./light"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function 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; }

package/enterprise/light.js

@@ -1,13 +1,12 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 var _dataViz = _interopRequireDefault(require("./dataViz"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -52,9 +51,9 @@ var neutralColors = {
   neutral50: '#e8ebee',
   neutral100: '#e1e5ea',
   neutral200: '#dae0e7',
-  neutral300: deprecatedEnterpriseColors.gray92,
-  neutral400: _tinycolor["default"].mix(deprecatedEnterpriseColors.gray92, deprecatedEnterpriseColors.gray80).toRgbString(),
-  neutral500: deprecatedEnterpriseColors.gray80,
+  neutral300: '#d5dbe2',
+  neutral400: '#c9d1da',
+  neutral500: '#bbc4ce',
   black: '#000000',
   transparent: 'transparent'
 };
@@ -143,7 +142,7 @@ var actionColors = {
   actionColorBackgroundPrimaryDisabled: '#98d798',
   actionColorBackgroundPrimaryHover: '#125e1c',
   actionColorBackgroundSecondary: 'transparent',
-  actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.07)',
+  actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.12)',
   actionColorBackgroundSecondaryDisabled: 'transparent',
   actionColorBackgroundSecondaryHover: 'rgba(0, 0, 0, 0.03)',
   actionColorBackgroundSubtle: 'transparent',
@@ -174,7 +173,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',

package/index.js

@@ -13,7 +13,8 @@ var _exportNames = {
   unstable_splunkMagneticThemeCustomizer: true,
   useSplunkTheme: true,
   withSplunkTheme: true,
-  variables: true
+  variables: true,
+  clearAllCaches: true
 };
 Object.defineProperty(exports, "getSettingsFromThemedProps", {
   enumerable: true,
@@ -75,6 +76,12 @@ Object.defineProperty(exports, "variables", {
     return _variables["default"];
   }
 });
+Object.defineProperty(exports, "clearAllCaches", {
+  enumerable: true,
+  get: function get() {
+    return _clearAllCaches.clearAllCaches;
+  }
+});
 var _getSettingsFromThemedProps = _interopRequireDefault(require("./getSettingsFromThemedProps"));
 var _getTheme = _interopRequireDefault(require("./getTheme"));
 var _mixins = _interopRequireDefault(require("./mixins"));
@@ -85,6 +92,7 @@ var _splunkMagnetic = _interopRequireDefault(require("./splunk-magnetic"));
 var _useSplunkTheme = _interopRequireDefault(require("./useSplunkTheme"));
 var _withSplunkTheme = _interopRequireDefault(require("./withSplunkTheme"));
 var _variables = _interopRequireDefault(require("./variables"));
+var _clearAllCaches = require("./clearAllCaches");
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/mixins/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  typography: true,
+  layout: true,
   prose: true,
-  layout: true
+  typography: true
 };
-Object.defineProperty(exports, "typography", {
+Object.defineProperty(exports, "layout", {
   enumerable: true,
   get: function get() {
-    return _typography["default"];
+    return _layout["default"];
   }
 });
 Object.defineProperty(exports, "prose", {
@@ -20,54 +20,65 @@ Object.defineProperty(exports, "prose", {
     return _prose["default"];
   }
 });
-Object.defineProperty(exports, "layout", {
+Object.defineProperty(exports, "typography", {
   enumerable: true,
   get: function get() {
-    return _layout["default"];
+    return _typography["default"];
   }
 });
 exports["default"] = void 0;
-var _utilityMixins = _interopRequireWildcard(require("./utilityMixins"));
-Object.keys(_utilityMixins).forEach(function (key) {
+var _layout = _interopRequireWildcard(require("./layout"));
+Object.keys(_layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _utilityMixins[key];
+      return _layout[key];
     }
   });
 });
-var _typography = _interopRequireWildcard(require("./typography"));
-Object.keys(_typography).forEach(function (key) {
+var _prose = _interopRequireWildcard(require("./prose"));
+Object.keys(_prose).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _typography[key];
+      return _prose[key];
     }
   });
 });
-var _prose = _interopRequireWildcard(require("./prose"));
-Object.keys(_prose).forEach(function (key) {
+var _resets = _interopRequireWildcard(require("./resets"));
+Object.keys(_resets).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _prose[key];
+      return _resets[key];
     }
   });
 });
-var _layout = _interopRequireWildcard(require("./layout"));
-Object.keys(_layout).forEach(function (key) {
+var _typography = _interopRequireWildcard(require("./typography"));
+Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _layout[key];
+      return _typography[key];
+    }
+  });
+});
+var _utilityMixins = _interopRequireWildcard(require("./utilityMixins"));
+Object.keys(_utilityMixins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utilityMixins[key];
     }
   });
 });
@@ -79,7 +90,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _default = _objectSpread(_objectSpread({}, _utilityMixins["default"]), {}, {
+var _default = _objectSpread(_objectSpread(_objectSpread({}, _resets["default"]), _utilityMixins["default"]), {}, {
   layout: _layout["default"],
   prose: _prose["default"],
   typography: _typography["default"]

package/mixins/resets.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.reset = exports.pageBase = void 0;
+var _styledComponents = require("styled-components");
+var _pick = _interopRequireDefault(require("../pick"));
+var _variables = _interopRequireDefault(require("../variables"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n        /* Generic resets */\n        animation: none 0s ease 0s 1 normal none running;\n        backface-visibility: visible;\n        background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n        border: medium none currentColor;\n        border-collapse: separate;\n        border-image: none;\n        border-radius: 0;\n        border-spacing: 0;\n        bottom: auto;\n        box-shadow: none;\n        caption-side: top;\n        clear: none;\n        clip: auto;\n        color-scheme: ", ";\n        columns: auto;\n        column-count: auto;\n        column-fill: balance;\n        column-gap: normal;\n        column-rule: medium none currentColor;\n        column-span: 1;\n        column-width: auto;\n        content: normal;\n        counter-increment: none;\n        counter-reset: none;\n        empty-cells: show;\n        float: none;\n        font-style: normal;\n        font-variant: normal;\n        font-weight: normal;\n        font-stretch: normal;\n        height: auto;\n        hyphens: none;\n        left: auto;\n        letter-spacing: normal;\n        margin: 0;\n        max-height: none;\n        max-width: none;\n        min-height: 0;\n        min-width: 0;\n        opacity: 1;\n        orphans: 2;\n        overflow: visible;\n        overflow-x: visible;\n        overflow-y: visible;\n        padding: 0;\n        page-break-after: auto;\n        page-break-before: auto;\n        page-break-inside: auto;\n        perspective: none;\n        perspective-origin: 50% 50%;\n        pointer-events: auto;\n        position: static;\n        right: auto;\n        tab-size: 8;\n        table-layout: auto;\n        text-align: left;\n        text-align-last: auto;\n        text-decoration: none;\n        text-indent: 0;\n        text-shadow: none;\n        text-transform: none;\n        top: auto;\n        transform: none;\n        transform-origin: 50% 50% 0;\n        transform-style: flat;\n        transition: none 0s ease 0s;\n        user-select: auto;\n        vertical-align: baseline;\n        white-space: normal;\n        widows: 2;\n        width: auto;\n        word-spacing: normal;\n        z-index: auto;\n        /* Splunk-specific resets */\n        border-width: 1px;\n        box-sizing: border-box;\n        color: ", ";\n        cursor: inherit;\n        ", "\n        font-family: ", ";\n        font-size: ", ";\n        line-height: ", ";\n        outline: medium none ", ";\n        visibility: inherit;\n    "]);
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+  return data;
+}
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n        background-color: ", ";\n        box-sizing: border-box;\n        color: ", ";\n        color-scheme: ", ";\n        font-family: ", ";\n        margin: 0;\n    "]);
+  _templateObject = function _templateObject() {
+    return data;
+  };
+  return data;
+}
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ * The `pageBase` mixin provides essential base styling, intended for `html` and `body` elements.
+ * This should be used in global styles to establish consistent foundational styles
+ * including theme colors, typography, and layout basics.
+ *
+ *  ##### Example
+ *  ```js
+ *  import styled from 'styled-components';
+ *  import { pageBase } from '@splunk/themes/mixins';
+ *
+ *  const GlobalStyle = createGlobalStyle`
+ *      html,
+ *      body {
+ *          ${pageBase()}
+ *      }
+ *  `
+ *  ```
+ * @name pageBase
+ * @kind function
+ * @public
+ */
+
+var pageBase = function pageBase() {
+  return function () {
+    return (0, _styledComponents.css)(_templateObject(), _variables["default"].backgroundColorPage, _variables["default"].contentColorDefault, (0, _pick["default"])({
+      dark: 'dark',
+      light: 'light'
+    }), _variables["default"].fontFamily);
+  };
+};
+
+/**
+ * The `reset` mixin resets css properties to their browser defaults, plus many to
+ * theme-specific values. This ensures an element is not inheriting inappropriate styles.
+ *
+ *  ##### Example
+ *  ```js
+ *  import styled from 'styled-components';
+ *  import { reset } from '@splunk/themes/mixins';
+ *
+ *  const myBlock = styled.div`
+ *      ${reset('block')};
+ *  `
+ *  ```
+ * @name reset
+ * @kind function
+ * @param {string} [display=inline] Set the `display` property (block, inline-block, …)
+ * @public
+ */
+exports.pageBase = pageBase;
+var reset = function reset() {
+  var display = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inline';
+  var displayRule = display !== null ? "display: ".concat(display, ";") : '';
+  return function () {
+    return (0, _styledComponents.css)(_templateObject2(), (0, _pick["default"])({
+      /*
+          use pick() rather than relying on variables.colorScheme
+          because there's no guarantee that variables.colorScheme
+          has to match the css color-scheme prop
+      */
+      dark: 'dark',
+      light: 'light'
+    }), _variables["default"].contentColorDefault, displayRule, _variables["default"].fontFamily, _variables["default"].fontSize, _variables["default"].lineHeight, _variables["default"].focusColor);
+  };
+};
+exports.reset = reset;
+var _default = {
+  pageBase: pageBase,
+  reset: reset
+};
+exports["default"] = _default;

package/mixins/typography.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typographyVariants = exports["default"] = void 0;
-var _styledComponents = require("styled-components");
 var _merge = _interopRequireDefault(require("lodash/merge"));
-var _utilityMixins = _interopRequireDefault(require("./utilityMixins"));
+var _styledComponents = require("styled-components");
+var _resets = require("./resets");
 var _variables = _interopRequireDefault(require("../variables"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _templateObject8() {
@@ -292,7 +292,7 @@ function typography(variantOrParams, additionalParams) {
     withReset: mergedParams.withReset
   };
   return function () {
-    return (0, _styledComponents.css)(_templateObject8(), finalParams.withReset && _utilityMixins["default"].reset(null), finalParams.color, finalParams.family, finalParams.size, finalParams.weight, finalParams.lineHeight, finalParams.additionalStyles);
+    return (0, _styledComponents.css)(_templateObject8(), finalParams.withReset && (0, _resets.reset)(null), finalParams.color, finalParams.family, finalParams.size, finalParams.weight, finalParams.lineHeight, finalParams.additionalStyles);
   };
 }
 var _default = typography;