@splunk/themes 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,6 +1,35 @@
 Change Log
 ============
 
+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:
+* Pinned `styled-components@5.1.1` to avoid breaking changes introduced in `styled-components@5.2.0`.
+
+  **`@splunk/themes` is incompatible with styled-components version(s) `^5.2.0`**.
+
+  `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
 ----------
 New Features:

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/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@splunk/themes",
-  "version": "0.10.0",
+  "version": "0.12.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=json",
+    "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": {
@@ -20,7 +24,7 @@
     "@storybook/components": ">= 6.x",
     "@storybook/theming": ">= 6.x",
     "react": "^16.8",
-    "styled-components": "^5.1"
+    "styled-components": "5.1.1"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -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",
@@ -83,8 +88,12 @@
     "eslint-plugin-react-hooks": "^4.0.5",
     "jest": "^25.1.0",
     "react": "^16.12.0",
-    "styled-components": "^5.1.1",
-    "typescript": "^4.0.5"
+    "styled-components": "5.1.1",
+    "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