diff --git a/.storybook/preview.js b/.storybook/preview.js index 10b1e6e7465..9e79a5cd379 100644 --- a/.storybook/preview.js +++ b/.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'; diff --git a/docs/migration.md b/docs/migration.md index a1c8c31120a..ccd3dbff251 100644 --- a/docs/migration.md +++ b/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: diff --git a/packages/accordions/src/styled/accordion/StyledButton.spec.tsx b/packages/accordions/src/styled/accordion/StyledButton.spec.tsx index b5e29129d06..dcfeadfcb0c 100644 --- a/packages/accordions/src/styled/accordion/StyledButton.spec.tsx +++ b/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(); - 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' diff --git a/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx b/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx index 9caf638de9a..db668055063 100644 --- a/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx +++ b/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(); - 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(); - 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', () => { diff --git a/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx b/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx index bbaeee3b97f..49f91f527d7 100644 --- a/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx +++ b/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(); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]); expect(container.firstChild).toHaveStyleRule('font-weight', '600'); }); }); diff --git a/packages/buttons/src/styled/StyledButton.spec.tsx b/packages/buttons/src/styled/StyledButton.spec.tsx index 0f746ac790b..a5fa9bc6bb3 100644 --- a/packages/buttons/src/styled/StyledButton.spec.tsx +++ b/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(); - 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(); - 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(); - 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(); - 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', () => { diff --git a/packages/buttons/src/styled/StyledIconButton.spec.tsx b/packages/buttons/src/styled/StyledIconButton.spec.tsx index 33f2d42026d..e687d442dd8 100644 --- a/packages/buttons/src/styled/StyledIconButton.spec.tsx +++ b/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(); - 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(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[200], { + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[200], { modifier: ':disabled' }); }); diff --git a/packages/buttons/src/styled/StyledSplitButton.spec.tsx b/packages/buttons/src/styled/StyledSplitButton.spec.tsx index 4795ee89642..19cdc9c7832 100644 --- a/packages/buttons/src/styled/StyledSplitButton.spec.tsx +++ b/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', () => { ); - expect(screen.getByText('test')).toHaveStyleRule('background-color', PALETTE.grey[200], { + expect(screen.getByText('test')).toHaveStyleRule('background-color', PALETTE_V8.grey[200], { modifier: `${StyledSplitButton} &&:disabled` }); }); diff --git a/packages/dropdowns.legacy/src/elements/Combobox/Combobox.spec.tsx b/packages/dropdowns.legacy/src/elements/Combobox/Combobox.spec.tsx index 0273c349646..7a7a7bb251f 100644 --- 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 } 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 () => { diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx b/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx index d7d15ccdc2c..1a819d93dd1 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx +++ b/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,13 +21,13 @@ describe('StyledItem', () => { it('renders default styling', () => { const { container } = render(); - 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(); - expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue')); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]); }); it('render danger focus styling if provided', () => { @@ -34,7 +35,7 @@ describe('StyledItem', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - getColorV8('dangerHue', 600, DEFAULT_THEME, 0.08) + rgba(PALETTE_V8.red[600], 0.08) ); }); }); diff --git a/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx b/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx index 996399a6ed0..ec519abcff7 100644 --- a/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx +++ b/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx @@ -8,7 +8,7 @@ import React, { HTMLAttributes, InputHTMLAttributes, forwardRef } from 'react'; import { render, renderRtl } from 'garden-test-utils'; import userEvent from '@testing-library/user-event'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { IComboboxProps, ISelectedOption } from '../../types'; import { Combobox } from './Combobox'; import { OptGroup } from './OptGroup'; @@ -99,7 +99,7 @@ describe('Combobox', () => { await user.hover(label); - expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.blue[600], { + expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.blue[600], { modifier: ':hover' }); }); @@ -228,7 +228,7 @@ describe('Combobox', () => { const input = getByTestId('input'); expect(trigger).toHaveAttribute('aria-disabled', 'true'); - expect(trigger).toHaveStyleRule('background-color', PALETTE.grey[100], { + expect(trigger).toHaveStyleRule('background-color', PALETTE_V8.grey[100], { modifier: '[aria-disabled="true"]' }); expect(input).toHaveAttribute('disabled'); @@ -451,8 +451,8 @@ describe('Combobox', () => { const combobox = getByTestId('combobox'); const message = getByTestId('message'); - expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.green[600]); - expect(message).toHaveStyleRule('color', PALETTE.green[600]); + expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[600]); + expect(message).toHaveStyleRule('color', PALETTE_V8.green[600]); expect(message.firstChild).not.toBeNull(); }); @@ -461,8 +461,8 @@ describe('Combobox', () => { const combobox = getByTestId('combobox'); const message = getByTestId('message'); - expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.yellow[600]); - expect(message).toHaveStyleRule('color', PALETTE.yellow[700]); + expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.yellow[600]); + expect(message).toHaveStyleRule('color', PALETTE_V8.yellow[700]); expect(message.firstChild).not.toBeNull(); }); @@ -471,8 +471,8 @@ describe('Combobox', () => { const combobox = getByTestId('combobox'); const message = getByTestId('message'); - expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.red[600]); - expect(message).toHaveStyleRule('color', PALETTE.red[600]); + expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.red[600]); + expect(message).toHaveStyleRule('color', PALETTE_V8.red[600]); expect(message.firstChild).not.toBeNull(); }); }); diff --git a/packages/dropdowns/src/elements/combobox/Option.spec.tsx b/packages/dropdowns/src/elements/combobox/Option.spec.tsx index 5ba19f9f41c..974698fb2b3 100644 --- a/packages/dropdowns/src/elements/combobox/Option.spec.tsx +++ b/packages/dropdowns/src/elements/combobox/Option.spec.tsx @@ -7,7 +7,7 @@ import React, { HTMLAttributes, forwardRef } from 'react'; import { render } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { IOptionProps } from '../../types'; import { Field } from './Field'; import { Combobox } from './Combobox'; @@ -84,7 +84,7 @@ describe('Option', () => { const tag = getByTestId('tag'); expect(option).toHaveAttribute('aria-disabled', 'true'); - expect(option).toHaveStyleRule('color', PALETTE.grey[400], { + expect(option).toHaveStyleRule('color', PALETTE_V8.grey[400], { modifier: '[aria-disabled="true"]' }); expect(tag).not.toHaveAttribute('tabindex'); @@ -127,7 +127,7 @@ describe('Option', () => { const option = getByTestId('option'); expect(option.firstChild).toHaveStyleRule('opacity', '1'); - expect(option.firstChild).toHaveStyleRule('color', PALETTE.grey[600]); + expect(option.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]); expect(option.firstChild).toHaveStyleRule('left', '12px'); }); @@ -136,7 +136,7 @@ describe('Option', () => { const option = getByTestId('option'); expect(option.firstChild).toHaveStyleRule('opacity', '1'); - expect(option.firstChild).toHaveStyleRule('color', PALETTE.grey[600]); + expect(option.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]); expect(option.firstChild).toHaveStyleRule('right', '12px'); }); @@ -144,14 +144,14 @@ describe('Option', () => { const { getByTestId } = render(); const option = getByTestId('option'); - expect(option).toHaveStyleRule('color', PALETTE.blue[600]); + expect(option).toHaveStyleRule('color', PALETTE_V8.blue[600]); }); it('renders "danger" as expected', () => { const { getByTestId } = render(); const option = getByTestId('option'); - expect(option).toHaveStyleRule('color', PALETTE.red[600]); + expect(option).toHaveStyleRule('color', PALETTE_V8.red[600]); }); }); @@ -176,7 +176,7 @@ describe('Option', () => { ); const meta = getByTestId('meta'); - expect(meta).toHaveStyleRule('color', PALETTE.grey[600]); + expect(meta).toHaveStyleRule('color', PALETTE_V8.grey[600]); }); }); }); diff --git a/packages/dropdowns/src/elements/menu/Menu.spec.tsx b/packages/dropdowns/src/elements/menu/Menu.spec.tsx index 59cd9f4ba50..d97886a36b3 100644 --- a/packages/dropdowns/src/elements/menu/Menu.spec.tsx +++ b/packages/dropdowns/src/elements/menu/Menu.spec.tsx @@ -14,7 +14,7 @@ import { Menu } from './Menu'; import { ItemGroup } from './ItemGroup'; import { Item } from './Item'; import { Separator } from './Separator'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; interface TestMenuProps extends Omit { button?: IMenuProps['button']; @@ -311,7 +311,7 @@ describe('Menu', () => { const item = getByTestId('item'); const icon = item.querySelector('svg')!; - expect(item).toHaveStyleRule('color', PALETTE.red[600]); + expect(item).toHaveStyleRule('color', PALETTE_V8.red[600]); expect(icon).not.toBeVisible(); }); diff --git a/packages/forms/src/styled/file-list/StyledFile.spec.tsx b/packages/forms/src/styled/file-list/StyledFile.spec.tsx index bd31021afae..1bc1995ba7b 100644 --- a/packages/forms/src/styled/file-list/StyledFile.spec.tsx +++ b/packages/forms/src/styled/file-list/StyledFile.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledFile } from './StyledFile'; describe('StyledFile', () => { @@ -28,13 +28,13 @@ describe('StyledFile', () => { it('renders expected success styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.green[600]); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[600]); }); it('renders expected error styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.red[600]); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.red[600]); }); }); }); diff --git a/packages/forms/src/styled/file-list/StyledFileClose.spec.tsx b/packages/forms/src/styled/file-list/StyledFileClose.spec.tsx index 8e223d8127d..1a5f01bc54d 100644 --- a/packages/forms/src/styled/file-list/StyledFileClose.spec.tsx +++ b/packages/forms/src/styled/file-list/StyledFileClose.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledFileClose } from './StyledFileClose'; describe('StyledFileClose', () => { @@ -15,6 +15,6 @@ describe('StyledFileClose', () => { const { container } = render(); expect(container.firstChild!.nodeName).toBe('BUTTON'); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]); }); }); diff --git a/packages/forms/src/styled/file-list/StyledFileDelete.spec.tsx b/packages/forms/src/styled/file-list/StyledFileDelete.spec.tsx index 0087865d78a..572a2b76a0e 100644 --- a/packages/forms/src/styled/file-list/StyledFileDelete.spec.tsx +++ b/packages/forms/src/styled/file-list/StyledFileDelete.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledFileDelete } from './StyledFileDelete'; describe('StyledFileDelete', () => { @@ -15,6 +15,6 @@ describe('StyledFileDelete', () => { const { container } = render(); expect(container.firstChild!.nodeName).toBe('BUTTON'); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[600]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]); }); }); diff --git a/packages/forms/src/styled/text/StyledTextInput.spec.tsx b/packages/forms/src/styled/text/StyledTextInput.spec.tsx index 6fdd493e77a..d4f4a6890f0 100644 --- a/packages/forms/src/styled/text/StyledTextInput.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextInput.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColorV8 } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledTextInput } from './StyledTextInput'; describe('StyledTextInput', () => { @@ -32,13 +32,15 @@ describe('StyledTextInput', () => { it('renders expected readonly styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('neutralHue', 300)); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.grey[300]); }); it('renders expected disabled styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue', 800)); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[400], { + modifier: '&:disabled' + }); }); it('renders expected RTL styling', () => { @@ -51,19 +53,19 @@ describe('StyledTextInput', () => { it('renders "success" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('successHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[600]); }); it('renders "warning" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('warningHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.yellow[600]); }); it('renders "error" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('dangerHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.red[600]); }); }); }); diff --git a/packages/forms/src/styled/text/StyledTextMediaFigure.spec.tsx b/packages/forms/src/styled/text/StyledTextMediaFigure.spec.tsx index 79278c82270..2e54240aae8 100644 --- a/packages/forms/src/styled/text/StyledTextMediaFigure.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextMediaFigure.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledTextMediaFigure } from './StyledTextMediaFigure'; import TestIcon from '@zendeskgarden/svg-icons/src/16/gear-stroke.svg'; @@ -21,7 +21,7 @@ describe('StyledTextMediaFigure', () => { expect(container.firstChild!.nodeName).toBe('svg'); expect(container.firstChild).toHaveStyleRule('width', '16px'); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]); }); it('renders expected hovered styling', () => { @@ -31,7 +31,7 @@ describe('StyledTextMediaFigure', () => { ); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[700]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[700]); }); it('renders rotated styling if provided', () => { diff --git a/packages/forms/src/styled/text/StyledTextMediaInput.spec.tsx b/packages/forms/src/styled/text/StyledTextMediaInput.spec.tsx index f839d3865d0..ed5cbed1384 100644 --- a/packages/forms/src/styled/text/StyledTextMediaInput.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextMediaInput.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColorV8 } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledTextMediaInput } from './StyledTextMediaInput'; describe('StyledTextMediaInput', () => { @@ -26,6 +26,8 @@ describe('StyledTextMediaInput', () => { it('renders expected disabled styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue', 800)); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[400], { + modifier: '&:disabled' + }); }); }); diff --git a/packages/loaders/src/elements/Progress.spec.tsx b/packages/loaders/src/elements/Progress.spec.tsx index 09589cbd564..373c552c560 100644 --- a/packages/loaders/src/elements/Progress.spec.tsx +++ b/packages/loaders/src/elements/Progress.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; import { Progress } from './Progress'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; describe('Progress', () => { describe('without a value', () => { @@ -80,7 +80,7 @@ describe('Progress', () => { it('renders a blue progress bar by default', () => { const { getByRole } = render(); - expect(getByRole('progressbar')).toHaveStyleRule('color', PALETTE.green[600]); + expect(getByRole('progressbar')).toHaveStyleRule('color', PALETTE_V8.green[600]); }); }); diff --git a/packages/modals/src/styled/StyledDrawerHeader.spec.tsx b/packages/modals/src/styled/StyledDrawerHeader.spec.tsx index 380276c2f2b..0b3160e9923 100644 --- a/packages/modals/src/styled/StyledDrawerHeader.spec.tsx +++ b/packages/modals/src/styled/StyledDrawerHeader.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledDrawerHeader } from './StyledDrawerHeader'; @@ -15,12 +15,12 @@ describe('StyledDrawerHeader', () => { it('renders default styling', () => { const { container } = render(); - 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(); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[600]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]); }); }); diff --git a/packages/modals/src/styled/StyledFooter.spec.tsx b/packages/modals/src/styled/StyledFooter.spec.tsx index 3787db60c6d..2f626d2d0df 100644 --- a/packages/modals/src/styled/StyledFooter.spec.tsx +++ b/packages/modals/src/styled/StyledFooter.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; import { StyledFooter } from './StyledFooter'; -import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, PALETTE_V8 } from '@zendeskgarden/react-theming'; describe('StyledFooter', () => { it('renders default styling', () => { @@ -23,7 +23,7 @@ describe('StyledFooter', () => { expect(container.firstChild).toHaveStyleRule( 'border-top', - `${DEFAULT_THEME.borders.sm} ${PALETTE.grey[200]}` + `${DEFAULT_THEME.borders.sm} ${PALETTE_V8.grey[200]}` ); expect(container.firstChild).toHaveStyleRule('padding', '32px 40px'); }); diff --git a/packages/modals/src/styled/StyledHeader.spec.tsx b/packages/modals/src/styled/StyledHeader.spec.tsx index 894fafea1f1..b6422b84052 100644 --- a/packages/modals/src/styled/StyledHeader.spec.tsx +++ b/packages/modals/src/styled/StyledHeader.spec.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { render } from 'garden-test-utils'; import { StyledHeader } from './StyledHeader'; @@ -15,12 +15,12 @@ describe('StyledHeader', () => { it('renders default styling', () => { const { container } = render(); - 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(); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[600]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]); }); }); diff --git a/packages/notifications/src/elements/content/Title.spec.tsx b/packages/notifications/src/elements/content/Title.spec.tsx index 850e5cf7367..cfe71248640 100644 --- a/packages/notifications/src/elements/content/Title.spec.tsx +++ b/packages/notifications/src/elements/content/Title.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { css } from 'styled-components'; import { render } from 'garden-test-utils'; -import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, PALETTE_V8 } from '@zendeskgarden/react-theming'; import { Notification } from '../Notification'; import { Title } from './Title'; import { StyledTitle } from '../../styled'; @@ -60,15 +60,11 @@ describe('Title', () => { ); - expect(container.firstChild).toHaveStyleRule( - 'color', - getColorV8('successHue', 600, DEFAULT_THEME), - { - modifier: css` - ${StyledTitle} - ` as any - } - ); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.green[600], { + modifier: css` + ${StyledTitle} + ` as any + }); }); it('renders error styling', () => { @@ -78,15 +74,11 @@ describe('Title', () => { ); - expect(container.firstChild).toHaveStyleRule( - 'color', - getColorV8('dangerHue', 600, DEFAULT_THEME), - { - modifier: css` - ${StyledTitle} - ` as any - } - ); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600], { + modifier: css` + ${StyledTitle} + ` as any + }); }); it('renders warning styling', () => { @@ -96,15 +88,11 @@ describe('Title', () => { ); - expect(container.firstChild).toHaveStyleRule( - 'color', - getColorV8('warningHue', 700, DEFAULT_THEME), - { - modifier: css` - ${StyledTitle} - ` as any - } - ); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.yellow[700], { + modifier: css` + ${StyledTitle} + ` as any + }); }); it('renders info styling', () => { @@ -114,7 +102,7 @@ describe('Title', () => { ); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800], { + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800], { modifier: css` ${StyledTitle} ` as any diff --git a/packages/notifications/src/styled/StyledBase.spec.tsx b/packages/notifications/src/styled/StyledBase.spec.tsx index 87f43cc4236..25f6a82a69e 100644 --- a/packages/notifications/src/styled/StyledBase.spec.tsx +++ b/packages/notifications/src/styled/StyledBase.spec.tsx @@ -7,29 +7,24 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledBase } from './StyledBase'; describe('StyledBase', () => { it('should renders the correct background, border, and foreground color for a given hue', () => { - const { colors, palette } = DEFAULT_THEME; const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', palette[colors.successHue][700]); - expect(container.firstChild).toHaveStyleRule('border-color', palette[colors.successHue][300]); - expect(container.firstChild).toHaveStyleRule( - 'background-color', - palette[colors.successHue][100] - ); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.green[700]); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[300]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.green[100]); }); it('should render a neutral background, border, and foreground color when a hue is not provided', () => { - const { colors, palette } = DEFAULT_THEME; const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', palette[colors.neutralHue][800]); - expect(container.firstChild).toHaveStyleRule('border-color', palette[colors.neutralHue][300]); - expect(container.firstChild).toHaveStyleRule('background-color', palette.white as string); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]); + expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.grey[300]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.white as string); }); it('renders floating styling correctly', () => { diff --git a/packages/notifications/src/styled/StyledWell.spec.tsx b/packages/notifications/src/styled/StyledWell.spec.tsx index 96fc1e9c95b..816586c10f2 100644 --- a/packages/notifications/src/styled/StyledWell.spec.tsx +++ b/packages/notifications/src/styled/StyledWell.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledWell } from '../styled'; describe('StyledWell', () => { @@ -32,9 +32,6 @@ describe('StyledWell', () => { it('renders recessed styling correctly', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule( - 'background-color', - DEFAULT_THEME.palette.grey[100] - ); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[100]); }); }); diff --git a/packages/notifications/src/styled/content/StyledClose.spec.tsx b/packages/notifications/src/styled/content/StyledClose.spec.tsx index e5f26a0b9ce..9e11c720cf6 100644 --- a/packages/notifications/src/styled/content/StyledClose.spec.tsx +++ b/packages/notifications/src/styled/content/StyledClose.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledClose } from './StyledClose'; describe('StyledClose', () => { @@ -27,24 +27,20 @@ describe('StyledClose', () => { it('should render neutral fallback hue when hue prop is not provided', () => { const { container } = render(); - const { colors, palette } = DEFAULT_THEME; - const { neutralHue } = colors; - expect(container.firstChild).toHaveStyleRule('color', palette[neutralHue][600]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]); - expect(container.firstChild).toHaveStyleRule('color', palette[neutralHue][800], { + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800], { modifier: ':hover' }); }); it('should render the correct styling for a given hue', () => { const { container } = render(); - const { colors, palette } = DEFAULT_THEME; - const { successHue } = colors; - expect(container.firstChild).toHaveStyleRule('color', palette[successHue][600]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.green[600]); - expect(container.firstChild).toHaveStyleRule('color', palette[successHue][800], { + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.green[800], { modifier: ':hover' }); }); @@ -52,12 +48,10 @@ describe('StyledClose', () => { // The color yellow requires a darker shade for legibility it('should render the correct styling for a warning hue', () => { const { container } = render(); - const { colors, palette } = DEFAULT_THEME; - const { warningHue } = colors; - expect(container.firstChild).toHaveStyleRule('color', palette[warningHue][700]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.yellow[700]); - expect(container.firstChild).toHaveStyleRule('color', palette[warningHue][800], { + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.yellow[800], { modifier: ':hover' }); }); diff --git a/packages/tables/src/elements/OverflowButton.spec.tsx b/packages/tables/src/elements/OverflowButton.spec.tsx index f7b9ff96fba..0d1bba1fa16 100644 --- a/packages/tables/src/elements/OverflowButton.spec.tsx +++ b/packages/tables/src/elements/OverflowButton.spec.tsx @@ -9,7 +9,7 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { render } from 'garden-test-utils'; import { OverflowButton } from './OverflowButton'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; describe('OverflowButton', () => { const user = userEvent.setup(); @@ -24,14 +24,14 @@ describe('OverflowButton', () => { it('applies isHovered styling', () => { const { container } = render(); - expect(container.firstElementChild).toHaveStyleRule('color', PALETTE.grey[700]); + expect(container.firstElementChild).toHaveStyleRule('color', PALETTE_V8.grey[700]); }); it('applies isActive styling', () => { const { container } = render(); expect(container.firstElementChild).toHaveStyleRule('z-index', '1'); - expect(container.firstElementChild).toHaveStyleRule('color', PALETTE.grey[800]); + expect(container.firstElementChild).toHaveStyleRule('color', PALETTE_V8.grey[800]); }); describe('onFocus', () => { diff --git a/packages/tags/src/elements/Tag.spec.tsx b/packages/tags/src/elements/Tag.spec.tsx index c5cc9ef8166..1ff3b0bde59 100644 --- a/packages/tags/src/elements/Tag.spec.tsx +++ b/packages/tags/src/elements/Tag.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { Tag } from './Tag'; describe('Tag', () => { @@ -48,7 +48,7 @@ describe('Tag', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - (PALETTE as any)[color][600] + (PALETTE_V8 as any)[color][600] ); }); }); @@ -56,7 +56,7 @@ describe('Tag', () => { it('handles yellow hue with specialized shading', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.yellow[400]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.yellow[400]); }); }); }); diff --git a/packages/theming/src/elements/palette/__snapshots__/index.spec.ts.snap b/packages/theming/src/elements/palette/__snapshots__/index.spec.ts.snap index f2d03b59bf1..a9b612ddc3e 100644 --- a/packages/theming/src/elements/palette/__snapshots__/index.spec.ts.snap +++ b/packages/theming/src/elements/palette/__snapshots__/index.spec.ts.snap @@ -3,91 +3,187 @@ exports[`PALETTE matches snapshot 1`] = ` { "azure": { - "400": "#3091ec", - "600": "#1371d6", + "100": "#f0f7fe", + "1000": "#13253a", + "1100": "#0e1b2c", + "1200": "#0a131f", + "200": "#d7eafb", + "300": "#a8d1f7", + "400": "#7fbbf3", + "500": "#3795ed", + "600": "#598ad0", + "700": "#2770c4", + "800": "#2c5689", + "900": "#1d3758", "M400": "#5f8dcf", "M600": "#3a70b2", }, "black": "#000", "blue": { "100": "#edf7ff", - "200": "#cee2f2", - "300": "#adcce4", - "400": "#5293c7", - "500": "#337fbd", - "600": "#1f73b7", - "700": "#144a75", - "800": "#0f3554", + "1000": "#0b253b", + "1100": "#081c2d", + "1200": "#061420", + "200": "#d9eaf7", + "300": "#b3d0e7", + "400": "#92bbdb", + "500": "#5896c9", + "600": "#4b8ec5", + "700": "#1f73b7", + "800": "#18578b", + "900": "#103859", }, "crimson": { - "400": "#e34f32", - "600": "#c72a1c", + "100": "#fbf4f3", + "1000": "#480f0a", + "1100": "#370c08", + "1200": "#280806", + "200": "#f6e4e1", + "300": "#eac3bc", + "400": "#e1a89e", + "500": "#d1796a", + "600": "#cd6e5d", + "700": "#be4938", + "800": "#a32217", + "900": "#6b160f", "M400": "#cc6c5b", "M600": "#b24a3c", }, "fuschia": { - "400": "#d653c2", - "600": "#a81897", + "100": "#fbf3f8", + "1000": "#430a3d", + "1100": "#34072f", + "1200": "#260523", + "200": "#f6e2ef", + "300": "#ecc0dc", + "400": "#e3a2cc", + "500": "#d36faf", + "600": "#cf63a8", + "700": "#b34496", + "800": "#971688", + "900": "#640e59", "M400": "#cf62a8", "M600": "#a8458c", }, "green": { - "100": "#edf8f4", - "200": "#d1e8df", - "300": "#aecfc2", - "400": "#5eae91", - "500": "#228f67", - "600": "#038153", - "700": "#186146", - "800": "#0b3b29", + "100": "#eef8f4", + "1000": "#0c291e", + "1100": "#0b1e17", + "1200": "#0a1511", + "200": "#d7ede4", + "300": "#b4d3c6", + "400": "#91bfae", + "500": "#3fa17e", + "600": "#329974", + "700": "#037f52", + "800": "#186045", + "900": "#0b3e2b", }, "grey": { - "100": "#f8f9f9", - "200": "#e9ebed", - "300": "#d8dcde", - "400": "#c2c8cc", - "500": "#87929d", - "600": "#68737d", - "700": "#49545c", - "800": "#2f3941", + "100": "#f4f6f6", + "1000": "#1e252a", + "1100": "#171b1f", + "1200": "#101316", + "200": "#e4e7e9", + "300": "#c7cdd0", + "400": "#afb7bd", + "500": "#88929d", + "600": "#7f8a95", + "700": "#65707a", + "800": "#4b565f", + "900": "#2e373f", }, "kale": { - "100": "#f5fcfc", - "200": "#daeded", - "300": "#bdd9d7", - "400": "#90bbbb", - "500": "#498283", - "600": "#17494d", - "700": "#03363d", - "800": "#012b30", + "100": "#ecf9f9", + "1000": "#02282d", + "1100": "#041e22", + "1200": "#061517", + "200": "#d8ebeb", + "300": "#b3d2d0", + "400": "#94bebd", + "500": "#5e9b9c", + "600": "#579394", + "700": "#40787a", + "800": "#275c5f", + "900": "#0a3c42", }, "lemon": { - "400": "#ffd424", - "600": "#ffbb10", + "100": "#fff6cf", + "1000": "#2f2200", + "1100": "#231a00", + "1200": "#191200", + "200": "#ffe682", + "300": "#ffc417", + "400": "#eda900", + "500": "#ba8900", + "600": "#b08100", + "700": "#8f6900", + "800": "#6d5000", + "900": "#463300", "M400": "#e7a500", "M600": "#c38f00", }, "lime": { - "400": "#43b324", - "600": "#2e8200", + "100": "#ebfae6", + "1000": "#18280f", + "1100": "#121e0b", + "1200": "#0d1508", + "200": "#c9f2bd", + "300": "#88e270", + "400": "#4ecf2a", + "500": "#4da42a", + "600": "#489b20", + "700": "#3d7e19", + "800": "#385f23", + "900": "#243c16", "M400": "#519e2d", "M600": "#47782c", }, "mint": { - "400": "#00a656", - "600": "#058541", + "100": "#d6ffeb", + "1000": "#0f291c", + "1100": "#0b1e15", + "1200": "#08150f", + "200": "#83ffc3", + "300": "#00ea79", + "400": "#00d16d", + "500": "#00a756", + "600": "#279b65", + "700": "#2d7d55", + "800": "#225f41", + "900": "#163d2a", "M400": "#299c66", "M600": "#2e8057", }, "orange": { - "400": "#de701d", - "600": "#bf5000", + "100": "#fdf3ed", + "1000": "#3a1c0d", + "1100": "#2c150a", + "1200": "#1f0f07", + "200": "#f9e3d3", + "300": "#f2c39f", + "400": "#eda671", + "500": "#e2721e", + "600": "#d26e20", + "700": "#af5626", + "800": "#85421d", + "900": "#562b13", "M400": "#d4772c", "M600": "#b35827", }, "pink": { - "400": "#ec4d63", - "600": "#d42054", + "100": "#fcf4f5", + "1000": "#401522", + "1100": "#31101a", + "1200": "#230b12", + "200": "#f7e3e8", + "300": "#edc1ca", + "400": "#e4a5b3", + "500": "#d57388", + "600": "#e35b72", + "700": "#d62054", + "800": "#94304e", + "900": "#611f32", "M400": "#d57287", "M600": "#b23a5d", }, @@ -103,43 +199,81 @@ exports[`PALETTE matches snapshot 1`] = ` "talk": "#efc93d", }, "purple": { - "400": "#b552e2", - "600": "#6a27b8", + "100": "#f9f4fb", + "1000": "#311256", + "1100": "#250e41", + "1200": "#1b0a2e", + "200": "#efe3f5", + "300": "#ddc3e9", + "400": "#cea8e0", + "500": "#b57acf", + "600": "#b16ecf", + "700": "#9256b1", + "800": "#722eb8", + "900": "#491b7f", "M400": "#b072cc", "M600": "#9358b0", }, "red": { - "100": "#fff0f1", - "200": "#f5d5d8", - "300": "#f5b5ba", - "400": "#e35b66", - "500": "#d93f4c", - "600": "#cc3340", - "700": "#8c232c", - "800": "#681219", + "100": "#fff2f3", + "1000": "#431418", + "1100": "#2d1315", + "1200": "#1b1011", + "200": "#fde1e3", + "300": "#f5bfc4", + "400": "#f2a0a6", + "500": "#e76973", + "600": "#e35c67", + "700": "#cd3642", + "800": "#9d2933", + "900": "#6c1219", }, "royal": { - "400": "#5d7df5", - "600": "#3353e2", + "100": "#f5f6fc", + "1000": "#0e1c5f", + "1100": "#0a1548", + "1200": "#070f34", + "200": "#e3e6f7", + "300": "#c5cbee", + "400": "#abb3e7", + "500": "#7f8cda", + "600": "#7182e1", + "700": "#4d67d3", + "800": "#1f40d8", + "900": "#142a8d", "M400": "#7986d8", "M600": "#4b61c3", }, "teal": { - "400": "#02a191", - "600": "#028079", + "100": "#d6fefa", + "1000": "#142726", + "1100": "#0f1d1c", + "1200": "#0a1514", + "200": "#70fdef", + "300": "#03e5ce", + "400": "#03ccb8", + "500": "#02a392", + "600": "#1f998b", + "700": "#367a74", + "800": "#2e5c59", + "900": "#1e3b39", "M400": "#2d9e8f", "M600": "#3c7873", }, "white": "#fff", "yellow": { - "100": "#fff7ed", - "200": "#ffeedb", - "300": "#fed6a8", - "400": "#ffb057", - "500": "#f79a3e", - "600": "#ed8f1c", - "700": "#ad5918", - "800": "#703815", + "100": "#fff3e4", + "1000": "#312016", + "1100": "#221913", + "1200": "#17120f", + "200": "#ffe2c2", + "300": "#ffc079", + "400": "#fba246", + "500": "#d87916", + "600": "#ce7117", + "700": "#ac5918", + "800": "#874114", + "900": "#512d17", }, } `; diff --git a/packages/theming/src/elements/palette/index.ts b/packages/theming/src/elements/palette/index.ts index 7585b6235c2..22d554d8370 100644 --- a/packages/theming/src/elements/palette/index.ts +++ b/packages/theming/src/elements/palette/index.ts @@ -5,7 +5,6 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -/** @ignore */ const PALETTE = { black: '#000', white: '#fff', @@ -23,134 +22,267 @@ const PALETTE = { /* primary */ grey: { - 100: '#f8f9f9', - 200: '#e9ebed', - 300: '#d8dcde', - 400: '#c2c8cc', - 500: '#87929d', - 600: '#68737d', - 700: '#49545c', - 800: '#2f3941' + 100: '#f4f6f6', + 200: '#e4e7e9', + 300: '#c7cdd0', + 400: '#afb7bd', + 500: '#88929d', + 600: '#7f8a95', + 700: '#65707a', + 800: '#4b565f', + 900: '#2e373f', + 1000: '#1e252a', + 1100: '#171b1f', + 1200: '#101316' }, blue: { 100: '#edf7ff', - 200: '#cee2f2', - 300: '#adcce4', - 400: '#5293c7', - 500: '#337fbd', - 600: '#1f73b7', - 700: '#144a75', - 800: '#0f3554' + 200: '#d9eaf7', + 300: '#b3d0e7', + 400: '#92bbdb', + 500: '#5896c9', + 600: '#4b8ec5', + 700: '#1f73b7', + 800: '#18578b', + 900: '#103859', + 1000: '#0b253b', + 1100: '#081c2d', + 1200: '#061420' }, red: { - 100: '#fff0f1', - 200: '#f5d5d8', - 300: '#f5b5ba', - 400: '#e35b66', - 500: '#d93f4c', - 600: '#cc3340', - 700: '#8c232c', - 800: '#681219' + 100: '#fff2f3', + 200: '#fde1e3', + 300: '#f5bfc4', + 400: '#f2a0a6', + 500: '#e76973', + 600: '#e35c67', + 700: '#cd3642', + 800: '#9d2933', + 900: '#6c1219', + 1000: '#431418', + 1100: '#2d1315', + 1200: '#1b1011' }, yellow: { - 100: '#fff7ed', - 200: '#ffeedb', - 300: '#fed6a8', - 400: '#ffb057', - 500: '#f79a3e', - 600: '#ed8f1c', - 700: '#ad5918', - 800: '#703815' + 100: '#fff3e4', + 200: '#ffe2c2', + 300: '#ffc079', + 400: '#fba246', + 500: '#d87916', + 600: '#ce7117', + 700: '#ac5918', + 800: '#874114', + 900: '#512d17', + 1000: '#312016', + 1100: '#221913', + 1200: '#17120f' }, green: { - 100: '#edf8f4', - 200: '#d1e8df', - 300: '#aecfc2', - 400: '#5eae91', - 500: '#228f67', - 600: '#038153', - 700: '#186146', - 800: '#0b3b29' + 100: '#eef8f4', + 200: '#d7ede4', + 300: '#b4d3c6', + 400: '#91bfae', + 500: '#3fa17e', + 600: '#329974', + 700: '#037f52', + 800: '#186045', + 900: '#0b3e2b', + 1000: '#0c291e', + 1100: '#0b1e17', + 1200: '#0a1511' }, kale: { - 100: '#f5fcfc', - 200: '#daeded', - 300: '#bdd9d7', - 400: '#90bbbb', - 500: '#498283', - 600: '#17494d', - 700: '#03363d', - 800: '#012b30' + 100: '#ecf9f9', + 200: '#d8ebeb', + 300: '#b3d2d0', + 400: '#94bebd', + 500: '#5e9b9c', + 600: '#579394', + 700: '#40787a', + 800: '#275c5f', + 900: '#0a3c42', + 1000: '#02282d', + 1100: '#041e22', + 1200: '#061517' }, /* secondary */ fuschia: { - 400: '#d653c2', - 600: '#a81897', + 100: '#fbf3f8', + 200: '#f6e2ef', + 300: '#ecc0dc', + 400: '#e3a2cc', + 500: '#d36faf', + 600: '#cf63a8', + 700: '#b34496', + 800: '#971688', + 900: '#640e59', + 1000: '#430a3d', + 1100: '#34072f', + 1200: '#260523', M400: '#cf62a8', M600: '#a8458c' }, pink: { - 400: '#ec4d63', - 600: '#d42054', + 100: '#fcf4f5', + 200: '#f7e3e8', + 300: '#edc1ca', + 400: '#e4a5b3', + 500: '#d57388', + 600: '#e35b72', + 700: '#d62054', + 800: '#94304e', + 900: '#611f32', + 1000: '#401522', + 1100: '#31101a', + 1200: '#230b12', M400: '#d57287', M600: '#b23a5d' }, crimson: { - 400: '#e34f32', - 600: '#c72a1c', + 100: '#fbf4f3', + 200: '#f6e4e1', + 300: '#eac3bc', + 400: '#e1a89e', + 500: '#d1796a', + 600: '#cd6e5d', + 700: '#be4938', + 800: '#a32217', + 900: '#6b160f', + 1000: '#480f0a', + 1100: '#370c08', + 1200: '#280806', M400: '#cc6c5b', M600: '#b24a3c' }, orange: { - 400: '#de701d', - 600: '#bf5000', + 100: '#fdf3ed', + 200: '#f9e3d3', + 300: '#f2c39f', + 400: '#eda671', + 500: '#e2721e', + 600: '#d26e20', + 700: '#af5626', + 800: '#85421d', + 900: '#562b13', + 1000: '#3a1c0d', + 1100: '#2c150a', + 1200: '#1f0f07', M400: '#d4772c', M600: '#b35827' }, lemon: { - 400: '#ffd424', - 600: '#ffbb10', + 100: '#fff6cf', + 200: '#ffe682', + 300: '#ffc417', + 400: '#eda900', + 500: '#ba8900', + 600: '#b08100', + 700: '#8f6900', + 800: '#6d5000', + 900: '#463300', + 1000: '#2f2200', + 1100: '#231a00', + 1200: '#191200', M400: '#e7a500', M600: '#c38f00' }, lime: { - 400: '#43b324', - 600: '#2e8200', + 100: '#ebfae6', + 200: '#c9f2bd', + 300: '#88e270', + 400: '#4ecf2a', + 500: '#4da42a', + 600: '#489b20', + 700: '#3d7e19', + 800: '#385f23', + 900: '#243c16', + 1000: '#18280f', + 1100: '#121e0b', + 1200: '#0d1508', M400: '#519e2d', M600: '#47782c' }, mint: { - 400: '#00a656', - 600: '#058541', + 100: '#d6ffeb', + 200: '#83ffc3', + 300: '#00ea79', + 400: '#00d16d', + 500: '#00a756', + 600: '#279b65', + 700: '#2d7d55', + 800: '#225f41', + 900: '#163d2a', + 1000: '#0f291c', + 1100: '#0b1e15', + 1200: '#08150f', M400: '#299c66', M600: '#2e8057' }, teal: { - 400: '#02a191', - 600: '#028079', + 100: '#d6fefa', + 200: '#70fdef', + 300: '#03e5ce', + 400: '#03ccb8', + 500: '#02a392', + 600: '#1f998b', + 700: '#367a74', + 800: '#2e5c59', + 900: '#1e3b39', + 1000: '#142726', + 1100: '#0f1d1c', + 1200: '#0a1514', M400: '#2d9e8f', M600: '#3c7873' }, azure: { - 400: '#3091ec', - 600: '#1371d6', + 100: '#f0f7fe', + 200: '#d7eafb', + 300: '#a8d1f7', + 400: '#7fbbf3', + 500: '#3795ed', + 600: '#598ad0', + 700: '#2770c4', + 800: '#2c5689', + 900: '#1d3758', + 1000: '#13253a', + 1100: '#0e1b2c', + 1200: '#0a131f', M400: '#5f8dcf', M600: '#3a70b2' }, royal: { - 400: '#5d7df5', - 600: '#3353e2', + 100: '#f5f6fc', + 200: '#e3e6f7', + 300: '#c5cbee', + 400: '#abb3e7', + 500: '#7f8cda', + 600: '#7182e1', + 700: '#4d67d3', + 800: '#1f40d8', + 900: '#142a8d', + 1000: '#0e1c5f', + 1100: '#0a1548', + 1200: '#070f34', M400: '#7986d8', M600: '#4b61c3' }, purple: { - 400: '#b552e2', - 600: '#6a27b8', + 100: '#f9f4fb', + 200: '#efe3f5', + 300: '#ddc3e9', + 400: '#cea8e0', + 500: '#b57acf', + 600: '#b16ecf', + 700: '#9256b1', + 800: '#722eb8', + 900: '#491b7f', + 1000: '#311256', + 1100: '#250e41', + 1200: '#1b0a2e', M400: '#b072cc', M600: '#9358b0' } }; -/** @component */ export default PALETTE; diff --git a/packages/theming/src/elements/palette/v8.ts b/packages/theming/src/elements/palette/v8.ts new file mode 100644 index 00000000000..2e7ed6704df --- /dev/null +++ b/packages/theming/src/elements/palette/v8.ts @@ -0,0 +1,155 @@ +/** + * 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. + */ + +/** @deprecated INTERNAL ONLY – DO NOT USE */ +const PALETTE_V8 = { + black: '#000', + white: '#fff', + product: { + support: '#00a656', + message: '#37b8af', + explore: '#30aabc', + gather: '#f6c8be', + guide: '#eb4962', + connect: '#ff6224', + chat: '#f79a3e', + talk: '#efc93d', + sell: '#c38f00' + }, + + /* primary */ + grey: { + 100: '#f8f9f9', + 200: '#e9ebed', + 300: '#d8dcde', + 400: '#c2c8cc', + 500: '#87929d', + 600: '#68737d', + 700: '#49545c', + 800: '#2f3941' + }, + blue: { + 100: '#edf7ff', + 200: '#cee2f2', + 300: '#adcce4', + 400: '#5293c7', + 500: '#337fbd', + 600: '#1f73b7', + 700: '#144a75', + 800: '#0f3554' + }, + red: { + 100: '#fff0f1', + 200: '#f5d5d8', + 300: '#f5b5ba', + 400: '#e35b66', + 500: '#d93f4c', + 600: '#cc3340', + 700: '#8c232c', + 800: '#681219' + }, + yellow: { + 100: '#fff7ed', + 200: '#ffeedb', + 300: '#fed6a8', + 400: '#ffb057', + 500: '#f79a3e', + 600: '#ed8f1c', + 700: '#ad5918', + 800: '#703815' + }, + green: { + 100: '#edf8f4', + 200: '#d1e8df', + 300: '#aecfc2', + 400: '#5eae91', + 500: '#228f67', + 600: '#038153', + 700: '#186146', + 800: '#0b3b29' + }, + kale: { + 100: '#f5fcfc', + 200: '#daeded', + 300: '#bdd9d7', + 400: '#90bbbb', + 500: '#498283', + 600: '#17494d', + 700: '#03363d', + 800: '#012b30' + }, + + /* secondary */ + fuschia: { + 400: '#d653c2', + 600: '#a81897', + M400: '#cf62a8', + M600: '#a8458c' + }, + pink: { + 400: '#ec4d63', + 600: '#d42054', + M400: '#d57287', + M600: '#b23a5d' + }, + crimson: { + 400: '#e34f32', + 600: '#c72a1c', + M400: '#cc6c5b', + M600: '#b24a3c' + }, + orange: { + 400: '#de701d', + 600: '#bf5000', + M400: '#d4772c', + M600: '#b35827' + }, + lemon: { + 400: '#ffd424', + 600: '#ffbb10', + M400: '#e7a500', + M600: '#c38f00' + }, + lime: { + 400: '#43b324', + 600: '#2e8200', + M400: '#519e2d', + M600: '#47782c' + }, + mint: { + 400: '#00a656', + 600: '#058541', + M400: '#299c66', + M600: '#2e8057' + }, + teal: { + 400: '#02a191', + 600: '#028079', + M400: '#2d9e8f', + M600: '#3c7873' + }, + azure: { + 400: '#3091ec', + 600: '#1371d6', + M400: '#5f8dcf', + M600: '#3a70b2' + }, + royal: { + 400: '#5d7df5', + 600: '#3353e2', + M400: '#7986d8', + M600: '#4b61c3' + }, + purple: { + 400: '#b552e2', + 600: '#6a27b8', + M400: '#b072cc', + M600: '#9358b0' + } +}; + +export default PALETTE_V8; diff --git a/packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap b/packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap index 8f18e6e09eb..5176f47b7e7 100644 --- a/packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap +++ b/packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap @@ -97,132 +97,266 @@ exports[`DEFAULT_THEME matches snapshot 1`] = ` }, "palette": { "azure": { - "400": "#3091ec", - "600": "#1371d6", + "100": "#f0f7fe", + "1000": "#13253a", + "1100": "#0e1b2c", + "1200": "#0a131f", + "200": "#d7eafb", + "300": "#a8d1f7", + "400": "#7fbbf3", + "500": "#3795ed", + "600": "#598ad0", + "700": "#2770c4", + "800": "#2c5689", + "900": "#1d3758", "M400": "#5f8dcf", "M600": "#3a70b2", }, "black": "#000", "blue": { "100": "#edf7ff", - "200": "#cee2f2", - "300": "#adcce4", - "400": "#5293c7", - "500": "#337fbd", - "600": "#1f73b7", - "700": "#144a75", - "800": "#0f3554", + "1000": "#0b253b", + "1100": "#081c2d", + "1200": "#061420", + "200": "#d9eaf7", + "300": "#b3d0e7", + "400": "#92bbdb", + "500": "#5896c9", + "600": "#4b8ec5", + "700": "#1f73b7", + "800": "#18578b", + "900": "#103859", }, "crimson": { - "400": "#e34f32", - "600": "#c72a1c", + "100": "#fbf4f3", + "1000": "#480f0a", + "1100": "#370c08", + "1200": "#280806", + "200": "#f6e4e1", + "300": "#eac3bc", + "400": "#e1a89e", + "500": "#d1796a", + "600": "#cd6e5d", + "700": "#be4938", + "800": "#a32217", + "900": "#6b160f", "M400": "#cc6c5b", "M600": "#b24a3c", }, "fuschia": { - "400": "#d653c2", - "600": "#a81897", + "100": "#fbf3f8", + "1000": "#430a3d", + "1100": "#34072f", + "1200": "#260523", + "200": "#f6e2ef", + "300": "#ecc0dc", + "400": "#e3a2cc", + "500": "#d36faf", + "600": "#cf63a8", + "700": "#b34496", + "800": "#971688", + "900": "#640e59", "M400": "#cf62a8", "M600": "#a8458c", }, "green": { - "100": "#edf8f4", - "200": "#d1e8df", - "300": "#aecfc2", - "400": "#5eae91", - "500": "#228f67", - "600": "#038153", - "700": "#186146", - "800": "#0b3b29", + "100": "#eef8f4", + "1000": "#0c291e", + "1100": "#0b1e17", + "1200": "#0a1511", + "200": "#d7ede4", + "300": "#b4d3c6", + "400": "#91bfae", + "500": "#3fa17e", + "600": "#329974", + "700": "#037f52", + "800": "#186045", + "900": "#0b3e2b", }, "grey": { - "100": "#f8f9f9", - "200": "#e9ebed", - "300": "#d8dcde", - "400": "#c2c8cc", - "500": "#87929d", - "600": "#68737d", - "700": "#49545c", - "800": "#2f3941", + "100": "#f4f6f6", + "1000": "#1e252a", + "1100": "#171b1f", + "1200": "#101316", + "200": "#e4e7e9", + "300": "#c7cdd0", + "400": "#afb7bd", + "500": "#88929d", + "600": "#7f8a95", + "700": "#65707a", + "800": "#4b565f", + "900": "#2e373f", }, "kale": { - "100": "#f5fcfc", - "200": "#daeded", - "300": "#bdd9d7", - "400": "#90bbbb", - "500": "#498283", - "600": "#17494d", - "700": "#03363d", - "800": "#012b30", + "100": "#ecf9f9", + "1000": "#02282d", + "1100": "#041e22", + "1200": "#061517", + "200": "#d8ebeb", + "300": "#b3d2d0", + "400": "#94bebd", + "500": "#5e9b9c", + "600": "#579394", + "700": "#40787a", + "800": "#275c5f", + "900": "#0a3c42", }, "lemon": { - "400": "#ffd424", - "600": "#ffbb10", + "100": "#fff6cf", + "1000": "#2f2200", + "1100": "#231a00", + "1200": "#191200", + "200": "#ffe682", + "300": "#ffc417", + "400": "#eda900", + "500": "#ba8900", + "600": "#b08100", + "700": "#8f6900", + "800": "#6d5000", + "900": "#463300", "M400": "#e7a500", "M600": "#c38f00", }, "lime": { - "400": "#43b324", - "600": "#2e8200", + "100": "#ebfae6", + "1000": "#18280f", + "1100": "#121e0b", + "1200": "#0d1508", + "200": "#c9f2bd", + "300": "#88e270", + "400": "#4ecf2a", + "500": "#4da42a", + "600": "#489b20", + "700": "#3d7e19", + "800": "#385f23", + "900": "#243c16", "M400": "#519e2d", "M600": "#47782c", }, "mint": { - "400": "#00a656", - "600": "#058541", + "100": "#d6ffeb", + "1000": "#0f291c", + "1100": "#0b1e15", + "1200": "#08150f", + "200": "#83ffc3", + "300": "#00ea79", + "400": "#00d16d", + "500": "#00a756", + "600": "#279b65", + "700": "#2d7d55", + "800": "#225f41", + "900": "#163d2a", "M400": "#299c66", "M600": "#2e8057", }, "orange": { - "400": "#de701d", - "600": "#bf5000", + "100": "#fdf3ed", + "1000": "#3a1c0d", + "1100": "#2c150a", + "1200": "#1f0f07", + "200": "#f9e3d3", + "300": "#f2c39f", + "400": "#eda671", + "500": "#e2721e", + "600": "#d26e20", + "700": "#af5626", + "800": "#85421d", + "900": "#562b13", "M400": "#d4772c", "M600": "#b35827", }, "pink": { - "400": "#ec4d63", - "600": "#d42054", + "100": "#fcf4f5", + "1000": "#401522", + "1100": "#31101a", + "1200": "#230b12", + "200": "#f7e3e8", + "300": "#edc1ca", + "400": "#e4a5b3", + "500": "#d57388", + "600": "#e35b72", + "700": "#d62054", + "800": "#94304e", + "900": "#611f32", "M400": "#d57287", "M600": "#b23a5d", }, "purple": { - "400": "#b552e2", - "600": "#6a27b8", + "100": "#f9f4fb", + "1000": "#311256", + "1100": "#250e41", + "1200": "#1b0a2e", + "200": "#efe3f5", + "300": "#ddc3e9", + "400": "#cea8e0", + "500": "#b57acf", + "600": "#b16ecf", + "700": "#9256b1", + "800": "#722eb8", + "900": "#491b7f", "M400": "#b072cc", "M600": "#9358b0", }, "red": { - "100": "#fff0f1", - "200": "#f5d5d8", - "300": "#f5b5ba", - "400": "#e35b66", - "500": "#d93f4c", - "600": "#cc3340", - "700": "#8c232c", - "800": "#681219", + "100": "#fff2f3", + "1000": "#431418", + "1100": "#2d1315", + "1200": "#1b1011", + "200": "#fde1e3", + "300": "#f5bfc4", + "400": "#f2a0a6", + "500": "#e76973", + "600": "#e35c67", + "700": "#cd3642", + "800": "#9d2933", + "900": "#6c1219", }, "royal": { - "400": "#5d7df5", - "600": "#3353e2", + "100": "#f5f6fc", + "1000": "#0e1c5f", + "1100": "#0a1548", + "1200": "#070f34", + "200": "#e3e6f7", + "300": "#c5cbee", + "400": "#abb3e7", + "500": "#7f8cda", + "600": "#7182e1", + "700": "#4d67d3", + "800": "#1f40d8", + "900": "#142a8d", "M400": "#7986d8", "M600": "#4b61c3", }, "teal": { - "400": "#02a191", - "600": "#028079", + "100": "#d6fefa", + "1000": "#142726", + "1100": "#0f1d1c", + "1200": "#0a1514", + "200": "#70fdef", + "300": "#03e5ce", + "400": "#03ccb8", + "500": "#02a392", + "600": "#1f998b", + "700": "#367a74", + "800": "#2e5c59", + "900": "#1e3b39", "M400": "#2d9e8f", "M600": "#3c7873", }, "white": "#fff", "yellow": { - "100": "#fff7ed", - "200": "#ffeedb", - "300": "#fed6a8", - "400": "#ffb057", - "500": "#f79a3e", - "600": "#ed8f1c", - "700": "#ad5918", - "800": "#703815", + "100": "#fff3e4", + "1000": "#312016", + "1100": "#221913", + "1200": "#17120f", + "200": "#ffe2c2", + "300": "#ffc079", + "400": "#fba246", + "500": "#d87916", + "600": "#ce7117", + "700": "#ac5918", + "800": "#874114", + "900": "#512d17", }, }, "rtl": false, diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts index c45060d6229..0c017652723 100644 --- a/packages/theming/src/index.ts +++ b/packages/theming/src/index.ts @@ -8,6 +8,7 @@ export { ThemeProvider } from './elements/ThemeProvider'; export { default as DEFAULT_THEME } from './elements/theme'; export { default as PALETTE } from './elements/palette'; +export { default as PALETTE_V8 } from './elements/palette/v8'; export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles'; export { getArrowPosition } from './utils/getArrowPosition'; export { getColorV8 as getColor, getColorV8 } from './utils/getColorV8'; diff --git a/packages/theming/src/utils/focusStyles.spec.tsx b/packages/theming/src/utils/focusStyles.spec.tsx index 98197a149e7..6bb18cd8b28 100644 --- a/packages/theming/src/utils/focusStyles.spec.tsx +++ b/packages/theming/src/utils/focusStyles.spec.tsx @@ -11,7 +11,7 @@ import styled, { ThemeProps, DefaultTheme, CSSObject } from 'styled-components'; import { focusStyles } from './focusStyles'; import { Hue } from './getColorV8'; import DEFAULT_THEME from '../elements/theme'; -import PALETTE from '../elements/palette'; +import PALETTE_V8 from '../elements/palette/v8'; interface IStyledDivProps extends ThemeProps { condition?: boolean; @@ -33,7 +33,7 @@ const StyledDiv = styled.div` describe('focusStyles', () => { it('renders with expected defaults', () => { const { container } = render(); - const expected = `${DEFAULT_THEME.shadowWidths.md} ${PALETTE.blue[600]}`; + const expected = `${DEFAULT_THEME.shadowWidths.md} ${PALETTE_V8.blue[600]}`; expect(container.firstChild).toHaveStyleRule('outline', 'none', { modifier: '&:focus' }); expect(container.firstChild).toHaveStyleRule('box-shadow', expect.stringContaining(expected), { @@ -71,7 +71,7 @@ describe('focusStyles', () => { expect(container.firstChild).toHaveStyleRule( 'box-shadow', - expect.stringContaining(`${DEFAULT_THEME.shadowWidths.md} ${PALETTE.red[400]}`), + expect.stringContaining(`${DEFAULT_THEME.shadowWidths.md} ${PALETTE_V8.red[400]}`), { modifier: '&:focus-visible' } @@ -83,7 +83,7 @@ describe('focusStyles', () => { expect(container.firstChild).toHaveStyleRule( 'box-shadow', - expect.stringContaining(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE.red[400]}`), + expect.stringContaining(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE_V8.red[400]}`), { modifier: '&:focus-visible' } @@ -95,7 +95,7 @@ describe('focusStyles', () => { expect(container.firstChild).toHaveStyleRule( 'box-shadow', - expect.stringContaining(`${PALETTE.blue[600]}`), + expect.stringContaining(`${PALETTE_V8.blue[600]}`), { modifier: '&:focus-within' } @@ -107,14 +107,14 @@ describe('focusStyles', () => { expect(container.firstChild).toHaveStyleRule( 'box-shadow', - expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE.blue[600]}`), + expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE_V8.blue[600]}`), { modifier: '&:focus-visible' } ); expect(container.firstChild).toHaveStyleRule( 'box-shadow', - expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE.white}`), + expect.stringContaining(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE_V8.white}`), { modifier: '&:focus-visible' } @@ -138,7 +138,7 @@ describe('focusStyles', () => { }); it('renders user provided styles', () => { - const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE.black); + const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE_V8.black); const { container } = render( ); diff --git a/packages/theming/src/utils/getColorV8.spec.ts b/packages/theming/src/utils/getColorV8.spec.ts index 94053c7985b..337c037c262 100644 --- a/packages/theming/src/utils/getColorV8.spec.ts +++ b/packages/theming/src/utils/getColorV8.spec.ts @@ -6,24 +6,22 @@ */ import { getColorV8 } from './getColorV8'; -import PALETTE from '../elements/palette'; +import PALETTE_V8 from '../elements/palette/v8'; import DEFAULT_THEME from '../elements/theme'; import { darken, lighten, rgba } from 'polished'; -const DEFAULT_SHADE = 600; - describe('getColorV8', () => { describe('by hue', () => { it('gets the hue specified by string', () => { const color = getColorV8('red'); - const expected = PALETTE.red[DEFAULT_SHADE]; + const expected = PALETTE_V8.red[600]; expect(color).toBe(expected); }); it('gets the hue specified by object', () => { - const color = getColorV8(PALETTE.green); - const expected = PALETTE.green[DEFAULT_SHADE]; + const color = getColorV8(PALETTE_V8.green); + const expected = PALETTE_V8.green[600]; expect(color).toBe(expected); }); @@ -38,56 +36,56 @@ describe('getColorV8', () => { describe('by `color` key', () => { it('gets the default background color', () => { const color = getColorV8('background'); - const expected = PALETTE.white; + const expected = PALETTE_V8.white; expect(color).toBe(expected); }); it('gets the default foreground color', () => { const color = getColorV8('foreground'); - const expected = PALETTE.grey[800]; + const expected = PALETTE_V8.grey[800]; expect(color).toBe(expected); }); it('gets the default primary color', () => { const color = getColorV8('primaryHue'); - const expected = (PALETTE as any)[DEFAULT_THEME.colors.primaryHue][DEFAULT_SHADE]; + const expected = (PALETTE_V8 as any)[DEFAULT_THEME.colors.primaryHue][600]; expect(color).toBe(expected); }); it('gets the default danger color', () => { const color = getColorV8('dangerHue'); - const expected = (PALETTE as any)[DEFAULT_THEME.colors.dangerHue][DEFAULT_SHADE]; + const expected = (PALETTE_V8 as any)[DEFAULT_THEME.colors.dangerHue][600]; expect(color).toBe(expected); }); it('gets the default warning color', () => { const color = getColorV8('warningHue'); - const expected = (PALETTE as any)[DEFAULT_THEME.colors.warningHue][DEFAULT_SHADE]; + const expected = (PALETTE_V8 as any)[DEFAULT_THEME.colors.warningHue][600]; expect(color).toBe(expected); }); it('gets the default success color', () => { const color = getColorV8('successHue'); - const expected = (PALETTE as any)[DEFAULT_THEME.colors.successHue][DEFAULT_SHADE]; + const expected = (PALETTE_V8 as any)[DEFAULT_THEME.colors.successHue][600]; expect(color).toBe(expected); }); it('gets the default neutral color', () => { const color = getColorV8('neutralHue'); - const expected = (PALETTE as any)[DEFAULT_THEME.colors.neutralHue][DEFAULT_SHADE]; + const expected = (PALETTE_V8 as any)[DEFAULT_THEME.colors.neutralHue][600]; expect(color).toBe(expected); }); it('gets the default chrome color', () => { const color = getColorV8('chromeHue'); - const expected = (PALETTE as any)[DEFAULT_THEME.colors.chromeHue][DEFAULT_SHADE]; + const expected = (PALETTE_V8 as any)[DEFAULT_THEME.colors.chromeHue][600]; expect(color).toBe(expected); }); @@ -97,21 +95,21 @@ describe('getColorV8', () => { describe('by shade', () => { it('gets the specified shade of hue', () => { const color = getColorV8('red', 100); - const expected = PALETTE.red[100]; + const expected = PALETTE_V8.red[100]; expect(color).toBe(expected); }); it('darkens the color if shade is greater than what exists within the hue', () => { const color = getColorV8('blue', 900); - const expected = darken(0.05, PALETTE.blue[800]); + const expected = darken(0.05, PALETTE_V8.blue[800]); expect(color).toBe(expected); }); it('darkens a non-hue color if shade is greater than the default', () => { const hex = '#fd5a1e'; - const color = getColorV8(hex, DEFAULT_SHADE + 100); + const color = getColorV8(hex, 700); const expected = darken(0.05, hex); expect(color).toBe(expected); @@ -119,14 +117,14 @@ describe('getColorV8', () => { it('lightens the color if shade is lesser than what what exists within the hue', () => { const color = getColorV8('blue', 0); - const expected = lighten(0.05, PALETTE.blue[100]); + const expected = lighten(0.05, PALETTE_V8.blue[100]); expect(color).toBe(expected); }); it('lightens a non-hue color if shade is greater than the default', () => { const hex = '#fd5a1e'; - const color = getColorV8(hex, DEFAULT_SHADE - 100); + const color = getColorV8(hex, 500); const expected = lighten(0.05, hex); expect(color).toBe(expected); @@ -157,7 +155,7 @@ describe('getColorV8', () => { }); it('falls back when hue is off palette', () => { - const expected = 'blue'; + const expected = 'missing'; const color = getColorV8(expected, undefined, theme); expect(color).toBe(expected); @@ -175,7 +173,7 @@ describe('getColorV8', () => { it('resolves when only hue and transparency is specified', () => { const transparency = 0.5; const expected = rgba( - (PALETTE as any)[DEFAULT_THEME.colors.primaryHue][DEFAULT_SHADE], + (PALETTE_V8 as any)[DEFAULT_THEME.colors.primaryHue][600], transparency ); const color = getColorV8('primaryHue', undefined, undefined, transparency); diff --git a/packages/theming/src/utils/getColorV8.ts b/packages/theming/src/utils/getColorV8.ts index aa564c511df..90aba578923 100644 --- a/packages/theming/src/utils/getColorV8.ts +++ b/packages/theming/src/utils/getColorV8.ts @@ -6,7 +6,7 @@ */ import DEFAULT_THEME from '../elements/theme'; -import PALETTE from '../elements/palette'; +import PALETTE_V8 from '../elements/palette/v8'; import { darken, lighten, rgba } from 'polished'; import { DefaultTheme } from 'styled-components'; import memoize from 'lodash.memoize'; @@ -50,9 +50,12 @@ export const getColorV8 = memoize( const palette = { /* provide background and foreground fallback for legacy theme usage */ - background: PALETTE.white, - foreground: PALETTE.grey[800], - ...(theme && theme.palette ? theme.palette : DEFAULT_THEME.palette) + background: PALETTE_V8.white, + foreground: PALETTE_V8.grey[800], + /* provide palette fallback for legacy theme usage */ + ...(theme && theme.palette + ? { ...theme.palette, ...PALETTE_V8 } + : { ...DEFAULT_THEME.palette, ...PALETTE_V8 }) } as Record; const colors = theme && theme.colors ? theme.colors : DEFAULT_THEME.colors; diff --git a/packages/theming/src/utils/getFocusBoxShadow.spec.ts b/packages/theming/src/utils/getFocusBoxShadow.spec.ts index e1b0461b5f3..4cc7f4035a5 100644 --- a/packages/theming/src/utils/getFocusBoxShadow.spec.ts +++ b/packages/theming/src/utils/getFocusBoxShadow.spec.ts @@ -7,15 +7,15 @@ import { getFocusBoxShadow } from './getFocusBoxShadow'; import DEFAULT_THEME from '../elements/theme'; -import PALETTE from '../elements/palette'; +import PALETTE_V8 from '../elements/palette/v8'; import { getColorV8 } from './getColorV8'; describe('getFocusBoxShadow', () => { it('defaults as expected', () => { const boxShadow = getFocusBoxShadow({ theme: DEFAULT_THEME }); - expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.md} ${PALETTE.blue[600]}`); - expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE.white}`); + expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.md} ${PALETTE_V8.blue[600]}`); + expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE_V8.white}`); }); it('resizes as expected', () => { @@ -25,8 +25,8 @@ describe('getFocusBoxShadow', () => { spacerWidth: 'sm' }); - expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE.blue[600]}`); - expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE.white}`); + expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE_V8.blue[600]}`); + expect(boxShadow).toContain(`${DEFAULT_THEME.shadowWidths.sm} ${PALETTE_V8.white}`); }); it('insets as expected', () => { @@ -62,11 +62,11 @@ describe('getFocusBoxShadow', () => { it('knocks out spacer as expected', () => { const boxShadow = getFocusBoxShadow({ theme: DEFAULT_THEME, spacerWidth: null }); - expect(boxShadow).not.toContain(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE.white}`); + expect(boxShadow).not.toContain(`${DEFAULT_THEME.shadowWidths.xs} ${PALETTE_V8.white}`); }); it('combines with existing box-shadow as expected', () => { - const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE.black); + const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE_V8.black); const boxShadow = getFocusBoxShadow({ theme: DEFAULT_THEME, boxShadow: dropShadow diff --git a/packages/typography/src/elements/Code.spec.tsx b/packages/typography/src/elements/Code.spec.tsx index 4ba4a2608d1..147749f660c 100644 --- a/packages/typography/src/elements/Code.spec.tsx +++ b/packages/typography/src/elements/Code.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { Code } from './Code'; describe('Code', () => { @@ -50,25 +50,25 @@ describe('Code', () => { it('renders grey hue if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[200]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[200]); }); it('renders green hue if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.green[200]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.green[200]); }); it('renders red hue if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.red[200]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.red[200]); }); it('renders yellow hue if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.yellow[200]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.yellow[200]); }); }); }); diff --git a/packages/typography/src/elements/CodeBlock.spec.tsx b/packages/typography/src/elements/CodeBlock.spec.tsx index bbbc2bf7722..87500f8f1b4 100644 --- a/packages/typography/src/elements/CodeBlock.spec.tsx +++ b/packages/typography/src/elements/CodeBlock.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { rgba } from 'polished'; import { render } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { CodeBlock } from './CodeBlock'; describe('CodeBlock', () => { @@ -49,7 +49,7 @@ describe('CodeBlock', () => { expect(container.getElementsByTagName('pre')[0]).toHaveStyleRule( 'background-color', - PALETTE.grey[100] + PALETTE_V8.grey[100] ); }); @@ -74,10 +74,10 @@ describe('CodeBlock', () => { const { container } = render({code}); const codeElements = container.getElementsByTagName('code'); - expect(codeElements[0]).toHaveStyleRule('background-color', rgba(PALETTE.royal[400], 0.2)); - expect(codeElements[1]).toHaveStyleRule('background-color', rgba(PALETTE.lime[400], 0.2)); - expect(codeElements[2]).toHaveStyleRule('background-color', rgba(PALETTE.crimson[400], 0.2)); - expect(codeElements[3]).toHaveStyleRule('background-color', rgba(PALETTE.lemon[400], 0.2)); + expect(codeElements[0]).toHaveStyleRule('background-color', rgba(PALETTE_V8.royal[400], 0.2)); + expect(codeElements[1]).toHaveStyleRule('background-color', rgba(PALETTE_V8.lime[400], 0.2)); + expect(codeElements[2]).toHaveStyleRule('background-color', rgba(PALETTE_V8.crimson[400], 0.2)); + expect(codeElements[3]).toHaveStyleRule('background-color', rgba(PALETTE_V8.lemon[400], 0.2)); expect(codeElements[4]).not.toHaveStyleRule('background-color'); }); @@ -87,7 +87,7 @@ describe('CodeBlock', () => { const { container } = render({code}); const codeElements = container.getElementsByTagName('code'); - expect(codeElements[0]).toHaveStyleRule('background-color', rgba(PALETTE.white, 0.1)); + expect(codeElements[0]).toHaveStyleRule('background-color', rgba(PALETTE_V8.white, 0.1)); expect(codeElements[1]).not.toHaveStyleRule('background-color'); }); diff --git a/packages/typography/src/elements/span/Span.spec.tsx b/packages/typography/src/elements/span/Span.spec.tsx index 98753cc9dbc..ca9cd8b8d10 100644 --- a/packages/typography/src/elements/span/Span.spec.tsx +++ b/packages/typography/src/elements/span/Span.spec.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, PALETTE_V8 } from '@zendeskgarden/react-theming'; import { render, renderRtl } from 'garden-test-utils'; import { Span } from './Span'; import TestIcon from '@zendeskgarden/svg-icons/src/16/gear-stroke.svg'; @@ -68,14 +68,14 @@ describe('Span', () => { ].forEach(color => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', (PALETTE as any)[color][600]); + expect(container.firstChild).toHaveStyleRule('color', (PALETTE_V8 as any)[color][600]); }); }); it('handles yellow hue with specialized shading', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.yellow[700]); + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.yellow[700]); }); }); diff --git a/packages/typography/src/styled/StyledCodeBlock.spec.tsx b/packages/typography/src/styled/StyledCodeBlock.spec.tsx index 9d1db8e7080..65caf975c5d 100644 --- a/packages/typography/src/styled/StyledCodeBlock.spec.tsx +++ b/packages/typography/src/styled/StyledCodeBlock.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledCodeBlock } from './StyledCodeBlock'; describe('StyledCodeBlock', () => { @@ -26,6 +26,6 @@ describe('StyledCodeBlock', () => { it('renders as expected in light mode', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[100]); + expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[100]); }); }); diff --git a/packages/typography/src/styled/StyledCodeBlockLine.spec.tsx b/packages/typography/src/styled/StyledCodeBlockLine.spec.tsx index 2ac8be017b3..b71bc1fef96 100644 --- a/packages/typography/src/styled/StyledCodeBlockLine.spec.tsx +++ b/packages/typography/src/styled/StyledCodeBlockLine.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { rgba } from 'polished'; import { render, renderRtl } from 'garden-test-utils'; -import { PALETTE } from '@zendeskgarden/react-theming'; +import { PALETTE_V8 } from '@zendeskgarden/react-theming'; import { StyledCodeBlockLine } from './StyledCodeBlockLine'; describe('StyledCodeBlockLine', () => { @@ -28,13 +28,13 @@ describe('StyledCodeBlockLine', () => { it('renders highlight as expected', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', rgba(PALETTE.white, 0.1)); + expect(container.firstChild).toHaveStyleRule('background-color', rgba(PALETTE_V8.white, 0.1)); }); it('renders as expected in light mode', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', rgba(PALETTE.black, 0.1)); + expect(container.firstChild).toHaveStyleRule('background-color', rgba(PALETTE_V8.black, 0.1)); }); }); @@ -50,7 +50,7 @@ describe('StyledCodeBlockLine', () => { it('renders as expected in light mode', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600], { + expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600], { modifier: '&::before' }); }); @@ -82,7 +82,7 @@ describe('StyledCodeBlockLine', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - rgba(PALETTE.lime[400], 0.2) + rgba(PALETTE_V8.lime[400], 0.2) ); }); @@ -91,7 +91,7 @@ describe('StyledCodeBlockLine', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - rgba(PALETTE.crimson[400], 0.2) + rgba(PALETTE_V8.crimson[400], 0.2) ); }); @@ -100,7 +100,7 @@ describe('StyledCodeBlockLine', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - rgba(PALETTE.lemon[400], 0.2) + rgba(PALETTE_V8.lemon[400], 0.2) ); }); @@ -109,7 +109,7 @@ describe('StyledCodeBlockLine', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - rgba(PALETTE.royal[400], 0.2) + rgba(PALETTE_V8.royal[400], 0.2) ); }); });