@splunk/themes 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 Change Log
 ============
 
+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:
+* Utility variables, `isPrisma`, `isEnterprise`, `isComfortable`, `isCompact`, `isDark`, and `isLight`, added to `useSplunkTheme()` and `withSplunkTheme()` (SUI-2376).
+
 0.9.0 - September 8, 2021
 ----------
 API Changes:

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,7 +339,7 @@ var fonts = {
   fontWeightSemiBold: '500'
 };
 /**
- * # Layers
+ * ## Layers
  * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
  *
  * @valueSet

package/getTheme.js

@@ -41,6 +41,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @param {'prisma' | 'enterprise'} [options.family = 'prisma']
  * @param {'dark' | 'light'} [options.colorScheme = 'dark']
  * @param {'comfortable' | 'compact'} [options.density = 'comfortable']
+ * @param {Boolean} [options.isPrisma = true]
+ * @param {Boolean} [options.isEnterprise = false]
+ * @param {Boolean} [options.isComfortable = true]
+ * @param {Boolean} [options.isCompact = false]
+ * @param {Boolean} [options.isDark = true]
+ * @param {Boolean} [options.isLight = false]
  * @returns {object} A flat object of all variables and their values.
  * @public
  */
@@ -52,10 +58,22 @@ function getTheme() {
       colorScheme = _addThemeDefaults.colorScheme,
       density = _addThemeDefaults.density;
 
+  var isPrisma = family === 'prisma';
+  var isEnterprise = family === 'enterprise';
+  var isComfortable = density === 'comfortable';
+  var isCompact = density === 'compact';
+  var isDark = colorScheme === 'dark';
+  var isLight = colorScheme === 'light';
   return Object.freeze(_objectSpread({
     colorScheme: colorScheme,
     density: density,
-    family: family
+    family: family,
+    isPrisma: isPrisma,
+    isEnterprise: isEnterprise,
+    isComfortable: isComfortable,
+    isCompact: isCompact,
+    isDark: isDark,
+    isLight: isLight
   }, family === 'enterprise' ? (0, _enterprise["default"])({
     colorScheme: colorScheme,
     density: density

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.9.0",
+  "version": "0.11.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",
@@ -8,7 +8,7 @@
     "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",
     "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:start": "yarn types:build --watch"
@@ -20,7 +20,7 @@
     "@storybook/components": ">= 6.x",
     "@storybook/theming": ">= 6.x",
     "react": "^16.8",
-    "styled-components": "^5.1"
+    "styled-components": "5.1.1"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -83,7 +83,7 @@
     "eslint-plugin-react-hooks": "^4.0.5",
     "jest": "^25.1.0",
     "react": "^16.12.0",
-    "styled-components": "^5.1.1",
+    "styled-components": "5.1.1",
     "typescript": "^4.0.5"
   },
   "engines": {

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,7 +76,7 @@ function createPrismaBase(_ref) {
     fontWeightSemiBold: '500'
   };
   /**
-   * # Layers
+   * ## Layers
    * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
    *
    * @valueSet
@@ -87,7 +89,7 @@ function createPrismaBase(_ref) {
     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,7 +79,7 @@ var neutralColors = {
   white: '#ffffff'
 };
 /**
- * # Accent Colors
+ * ## Accent colors
  * Accent colors aid and categorize the visual communication of the system response.
  *
  * @colorSet verbose
@@ -92,7 +92,7 @@ var accentColors = {
   accentColorNegative: '#ff5c5c'
 };
 /**
- * # Status Colors
+ * ## Status colors
  * Status colors are reserved for communicating urgency and severity associated with data objects.
  *
  * @colorSet verbose
@@ -107,7 +107,7 @@ var statusColors = {
   statusColorCritical: '#a81916'
 };
 /**
- * # 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