Change default theme to Light theme

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

Hide file tree

Showing 100 changed files with 555 additions and 471 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,10 +1,6 @@
 import {themes} from '@storybook/theming';
 import {PolarisVizProvider} from '@shopify/polaris-viz';
-import {
-  DEFAULT_THEME,
-  LIGHT_THEME,
-  UPLIFT_THEME,
-} from '../packages/polaris-viz/src/constants';
+import {DARK_THEME, LIGHT_THEME} from '../packages/polaris-viz/src/constants';
 import {useTheme} from '../packages/polaris-viz/src/hooks';
 
 // https://github.com/storybookjs/storybook/issues/548
@@ -26,7 +22,7 @@ const storiesOrder = {
     Hooks: null,
     Utilities: null,
     Themes: {
-      'Default Themes': null,
+      'Available Themes': null,
       Customizing: null,
       'createTheme Utility': null,
       'Theme Definition': {
@@ -134,14 +130,14 @@ export const decorators = [
     return (
       <PolarisVizProvider
         themes={{
-          Default: {
+          Dark: {
             chartContainer: {
               padding: '20px',
             },
             grid: {
               horizontalMargin:
                 context.parameters.horizontalMargin ??
-                DEFAULT_THEME.grid.horizontalMargin,
+                DARK_THEME.grid.horizontalMargin,
               horizontalOverflow: true,
             },
           },
@@ -150,11 +146,6 @@ export const decorators = [
               padding: '20px',
             },
           },
-          Uplift: {
-            chartContainer: {
-              padding: '20px',
-            },
-          },
           NoSpline: {
             line: {hasSpline: false},
           },

diff --git a/packages/polaris-viz-core/src/components/LineSeries/tests/LineSeries.test.tsx b/packages/polaris-viz-core/src/components/LineSeries/tests/LineSeries.test.tsx
@@ -8,7 +8,10 @@ import '@shopify/react-testing/matchers';
 import type {LineSeriesProps} from '../LineSeries';
 import {LineSeries} from '../LineSeries';
 import {Area} from '../components';
-import {SHAPE_ANIMATION_HEIGHT_BUFFER} from '../../../constants';
+import {
+  DEFAULT_THEME_NAME,
+  SHAPE_ANIMATION_HEIGHT_BUFFER,
+} from '../../../constants';
 
 const someScale = scaleLinear().domain([0, 100]).range([0, 100]);
 
@@ -30,7 +33,7 @@ const defaultProps: LineSeriesProps = {
   data: mockData,
   svgDimensions: {width: 100, height: 100},
   index: 0,
-  theme: 'Default',
+  theme: DEFAULT_THEME_NAME,
 };
 
 describe('<LineSeries />', () => {
@@ -52,7 +55,7 @@ describe('<LineSeries />', () => {
         </svg>,
         {
           themes: {
-            Default: {
+            [DEFAULT_THEME_NAME]: {
               line: {
                 width: 10,
               },
@@ -105,7 +108,7 @@ describe('<LineSeries />', () => {
           </svg>,
           {
             themes: {
-              Default: {
+              [DEFAULT_THEME_NAME]: {
                 seriesColors: {
                   comparison: 'red',
                 },
@@ -140,7 +143,7 @@ describe('<LineSeries />', () => {
           </svg>,
           {
             themes: {
-              Default: {
+              [DEFAULT_THEME_NAME]: {
                 line: {
                   hasSpline: false,
                 },

diff --git a/packages/polaris-viz-core/src/components/PolarisVizProvider/PolarisVizProvider.tsx b/packages/polaris-viz-core/src/components/PolarisVizProvider/PolarisVizProvider.tsx
@@ -7,10 +7,9 @@ import type {
   SvgComponents,
 } from '../../types';
 import {
-  DEFAULT_THEME as Default,
+  DARK_THEME as Dark,
   LIGHT_THEME as Light,
   PRINT_THEME as Print,
-  UPLIFT_THEME as Uplift,
   DEFAULT_COMPONENTS as DefaultComponents,
   DEFAULT_THEME_NAME,
 } from '../../constants';
@@ -41,10 +40,9 @@ export function PolarisVizProvider({
         ...components,
       },
       themes: createThemes({
-        Default,
+        Dark,
         Light,
         Print,
-        Uplift,
         ...themes,
       }),
       animated,

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
@@ -5,9 +5,13 @@ import {createHost} from '@react-spring/animated';
 import {usePolarisVizContext} from '../../../hooks';
 import {PolarisVizProvider} from '../PolarisVizProvider';
 import {PolarisVizContext} from '../../../contexts';
-import {DEFAULT_THEME, DEFAULT_COMPONENTS} from '../../../constants';
+import {
+  DARK_THEME,
+  DEFAULT_COMPONENTS,
+  DEFAULT_THEME_NAME,
+} from '../../../constants';
 
-const MockChild = ({theme = 'Default'}) => {
+const MockChild = ({theme = DEFAULT_THEME_NAME}) => {
   const {themes} = usePolarisVizContext();
   return <div>{JSON.stringify(themes[theme])}</div>;
 };
@@ -41,7 +45,7 @@ describe('<PolarisVizProvider />', () => {
         </PolarisVizProvider>,
       );
 
-      expect(vizProvider).toContainReactText(JSON.stringify(DEFAULT_THEME));
+      expect(vizProvider).toContainReactText(JSON.stringify(DARK_THEME));
     });
 
     it('passes custom themes to children', () => {
@@ -62,9 +66,9 @@ describe('<PolarisVizProvider />', () => {
 
       expect(vizProvider).toContainReactText(
         JSON.stringify({
-          ...DEFAULT_THEME,
+          ...DARK_THEME,
           bar: {
-            ...DEFAULT_THEME.bar,
+            ...DARK_THEME.bar,
             borderRadius: 3,
           },
         }),