feat(drag-drop): adds light/dark mode colors (#1805)

Author: geotrev

package-lock.json

@@ -19,6 +19,7 @@ import { Draggable, DraggableList, Dropzone } from '@zendeskgarden/react-drag-dr
 
 import { animateLayoutChanges } from './utils';
 import type { IDraggableItemProps, IDropIndicatorProps, ISortableColumnProps } from './types';
+import { LG, MD } from '@zendeskgarden/react-typography';
 
 export const DraggableItem = forwardRef<HTMLDivElement, IDraggableItemProps>((props, ref) => {
   const { isOverlay, data, tabIndex, ...restProps } = props;
@@ -225,9 +226,7 @@ export const DraggablesColumn = ({
 }: ISortableColumnProps) => {
   return (
     <div style={isHorizontal ? { minHeight: '100px' } : { width: '250px' }}>
-      <p>
-        <strong>Produce</strong>
-      </p>
+      <LG tag="h2">Produce</LG>
       {items.length > 0 && (
         <DraggableList isHorizontal={isHorizontal}>
           {items.map(item => (
@@ -242,7 +241,7 @@ export const DraggablesColumn = ({
           ))}
         </DraggableList>
       )}
-      {items.length === 0 && <small>You picked every fruit!</small>}
+      {items.length === 0 && <MD tag="p">No more produce!</MD>}
     </div>
   );
 };
@@ -252,9 +251,7 @@ export const DroppablesColumn = (props: ISortableColumnProps) => {
 
   return (
     <div style={isHorizontal ? { minHeight: '100px' } : { width: '284px' }}>
-      <p>
-        <strong>Favorites</strong>
-      </p>
+      <LG tag="h2">Favorites</LG>
       <SortablesColumn {...props} />
     </div>
   );

packages/drag-drop/demo/~patterns/stories/components.tsx

@@ -35,6 +35,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@zendeskgarden/react-theming": "^9.0.0-next.10",
+    "@zendeskgarden/react-typography": "^9.0.0-next.10",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [

packages/drag-drop/package.json

@@ -6,10 +6,9 @@
  */
 
 import React from 'react';
-import { rgba } from 'polished';
 import { render, renderRtl } from 'garden-test-utils';
 import { Dropzone } from './Dropzone';
-import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 describe('Dropzone', () => {
   it('passes ref to underlying DOM element', () => {
@@ -154,91 +153,4 @@ describe('Dropzone', () => {
       expect(queryByText('message')!.nodeName).toBe('P');
     });
   });
-
-  const STATES = ['default', 'danger', 'disabled'];
-  const dangerColor = getColorV8('dangerHue', 600, DEFAULT_THEME);
-  const dangerDarkColor = getColorV8('dangerHue', 800, DEFAULT_THEME);
-  const dangerBgColor = rgba(getColorV8('dangerHue', 600, DEFAULT_THEME) as string, 0.08);
-  const primaryColor = getColorV8('primaryHue', 600, DEFAULT_THEME);
-  const primaryDarkColor = getColorV8('primaryHue', 800, DEFAULT_THEME);
-  const primaryBgColor = rgba(getColorV8('primaryHue', 600, DEFAULT_THEME) as string, 0.08);
-  const neutralColor = getColorV8('neutralHue', 600, DEFAULT_THEME);
-
-  const StateMap: Record<string, any> = {
-    disabled: {
-      base: `
-        background-color: ${getColorV8('neutralHue', 200, DEFAULT_THEME)};
-        color: ${getColorV8('neutralHue', 400, DEFAULT_THEME)};
-        border-color: ${getColorV8('neutralHue', 300, DEFAULT_THEME)};
-      `
-    },
-    default: {
-      base: `
-        background-color: transparent;
-        color: ${neutralColor};
-        border-color: ${neutralColor};
-      `,
-      active: `
-        background-color: ${primaryBgColor};
-        color: ${primaryColor};
-        border-color: ${primaryColor};
-      `,
-      highlight: `
-        background-color: ${primaryBgColor};
-        color: ${primaryDarkColor};
-        border-color: ${primaryColor};
-        border-width: 2px;
-        border-style: solid;
-      `
-    },
-    danger: {
-      base: `
-        background-color: transparent;
-        color: ${dangerColor};
-        border-color: ${dangerColor};
-      `,
-      active: `
-        background-color: ${dangerBgColor};
-        color: ${dangerColor};
-        border-color: ${dangerColor};
-      `,
-      highlight: `
-        background-color: ${dangerBgColor};
-        color: ${dangerDarkColor};
-        border-color: ${dangerColor};
-        border-width: 2px;
-        border-style: solid;
-      `
-    }
-  };
-
-  describe.each(STATES)(`%s state`, state => {
-    it('applies correct base styling', () => {
-      const { container } = render(
-        <Dropzone isDanger={state === 'danger'} isDisabled={state === 'disabled'} />
-      );
-
-      expect(container.firstChild).toHaveStyle(StateMap[state].base);
-    });
-
-    if (StateMap[state].active) {
-      it('applies correct active styling', () => {
-        const { container } = render(
-          <Dropzone isDanger={state === 'danger'} isDisabled={state === 'disabled'} isActive />
-        );
-
-        expect(container.firstChild).toHaveStyle(StateMap[state].active);
-      });
-    }
-
-    if (StateMap[state].highlight) {
-      it('applies correct highlight styling', () => {
-        const { container } = render(
-          <Dropzone isDanger={state === 'danger'} isDisabled={state === 'disabled'} isHighlighted />
-        );
-
-        expect(container.firstChild).toHaveStyle(StateMap[state].highlight);
-      });
-    }
-  });
 });

packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'draggable_list.drop_indicator';
 
@@ -16,15 +16,14 @@ export interface IStyledDropIndicatorProps extends ThemeProps<DefaultTheme> {
 
 const colorStyles = (props: IStyledDropIndicatorProps) => {
   const { theme } = props;
-  const backgroundColor = getColorV8('primaryHue', 600, theme);
-  const color = getColorV8('primaryHue', 600, theme);
+  const color = getColor({ variable: 'border.primaryEmphasis', theme });
 
   return css`
-    box-shadow: ${`0 0 0 ${theme.borderWidths.sm} ${color}`};
+    box-shadow: ${theme.shadows.xs(color)};
 
     &::before,
     &::after {
-      background-color: ${backgroundColor};
+      background-color: ${color};
     }
 
     &:focus {