diff --git a/package.json b/package.json index 64fe813d3..8da8cf53d 100644 --- a/package.json +++ b/package.json @@ -160,5 +160,6 @@ }, "dependencies": { "concurrently": "^7.0.0" - } + }, + "version": "1.0.0-light-theme-default-beta.1" } diff --git a/packages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx b/packages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx index 2651b6840..a5363e318 100644 --- a/packages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx +++ b/packages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx @@ -6,9 +6,9 @@ import {usePolarisVizContext} from '../../../hooks'; import {PolarisVizProvider} from '../PolarisVizProvider'; import {PolarisVizContext} from '../../../contexts'; import { - DARK_THEME, DEFAULT_COMPONENTS, DEFAULT_THEME_NAME, + LIGHT_THEME, } from '../../../constants'; const MockChild = ({theme = DEFAULT_THEME_NAME}) => { @@ -45,14 +45,14 @@ describe('', () => { , ); - expect(vizProvider).toContainReactText(JSON.stringify(DARK_THEME)); + expect(vizProvider).toContainReactText(JSON.stringify(LIGHT_THEME)); }); it('passes custom themes to children', () => { const vizProvider = mount( ', () => { }} animated={host.animated} > - + , ); expect(vizProvider).toContainReactText( JSON.stringify({ - ...DARK_THEME, + ...LIGHT_THEME, bar: { - ...DARK_THEME.bar, + ...LIGHT_THEME.bar, borderRadius: 3, }, }), diff --git a/packages/polaris-viz-core/src/hooks/tests/usePolarisVizContext.test.tsx b/packages/polaris-viz-core/src/hooks/tests/usePolarisVizContext.test.tsx index e93643e25..f659e69a5 100644 --- a/packages/polaris-viz-core/src/hooks/tests/usePolarisVizContext.test.tsx +++ b/packages/polaris-viz-core/src/hooks/tests/usePolarisVizContext.test.tsx @@ -39,14 +39,14 @@ describe('usePolarisVizContext', () => { expect(mockComponent.text()).toBe( JSON.stringify({ - Dark: { - ...DARK_THEME, + Dark: DARK_THEME, + Light: { + ...LIGHT_THEME, chartContainer: { - ...DARK_THEME.chartContainer, + ...LIGHT_THEME.chartContainer, backgroundColor: 'purple', }, }, - Light: LIGHT_THEME, Print: PRINT_THEME, }), ); @@ -69,9 +69,9 @@ describe('usePolarisVizContext', () => { Light: LIGHT_THEME, Print: PRINT_THEME, SomeOtherTheme: { - ...DARK_THEME, + ...LIGHT_THEME, chartContainer: { - ...DARK_THEME.chartContainer, + ...LIGHT_THEME.chartContainer, backgroundColor: 'purple', }, }, diff --git a/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx b/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx index bf789215a..7a15fd7a8 100644 --- a/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx +++ b/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx @@ -1,7 +1,7 @@ import {mount} from '@shopify/react-testing'; import {mountWithProvider, expectToThrow} from '../../test-utilities'; -import {DARK_THEME} from '../../../../polaris-viz-core/src'; +import {DARK_THEME, LIGHT_THEME} from '../../../../polaris-viz-core/src'; import {useTheme} from '../useTheme'; describe('useTheme', () => { @@ -12,7 +12,7 @@ describe('useTheme', () => { } const mockComponent = mount(); - expect(mockComponent.text()).toBe(JSON.stringify(DARK_THEME)); + expect(mockComponent.text()).toBe(JSON.stringify(LIGHT_THEME)); }); it('returns the theme defined in PolarisVizContext with the provided theme name', () => { @@ -32,9 +32,9 @@ describe('useTheme', () => { }); expect(mockComponent.text()).toBe( JSON.stringify({ - ...DARK_THEME, + ...LIGHT_THEME, chartContainer: { - ...DARK_THEME.chartContainer, + ...LIGHT_THEME.chartContainer, backgroundColor: 'Purple', }, }), diff --git a/packages/polaris-viz-core/src/utilities/ColorScale/ColorScale.test.ts b/packages/polaris-viz-core/src/utilities/ColorScale/ColorScale.test.ts index 6414989a2..1a14c6a88 100644 --- a/packages/polaris-viz-core/src/utilities/ColorScale/ColorScale.test.ts +++ b/packages/polaris-viz-core/src/utilities/ColorScale/ColorScale.test.ts @@ -38,7 +38,7 @@ describe('ColorScale', () => { it('returns light textColor for light hues', () => { const scale = ColorScale({hue: Hue.Blue, max: 16}); - expect(scale(8).textColor).toStrictEqual('#ffffff'); - expect(scale(11).textColor).toStrictEqual('#ffffff'); + expect(scale(8).textColor).toStrictEqual('rgb(255, 255, 255)'); + expect(scale(11).textColor).toStrictEqual('rgb(255, 255, 255)'); }); }); diff --git a/packages/polaris-viz-core/src/utilities/createThemes.ts b/packages/polaris-viz-core/src/utilities/createThemes.ts index d18e503ae..51c7a8c5e 100644 --- a/packages/polaris-viz-core/src/utilities/createThemes.ts +++ b/packages/polaris-viz-core/src/utilities/createThemes.ts @@ -1,5 +1,10 @@ import type {Theme, PartialTheme} from '../types'; -import {DARK_THEME, LIGHT_THEME, PRINT_THEME} from '../constants'; +import { + DARK_THEME, + DEFAULT_THEME_NAME, + LIGHT_THEME, + PRINT_THEME, +} from '../constants'; const BASE_THEMES: {[key: string]: Theme} = { Dark: DARK_THEME, @@ -9,7 +14,7 @@ const BASE_THEMES: {[key: string]: Theme} = { export const createTheme = ( theme: PartialTheme, - baseTheme = DARK_THEME, + baseTheme = BASE_THEMES[DEFAULT_THEME_NAME], ): Theme => { const themeKeys = Object.keys(baseTheme); diff --git a/packages/polaris-viz-core/src/utilities/tests/createThemes.test.ts b/packages/polaris-viz-core/src/utilities/tests/createThemes.test.ts index f29bc187d..ff9f51648 100644 --- a/packages/polaris-viz-core/src/utilities/tests/createThemes.test.ts +++ b/packages/polaris-viz-core/src/utilities/tests/createThemes.test.ts @@ -8,12 +8,12 @@ describe('createTheme', () => { borderRadius: 5, }, }); - expect(result).not.toStrictEqual(DARK_THEME); + expect(result).not.toStrictEqual(LIGHT_THEME); expect(result).toStrictEqual( expect.objectContaining({ bar: { - ...DARK_THEME.bar, + ...LIGHT_THEME.bar, borderRadius: 5, }, }), diff --git a/packages/polaris-viz/src/components/Annotations/components/ShowMoreAnnotationsButton/ShowMoreAnnotationsButton.test.tsx b/packages/polaris-viz/src/components/Annotations/components/ShowMoreAnnotationsButton/ShowMoreAnnotationsButton.test.tsx index 235f7a24d..0d522bfa3 100644 --- a/packages/polaris-viz/src/components/Annotations/components/ShowMoreAnnotationsButton/ShowMoreAnnotationsButton.test.tsx +++ b/packages/polaris-viz/src/components/Annotations/components/ShowMoreAnnotationsButton/ShowMoreAnnotationsButton.test.tsx @@ -1,4 +1,5 @@ import {mount} from '@shopify/react-testing'; +import {LIGHT_THEME} from '@shopify/polaris-viz-core'; import {SingleTextLine} from '../../../Labels'; @@ -62,7 +63,7 @@ describe('', () => { ); expect(chart).toContainReactComponent(SingleTextLine, { - color: '#dadadd', + color: LIGHT_THEME.annotations.textColor, text: 'Expand annotations (1)', targetWidth: 190, y: 6, @@ -150,7 +151,9 @@ describe('', () => { const path = chart.find('rect'); expect(path?.props.fill).toStrictEqual('transparent'); - expect(path?.props.stroke).toStrictEqual('#43434e'); + expect(path?.props.stroke).toStrictEqual( + LIGHT_THEME.annotations.backgroundColor, + ); }); it('renders filled when false', () => { @@ -165,8 +168,12 @@ describe('', () => { const path = chart.findAll('rect'); - expect(path[1]?.props.fill).toStrictEqual('#43434e'); - expect(path[1]?.props.stroke).toStrictEqual('#1f1f25'); + expect(path[1]?.props.fill).toStrictEqual( + LIGHT_THEME.annotations.backgroundColor, + ); + expect(path[1]?.props.stroke).toStrictEqual( + LIGHT_THEME.chartContainer.backgroundColor, + ); }); }); }); diff --git a/packages/polaris-viz/src/components/ComboChart/components/AxisLabel/AxisLabel.test.tsx b/packages/polaris-viz/src/components/ComboChart/components/AxisLabel/AxisLabel.test.tsx index 50603114a..225f1d4c4 100644 --- a/packages/polaris-viz/src/components/ComboChart/components/AxisLabel/AxisLabel.test.tsx +++ b/packages/polaris-viz/src/components/ComboChart/components/AxisLabel/AxisLabel.test.tsx @@ -1,4 +1,5 @@ import {mount} from '@shopify/react-testing'; +import {LIGHT_THEME} from '@shopify/polaris-viz-core'; import {SingleTextLine} from '../../../Labels'; @@ -11,7 +12,6 @@ jest.mock('../../../../hooks/useEstimateStringWidth', () => ({ })); const MOCK_PROPS: AxisLabelProps = { - containerWidth: 100, height: 100, name: 'Primary Axis', axis: 'primary', @@ -56,11 +56,11 @@ describe('', () => { expect(component).toContainReactComponent('rect', { width: 100, height: 14, - fill: '#1f1f25', + fill: LIGHT_THEME.chartContainer.backgroundColor, }); expect(component).toContainReactComponent(SingleTextLine, { - color: '#dadadd', + color: LIGHT_THEME.yAxis.labelColor, targetWidth: 100, text: 'Primary Axis', x: 0, diff --git a/packages/polaris-viz/src/hooks/tests/useHorizontalSeriesColors.test.tsx b/packages/polaris-viz/src/hooks/tests/useHorizontalSeriesColors.test.tsx index 8039815fd..9d58f190c 100644 --- a/packages/polaris-viz/src/hooks/tests/useHorizontalSeriesColors.test.tsx +++ b/packages/polaris-viz/src/hooks/tests/useHorizontalSeriesColors.test.tsx @@ -2,7 +2,7 @@ import {mount} from '@shopify/react-testing'; import type {DataSeries} from '@shopify/polaris-viz-core'; import {useHorizontalSeriesColors} from '../useHorizontalSeriesColors'; -import {DARK_THEME, LIGHT_THEME} from '../../constants'; +import {LIGHT_THEME} from '../../constants'; const DATA: DataSeries[] = [ { @@ -41,7 +41,7 @@ describe('useHorizontalSeriesColors()', () => { expect(data).toStrictEqual({ longestSeriesCount: 3, - seriesColors: [...DARK_THEME.seriesColors.upToEight].splice(0, 2), + seriesColors: [...LIGHT_THEME.seriesColors.upToEight].splice(0, 2), }); }); @@ -91,7 +91,7 @@ describe('useHorizontalSeriesColors()', () => { expect(data).toStrictEqual({ longestSeriesCount: 2, - seriesColors: ['red', DARK_THEME.seriesColors.upToEight[0]], + seriesColors: ['red', LIGHT_THEME.seriesColors.upToEight[0]], }); }); @@ -127,8 +127,8 @@ describe('useHorizontalSeriesColors()', () => { expect(data).toStrictEqual({ longestSeriesCount: 3, seriesColors: [ - DARK_THEME.seriesColors.single, - 'rgba(144, 176, 223, 0.6)', + LIGHT_THEME.seriesColors.single, + LIGHT_THEME.seriesColors.comparison, ], }); });