@zendeskgarden/react-theming 9.0.0-next.2 → 9.0.0-next.21

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

@@ -7,7 +7,7 @@
 import React, { PropsWithChildren } from 'react';
 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: import("../types").IGardenTheme;
     };

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

@@ -4,17 +4,14 @@
  * 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;
     product: {
         support: string;
-        message: string;
         explore: string;
         gather: string;
         guide: string;
-        connect: string;
         chat: string;
         talk: string;
         sell: string;
@@ -28,6 +25,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     blue: {
         100: string;
@@ -38,6 +39,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     red: {
         100: string;
@@ -48,6 +53,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     yellow: {
         100: string;
@@ -58,6 +67,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     green: {
         100: string;
@@ -68,6 +81,10 @@ declare const PALETTE: {
         600: string;
         700: string;
         800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     kale: {
         100: string;
@@ -78,73 +95,164 @@ 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;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     pink: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     crimson: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     orange: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     lemon: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     lime: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     mint: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     teal: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     azure: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     royal: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
     };
     purple: {
+        100: string;
+        200: string;
+        300: string;
         400: string;
+        500: string;
         600: string;
-        M400: string;
-        M600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: 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,11 +7,12 @@
 export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
-export { default as retrieveComponentStyles, 
-/** `retrieveTheme` is a deprecated usage for v7 compatability */
-default as retrieveTheme } from './utils/retrieveComponentStyles';
+export { default as PALETTE_V8 } from './elements/palette/v8';
+export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles';
 export { getArrowPosition } from './utils/getArrowPosition';
+export { getCheckeredBackground } from './utils/getCheckeredBackground';
 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';
@@ -23,4 +24,5 @@ export { useWindow } from './utils/useWindow';
 export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
-export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition as ARROW_POSITION, type MenuPosition as MENU_POSITION, type Placement } from './types';
+export { StyledBaseIcon } from './utils/StyledBaseIcon';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';

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

@@ -4,15 +4,55 @@
  * 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 { ThemeProps } from 'styled-components';
+import { CSSObject, 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];
 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 CheckeredBackgroundParameters = {
+    overlay?: string;
+    positionY?: number;
+    repeat?: 'repeat' | 'repeat-x';
+    size: number;
+    theme: IGardenTheme;
+};
+export 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;
+};
+export type FocusStylesParameters = FocusBoxShadowParameters & {
+    condition?: boolean;
+    selector?: string;
+    styles?: CSSObject;
+};
+export type FocusBoxShadowParameters = {
+    boxShadow?: string;
+    inset?: boolean;
+    color?: Omit<ColorParameters, 'theme'>;
+    shadowWidth?: 'sm' | 'md';
+    spacerColor?: Omit<ColorParameters, 'theme'>;
+    spacerWidth?: null | 'xs' | 'sm';
+    theme: IGardenTheme;
+};
+export type Hue = Record<number | string, string> | string;
 export interface IGardenTheme {
     rtl: boolean;
     document?: any;
@@ -41,14 +81,26 @@ 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>;
+                shadow: Record<string, string>;
+            };
+            light: {
+                background: Record<string, string>;
+                border: Record<string, string>;
+                foreground: Record<string, string>;
+                shadow: Record<string, string>;
+            };
+        };
     };
     components: Record<string, any>;
     fonts: {
@@ -88,6 +140,8 @@ export interface IGardenTheme {
         xxl: string;
         xxxl: string;
     };
+    opacity: Record<number, number>;
+    palette: Record<string, Hue>;
     shadowWidths: {
         xs: string;
         sm: string;
@@ -109,21 +163,12 @@ export interface IGardenTheme {
         xl: string;
         xxl: string;
     };
-    palette: Record<string, Hue>;
 }
-export interface IThemeProviderProps extends Partial<ThemeProps<IGardenTheme>> {
+export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {
     /**
      * Provides values for component styling. See styled-components
      * [`ThemeProvider`](https://styled-components.com/docs/api#themeprovider)
      * for details.
      */
-    theme?: 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;
+    theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);
 }
-export {};

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export declare const StyledBaseIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {}, never>;

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

@@ -10,22 +10,6 @@ type ArrowOptions = {
     inset?: string;
     animationModifier?: string;
 };
-export declare const exponentialSymbols: {
-    symbols: {
-        sqrt: {
-            func: {
-                symbol: string;
-                f: (a: number) => number;
-                notation: string;
-                precedence: number;
-                rightToLeft: number;
-                argCount: number;
-            };
-            symbol: string;
-            regSymbol: string;
-        };
-    };
-};
 /**
  * CSS for an arrow at the given position and with the given size. The arrow is
  * positioned via `::before` and `::after` pseudo-elements and inherits the

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

@@ -4,14 +4,8 @@
  * 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 { CSSObject } from 'styled-components';
-import { FocusBoxShadowParameters } from './getFocusBoxShadow';
-export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible, &[data-garden-focus-visible=\"true\"]";
-type FocusStylesParameters = FocusBoxShadowParameters & {
-    condition?: boolean;
-    selector?: string;
-    styles?: CSSObject;
-};
+import { FocusStylesParameters } from '../types';
+export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
 /**
  * Garden standard `box-shadow` focus styling.
  *
@@ -33,8 +27,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;
@@ -44,4 +37,3 @@ type FocusStylesParameters = FocusBoxShadowParameters & {
  * ```
  */
 export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
-export {};

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

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+import { CheckeredBackgroundParameters } from '../types';
+/**
+ * Get a checkered background image.
+ *
+ * @param {Object} options.theme Provides information for pattern color and LTR/RTL layout
+ * @param {number} options.size The pixel size of the checkered pattern
+ * @param {string} [options.overlay] Optional
+ * [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) with transparency or
+ * [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
+ * overlay to apply on top of the checkered pattern
+ * @param {number} [options.positionY=0] Optional vertical position for starting the pattern (default `0`)
+ * @param {string} [options.repeat='repeat'] Optional repeat value for the pattern; either `'repeat'` or `'repeat-x'` (default `'repeat'`)
+ */
+export declare const getCheckeredBackground: ({ theme, size, overlay, positionY, repeat }: CheckeredBackgroundParameters) => string;

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

@@ -5,21 +5,26 @@
  * 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 { ColorParameters } from '../types';
 /**
- * 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] A `theme.opacity` key or 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;