@splunk/themes 0.8.0 → 0.10.1

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 Change Log
 ============
 
+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:
+* Prisma content colors no longer use transparency (SUI-2688).
+
 0.8.0 - March 31, 2021
 ----------
 New Features:

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.8.0",
+  "version": "0.10.1",
   "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": {
@@ -28,6 +28,21 @@
     },
     "styled-components": {
       "optional": true
+    },
+    "@storybook/addon-docs": {
+      "optional": true
+    },
+    "@storybook/addons": {
+      "optional": true
+    },
+    "@storybook/api": {
+      "optional": true
+    },
+    "@storybook/components": {
+      "optional": true
+    },
+    "@storybook/theming": {
+      "optional": true
     }
   },
   "license": "Apache-2.0",
@@ -68,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/dark.js

@@ -29,17 +29,17 @@ var backgroundColors = {
 };
 /**
  * # Content Colors
- * Content colors should be used for text, icons and dividers. They use transparent colors, to ensure optimal contrast on every background.
+ * Content colors should be used for text, icons and dividers.
  *
  * @colorSet verbose
  */
 
 var contentColors = {
-  contentColorActive: 'rgba(255, 255, 255, 0.98)',
-  contentColorDefault: 'rgba(255, 255, 255, 0.7)',
-  contentColorMuted: 'rgba(255, 255, 255, 0.5)',
-  contentColorDisabled: 'rgba(255, 255, 255, 0.3)',
-  contentColorInverted: '#000'
+  contentColorActive: '#fafafa',
+  contentColorDefault: '#b5b5b5',
+  contentColorDisabled: '#6b6b6b',
+  contentColorInverted: '#000000',
+  contentColorMuted: '#909090'
 };
 /**
  * # Interactive Colors

package/prisma/light.js

@@ -29,17 +29,17 @@ var backgroundColors = {
 };
 /**
  * # Content Colors
- * Content colors should be used for text, icons and dividers. They use transparent colors, to ensure optimal contrast on every background.
+ * Content colors should be used for text, icons and dividers.
  *
  * @colorSet verbose
  */
 
 var contentColors = {
   contentColorActive: '#2c2c2c',
-  contentColorDefault: 'rgba(0, 0, 0, 0.65)',
-  contentColorMuted: 'rgba(0, 0, 0, 0.54)',
-  contentColorDisabled: 'rgba(0, 0, 0, 0.3)',
-  contentColorInverted: '#ffffff'
+  contentColorDefault: '#4d4d4d',
+  contentColorDisabled: '#878787',
+  contentColorInverted: '#ffffff',
+  contentColorMuted: '#6b6b6b'
 };
 /**
  * # Interactive Colors

package/types/prisma/dark.d.ts

@@ -33,9 +33,9 @@ declare const theme: {
     white: string;
     contentColorActive: string;
     contentColorDefault: string;
-    contentColorMuted: string;
     contentColorDisabled: string;
     contentColorInverted: string;
+    contentColorMuted: string;
     backgroundColorPopup: string;
     backgroundColorSection: string;
     backgroundColorSidebar: string;

package/types/prisma/light.d.ts

@@ -33,9 +33,9 @@ declare const theme: {
     black: string;
     contentColorActive: string;
     contentColorDefault: string;
-    contentColorMuted: string;
     contentColorDisabled: string;
     contentColorInverted: string;
+    contentColorMuted: string;
     backgroundColorPopup: string;
     backgroundColorSection: string;
     backgroundColorSidebar: string;

package/types/storybook-addon-splunk-themes/SplunkThemesTool.d.ts

@@ -4,6 +4,7 @@ declare type ThemeOption = {
     name: string;
     values: string[];
 };
-export declare const themeOptions: Record<keyof ThemeSettings, ThemeOption>;
+declare type ThemeOptions = Pick<Record<keyof ThemeSettings, ThemeOption>, 'family' | 'colorScheme' | 'density'>;
+export declare const themeOptions: ThemeOptions;
 export declare const SplunkThemesTool: FunctionComponent;
 export {};

package/types/types.d.ts

@@ -6,15 +6,23 @@ declare type Density = 'comfortable' | 'compact';
 interface ThemeSettingsBase {
     colorScheme: ColorScheme;
     density: Density;
+    isPrisma: boolean;
+    isEnterprise: boolean;
+    isComfortable: boolean;
+    isCompact: boolean;
+    isDark: boolean;
+    isLight: boolean;
 }
 interface ThemeSettings<T extends AnyTheme = AnyTheme> extends ThemeSettingsBase {
     family: T extends Enterprise ? 'enterprise' : 'prisma';
 }
 declare type Enterprise = EnterpriseVariables & ThemeSettingsBase & {
     family: 'enterprise';
+    isEnterprise: true;
 };
 declare type Prisma = PrismaVariables & ThemeSettingsBase & {
     family: 'prisma';
+    isPrisma: true;
 };
 declare type CustomizeTheme<T extends AnyTheme = AnyTheme> = {
     bivarianceHack(theme: T): T;

package/types/useSplunkTheme.d.ts

@@ -10,11 +10,11 @@ import { AnyTheme } from './types';
  * import useSplunkTheme from '@splunk/themes/useSplunkTheme';
  * ...
  * export function() {
- *     const { density, focusColor } = useSplunkTheme();
+ *     const { isComfortable, focusColor } = useSplunkTheme();
  *
  *     const style = {
  *         color: focusColor,
- *         padding: density === 'comfortable' ? '10px' : '5px',
+ *         padding: isComfortable ? '10px' : '5px',
  *     }
  *
  *     ...

package/types/utils.d.ts

@@ -4,7 +4,7 @@ import { ThemeSettings, CustomizeTheme, AnyTheme } from './types';
  * Accepts a theme object and returns supported values and defaults.
  * @private
  */
