@zendeskgarden/react-theming 9.0.0-next.4 → 9.0.0-next.6

package/dist/typings/elements/palette/index.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/** @ignore */
 declare const PALETTE: {
     black: string;
     white: string;
@@ -28,6 +27,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     blue: {
         100: string;
@@ -38,6 +41,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     red: {
         100: string;
@@ -48,6 +55,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     yellow: {
         100: string;
@@ -58,6 +69,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     green: {
         100: string;
@@ -68,6 +83,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     kale: {
         100: string;
@@ -78,73 +97,186 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     fuschia: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     pink: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     crimson: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     orange: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     lemon: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     lime: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     mint: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     teal: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     azure: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     royal: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
     purple: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
         M400: string;
         M600: string;
     };
 };
-/** @component */
 export default PALETTE;

package/dist/typings/elements/palette/v8.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+/** @deprecated INTERNAL ONLY – DO NOT USE */
+declare const PALETTE_V8: {
+    black: string;
+    white: string;
+    product: {
+        support: string;
+        message: string;
+        explore: string;
+        gather: string;
+        guide: string;
+        connect: string;
+        chat: string;
+        talk: string;
+        sell: string;
+    };
+    grey: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+    };
+    blue: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+    };
+    red: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+    };
+    yellow: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+    };
+    green: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+    };
+    kale: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+    };
+    fuschia: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    pink: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    crimson: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    orange: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    lemon: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    lime: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    mint: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    teal: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    azure: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    royal: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+    purple: {
+        400: string;
+        600: string;
+        M400: string;
+        M600: string;
+    };
+};
+export default PALETTE_V8;

package/dist/typings/elements/theme/index.d.ts

@@ -6,5 +6,4 @@
  */
 import { IGardenTheme } from '../../types';
 declare const DEFAULT_THEME: IGardenTheme;
-/** @component */
 export default DEFAULT_THEME;

package/dist/typings/index.d.ts

@@ -7,9 +7,11 @@
 export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
+export { default as PALETTE_V8 } from './elements/palette/v8';
 export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles';
 export { getArrowPosition } from './utils/getArrowPosition';
 export { getColor } from './utils/getColor';
+export { getColorV8 } from './utils/getColorV8';
 export { getFloatingPlacements } from './utils/getFloatingPlacements';
 export { getFocusBoxShadow } from './utils/getFocusBoxShadow';
 export { default as getLineHeight } from './utils/getLineHeight';

package/dist/typings/types/index.d.ts

@@ -12,7 +12,7 @@ export declare const MENU_POSITION: readonly ["top", "right", "bottom", "left"];
 export type MenuPosition = (typeof MENU_POSITION)[number];
 export declare const PLACEMENT: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
 export type Placement = (typeof PLACEMENT)[number];
