feat(dropdowns.legacy): new light/dark mode colors (#1867)

jzempel · web-flow · commit 9dab83fd61e9 · 2024-07-25T10:02:39.000-04:00
diff --git a/packages/dropdowns.legacy/src/elements/Combobox/Combobox.spec.tsx b/packages/dropdowns.legacy/src/elements/Combobox/Combobox.spec.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { fireEvent, render } from 'garden-test-utils';
 import { KEY_CODES } from '@zendeskgarden/container-utilities';
 
@@ -45,7 +45,7 @@ describe('Combobox', () => {
 
     await user.hover(label);
 
-    expect(combobox).toHaveStyleRule('border-color', PALETTE_V8.blue[600], { modifier: ':hover' });
+    expect(combobox).toHaveStyleRule('border-color', PALETTE.blue[700], { modifier: ':hover' });
   });
 
   it('focuses input on label click', async () => {
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledAddItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledAddItem.ts
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 import { StyledItem } from './StyledItem';
 
@@ -19,7 +19,8 @@ export const StyledAddItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
-  color: ${props => !props.disabled && getColorV8('primaryHue', 600, props.theme)};
+  color: ${props =>
+    !props.disabled && getColor({ theme: props.theme, variable: 'foreground.primary' })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx b/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx
@@ -6,9 +6,8 @@
  */
 
 import React from 'react';
-import { rgba } from 'polished';
 import { render } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem';
 
 describe('StyledItem', () => {
@@ -21,21 +20,12 @@ describe('StyledItem', () => {
   it('renders default styling', () => {
     const { container } = render(<StyledItem />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900]);
   });
 
   it('renders danger styling if provided', () => {
     const { container } = render(<StyledItem isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
-  });
-
-  it('render danger focus styling if provided', () => {
-    const { container } = render(<StyledItem isDanger isFocused />);
-
-    expect(container.firstChild).toHaveStyleRule(
-      'background-color',
-      rgba(PALETTE_V8.red[600], 0.08)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]);
   });
 });
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledItem.ts
@@ -6,8 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
-import { rgba } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.item';
 
@@ -28,19 +27,21 @@ export const getItemPaddingVertical = (props: IStyledItemProps & ThemeProps<Defa
 };
 
 const getColorStyles = (props: IStyledItemProps & ThemeProps<DefaultTheme>) => {
+  const backgroundColor = props.isFocused
+    ? getColor({
+        theme: props.theme,
+        variable: 'background.primaryEmphasis',
+        transparency: props.theme.opacity[100]
+      })
+    : 'inherit';
   let foregroundColor;
-  let backgroundColor;
 
   if (props.disabled) {
-    foregroundColor = getColorV8('neutralHue', 400, props.theme);
+    foregroundColor = getColor({ theme: props.theme, variable: 'foreground.disabled' });
   } else if (props.isDanger) {
-    foregroundColor = getColorV8('dangerHue', 600, props.theme);
-    backgroundColor = props.isFocused ? rgba(foregroundColor as string, 0.08) : 'inherit';
+    foregroundColor = getColor({ theme: props.theme, variable: 'foreground.danger' });
   } else {
-    foregroundColor = getColorV8('foreground', 600 /* default shade */, props.theme);
-    backgroundColor = props.isFocused
-      ? getColorV8('primaryHue', 600, props.theme, 0.08)
-      : 'inherit';
+    foregroundColor = getColor({ theme: props.theme, variable: 'foreground.default' });
   }
 
   return css`
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItemIcon.ts b/packages/dropdowns.legacy/src/styled/items/StyledItemIcon.ts
@@ -7,7 +7,7 @@
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { getItemPaddingVertical } from './StyledItem';
 
 const COMPONENT_ID = 'dropdowns.item_icon';
@@ -37,7 +37,10 @@ export const StyledItemIcon = styled.div.attrs({
   justify-content: center;
   transition: opacity 0.1s ease-in-out;
   opacity: ${props => (props.isVisible ? '1' : '0')};
-  color: ${props => (props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme))};
+  color: ${props =>
+    props.isDisabled
+      ? 'inherit'
+      : getColor({ theme: props.theme, variable: 'foreground.primary' })};
 
   ${props => getSizeStyles(props)};
 
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts b/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.item_meta';
 
@@ -24,7 +24,11 @@ export const StyledItemMeta = styled.span.attrs({
 })<IStyledItemMetaProps>`
   display: block;
   line-height: ${props => props.theme.space.base * (props.isCompact ? 3 : 4)}px;
-  color: ${props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme)};
+  color: ${props =>
+    getColor({
+      theme: props.theme,
+      variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
+    })};
   font-size: ${props => props.theme.fontSizes.sm};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx b/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx
@@ -8,7 +8,7 @@
 import React, { HTMLAttributes } from 'react';
 import styled from 'styled-components';
 import NextIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.next_item_icon';
 
@@ -26,7 +26,10 @@ const NextIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ className
 
 export const StyledNextIcon = styled(NextIconComponent)<IStyledNextIconProps>`
   transform: ${props => props.theme.rtl && 'rotate(180deg)'};
-  color: ${props => (props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme))};
+  color: ${props =>
+    props.isDisabled
+      ? 'inherit'
+      : getColor({ theme: props.theme, variable: 'foreground.disabled' })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx b/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx
@@ -8,7 +8,7 @@
 import React, { HTMLAttributes } from 'react';
 import styled from 'styled-components';
 import PreviousIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.previous_item_icon';
 
@@ -26,7 +26,8 @@ const PreviousIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ classN
 
 export const StyledPreviousIcon = styled(PreviousIconComponent)<IStyledPreviousIconProps>`
   transform: ${props => props.theme.rtl && 'rotate(180deg)'};
-  color: ${props => (props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme))};
+  color: ${props =>
+    props.isDisabled ? 'inherit' : getColor({ theme: props.theme, variable: 'foreground.subtle' })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.ts b/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.ts
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.header_icon';
 
@@ -25,7 +25,7 @@ export const StyledHeaderIcon = styled.div.attrs({
   align-items: center;
   justify-content: center;
   ${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 3}px;
-  color: ${props => getColorV8('neutralHue', 600, props.theme)};
+  color: ${props => getColor({ theme: props.theme, variable: 'foreground.subtle' })};
 
   & > * {
     width: ${props => props.theme.iconSizes.md};
diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts b/packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.separator';
 
@@ -21,7 +21,7 @@ export const StyledSeparator = styled.li.attrs({
   display: block;
   margin: ${props => props.theme.space.base}px 0;
   border-bottom: ${props =>
-    `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`};
+    `${props.theme.borders.sm} ${getColor({ theme: props.theme, variable: 'border.subtle' })}`};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts
@@ -7,10 +7,10 @@
 
 import styled from 'styled-components';
 import {
-  getColorV8,
   getLineHeight,
   DEFAULT_THEME,
-  retrieveComponentStyles
+  retrieveComponentStyles,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
@@ -34,9 +34,10 @@ export const StyledMultiselectMoreAnchor = styled.div.attrs({
     props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
   white-space: nowrap;
   color: ${props =>
-    props.isDisabled
-      ? getColorV8('neutralHue', 400, props.theme)
-      : getColorV8('primaryHue', 600, props.theme)};
+    getColor({
+      theme: props.theme,
+      variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
+    })};
 
   :hover {
     text-decoration: ${props => !props.isDisabled && 'underline'};