-export declare const addThemeDefaults: ({ family, colorScheme, density, }?: Partial<ThemeSettings>) => ThemeSettings;
+export declare const addThemeDefaults: ({ family, colorScheme, density, isPrisma, isEnterprise, isComfortable, isCompact, isDark, isLight, }?: Partial<ThemeSettings>) => ThemeSettings;
 declare function getCustomizedThemeUnmemo<T extends AnyTheme>(settings?: Partial<ThemeSettings<T>>, customizer?: CustomizeTheme<T>): T;
 /**
  * Accepts a theme object and customizer, and returns supported values and defaults.

package/useSplunkTheme.js

@@ -32,11 +32,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * import useSplunkTheme from '@splunk/themes/useSplunkTheme';
  * ...
  * export function() {
- *     const { density, focusColor } = useSplunkTheme();
+ *     const { isComfortable, focusColor } = useSplunkTheme();
  *
  *     const style = {
  *         color: focusColor,
- *         padding: density === 'comfortable' ? '10px' : '5px',
+ *         padding: isComfortable ? '10px' : '5px',
  *     }
  *
  *     ...

package/utils.js

@@ -22,12 +22,30 @@ var addThemeDefaults = function addThemeDefaults() {
       _ref$colorScheme = _ref.colorScheme,
       colorScheme = _ref$colorScheme === void 0 ? 'dark' : _ref$colorScheme,
       _ref$density = _ref.density,
-      density = _ref$density === void 0 ? 'comfortable' : _ref$density;
+      density = _ref$density === void 0 ? 'comfortable' : _ref$density,
+      _ref$isPrisma = _ref.isPrisma,
+      isPrisma = _ref$isPrisma === void 0 ? true : _ref$isPrisma,
+      _ref$isEnterprise = _ref.isEnterprise,
+      isEnterprise = _ref$isEnterprise === void 0 ? false : _ref$isEnterprise,
+      _ref$isComfortable = _ref.isComfortable,
+      isComfortable = _ref$isComfortable === void 0 ? true : _ref$isComfortable,
+      _ref$isCompact = _ref.isCompact,
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+      _ref$isDark = _ref.isDark,
+      isDark = _ref$isDark === void 0 ? true : _ref$isDark,
+      _ref$isLight = _ref.isLight,
+      isLight = _ref$isLight === void 0 ? false : _ref$isLight;
 
   return {
     family: family,
     colorScheme: colorScheme,
-    density: density
+    density: density,
+    isPrisma: isPrisma,
+    isEnterprise: isEnterprise,
+    isComfortable: isComfortable,
+    isCompact: isCompact,
+    isDark: isDark,
+    isLight: isLight
   };
 };
 

package/withSplunkTheme.js

@@ -50,11 +50,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  *     };
  *
  *     render() {
- *         const { density, focusColor } = this.props.splunkTheme;
+ *         const { isComfortable, focusColor } = this.props.splunkTheme;
  *
  *         const style = {
  *             color: focusColor,
- *             padding: density === 'comfortable' ? '10px' : '5px',
+ *             padding: isComfortable ? '10px' : '5px',
  *         }
  *
  *         return (