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

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

@@ -9,11 +9,9 @@ declare const PALETTE: {
     white: string;
     product: {
         support: string;
-        message: string;
         explore: string;
         gather: string;
         guide: string;
-        connect: string;
         chat: string;
         talk: string;
         sell: string;
@@ -115,8 +113,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     pink: {
         100: string;
@@ -131,8 +127,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     crimson: {
         100: string;
@@ -147,8 +141,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     orange: {
         100: string;
@@ -163,8 +155,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     lemon: {
         100: string;
@@ -179,8 +169,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     lime: {
         100: string;
@@ -195,8 +183,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     mint: {
         100: string;
@@ -211,8 +197,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     teal: {
         100: string;
@@ -227,8 +211,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     azure: {
         100: string;
@@ -243,8 +225,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     royal: {
         100: string;
@@ -259,8 +239,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
     purple: {
         100: string;
@@ -275,8 +253,6 @@ declare const PALETTE: {
         1000: string;
         1100: string;
         1200: string;
-        M400: string;
-        M600: string;
     };
 };
 export default PALETTE;

package/dist/typings/index.d.ts

@@ -10,6 +10,7 @@ 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 { getCheckeredBackground } from './utils/getCheckeredBackground';
 export { getColor } from './utils/getColor';
 export { getColorV8 } from './utils/getColorV8';
 export { getFloatingPlacements } from './utils/getFloatingPlacements';
@@ -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, MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition, type MenuPosition, 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,13 +4,54 @@
  * 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 { ThemeProviderProps } 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];
+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;
@@ -97,6 +138,7 @@ export interface IGardenTheme {
         xxl: string;
         xxxl: string;
     };
+    opacity: Record<number, number>;
     palette: Record<string, Hue>;
     shadowWidths: {
         xs: string;

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>, any, {}, never>;

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';
+import { FocusStylesParameters } from '../types';
 export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
-type FocusStylesParameters = FocusBoxShadowParameters & {
-    condition?: boolean;
-    selector?: string;
-    styles?: CSSObject;
-};
 /**
  * Garden standard `box-shadow` focus styling.
  *
@@ -43,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,34 +5,14 @@
  * 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;
-};
+import { ColorParameters } from '../types';
 /**
  * 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 {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
@@ -45,7 +25,6 @@ type ColorParameters = {
  *  - `'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
+ * @param {number} [options.transparency] A `theme.opacity` key or 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/getFocusBoxShadow.d.ts

@@ -4,33 +4,19 @@
  * 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 { Hue, IGardenTheme } from '../types';
-export type FocusBoxShadowParameters = {
-    boxShadow?: string;
-    inset?: boolean;
-    hue?: Hue;
-    shade?: number;
-    shadowWidth?: 'sm' | 'md';
-    spacerHue?: Hue;
-    spacerShade?: number;
-    spacerWidth?: null | 'xs' | 'sm';
-    theme: IGardenTheme;
-};
+import { FocusBoxShadowParameters } from '../types';
 /**
- * Get a CSS `box-shadow` property value for focus state styling. The `hue` and
- * `shade` are used to determine the color of the focus ring.
+ * Get a CSS `box-shadow` property value for focus state styling.
  *
  * @param {string} [options.boxShadow] Provides an existing `box-shadow` (a drop shadow, for example) to be retained along with the focus ring
  * @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
- * @param {string|Object} [options.hue='primaryHue'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
- * @param {number} [options.shade=600] Selects a shade for the given `hue`
+ * @param {Object} [options.color={ variable: 'border.primaryEmphasis' }] Provides an object with `getColor` parameters used to determine the focus ring color
  * @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
- * @param {string|Object} [options.spacerHue='background'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
- * @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
+ * @param {Object} [options.spacerColor={ variable: 'background.default' }] Provides an object with `getColor` parameters used to determine the spacer color
  * @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
  * @param {Object} options.theme Provides values used to resolve the desired color
  *
  * @returns A `box-shadow` property value for the given options. Default is a
- * 3px `blue[600]` ring with a 1px white spacer overlay.
+ * 3px blue ring with a 1px spacer overlay that matches the background.
  */
-export declare const getFocusBoxShadow: ({ boxShadow, inset, hue, shade, shadowWidth, spacerHue, spacerShade, spacerWidth, theme }: FocusBoxShadowParameters) => string;
+export declare const getFocusBoxShadow: ({ boxShadow, inset, color, shadowWidth, spacerColor, spacerWidth, theme, ...args }: FocusBoxShadowParameters) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.7",
+  "version": "9.0.0-next.9",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }