@splunk/themes 1.0.0-beta.3 → 1.0.0-beta.5

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+0.24.0 - May 6, 2025
+----------
+Bug Fixes:
+* Added `main` and `types` properties to package.json (SUI-7464).
+
 0.23.0 - February 5, 2025
 ----------
 Bug Fixes:

package/CHANGELOG.v1.md

@@ -1,6 +1,31 @@
 Change Log
 ============
 
+1.0.0-beta.5 - May 7, 2025
+----------
+New Features:
+* New `interactiveColorAccentErrorWeak` variable (SUI-7757).
+* `typography` has reintroduced the `withReset` prop, which defaults to `false`. When set to `true`, it removes all browser-default styles and applies theme-specific defaults (SUI-7638).
+
+1.0.0-beta.4 - April 22, 2025
+----------
+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.
+* `backgroundColorHover` have been deprecated. (SUI-7633).
+  * Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
+* `hoverShadow` has been deprecated. See notes on `backgroundColorHover` for hover affordances. (SUI-7621)
+
 1.0.0-beta.3 - April 2, 2025
 ----------
 New Features:

package/design-tokens/colors.js

@@ -195,7 +195,11 @@ var interactiveColors = {
   /**
    * Stronger error color for emphasis in Data Entry components. Used for hover interaction.
    */
-  interactiveColorAccentErrorStrong: ''
+  interactiveColorAccentErrorStrong: '',
+  /**
+   * Weaker error color for emphasis in Data Entry components. Used for hover interaction.
+   */
+  interactiveColorAccentErrorWeak: ''
 };
 
 /**
@@ -414,88 +418,6 @@ var severityColors = {
   severityColorEmergency: ''
 };
 
-/**
- * #### Status colors
- * Use status colors to convey informative, positive, caution or negative content status.
- * Weak variants do not meet graphical or text contrast and should only be used decoratively.
- *
- * @categoryColor
- */
-var statusColors = {
-  /**
-   * Default color for informational messages and notifications.
-   */
-  statusColorInfo: '',
-  /**
-   * Weaker, less prominent informational color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorInfoWeak: '',
-  /**
-   * Brighter, more prominent informational color.
-   */
-  statusColorInfoStrong: '',
-  /**
-   * Default color for neutral or standard status messages.
-   */
-  statusColorNormal: '',
-  /**
-   * Weaker, less prominent normal color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorNormalWeak: '',
-  /**
-   * Brighter, more prominent normal color.
-   */
-  statusColorNormalStrong: '',
-  /**
-   * Default color for low-priority status messages.
-   */
-  statusColorLow: '',
-  /**
-   * Weaker, less prominent low-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorLowWeak: '',
-  /**
-   * Brighter, more prominent low-priority color.
-   */
-  statusColorLowStrong: '',
-  /**
-   * Default color for medium-priority status messages.
-   */
-  statusColorMedium: '',
-  /**
-   * Weaker, less prominent medium-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorMediumWeak: '',
-  /**
-   * Brighter, more prominent medium-priority color.
-   */
-  statusColorMediumStrong: '',
-  /**
-   * Default color for high-priority status messages.
-   */
-  statusColorHigh: '',
-  /**
-   * Weaker, less prominent high-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorHighWeak: '',
-  /**
-   * Brighter, more prominent high-priority color.
-   */
-  statusColorHighStrong: '',
-  /**
-   * Default color for critical alerts or urgent messages.
-   */
-  statusColorCritical: '',
-  /**
-   * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
-   */
-  statusColorCriticalWeak: '',
-  /**
-   * Brighter, more prominent critical color.
-   */
-  statusColorCriticalStrong: ''
-};
-
 /**
  * #### Syntax colors
  *
@@ -539,6 +461,6 @@ var borderColors = {
    */
   borderColorStrong: ''
 };
-var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), notificationColors), severityColors), statusColors), syntaxColors), borderColors);
+var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), notificationColors), severityColors), syntaxColors), borderColors);
 var _default = colors;
 exports["default"] = _default;

package/design-tokens/deprecated.js

