@zendeskgarden/react-theming 9.0.0-next.5 → 9.0.0-next.7

package/dist/typings/elements/ThemeProvider.d.ts

@@ -5,10 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { PropsWithChildren } from 'react';
-import { IGardenTheme, IThemeProviderProps } from '../types';
+import { IThemeProviderProps } from '../types';
 export declare const ThemeProvider: {
-    ({ theme, focusVisibleRef, children, ...other }: PropsWithChildren<IThemeProviderProps>): React.JSX.Element;
+    ({ theme, ...other }: PropsWithChildren<IThemeProviderProps>): React.JSX.Element;
     defaultProps: {
-        theme: IGardenTheme;
+        theme: import("../types").IGardenTheme;
     };
 };

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 as getColorV8 } from './utils/_getColor';
+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

@@ -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.
  */
-/// <reference types="react" />
 import { ThemeProviderProps } from 'styled-components';
 export declare const ARROW_POSITION: readonly ["top", "top-left", "top-right", "right", "right-top", "right-bottom", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom"];
 export type ArrowPosition = (typeof ARROW_POSITION)[number];
@@ -12,7 +11,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 +40,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 +97,7 @@ export interface IGardenTheme {
         xxl: string;
         xxxl: string;
     };
+    palette: Record<string, Hue>;
     shadowWidths: {
         xs: string;
         sm: string;
@@ -109,7 +119,6 @@ export interface IGardenTheme {
         xl: string;
         xxl: string;
     };
-    palette: Record<string, Hue>;
 }
 export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {
     /**
@@ -118,12 +127,4 @@ export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenT
      * for details.
      */
     theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);
-    /**
-     * Provides a reference to the DOM node used to scope a `:focus-visible`
-     * polyfill. If left `undefined`, a scoping `<div>` will be rendered.
-     * Assigning `null` (on a nested `ThemeProvider`, for example) prevents the
-     * added polyfill and scoping `<div>`.
-     */
-    focusVisibleRef?: React.RefObject<HTMLElement> | null;
 }
-export {};

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

@@ -6,7 +6,7 @@
  */
 import { CSSObject } from 'styled-components';
 import { FocusBoxShadowParameters } from './getFocusBoxShadow';
-export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible, &[data-garden-focus-visible=\"true\"]";
+export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
 type FocusStylesParameters = FocusBoxShadowParameters & {
     condition?: boolean;
     selector?: string;
@@ -33,8 +33,7 @@ type FocusStylesParameters = FocusBoxShadowParameters & {
  *   outline: none;
  * }
  *
- * :focus-visible,
- * [data-garden-focus-visible='true'] {
+ * :focus-visible {
  *   box-shadow: 0 0 0 {1px} #fff,
  *               0 0 0 {3px} {blue};
  *   outline: {2px} solid transparent;

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

@@ -0,0 +1,51 @@
+/**
+ * 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 { 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 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 {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} [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: (({ dark, hue, light, offset, shade, theme, transparency, variable }: ColorParameters) => string) & import("lodash").MemoizedFunction;
+export {};

package/dist/typings/utils/{_getColor.d.ts → getColorV8.d.ts}

@@ -5,10 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="lodash" />
+import { Hue } from '../types';
 import { DefaultTheme } from 'styled-components';
-export type Hue = Record<number | string, string> | string;
 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:
@@ -22,4 +24,4 @@ export declare const DEFAULT_SHADE = 600;
  * @param {Object} theme Context `theme` object.
  * @param {Number} [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 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.5",
+  "version": "9.0.0-next.7",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,8 +22,8 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@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"
@@ -34,6 +34,8 @@
     "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 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
+  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }