@splunk/themes 0.12.0 → 0.13.1

package/CHANGELOG.md

@@ -1,6 +1,15 @@
 Change Log
 ============
 
+0.13.1 - December 6, 2022
+----------
+* Optimizes bundle sizes of consumers by reducing footprint of "lodash" (SUI-5090).
+
+0.13.0 - September 6, 2022
+----------
+New Features:
+* Added `typography` mixin (SUI-2809).
+
 0.12.0 - August 2, 2022
 ----------
 New Features:
@@ -27,7 +36,7 @@ Bug Fixes:
 
   `styled-components@5.2.0` changed how selectors like `& + &` are compiled; [styled-components PR#3236](https://github.com/styled-components/styled-components/pull/3236).
   This breaks styles that worked in previous versions of styled-components; [styled-components issue #3265](https://github.com/styled-components/styled-components/issues/3265).
-  
+
   **Until noted otherwise in a future release of `@splunk/themes` do not use `styled-components@^5.2.0` with` @splunk/themes`**.
 
 0.10.0 - February 23, 2022
@@ -68,7 +77,7 @@ API Changes:
 * `lite` theme removed. That is, the orange theme for the Splunk Light product was removed.
 * New `SplunkThemeProvider`.
 * New `pick()` function for switching css blocks and variables in styled-components templates.
-* Individual themes are no longer exported directly. 
+* Individual themes are no longer exported directly.
     * Use `useSplunkTheme()` for variables in React components;
     * Use `variables` for variables in styled-components templates;
     * Use `getTheme()` should you need a full list of theme variables for use outside of React and styled-components;

package/mixins/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  typography: true
+};
+Object.defineProperty(exports, "typography", {
+  enumerable: true,
+  get: function get() {
+    return _typography["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _utilityMixins = _interopRequireWildcard(require("./utilityMixins"));
+
+Object.keys(_utilityMixins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utilityMixins[key];
+    }
+  });
+});
+
+var _typography = _interopRequireWildcard(require("./typography"));
+
+Object.keys(_typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _typography[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = _objectSpread(_objectSpread({}, _utilityMixins["default"]), {}, {
+  typography: _typography["default"]
+});
+
+exports["default"] = _default;

package/mixins/tests/typography.unit.js

@@ -0,0 +1,236 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _SplunkThemeProvider = _interopRequireDefault(require("@splunk/themes/SplunkThemeProvider"));
+
+require("jest-styled-components");
+
+var _typography = _interopRequireWildcard(require("../typography"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n            ", "\n            ", ";\n            ", ";\n        "]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n                    ", "\n                "]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+describe('typography', function () {
+  function ThemeSettingsList(_ref) {
+    var family = _ref.family,
+        Component = _ref.component;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
+      family: family,
+      colorScheme: "dark",
+      density: "comfortable"
+    }, /*#__PURE__*/_react["default"].createElement(Component, null, family, " dark comfortable")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
+      family: family,
+      colorScheme: "light",
+      density: "comfortable"
+    }, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light comfortable")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
+      family: family,
+      colorScheme: "dark",
+      density: "compact"
+    }, /*#__PURE__*/_react["default"].createElement(Component, null, family, " dark compact")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
+      family: family,
+      colorScheme: "light",
+      density: "compact"
+    }, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light compact")));
+  }
+
+  describe('uses default values based on theme family', function () {
+    var Component = _styledComponents["default"].p(_templateObject(), (0, _typography["default"])());
+
+    it('prisma', function () {
+      var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
+        family: "prisma",
+        component: Component
+      })),
+          container = _render.container;
+
+      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: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\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: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\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, {
+        family: "enterprise",
+        component: Component
+      })),
+          container = _render2.container;
+
+      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  color: #ffffff;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c1 {\n                  color: #3c444d;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c2 {\n                  color: #ffffff;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 12px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c3 {\n                  color: #3c444d;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 12px;\n                  font-weight: normal;\n                  line-height: 20px;\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=\"c2\"\n                  >\n                    enterprise\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c3\"\n                  >\n                    enterprise\n                     light compact\n                  </p>\n                </div>\n            ");
+    });
+  });
+  describe('support variants in each theme', function () {
+    function testTypographyVariantForThemeFamily(variant, family) {
+      it("".concat(variant), function () {
+        var Component = _styledComponents["default"].p(_templateObject2(), (0, _typography["default"])(variant));
+
+        var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
+          family: family,
+          component: Component
+        })),
+            container = _render3.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    }
+
+    describe('prisma', function () {
+      _typography.typographyVariants.forEach(function (variant) {
+        return testTypographyVariantForThemeFamily(variant, 'prisma');
+      });
+    });
+    describe('enterprise', function () {
+      _typography.typographyVariants.forEach(function (variant) {
+        return testTypographyVariantForThemeFamily(variant, 'enterprise');
+      });
+    });
+  });
+  it('merges parameters with variant values', function () {
+    var Component = _styledComponents["default"].p(_templateObject3(), (0, _typography["default"])('body', {
+      color: 'muted',
+      family: 'monospace'
+    }));
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
+        container = _render4.container;
+
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              margin: 0;\n              padding: 0;\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 14px;\n              font-weight: normal;\n              line-height: 20px;\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', {
+      color: 'muted',
+      family: 'monospace',
+      lineHeight: 64,
+      size: 56,
+      weight: 'extraBold',
+      withReset: false
+    }));
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
+        container = _render5.container;
+
+    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: 56px;\n              font-weight: extraBold;\n              line-height: 64px;\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"])({
+      color: 'muted',
+      family: 'monospace',
+      lineHeight: 64,
+      size: 56,
+      weight: 'extraBold',
+      withReset: false
+    }));
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
+        container = _render6.container;
+
+    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: 56px;\n              font-weight: extraBold;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+  });
+  it.skip('passes TS verification', function () {
+    (0, _typography["default"])();
+    (0, _typography["default"])({});
+    (0, _typography["default"])('title1');
+    (0, _typography["default"])('title1', {
+      color: 'disabled'
+    });
+    (0, _typography["default"])({
+      family: 'monospace'
+    }); // @ts-expect-error
+
+    (0, _typography["default"])('foo'); // @ts-expect-error
+
+    (0, _typography["default"])({
+      family: 'monospace'
+    }, true); // @ts-expect-error
+
+    (0, _typography["default"])({
+      family: 'monospace'
+    }, {
+      color: 'disabled'
+    }); // @ts-expect-error
+
+    (0, _typography["default"])(''); // @ts-expect-error
+
+    (0, _typography["default"])({
+      variant: 'title1'
+    });
+  });
+});
+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)(_templateObject6(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
+      color: 'disabled'
+    }), (0, _typography["default"])({
+      family: 'monospace'
+    }));
+  });
+});

