@splunk/themes 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+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/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.10.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",

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 (