@@ -88,6 +88,76 @@ var deprecated = {
    * Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
    */
   backgroundColorHover: '',
+  /**
+   * Don't use hover shadows - see notes on backgroundColorHover for hover affordances.
+   */
+  hoverShadow: '',
+  /**
+   *  Use `notificationColorInfo` or `severityColorInfo`
+   */
+  statusColorInfo: '',
+  /**
+   *  Use `notificationColorInfoWeak`
+   */
+  statusColorInfoWeak: '',
+  /**
+   *  Use `notificationColorInfoStrong`
+   */
+  statusColorInfoStrong: '',
+  /**
+   * Use `notificationColorPositive` or `severityColorNormal`
+   */
+  statusColorNormal: '',
+  /**
+   * Use `notificationColorPositiveWeak`
+   */
+  statusColorNormalWeak: '',
+  /**
+   * Use `notificationColorPositiveStrong`
+   */
+  statusColorNormalStrong: '',
+  /**
+   * Use `notificationColorCaution` or `severityColorNotice`
+   */
+  statusColorLow: '',
+  /**
+   * Use `notificationColorCautionWeak`
+   */
+  statusColorLowWeak: '',
+  /**
+   * Use `notificationColorCautionStrong`
+   */
+  statusColorLowStrong: '',
+  /**
+   * Use `severityColorWarning`
+   */
+  statusColorMedium: '',
+  statusColorMediumWeak: '',
+  statusColorMediumStrong: '',
+  /**
+   * Use `notificationColorNegative` or `severityColorAlert`
+   */
+  statusColorHigh: '',
+  /**
+   * Use `notificationColorNegativeWeak`
+   */
+  statusColorHighWeak: '',
+  /**
+   * Use `notificationColorNegativeStrong`
+   */
+  statusColorHighStrong: '',
+  /**
+   * Default color for critical alerts or urgent messages.
+   */
+  statusColorCritical: '',
+  /**
+   * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorCriticalWeak: '',
+  /**
+   * Brighter, more prominent critical color.
+   */
+  statusColorCriticalStrong: '',
   brandColorL50: '',
   brandColorL40: '',
   brandColorL30: '',

package/design-tokens/elevation.js

@@ -38,7 +38,6 @@ var elevationShadows = {
   modalShadow: '',
   focusShadow: '',
   focusShadowInset: '',
-  hoverShadow: '',
   draggableBackground: ''
 };
 var elevation = _objectSpread(_objectSpread({}, zIndexes), elevationShadows);

package/design-tokens/spacing-sizing.js

@@ -37,6 +37,7 @@ var spacing = {
  */
 var measures = {
   borderRadius: '',
+  inputBorderWidth: '',
   inputHeight: ''
 };
 var spacingSizing = _objectSpread(_objectSpread({}, spacing), measures);

package/design-tokens/typography.js

@@ -59,6 +59,10 @@ var fontSize = {
  * @categoryValue
  */
 var fontMeasures = {
+  /**
+   * Use to improve readability and [accessibility](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html)
+   * in blocks of text by preventing overly long lines.
+   */
   lineLength: '',
   lineHeight: '1.5'
 };

package/enterprise/comfortable.js

@@ -18,6 +18,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '32px',
   borderRadius: '4px'
 };

package/enterprise/compact.js

@@ -18,6 +18,7 @@ var measures = {
   spacingXLarge: '24px',
   spacingXXLarge: '32px',
   spacingXXXLarge: '40px',
+  inputBorderWidth: '1px',
   inputHeight: '28px',
   borderRadius: '4px'
 };

package/enterprise/dark.js

@@ -14,11 +14,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 dragHandleDark = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA1SURBVHgB7dKhEQAgDAPAhHmwSKZHYtmHVtZVVNTkXS53UeG57yPYazLmrB8o6h8QgPqBOAOboRAPJUGIOAAAAABJRU5ErkJggg=="; // see babel-plugin-base64-png
 var dark = {
-  backgroundColorHover: _light["default"].gray30,
   borderColor: '#75797a',
   borderColorWeak: '#404547',
-  borderColorStrong: '#9c9fa0',
-  borderActiveColor: "rgba(225,225,225, 0.5)"
+  borderColorStrong: '#9c9fa0'
 };
 var notificationColors = {
   notificationColorInfoWeak: '#2E1B4B',
@@ -45,26 +43,6 @@ var severityColors = {
   severityColorCritical: '#F2638C',
   severityColorEmergency: '#E85FC6'
 };
-var statusColors = {
-  statusColorInfo: _light["default"].infoColor,
-  statusColorInfoWeak: _light["default"].infoColorD10,
-  statusColorInfoStrong: _light["default"].infoColorL10,
-  statusColorNormal: _light["default"].successColor,
-  statusColorNormalWeak: _light["default"].successColorD10,
-  statusColorNormalStrong: _light["default"].successColorL10,
-  statusColorLow: _light["default"].warningColor,
-  statusColorLowWeak: _light["default"].warningColorD10,
-  statusColorLowStrong: _light["default"].warningColorL10,
-  statusColorMedium: _light["default"].alertColor,
-  statusColorMediumWeak: _light["default"].alertColorD10,
-  statusColorMediumStrong: _light["default"].alertColorL10,
-  statusColorHigh: _light["default"].errorColor,
-  statusColorHighWeak: _light["default"].errorColorD10,
-  statusColorHighStrong: _light["default"].errorColorL10,
-  statusColorCritical: _light["default"].errorColorD10,
-  statusColorCriticalWeak: _light["default"].errorColorD20,
-  statusColorCriticalStrong: _light["default"].errorColor
-};
 var syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
@@ -137,7 +115,8 @@ var interactiveColors = {
   interactiveColorBackgroundDisabled: 'transparent',
   interactiveColorAccent: '#1A8929',
   interactiveColorAccentError: _light["default"].errorColorL10,
-  interactiveColorAccentErrorStrong: '#f1b9b3'
+  interactiveColorAccentErrorStrong: '#f1b9b3',
+  interactiveColorAccentErrorWeak: '#6f261d'
 };
 var neutralColors = {
   white: '#ffffff',
@@ -174,6 +153,8 @@ var shadows = {
 var deprecated = {
   backgroundColor: _light["default"].gray20,
   // @deprecated SUI-6656
+  backgroundColorHover: _light["default"].gray30,
+  borderActiveColor: "rgba(225,225,225, 0.5)",
   borderLightColor: _light["default"].gray60,
   // @deprecated, SUI-5981
   // @deprecated, SUI-6160
@@ -190,8 +171,26 @@ var deprecated = {
   border: "1px solid ".concat(_light["default"].gray22),
   borderDark: "1px solid ".concat(_light["default"].black),
   borderLight: "1px solid ".concat(_light["default"].gray60),
-  interactiveColorPrimary: _light["default"].brandColor
+  interactiveColorPrimary: _light["default"].brandColor,
+  statusColorInfo: _light["default"].infoColor,
+  statusColorInfoWeak: _light["default"].infoColorD10,
+  statusColorInfoStrong: _light["default"].infoColorL10,
+  statusColorNormal: _light["default"].successColor,
+  statusColorNormalWeak: _light["default"].successColorD10,
+  statusColorNormalStrong: _light["default"].successColorL10,
+  statusColorLow: _light["default"].warningColor,
+  statusColorLowWeak: _light["default"].warningColorD10,
+  statusColorLowStrong: _light["default"].warningColorL10,
+  statusColorMedium: _light["default"].alertColor,
+  statusColorMediumWeak: _light["default"].alertColorD10,
+  statusColorMediumStrong: _light["default"].alertColorL10,
+  statusColorHigh: _light["default"].errorColor,
+  statusColorHighWeak: _light["default"].errorColorD10,
+  statusColorHighStrong: _light["default"].errorColorL10,
+  statusColorCritical: _light["default"].errorColorD10,
+  statusColorCriticalWeak: _light["default"].errorColorD20,
+  statusColorCriticalStrong: _light["default"].errorColor
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), actionColors), notificationColors), severityColors), statusColors), backgroundColors), neutralColors), syntaxColors), contentColors), shadows), interactiveColors), deprecated), backgrounds);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), actionColors), notificationColors), severityColors), backgroundColors), neutralColors), syntaxColors), contentColors), shadows), interactiveColors), deprecated), backgrounds);
 var _default = theme;
 exports["default"] = _default;

