fix: update theming utilities for refactored getColor

jzempel · jzempel · commit aa795e578343 · 2024-04-10T08:24:30.000-04:00
diff --git a/packages/buttons/src/styled/StyledButton.ts b/packages/buttons/src/styled/StyledButton.ts
@@ -223,8 +223,8 @@ const groupStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
     getFocusBoxShadow({
       theme,
       inset: focusInset,
-      spacerHue: focusColor,
-      hue: 'transparent'
+      spacerColor: { hue: 'primaryHue', shade: 700 },
+      color: { hue: 'transparent' }
     });
 
   return css`
diff --git a/packages/chrome/src/styled/subnav/StyledSubNavItem.tsx b/packages/chrome/src/styled/subnav/StyledSubNavItem.tsx
@@ -41,7 +41,7 @@ const colorStyles = (props: IStyledSubNavItemProps) => {
 
     ${focusStyles({
       theme,
-      hue: isLight ? DARK : LIGHT,
+      color: { hue: isLight ? DARK : LIGHT },
       spacerWidth: null,
       styles: { opacity: 1 }
     })}
diff --git a/packages/dropdowns/src/views/combobox/StyledTrigger.ts b/packages/dropdowns/src/views/combobox/StyledTrigger.ts
@@ -88,8 +88,7 @@ const colorStyles = (props: IStyledTriggerProps) => {
     ${focusStyles({
       theme: props.theme,
       inset: props.focusInset,
-      hue: focusBorderColor,
-      shade: focusShade,
+      color: { hue: focusBorderColor, shade: focusShade },
       selector: focusSelector,
       styles: { borderColor: focusBorderColor },
       condition: !props.isBare
diff --git a/packages/forms/src/styled/file-list/StyledFile.ts b/packages/forms/src/styled/file-list/StyledFile.ts
@@ -44,7 +44,7 @@ const colorStyles = (props: IStyledFileProps & ThemeProps<DefaultTheme>) => {
     ${focusStyles({
       theme: props.theme,
       inset: props.focusInset,
-      hue: focusBorderColor,
+      color: { hue: focusBorderColor },
       styles: { borderColor: focusBorderColor }
     })}
   `;
diff --git a/packages/forms/src/styled/file-upload/StyledFileUpload.ts b/packages/forms/src/styled/file-upload/StyledFileUpload.ts
@@ -46,7 +46,7 @@ const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledFileUploadProps) =
 
     ${focusStyles({
       theme: props.theme,
-      hue: baseColor
+      color: { hue: baseColor }
     })}
 
     &:active {
diff --git a/packages/forms/src/styled/text/StyledTextFauxInput.ts b/packages/forms/src/styled/text/StyledTextFauxInput.ts
@@ -49,8 +49,7 @@ const colorStyles = (props: IStyledTextFauxInputProps & ThemeProps<DefaultTheme>
       theme,
       inset: focusInset,
       condition: !isBare,
-      hue: getValidationHue(validation),
-      shade: validation === 'warning' ? 700 : 600,
+      color: { hue: getValidationHue(validation), shade: validation === 'warning' ? 700 : 600 },
       selector: isFocused ? '&' : '&:focus-within',
       styles: { borderColor: getColorV8(getValidationHue(validation), 600, theme) }
     })}
diff --git a/packages/forms/src/styled/text/StyledTextInput.ts b/packages/forms/src/styled/text/StyledTextInput.ts
@@ -99,8 +99,7 @@ const colorStyles = (props: IStyledTextInputProps & ThemeProps<DefaultTheme>) =>
       theme: props.theme,
       inset: props.focusInset,
       condition: !props.isBare,
-      hue: focusRingHue,
-      shade: focusRingShade,
+      color: { hue: focusRingHue, shade: focusRingShade },
       styles: {
         borderColor: focusBorderColor
       }
