@splunk/themes 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,23 +1,46 @@
 Change Log
 ============
 
-1.0.1 - June 5, 2025
+1.2.0 - August 5, 2025
 ----------
+New Features:
+* New `lineHeight*` variables (SUI-7993).
+
 Bug fixes:
-* Corrected `@types/react` peer dependency to allow `@types/react` `16` or `17`  (SUI-7838).
+* Updated `skipLink` mixin to override `min-width` and `min-height` properties.
+
+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
 ----------
@@ -35,20 +58,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:
@@ -69,15 +92,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:
@@ -98,19 +121,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).
@@ -128,6 +146,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:
@@ -167,9 +190,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.
@@ -184,7 +207,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).
@@ -212,12 +235,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).
 
@@ -406,4 +429,4 @@ Notes:
 
 0.2.0 - June 30, 2018
 ----------
-* Initial Release
+* Initial Release.

package/SplunkThemeProvider.js

@@ -7,16 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = SplunkThemeProvider;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
 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; }
 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); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
 /** SplunkThemeProvider defaults to `prisma` `dark` `compact`, unless the properties have already been set.
  *
  * For example, here the nested `SplunkThemeProvider` defaults to `enterprise` `light`:

package/design-tokens/typography.js

@@ -64,7 +64,39 @@ var fontMeasures = {
    * in blocks of text by preventing overly long lines.
    */
   lineLength: '',
-  lineHeight: '1.5'
+  /**
+   * Default line height.
+   */
+  lineHeight: '',
+  /**
+   * Very tight. Use where space is extremely limited and text is not expected to wrap.
+   * Ideal for buttons, badges, input fields, and compact labels.
+   */
+  lineHeightSingle: '',
+  /**
+   * Slightly more space than single, still compact
+   */
+  lineHeightTight: '',
+  /**
+   * Compact but a bit more readable
+   */
+  lineHeightSnug: '',
+  /**
+   * Balanced spacing for smaller text
+   */
+  lineHeightComfortable: '',
+  /**
+   * Slightly looser for better readability
+   */
+  lineHeightRelaxed: '',
+  /*
+   * Ideal for larger text like headings
+   */
+  lineHeightSpacious: '',
+  /**
+   * Default for body text; comfortable, standard line height same as `lineHeight`
+   */
+  lineHeightNormal: ''
 };
 var typography = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontFamily), fontWeight), fontSize), fontMeasures);
 var _default = typography;

package/enterprise/dark.js