package/mixins/tests/utilityMixins.unit.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _chai = require("chai");
+
+var _sinon = require("sinon");
+
+var _styledComponents = require("styled-components");
+
+var _variables = _interopRequireDefault(require("../../variables"));
+
+var _utilityMixins = require("../utilityMixins");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", "\n            ", "\n            ", ";\n        "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+describe('colorWithAlpha', function () {
+  var defaultProps = {};
+  var enterpriseLightProps = {
+    theme: {
+      splunkThemeV1: {
+        family: 'enterprise',
+        colorScheme: 'light'
+      }
+    }
+  };
+  it('sets alpha on a string value', function () {
+    var result = (0, _utilityMixins.colorWithAlpha)('#70f', 0.5)(defaultProps);
+
+    _chai.assert.strictEqual(result, 'rgba(119, 0, 255, 0.5)');
+
+    var result2 = (0, _utilityMixins.colorWithAlpha)('#1700f3', 0.5)(defaultProps);
+
+    _chai.assert.strictEqual(result2, 'rgba(23, 0, 243, 0.5)');
+
+    var result3 = (0, _utilityMixins.colorWithAlpha)('rgb(51, 162, 212)', 0.2)(defaultProps);
+
+    _chai.assert.strictEqual(result3, 'rgba(51, 162, 212, 0.2)');
+
+    var result4 = (0, _utilityMixins.colorWithAlpha)('rgba(255, 255, 255, 0.7)', 0.2)(defaultProps);
+
+    _chai.assert.strictEqual(result4, 'rgba(255, 255, 255, 0.2)');
+  });
+  it('sets alpha on a variable', function () {
+    var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 0.5)(defaultProps);
+
+    _chai.assert.strictEqual(result, 'rgba(255, 255, 255, 0.5)');
+
+    var result2 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.2)(defaultProps);
+
+    _chai.assert.strictEqual(result2, 'rgba(181, 181, 181, 0.2)');
+
+    var result3 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.3)(enterpriseLightProps);
+
+    _chai.assert.strictEqual(result3, 'rgba(60, 68, 77, 0.3)');
+
+    var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(enterpriseLightProps);
+
+    _chai.assert.strictEqual(result4, 'rgba(92, 192, 92, 0.3)');
+  });
+  it('defaults to black for undefined variable', function () {
+    var consoleStub = (0, _sinon.stub)(console, 'warn');
+    var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(defaultProps);
+
+    _chai.assert.strictEqual(result4, 'rgba(0, 0, 0, 0.3)');
+
+    _chai.assert.isTrue(consoleStub.calledOnce, "The colorWithAlpha's console warning was called");
+
+    _chai.assert.strictEqual(consoleStub.args[0][0], "The variable 'brandColor' does not exist in the theme 'prisma dark comfortable'.");
+
+    consoleStub.restore();
+  });
+  it('warns developers of invalid alpha prop at runtime', function () {
+    var consoleStub = (0, _sinon.stub)(console, 'warn');
+    (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 1.1)(defaultProps);
+    (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, -0.1)(defaultProps);
+
+    _chai.assert.isTrue(consoleStub.calledTwice, "The colorWithAlpha's console warning was called twice");
+
+    _chai.assert.strictEqual(consoleStub.args[0][0], 'The alpha value "1.1" is not within acceptable 0-1 range.');
+
+    _chai.assert.strictEqual(consoleStub.args[1][0], 'The alpha value "-0.1" is not within acceptable 0-1 range.');
+
+    consoleStub.restore();
+  });
+});
+describe('overlayColors', function () {
+  var defaultProps = {};
+  it('overlays two string values', function () {
+    var result = (0, _utilityMixins.overlayColors)('#f0f', 'rgba(255, 255, 128, 0.5)')(defaultProps);
+
+    _chai.assert.strictEqual(result, 'rgb(255, 128, 192)');
+  });
+  it('overlays a solid color', function () {
+    var result = (0, _utilityMixins.overlayColors)('#f39', _variables["default"].black)(defaultProps);
+
+    _chai.assert.strictEqual(result, 'rgb(0, 0, 0)');
+  });
+  it('uses default theme variables', function () {
+    var result = (0, _utilityMixins.overlayColors)(_variables["default"].interactiveColorPrimary, _variables["default"].interactiveColorOverlayHover)(defaultProps);
+
+    _chai.assert.strictEqual(result, 'rgb(67, 152, 255)');
+  });
+  var enterpriseLightProps = {
+    theme: {
+      splunkThemeV1: {
+        family: 'enterprise',
+        colorScheme: 'light'
+      }
+    }
+  };
+  it('uses Enterprise variables', function () {
+    var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(enterpriseLightProps);
+
+    _chai.assert.strictEqual(result, 'rgb(174, 224, 174)');
+  });
+  it('defaults to black for undefined colors', function () {
+    var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(defaultProps);
+
+    _chai.assert.strictEqual(result, 'rgb(128, 128, 128)');
+  });
+});
+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)(_templateObject(), _utilityMixins.clearfix, (0, _utilityMixins.colorWithAlpha)('foo', 0.5), _utilityMixins.ellipsis, (0, _utilityMixins.overlayColors)('foo', 'bar'), _utilityMixins.printHide, _utilityMixins.printNoBackground, _utilityMixins.printWidth100Percent, _utilityMixins.printWrapAll, (0, _utilityMixins.reset)(), (0, _utilityMixins.reset)('block'), _utilityMixins.screenReaderContent);
+  });
+});

