feat(Modal): new light/dark mode colors (#1808)

ze-flo · web-flow · commit 2649a2a7b1e9 · 2024-05-22T09:28:24.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/modals/package.json b/packages/modals/package.json
@@ -24,6 +24,7 @@
     "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-modal": "^1.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.11",
     "dom-helpers": "^5.1.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
diff --git a/packages/modals/src/styled/StyledBackdrop.spec.tsx b/packages/modals/src/styled/StyledBackdrop.spec.tsx
@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
-import { render, renderRtl } from 'garden-test-utils';
+import { render, renderDark, renderRtl } from 'garden-test-utils';
 import { StyledBackdrop } from './StyledBackdrop';
+import { rgba } from 'polished';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledBackdrop', () => {
   it('renders default styling', () => {
@@ -32,4 +34,16 @@ describe('StyledBackdrop', () => {
     expect(container.firstChild).toHaveStyleRule('align-items', 'center');
     expect(container.firstChild).toHaveStyleRule('justify-content', 'center');
   });
+
+  describe('backdrop color', () => {
+    it.each([['light'], ['dark']])('gets the correct %s mode color', mode => {
+      const renderFn = mode === 'light' ? render : renderDark;
+      const { container } = renderFn(<StyledBackdrop isCentered />);
+
+      expect(container.firstChild).toHaveStyleRule(
+        'background-color',
+        rgba(mode === 'light' ? PALETTE.grey[900] : PALETTE.grey[1200], DEFAULT_THEME.opacity[1000])
+      );
+    });
+  });
 });
diff --git a/packages/modals/src/styled/StyledBackdrop.ts b/packages/modals/src/styled/StyledBackdrop.ts
@@ -7,7 +7,7 @@
 
 import PropTypes from 'prop-types';
 import styled, { css, keyframes } from 'styled-components';
-import { getColorV8, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'modals.backdrop';
 
@@ -49,7 +49,14 @@ export const StyledBackdrop = styled.div.attrs<IStyledBackdropProps>({
   align-items: ${props => props.isCentered && 'center'};
   justify-content: ${props => props.isCentered && 'center'};
   z-index: 400;
-  background-color: ${props => getColorV8('neutralHue', 800, props.theme, 0.85)};
+  background-color: ${({ theme }) =>
+    getColor({
+      theme,
+      hue: 'neutralHue',
+      transparency: theme.opacity[1000],
+      light: { shade: 900 },
+      dark: { shade: 1200 }
+    })};
   overflow: auto;
   -webkit-overflow-scrolling: touch; /* [1] */
   font-family: ${props => props.theme.fonts.system};
diff --git a/packages/modals/src/styled/StyledBody.ts b/packages/modals/src/styled/StyledBody.ts
@@ -10,7 +10,7 @@ import {
   getLineHeight,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'modals.body';
@@ -25,7 +25,7 @@ export const StyledBody = styled.div.attrs({
   height: 100%;
   overflow: auto;
   line-height: ${props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
-  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
+  color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })};
   font-size: ${props => props.theme.fontSizes.md};
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/modals/src/styled/StyledClose.spec.tsx b/packages/modals/src/styled/StyledClose.spec.tsx
@@ -8,17 +8,26 @@
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
 import { StyledClose } from './StyledClose';
+import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
 
 describe('StyledClose', () => {
   it('renders default styling', () => {
-    const { container } = render(<StyledClose />);
+    const { container } = render(
+      <StyledClose>
+        <XStrokeIcon />
+      </StyledClose>
+    );
 
     expect(container.firstChild).toHaveStyleRule('top', '10px');
     expect(container.firstChild).toHaveStyleRule('right', '26px');
   });
 
   it('renders RTL styling if provided', () => {
-    const { container } = renderRtl(<StyledClose />);
+    const { container } = renderRtl(
+      <StyledClose>
+        <XStrokeIcon />
+      </StyledClose>
+    );
 
     expect(container.firstChild).toHaveStyleRule('top', '10px');
     expect(container.firstChild).toHaveStyleRule('left', '26px');
diff --git a/packages/modals/src/styled/StyledClose.ts b/packages/modals/src/styled/StyledClose.ts
@@ -5,89 +5,26 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
-import {
-  getColorV8,
-  retrieveComponentStyles,
-  DEFAULT_THEME,
-  focusStyles
-} from '@zendeskgarden/react-theming';
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'modals.close';
 
-const colorStyles = (props: ThemeProps<DefaultTheme>) => {
-  const backgroundColor = 'primaryHue';
-  const foregroundColor = 'neutralHue';
-
-  return css`
-    background-color: transparent;
-    color: ${getColorV8(foregroundColor, 600, props.theme)};
-
-    &:hover {
-      background-color: ${getColorV8(backgroundColor, 600, props.theme, 0.08)};
-      color: ${getColorV8(foregroundColor, 700, props.theme)};
-    }
-
-    ${focusStyles({
-      theme: props.theme,
-      color: { hue: backgroundColor }
-    })}
-
-    &:active {
-      /* prettier-ignore */
-      transition:
-        background-color 0.1s ease-in-out,
-        color 0.1s ease-in-out;
-      background-color: ${getColorV8(backgroundColor, 600, props.theme, 0.2)};
-      color: ${getColorV8(foregroundColor, 800, props.theme)};
-    }
-  `;
-};
-
 export const BASE_MULTIPLIERS = {
   top: 2.5,
   side: 6.5,
   size: 10
 };
 
-/**
- * 1. Remove dotted outline from Firefox on focus.
- */
-export const StyledClose = styled.button.attrs({
+export const StyledClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
-  display: block;
   position: absolute;
   top: ${props => props.theme.space.base * BASE_MULTIPLIERS.top}px;
   ${props => (props.theme.rtl ? 'left' : 'right')}: ${props =>
     `${props.theme.space.base * BASE_MULTIPLIERS.side}px`};
-  /* prettier-ignore */
-  transition:
-    box-shadow 0.1s ease-in-out,
-    background-color 0.25s ease-in-out,
-    color 0.25s ease-in-out;
-  border: none;
-  border-radius: 50%;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0;
-  width: ${props => props.theme.space.base * BASE_MULTIPLIERS.size}px;
-  height: ${props => props.theme.space.base * BASE_MULTIPLIERS.size}px;
-  overflow: hidden;
-  text-decoration: none;
-  font-size: 0;
-  user-select: none;
-
-  &::-moz-focus-inner {
-    border: 0; /* [1] */
-  }
-
-  ${props => colorStyles(props)}
-
-  & > svg {
-    vertical-align: middle;
-  }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/modals/src/styled/StyledDrawerClose.spec.tsx b/packages/modals/src/styled/StyledDrawerClose.spec.tsx
@@ -8,17 +8,26 @@
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
 import { StyledDrawerClose } from './StyledDrawerClose';
+import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
 
 describe('StyledDrawerClose', () => {
   it('renders default styling', () => {
-    const { container } = render(<StyledDrawerClose />);
+    const { container } = render(
+      <StyledDrawerClose>
+        <XStrokeIcon />
+      </StyledDrawerClose>
+    );
 
     expect(container.firstChild).toHaveStyleRule('top', '10px');
     expect(container.firstChild).toHaveStyleRule('right', '8px');
   });
 
   it('renders RTL styling if provided', () => {
-    const { container } = renderRtl(<StyledDrawerClose />);
+    const { container } = renderRtl(
+      <StyledDrawerClose>
+        <XStrokeIcon />
+      </StyledDrawerClose>
+    );
 
     expect(container.firstChild).toHaveStyleRule('top', '10px');
     expect(container.firstChild).toHaveStyleRule('left', '8px');
diff --git a/packages/modals/src/styled/StyledDrawerHeader.spec.tsx b/packages/modals/src/styled/StyledDrawerHeader.spec.tsx
@@ -6,21 +6,29 @@
  */
 
 import React from 'react';
-import { render } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { render, renderDark } from 'garden-test-utils';
+import { PALETTE } from '@zendeskgarden/react-theming';
 
 import { StyledDrawerHeader } from './StyledDrawerHeader';
 
 describe('StyledDrawerHeader', () => {
-  it('renders default styling', () => {
-    const { container } = render(<StyledDrawerHeader />);
+  it.each([['light'], ['dark']])('gets the correct %s mode default color', mode => {
+    const renderFn = mode === 'light' ? render : renderDark;
+    const { container } = renderFn(<StyledDrawerHeader />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
+    expect(container.firstChild).toHaveStyleRule(
+      'color',
+      mode === 'light' ? PALETTE.grey[900] : PALETTE.grey[300]
+    );
   });
 
-  it('renders danger styling if provided', () => {
-    const { container } = render(<StyledDrawerHeader isDanger />);
+  it.each([['light'], ['dark']])('gets the correct %s mode danger color', mode => {
+    const renderFn = mode === 'light' ? render : renderDark;
+    const { container } = renderFn(<StyledDrawerHeader isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
+    expect(container.firstChild).toHaveStyleRule(
+      'color',
+      mode === 'light' ? PALETTE.red[700] : PALETTE.red[400]
+    );
   });
 });
diff --git a/packages/modals/src/styled/StyledHeader.spec.tsx b/packages/modals/src/styled/StyledHeader.spec.tsx
@@ -6,21 +6,29 @@
  */
 
 import React from 'react';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
-import { render } from 'garden-test-utils';
+import { PALETTE } from '@zendeskgarden/react-theming';
+import { render, renderDark } from 'garden-test-utils';
 
 import { StyledHeader } from './StyledHeader';
 
 describe('StyledHeader', () => {
-  it('renders default styling', () => {
-    const { container } = render(<StyledHeader />);
+  it.each([['light'], ['dark']])('gets the correct %s mode default color', mode => {
+    const renderFn = mode === 'light' ? render : renderDark;
+    const { container } = renderFn(<StyledHeader />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
+    expect(container.firstChild).toHaveStyleRule(
+      'color',
+      mode === 'light' ? PALETTE.grey[900] : PALETTE.grey[300]
+    );
   });
 
-  it('renders danger styling if provided', () => {
-    const { container } = render(<StyledHeader isDanger />);
+  it.each([['light'], ['dark']])('gets the correct %s mode danger color', mode => {
+    const renderFn = mode === 'light' ? render : renderDark;
+    const { container } = renderFn(<StyledHeader isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
+    expect(container.firstChild).toHaveStyleRule(
+      'color',
+      mode === 'light' ? PALETTE.red[700] : PALETTE.red[400]
+    );
   });
 });
diff --git a/packages/modals/src/styled/StyledHeader.ts b/packages/modals/src/styled/StyledHeader.ts
@@ -5,12 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
+import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
 import {
   getLineHeight,
-  getColorV8,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 import { BASE_MULTIPLIERS } from './StyledClose';
@@ -22,6 +22,19 @@ export interface IStyledHeaderProps {
   isCloseButtonPresent?: boolean;
 }
 
+const colorStyles = ({ isDanger, theme }: IStyledHeaderProps & ThemeProps<DefaultTheme>) => {
+  const bottomBorderColor = getColor({ theme, variable: 'border.subtle' });
+  const color = getColor({
+    theme,
+    variable: isDanger ? 'foreground.danger' : 'foreground.default'
+  });
+
+  return css`
+    border-bottom-color: ${bottomBorderColor};
+    color: ${color};
+  `;
+};
+
 /**
  * 1. the padding added to the Header is based on the close button size and spacing,
  *    with additional padding (+ 2) between the Header content and Close button
@@ -33,21 +46,19 @@ export const StyledHeader = styled.div.attrs<IStyledHeaderProps>({
   display: block;
   position: ${props => props.isDanger && 'relative'};
   margin: 0;
-  border-bottom: ${props => props.theme.borders.sm} ${getColorV8('neutralHue', 200)};
+  border-bottom: ${props => props.theme.borders.sm};
   padding: ${props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`};
   ${props =>
     props.isCloseButtonPresent &&
     `padding-${props.theme.rtl ? 'left' : 'right'}: ${
       props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)
     }px;`} /* [1] */
   line-height: ${props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
-  color: ${props =>
-    props.isDanger
-      ? getColorV8('dangerHue', 600, props.theme)
-      : getColorV8('foreground', 600 /* default shade */, props.theme)};
   font-size: ${props => props.theme.fontSizes.md};
   font-weight: ${props => props.theme.fontWeights.semibold};
 
+  ${colorStyles};
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
diff --git a/packages/modals/src/styled/StyledModal.ts b/packages/modals/src/styled/StyledModal.ts