package/enterprise/light.js

@@ -59,12 +59,10 @@ var neutralColors = {
   transparent: 'transparent'
 };
 var usageColors = {
-  borderActiveColor: "rgba(0,0,0, 0.5)",
   borderColor: '#8c8c8c',
   borderColorWeak: '#d6d6d6',
   borderColorStrong: '#666666',
-  focusColor: deprecatedEnterpriseColors.accentColorD10,
-  backgroundColorHover: deprecatedEnterpriseColors.gray96
+  focusColor: deprecatedEnterpriseColors.accentColorD10
 };
 var notificationColors = {
   notificationColorInfoWeak: '#F0E5FF',
@@ -91,26 +89,6 @@ var severityColors = {
   severityColorCritical: '#C2306F',
   severityColorEmergency: '#B53394'
 };
-var statusColors = {
-  statusColorInfo: deprecatedEnterpriseColors.infoColor,
-  statusColorInfoWeak: deprecatedEnterpriseColors.infoColorL10,
-  statusColorInfoStrong: deprecatedEnterpriseColors.infoColorD10,
-  statusColorNormal: deprecatedEnterpriseColors.successColor,
-  statusColorNormalWeak: deprecatedEnterpriseColors.successColorL10,
-  statusColorNormalStrong: deprecatedEnterpriseColors.successColorD10,
-  statusColorLow: deprecatedEnterpriseColors.warningColor,
-  statusColorLowWeak: deprecatedEnterpriseColors.warningColorL10,
-  statusColorLowStrong: deprecatedEnterpriseColors.warningColorD10,
-  statusColorMedium: deprecatedEnterpriseColors.alertColor,
-  statusColorMediumWeak: deprecatedEnterpriseColors.alertColorL10,
-  statusColorMediumStrong: deprecatedEnterpriseColors.alertColorD10,
-  statusColorHigh: deprecatedEnterpriseColors.errorColor,
-  statusColorHighWeak: deprecatedEnterpriseColors.errorColorL10,
-  statusColorHighStrong: deprecatedEnterpriseColors.errorColorD10,
-  statusColorCritical: deprecatedEnterpriseColors.errorColorD10,
-  statusColorCriticalWeak: deprecatedEnterpriseColors.errorColor,
-  statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20
-};
 var elevationShadows = {
   embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.07), 0px 0px 1px rgba(0, 0, 0, 0.07)',
   overlayShadow: '0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.06)',
@@ -203,7 +181,8 @@ var interactiveColors = {
   interactiveColorBackgroundDisabled: 'transparent',
   interactiveColorAccent: '#1A8929',
   interactiveColorAccentError: deprecatedEnterpriseColors.errorColorD20,
-  interactiveColorAccentErrorStrong: '#852d24'
+  interactiveColorAccentErrorStrong: '#852d24',
+  interactiveColorAccentErrorWeak: '#ea958d'
 };
 var backgrounds = {
   draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
@@ -240,6 +219,8 @@ var zindexes = {
 var deprecated = {
   backgroundColor: neutralColors.white,
   // @deprecated SUI-6656
+  backgroundColorHover: deprecatedEnterpriseColors.gray96,
+  borderActiveColor: "rgba(0,0,0, 0.5)",
   borderLightColor: deprecatedEnterpriseColors.gray92,
   // @deprecated SUI-5981
   // @deprecated SUI-6160
@@ -389,8 +370,26 @@ var deprecated = {
   syntaxGreenLight: '#5ba383',
   syntaxPurpleLight: '#b19cd9',
   syntaxRedLight: '#af575a',
-  interactiveColorPrimary: deprecatedEnterpriseColors.brandColor
+  interactiveColorPrimary: deprecatedEnterpriseColors.brandColor,
+  statusColorInfo: deprecatedEnterpriseColors.infoColor,
+  statusColorInfoWeak: deprecatedEnterpriseColors.infoColorL10,
+  statusColorInfoStrong: deprecatedEnterpriseColors.infoColorD10,
+  statusColorNormal: deprecatedEnterpriseColors.successColor,
+  statusColorNormalWeak: deprecatedEnterpriseColors.successColorL10,
+  statusColorNormalStrong: deprecatedEnterpriseColors.successColorD10,
+  statusColorLow: deprecatedEnterpriseColors.warningColor,
+  statusColorLowWeak: deprecatedEnterpriseColors.warningColorL10,
+  statusColorLowStrong: deprecatedEnterpriseColors.warningColorD10,
+  statusColorMedium: deprecatedEnterpriseColors.alertColor,
+  statusColorMediumWeak: deprecatedEnterpriseColors.alertColorL10,
+  statusColorMediumStrong: deprecatedEnterpriseColors.alertColorD10,
+  statusColorHigh: deprecatedEnterpriseColors.errorColor,
+  statusColorHighWeak: deprecatedEnterpriseColors.errorColorL10,
+  statusColorHighStrong: deprecatedEnterpriseColors.errorColorD10,
+  statusColorCritical: deprecatedEnterpriseColors.errorColorD10,
+  statusColorCriticalWeak: deprecatedEnterpriseColors.errorColor,
+  statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), statusColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/mixins/prose.js

@@ -9,7 +9,7 @@ var _variables = _interopRequireDefault(require("../variables"));
 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 _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        min-width: 34ch; // TODO: should this also be a variable?\n        max-width: ", ";\n        \n        //Word spacing: 0.16em\n        //Letter spacing (i.e., tracking): 0.12em\n\n        // style all block-level elements to be 1.5 margin-bottom by default\n        // wcag requirement 1.4.12\n         & *:is(", ") {\n            margin-block-end: 1.5rem;\n        }\n\n        ", ":where(h1):not(:first-child),\n        ", ":where(h2):not(:first-child) { \n            margin-block-start: 3rem;\n        }\n\n        ", ":where(img) {\n            max-width: 100%;\n        }\n\n        ", ":where(ol), ", ":where(ul) {\n            padding-inline-start: 2.5rem;\n        }\n    "]);
+  var data = _taggedTemplateLiteral(["\n        /* TODO: should this also be a variable? */\n        min-width: 34ch;\n        max-width: ", ";\n\n        /*\n        * Word spacing: 0.16em\n        * Letter spacing (i.e., tracking): 0.12em\n        */\n\n        /*\n        * Style all block-level elements to be 1.5 margin-bottom by default\n        * wcag requirement 1.4.12\n        */\n        & *:is(", "):not(:last-child) {\n            margin-block-end: 1lh;\n        }\n\n        /*\n        * Separate h1 and h2 into individual rules to avoid ts-styled-plugin\u2019s parser\n        * error on comma-separated, multi-line interpolations at the start of a selector.\n        */\n        ", ":where(h1):not(:first-child){\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(h2):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(img) {\n            max-width: 100%;\n        }\n\n        ", ":where(ol), ", ":where(ul) {\n            padding-inline-start: 2rem;\n        }\n    "]);
   _templateObject = function _templateObject() {
     return data;
   };

package/mixins/tests/prose.unit.js

@@ -26,7 +26,7 @@ describe('prose', function () {
     var Component = _styledComponents["default"].p(_templateObject(), (0, _prose["default"])());
     var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
       container = _render.container;
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              min-width: 34ch;\n              max-width: 80ch;\n            }\n\n            .c0 *:is(h1,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote) {\n              margin-block-end: 1.5rem;\n            }\n\n            .c0 h1:where(h1):not(:first-child),\n            .c0 h2:where(h2):not(:first-child) {\n              margin-block-start: 3rem;\n            }\n\n            .c0 img:where(img) {\n              max-width: 100%;\n            }\n\n            .c0 ol:where(ol),\n            .c0 ul:where(ul) {\n              padding-inline-start: 2.5rem;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              min-width: 34ch;\n              max-width: 80ch;\n            }\n\n            .c0 *:is(h1,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote):not(:last-child) {\n              margin-block-end: 1lh;\n            }\n\n            .c0 h1:where(h1):not(:first-child) {\n              margin-block-start: 1lh;\n            }\n\n            .c0 h2:where(h2):not(:first-child) {\n              margin-block-start: 1lh;\n            }\n\n            .c0 img:where(img) {\n              max-width: 100%;\n            }\n\n            .c0 ol:where(ol),\n            .c0 ul:where(ul) {\n              padding-inline-start: 2rem;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('supports custom element selectors', function () {
     var Component = _styledComponents["default"].p(_templateObject2(), (0, _prose["default"])({
@@ -36,7 +36,7 @@ describe('prose', function () {
     }));
     var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
       container = _render2.container;
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              min-width: 34ch;\n              max-width: 80ch;\n            }\n\n            .c0 *:is(.foo,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote) {\n              margin-block-end: 1.5rem;\n            }\n\n            .c0 .foo:where(h1):not(:first-child),\n            .c0 h2:where(h2):not(:first-child) {\n              margin-block-start: 3rem;\n            }\n\n            .c0 img:where(img) {\n              max-width: 100%;\n            }\n\n            .c0 ol:where(ol),\n            .c0 ul:where(ul) {\n              padding-inline-start: 2.5rem;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              min-width: 34ch;\n              max-width: 80ch;\n            }\n\n            .c0 *:is(.foo,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote):not(:last-child) {\n              margin-block-end: 1lh;\n            }\n\n            .c0 .foo:where(h1):not(:first-child) {\n              margin-block-start: 1lh;\n            }\n\n            .c0 h2:where(h2):not(:first-child) {\n              margin-block-start: 1lh;\n            }\n\n            .c0 img:where(img) {\n              max-width: 100%;\n            }\n\n            .c0 ol:where(ol),\n            .c0 ul:where(ul) {\n              padding-inline-start: 2rem;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it.skip('passes TS verification', function () {
     (0, _prose["default"])();

package/mixins/tests/typography.unit.js

@@ -10,8 +10,22 @@ var _typography = _interopRequireWildcard(require("../typography"));
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _templateObject7() {
+function _templateObject9() {
   var data = _taggedTemplateLiteral(["\n            ", "\n            ", ";\n            ", ";\n        "]);
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+  return data;
+}
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["\n                position: relative;\n\n                ", "\n            "]);
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+  return data;
+}
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n                margin: 8px;\n                padding: 12px;\n\n                ", "\n            "]);
   _templateObject7 = function _templateObject7() {
     return data;
   };
@@ -90,7 +104,7 @@ describe('typography', function () {
           component: Component
         })),
         container = _render.container;
-      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #b5b5b5;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                .c1 {\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #4d4d4d;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light compact\n                  </p>\n                </div>\n            ");
+      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  color: #b5b5b5;\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 0.875rem;\n                  font-weight: 400;\n                  line-height: 1.429;\n                }\n\n                .c1 {\n                  color: #4d4d4d;\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 0.875rem;\n                  font-weight: 400;\n                  line-height: 1.429;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light compact\n                  </p>\n                </div>\n            ");
     });
     it('enterprise', function () {
       var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
@@ -98,7 +112,7 @@ describe('typography', function () {
           component: Component
         })),
         container = _render2.container;
-      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #e1e6eb;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                .c1 {\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #5c6773;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light compact\n                  </p>\n                </div>\n            ");
+      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  color: #e1e6eb;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 0.875rem;\n                  font-weight: 400;\n                  line-height: 1.429;\n                }\n\n                .c1 {\n                  color: #5c6773;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 0.875rem;\n                  font-weight: 400;\n                  line-height: 1.429;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light compact\n                  </p>\n                </div>\n            ");
     });
   });
   describe('support variants in each theme', function () {
@@ -131,7 +145,7 @@ describe('typography', function () {
     }));
     var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
       container = _render4.container;
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 0.875rem;\n              line-height: 1.429;\n              font-weight: 400;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 0.875rem;\n              font-weight: 400;\n              line-height: 1.429;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('allows a variants values to be overridden', function () {
     var Component = _styledComponents["default"].p(_templateObject4(), (0, _typography["default"])('body', {
@@ -143,7 +157,7 @@ describe('typography', function () {
     }));
     var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
       container = _render5.container;
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 1.5rem;\n              line-height: 1;\n              font-weight: 900;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 1.5rem;\n              font-weight: 900;\n              line-height: 1;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('allows default values to be overridden with params', function () {
     var Component = _styledComponents["default"].p(_templateObject5(), (0, _typography["default"])({
@@ -155,7 +169,7 @@ describe('typography', function () {
     }));
     var _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
       container = _render6.container;
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 1.5rem;\n              line-height: 1;\n              font-weight: 900;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 1.5rem;\n              font-weight: 900;\n              line-height: 1;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('transforms params that are shorthand properly to CSS', function () {
     var Component = _styledComponents["default"].p(_templateObject6(), (0, _typography["default"])({
@@ -167,7 +181,28 @@ describe('typography', function () {
     }));
     var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
       container = _render7.container;
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 1.5rem;\n              line-height: 1;\n              font-weight: 900;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 1.5rem;\n              font-weight: 900;\n              line-height: 1;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+  });
+  describe('withReset parameter', function () {
+    it('applies reset when `withReset` is true', function () {
+      var Component = _styledComponents["default"].p(_templateObject7(), (0, _typography["default"])({
+        withReset: true
+      }));
+      var _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null, "hello")),
+        container = _render8.container;
+      var node = container.firstChild;
+      expect(node).toHaveStyleRule('margin', '0');
+      expect(node).toHaveStyleRule('padding', '0');
+    });
+    it('preserves existing style when `withReset` is false', function () {
+      var Component = _styledComponents["default"].p(_templateObject8(), (0, _typography["default"])({
+        withReset: false
+      }));
+      var _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null, "hello")),
+        container = _render9.container;
+      var node = container.firstChild;
+      expect(node).toHaveStyleRule('position', 'relative');
+    });
   });
   it.skip('passes TS verification', function () {
     (0, _typography["default"])();
@@ -203,7 +238,7 @@ describe('typography', function () {
 describe('passes TS verification', function () {
   it.skip('allows mixins in styled-components css', function () {
     /* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
-    (0, _styledComponents.css)(_templateObject7(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
+    (0, _styledComponents.css)(_templateObject9(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
       color: 'disabled'
     }), (0, _typography["default"])({
       family: 'monospace'