package/mixins/typography.js

@@ -0,0 +1,270 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typographyVariants = exports["default"] = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n                    margin: 0;\n                    padding: 0;\n                "]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n        ", "\n\n        color: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        line-height: ", ";\n    "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var typographyVariants = ['body', 'title1', 'title2', 'title3', 'title4', 'title5', 'title6', 'title7', 'largeBody', 'smallBody', 'footnote', 'monoBody', 'monoSmallBody'];
+exports.typographyVariants = typographyVariants;
+
+function isTypographyVariant(s) {
+  if (typeof s !== 'string') {
+    return false;
+  }
+
+  return typographyVariants.includes(s);
+}
+
+function getStylesForVariant(variant) {
+  var color = _variables["default"].contentColorDefault;
+  var family = _variables["default"].fontFamily;
+  var lineHeight = _variables["default"].lineHeight; // eslint-disable-line prefer-destructuring
+
+  var size = _variables["default"].fontSize;
+  var weight = 'normal';
+
+  switch (variant) {
+    case 'title1':
+      color = _variables["default"].contentColorActive;
+      lineHeight = '40px';
+      size = '36px';
+      weight = _variables["default"].fontWeightBold;
+      break;
+
+    case 'title2':
+      color = _variables["default"].contentColorActive;
+      lineHeight = '48px';
+      size = _variables["default"].fontSizeXXLarge;
+      weight = _variables["default"].fontWeightBold;
+      break;
+
+    case 'title3':
+      color = _variables["default"].contentColorActive;
+      lineHeight = '24px';
+      size = '20px';
+      weight = _variables["default"].fontWeightBold;
+      break;
+
+    case 'title4':
+      color = _variables["default"].contentColorActive;
+      lineHeight = '22px';
+      size = _variables["default"].fontSizeLarge;
+      weight = _variables["default"].fontWeightBold;
+      break;
+
+    case 'title5':
+      color = _variables["default"].contentColorActive;
+      lineHeight = _variables["default"].lineHeight;
+      size = _variables["default"].fontSize;
+      weight = _variables["default"].fontWeightBold;
+      break;
+
+    case 'title6':
+      color = _variables["default"].contentColorActive;
+      lineHeight = _variables["default"].lineHeight;
+      size = _variables["default"].fontSize;
+      weight = _variables["default"].fontWeightSemiBold;
+      break;
+
+    case 'title7':
+      color = _variables["default"].contentColorActive;
+      lineHeight = '16px';
+      size = _variables["default"].fontSizeSmall;
+      weight = _variables["default"].fontWeightSemiBold;
+      break;
+
+    case 'largeBody':
+      color = _variables["default"].contentColorDefault;
+      lineHeight = '24px';
+      size = _variables["default"].fontSizeLarge;
+      weight = 'normal';
+      break;
+
+    case 'smallBody':
+      color = _variables["default"].contentColorDefault;
+      lineHeight = '16px';
+      size = _variables["default"].fontSizeSmall;
+      weight = 'normal';
+      break;
+
+    case 'footnote':
+      color = _variables["default"].contentColorDefault;
+      lineHeight = '13px';
+      size = '10px';
+      weight = 'normal';
+      break;
+
+    case 'monoBody':
+      family = _variables["default"].monoFontFamily;
+      break;
+
+    case 'monoSmallBody':
+      color = _variables["default"].contentColorDefault;
+      family = _variables["default"].monoFontFamily;
+      lineHeight = '16px';
+      size = _variables["default"].fontSizeSmall;
+      weight = 'normal';
+      break;
+
+    case 'body':
+      // Theme defaults set the 'body' style
+      break;
+
+    default:
+      {
+        if (false) {
+          // eslint-disable-next-line no-console
+          console.log("Unknown typography variant, ".concat(variant, ". Using default values for theme."));
+        } // Make sure this "never" happens https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
+
+
+        var exhaustiveCheck = variant;
+        return exhaustiveCheck;
+      }
+  }
+
+  return {
+    color: color,
+    family: family,
+    size: size,
+    weight: weight,
+    lineHeight: lineHeight,
+    withReset: true
+  };
+}
+
+var colorPropToVariableMap = {
+  active: _variables["default"].contentColorActive,
+  "default": _variables["default"].contentColorDefault,
+  disabled: _variables["default"].contentColorDisabled,
+  inverted: _variables["default"].contentColorInverted,
+  muted: _variables["default"].contentColorMuted
+};
+var familyPropToVariableMap = {
+  sansSerif: _variables["default"].sansFontFamily,
+  monospace: _variables["default"].monoFontFamily
+};
+/**
+ * A mixin for styling text content using predefined typography variants
+ * and/or customizing font-settings with system parameters: e.g. size, weight, font-family.
+ *
+ * The default variant is `body` and will be used if no variant or settings
+ * are given: i.e. `typography()` or `typography({})`.
+ * Variants have the reset applied by default.
+ *
+ *  ##### Example
+ *  ```js
+ *  import styled from 'styled-components';
+ *  import { typography } from '@splunk/themes/mixins';
+ *
+ *  const MyTitle = styled.h1`
+ *      ${typography('title1')};
+ *  `;
+ *
+ *  const MyCustomizedTitle = styled.h1`
+ *      ${typography('title1', { color: 'inverted' })};
+ *  `;
+ *
+ *  const CustomTitle = styled.h1`
+ *      ${typography({size: 56, weight: 'light', color: 'inverted' })};
+ *  `;
+ *  ```
+ * @name typography
+ * @kind function
+ * @param {string} [variant] Use a predefined typography variant:
+ *  `'body'`,
+ *  `'title1'`,
+ *  `'title2'`,
+ *  `'title3'`,
+ *  `'title4'`,
+ *  `'title5'`,
+ *  `'subtitle'`,
+ *  `'smallSubtitle'`,
+ *  `'largeBody'`,
+ *  `'smallBody'`,
+ *  `'footnote'`,
+ *  `'monoBody'`, or
+ *  `'monoSmallBody'`,
+ * @param {object} [typographyParams] Customize the font settings or element using system values for: `family`, `size`, `lineHeight`, `color`, and `weight`.
+ * Default margin and padding can be removed with `withReset`.
+ * @public
+ */
+
+function typography(variantOrParams, additionalParams) {
+  var variant = isTypographyVariant(variantOrParams) ? variantOrParams : undefined;
+  var params;
+
+  if (variant && additionalParams !== undefined) {
+    params = additionalParams;
+  } else if (variant === undefined && _typeof(variantOrParams) === 'object' && additionalParams === undefined) {
+    params = variantOrParams;
+  } else {
+    params = {};
+  }
+
+  var variantParams = variant ? getStylesForVariant(variant) : {}; // Transform params to be ready for css literal below: i.e size="24" -> "24px"
+
+  var transformedParams = _objectSpread(_objectSpread({}, params), {}, {
+    size: params.size ? "".concat(params.size, "px") : undefined,
+    lineHeight: params.lineHeight ? "".concat(params.lineHeight, "px") : undefined,
+    color: params.color ? colorPropToVariableMap[params.color] : undefined,
+    family: params.family ? familyPropToVariableMap[params.family] : undefined
+  });
+
+  var defaultTypographyParams = {
+    color: _variables["default"].contentColorDefault,
+    family: _variables["default"].fontFamily,
+    size: _variables["default"].fontSize,
+    weight: 'normal',
+    lineHeight: _variables["default"].lineHeight,
+    withReset: false
+  };
+  var finalParams = (0, _merge["default"])(defaultTypographyParams, variantParams, transformedParams);
+  return function () {
+    return (0, _styledComponents.css)(_templateObject(), function () {
+      return finalParams.withReset && (0, _styledComponents.css)(_templateObject2());
+    }, finalParams.color, finalParams.family, finalParams.size, finalParams.weight, finalParams.lineHeight);
+  };
+}
+
+var _default = typography;
+exports["default"] = _default;

