@splunk/themes 0.10.1 → 0.13.0

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 _lodash = require("lodash");
+
+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-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, _lodash.merge)(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 }; }
 

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@splunk/themes",
-  "version": "0.10.1",
+  "version": "0.13.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
-    "build": "cross-env NODE_ENV=production babel src -d . --ignore src/babel-plugin-base64-png,src/tests --extensions .js,.ts,.tsx && yarn types:build",
+    "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",
     "lint": "eslint src --ext \".ts,.tsx,.js,.jsx\"",
     "lint:ci": "yarn run lint -- -f junit -o test-reports/lint-results.xml",
-    "start": "babel src -d . --watch --ignore src/babel-plugin-base64-png,src/tests --extensions .js,.ts,.tsx",
+    "start": "yarn babel --watch",
     "test": "jest",
     "test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
     "test:watch": "jest --watch",
-    "types:build": "tsc",
+    "types:build": "tsc --emitDeclarationOnly --declaration",
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
@@ -60,12 +64,13 @@
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.0",
     "@splunk/babel-preset": "^3.0.0",
+    "@splunk/cicd-tools": "^0.4.0",
     "@splunk/eslint-config": "^4.0.0",
-    "@storybook/addon-docs": "^6.0.28",
-    "@storybook/addons": "^6.0.28",
-    "@storybook/api": "^6.0.28",
-    "@storybook/components": "^6.0.28",
-    "@storybook/theming": "^6.0.28",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/api": "^6.5.9",
+    "@storybook/components": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@typescript-eslint/eslint-plugin": "^3.4.0",
     "@typescript-eslint/parser": "^3.4.0",
     "babel-eslint": "^10.1.0",
@@ -82,9 +87,14 @@
     "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"
+    "typescript": "^4.0.5",
+    "webpack": "^4.16.2",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-merge": "^4.1.3"
   },
   "engines": {
     "node": ">=6"

package/prisma/base.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 
+var _dataViz = _interopRequireDefault(require("./dataViz"));
+
 var _light = _interopRequireDefault(require("./light"));
 
 var _dark = _interopRequireDefault(require("./dark"));
@@ -27,7 +29,7 @@ function createPrismaBase(_ref) {
     dark: _dark["default"]
   }[colorScheme];
   /**
-   * # Misc Colors
+   * ## Misc. colors
    *
    * @colorSet verbose
    */
@@ -38,7 +40,7 @@ function createPrismaBase(_ref) {
     linkColor: colorSchemeVars.interactiveColorPrimary
   };
   /**
-   * # Interactive State Shadows
+   * ## Interactive state shadows
    *
    * @shadowSet
    *
@@ -50,7 +52,7 @@ function createPrismaBase(_ref) {
     focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
   };
   /**
-   * # Backgrounds
+   * ## Backgrounds
    *
    * @colorSet verbose
    */
@@ -60,7 +62,7 @@ function createPrismaBase(_ref) {
   };
   var sansFontFamily = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
   /**
-   * # Fonts
+   * ## Fonts
    *
    * @valueSet
    */
@@ -74,20 +76,21 @@ function createPrismaBase(_ref) {
     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,
     zindexPopover: 1060,
     zindexToastMessages: 2000
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fonts), usageColors), shadows), backgrounds), zindexes);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fonts), usageColors), _dataViz["default"]), shadows), backgrounds), zindexes);
 }
 
 var _default = createPrismaBase;

package/prisma/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/prisma/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/prisma/dark.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 /**
- * # Background Colors
+ * ## Background colors
  * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
  *
  * @colorSet verbose
@@ -28,7 +28,7 @@ var backgroundColors = {
   backgroundColorScrim: 'rgba(0, 0, 0, 0.8)'
 };
 /**
- * # Content Colors
+ * ## Content colors
  * Content colors should be used for text, icons and dividers.
  *
  * @colorSet verbose
@@ -42,7 +42,7 @@ var contentColors = {
   contentColorMuted: '#909090'
 };
 /**
- * # Interactive Colors
+ * ## Interactive colors
  * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
  * "Overlay" colors are intended to be placed over the default background color, such as interactiveColorPrimary.
  * If the default background color is not transparent, the `blend` mixin can be used to create a new color that combines the two.
@@ -63,7 +63,7 @@ var interactiveColors = {
   interactiveColorBackgroundDisabled: 'rgba(255, 255, 255, 0.15)'
 };
 /**
- * # Neutral Colors
+ * ## Neutral colors
  * Neutrals are used for dividers and as backup colors that can sparingly be used for cases, when the other defined colors are not enough.
  *
  * @colorSet verbose
@@ -79,20 +79,20 @@ var neutralColors = {
   white: '#ffffff'
 };
 /**
- * # Accent Colors
+ * ## Accent colors
  * Accent colors aid and categorize the visual communication of the system response.
  *
  * @colorSet verbose
  */
 
 var accentColors = {
-  accentColorPositive: '#27f561',
-  accentColorWarning: '#ffd442',
-  accentColorAlert: '#ff9750',
-  accentColorNegative: '#ff5c5c'
+  accentColorPositive: '#85f415',
+  accentColorWarning: '#f49106',
+  accentColorAlert: '#f0581f',
+  accentColorNegative: '#ff4242'
 };
 /**
- * # Status Colors
+ * ## Status colors
  * Status colors are reserved for communicating urgency and severity associated with data objects.
  *
  * @colorSet verbose
@@ -100,14 +100,14 @@ var accentColors = {
 
 var statusColors = {
   statusColorInfo: '#61cafa',
-  statusColorNormal: '#85eb48',
-  statusColorLow: '#fae75f',
-  statusColorMedium: '#f5b53f',
-  statusColorHigh: '#ec4B43',
-  statusColorCritical: '#a81916'
+  statusColorNormal: '#85f415',
+  statusColorLow: '#2cbda3',
+  statusColorMedium: '#f49106',
+  statusColorHigh: '#ff4242',
+  statusColorCritical: '#ff3361'
 };
 /**
- * # Elevation Shadows
+ * ## Elevation shadows
  *
  * @shadowSet
  *
@@ -120,7 +120,7 @@ var elevationShadows = {
   modalShadow: '0px 50px 200px #000000, 0px 29px 66px rgba(0, 0, 0, 0.41), 0px 14px 47px rgba(0, 0, 0, 0.17), 0px 5px 10px rgba(0, 0, 0, 0.15)'
 };
 /**
- * # Syntax Colors
+ * ## Syntax colors
  * Syntax colors are used only for code blocks.
  *
  * @colorSet verbose alphabetical