@zendeskgarden/react-theming 9.1.2 → 9.3.0

package/dist/esm/utils/StyledBaseIcon.js

@@ -5,15 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import React, { Children } from 'react';
+import { cloneElement, Children } from 'react';
 
-const StyledBaseIcon = styled(_ref => {
+const StyledBaseIcon = styled(
+_ref => {
   let {
     children,
     theme,
     ...props
   } = _ref;
-  return React.cloneElement(Children.only(children), props);
+  return cloneElement(Children.only(children), props);
 }).withConfig({
   displayName: "StyledBaseIcon",
   componentId: "sc-1moykgb-0"

package/dist/esm/utils/getColor.js

@@ -17,10 +17,11 @@ const adjust = (color, expected, actual) => {
   }
   return color;
 };
-const toShade = (shade, offset, scheme) => {
+const toShade = (shade, offset, transparency, scheme) => {
   let _shade;
   if (shade === undefined) {
-    _shade = scheme === 'dark' ? 500 : 700;
+    const darkShade = transparency === undefined ? 600 : 500;
+    _shade = scheme === 'dark' ? darkShade : 700;
   } else {
     _shade = parseInt(shade.toString(), 10);
     if (isNaN(_shade)) {
@@ -29,8 +30,8 @@ const toShade = (shade, offset, scheme) => {
   }
   return _shade + (offset || 0);
 };
-const toHex = (hue, shade, offset, scheme) => {
-  const _shade = toShade(shade, offset, scheme);
+const toHex = (hue, shade, offset, transparency, scheme) => {
+  const _shade = toShade(shade, offset, transparency, scheme);
   let retVal = hue[_shade];
   if (!retVal) {
     const closestShade = Object.keys(hue).map(hueShade => parseInt(hueShade, 10)).reduce((previous, current) => {
@@ -119,13 +120,13 @@ const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transpare
     _hue = palette[_hue];
   }
   if (typeof _hue === 'object') {
-    retVal = toHex(_hue, shade, offset, scheme);
+    retVal = toHex(_hue, shade, offset, transparency, scheme);
   } else if (isValidColor(_hue)) {
     if (shade === undefined) {
       retVal = _hue;
     } else {
       _hue = generateColorScale(_hue);
-      retVal = toHex(_hue, shade, offset, scheme);
+      retVal = toHex(_hue, shade, offset, transparency, scheme);
     }
   }
   if (retVal && transparency) {

package/dist/index.cjs.js

@@ -558,10 +558,11 @@ const adjust$1 = (color, expected, actual) => {
   }
   return color;
 };
-const toShade = (shade, offset, scheme) => {
+const toShade = (shade, offset, transparency, scheme) => {
   let _shade;
   if (shade === undefined) {
-    _shade = scheme === 'dark' ? 500 : 700;
+    const darkShade = transparency === undefined ? 600 : 500;
+    _shade = scheme === 'dark' ? darkShade : 700;
   } else {
     _shade = parseInt(shade.toString(), 10);
     if (isNaN(_shade)) {
@@ -570,8 +571,8 @@ const toShade = (shade, offset, scheme) => {
   }
   return _shade + (offset || 0);
 };
-const toHex = (hue, shade, offset, scheme) => {
-  const _shade = toShade(shade, offset, scheme);
+const toHex = (hue, shade, offset, transparency, scheme) => {
+  const _shade = toShade(shade, offset, transparency, scheme);
   let retVal = hue[_shade];
   if (!retVal) {
     const closestShade = Object.keys(hue).map(hueShade => parseInt(hueShade, 10)).reduce((previous, current) => {
@@ -660,13 +661,13 @@ const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transpare
     _hue = palette[_hue];
   }
   if (typeof _hue === 'object') {
-    retVal = toHex(_hue, shade, offset, scheme);
+    retVal = toHex(_hue, shade, offset, transparency, scheme);
   } else if (isValidColor(_hue)) {
     if (shade === undefined) {
       retVal = _hue;
     } else {
       _hue = generateColorScale(_hue);
-      retVal = toHex(_hue, shade, offset, scheme);
+      retVal = toHex(_hue, shade, offset, transparency, scheme);
     }
   }
   if (retVal && transparency) {
@@ -1453,13 +1454,14 @@ const focusStyles = _ref => {
   return styled.css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
 };
 
-const StyledBaseIcon = styled__default.default(_ref => {
+const StyledBaseIcon = styled__default.default(
+_ref => {
   let {
     children,
     theme,
     ...props
   } = _ref;
-  return React__default.default.cloneElement(React.Children.only(children), props);
+  return React.cloneElement(React.Children.only(children), props);
 }).withConfig({
   displayName: "StyledBaseIcon",
   componentId: "sc-1moykgb-0"

package/dist/typings/index.d.ts

@@ -24,4 +24,4 @@ export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
 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';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IStyledBaseIconProps, 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,7 +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, ThemeProviderProps } from 'styled-components';
+import { PropsWithChildren, SVGAttributes } from 'react';
+import { CSSObject, DefaultTheme, 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"];
@@ -172,3 +173,6 @@ export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenT
      */
     theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);
 }
+export interface IStyledBaseIconProps extends PropsWithChildren<SVGAttributes<SVGElement>> {
+    theme?: DefaultTheme;
+}

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

@@ -4,5 +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.
  */
-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>;
+import { ReactElement } from 'react';
+import { IStyledBaseIconProps } from '../types';
+export declare const StyledBaseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IStyledBaseIconProps, never>> & string & Omit<({ children, theme, ...props }: IStyledBaseIconProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>, keyof import("react").Component<any, {}, any>>;

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

@@ -45,5 +45,5 @@ type ArrowOptions = {
  *
  * @component
  */
-export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").FlattenSimpleInterpolation;
+export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").RuleSet<object>;
 export {};

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

@@ -36,4 +36,4 @@ export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
  * }
  * ```
  */
-export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
+export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").RuleSet<object>;

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

@@ -33,5 +33,5 @@ type MenuOptions = {
  * @param {string} [options.animationModifier] A CSS class or attribute selector
  *  which, when applied, animates the menu's appearance.
  */
-export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<DefaultTheme>>;
+export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").RuleSet<object>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.1.2",
+  "version": "9.3.0",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^4.2.0 || ^5.3.1"
+    "styled-components": "^4.2.0 || ^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@types/lodash.get": "4.4.9",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
+  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
 }