package/{mixins.js → mixins/utilityMixins.js}

@@ -20,9 +20,9 @@ var _styledComponents = require("styled-components");
 
 var _colorBlend = require("color-blend");
 
-var _variables = _interopRequireDefault(require("./variables"));
+var _variables = _interopRequireDefault(require("../variables"));
 
-var _pick = _interopRequireDefault(require("./pick"));
+var _pick = _interopRequireDefault(require("../pick"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -108,7 +108,7 @@ function clearfix() {
  *  import { ellipsis } from '@splunk/themes/mixins';
  *
  *  const myBlock = styled.div`
- *      ${clearfix()};
+ *      ${ellipsis()};
  *      width: 300px;
  *  `
  *  ```

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@splunk/themes",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
     "build": "cross-env NODE_ENV=production yarn babel && yarn types:build",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
     "docs:publish": "cicd-publish-docs docs --force",
-    "docs:start": "webpack serve --config docs.gen.webpack.config.js",
+    "docs:publish:external": "cicd-publish-docs docs-external --force --suffix=public",
+    "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
+    "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
     "lint": "eslint src --ext \".ts,.tsx,.js,.jsx\"",
     "lint:ci": "yarn run lint -- -f junit -o test-reports/lint-results.xml",
     "start": "yarn babel --watch",
@@ -64,7 +66,7 @@
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.0",
     "@splunk/babel-preset": "^3.0.0",
-    "@splunk/cicd-tools": "^0.4.0",
+    "@splunk/cicd-tools": "^0.5.0",
     "@splunk/eslint-config": "^4.0.0",
     "@storybook/addon-docs": "^6.5.9",
     "@storybook/addons": "^6.5.9",
@@ -87,6 +89,7 @@
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.5",
     "jest": "^25.1.0",
+    "jest-styled-components": "^7.0.8",
     "react": "^16.12.0",
     "styled-components": "5.1.1",
     "typescript": "^4.0.5",

package/types/mixins/index.d.ts

@@ -0,0 +1,18 @@
+import typography from './typography';
+export * from './utilityMixins';
+export { default as typography } from './typography';
+export * from './typography';
+declare const _default: {
+    typography: typeof typography;
+    reset: <T extends import("../types").AnyTheme, A extends import("../types").ThemedProps<import("../types").AnyTheme>>(display?: string) => import("../types").Interpolation<T, A>;
+    clearfix: typeof import("./utilityMixins").clearfix;
+    ellipsis: typeof import("./utilityMixins").ellipsis;
+    printWidth100Percent: typeof import("./utilityMixins").printWidth100Percent;
+    printHide: typeof import("./utilityMixins").printHide;
+    printNoBackground: typeof import("./utilityMixins").printNoBackground;
+    printWrapAll: typeof import("./utilityMixins").printWrapAll;
+    screenReaderContent: typeof import("./utilityMixins").screenReaderContent;
+    colorWithAlpha: typeof import("./utilityMixins").colorWithAlpha;
+    overlayColors: typeof import("./utilityMixins").overlayColors;
+};
+export default _default;

package/types/mixins/tests/typography.unit.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/types/mixins/typography.d.ts

@@ -0,0 +1,83 @@
+import { AnyTheme, Interpolation, ThemedProps } from '../types';
+declare const typographyVariants: readonly ["body", "title1", "title2", "title3", "title4", "title5", "title6", "title7", "largeBody", "smallBody", "footnote", "monoBody", "monoSmallBody"];
+declare type TypographyVariant = typeof typographyVariants[number];
+interface TypographyParams {
+    /**
+     * Set the font-family to sans-serif or monospace based on current theme.
+     */
+    family?: 'sansSerif' | 'monospace';
+    /**
+     * Set the size to a system-standard size.
+     */
+    size?: 56 | 36 | 32 | 24 | 20 | 18 | 16 | 14 | 12 | 10;
+    /**
+     * Set the line-height to a system-standard size.
+     */
+    lineHeight?: 64 | 40 | 32 | 28 | 24 | 22 | 20 | 16 | 13;
+    /**
+     * Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`.
+     */
+    color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted';
+    /**
+     * Set the font-weight to a system-standard value.
+     *
+     * Number or equivalent string can be used.
+     * See: [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+     */
+    weight?: 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
+    /**
+     * Apply a reset to the element's margin and padding. This defaults to true if using a `variant`.
+     */
+    withReset?: boolean;
+}
+/**
+ * A mixin for styling text content using predefined typography variants
+ * and/or customizing font-settings with system parameters: e.g. size, weight, font-family.
+ *
+ * The default variant is `body` and will be used if no variant or settings
+ * are given: i.e. `typography()` or `typography({})`.
+ * Variants have the reset applied by default.
+ *
+ *  ##### Example
+ *  ```js
+ *  import styled from 'styled-components';
+ *  import { typography } from '@splunk/themes/mixins';
+ *
+ *  const MyTitle = styled.h1`
+ *      ${typography('title1')};
+ *  `;
+ *
+ *  const MyCustomizedTitle = styled.h1`
+ *      ${typography('title1', { color: 'inverted' })};
+ *  `;
+ *
+ *  const CustomTitle = styled.h1`
+ *      ${typography({size: 56, weight: 'light', color: 'inverted' })};
+ *  `;
+ *  ```
+ * @name typography
+ * @kind function
+ * @param {string} [variant] Use a predefined typography variant:
+ *  `'body'`,
+ *  `'title1'`,
+ *  `'title2'`,
+ *  `'title3'`,
+ *  `'title4'`,
+ *  `'title5'`,
+ *  `'subtitle'`,
+ *  `'smallSubtitle'`,
+ *  `'largeBody'`,
+ *  `'smallBody'`,
+ *  `'footnote'`,
+ *  `'monoBody'`, or
+ *  `'monoSmallBody'`,
+ * @param {object} [typographyParams] Customize the font settings or element using system values for: `family`, `size`, `lineHeight`, `color`, and `weight`.
+ * Default margin and padding can be removed with `withReset`.
+ * @public
+ */
+declare function typography<T extends AnyTheme, A extends ThemedProps>(): Interpolation<T, A>;
+declare function typography<T extends AnyTheme, A extends ThemedProps>(variant: TypographyVariant): Interpolation<T, A>;
+declare function typography<T extends AnyTheme, A extends ThemedProps>({ family, size, lineHeight, color, weight, withReset, }: TypographyParams): Interpolation<T, A>;
+declare function typography<T extends AnyTheme, A extends ThemedProps>(variant: TypographyVariant, additionalParams: TypographyParams): Interpolation<T, A>;
+export default typography;
+export { typographyVariants, TypographyVariant, TypographyParams };

package/types/{mixins.d.ts → mixins/utilityMixins.d.ts}

@@ -1,5 +1,5 @@
 import { CSSObject } from 'styled-components';
-import { AnyTheme, Interpolation, ThemedProps, OptionalThemedProps } from './types';
+import { AnyTheme, Interpolation, ThemedProps, OptionalThemedProps } from '../types';
 /**
  * @file
  * A collection of style-related helper functions. All of them return a single object containing
@@ -51,7 +51,7 @@ export declare function clearfix(): {
  *  import { ellipsis } from '@splunk/themes/mixins';
  *
  *  const myBlock = styled.div`
- *      ${clearfix()};
+ *      ${ellipsis()};
  *      width: 300px;
  *  `
  *  ```

package/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCustomizedTheme = exports.addThemeDefaults = void 0;
 
-var _lodash = require("lodash");
+var _memoize = _interopRequireDefault(require("lodash/memoize"));
 
 var _getTheme = _interopRequireDefault(require("./getTheme"));
 
@@ -66,7 +66,7 @@ function getCustomizedThemeUnmemo(settings, customizer) {
  */
 
 
-var getCustomizedTheme = (0, _lodash.memoize)(getCustomizedThemeUnmemo, function () {
+var getCustomizedTheme = (0, _memoize["default"])(getCustomizedThemeUnmemo, function () {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       family = _ref2.family,
       colorScheme = _ref2.colorScheme,