@splunk/themes 0.10.1 → 0.13.0

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 Change Log
 ============
 
+0.13.0 - September 6, 2022
+----------
+New Features:
+* Added `typography` mixin (SUI-2809).
+
+0.12.0 - August 2, 2022
+----------
+New Features:
+* Added `zIndexLayer` variable (SUI-2809).
+
+API Changes:
+* Status and accent colors have been updated in Prisma themes.
+
+    The amount of distinct color values have been consolidated: e.g. `statusColorHigh` and `accentColorNegative` are both `#e00000`.
+
+    The contrast between these colors have been increased to improve accessibility (SUI-3758).
+
+0.11.0 - May 4, 2022
+----------
+New Features:
+* Added Data visualization colors to Prisma themes.
+
 0.10.1 - April 5, 2022
 ----------
 Bug Fixes:

package/enterprise/comfortable.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 
 /**
- * # Measures
+ * ## Measures
  * Spacing is used for margin on any element or padding on containers, but can be used for other
  * properties that position elements.
  *

package/enterprise/compact.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 
 /**
- * # Measures
+ * ## Measures
  * Spacing is used for margin on any element or padding on containers, but can be used for other
  * properties that position elements.
  * * Larger containers, such as `Card` or `Modal`, use `spacing`.

package/enterprise/light.js

@@ -14,7 +14,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var dragHandle = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA2SURBVHgB7dKhEQAgDAPAhDnxDMAcDIBnT1pZV1FRk3e53EWFc+2P4N3DmLN+oKh/QADqB+IMUKEQD/CeueAAAAAASUVORK5CYII="; // see babel-plugin-base64-pngimport {
 
 /**
- * # Brand Colors
+ * ## Brand colors
  *
  *  @colorSet
  */
@@ -33,7 +33,7 @@ var brandColors = {
   brandColorD50: '#286728'
 };
 /**
- * # Grayscale Colors
+ * ## Grayscale colors
  *
  * @colorSet
  */
@@ -53,7 +53,7 @@ var grays = {
   black: '#000000'
 };
 /**
- * # Accent Colors
+ * ## Accent colors
  *
  * @colorSet
  */
@@ -72,7 +72,7 @@ var accentColors = {
   accentColorD50: '#003d5e'
 };
 /**
- * # Error Colors
+ * ## Error Colors
  *
  * @colorSet
  */
@@ -91,7 +91,7 @@ var errorColors = {
   errorColorD50: '#6f261d'
 };
 /**
- * # Alert Colors
+ * ## Alert colors
  *
  * @colorSet
  * */
@@ -110,7 +110,7 @@ var alertColors = {
   alertColorD50: '#79401a'
 };
 /**
- * # Warning Colors
+ * ## Warning colors
  *
  *  @colorSet
  */
@@ -129,7 +129,7 @@ var warningColors = {
   warningColorD50: '#7d600f'
 };
 /**
- * # Success Colors
+ * ## Success colors
  *
  * @colorSet
  */
@@ -148,7 +148,7 @@ var successColors = {
   successColorD50: '#275126'
 };
 /**
- * # Info Colors
+ * ## Info colors
  *
  *  @colorSet
  */
@@ -167,7 +167,7 @@ var infoColors = {
   infoColorD50: '#002b3e'
 };
 /**
- * # Diverging Colors
+ * ## Diverging colors
  *
  * @colorSet alphabetical
  */
@@ -185,7 +185,7 @@ var divergingColors = {
   diverging5ColorB: '#b6c75a'
 };
 /**
- * # Categorical Colors
+ * ## Categorical Colors
  *
  * @colorSet alphabetical
  */
@@ -253,7 +253,7 @@ var categoricalColors = {
   cat30ColorL: '#a4bbe0'
 };
 /**
- * # Usage-based Colors
+ * ## Usage-based colors
  *
  * @colorSet verbose
  */
@@ -272,7 +272,7 @@ var usageColors = {
   transparent: 'transparent'
 };
 /**
- * # Syntax Colors
+ * ## Syntax colors
  * The following colors should only be used for syntax coloring of code.
  *
  * @colorSet verbose alphabetical
@@ -294,7 +294,7 @@ var syntaxColors = {
   syntaxTeal: '#00a8ab'
 };
 /**
- * # Shadows
+ * ## Shadows
  *
  * @shadowSet
  */
@@ -305,7 +305,7 @@ var shadows = {
   overlayShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
 };
 /**
- * # Backgrounds
+ * ## Backgrounds
  *
  * @colorSet verbose
  */
@@ -314,7 +314,7 @@ var backgrounds = {
   draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
 };
 /**
- * # Border
+ * ## Border
  *
  * @valueSet
  */
@@ -325,7 +325,7 @@ var borders = {
 };
 var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 /**
- * # Fonts
+ * ## Fonts
  *
  * @valueSet
  */
@@ -339,13 +339,14 @@ var fonts = {
   fontWeightSemiBold: '500'
 };
 /**
- * # Layers
+ * ## Layers
  * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
  *
  * @valueSet
  */
 
 var zindexes = {
+  zindexLayer: 1000,
   zindexFixedNavbar: 1030,
   zindexModalBackdrop: 1040,
   zindexModal: 1050,

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);
+  });
+});