diff --git a/packages/forms/src/styled/tiles/StyledTile.ts b/packages/forms/src/styled/tiles/StyledTile.ts
@@ -66,7 +66,7 @@ const colorStyles = (props: IStyledTileProps & ThemeProps<DefaultTheme>) => {
 
     ${focusStyles({
       theme: props.theme,
-      hue: focusBorderColor,
+      color: { hue: focusBorderColor },
       styles: {
         borderColor: focusBorderColor
       },
diff --git a/packages/grid/src/styled/pane/StyledPaneSplitter.ts b/packages/grid/src/styled/pane/StyledPaneSplitter.ts
@@ -39,7 +39,7 @@ const colorStyles = (props: IStyledPaneSplitterProps & ThemeProps<DefaultTheme>)
 
     ${focusStyles({
       theme: props.theme,
-      hue: hoverColor,
+      color: { hue: hoverColor },
       styles: {
         backgroundColor: hoverColor
       },
diff --git a/packages/modals/src/styled/StyledClose.ts b/packages/modals/src/styled/StyledClose.ts
@@ -30,7 +30,7 @@ const colorStyles = (props: ThemeProps<DefaultTheme>) => {
 
     ${focusStyles({
       theme: props.theme,
-      hue: backgroundColor
+      color: { hue: backgroundColor }
     })}
 
     &:active {
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts
@@ -86,8 +86,7 @@ const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledGlobalAlertProps)
       /* [1] */
       ${focusStyles({
         theme: props.theme,
-        hue: focusColor,
-        shade: props.alertType === 'info' ? 600 : 800,
+        color: { hue: focusColor, shade: props.alertType === 'info' ? 600 : 800 },
         styles: { color: 'inherit' }
       })}
 
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts
@@ -70,8 +70,7 @@ function colorStyles(props: ThemeProps<DefaultTheme> & IStyledGlobalAlertButtonP
 
     ${focusStyles({
       theme: props.theme,
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      color: { hue: focusColor, shade: props.alertType === 'info' ? 600 : 800 }
     })}
 
     &:active {
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts
@@ -73,8 +73,7 @@ export const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledGlobalAlert
 
     ${focusStyles({
       theme: props.theme,
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      color: { hue: focusColor, shade: props.alertType === 'info' ? 600 : 800 }
     })}
 
     &:active {
diff --git a/packages/theming/demo/stories/ArrowStylesStory.tsx b/packages/theming/demo/stories/ArrowStylesStory.tsx
@@ -7,13 +7,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
-import {
-  arrowStyles,
-  getColorV8,
-  DEFAULT_THEME,
-  ArrowPosition
-} from '@zendeskgarden/react-theming';
+import { StoryFn } from '@storybook/react';
+import { arrowStyles, getColor, ArrowPosition } from '@zendeskgarden/react-theming';
 
 interface IArgs {
   position: ArrowPosition;
@@ -25,22 +20,28 @@ interface IArgs {
 }
 
 const StyledDiv = styled.div<Omit<IArgs, 'isAnimated'>>`
-  border: ${props => props.hasBorder && `${DEFAULT_THEME.borders.sm} ${getColorV8('primaryHue')}`};
-  box-shadow: ${props =>
-    props.hasBoxShadow &&
-    DEFAULT_THEME.shadows.lg('8px', '12px', getColorV8('chromeHue', 600, DEFAULT_THEME, 0.15)!)};
-  background-color: ${getColorV8('primaryHue', 200)};
+  border: ${p =>
+    p.hasBorder &&
+    `${p.theme.borders.sm} ${getColor({ theme: p.theme, variable: 'border.primaryEmphasis' })}`};
+  box-shadow: ${p =>
+    p.hasBoxShadow &&
+    p.theme.shadows.lg(
+      '8px',
+      '12px',
+      getColor({ theme: p.theme, hue: 'chromeHue', shade: 600, transparency: 0.15 })
+    )};
+  background-color: ${p => getColor({ theme: p.theme, variable: 'background.primary' })};
   padding: ${p => p.theme.space.xxl};
 
-  ${props =>
-    arrowStyles(props.position, {
-      size: `${props.size}px`,
-      inset: `${props.inset}px`,
+  ${p =>
+    arrowStyles(p.position, {
+      size: `${p.size}px`,
+      inset: `${p.inset}px`,
       animationModifier: '[data-garden-animate="true"]'
     })};
 `;
 
-export const ArrowStylesStory: Story<IArgs> = ({ isAnimated, ...args }) => (
+export const ArrowStylesStory: StoryFn<IArgs> = ({ isAnimated, ...args }) => (
   <div style={{ position: 'relative', zIndex: 0 }}>
     <StyledDiv data-garden-animate={isAnimated} {...args} />
   </div>
diff --git a/packages/theming/demo/utilities.stories.mdx b/packages/theming/demo/utilities.stories.mdx
@@ -32,9 +32,10 @@ import README from '../README.md';
       inset: 0
     }}
     argTypes={{
-      position: { control: { type: 'select', options: ARROW_POSITIONS } },
+      position: { control: 'select', options: ARROW_POSITIONS },
       size: { control: { type: 'range', min: 2, max: 10, step: 1 } },
-      inset: { control: { type: 'range', min: -4, max: 4, step: 1 } }
+      inset: { control: { type: 'range', min: -4, max: 4, step: 1 } },
+      theme: { control: false }
     }}
   >
     {args => <ArrowStylesStory {...args} />}
@@ -78,7 +79,8 @@ import README from '../README.md';
       isAnimated: true
     }}
     argTypes={{
-      position: { control: { type: 'radio', options: MENU_POSITIONS } }
+      position: { control: 'radio', options: MENU_POSITIONS },
+      theme: { control: false }
     }}
   >
     {args => <MenuStylesStory {...args} />}
diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts
@@ -32,6 +32,9 @@ export {
   type IGardenTheme,
   type IThemeProviderProps,
   type ArrowPosition,
+  type ColorParameters,
+  type FocusBoxShadowParameters,
+  type FocusStylesParameters,
   type MenuPosition,
   type Placement
 } from './types';
diff --git a/packages/theming/src/types/index.ts b/packages/theming/src/types/index.ts
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { ThemeProviderProps } from 'styled-components';
+import { CSSObject, ThemeProviderProps } from 'styled-components';
 
 export const ARROW_POSITION = [
   'top',
@@ -45,6 +45,43 @@ export const PLACEMENT = [
 
 export type Placement = (typeof PLACEMENT)[number];
 
+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 {
diff --git a/packages/theming/src/utils/focusStyles.spec.tsx b/packages/theming/src/utils/focusStyles.spec.tsx
@@ -6,34 +6,25 @@
  */
 
 import React from 'react';
-import { render } from 'garden-test-utils';
-import styled, { ThemeProps, DefaultTheme, CSSObject } from 'styled-components';
+import { render, renderDark } from 'garden-test-utils';
+import styled, { DefaultTheme, ThemeProps } from 'styled-components';
 import { focusStyles } from './focusStyles';
-import { Hue } from '../types';
+import { FocusStylesParameters } from '../types';
 import DEFAULT_THEME from '../elements/theme';
-import PALETTE_V8 from '../elements/palette/v8';
-
-interface IStyledDivProps extends ThemeProps<DefaultTheme> {
-  condition?: boolean;
-  inset?: boolean;
-  hue?: Hue;
-  selector?: string;
-  shade?: number;
-  shadowWidth?: 'sm' | 'md';
-  spacerHue?: Hue;
-  spacerShade?: number;
-  spacerWidth?: null | 'xs' | 'sm';
-  styles?: CSSObject;
+import PALETTE from '../elements/palette';
+
+interface IStyledDivProps extends ThemeProps<DefaultTheme>, FocusStylesParameters {
+  $color?: FocusStylesParameters['color'];
 }
 
 const StyledDiv = styled.div<IStyledDivProps>`
-  ${props => focusStyles(props)}
+  ${({ $color, ...props }) => focusStyles({ color: $color, ...props })}
 `;
 
 describe('focusStyles', () => {
   it('renders with expected defaults', () => {
     const { container } = render(<StyledDiv />);
-    const expected = `${DEFAULT_THEME.shadowWidths.md} ${PALETTE_V8.blue[600]}`;
+    const expected = `${DEFAULT_THEME.shadowWidths.md} ${PALETTE.blue[700]}`;
 
     expect(container.firstChild).toHaveStyleRule('outline', 'none', { modifier: '&:focus' });
     expect(container.firstChild).toHaveStyleRule('box-shadow', expect.stringContaining(expected), {
@@ -55,6 +46,15 @@ describe('focusStyles', () => {
     );
   });
 
+  it('renders with expected defaults for dark mode', () => {
+    const { container } = renderDark(<StyledDiv />);
+    const expected = `${DEFAULT_THEME.shadowWidths.md} ${PALETTE.blue[600]}`;
+
+    expect(container.firstChild).toHaveStyleRule('box-shadow', expect.stringContaining(expected), {
+      modifier: '&:focus-visible'
+    });
+  });
+
   it('renders inset as expected', () => {
     const { container } = render(<StyledDiv inset />);
 
@@ -64,23 +64,23 @@ describe('focusStyles', () => {
   });
 
   it('renders color as expected', () => {
-    const { container } = render(<StyledDiv hue="red" shade={400} />);
+    const { container } = render(<StyledDiv $color={{ hue: 'red', shade: 400 }} />);
 
     expect(container.firstChild).toHaveStyleRule(
       'box-shadow',
-      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.md} ${PALETTE_V8.red[400]}`),
+      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.md} ${PALETTE.red[400]}`),
       {
         modifier: '&:focus-visible'
       }
     );
   });
 
   it('renders spacer color as expected', () => {
-    const { container } = render(<StyledDiv spacerHue="red" spacerShade={400} />);
+    const { container } = render(<StyledDiv spacerColor={{ hue: 'red', shade: 400 }} />);
 
     expect(container.firstChild).toHaveStyleRule(
       'box-shadow',
-      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE_V8.red[400]}`),
+      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE.red[400]}`),
       {
         modifier: '&:focus-visible'
       }
@@ -92,7 +92,7 @@ describe('focusStyles', () => {
 
     expect(container.firstChild).toHaveStyleRule(
       'box-shadow',
-      expect.stringContaining(`${PALETTE_V8.blue[600]}`),
+      expect.stringContaining(`${PALETTE.blue[700]}`),
       {
         modifier: '&:focus-within'
       }
@@ -104,14 +104,14 @@ describe('focusStyles', () => {
 
     expect(container.firstChild).toHaveStyleRule(
       'box-shadow',
-      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE_V8.blue[600]}`),
+      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE.blue[700]}`),
       {
         modifier: '&:focus-visible'
       }
     );
     expect(container.firstChild).toHaveStyleRule(
       'box-shadow',
-      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE_V8.white}`),
+      expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE.white}`),
       {
         modifier: '&:focus-visible'
       }
@@ -135,7 +135,7 @@ describe('focusStyles', () => {
   });
 
   it('renders user provided styles', () => {
-    const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE_V8.black);
+    const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE.black);
     const { container } = render(
       <StyledDiv styles={{ backgroundColor: 'black', boxShadow: dropShadow, color: 'white' }} />
     );
diff --git a/packages/theming/src/utils/focusStyles.ts b/packages/theming/src/utils/focusStyles.ts
diff --git a/packages/theming/src/utils/getColor.ts b/packages/theming/src/utils/getColor.ts
diff --git a/packages/theming/src/utils/getFocusBoxShadow.spec.ts b/packages/theming/src/utils/getFocusBoxShadow.spec.ts
diff --git a/packages/theming/src/utils/getFocusBoxShadow.ts b/packages/theming/src/utils/getFocusBoxShadow.ts
diff --git a/packages/theming/src/utils/menuStyles.ts b/packages/theming/src/utils/menuStyles.ts