-type Hue = Record<number | string, string> | string;
+export type Hue = Record<number | string, string> | string;
 export interface IGardenTheme {
     rtl: boolean;
     document?: any;
@@ -41,14 +41,24 @@ export interface IGardenTheme {
     };
     colors: {
         base: 'light' | 'dark';
-        background: string;
-        foreground: string;
         primaryHue: string;
         dangerHue: string;
         warningHue: string;
         successHue: string;
         neutralHue: string;
         chromeHue: string;
+        variables: {
+            dark: {
+                background: Record<string, string>;
+                border: Record<string, string>;
+                foreground: Record<string, string>;
+            };
+            light: {
+                background: Record<string, string>;
+                border: Record<string, string>;
+                foreground: Record<string, string>;
+            };
+        };
     };
     components: Record<string, any>;
     fonts: {
@@ -88,6 +98,7 @@ export interface IGardenTheme {
         xxl: string;
         xxxl: string;
     };
+    palette: Record<string, Hue>;
     shadowWidths: {
         xs: string;
         sm: string;
@@ -109,7 +120,6 @@ export interface IGardenTheme {
         xl: string;
         xxl: string;
     };
-    palette: Record<string, Hue>;
 }
 export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {
     /**
@@ -126,4 +136,3 @@ export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenT
      */
     focusVisibleRef?: React.RefObject<HTMLElement> | null;
 }
-export {};

package/dist/typings/utils/getColor.d.ts

@@ -5,21 +5,47 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="lodash" />
-import { DefaultTheme } from 'styled-components';
-export type Hue = Record<number | string, string> | string;
-export declare const DEFAULT_SHADE = 600;
+import { IGardenTheme } from '../types';
+type ColorParameters = {
+    dark?: {
+        hue?: string;
+        offset?: number;
+        shade?: number;
+        transparency?: number;
+    };
+    hue?: string;
+    light?: {
+        hue?: string;
+        offset?: number;
+        shade?: number;
+        transparency?: number;
+    };
+    offset?: number;
+    shade?: number;
+    theme: IGardenTheme;
+    transparency?: number;
+    variable?: string;
+};
 /**
- * Get the palette color for the given hue, shade, and theme.
+ * Get a color value from the theme. Variable lookup takes precedence, followed
+ * by `dark` and `light` object values. If none of these are provided, `hue`,
+ * `shade`, `offset`, and `transparency` are used as fallbacks to determine the
+ * color.
  *
- * @param {string|Object} hue A `theme.palette` hue or one of the following `theme.colors` keys:
+ * @param {Object} [options.theme] Provides values used to resolve the desired color
+ * @param {string} [options.variable] A variable key (i.e. `'background.default'`) used to resolve a color value for the theme color base
+ * @param {Object} [options.dark] An object with `hue`, `shade`, `offset`, and `transparency` values to be used in dark mode
+ * @param {Object} [options.light] An object with `hue`, `shade`, `offset`, and `transparency` values to be used in light mode
+ * @param {string} [options.hue] A `theme.palette` hue or one of the following `theme.colors` keys:
  *  - `'primaryHue'` = `theme.colors.primaryHue`
  *  - `'dangerHue'` = `theme.colors.dangerHue`
  *  - `'warningHue'` = `theme.colors.warningHue`
  *  - `'successHue'` = `theme.colors.successHue`
  *  - `'neutralHue'` = `theme.colors.neutralHue`
  *  - `'chromeHue'` = `theme.colors.chromeHue`
- * @param {number} [shade=DEFAULT_SHADE] A hue shade.
- * @param {Object} theme Context `theme` object.
- * @param {Number} [transparency] An alpha-channel value between 0 and 1.
+ * @param {number} [options.shade] A hue shade
+ * @param {number} [options.offset] A positive or negative value to adjust the shade
+ * @param {number} [options.transparency] An alpha-channel value between 0 and 1
  */
-export declare const getColor: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;
+export declare const getColor: (({ dark, hue, light, offset, shade, theme, transparency, variable }: ColorParameters) => string) & import("lodash").MemoizedFunction;
+export {};

package/dist/typings/utils/getColorV8.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+/// <reference types="lodash" />
+import { Hue } from '../types';
+import { DefaultTheme } from 'styled-components';
+export declare const DEFAULT_SHADE = 600;
+/**
+ * @deprecated Use `getColor` instead.
+ *
+ * Get the palette color for the given hue, shade, and theme.
+ *
+ * @param {string|Object} hue A `theme.palette` hue or one of the following `theme.colors` keys:
+ *  - `'primaryHue'` = `theme.colors.primaryHue`
+ *  - `'dangerHue'` = `theme.colors.dangerHue`
+ *  - `'warningHue'` = `theme.colors.warningHue`
+ *  - `'successHue'` = `theme.colors.successHue`
+ *  - `'neutralHue'` = `theme.colors.neutralHue`
+ *  - `'chromeHue'` = `theme.colors.chromeHue`
+ * @param {number} [shade=DEFAULT_SHADE] A hue shade.
+ * @param {Object} theme Context `theme` object.
+ * @param {Number} [transparency] An alpha-channel value between 0 and 1.
+ */
+export declare const getColorV8: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;

package/dist/typings/utils/getFocusBoxShadow.d.ts

@@ -4,8 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { IGardenTheme } from '../types';
-import { Hue } from './getColor';
+import { Hue, IGardenTheme } from '../types';
 export type FocusBoxShadowParameters = {
     boxShadow?: string;
     inset?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.4",
+  "version": "9.0.0-next.6",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -24,6 +24,8 @@
     "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-focusvisible": "^2.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
+    "chroma-js": "^2.4.2",
+    "lodash.get": "^4.4.2",
     "lodash.memoize": "^4.1.2",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
@@ -31,9 +33,11 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^4.2.0 || ^5.1.0"
+    "styled-components": "^4.2.0 || ^5.3.1"
   },
   "devDependencies": {
+    "@types/chroma-js": "2.4.4",
+    "@types/lodash.get": "4.4.9",
     "@types/lodash.memoize": "4.1.9"
   },
   "keywords": [
@@ -46,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
+  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
 }