@splunk/themes 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,23 +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).
+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 +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:
@@ -69,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:
@@ -98,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).
@@ -128,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:
@@ -167,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.
@@ -184,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).
@@ -212,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).
 
@@ -406,4 +421,4 @@ Notes:
 
 0.2.0 - June 30, 2018
 ----------
-* Initial Release
+* Initial Release.

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',

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;
@@ -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

@@ -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() {
@@ -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,41 @@ 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',
+      width: '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 +293,6 @@ function colorWithAlpha(color, alpha) {
   };
 }
 var _default = {
-  reset: reset,
   clearfix: clearfix,
   ellipsis: ellipsis,
   printWidth100Percent: printWidth100Percent,
@@ -312,6 +300,7 @@ var _default = {
   printNoBackground: printNoBackground,
   printWrapAll: printWrapAll,
   screenReaderContent: screenReaderContent,
+  skipLink: skipLink,
   colorWithAlpha: colorWithAlpha,
   overlayColors: overlayColors
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "main": "./index.js",
   "types": "./types/index.d.ts",

package/prisma/dark.js

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

package/prisma/light.js

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

package/splunk-magnetic/index.js

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