v1.0.0-light-theme-default-beta.1

Shopify · Apr 12, 2024 · cea66ab · cea66ab
1 parent 3345f08
commit cea66ab
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 35 deletions.
diff --git 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/...ages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx b/...ages/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,30 +45,30 @@ describe('<PolarisVizProvider />', () => {
         </PolarisVizProvider>,
       );
 
-      expect(vizProvider).toContainReactText(JSON.stringify(DARK_THEME));
+      expect(vizProvider).toContainReactText(JSON.stringify(LIGHT_THEME));
     });
 
     it('passes custom themes to children', () => {
       const vizProvider = mount(
         <PolarisVizProvider
           themes={{
-            Dark: {
+            Light: {
               bar: {
                 borderRadius: 3,
               },
             },
           }}
           animated={host.animated}
         >
-          <MockChild theme="Dark" />
+          <MockChild theme="Light" />
         </PolarisVizProvider>,
       );
 
       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
@@ -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
@@ -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(<TestComponent />);
-    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
@@ -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
@@ -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
@@ -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/...nents/Annotations/components/ShowMoreAnnotationsButton/ShowMoreAnnotationsButton.test.tsx b/...nents/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('<ShowMoreAnnotationsButton />', () => {
       );
 
       expect(chart).toContainReactComponent(SingleTextLine, {
-        color: '#dadadd',
+        color: LIGHT_THEME.annotations.textColor,
         text: 'Expand annotations (1)',
         targetWidth: 190,
         y: 6,
@@ -150,7 +151,9 @@ describe('<ShowMoreAnnotationsButton />', () => {
         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('<ShowMoreAnnotationsButton />', () => {
 
         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
@@ -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('<AxisLabel />', () => {
     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
@@ -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,
       ],
     });
   });