feat(theming)!: update PALETTE with redesigned 100-1200 shades (#1762)

Author: jzempel

.storybook/preview.js

@@ -10,13 +10,17 @@ import styled, { createGlobalStyle } from 'styled-components';
 import { create } from '@storybook/theming/create';
 import { ThemeProvider, DEFAULT_THEME, getColorV8 } from '../packages/theming/src';
 
+const DARK_THEME = { ...DEFAULT_THEME, colors: { ...DEFAULT_THEME.colors, base: 'dark' } };
+const DARK = getColorV8('foreground', 600 /* default shade */, DARK_THEME);
+const LIGHT = getColorV8('background', 600 /* default shade */, DEFAULT_THEME);
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
     grid: { disable: true },
     values: [
-      { name: 'light', value: DEFAULT_THEME.colors.background },
-      { name: 'dark', value: DEFAULT_THEME.colors.foreground }
+      { name: 'light', value: LIGHT },
+      { name: 'dark', value: DARK }
     ]
   },
   controls: {
@@ -57,7 +61,7 @@ const withThemeProvider = (story, context) => {
 
   if (
     context.globals.backgrounds && context.globals.backgrounds.value !== 'transparent'
-      ? context.globals.backgrounds.value === DEFAULT_THEME.colors.foreground
+      ? context.globals.backgrounds.value === DARK
       : context.parameters.backgrounds.default === 'dark'
   ) {
     colors.base = 'dark';

docs/migration.md

@@ -173,6 +173,13 @@ consider additional positioning prop support on a case-by-case basis.
 - The default `theme` object has removed values for `colors.background` and
   `colors.foreground`. Use the `'background.default'` and `'foreground.default'`
   variables together with the v9 `getColor` utility instead.
+- The theming `palette` has undergone a comprehensive redesign and now includes
+  enhanced support for both light and dark modes. To facilitate a smoother
+  transition, we have introduced a temporary utility, `getColorV8`, which is
+  deprecated. This utility enables the application of the legacy version 8 color
+  scheme to custom components that are not part of the Garden framework. It is
+  recommended to utilize this stopgap measure until such components can be updated
+  to leverage the full capabilities of v9 `getColor`.
 - Utility function `getDocument` has been removed. Use `useDocument` instead.
 - Utility function `isRtl` has been removed. Use `props.theme.rtl` instead.
 - The following exports have changed:

packages/accordions/src/styled/accordion/StyledButton.spec.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
 
 describe('StyledButton', () => {
@@ -16,7 +16,7 @@ describe('StyledButton', () => {
 
     expect(container.firstChild).toHaveStyleRule('padding', '20px');
     expect(container.firstChild).toHaveStyleRule('text-align', 'left');
-    expect(container.firstChild).toHaveStyleRule('color', '#2f3941');
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
     expect(container.firstChild).not.toHaveStyleRule('cursor');
   });
 
@@ -35,10 +35,7 @@ describe('StyledButton', () => {
   it('renders isHovered styling correctly', () => {
     const { container } = render(<StyledButton isHovered />);
 
-    expect(container.firstChild).toHaveStyleRule(
-      'color',
-      getColorV8('primaryHue', 600, DEFAULT_THEME)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.blue[600]);
 
     expect(container.firstChild).toHaveStyleRule('cursor', 'pointer', {
       modifier: '&:hover'

packages/accordions/src/styled/stepper/StyledIcon.spec.tsx

@@ -8,28 +8,23 @@
 import React from 'react';
 import { render } from 'garden-test-utils';
 import { StyledIcon } from './StyledIcon';
-import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 
 describe('StyledIcon', () => {
   it('renders default styles', () => {
     const { container } = render(<StyledIcon />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
-    expect(container.firstChild).toHaveStyleRule(
-      'background',
-      getColorV8('neutralHue', 200, DEFAULT_THEME)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
+    expect(container.firstChild).toHaveStyleRule('background', PALETTE_V8.grey[200]);
     expect(container.firstChild).toHaveStyleRule('margin-right', '12px');
     expect(container.firstChild).not.toHaveStyleRule('margin-bottom');
   });
+
   it('renders active color styles', () => {
     const { container } = render(<StyledIcon isActive />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE.white);
-    expect(container.firstChild).toHaveStyleRule(
-      'background',
-      getColorV8('neutralHue', 600, DEFAULT_THEME)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.white);
+    expect(container.firstChild).toHaveStyleRule('background', PALETTE_V8.grey[600]);
   });
 
   it('renders correct icon styles for horizontal stepper', () => {

packages/accordions/src/styled/stepper/StyledLabel.spec.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from 'garden-test-utils';
 import { StyledLabel } from './StyledLabel';
-import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 
 describe('StyledLabel', () => {
   it('renders default styles', () => {
@@ -18,10 +18,7 @@ describe('StyledLabel', () => {
     expect(container.firstChild).not.toHaveStyleRule('text-align');
     expect(container.firstChild).toHaveStyleRule('display', 'flex');
     expect(container.firstChild).toHaveStyleRule('align-items', 'center');
-    expect(container.firstChild).toHaveStyleRule(
-      'color',
-      getColorV8('neutralHue', 600, DEFAULT_THEME)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
   });
 
   it('renders styles for horizontal label', () => {
@@ -36,7 +33,7 @@ describe('StyledLabel', () => {
   it('renders styles for active label', () => {
     const { container } = render(<StyledLabel isActive />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
     expect(container.firstChild).toHaveStyleRule('font-weight', '600');
   });
 });

packages/buttons/src/styled/StyledButton.spec.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { getColorV8, PALETTE } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
 
 describe('StyledButton', () => {
@@ -32,13 +32,13 @@ describe('StyledButton', () => {
   it('renders danger styling if provided', () => {
     const { container } = render(<StyledButton isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue'));
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
   });
 
   it('renders disabled styling if provided', () => {
     const { container } = render(<StyledButton disabled />);
 
-    expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue'));
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
   });
 
   it('renders link styling if provided', () => {
@@ -51,13 +51,13 @@ describe('StyledButton', () => {
   it('renders primary styling if provided', () => {
     const { container } = render(<StyledButton isPrimary />);
 
-    expect(container.firstChild).toHaveStyleRule('background-color', getColorV8('primaryHue'));
+    expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.blue[600]);
   });
 
   it('renders neutral styling if provided', () => {
     const { container } = render(<StyledButton isNeutral />);
 
-    expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.grey[300]);
+    expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.grey[300]);
   });
 
   it('renders pill styling if provided', () => {

packages/buttons/src/styled/StyledIconButton.spec.tsx

@@ -10,7 +10,7 @@ import { css } from 'styled-components';
 import { render } from 'garden-test-utils';
 import { StyledIconButton } from './StyledIconButton';
 import { StyledIcon } from './StyledIcon';
-import { PALETTE } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 
 describe('StyledIconButton', () => {
   it('renders the expected element', () => {
@@ -28,7 +28,7 @@ describe('StyledIconButton', () => {
   it('renders basic color styling', () => {
     const { container } = render(<StyledIconButton isBasic />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
   });
 
   describe('disabled', () => {
@@ -43,7 +43,7 @@ describe('StyledIconButton', () => {
     it('renders expected primary styling', () => {
       const { container } = render(<StyledIconButton disabled isPrimary />);
 
-      expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[200], {
+      expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[200], {
         modifier: ':disabled'
       });
     });

packages/buttons/src/styled/StyledSplitButton.spec.tsx

@@ -10,7 +10,7 @@ import { render, renderRtl, screen } from 'garden-test-utils';
 import { StyledSplitButton } from './StyledSplitButton';
 import { StyledButton } from './StyledButton';
 import { StyledIconButton } from './StyledIconButton';
-import { PALETTE } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 
 describe('StyledSplitButton', () => {
   it('renders the expected element', () => {
@@ -50,7 +50,7 @@ describe('StyledSplitButton', () => {
       </StyledSplitButton>
     );
 
-    expect(screen.getByText('test')).toHaveStyleRule('background-color', PALETTE.grey[200], {
+    expect(screen.getByText('test')).toHaveStyleRule('background-color', PALETTE_V8.grey[200], {
       modifier: `${StyledSplitButton} &&:disabled`
     });
   });

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 } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } 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.blue[600], { modifier: ':hover' });
+    expect(combobox).toHaveStyleRule('border-color', PALETTE_V8.blue[600], { modifier: ':hover' });
   });
 
   it('focuses input on label click', async () => {

packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx

@@ -6,8 +6,9 @@
  */
 
 import React from 'react';
+import { rgba } from 'polished';
 import { render } from 'garden-test-utils';
-import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem';
 
 describe('StyledItem', () => {
@@ -20,21 +21,21 @@ describe('StyledItem', () => {
   it('renders default styling', () => {
     const { container } = render(<StyledItem />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
   });
 
   it('renders danger styling if provided', () => {
     const { container } = render(<StyledItem isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue'));
+    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',
-      getColorV8('dangerHue', 600, DEFAULT_THEME, 0.08)
+      rgba(PALETTE_V8.red[600], 0.08)
     );
   });
 });