@@ -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/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',
@@ -204,8 +203,15 @@ var typography = {
   fontWeightBold: 700,
   fontWeightHeavy: 800,
   fontWeightExtraBold: 900,
+  lineLength: '80ch',
   lineHeight: '1.5',
-  lineLength: '80ch'
+  lineHeightSingle: '1',
+  lineHeightTight: '1.2',
+  lineHeightSnug: '1.25',
+  lineHeightComfortable: '1.333',
+  lineHeightRelaxed: '1.375',
+  lineHeightSpacious: '1.429',
+  lineHeightNormal: '1.5'
 };
 var zindexes = {
   zindexLayer: 1000,

package/mixins/index.js

@@ -49,6 +49,17 @@ 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 _resets[key];
+    }
+  });
+});
 var _typography = _interopRequireWildcard(require("./typography"));
 Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -71,15 +82,14 @@ Object.keys(_utilityMixins).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
 function _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; }
 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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.typographyVariants = exports["default"] = void 0;
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _styledComponents = require("styled-components");
-var _utilityMixins = _interopRequireDefault(require("./utilityMixins"));
+var _resets = require("./resets");
 var _variables = _interopRequireDefault(require("../variables"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _templateObject8() {
@@ -202,13 +202,13 @@ var fontsizePixelValueToRemMap = {
   12: _variables["default"].fontSizeSmall
 };
 var lineHeightVariableToValueMap = {
-  single: '1',
-  tight: '1.2',
-  snug: '1.25',
-  comfortable: '1.333',
-  relaxed: '1.375',
-  spacious: '1.429',
-  normal: '1.5'
+  single: _variables["default"].lineHeightSingle,
+  tight: _variables["default"].lineHeightTight,
+  snug: _variables["default"].lineHeightSnug,
+  comfortable: _variables["default"].lineHeightComfortable,
+  relaxed: _variables["default"].lineHeightRelaxed,
+  spacious: _variables["default"].lineHeightSpacious,
+  normal: _variables["default"].lineHeightNormal
 };
 
 // As defined by [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
@@ -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;

package/mixins/utilityMixins.js

@@ -10,64 +10,19 @@ exports.printHide = printHide;
 exports.printNoBackground = printNoBackground;
 exports.printWrapAll = printWrapAll;
 exports.screenReaderContent = screenReaderContent;
+exports.skipLink = skipLink;
 exports.overlayColors = overlayColors;
 exports.colorWithAlpha = colorWithAlpha;
-exports["default"] = exports.reset = void 0;
+exports["default"] = void 0;
 var _colorBlend = require("color-blend");
-var _styledComponents = require("styled-components");
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
-var _pick = _interopRequireDefault(require("../pick"));
-var _variables = _interopRequireDefault(require("../variables"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _templateObject() {
-  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    "]);
-  _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) } })); }
 /**
  * @file
  * A collection of style-related helper functions. All of them return a single object containing
  * DOM CSS properties, for example: `{ display: …, 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
- */
-
-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)(_templateObject(), (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);
-  };
-};
-
 /**
  * `clearfix` is used on a container to ensure its height is at least as tall as any floating
  * children.
@@ -83,7 +38,6 @@ var reset = function reset() {
  *  ```
  * @public
  */
-exports.reset = reset;
 function clearfix() {
   return {
     '&::after': {
@@ -225,10 +179,10 @@ function printWrapAll() {
  *
  *  ##### Example
  *  ``` js
- *  import screenReaderContent from '@splunk/themes/mixins';
+ *  import { screenReaderContent } from '@splunk/themes/mixins';
  *
  *  .myElement {
- *      ${props => props.theme.mixins.screenReaderContent()};
+ *      ${screenReaderContent()};
  *  }
  *  ```
  * @public
@@ -245,6 +199,43 @@ function screenReaderContent() {
     border: 0
   };
 }
+
+/**
+ * Visually hide interactive elements and reveal them on focus. Use this mixin to allow
+ * keyboard users to skip over repeated content, such as navigation menus
+ *
+ * ##### Example
+ * ```js
+ * import styled from 'styled-components';
+ * import Link from '@splunk/react-ui/Link';
+ * import mixins from '@splunk/themes';
+ *
+ * const skipLink = styled(Link)`
+ *   ${mixins.skipLink()};
+ *  `;
+ * // or if you have a container with several links inside it:
+ * const skipLinkContainer = styled.div`
+ *   ${mixins.skipLink()};
+ * `;
+ * ```
+ * @public
+ */
+function skipLink() {
+  return {
+    position: 'absolute',
+    '&:not(:focus-within)': {
+      overflow: 'hidden',
+      clipPath: 'inset(50%)',
+      height: '1px',
+      minHeight: '1px',
+      width: '1px',
+      minWidth: '1px',
+      padding: '0',
+      border: '0',
+      whiteSpace: 'nowrap'
+    }
+  };
+}
 /**
  * Calculates how one color would appear over another using a normal blend mode.
  * Colors can either be strings or functions, such as variable functions.
@@ -304,7 +295,6 @@ function colorWithAlpha(color, alpha) {
   };
 }
 var _default = {
-  reset: reset,
   clearfix: clearfix,
   ellipsis: ellipsis,
   printWidth100Percent: printWidth100Percent,
@@ -312,6 +302,7 @@ var _default = {
   printNoBackground: printNoBackground,
   printWrapAll: printWrapAll,
   screenReaderContent: screenReaderContent,
+  skipLink: skipLink,
   colorWithAlpha: colorWithAlpha,
   overlayColors: overlayColors
 };