feat(modals): new light/dark mode colors for TooltipModal and Drawer

packages/modals/demo/stories/TooltipModalStory.tsx

@@ -7,7 +7,8 @@
 
 import React, { useRef } from 'react';
 import { Story } from '@storybook/react';
-import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { useTheme } from 'styled-components';
+import { getColor } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
 import { Button, IconButton } from '@zendeskgarden/react-buttons';
 import { Avatar } from '@zendeskgarden/react-avatars';
@@ -45,6 +46,7 @@ export const TooltipModalStory: Story<IArgs> = ({
 }) => {
   const refs = useRef<(HTMLElement | null | undefined)[]>([]);
   const current = refs.current.indexOf(args.referenceElement);
+  const theme = useTheme();
 
   // Using `aria-label={undefined}` when `hasTitle` is `true` appears to
   // void the fallback value in Storybook, resulting in no rendered attribute
@@ -97,9 +99,7 @@ export const TooltipModalStory: Story<IArgs> = ({
                 }}
                 onClick={event => handleClick(event.currentTarget)}
               >
-                <Avatar
-                  foregroundColor={getColorV8('foreground', 600 /* default shade */, DEFAULT_THEME)}
-                >
+                <Avatar foregroundColor={getColor({ variable: 'foreground.default', theme })}>
                   <Avatar.Text>{index + 1}</Avatar.Text>
                 </Avatar>
               </IconButton>

packages/modals/src/elements/TooltipModal/Close.tsx

@@ -24,6 +24,7 @@ const CloseComponent = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLBu
           'aria-label': ariaLabel!
         }) as ButtonHTMLAttributes<HTMLButtonElement>)}
         ref={ref}
+        size="small"
       >
         <XStrokeIcon />
       </StyledTooltipModalClose>

packages/modals/src/styled/StyledDrawer.spec.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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';
+import { getRenderFn } from 'garden-test-utils';
+import { PALETTE, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledDrawer } from './StyledDrawer';
+import { rgba } from 'polished';
+
+describe('StyledDrawer', () => {
+  type Args = [
+    'dark' | 'light',
+    {
+      bgColor: string;
+      borderColor: string;
+      boxShadowColor: string;
+    }
+  ];
+
+  it.each<Args>([
+    [
+      'light',
+      {
+        bgColor: PALETTE.white,
+        borderColor: PALETTE.grey[300],
+        boxShadowColor: rgba(PALETTE.grey[1200], DEFAULT_THEME.opacity[200])
+      }
+    ],
+    [
+      'dark',
+      {
+        bgColor: PALETTE.grey[1000],
+        borderColor: PALETTE.grey[800],
+        boxShadowColor: rgba(PALETTE.grey[1200], DEFAULT_THEME.opacity[1000])
+      }
+    ]
+  ])('renders in "%s" mode', (mode, { bgColor, borderColor, boxShadowColor }) => {
+    const { container } = getRenderFn(mode)(<StyledDrawer />);
+
+    expect(container.firstChild).toHaveStyleRule('background-color', bgColor);
+    expect(container.firstChild).toHaveStyleRule('border-color', borderColor);
+    expect(container.firstChild).toHaveStyleRule('box-shadow', `0 20px 28px 0 ${boxShadowColor}`);
+  });
+
+  it('renders RTL styling', () => {
+    const { container } = getRenderFn('light', true)(<StyledDrawer />);
+
+    expect(container.firstChild).toHaveStyleRule('direction', 'rtl');
+    expect(container.firstChild).toHaveStyleRule('border-right', '1px solid');
+  });
+});

packages/modals/src/styled/StyledDrawer.ts

@@ -5,21 +5,33 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { ThemeProps, DefaultTheme } from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'modals.drawer_modal';
 
 const DRAWER_WIDTH = 380;
 
-const boxShadow = (props: ThemeProps<DefaultTheme>) => {
-  const { theme } = props;
-  const { space, shadows } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = getColorV8('neutralHue', 800, theme, 0.35);
+const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
+  const shadowColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 1200,
+    light: { transparency: theme.opacity[200] },
+    dark: { transparency: theme.opacity[1000] }
+  });
+  const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
 
-  return shadows.lg(offsetY, blurRadius, color as string);
+  const borderColor = getColor({ theme, variable: 'border.default' });
+  const backgroundColor = getColor({ theme, variable: 'background.raised' });
+
+  return css`
+    border-color: ${borderColor};
+    box-shadow: ${shadow};
+    background-color: ${backgroundColor};
+  `;
 };
 
 /**
@@ -35,8 +47,8 @@ export const StyledDrawer = styled.div.attrs({
   ${props => (props.theme.rtl ? 'left' : 'right')}: 0;
   flex-direction: column;
   z-index: 500;
-  box-shadow: ${boxShadow};
-  background: ${props => getColorV8('background', 600 /* default shade */, props.theme)};
+  ${props => (props.theme.rtl ? 'border-right' : 'border-left')}: ${props =>
+    props.theme.borders.sm};
   width: ${DRAWER_WIDTH}px;
   height: 100%;
   overflow: auto;
@@ -62,6 +74,8 @@ export const StyledDrawer = styled.div.attrs({
     outline: none;
   }
 
+  ${colorStyles}
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

packages/modals/src/styled/StyledDrawerFooter.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'modals.drawer_modal.footer';
 
@@ -17,7 +17,8 @@ export const StyledDrawerFooter = styled.div.attrs({
   display: flex;
   flex-shrink: 0;
   justify-content: flex-end;
-  border-top: ${props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`};
+  border-top: ${({ theme }) =>
+    `${theme.borders.sm} ${getColor({ theme, variable: 'border.subtle' })}`};
   padding: ${props => props.theme.space.base * 5}px;
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

packages/modals/src/styled/StyledModal.ts

@@ -48,8 +48,8 @@ const animationStyles = (props: IStyledModalProps) => {
 };
 
 const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
-  const offsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
-  const blurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 6 : 7)}px`;
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
   const shadowColor = getColor({
     theme,
     hue: 'neutralHue',

packages/modals/src/styled/StyledTooltipModalBody.ts

@@ -10,7 +10,7 @@ import {
   getLineHeight,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'modals.tooltip_modal.body';
@@ -23,7 +23,7 @@ export const StyledTooltipModalBody = styled.div.attrs({
   margin: 0;
   padding-top: ${props => props.theme.space.base * 1.5}px;
   line-height: ${props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
-  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
+  color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })};
   font-size: ${props => props.theme.fontSizes.md};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

packages/modals/src/styled/StyledTooltipModalClose.ts

@@ -17,9 +17,6 @@ export const StyledTooltipModalClose = styled(StyledClose).attrs({
 })`
   top: ${props => props.theme.space.base * 3.5}px;
   ${props => (props.theme.rtl ? 'left' : 'right')}: ${props => `${props.theme.space.base * 3}px`};
-  width: ${props => props.theme.space.base * 8}px;
-  height: ${props => props.theme.space.base * 8}px;
-
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

packages/modals/src/styled/StyledTooltipModalTitle.ts

@@ -10,7 +10,7 @@ import {
   getLineHeight,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'modals.tooltip_modal.title';
@@ -27,7 +27,7 @@ export const StyledTooltipModalTitle = styled.div.attrs({
   'data-garden-version': PACKAGE_VERSION
 })`
   margin: 0;
-  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
+  color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })};
   font-weight: ${props => props.theme.fontWeights.semibold};
 
   ${props => sizeStyles(props)};