From 3345f08b574fd9fbb28d2f2db628cfd52d58832b Mon Sep 17 00:00:00 2001
From: Matt Vickers <matthew.vickers@shopify.com>
Date: Fri, 12 Apr 2024 15:50:19 -0400
Subject: [PATCH 1/2] Change default theme to Light theme

---
 .storybook/preview.js                         |  17 +-
 .../LineSeries/tests/LineSeries.test.tsx      |  13 +-
 .../PolarisVizProvider/PolarisVizProvider.tsx |   6 +-
 .../tests/PolarisVizProvider.test.tsx         |  14 +-
 packages/polaris-viz-core/src/constants.ts    | 227 +++++++-----------
 .../src/contexts/PolarisVizContext.ts         |   6 +-
 .../hooks/tests/usePolarisVizContext.test.tsx |  23 +-
 .../src/hooks/tests/useSparkLine.test.tsx     |   7 +-
 .../src/hooks/tests/useTheme.test.tsx         |   8 +-
 packages/polaris-viz-core/src/index.ts        |   3 +-
 .../src/test-utilities/mountWithProvider.tsx  |   3 +-
 .../src/utilities/createTheme.ts              |   4 +-
 .../src/utilities/createThemes.ts             |  12 +-
 .../stories/getSeriesColors.stories.mdx       |   3 +-
 .../src/utilities/tests/createThemes.test.ts  |  24 +-
 .../stories/SparkBarChart.stories.tsx         |   2 +-
 .../stories/SparkLineChart.stories.tsx        |   2 +-
 .../src/test-utilities/mountWithProvider.tsx  |   3 +-
 packages/polaris-viz/CHANGELOG.md             |   8 +-
 .../stories/Themes.chromatic.stories.tsx      |  10 +-
 .../AnnotationContent.test.tsx                |   5 +-
 .../AnnotationLabel/AnnotationLabel.test.tsx  |   1 -
 .../AnnotationLine/AnnotationLine.test.tsx    |   1 -
 .../ShowMoreAnnotationsButton.test.tsx        |   1 -
 .../stories/HorizontalStacked.stories.tsx     |   3 +-
 .../InteractiveCustomLegend.stories.tsx       |   4 +-
 .../stories/NoOverflowStyle.stories.tsx       |   3 +-
 .../stories/WithRoundedCorners.stories.tsx    |   3 +-
 .../playground/ExternalTooltip.stories.tsx    |   2 +-
 ...StackedHorizontalLotsOfLegends.stories.tsx |   3 +-
 .../InteractiveCustomLegend.stories.tsx       |  10 +-
 .../ComboChart/tests/Chart.test.tsx           |   2 +-
 .../src/components/Crosshair/Crosshair.tsx    |   1 +
 .../Crosshair/tests/Crosshair.test.tsx        |  23 +-
 .../stories/CustomizingThemes.stories.mdx     |  21 +-
 .../Docs/stories/DefaultThemes.stories.mdx    |   6 +-
 .../Docs/stories/FormattingValues.stories.mdx |  13 +-
 .../Docs/stories/Labels.stories.mdx           |   2 +-
 .../Docs/stories/Legends.stories.mdx          |   2 +-
 .../Docs/stories/ThemeDefinition.stories.mdx  |   2 +-
 .../components/Docs/stories/arc.stories.mdx   |   9 +-
 .../Docs/stories/chartConainer.stories.mdx    |  13 +-
 .../MobileComponents/MobileComponents.tsx     |   4 +-
 .../stories/components/SampleComponents.tsx   |  16 +-
 .../WebComponents/WebComponents.tsx           |   2 +-
 .../stories/createThemeUtility.stories.mdx    |   2 +-
 .../Docs/stories/crosshair.stories.mdx        |   5 +-
 .../components/Docs/stories/grid.stories.mdx  |  17 +-
 .../Docs/stories/legend.stories.mdx           |   9 +-
 .../components/Docs/stories/line.stories.mdx  |   5 +-
 .../Docs/stories/seriesColors.stories.mdx     |  23 +-
 .../Docs/stories/tooltip.stories.mdx          |   5 +-
 .../components/Docs/stories/xaxis.stories.mdx |   9 +-
 .../components/Docs/stories/yaxis.stories.mdx |   5 +-
 .../DonutChart/stories/CustomArc.stories.tsx  |   3 +-
 .../InteractiveCustomLegend.stories.tsx       |   4 +-
 .../LoadingStateWithCustomArc.stories.tsx     |   4 +-
 .../stories/WithoutRoundedCorners.stories.tsx |   3 +-
 .../DonutChart/tests/DonutChart.test.tsx      |   2 +-
 .../HorizontalBarChart/tests/Chart.test.tsx   |  16 +-
 .../HorizontalGridLines.test.tsx              |   3 +-
 .../Labels/Labels.chromatic.stories.tsx       |   4 +-
 .../InteractiveCustomLegend.stories.tsx       |   4 +-
 .../playground/ExternalTooltip.stories.tsx    |   2 +-
 .../CustomLegend/tests/CustomLegend.test.tsx  |   2 +-
 .../CustomLegend/tests/CustomLegend.test.tsx  |   4 +-
 .../stories/Default.stories.tsx               |   1 -
 .../LineChartRelational/stories/data.tsx      |   6 +-
 .../PolarisVizProvider.chromatic.stories.tsx  |   9 +-
 .../InteractiveCustomLegend.stories.tsx       |   4 +-
 .../SimpleBarChart/tests/Chart.test.tsx       |  16 +-
 .../InteractiveCustomLegend.stories.tsx       |   4 +-
 .../SimpleNormalizedChart/stories/data.tsx    |   3 +-
 .../tests/Chart.test.tsx                      |  13 +-
 .../components/SparkBarChart/stories/data.tsx |   3 +-
 .../tests/SparkLineChart.test.tsx             |   6 +-
 .../Area/tests/AnimatedArea.test.tsx          |   6 +-
 .../StackedAreas/tests/StackedAreas.test.tsx  |   3 +-
 .../stories/ExternalTooltip.stories.tsx       |   2 +-
 .../InteractiveCustomLegend.stories.tsx       |   4 +-
 .../StackedAreaChart/tests/Chart.test.tsx     |   3 +-
 .../tests/StackedAreaChart.test.tsx           |   5 +-
 .../stories/NoSeriesName.stories.tsx          |   6 +-
 .../stories/NoSeriesNoTitle.stories.tsx       |   6 +-
 .../stories/PreviewIcons.stories.tsx          |   4 +-
 .../TooltipContent.chromatic.stories.tsx      |  24 +-
 .../TooltipContent/stories/data.tsx           |  12 +-
 .../TrendIndicator.chromatic.stories.tsx      |   2 +-
 .../src/components/YAxis/tests/YAxis.test.tsx |   7 +-
 .../shared/GradientDefs/GradientDefs.tsx      |   7 +-
 .../GroupLabel/tests/GroupLabel.test.tsx      |   1 -
 .../ZeroValueLine/ZeroValueLine.test.tsx      |   3 +-
 packages/polaris-viz/src/constants.ts         |   3 +-
 .../tests/useHorizontalSeriesColors.test.tsx  |   8 +-
 packages/polaris-viz/src/index.ts             |   3 +-
 .../polaris-viz/src/storybook/constants.ts    |   2 +-
 .../src/test-utilities/mountWithProvider.tsx  |   3 +-
 ...LinearTooltipContent.chromatic.stories.tsx |   3 +-
 .../tests/getTooltipContentRenderer.test.tsx  |   9 +-
 tests/setup/tests.ts                          | 157 ++++++++++--
 100 files changed, 555 insertions(+), 471 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 71c5168de..ec6ef7134 100644
--- 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
index 351af48cc..46185f471 100644
--- 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
index 589c05da8..63b544932 100644
--- 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/packages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx b/packages/polaris-viz-core/src/components/PolarisVizProvider/tests/PolarisVizProvider.test.tsx
index 12d20034a..2651b6840 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
@@ -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,
           },
         }),
diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts
index 00478185f..b6264910b 100644
--- a/packages/polaris-viz-core/src/constants.ts
+++ b/packages/polaris-viz-core/src/constants.ts
@@ -111,7 +111,7 @@ export const MASK_HIGHLIGHT_COLOR = '#ffffff';
 
 export const COLOR_VARIABLES = variables;
 
-export const DEFAULT_THEME_NAME = 'Default';
+export const DEFAULT_THEME_NAME = 'Light';
 
 export const NEUTRAL_SINGLE_GRADIENT = [
   {offset: 0, color: variables.colorIndigo90},
@@ -141,7 +141,7 @@ const DEFAULT_GROUP_LABEL_HIDE = false;
 
 const DEFAULT_CROSSHAIR_WIDTH = 1;
 
-export const DEFAULT_THEME: Theme = {
+export const DARK_THEME: Theme = {
   seriesColors: {
     empty: variables.colorGray140,
     comparison: variables.colorDarkComparison,
@@ -249,35 +249,93 @@ export const DEFAULT_THEME: Theme = {
   },
 };
 
+const LIGHT_BLUE = [
+  {offset: 0, color: '#079EE1'},
+  {offset: 100, color: '#2EB9F5'},
+];
+
+const INDIGO = [
+  {offset: 0, color: '#6A42E9'},
+  {offset: 100, color: '#8F71EF'},
+];
+
+const BLUE = [
+  {offset: 0, color: '#3E69EA'},
+  {offset: 100, color: '#7594F0'},
+];
+
+const MAGENTA = [
+  {offset: 0, color: '#D147AC'},
+  {offset: 100, color: '#DD76C1'},
+];
+
+const TEAL = [
+  {offset: 0, color: '#1D9595'},
+  {offset: 100, color: '#2CD2D2'},
+];
+
+const PURPLE = [
+  {offset: 0, color: '#A249DF'},
+  {offset: 100, color: '#BD7DE8'},
+];
+
+const OLIVE = [
+  {offset: 0, color: '#6F8405'},
+  {offset: 100, color: '#9DBB08'},
+];
+
+const ORANGE = [
+  {offset: 0, color: '#D77114'},
+  {offset: 100, color: '#EC882D'},
+];
+
+const LIGHT_BLUE_09_SOLID = 'rgba(19, 172, 240, 1)';
+const INDIGO_10_SOLID = 'rgba(86, 42, 228, 1)';
+const BLUE_07_SOLID = 'rgba(89, 126, 237, 1)';
+const MAGENTA_12_SOLID = 'rgba(155, 39, 124, 1)';
+const TEAL_11_SOLID = 'rgba(35, 186, 186, 1)';
+const PURPLE_11_SOLID = 'rgba(126, 33, 190, 1)';
+const OLIVE_13_SOLID = 'rgba(134, 159, 7, 1)';
+const ORANGE_14_SOLID = 'rgba(139, 68, 3, 1)';
+const INDIGIO_06_SOLID = 'rgba(158, 132, 242, 1)';
+const LIGHT_BLUE_12_SOLID = 'rgba(18, 138, 192, 1)';
+const MAGENTA_08_SOLID = 'rgba(215, 94, 183, 1)';
+const BLUE_13_SOLID = 'rgba(16, 50, 149, 1)';
+const PURPLE_07_SOLID = 'rgba(175, 99, 228, 1)';
+const TEAL_14_SOLID = 'rgba(21, 117, 117, 1)';
+const ORANGE_10_SOLID = 'rgba(228, 124, 29, 1)';
+const OLIVE_16_SOLID = 'rgba(64, 76, 3, 1)';
+
+const LIGHT_POSITIVE = '#29845A';
+const LIGHT_NEGATIVE = '#E51C00';
+const LIGHT_NEUTRAL = '#8A8A8A';
+
 export const LIGHT_THEME: Theme = {
   seriesColors: {
     empty: variables.colorGray20,
-    comparison: variables.colorLightComparison,
-    single: NEUTRAL_SINGLE_GRADIENT,
-    upToEight: [
-      createGradient(variables.colorIndigo70, variables.colorIndigo90),
-      createGradient(variables.colorBlue70, variables.colorBlue90),
-      createGradient(variables.colorMagenta70, variables.colorMagenta90),
-      createGradient(variables.colorTeal70, variables.colorTeal90),
-      createGradient(variables.colorPurple70, variables.colorPurple90),
-      createGradient(variables.colorOrange70, variables.colorOrange90),
-      createGradient(variables.colorYellow70, variables.colorYellow90),
+    comparison: '#0A97D5',
+    single: [
+      {offset: 0, color: '#0A97D5'},
+      {offset: 100, color: '#50C3F7'},
     ],
+    upToEight: [LIGHT_BLUE, INDIGO, BLUE, MAGENTA, TEAL, PURPLE, OLIVE, ORANGE],
     all: [
-      variables.colorTeal90,
-      variables.colorBlue70,
-      variables.colorIndigo90,
-      variables.colorPurple70,
-      variables.colorMagenta90,
-      variables.colorOrange80,
-      variables.colorYellow50,
-      variables.colorTeal70,
-      variables.colorBlue80,
-      variables.colorIndigo70,
-      variables.colorPurple90,
-      variables.colorMagenta70,
-      variables.colorOrange110,
-      variables.colorYellow70,
+      LIGHT_BLUE_09_SOLID,
+      INDIGO_10_SOLID,
+      BLUE_07_SOLID,
+      MAGENTA_12_SOLID,
+      TEAL_11_SOLID,
+      PURPLE_11_SOLID,
+      OLIVE_13_SOLID,
+      ORANGE_14_SOLID,
+      INDIGIO_06_SOLID,
+      LIGHT_BLUE_12_SOLID,
+      MAGENTA_08_SOLID,
+      BLUE_13_SOLID,
+      PURPLE_07_SOLID,
+      TEAL_14_SOLID,
+      ORANGE_10_SOLID,
+      OLIVE_16_SOLID,
     ],
   },
   tooltip: {
@@ -333,9 +391,9 @@ export const LIGHT_THEME: Theme = {
     labelColor: variables.colorGray100,
     backgroundColor: variables.colorGray10,
     trendIndicator: {
-      positive: variables.colorLightPositive,
-      negative: variables.colorLightNegative,
-      neutral: variables.colorLightNeutral,
+      positive: LIGHT_POSITIVE,
+      negative: LIGHT_NEGATIVE,
+      neutral: LIGHT_NEUTRAL,
     },
   },
   annotations: {
@@ -348,9 +406,9 @@ export const LIGHT_THEME: Theme = {
     pillOpacity: 1,
   },
   trendIndicator: {
-    positive: variables.colorLightPositive,
-    negative: variables.colorLightNegative,
-    neutral: variables.colorLightNeutral,
+    positive: LIGHT_POSITIVE,
+    negative: LIGHT_NEGATIVE,
+    neutral: LIGHT_NEUTRAL,
   },
   missingData: {
     lineColor: variables.colorGray40,
@@ -391,111 +449,6 @@ export const PRINT_THEME = {
   },
 };
 
-const LIGHT_BLUE = [
-  {offset: 0, color: '#079EE1'},
-  {offset: 100, color: '#2EB9F5'},
-];
-
-const INDIGO = [
-  {offset: 0, color: '#6A42E9'},
-  {offset: 100, color: '#8F71EF'},
-];
-
-const BLUE = [
-  {offset: 0, color: '#3E69EA'},
-  {offset: 100, color: '#7594F0'},
-];
-
-const MAGENTA = [
-  {offset: 0, color: '#D147AC'},
-  {offset: 100, color: '#DD76C1'},
-];
-
-const TEAL = [
-  {offset: 0, color: '#1D9595'},
-  {offset: 100, color: '#2CD2D2'},
-];
-
-const PURPLE = [
-  {offset: 0, color: '#A249DF'},
-  {offset: 100, color: '#BD7DE8'},
-];
-
-const OLIVE = [
-  {offset: 0, color: '#6F8405'},
-  {offset: 100, color: '#9DBB08'},
-];
-
-const ORANGE = [
-  {offset: 0, color: '#D77114'},
-  {offset: 100, color: '#EC882D'},
-];
-
-const LIGHT_BLUE_09_SOLID = 'rgba(19, 172, 240, 1)';
-const INDIGO_10_SOLID = 'rgba(86, 42, 228, 1)';
-const BLUE_07_SOLID = 'rgba(89, 126, 237, 1)';
-const MAGENTA_12_SOLID = 'rgba(155, 39, 124, 1)';
-const TEAL_11_SOLID = 'rgba(35, 186, 186, 1)';
-const PURPLE_11_SOLID = 'rgba(126, 33, 190, 1)';
-const OLIVE_13_SOLID = 'rgba(134, 159, 7, 1)';
-const ORANGE_14_SOLID = 'rgba(139, 68, 3, 1)';
-const INDIGIO_06_SOLID = 'rgba(158, 132, 242, 1)';
-const LIGHT_BLUE_12_SOLID = 'rgba(18, 138, 192, 1)';
-const MAGENTA_08_SOLID = 'rgba(215, 94, 183, 1)';
-const BLUE_13_SOLID = 'rgba(16, 50, 149, 1)';
-const PURPLE_07_SOLID = 'rgba(175, 99, 228, 1)';
-const TEAL_14_SOLID = 'rgba(21, 117, 117, 1)';
-const ORANGE_10_SOLID = 'rgba(228, 124, 29, 1)';
-const OLIVE_16_SOLID = 'rgba(64, 76, 3, 1)';
-
-const UPLIFT_POSITIVE = '#29845A';
-const UPLIFT_NEGATIVE = '#E51C00';
-const UPLIFT_NEUTRAL = '#8A8A8A';
-
-export const UPLIFT_THEME = {
-  ...LIGHT_THEME,
-  seriesColors: {
-    empty: variables.colorGray20,
-    comparison: '#0A97D5',
-    single: [
-      {offset: 0, color: '#0A97D5'},
-      {offset: 100, color: '#50C3F7'},
-    ],
-    upToEight: [LIGHT_BLUE, INDIGO, BLUE, MAGENTA, TEAL, PURPLE, OLIVE, ORANGE],
-    all: [
-      LIGHT_BLUE_09_SOLID,
-      INDIGO_10_SOLID,
-      BLUE_07_SOLID,
-      MAGENTA_12_SOLID,
-      TEAL_11_SOLID,
-      PURPLE_11_SOLID,
-      OLIVE_13_SOLID,
-      ORANGE_14_SOLID,
-      INDIGIO_06_SOLID,
-      LIGHT_BLUE_12_SOLID,
-      MAGENTA_08_SOLID,
-      BLUE_13_SOLID,
-      PURPLE_07_SOLID,
-      TEAL_14_SOLID,
-      ORANGE_10_SOLID,
-      OLIVE_16_SOLID,
-    ],
-  },
-  legend: {
-    ...LIGHT_THEME.legend,
-    trendIndicator: {
-      positive: UPLIFT_POSITIVE,
-      negative: UPLIFT_NEGATIVE,
-      neutral: UPLIFT_NEUTRAL,
-    },
-  },
-  trendIndicator: {
-    positive: UPLIFT_POSITIVE,
-    negative: UPLIFT_NEGATIVE,
-    neutral: UPLIFT_NEUTRAL,
-  },
-};
-
 export const STACKED_BAR_GAP = 2;
 export const COLOR_VISION_ACTIVE_OPACITY = 1;
 export const COLOR_VISION_FADED_OPACITY = 0.3;
diff --git a/packages/polaris-viz-core/src/contexts/PolarisVizContext.ts b/packages/polaris-viz-core/src/contexts/PolarisVizContext.ts
index 7cb208c57..fd117630a 100644
--- a/packages/polaris-viz-core/src/contexts/PolarisVizContext.ts
+++ b/packages/polaris-viz-core/src/contexts/PolarisVizContext.ts
@@ -3,9 +3,8 @@ import {createHost} from '@react-spring/animated';
 
 import type {ErrorBoundaryResponse, SvgComponents, Theme} from '../types';
 import {
-  DEFAULT_THEME as Default,
+  DARK_THEME as Dark,
   LIGHT_THEME as Light,
-  UPLIFT_THEME as Uplift,
   DEFAULT_COMPONENTS as DefaultComponents,
   DEFAULT_THEME_NAME,
 } from '../constants';
@@ -23,9 +22,8 @@ export const PolarisVizContext = createContext<{
   onError?: ErrorBoundaryResponse;
 }>({
   themes: {
-    Default,
+    Dark,
     Light,
-    Uplift,
   },
   components: {
     ...DefaultComponents,
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 0707e3f47..e93643e25 100644
--- a/packages/polaris-viz-core/src/hooks/tests/usePolarisVizContext.test.tsx
+++ b/packages/polaris-viz-core/src/hooks/tests/usePolarisVizContext.test.tsx
@@ -2,10 +2,10 @@ import {mount} from '@shopify/react-testing';
 
 import {mountWithProvider} from '../../test-utilities';
 import {
-  DEFAULT_THEME,
+  DARK_THEME,
+  DEFAULT_THEME_NAME,
   LIGHT_THEME,
   PRINT_THEME,
-  UPLIFT_THEME,
 } from '../../constants';
 import {usePolarisVizContext} from '../usePolarisVizContext';
 
@@ -20,9 +20,8 @@ describe('usePolarisVizContext', () => {
 
     expect(mockComponent.text()).toBe(
       JSON.stringify({
-        Default: DEFAULT_THEME,
+        Dark: DARK_THEME,
         Light: LIGHT_THEME,
-        Uplift: UPLIFT_THEME,
       }),
     );
   });
@@ -30,7 +29,7 @@ describe('usePolarisVizContext', () => {
   it('exposes the default values overwritten by PolarisVizProvider', () => {
     const mockComponent = mountWithProvider(<TestComponent />, {
       themes: {
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           chartContainer: {
             backgroundColor: 'purple',
           },
@@ -40,16 +39,15 @@ describe('usePolarisVizContext', () => {
 
     expect(mockComponent.text()).toBe(
       JSON.stringify({
-        Default: {
-          ...DEFAULT_THEME,
+        Dark: {
+          ...DARK_THEME,
           chartContainer: {
-            ...DEFAULT_THEME.chartContainer,
+            ...DARK_THEME.chartContainer,
             backgroundColor: 'purple',
           },
         },
         Light: LIGHT_THEME,
         Print: PRINT_THEME,
-        Uplift: UPLIFT_THEME,
       }),
     );
   });
@@ -67,14 +65,13 @@ describe('usePolarisVizContext', () => {
 
     expect(mockComponent.text()).toBe(
       JSON.stringify({
-        Default: DEFAULT_THEME,
+        Dark: DARK_THEME,
         Light: LIGHT_THEME,
         Print: PRINT_THEME,
-        Uplift: UPLIFT_THEME,
         SomeOtherTheme: {
-          ...DEFAULT_THEME,
+          ...DARK_THEME,
           chartContainer: {
-            ...DEFAULT_THEME.chartContainer,
+            ...DARK_THEME.chartContainer,
             backgroundColor: 'purple',
           },
         },
diff --git a/packages/polaris-viz-core/src/hooks/tests/useSparkLine.test.tsx b/packages/polaris-viz-core/src/hooks/tests/useSparkLine.test.tsx
index 6424908ef..a81068864 100644
--- a/packages/polaris-viz-core/src/hooks/tests/useSparkLine.test.tsx
+++ b/packages/polaris-viz-core/src/hooks/tests/useSparkLine.test.tsx
@@ -1,11 +1,6 @@
 import {mount} from '@shopify/react-testing';
 
-import {
-  mountWithProvider,
-  expectToThrow,
-  randomNumber,
-} from '../../test-utilities';
-import {DEFAULT_THEME} from '../../../../polaris-viz-core/src';
+import {randomNumber} from '../../test-utilities';
 import {useSparkLine} from '../useSparkLine';
 
 const generateSampleData = ({minValue, maxValue, length}) => {
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 f2ac0e36d..bf789215a 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 {DEFAULT_THEME} from '../../../../polaris-viz-core/src';
+import {DARK_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(DEFAULT_THEME));
+    expect(mockComponent.text()).toBe(JSON.stringify(DARK_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({
-        ...DEFAULT_THEME,
+        ...DARK_THEME,
         chartContainer: {
-          ...DEFAULT_THEME.chartContainer,
+          ...DARK_THEME.chartContainer,
           backgroundColor: 'Purple',
         },
       }),
diff --git a/packages/polaris-viz-core/src/index.ts b/packages/polaris-viz-core/src/index.ts
index 4fc1a04d5..81f034d05 100644
--- a/packages/polaris-viz-core/src/index.ts
+++ b/packages/polaris-viz-core/src/index.ts
@@ -8,7 +8,7 @@ export {
   DEFAULT_COMPONENTS,
   BAR_SPACING,
   DEFAULT_MAX_Y,
-  DEFAULT_THEME,
+  DARK_THEME,
   EMPTY_STATE_CHART_MAX,
   EMPTY_STATE_CHART_MIN,
   FONT_SIZE,
@@ -64,7 +64,6 @@ export {
   AREAS_TRANSITION_CONFIG,
   STROKE_DOT_ARRAY_WIDTH,
   EXTERNAL_EVENTS_SET_HIDDEN_ITEMS,
-  UPLIFT_THEME,
 } from './constants';
 export {
   clamp,
diff --git a/packages/polaris-viz-core/src/test-utilities/mountWithProvider.tsx b/packages/polaris-viz-core/src/test-utilities/mountWithProvider.tsx
index bb665345a..874c5d3ff 100644
--- a/packages/polaris-viz-core/src/test-utilities/mountWithProvider.tsx
+++ b/packages/polaris-viz-core/src/test-utilities/mountWithProvider.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {mount} from '@shopify/react-testing';
 
+import {DEFAULT_THEME_NAME} from '../constants';
 import type {PartialTheme} from '../types';
 import {PolarisVizProvider} from '../components';
 
@@ -22,7 +23,7 @@ export const mountWithProvider = (
 export const mockDefaultTheme = (overrides: PartialTheme) => {
   return {
     themes: {
-      Default: overrides,
+      [DEFAULT_THEME_NAME]: overrides,
     },
   };
 };
diff --git a/packages/polaris-viz-core/src/utilities/createTheme.ts b/packages/polaris-viz-core/src/utilities/createTheme.ts
index aa0078ece..93dab35b7 100644
--- a/packages/polaris-viz-core/src/utilities/createTheme.ts
+++ b/packages/polaris-viz-core/src/utilities/createTheme.ts
@@ -1,9 +1,9 @@
 import type {Theme, PartialTheme} from '../types';
-import {DEFAULT_THEME} from '../constants';
+import {LIGHT_THEME} from '../constants';
 
 export const createTheme = (
   theme: PartialTheme,
-  baseTheme = DEFAULT_THEME,
+  baseTheme = LIGHT_THEME,
 ): Theme => {
   const themeKeys = Object.keys(baseTheme);
 
diff --git a/packages/polaris-viz-core/src/utilities/createThemes.ts b/packages/polaris-viz-core/src/utilities/createThemes.ts
index b2c3ae912..d18e503ae 100644
--- a/packages/polaris-viz-core/src/utilities/createThemes.ts
+++ b/packages/polaris-viz-core/src/utilities/createThemes.ts
@@ -1,21 +1,15 @@
 import type {Theme, PartialTheme} from '../types';
-import {
-  DEFAULT_THEME,
-  LIGHT_THEME,
-  PRINT_THEME,
-  UPLIFT_THEME,
-} from '../constants';
+import {DARK_THEME, LIGHT_THEME, PRINT_THEME} from '../constants';
 
 const BASE_THEMES: {[key: string]: Theme} = {
-  Default: DEFAULT_THEME,
+  Dark: DARK_THEME,
   Light: LIGHT_THEME,
-  Uplift: UPLIFT_THEME,
   Print: PRINT_THEME,
 };
 
 export const createTheme = (
   theme: PartialTheme,
-  baseTheme = DEFAULT_THEME,
+  baseTheme = DARK_THEME,
 ): Theme => {
   const themeKeys = Object.keys(baseTheme);
 
diff --git a/packages/polaris-viz-core/src/utilities/stories/getSeriesColors.stories.mdx b/packages/polaris-viz-core/src/utilities/stories/getSeriesColors.stories.mdx
index 48b143d40..6286dc528 100644
--- a/packages/polaris-viz-core/src/utilities/stories/getSeriesColors.stories.mdx
+++ b/packages/polaris-viz-core/src/utilities/stories/getSeriesColors.stories.mdx
@@ -1,5 +1,6 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {
   Divider,
@@ -37,7 +38,7 @@ import {
 </p>
 
 ```tsx
-const seriesColors = getSeriesColors(1, 'Default');
+const seriesColors = getSeriesColors(1, DEFAULT_THEME_NAME);
 
 // [
 //   {
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 3b033d861..f29bc187d 100644
--- a/packages/polaris-viz-core/src/utilities/tests/createThemes.test.ts
+++ b/packages/polaris-viz-core/src/utilities/tests/createThemes.test.ts
@@ -1,5 +1,5 @@
 import {createTheme, createThemes} from '../';
-import {DEFAULT_THEME} from '../../constants';
+import {DARK_THEME, DEFAULT_THEME_NAME, LIGHT_THEME} from '../../constants';
 
 describe('createTheme', () => {
   it('generates a theme with default values, from the partial theme provided', () => {
@@ -8,12 +8,12 @@ describe('createTheme', () => {
         borderRadius: 5,
       },
     });
-    expect(result).not.toStrictEqual(DEFAULT_THEME);
+    expect(result).not.toStrictEqual(DARK_THEME);
 
     expect(result).toStrictEqual(
       expect.objectContaining({
         bar: {
-          ...DEFAULT_THEME.bar,
+          ...DARK_THEME.bar,
           borderRadius: 5,
         },
       }),
@@ -24,20 +24,20 @@ describe('createTheme', () => {
 describe('createThemes', () => {
   it('generates a record of themes with default values, from the partial themes provided', () => {
     const result = createThemes({
-      Default: {
+      [DEFAULT_THEME_NAME]: {
         bar: {
           borderRadius: 5,
         },
       },
     });
-    expect(result).not.toStrictEqual({Default: DEFAULT_THEME});
+    expect(result).not.toStrictEqual({[DEFAULT_THEME_NAME]: LIGHT_THEME});
 
     expect(result).toStrictEqual(
       expect.objectContaining({
-        Default: {
-          ...DEFAULT_THEME,
+        [DEFAULT_THEME_NAME]: {
+          ...LIGHT_THEME,
           bar: {
-            ...DEFAULT_THEME.bar,
+            ...LIGHT_THEME.bar,
             borderRadius: 5,
           },
         },
@@ -47,7 +47,7 @@ describe('createThemes', () => {
 
   it('generates a record with multiple custom themes', () => {
     const result = createThemes({
-      Default: DEFAULT_THEME,
+      [DEFAULT_THEME_NAME]: LIGHT_THEME,
       SomeTheme: {
         bar: {
           borderRadius: 0,
@@ -57,11 +57,11 @@ describe('createThemes', () => {
 
     expect(result).toStrictEqual(
       expect.objectContaining({
-        Default: DEFAULT_THEME,
+        [DEFAULT_THEME_NAME]: LIGHT_THEME,
         SomeTheme: {
-          ...DEFAULT_THEME,
+          ...LIGHT_THEME,
           bar: {
-            ...DEFAULT_THEME.bar,
+            ...LIGHT_THEME.bar,
             borderRadius: 0,
           },
         },
diff --git a/packages/polaris-viz-native/src/components/SparkBarChart/stories/SparkBarChart.stories.tsx b/packages/polaris-viz-native/src/components/SparkBarChart/stories/SparkBarChart.stories.tsx
index a2470d48f..c31ac5d83 100644
--- a/packages/polaris-viz-native/src/components/SparkBarChart/stories/SparkBarChart.stories.tsx
+++ b/packages/polaris-viz-native/src/components/SparkBarChart/stories/SparkBarChart.stories.tsx
@@ -4,7 +4,7 @@ import {SparkBarChart} from '../SparkBarChart';
 
 const THEME_CONTROL_ARGS = {
   description: 'The theme that the chart will inherit its styles from',
-  control: {type: 'select', options: ['Default', 'Light']},
+  control: {type: 'select', options: ['Dark', 'Light']},
 };
 
 export default {
diff --git a/packages/polaris-viz-native/src/components/SparkLineChart/stories/SparkLineChart.stories.tsx b/packages/polaris-viz-native/src/components/SparkLineChart/stories/SparkLineChart.stories.tsx
index 6fd7a24ef..cbba53a03 100644
--- a/packages/polaris-viz-native/src/components/SparkLineChart/stories/SparkLineChart.stories.tsx
+++ b/packages/polaris-viz-native/src/components/SparkLineChart/stories/SparkLineChart.stories.tsx
@@ -5,7 +5,7 @@ import type {SparkLineChartProps} from '../SparkLineChart';
 
 const THEME_CONTROL_ARGS = {
   description: 'The theme that the chart will inherit its styles from',
-  control: {type: 'select', options: ['Default', 'Light']},
+  control: {type: 'select', options: ['Dark', 'Light']},
 };
 
 const DATA = [
diff --git a/packages/polaris-viz-native/src/test-utilities/mountWithProvider.tsx b/packages/polaris-viz-native/src/test-utilities/mountWithProvider.tsx
index 790f67648..2e691855f 100644
--- a/packages/polaris-viz-native/src/test-utilities/mountWithProvider.tsx
+++ b/packages/polaris-viz-native/src/test-utilities/mountWithProvider.tsx
@@ -1,5 +1,6 @@
 import {createMount} from '@quilted/react-testing';
 import type {PartialTheme} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../components';
 
@@ -26,7 +27,7 @@ export const mountWithProvider = createMount<Options, Context>({
 export const mockDefaultTheme = (overrides: PartialTheme) => {
   return {
     themes: {
-      Default: overrides,
+      [DEFAULT_THEME_NAME]: overrides,
     },
   };
 };
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index a841d38ef..2e9c43a67 100644
--- a/packages/polaris-viz/CHANGELOG.md
+++ b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- **Breaking change** Changed default theme to `Light`.
+- **Breaking change** Removed `Uplift` theme.
+- **Breaking change** Renamed `Default` theme to `Dark`.
 
 ## [12.5.0] - 2024-04-04
 
diff --git a/packages/polaris-viz/src/chromatic/stories/Themes.chromatic.stories.tsx b/packages/polaris-viz/src/chromatic/stories/Themes.chromatic.stories.tsx
index a650e4713..d25cc422f 100644
--- a/packages/polaris-viz/src/chromatic/stories/Themes.chromatic.stories.tsx
+++ b/packages/polaris-viz/src/chromatic/stories/Themes.chromatic.stories.tsx
@@ -7,7 +7,7 @@ import {
   SparkLineChart,
   StackedAreaChart,
 } from '../../components';
-import {DEFAULT_THEME, LIGHT_THEME} from '@shopify/polaris-viz-core';
+import {DARK_THEME, LIGHT_THEME} from '@shopify/polaris-viz-core';
 
 const STORIES = [
   'Shared',
@@ -36,8 +36,8 @@ const COMPONENTS = {
   SparkBarChart: SparkBarChart,
 };
 
-const DEFAULT_THEMES = {
-  Default: DEFAULT_THEME,
+const THEMES = {
+  Dark: DARK_THEME,
   Light: LIGHT_THEME,
 };
 
@@ -108,7 +108,7 @@ const DATA = [
 STORIES.forEach((chart) => {
   VALUES_FOR_CHARTS[chart].forEach((themeProperty) => {
     Object.keys(THEME[themeProperty]).forEach((themeValue) => {
-      ['Default', 'Light'].forEach((themeName) => {
+      ['Dark', 'Light'].forEach((themeName) => {
         const stories = storiesOf(
           `Chromatic/Themes/${chart}/${themeName}/${themeProperty}`,
           module,
@@ -117,7 +117,7 @@ STORIES.forEach((chart) => {
         ['default', ...THEME[themeProperty][themeValue]].forEach((option) => {
           const value =
             option === 'default'
-              ? DEFAULT_THEMES[themeName][themeProperty][themeValue]
+              ? THEMES[themeName][themeProperty][themeValue]
               : option;
 
           stories.add(`${themeValue}: ${value}`, () => {
diff --git a/packages/polaris-viz/src/components/Annotations/components/AnnotationContent/AnnotationContent.test.tsx b/packages/polaris-viz/src/components/Annotations/components/AnnotationContent/AnnotationContent.test.tsx
index 03b2de5bc..5a887708a 100644
--- a/packages/polaris-viz/src/components/Annotations/components/AnnotationContent/AnnotationContent.test.tsx
+++ b/packages/polaris-viz/src/components/Annotations/components/AnnotationContent/AnnotationContent.test.tsx
@@ -1,6 +1,7 @@
 import {mount} from '@shopify/react-testing';
 
 import {useBrowserCheck} from '../../../../hooks/useBrowserCheck';
+import type {Annotation} from '../../../../types';
 
 import type {AnnotationContentProps} from './AnnotationContent';
 import {AnnotationContent} from './AnnotationContent';
@@ -27,7 +28,8 @@ jest.mock('@shopify/polaris-viz-core/src/hooks', () => ({
   }),
 }));
 
-const ANNOTATION = {
+const ANNOTATION: Annotation = {
+  axis: 'x',
   label: '',
   startKey: 0,
   endKey: 0,
@@ -54,7 +56,6 @@ const MOCK_PROPS: AnnotationContentProps = {
     y: 0,
   },
   tabIndex: 1,
-  theme: 'Default',
   x: 0,
   y: 0,
 };
diff --git a/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx b/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx
index e339e1aff..ba9f50dbf 100644
--- a/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx
+++ b/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx
@@ -29,7 +29,6 @@ const MOCK_PROPS: AnnotationLabelProps = {
   },
   setActiveIndex: jest.fn(),
   tabIndex: 0,
-  theme: 'Default',
 };
 
 describe('<AnnotationLabel />', () => {
diff --git a/packages/polaris-viz/src/components/Annotations/components/AnnotationLine/AnnotationLine.test.tsx b/packages/polaris-viz/src/components/Annotations/components/AnnotationLine/AnnotationLine.test.tsx
index 3266b1ce7..fdd2c2965 100644
--- a/packages/polaris-viz/src/components/Annotations/components/AnnotationLine/AnnotationLine.test.tsx
+++ b/packages/polaris-viz/src/components/Annotations/components/AnnotationLine/AnnotationLine.test.tsx
@@ -10,7 +10,6 @@ jest.mock('@shopify/polaris-viz-core/src/utilities', () => ({
 
 const MOCK_PROPS: AnnotationLineProps = {
   size: 100,
-  theme: 'Default',
   x: 10,
   y: 20,
   direction: 'vertical',
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 803c00fe4..235f7a24d 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
@@ -16,7 +16,6 @@ const MOCK_PROPS: Props = {
   isShowingAllAnnotations: false,
   onClick: jest.fn(),
   tabIndex: 0,
-  theme: 'Default',
   width: 200,
 };
 
diff --git a/packages/polaris-viz/src/components/BarChart/stories/HorizontalStacked.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/HorizontalStacked.stories.tsx
index 3b91da2ad..981dffa7e 100644
--- a/packages/polaris-viz/src/components/BarChart/stories/HorizontalStacked.stories.tsx
+++ b/packages/polaris-viz/src/components/BarChart/stories/HorizontalStacked.stories.tsx
@@ -6,6 +6,7 @@ import type {BarChartProps} from '../../../components';
 
 import {Template} from './data';
 import {PolarisVizProvider} from '../../PolarisVizProvider';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 export const HorizontalStacked: Story<BarChartProps> = (
   args: BarChartProps,
@@ -13,7 +14,7 @@ export const HorizontalStacked: Story<BarChartProps> = (
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           groupLabel: {
             hide: true,
           },
diff --git a/packages/polaris-viz/src/components/BarChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/InteractiveCustomLegend.stories.tsx
index 67b77e55b..d8d158fe0 100644
--- a/packages/polaris-viz/src/components/BarChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/BarChart/stories/InteractiveCustomLegend.stories.tsx
@@ -2,7 +2,7 @@ import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
 
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import type {BarChartProps} from '../../BarChart';
 import {SquareColorPreview} from '../../SquareColorPreview';
 
@@ -34,7 +34,7 @@ InteractiveCustomLegend.args = {
           {...getColorVisionEventAttrs(index)}
         >
           <SquareColorPreview
-            color={DEFAULT_THEME.seriesColors.upToEight[index]}
+            color={DARK_THEME.seriesColors.upToEight[index]}
           />
           {name}
         </li>
diff --git a/packages/polaris-viz/src/components/BarChart/stories/NoOverflowStyle.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/NoOverflowStyle.stories.tsx
index 070a963fb..5d4ee7594 100644
--- a/packages/polaris-viz/src/components/BarChart/stories/NoOverflowStyle.stories.tsx
+++ b/packages/polaris-viz/src/components/BarChart/stories/NoOverflowStyle.stories.tsx
@@ -6,12 +6,13 @@ import {BarChart, BarChartProps} from '../../../components';
 import {PolarisVizProvider} from '../../PolarisVizProvider';
 
 import {DEFAULT_DATA} from './data';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 const NoOverflowStyleTemplate: Story<BarChartProps> = (args: BarChartProps) => {
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           grid: {
             horizontalOverflow: false,
             verticalOverflow: false,
diff --git a/packages/polaris-viz/src/components/BarChart/stories/WithRoundedCorners.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/WithRoundedCorners.stories.tsx
index 33bc78c02..fe55730f9 100644
--- a/packages/polaris-viz/src/components/BarChart/stories/WithRoundedCorners.stories.tsx
+++ b/packages/polaris-viz/src/components/BarChart/stories/WithRoundedCorners.stories.tsx
@@ -6,6 +6,7 @@ import {BarChart, BarChartProps} from '../../../components';
 import {PolarisVizProvider} from '../../PolarisVizProvider';
 
 import {DEFAULT_DATA} from './data';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 const WithoutRoundedCornersTemplate: Story<BarChartProps> = (
   args: BarChartProps,
@@ -13,7 +14,7 @@ const WithoutRoundedCornersTemplate: Story<BarChartProps> = (
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           bar: {
             borderRadius: 0,
           },
diff --git a/packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx
index bfc89fa05..80eecb0fe 100644
--- a/packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx
+++ b/packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx
@@ -21,7 +21,7 @@ function Card(args: BarChartProps) {
         padding: 10,
       }}
     >
-      <BarChart {...args} theme="Uplift" />
+      <BarChart {...args} />
     </div>
   );
 }
diff --git a/packages/polaris-viz/src/components/BarChart/stories/playground/StackedHorizontalLotsOfLegends.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/playground/StackedHorizontalLotsOfLegends.stories.tsx
index 5204e8cb6..55fce7b87 100644
--- a/packages/polaris-viz/src/components/BarChart/stories/playground/StackedHorizontalLotsOfLegends.stories.tsx
+++ b/packages/polaris-viz/src/components/BarChart/stories/playground/StackedHorizontalLotsOfLegends.stories.tsx
@@ -6,6 +6,7 @@ import type {BarChartProps} from '../../../../components';
 
 import {Template} from '../data';
 import {PolarisVizProvider} from '../../../PolarisVizProvider';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 export default {
   ...META,
@@ -18,7 +19,7 @@ export const StackedHorizontalLotsOfLegends: Story<BarChartProps> = (
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           groupLabel: {
             hide: true,
           },
diff --git a/packages/polaris-viz/src/components/ComboChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/ComboChart/stories/InteractiveCustomLegend.stories.tsx
index 8052338d4..c355ea24a 100644
--- a/packages/polaris-viz/src/components/ComboChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/ComboChart/stories/InteractiveCustomLegend.stories.tsx
@@ -1,6 +1,6 @@
 import type {Story} from '@storybook/react';
 
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import type {ComboChartProps} from '../../ComboChart';
 import {LinePreview, SquareColorPreview} from '../..';
 
@@ -12,7 +12,7 @@ const LEGEND_ITEMS_DATA = [
   {
     name: 'POS',
     preview: (
-      <SquareColorPreview color={DEFAULT_THEME.seriesColors.upToEight[0]} />
+      <SquareColorPreview color={DARK_THEME.seriesColors.upToEight[0]} />
     ),
   },
   {
@@ -22,7 +22,7 @@ const LEGEND_ITEMS_DATA = [
   {
     name: 'Mobile',
     preview: (
-      <SquareColorPreview color={DEFAULT_THEME.seriesColors.upToEight[1]} />
+      <SquareColorPreview color={DARK_THEME.seriesColors.upToEight[1]} />
     ),
   },
   {
@@ -30,7 +30,7 @@ const LEGEND_ITEMS_DATA = [
     preview: (
       <LinePreview
         lineStyle="solid"
-        color={DEFAULT_THEME.seriesColors.upToEight[2]}
+        color={DARK_THEME.seriesColors.upToEight[2]}
       />
     ),
   },
@@ -39,7 +39,7 @@ const LEGEND_ITEMS_DATA = [
     preview: (
       <LinePreview
         lineStyle="dotted"
-        color={DEFAULT_THEME.seriesColors.comparison}
+        color={DARK_THEME.seriesColors.comparison}
       />
     ),
   },
diff --git a/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx
index a933ff7ae..e183b6209 100644
--- a/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx
@@ -70,7 +70,7 @@ const PROPS: ChartProps = {
   dimensions: {height: 400, width: 800},
   renderTooltipContent: () => null,
   showLegend: false,
-  theme: 'Default',
+  theme: 'Light',
   xAxisOptions: getXAxisOptionsWithDefaults(),
   seriesNameFormatter: (value) => `${value}`,
 };
diff --git a/packages/polaris-viz/src/components/Crosshair/Crosshair.tsx b/packages/polaris-viz/src/components/Crosshair/Crosshair.tsx
index 24ade7b2d..349ba3a4b 100644
--- a/packages/polaris-viz/src/components/Crosshair/Crosshair.tsx
+++ b/packages/polaris-viz/src/components/Crosshair/Crosshair.tsx
@@ -15,6 +15,7 @@ interface Props {
 
 export function Crosshair({x, height, opacity = 1, theme, id}: Props) {
   const selectedTheme = useTheme(theme);
+
   return (
     <animated.rect
       className={style.Crosshair}
diff --git a/packages/polaris-viz/src/components/Crosshair/tests/Crosshair.test.tsx b/packages/polaris-viz/src/components/Crosshair/tests/Crosshair.test.tsx
index 4827fda51..354a18983 100644
--- a/packages/polaris-viz/src/components/Crosshair/tests/Crosshair.test.tsx
+++ b/packages/polaris-viz/src/components/Crosshair/tests/Crosshair.test.tsx
@@ -1,4 +1,5 @@
 import {mount} from '@shopify/react-testing';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {mountWithProvider} from '../../../test-utilities';
 import {mockDefaultTheme} from '../../../test-utilities/mountWithProvider';
@@ -8,7 +9,7 @@ describe('<Crosshair />', () => {
   it('renders a rect centered on the given x', () => {
     const crosshair = mount(
       <svg>
-        <Crosshair x={50} height={500} />
+        <Crosshair {...MOCK_PROPS} x={50} />
       </svg>,
     );
 
@@ -18,7 +19,7 @@ describe('<Crosshair />', () => {
   it('renders a rect with the given height', () => {
     const crosshair = mount(
       <svg>
-        <Crosshair x={50} height={500} />
+        <Crosshair {...MOCK_PROPS} height={500} />
       </svg>,
     );
 
@@ -28,31 +29,31 @@ describe('<Crosshair />', () => {
   it('gives the rect full opacity by default', () => {
     const crosshair = mount(
       <svg>
-        <Crosshair x={50} height={500} />
+        <Crosshair {...MOCK_PROPS} />
       </svg>,
     );
 
     expect(crosshair).toContainReactComponent('rect', {
-      style: {opacity: 1, fill: '#9d9da5'},
+      style: expect.objectContaining({opacity: 1}),
     });
   });
 
   it('applies opacity from props to the rect', () => {
     const crosshair = mount(
       <svg>
-        <Crosshair x={50} height={500} opacity={0.8} />
+        <Crosshair {...MOCK_PROPS} opacity={0.8} />
       </svg>,
     );
 
     expect(crosshair).toContainReactComponent('rect', {
-      style: {opacity: 0.8, fill: '#9d9da5'},
+      style: expect.objectContaining({opacity: 0.8}),
     });
   });
 
   it('applies color from props to the rect', () => {
     const crosshair = mountWithProvider(
       <svg>
-        <Crosshair x={50} height={500} />
+        <Crosshair {...MOCK_PROPS} />
       </svg>,
       mockDefaultTheme({crossHair: {color: 'red'}}),
     );
@@ -65,7 +66,7 @@ describe('<Crosshair />', () => {
   it('applies width from props to the rect', () => {
     const crosshair = mountWithProvider(
       <svg>
-        <Crosshair x={50} height={500} />
+        <Crosshair {...MOCK_PROPS} />
       </svg>,
       mockDefaultTheme({crossHair: {width: 100}}),
     );
@@ -75,3 +76,9 @@ describe('<Crosshair />', () => {
     });
   });
 });
+
+const MOCK_PROPS = {
+  x: 0,
+  height: 200,
+  theme: DEFAULT_THEME_NAME,
+};
diff --git a/packages/polaris-viz/src/components/Docs/stories/CustomizingThemes.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/CustomizingThemes.stories.mdx
index fd4229eda..4fac7ecdf 100644
--- a/packages/polaris-viz/src/components/Docs/stories/CustomizingThemes.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/CustomizingThemes.stories.mdx
@@ -21,7 +21,7 @@ import {SPARKLINE_SERIES} from '../utilities';
 
 <PolarisVizProvider
     themes={{
-      Default: {
+      Dark: {
         chartContainer: {
           padding: '20px',
         }
@@ -60,13 +60,14 @@ The <code>PolarisVizProvider</code> allows you to:
 - Define multiple themes that can be used by each instance of your charts
 
 <Divider />
-<Title type="h3">Overwriting the Default theme</Title>
+<Title type="h3">Overwriting the theme</Title>
 
-<p>If you only have one style for all charts, overwrite the <code>
-Default
-
-</code> theme and those changes will be applied to all charts that are children
-of <code>PolarisVizProvider</code>, even if you don't explicitly pass anything to the <code>theme</code> prop</p>
+<p>
+  If you only have one style for all charts, overwrite the <code>Light</code>{' '}
+  theme and those changes will be applied to all charts that are children of{' '}
+  <code>PolarisVizProvider</code>, even if you don't explicitly pass anything to
+  the <code>theme</code> prop
+</p>
 
 ```js
 import {PolarisVizProvider, BarChart} from '@shopify/polaris-viz';
@@ -75,14 +76,14 @@ export const YourTopLevelComponent = () => {
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        Light: {
           chartContainer: {
             backgroundColor: 'darkblue',
           },
         },
       }}
     >
-      {/* 👇 Because the "Default" theme's backgroundColor is
+      {/* 👇 Because the "Light" theme's backgroundColor is
       overwritten; all charts inside <App /> will have a
       darkblue background color */}
       <App />
@@ -114,7 +115,7 @@ export const App = () => {
 >
   <PolarisVizProvider
     themes={{
-      Default: {
+      Light: {
         chartContainer: {
           backgroundColor: 'darkblue',
         },
diff --git a/packages/polaris-viz/src/components/Docs/stories/DefaultThemes.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/DefaultThemes.stories.mdx
index fafff8dfa..bd1efdefa 100644
--- a/packages/polaris-viz/src/components/Docs/stories/DefaultThemes.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/DefaultThemes.stories.mdx
@@ -22,7 +22,7 @@ import {ComponentContainer, Title, SampleBarChart} from './components';
   change the chart's appearance.
 </p>
 <p>
-  Out of the box, the library comes with a <code>Default</code>, a{' '}
+  Out of the box, the library comes with a <code>Dark</code>, a{' '}
   <code>Light</code> and a <code>Print</code> theme:
 </p>
 <div
@@ -37,10 +37,10 @@ import {ComponentContainer, Title, SampleBarChart} from './components';
     description={
       <>
         If nothing is passed to the chart's <code>theme</code> prop, it will use
-        the <code>Default</code> theme
+        the <code>Light</code> theme
       </>
     }
-    theme="Default"
+    theme="Light"
     chart={<SampleBarChart seriesLength={2} />}
     codeSample={'<BarChart />'}
   />
diff --git a/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx
index e73493e44..e7aee8ac1 100644
--- a/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx
@@ -7,6 +7,7 @@ import {
   Divider,
 } from './components';
 import {LineChart} from '../../LineChart';
+import {DEFAULT_THEME, DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 <Meta
   title="Shared/Formatting Values"
@@ -54,7 +55,7 @@ You can pass in a custom function to format the values on the axis.
   showLegend={false}
 />
     `}
-    theme="Light"
+    theme={DEFAULT_THEME_NAME}
     center
     chart={
       <div
@@ -68,7 +69,7 @@ You can pass in a custom function to format the values on the axis.
       >
         <PolarisVizProvider
           themes={{
-            Default: {
+            [DEFAULT_THEME_NAME]: {
               chartContainer: {
                 borderRadius: '0',
                 padding: '0',
@@ -78,7 +79,7 @@ You can pass in a custom function to format the values on the axis.
           }}
         >
           <LineChart
-            theme="Light"
+            theme={DEFAULT_THEME_NAME}
             yAxisOptions={{
               labelFormatter: (value) => {
                 return `${value} pickles`;
@@ -144,7 +145,7 @@ You can also pass in a custom functions to format all the information displayed
   showLegend={false}
 />
     `}
-    theme="Light"
+    theme={DEFAULT_THEME_NAME}
     center
     chart={
       <div
@@ -158,7 +159,7 @@ You can also pass in a custom functions to format all the information displayed
       >
         <PolarisVizProvider
           themes={{
-            Default: {
+            [DEFAULT_THEME]: {
               chartContainer: {
                 borderRadius: '0',
                 padding: '0',
@@ -168,7 +169,7 @@ You can also pass in a custom functions to format all the information displayed
           }}
         >
           <LineChart
-            theme="Light"
+            theme={DEFAULT_THEME_NAME}
             tooltipOptions={{
               titleFormatter: (value) => {
                 return `🗓 ${new Date(value).toLocaleDateString('en-US', {
diff --git a/packages/polaris-viz/src/components/Docs/stories/Labels.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/Labels.stories.mdx
index 7f97c1464..1991e50ce 100644
--- a/packages/polaris-viz/src/components/Docs/stories/Labels.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/Labels.stories.mdx
@@ -13,7 +13,7 @@ import {ComponentContainer, Title, SampleLabelsBarChart} from './components';
 
 <PolarisVizProvider
   themes={{
-    Default: {
+    Dark: {
       chartContainer: {
         padding: '20px',
       },
diff --git a/packages/polaris-viz/src/components/Docs/stories/Legends.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/Legends.stories.mdx
index f441e2ed0..ab706ea19 100644
--- a/packages/polaris-viz/src/components/Docs/stories/Legends.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/Legends.stories.mdx
@@ -20,7 +20,7 @@ import {
 
 <PolarisVizProvider
   themes={{
-    Default: {
+    Dark: {
       chartContainer: {
         padding: '20px',
       },
diff --git a/packages/polaris-viz/src/components/Docs/stories/ThemeDefinition.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/ThemeDefinition.stories.mdx
index 3c4b515ed..10269f34a 100644
--- a/packages/polaris-viz/src/components/Docs/stories/ThemeDefinition.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/ThemeDefinition.stories.mdx
@@ -25,7 +25,7 @@ import {
 
 <PolarisVizProvider
     themes={{
-      Default: {
+      Dark: {
         chartContainer: {
           padding: '20px',
         }
diff --git a/packages/polaris-viz/src/components/Docs/stories/arc.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/arc.stories.mdx
index 968179ff2..628515df0 100644
--- a/packages/polaris-viz/src/components/Docs/stories/arc.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/arc.stories.mdx
@@ -1,5 +1,6 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
 import dedent from 'ts-dedent';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -48,7 +49,7 @@ import {
   codeSample={dedent`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           arc: {
             borderRadius: 0,
             thickness: 10,
@@ -64,12 +65,12 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             arc: {
               cornerRadius: 0,
               thickness: 10,
-            }
-          }
+            },
+          },
         }}
       >
         <SampleDonutChart />
diff --git a/packages/polaris-viz/src/components/Docs/stories/chartConainer.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/chartConainer.stories.mdx
index ef8ea95fa..faa024036 100644
--- a/packages/polaris-viz/src/components/Docs/stories/chartConainer.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/chartConainer.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -45,7 +46,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           chartContainer: {
             borderRadius: '0',
             padding: '0',
@@ -57,13 +58,13 @@ import {
       <SparkLineChart series={data} />
     </PolarisVizProvider>
     `}
-  theme="Light"
+  theme={DEFAULT_THEME_NAME}
   center
   chart={
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             chartContainer: {
               borderRadius: '0',
               padding: '0',
@@ -82,7 +83,7 @@ import {
     codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           chartContainer: {
             borderRadius: '8px',
             padding: '20px',
@@ -94,12 +95,12 @@ import {
       <SparkLineChart series={data} />
     </PolarisVizProvider>
     `}
-    theme="Light"
+    theme={DEFAULT_THEME_NAME}
     center
     chart={
       <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           chartContainer: {
             borderRadius: '8px',
             padding: '20px',
diff --git a/packages/polaris-viz/src/components/Docs/stories/components/MobileComponents/MobileComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/MobileComponents/MobileComponents.tsx
index 4736df310..a6e13e444 100644
--- a/packages/polaris-viz/src/components/Docs/stories/components/MobileComponents/MobileComponents.tsx
+++ b/packages/polaris-viz/src/components/Docs/stories/components/MobileComponents/MobileComponents.tsx
@@ -1,3 +1,5 @@
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
+
 import {PolarisVizProvider} from '../../../../../';
 import {SparkLineChart, SparkBarChart} from '../../../../';
 import {ComponentContainer, Title} from '../';
@@ -15,7 +17,7 @@ export function MobileComponents() {
     >
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             chartContainer: {
               padding: '20px',
             },
diff --git a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
index 0919bd868..110088ea6 100644
--- a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
+++ b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
@@ -17,7 +17,7 @@ import {generateMultipleSeries} from '../../../Docs/utilities';
 
 import {SimpleContainer} from './SimpleContainer';
 
-export const SampleSparkLineChart = ({theme} = {theme: 'Default'}) => {
+export const SampleSparkLineChart = ({theme} = {theme: 'Light'}) => {
   return (
     <SparkLineChart
       theme={theme}
@@ -59,7 +59,7 @@ export const SampleSparkLineChart = ({theme} = {theme: 'Default'}) => {
 };
 
 export const SampleLineChart = (
-  {theme, showLegend = true} = {theme: 'Default'},
+  {theme, showLegend = true} = {theme: 'Light'},
 ) => {
   return (
     <LineChart
@@ -83,7 +83,7 @@ export const SampleLineChart = (
 };
 
 export const SampleBarChart = (
-  {theme, seriesLength = 3, showLegend = true} = {theme: 'Default'},
+  {theme, seriesLength = 3, showLegend = true} = {theme: 'Light'},
 ) => {
   return (
     <BarChart
@@ -95,7 +95,7 @@ export const SampleBarChart = (
 };
 
 export const SampleStackedAreaChart = (
-  {theme, seriesLength = 3, showLegend = true} = {theme: 'Default'},
+  {theme, seriesLength = 3, showLegend = true} = {theme: 'Light'},
 ) => {
   return (
     <StackedAreaChart
@@ -106,7 +106,7 @@ export const SampleStackedAreaChart = (
   );
 };
 
-export const SampleSimpleNormalizedChart = ({theme} = {theme: 'Default'}) => {
+export const SampleSimpleNormalizedChart = ({theme} = {theme: 'Light'}) => {
   return (
     <SimpleNormalizedChart
       direction="vertical"
@@ -154,7 +154,7 @@ export const SampleSimpleNormalizedChart = ({theme} = {theme: 'Default'}) => {
   );
 };
 
-export const SampleLegendChart = ({theme} = {theme: 'Default'}) => {
+export const SampleLegendChart = ({theme} = {theme: 'Light'}) => {
   const data: DataSeries[] = [
     {
       name: 'Breakfast',
@@ -201,7 +201,7 @@ export const SampleLegendChart = ({theme} = {theme: 'Default'}) => {
   );
 };
 
-export const SampleLegendContainer = ({theme} = {theme: 'Default'}) => {
+export const SampleLegendContainer = ({theme} = {theme: 'Light'}) => {
   const selectedTheme = useTheme(theme);
   const colors = getSeriesColors(6, selectedTheme);
   const {legend} = useLegend({
@@ -279,7 +279,7 @@ export const SampleLabelsBarChart = ({width = 760}: {width: number}) => {
   );
 };
 
-export const SampleDonutChart = ({theme} = {theme: 'Default'}) => {
+export const SampleDonutChart = ({theme} = {theme: 'Light'}) => {
   return (
     <DonutChart
       theme={theme}
diff --git a/packages/polaris-viz/src/components/Docs/stories/components/WebComponents/WebComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/WebComponents/WebComponents.tsx
index 2c817ea20..482e08761 100644
--- a/packages/polaris-viz/src/components/Docs/stories/components/WebComponents/WebComponents.tsx
+++ b/packages/polaris-viz/src/components/Docs/stories/components/WebComponents/WebComponents.tsx
@@ -28,7 +28,7 @@ export function WebComponents() {
     >
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             chartContainer: {
               padding: '20px',
             },
diff --git a/packages/polaris-viz/src/components/Docs/stories/createThemeUtility.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/createThemeUtility.stories.mdx
index de208ef2f..031ee1498 100644
--- a/packages/polaris-viz/src/components/Docs/stories/createThemeUtility.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/createThemeUtility.stories.mdx
@@ -14,7 +14,7 @@ import {BORDER_RADIUS} from '../../../../../polaris-viz-core/src/constants.ts';
 
 <PolarisVizProvider
     themes={{
-      Default: {
+      Dark: {
         chartContainer: {
           padding: '20px',
         }
diff --git a/packages/polaris-viz/src/components/Docs/stories/crosshair.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/crosshair.stories.mdx
index 7bd24f132..1770ff06e 100644
--- a/packages/polaris-viz/src/components/Docs/stories/crosshair.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/crosshair.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -51,7 +52,7 @@ import {
   codeSample={`
     <PolarisVizProvider
         themes={{
-          Default: {
+          ${DEFAULT_THEME_NAME}: {
             crossHair: {
               color: 'lime',
               width: 10,
@@ -67,7 +68,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             crossHair: {
               color: 'lime',
               width: 10,
diff --git a/packages/polaris-viz/src/components/Docs/stories/grid.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/grid.stories.mdx
index e78920b42..d205c2a1d 100644
--- a/packages/polaris-viz/src/components/Docs/stories/grid.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/grid.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -80,7 +81,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           grid: {
             showHorizontalLines: false,
           }
@@ -95,7 +96,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             grid: {
               showHorizontalLines: false,
             },
@@ -112,7 +113,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           grid: {
             showHorizontalLines: true,
           },
@@ -127,7 +128,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             grid: {},
           },
         }}
@@ -142,7 +143,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           grid: {
             showHorizontalLines: true,
             horizontalOverflow: false,
@@ -161,7 +162,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             grid: {
               showHorizontalLines: true,
               horizontalOverflow: false,
@@ -182,7 +183,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           grid: {
             showHorizontalLines: true,
             horizontalOverflow: true,
@@ -201,7 +202,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             grid: {
               showHorizontalLines: true,
               horizontalOverflow: true,
diff --git a/packages/polaris-viz/src/components/Docs/stories/legend.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/legend.stories.mdx
index 6784b2267..9625b304a 100644
--- a/packages/polaris-viz/src/components/Docs/stories/legend.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/legend.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -66,7 +67,7 @@ import {
   codeSample={`
     <PolarisVizProvider
         themes={{
-          Default: {
+          ${DEFAULT_THEME_NAME}: {
             legend: {
               labelColor: 'lime',
               valueColor: 'yellow',
@@ -82,7 +83,7 @@ import {
     <div style={{width: '320px', height: '250px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             chartContainer: {
               padding: '10px'
             },
@@ -102,7 +103,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           crossHair: {
             color: 'lime',
             width: 10,
@@ -121,7 +122,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             crossHair: {
               color: 'lime',
               width: 10,
diff --git a/packages/polaris-viz/src/components/Docs/stories/line.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/line.stories.mdx
index 60940f0db..f46e91ad2 100644
--- a/packages/polaris-viz/src/components/Docs/stories/line.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/line.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -62,7 +63,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           line: {
             hasSpline: false,
             style: 'dotted'
@@ -80,7 +81,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             line: {
               hasSpline: false,
               style: 'dotted',
diff --git a/packages/polaris-viz/src/components/Docs/stories/seriesColors.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/seriesColors.stories.mdx
index 55339c59b..e4ba76c29 100644
--- a/packages/polaris-viz/src/components/Docs/stories/seriesColors.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/seriesColors.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -31,7 +32,7 @@ import {
 
 `seriesColors` allows you to customize what colors the charts will use depending on how many data series are being displayed.
 
-The `Default` and `Light` themes that come with the library out of the box use gradients for charts with up to 7 data series, but use
+The `Dark` and `${DEFAULT_THEME_NAME}` themes that come with the library out of the box use gradients for charts with up to 7 data series, but use
 solid colors for charts with more. The `Color` type accepts a gradient definition or any valid CSS string color:
 
 ```ts
@@ -96,7 +97,7 @@ export interface GradientStop {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           seriesColors: {
             single: 'lime',
           },
@@ -111,7 +112,7 @@ export interface GradientStop {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             seriesColors: {
               single: 'lime',
             },
@@ -127,7 +128,7 @@ export interface GradientStop {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           seriesColors: {
             upToEight: [
               'yellow',
@@ -147,7 +148,7 @@ export interface GradientStop {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             seriesColors: {
               upToEight: ['yellow', 'lime', 'aqua', 'Teal'],
             },
@@ -163,7 +164,7 @@ export interface GradientStop {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           all: {
             all: [
               'magenta',
@@ -186,7 +187,7 @@ export interface GradientStop {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             seriesColors: {
               all: [
                 'magenta',
@@ -211,7 +212,7 @@ export interface GradientStop {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           all: {
             all: [
               'GreenYellow',
@@ -238,7 +239,7 @@ export interface GradientStop {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             seriesColors: {
               all: [
                 'GreenYellow',
@@ -267,7 +268,7 @@ export interface GradientStop {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           seriesColors: {
             comparison: 'lime',
           },
@@ -282,7 +283,7 @@ export interface GradientStop {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             seriesColors: {
               comparison: 'lime',
             },
diff --git a/packages/polaris-viz/src/components/Docs/stories/tooltip.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/tooltip.stories.mdx
index bfae1f81d..60cbd28cb 100644
--- a/packages/polaris-viz/src/components/Docs/stories/tooltip.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/tooltip.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -50,7 +51,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           tooltip: {
             backgroundColor: 'MidnightBlue',
             valueColor: 'yellow',
@@ -67,7 +68,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             tooltip: {
               backgroundColor: 'MidnightBlue',
               valueColor: 'yellow',
diff --git a/packages/polaris-viz/src/components/Docs/stories/xaxis.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/xaxis.stories.mdx
index 1d160ce87..6a8ea72db 100644
--- a/packages/polaris-viz/src/components/Docs/stories/xaxis.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/xaxis.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -61,7 +62,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           xAxis: {
             labelColor: 'lime',
           }
@@ -76,7 +77,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             xAxis: {
               labelColor: 'lime',
             },
@@ -93,7 +94,7 @@ import {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           xAxis: {
             hide: true,
           }
@@ -108,7 +109,7 @@ import {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             xAxis: {
               hide: true,
             },
diff --git a/packages/polaris-viz/src/components/Docs/stories/yaxis.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/yaxis.stories.mdx
index fe29f1ba0..ce51c963a 100644
--- a/packages/polaris-viz/src/components/Docs/stories/yaxis.stories.mdx
+++ b/packages/polaris-viz/src/components/Docs/stories/yaxis.stories.mdx
@@ -1,4 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../../';
 import {
@@ -84,7 +85,7 @@ export interface Theme {
   codeSample={`
     <PolarisVizProvider
       themes={{
-        Default: {
+        ${DEFAULT_THEME_NAME}: {
           yAxis: {
             labelColor: 'lime',
             backgroundColor: 'black'
@@ -100,7 +101,7 @@ export interface Theme {
     <div style={{width: '350px', height: '140px'}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             yAxis: {
               labelColor: 'lime',
               backgroundColor: 'black',
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/CustomArc.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/CustomArc.stories.tsx
index 0568f4ff7..2c647d5d2 100644
--- a/packages/polaris-viz/src/components/DonutChart/stories/CustomArc.stories.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/stories/CustomArc.stories.tsx
@@ -7,13 +7,14 @@ import {DonutChart} from '../DonutChart';
 import type {DonutChartProps} from '../DonutChart';
 
 import {DEFAULT_DATA, DEFAULT_PROPS} from './data';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 const CustomArcTemplate: StoryFn<DonutChartProps> = (args: DonutChartProps) => {
   return (
     <div style={{width: 550, height: 400}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             arc: {
               cornerRadius: 5,
               thickness: 18,
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/InteractiveCustomLegend.stories.tsx
index aecb638bc..04aa6bf94 100644
--- a/packages/polaris-viz/src/components/DonutChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/stories/InteractiveCustomLegend.stories.tsx
@@ -2,7 +2,7 @@ import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
 
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import type {DonutChartProps} from '../../DonutChart';
 import {SquareColorPreview} from '../../SquareColorPreview';
 
@@ -36,7 +36,7 @@ InteractiveCustomLegend.args = {
           {...getColorVisionEventAttrs(index)}
         >
           <SquareColorPreview
-            color={DEFAULT_THEME.seriesColors.upToEight[index]}
+            color={DARK_THEME.seriesColors.upToEight[index]}
           />
           {name}
         </li>
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/LoadingStateWithCustomArc.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/LoadingStateWithCustomArc.stories.tsx
index d8a6a29d1..3e6ff836b 100644
--- a/packages/polaris-viz/src/components/DonutChart/stories/LoadingStateWithCustomArc.stories.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/stories/LoadingStateWithCustomArc.stories.tsx
@@ -1,4 +1,4 @@
-import {ChartState} from '@shopify/polaris-viz-core';
+import {ChartState, DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 import type {Story, StoryFn} from '@storybook/react';
 
 export {META as default} from './meta';
@@ -16,7 +16,7 @@ const LoadingStateWithCustomArcTemplate: StoryFn<DonutChartProps> = (
     <div style={{width: 550, height: 400}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             arc: {
               cornerRadius: 5,
               thickness: 25,
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/WithoutRoundedCorners.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/WithoutRoundedCorners.stories.tsx
index 29f50cbeb..ef98b448b 100644
--- a/packages/polaris-viz/src/components/DonutChart/stories/WithoutRoundedCorners.stories.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/stories/WithoutRoundedCorners.stories.tsx
@@ -7,6 +7,7 @@ import {DonutChart} from '../DonutChart';
 import type {DonutChartProps} from '../DonutChart';
 
 import {DEFAULT_DATA, DEFAULT_PROPS} from './data';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 const WithoutRoundedCornersTemplate: StoryFn<DonutChartProps> = (
   args: DonutChartProps,
@@ -15,7 +16,7 @@ const WithoutRoundedCornersTemplate: StoryFn<DonutChartProps> = (
     <div style={{width: 550, height: 400}}>
       <PolarisVizProvider
         themes={{
-          Default: {
+          [DEFAULT_THEME_NAME]: {
             arc: {
               cornerRadius: 0,
             },
diff --git a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
index dbdfdf782..a944a9bb7 100644
--- a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
@@ -21,7 +21,7 @@ describe('<DonutChart />', () => {
   describe('<Chart/>', () => {
     const mockProps: ChartProps = {
       showLegend: true,
-      theme: `Default`,
+      theme: `Light`,
       labelFormatter: (value) => `${value}`,
       dimensions: {width: 500, height: 500},
       data: [
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx
index eeacc0eee..f031579ff 100644
--- a/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx
@@ -1,5 +1,6 @@
 import {mount} from '@shopify/react-testing';
 import type {DataSeries} from '@shopify/polaris-viz-core';
+import {LIGHT_THEME} from '@shopify/polaris-viz-core';
 
 import {HorizontalBarChartXAxisLabels} from '../../../components/HorizontalBarChartXAxisLabels';
 import {LegendContainer} from '../../LegendContainer';
@@ -98,14 +99,8 @@ describe('<Chart />', () => {
         const defs = chart.find(GradientDefs);
 
         expect(defs?.props.seriesColors).toStrictEqual([
-          [
-            {color: '#7f4afa', offset: 0},
-            {color: '#997afc', offset: 100},
-          ],
-          [
-            {color: '#3672bb', offset: 0},
-            {color: '#4b92e5', offset: 100},
-          ],
+          LIGHT_THEME.seriesColors.upToEight[0],
+          LIGHT_THEME.seriesColors.upToEight[1],
         ]);
       });
 
@@ -136,10 +131,7 @@ describe('<Chart />', () => {
 
         expect(defs?.props.seriesColors).toStrictEqual([
           'red',
-          [
-            {color: '#7f4afa', offset: 0},
-            {color: '#997afc', offset: 100},
-          ],
+          LIGHT_THEME.seriesColors.upToEight[0],
         ]);
       });
     });
diff --git a/packages/polaris-viz/src/components/HorizontalGridLines/HorizontalGridLines.test.tsx b/packages/polaris-viz/src/components/HorizontalGridLines/HorizontalGridLines.test.tsx
index e3d1deadd..5fc2d10ed 100644
--- a/packages/polaris-viz/src/components/HorizontalGridLines/HorizontalGridLines.test.tsx
+++ b/packages/polaris-viz/src/components/HorizontalGridLines/HorizontalGridLines.test.tsx
@@ -10,7 +10,6 @@ const MOCK_PROPS: Props = {
   ticks: [],
   transform: {x: 10, y: 20},
   width: 100,
-  theme: 'Default',
 };
 
 describe('<HorizontalGridLines />', () => {
@@ -47,7 +46,7 @@ describe('<HorizontalGridLines />', () => {
       expect(actual).toContainReactComponent('line', {
         x2: 100,
         transform: `translate(10,20)`,
-        stroke: '#43434e',
+        stroke: '#eeeeef',
       });
     });
 
diff --git a/packages/polaris-viz/src/components/Labels/Labels.chromatic.stories.tsx b/packages/polaris-viz/src/components/Labels/Labels.chromatic.stories.tsx
index c79435505..1146d11cb 100644
--- a/packages/polaris-viz/src/components/Labels/Labels.chromatic.stories.tsx
+++ b/packages/polaris-viz/src/components/Labels/Labels.chromatic.stories.tsx
@@ -1,7 +1,7 @@
 import {storiesOf} from '@storybook/react';
 
 import {XAxis} from '../XAxis';
-import {ChartContext} from '@shopify/polaris-viz-core';
+import {ChartContext, DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import characterWidths from '../../data/character-widths.json';
 import characterWidthOffsets from '../../data/character-width-offsets.json';
@@ -100,7 +100,7 @@ function Wrapper({storyName, chartWidth, children}) {
             characterWidthOffsets,
             id: '',
             isPerformanceImpacted: false,
-            theme: 'Default',
+            theme: DEFAULT_THEME_NAME,
           }}
         >
           {children}
diff --git a/packages/polaris-viz/src/components/LineChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/LineChart/stories/InteractiveCustomLegend.stories.tsx
index 012b05b5b..61e2f8aa9 100644
--- a/packages/polaris-viz/src/components/LineChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/LineChart/stories/InteractiveCustomLegend.stories.tsx
@@ -3,7 +3,7 @@ import type {Story} from '@storybook/react';
 export {META as default} from './meta';
 
 import {LinePreview} from '../../..';
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import type {LineChartProps} from '../..';
 
 import {DEFAULT_DATA, DEFAULT_PROPS, Template} from './data';
@@ -36,7 +36,7 @@ InteractiveCustomLegend.args = {
           <LinePreview
             lineStyle={isComparison ? 'dotted' : 'solid'}
             color={
-              DEFAULT_THEME.seriesColors[isComparison ? 'comparison' : 'single']
+              DARK_THEME.seriesColors[isComparison ? 'comparison' : 'single']
             }
           />
           {name}
diff --git a/packages/polaris-viz/src/components/LineChart/stories/playground/ExternalTooltip.stories.tsx b/packages/polaris-viz/src/components/LineChart/stories/playground/ExternalTooltip.stories.tsx
index 4b77c6941..4c81ce922 100644
--- a/packages/polaris-viz/src/components/LineChart/stories/playground/ExternalTooltip.stories.tsx
+++ b/packages/polaris-viz/src/components/LineChart/stories/playground/ExternalTooltip.stories.tsx
@@ -21,7 +21,7 @@ function Card(args: LineChartProps) {
         padding: 10,
       }}
     >
-      <LineChart {...args} theme="Uplift" />
+      <LineChart {...args} />
     </div>
   );
 }
diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/tests/CustomLegend.test.tsx b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/tests/CustomLegend.test.tsx
index 2f959ad0b..950a75277 100644
--- a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/tests/CustomLegend.test.tsx
+++ b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/tests/CustomLegend.test.tsx
@@ -28,7 +28,7 @@ const MOCK_PROPS: Props = {
   ],
   predictiveSeriesNames: [],
   seriesNameFormatter: (value) => `${value}`,
-  theme: 'Default',
+  theme: 'Light',
   getColorVisionEventAttrs: jest.fn(),
   getColorVisionStyles: jest.fn(),
 };
diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx
index bef892cf3..abc9fa71c 100644
--- a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx
+++ b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx
@@ -1,5 +1,5 @@
 import {mount} from '@shopify/react-testing';
-import type {DataSeries} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import type {Props} from '../CustomLegend';
 import {CustomLegend} from '../CustomLegend';
@@ -48,7 +48,7 @@ const MOCK_PROPS: Props = {
     },
   ],
   seriesNameFormatter: (value) => `${value}`,
-  theme: 'Default',
+  theme: DEFAULT_THEME_NAME,
   getColorVisionEventAttrs: jest.fn(),
   getColorVisionStyles: jest.fn(),
 };
diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx
index 42836b1cf..28f0fb048 100644
--- a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx
+++ b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx
@@ -12,5 +12,4 @@ Default.args = {
   data: DEFAULT_DATA,
   isAnimated: false,
   showLegend: true,
-  theme: 'Uplift',
 };
diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx
index 7cdc7150b..79b126533 100644
--- a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx
+++ b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx
@@ -1,7 +1,7 @@
 import type {Story} from '@storybook/react';
 import type {RenderTooltipContentData} from 'types';
 import type {DataSeries} from '@shopify/polaris-viz-core';
-import {UPLIFT_THEME} from '@shopify/polaris-viz-core';
+import {LIGHT_THEME} from '@shopify/polaris-viz-core';
 import type {LineChartProps} from 'components/LineChart/LineChart';
 
 import {LineChartRelational} from '../LineChartRelational';
@@ -81,7 +81,7 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 849, key: '2020-03-13T12:00:00'},
       {value: 129, key: '2020-03-14T12:00:00'},
     ],
-    color: UPLIFT_THEME.seriesColors.upToEight[0],
+    color: LIGHT_THEME.seriesColors.upToEight[0],
   },
   {
     name: '75th Percentile',
@@ -131,7 +131,7 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 623, key: '2020-03-13T12:00:00'},
       {value: 21, key: '2020-03-14T12:00:00'},
     ],
-    color: UPLIFT_THEME.seriesColors.upToEight[5],
+    color: LIGHT_THEME.seriesColors.upToEight[5],
     styleOverride: {
       line: {
         hasArea: false,
diff --git a/packages/polaris-viz/src/components/PolarisVizProvider/stories/PolarisVizProvider.chromatic.stories.tsx b/packages/polaris-viz/src/components/PolarisVizProvider/stories/PolarisVizProvider.chromatic.stories.tsx
index 1e04a0d79..a34b0477d 100644
--- a/packages/polaris-viz/src/components/PolarisVizProvider/stories/PolarisVizProvider.chromatic.stories.tsx
+++ b/packages/polaris-viz/src/components/PolarisVizProvider/stories/PolarisVizProvider.chromatic.stories.tsx
@@ -10,6 +10,7 @@ import {SparkBarChart} from '../../SparkBarChart';
 import {SparkLineChart} from '../../SparkLineChart';
 import {StackedAreaChart} from '../../StackedAreaChart';
 import {PolarisVizProvider} from '../PolarisVizProvider';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 export default {
   title: `chromatic/PolarisVizProvider/Chromatic`,
@@ -133,18 +134,18 @@ DefaultTheme.args = {};
 export const OverideDefaultTheme: Story = Template.bind({});
 
 OverideDefaultTheme.args = {
-  theme: 'Uplift',
+  theme: 'Dark',
 };
 
 export const DefaultThemeWithSingle: Story = Template.bind({});
 
 DefaultThemeWithSingle.args = {
-  singleTheme: 'Light',
+  singleTheme: DEFAULT_THEME_NAME,
 };
 
 export const OverideDefaultThemeWithSingle: Story = Template.bind({});
 
 OverideDefaultThemeWithSingle.args = {
-  theme: 'Uplift',
-  singleTheme: 'Default',
+  theme: 'Dark',
+  singleTheme: DEFAULT_THEME_NAME,
 };
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/SimpleBarChart/stories/InteractiveCustomLegend.stories.tsx
index beb7dd8fe..4d9464b36 100644
--- a/packages/polaris-viz/src/components/SimpleBarChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/SimpleBarChart/stories/InteractiveCustomLegend.stories.tsx
@@ -2,7 +2,7 @@ import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
 
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import type {SimpleBarChartProps} from '..';
 import {SquareColorPreview} from '../../SquareColorPreview';
 
@@ -34,7 +34,7 @@ InteractiveCustomLegend.args = {
           {...getColorVisionEventAttrs(index)}
         >
           <SquareColorPreview
-            color={DEFAULT_THEME.seriesColors.upToEight[index]}
+            color={DARK_THEME.seriesColors.upToEight[index]}
           />
           {name}
         </li>
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx
index 44f1492b1..7ffd54d40 100644
--- a/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx
@@ -1,5 +1,6 @@
 import {mount} from '@shopify/react-testing';
 import type {DataSeries} from '@shopify/polaris-viz-core';
+import {LIGHT_THEME} from '@shopify/polaris-viz-core';
 
 import type {ChartProps} from '../Chart';
 import {Chart} from '../Chart';
@@ -80,14 +81,8 @@ describe('<Chart />', () => {
         const defs = chart.find(GradientDefs);
 
         expect(defs?.props.seriesColors).toStrictEqual([
-          [
-            {color: '#7f4afa', offset: 0},
-            {color: '#997afc', offset: 100},
-          ],
-          [
-            {color: '#3672bb', offset: 0},
-            {color: '#4b92e5', offset: 100},
-          ],
+          LIGHT_THEME.seriesColors.upToEight[0],
+          LIGHT_THEME.seriesColors.upToEight[1],
         ]);
       });
 
@@ -118,10 +113,7 @@ describe('<Chart />', () => {
 
         expect(defs?.props.seriesColors).toStrictEqual([
           'red',
-          [
-            {color: '#7f4afa', offset: 0},
-            {color: '#997afc', offset: 100},
-          ],
+          LIGHT_THEME.seriesColors.upToEight[0],
         ]);
       });
     });
diff --git a/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/InteractiveCustomLegend.stories.tsx
index 52c574cd5..9c87ceb66 100644
--- a/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/InteractiveCustomLegend.stories.tsx
@@ -2,7 +2,7 @@ import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
 
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import type {SimpleNormalizedChartProps} from '../../SimpleNormalizedChart';
 import {SquareColorPreview} from '../../SquareColorPreview';
 
@@ -38,7 +38,7 @@ InteractiveCustomLegend.args = {
           {...getColorVisionEventAttrs(index)}
         >
           <SquareColorPreview
-            color={DEFAULT_THEME.seriesColors.upToEight[index]}
+            color={DARK_THEME.seriesColors.upToEight[index]}
           />
           {name}
         </li>
diff --git a/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/data.tsx b/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/data.tsx
index 2ce7ce844..8c628b6de 100644
--- a/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/data.tsx
+++ b/packages/polaris-viz/src/components/SimpleNormalizedChart/stories/data.tsx
@@ -1,5 +1,6 @@
 import type {Story} from '@storybook/react';
 import type {DataSeries} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../PolarisVizProvider';
 import type {SimpleNormalizedChartProps} from '../SimpleNormalizedChart';
@@ -11,7 +12,7 @@ export const Template: Story<SimpleNormalizedChartProps> = (
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           bar: {
             borderRadius: 2,
           },
diff --git a/packages/polaris-viz/src/components/SimpleNormalizedChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/SimpleNormalizedChart/tests/Chart.test.tsx
index 9ee6bdc97..818d9ae14 100644
--- a/packages/polaris-viz/src/components/SimpleNormalizedChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/SimpleNormalizedChart/tests/Chart.test.tsx
@@ -1,4 +1,5 @@
 import {mount} from '@shopify/react-testing';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {SimpleNormalizedChart} from '../../../components/SimpleNormalizedChart';
 import {mountWithProvider} from '../../../test-utilities';
@@ -146,7 +147,7 @@ describe('<Chart />', () => {
         <SimpleNormalizedChart {...lowEdgeProps} />,
         {
           themes: {
-            Default: {
+            [DEFAULT_THEME_NAME]: {
               seriesColors: {
                 empty: '#00A',
               },
@@ -175,7 +176,7 @@ describe('<Chart />', () => {
         <SimpleNormalizedChart {...lowEdgeProps} />,
         {
           themes: {
-            Default: {
+            [DEFAULT_THEME_NAME]: {
               seriesColors: {
                 empty: '#00A',
               },
@@ -337,7 +338,7 @@ describe('<Chart />', () => {
       expect(barChart.findAll('li')).toHaveLength(0);
     });
 
-    it('defaults to BarLabels if no custom legend is provided', () => {
+    it('lights to BarLabels if no custom legend is provided', () => {
       const barChart = mount(<SimpleNormalizedChart {...mockProps} />);
 
       expect(barChart.findAll(BarLabel)).toHaveLength(4);
@@ -350,7 +351,7 @@ describe('<Chart />', () => {
         <SimpleNormalizedChart {...mockProps} />,
         {
           themes: {
-            Default: {
+            [DEFAULT_THEME_NAME]: {
               seriesColors: {
                 upToEight: ['#00A', '#00B', '#00C', '#00D'],
               },
@@ -364,7 +365,7 @@ describe('<Chart />', () => {
   });
 
   describe('direction', () => {
-    it('defaults to horizontal direction and passes it to BarSegment', () => {
+    it('lights to horizontal direction and passes it to BarSegment', () => {
       const barChart = mount(<SimpleNormalizedChart {...mockProps} />);
 
       expect(barChart.find(BarSegment)!.props.direction).toBe('horizontal');
@@ -380,7 +381,7 @@ describe('<Chart />', () => {
   });
 
   describe('Label Position', () => {
-    it('defaults to top-left label position and passes it to BarLabel', () => {
+    it('lights to top-left label position and passes it to BarLabel', () => {
       const barChart = mount(<SimpleNormalizedChart {...mockProps} />);
 
       expect(barChart.find(BarLabel)!.props.legendPosition).toBe('top-left');
diff --git a/packages/polaris-viz/src/components/SparkBarChart/stories/data.tsx b/packages/polaris-viz/src/components/SparkBarChart/stories/data.tsx
index cdfc9770e..ed7551b0d 100644
--- a/packages/polaris-viz/src/components/SparkBarChart/stories/data.tsx
+++ b/packages/polaris-viz/src/components/SparkBarChart/stories/data.tsx
@@ -1,5 +1,6 @@
 import type {Story} from '@storybook/react';
 import type {DataSeries} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../../PolarisVizProvider';
 import type {SparkBarChartProps} from '../SparkBarChart';
@@ -11,7 +12,7 @@ export const Template: Story<SparkBarChartProps> = (
   return (
     <PolarisVizProvider
       themes={{
-        Default: {
+        [DEFAULT_THEME_NAME]: {
           bar: {
             borderRadius: 5,
           },
diff --git a/packages/polaris-viz/src/components/SparkLineChart/tests/SparkLineChart.test.tsx b/packages/polaris-viz/src/components/SparkLineChart/tests/SparkLineChart.test.tsx
index 356035aca..55913a600 100644
--- a/packages/polaris-viz/src/components/SparkLineChart/tests/SparkLineChart.test.tsx
+++ b/packages/polaris-viz/src/components/SparkLineChart/tests/SparkLineChart.test.tsx
@@ -1,6 +1,6 @@
 import {mount} from '@shopify/react-testing';
 import type {DataSeries} from '@shopify/polaris-viz-core';
-import {LineSeries} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME, LineSeries} from '@shopify/polaris-viz-core';
 
 import {SparkLineChart} from '../SparkLineChart';
 import {Chart} from '../Chart';
@@ -97,11 +97,11 @@ describe('<SparkLineChart />', () => {
       });
     });
 
-    it('`Default` is used if no value is provided', () => {
+    it(`${DEFAULT_THEME_NAME} is used if no value is provided`, () => {
       const barChart = mount(<SparkLineChart data={mockData} />);
 
       expect(barChart).toContainReactComponent(Chart, {
-        theme: 'Default',
+        theme: DEFAULT_THEME_NAME,
       });
     });
   });
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/components/Area/tests/AnimatedArea.test.tsx b/packages/polaris-viz/src/components/StackedAreaChart/components/Area/tests/AnimatedArea.test.tsx
index ffba66ee0..b53f5632d 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/components/Area/tests/AnimatedArea.test.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/components/Area/tests/AnimatedArea.test.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 import {mountWithProvider} from '../../../../../test-utilities';
 import {mockDefaultTheme} from '../../../../../test-utilities/mountWithProvider';
-import {DEFAULT_THEME} from '../../../../../constants';
+import {DARK_THEME} from '../../../../../constants';
 import type {StackedSeries, Theme} from '../../../../../types';
 import type {AreaProps} from '../types';
 import {AnimatedArea} from '../AnimatedArea';
@@ -49,7 +49,7 @@ describe('<AnimatedArea />', () => {
     index: 0,
     isImmediate: false,
     lineGenerator,
-    selectedTheme: DEFAULT_THEME,
+    selectedTheme: DARK_THEME,
   };
 
   it('renders a path for each series', () => {
@@ -66,7 +66,7 @@ describe('<AnimatedArea />', () => {
     const {themes} = mockDefaultTheme({line: {width: 10}});
     const stackedArea = mountWithProvider(
       <svg>
-        <AnimatedArea {...mockProps} selectedTheme={themes.Default as Theme} />
+        <AnimatedArea {...mockProps} selectedTheme={themes.Light as Theme} />
       </svg>,
     );
 
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/components/StackedAreas/tests/StackedAreas.test.tsx b/packages/polaris-viz/src/components/StackedAreaChart/components/StackedAreas/tests/StackedAreas.test.tsx
index 958a96139..e142fdc50 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/components/StackedAreas/tests/StackedAreas.test.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/components/StackedAreas/tests/StackedAreas.test.tsx
@@ -1,6 +1,7 @@
 import {mount} from '@shopify/react-testing';
 import {scaleLinear} from 'd3-scale';
 import React from 'react';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {StackedAreas} from '../StackedAreas';
 import {AnimatedArea, Area} from '../../Area';
@@ -30,7 +31,7 @@ describe('<StackedAreas />', () => {
     isAnimated: true,
     stackedValues: mockStackedValues,
     zeroLineValues: mockStackedValues,
-    theme: `Default`,
+    theme: DEFAULT_THEME_NAME,
   };
 
   it('renders a <AnimatedArea /> for each stacked series', () => {
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/stories/ExternalTooltip.stories.tsx b/packages/polaris-viz/src/components/StackedAreaChart/stories/ExternalTooltip.stories.tsx
index 9f421a225..66f3acc97 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/stories/ExternalTooltip.stories.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/stories/ExternalTooltip.stories.tsx
@@ -16,7 +16,7 @@ function Card(args: StackedAreaChartProps) {
         padding: 10,
       }}
     >
-      <StackedAreaChart {...args} theme="Uplift" />
+      <StackedAreaChart {...args} />
     </div>
   );
 }
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/stories/InteractiveCustomLegend.stories.tsx b/packages/polaris-viz/src/components/StackedAreaChart/stories/InteractiveCustomLegend.stories.tsx
index c2d09e07a..5c6257491 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/stories/InteractiveCustomLegend.stories.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/stories/InteractiveCustomLegend.stories.tsx
@@ -2,7 +2,7 @@ import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
 
-import {DEFAULT_THEME} from '../../../constants';
+import {DARK_THEME} from '../../../constants';
 import {LinePreview} from '../../LinePreview';
 import type {StackedAreaChartProps} from '../../StackedAreaChart';
 
@@ -36,7 +36,7 @@ InteractiveCustomLegend.args = {
         >
           <LinePreview
             lineStyle="solid"
-            color={DEFAULT_THEME.seriesColors.upToEight[index]}
+            color={DARK_THEME.seriesColors.upToEight[index]}
           />
           {name}
         </li>
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx
index 4ff449727..a4f7f80a0 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx
@@ -1,4 +1,5 @@
 import {mount} from '@shopify/react-testing';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {LegendContainer} from '../../LegendContainer';
 import {mockDefaultTheme} from '../../../test-utilities/mountWithProvider';
@@ -78,7 +79,7 @@ const MOCK_PROPS: Props = {
   dimensions: {width: 500, height: 250},
   renderTooltipContent: jest.fn(() => <p>Mock Tooltip Content</p>),
   showLegend: false,
-  theme: 'Default',
+  theme: DEFAULT_THEME_NAME,
   seriesNameFormatter: (value) => `${value}`,
 };
 
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/tests/StackedAreaChart.test.tsx b/packages/polaris-viz/src/components/StackedAreaChart/tests/StackedAreaChart.test.tsx
index 6d11d0b5a..c2134a6a4 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/tests/StackedAreaChart.test.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/tests/StackedAreaChart.test.tsx
@@ -1,5 +1,6 @@
 import {mount} from '@shopify/react-testing';
 import type {DataSeries} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {StackedAreaChart} from '../StackedAreaChart';
 import {Chart} from '../Chart';
@@ -84,11 +85,11 @@ describe('<AreaChart />', () => {
       });
     });
 
-    it('`Default` is used if no value is provided', () => {
+    it(`${DEFAULT_THEME_NAME} is used if no value is provided`, () => {
       const areaChart = mount(<StackedAreaChart data={mockData} />);
 
       expect(areaChart).toContainReactComponent(Chart, {
-        theme: 'Default',
+        theme: DEFAULT_THEME_NAME,
       });
     });
   });
diff --git a/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesName.stories.tsx b/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesName.stories.tsx
index b78b7d57f..1dc71fb60 100644
--- a/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesName.stories.tsx
+++ b/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesName.stories.tsx
@@ -1,4 +1,4 @@
-import {DEFAULT_THEME} from '@shopify/polaris-viz-core';
+import {DARK_THEME} from '@shopify/polaris-viz-core';
 import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
@@ -18,12 +18,12 @@ NoSeriesName.args = {
         {
           key: 'Sessions from Google ads',
           value: '5250',
-          color: DEFAULT_THEME.seriesColors.upToEight[0],
+          color: DARK_THEME.seriesColors.upToEight[0],
         },
         {
           key: 'Sessions from Facebook ads',
           value: '650',
-          color: DEFAULT_THEME.seriesColors.upToEight[1],
+          color: DARK_THEME.seriesColors.upToEight[1],
         },
       ],
     },
diff --git a/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesNoTitle.stories.tsx b/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesNoTitle.stories.tsx
index 6f18c68d5..39605d520 100644
--- a/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesNoTitle.stories.tsx
+++ b/packages/polaris-viz/src/components/TooltipContent/stories/NoSeriesNoTitle.stories.tsx
@@ -1,4 +1,4 @@
-import {DEFAULT_THEME} from '@shopify/polaris-viz-core';
+import {DARK_THEME} from '@shopify/polaris-viz-core';
 import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
@@ -17,12 +17,12 @@ NoSeriesNoTitle.args = {
         {
           key: 'Sessions from Google ads',
           value: '5250',
-          color: DEFAULT_THEME.seriesColors.upToEight[0],
+          color: DARK_THEME.seriesColors.upToEight[0],
         },
         {
           key: 'Sessions from Facebook ads',
           value: '650',
-          color: DEFAULT_THEME.seriesColors.upToEight[1],
+          color: DARK_THEME.seriesColors.upToEight[1],
         },
       ],
     },
diff --git a/packages/polaris-viz/src/components/TooltipContent/stories/PreviewIcons.stories.tsx b/packages/polaris-viz/src/components/TooltipContent/stories/PreviewIcons.stories.tsx
index a7f977758..9218f6681 100644
--- a/packages/polaris-viz/src/components/TooltipContent/stories/PreviewIcons.stories.tsx
+++ b/packages/polaris-viz/src/components/TooltipContent/stories/PreviewIcons.stories.tsx
@@ -1,4 +1,4 @@
-import {DEFAULT_THEME} from '@shopify/polaris-viz-core';
+import {DARK_THEME} from '@shopify/polaris-viz-core';
 import type {Story} from '@storybook/react';
 
 export {META as default} from './meta';
@@ -17,7 +17,7 @@ PreviewIcons.args = {
         {
           key: 'This row has a preview icon',
           value: '650',
-          color: DEFAULT_THEME.seriesColors.upToEight[0],
+          color: DARK_THEME.seriesColors.upToEight[0],
         },
         {
           key: 'This row has a transparent icon',
diff --git a/packages/polaris-viz/src/components/TooltipContent/stories/TooltipContent.chromatic.stories.tsx b/packages/polaris-viz/src/components/TooltipContent/stories/TooltipContent.chromatic.stories.tsx
index 2da638425..eb186c2ec 100644
--- a/packages/polaris-viz/src/components/TooltipContent/stories/TooltipContent.chromatic.stories.tsx
+++ b/packages/polaris-viz/src/components/TooltipContent/stories/TooltipContent.chromatic.stories.tsx
@@ -1,4 +1,4 @@
-import {DEFAULT_THEME} from '@shopify/polaris-viz-core';
+import {DARK_THEME} from '@shopify/polaris-viz-core';
 import {storiesOf} from '@storybook/react';
 
 import type {TooltipData} from '../../../types';
@@ -21,12 +21,12 @@ const DATA: TooltipData[] = [
       {
         key: 'Sessions from Google ads',
         value: '5250',
-        color: DEFAULT_THEME.seriesColors.upToEight[0],
+        color: DARK_THEME.seriesColors.upToEight[0],
       },
       {
         key: 'Sessions from Facebook ads',
         value: '650',
-        color: DEFAULT_THEME.seriesColors.upToEight[1],
+        color: DARK_THEME.seriesColors.upToEight[1],
         isComparison: true,
       },
     ],
@@ -38,17 +38,17 @@ const DATA: TooltipData[] = [
       {
         key: 'POS',
         value: '4999',
-        color: DEFAULT_THEME.seriesColors.upToEight[2],
+        color: DARK_THEME.seriesColors.upToEight[2],
       },
       {
         key: 'Online',
         value: '10000',
-        color: DEFAULT_THEME.seriesColors.upToEight[3],
+        color: DARK_THEME.seriesColors.upToEight[3],
       },
       {
         key: 'Mobile',
         value: '16500',
-        color: DEFAULT_THEME.seriesColors.upToEight[4],
+        color: DARK_THEME.seriesColors.upToEight[4],
       },
     ],
   },
@@ -61,12 +61,12 @@ const NO_SERIES_NAME_DATA: TooltipData[] = [
       {
         key: 'Sessions from Google ads',
         value: '5250',
-        color: DEFAULT_THEME.seriesColors.upToEight[0],
+        color: DARK_THEME.seriesColors.upToEight[0],
       },
       {
         key: 'Sessions from Facebook ads',
         value: '650',
-        color: DEFAULT_THEME.seriesColors.upToEight[1],
+        color: DARK_THEME.seriesColors.upToEight[1],
       },
     ],
   },
@@ -79,12 +79,12 @@ const NO_SERIES_NO_TITLE_DATA: TooltipData[] = [
       {
         key: 'Sessions from Google ads',
         value: '5250',
-        color: DEFAULT_THEME.seriesColors.upToEight[0],
+        color: DARK_THEME.seriesColors.upToEight[0],
       },
       {
         key: 'Sessions from Facebook ads',
         value: '650',
-        color: DEFAULT_THEME.seriesColors.upToEight[1],
+        color: DARK_THEME.seriesColors.upToEight[1],
       },
     ],
   },
@@ -104,7 +104,7 @@ const SERIES_ICON_DATA: TooltipData[] = [
       {
         key: 'This row has a preview icon',
         value: '650',
-        color: DEFAULT_THEME.seriesColors.upToEight[0],
+        color: DARK_THEME.seriesColors.upToEight[0],
       },
       {
         key: 'This row has a transparent icon',
@@ -149,7 +149,7 @@ const combinations = renderCombinationSections([
     'Themes',
     addWithPropsCombinations(TooltipContent, {
       data: [DATA],
-      theme: ['Default', 'Light'],
+      theme: ['Dark', 'Light'],
     }),
   ],
 ]);
diff --git a/packages/polaris-viz/src/components/TooltipContent/stories/data.tsx b/packages/polaris-viz/src/components/TooltipContent/stories/data.tsx
index 340b8010f..0b3c71ebe 100644
--- a/packages/polaris-viz/src/components/TooltipContent/stories/data.tsx
+++ b/packages/polaris-viz/src/components/TooltipContent/stories/data.tsx
@@ -3,7 +3,7 @@ import type {Story} from '@storybook/react';
 import {
   ChartContext,
   DEFAULT_THEME_NAME,
-  DEFAULT_THEME,
+  DARK_THEME,
 } from '@shopify/polaris-viz-core';
 
 import type {TooltipContentProps} from '../TooltipContent';
@@ -41,12 +41,12 @@ export const DEFAULT_DATA: TooltipData[] = [
       {
         key: 'Sessions from Google ads',
         value: '5250',
-        color: DEFAULT_THEME.seriesColors.upToEight[0],
+        color: DARK_THEME.seriesColors.upToEight[0],
       },
       {
         key: 'Sessions from Facebook ads',
         value: '650',
-        color: DEFAULT_THEME.seriesColors.upToEight[1],
+        color: DARK_THEME.seriesColors.upToEight[1],
         isComparison: true,
       },
     ],
@@ -58,17 +58,17 @@ export const DEFAULT_DATA: TooltipData[] = [
       {
         key: 'POS',
         value: '4999',
-        color: DEFAULT_THEME.seriesColors.upToEight[2],
+        color: DARK_THEME.seriesColors.upToEight[2],
       },
       {
         key: 'Online',
         value: '10000',
-        color: DEFAULT_THEME.seriesColors.upToEight[3],
+        color: DARK_THEME.seriesColors.upToEight[3],
       },
       {
         key: 'Average',
         value: '16500',
-        color: DEFAULT_THEME.seriesColors.upToEight[4],
+        color: DARK_THEME.seriesColors.upToEight[4],
       },
     ],
   },
diff --git a/packages/polaris-viz/src/components/TrendIndicator/stories/TrendIndicator.chromatic.stories.tsx b/packages/polaris-viz/src/components/TrendIndicator/stories/TrendIndicator.chromatic.stories.tsx
index e1f7062fa..a953abe08 100644
--- a/packages/polaris-viz/src/components/TrendIndicator/stories/TrendIndicator.chromatic.stories.tsx
+++ b/packages/polaris-viz/src/components/TrendIndicator/stories/TrendIndicator.chromatic.stories.tsx
@@ -32,7 +32,7 @@ const combinations = renderCombinationSections([
     addWithPropsCombinations(TrendIndicator, {
       value: [null, undefined],
       trend: ['positive'],
-      theme: ['Default', 'Light'],
+      theme: ['Dark', 'Light'],
     }),
   ],
 ]);
diff --git a/packages/polaris-viz/src/components/YAxis/tests/YAxis.test.tsx b/packages/polaris-viz/src/components/YAxis/tests/YAxis.test.tsx
index 9a48c0512..8e69efbdc 100644
--- a/packages/polaris-viz/src/components/YAxis/tests/YAxis.test.tsx
+++ b/packages/polaris-viz/src/components/YAxis/tests/YAxis.test.tsx
@@ -17,12 +17,7 @@ describe('<YAxis />', () => {
   it('displays a formatted value with each tick', () => {
     const yAxis = mount(
       <svg>
-        <YAxis
-          ticks={testTicks}
-          width={100}
-          textAlign="right"
-          theme="Default"
-        />
+        <YAxis ticks={testTicks} width={100} textAlign="right" />
       </svg>,
     );
 
diff --git a/packages/polaris-viz/src/components/shared/GradientDefs/GradientDefs.tsx b/packages/polaris-viz/src/components/shared/GradientDefs/GradientDefs.tsx
index fefb03a83..62d2290a0 100644
--- a/packages/polaris-viz/src/components/shared/GradientDefs/GradientDefs.tsx
+++ b/packages/polaris-viz/src/components/shared/GradientDefs/GradientDefs.tsx
@@ -2,6 +2,7 @@ import {
   LinearGradientWithStops,
   useChartContext,
   getGradientFromColor,
+  DEFAULT_THEME_NAME,
 } from '@shopify/polaris-viz-core';
 import type {Color, Direction} from '@shopify/polaris-viz-core';
 
@@ -71,6 +72,10 @@ function Gradient({
   );
 }
 
-export function getGradientDefId(theme = 'Default', index: number, id: string) {
+export function getGradientDefId(
+  theme = DEFAULT_THEME_NAME,
+  index: number,
+  id: string,
+) {
   return [id, theme, index, GRADIENT_ID].join('-');
 }
diff --git a/packages/polaris-viz/src/components/shared/GroupLabel/tests/GroupLabel.test.tsx b/packages/polaris-viz/src/components/shared/GroupLabel/tests/GroupLabel.test.tsx
index cc37321af..3fe183770 100644
--- a/packages/polaris-viz/src/components/shared/GroupLabel/tests/GroupLabel.test.tsx
+++ b/packages/polaris-viz/src/components/shared/GroupLabel/tests/GroupLabel.test.tsx
@@ -15,7 +15,6 @@ const MOCK_PROPS: GroupLabelProps = {
   containerWidth: 300,
   label: 'Label Text',
   zeroPosition: 0,
-  theme: 'Default',
 };
 
 describe('<GroupLabel />', () => {
diff --git a/packages/polaris-viz/src/components/shared/ZeroValueLine/ZeroValueLine.test.tsx b/packages/polaris-viz/src/components/shared/ZeroValueLine/ZeroValueLine.test.tsx
index 458793bd2..a8082a86b 100644
--- a/packages/polaris-viz/src/components/shared/ZeroValueLine/ZeroValueLine.test.tsx
+++ b/packages/polaris-viz/src/components/shared/ZeroValueLine/ZeroValueLine.test.tsx
@@ -1,4 +1,5 @@
 import {mount} from '@shopify/react-testing';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {ZERO_VALUE_LINE_HEIGHT} from '../../../constants';
 
@@ -9,7 +10,7 @@ const MOCK_PROPS: ZeroValueLineProps = {
   x: 10,
   y: 20,
   direction: 'vertical',
-  theme: 'Default',
+  theme: DEFAULT_THEME_NAME,
 };
 
 describe('<ZeroValueLine />', () => {
diff --git a/packages/polaris-viz/src/constants.ts b/packages/polaris-viz/src/constants.ts
index b40a26510..47b9cefb4 100644
--- a/packages/polaris-viz/src/constants.ts
+++ b/packages/polaris-viz/src/constants.ts
@@ -27,10 +27,9 @@ export {
   LINES_LOAD_ANIMATION_CONFIG,
   MASK_HIGHLIGHT_COLOR,
   NEUTRAL_SINGLE_GRADIENT,
-  DEFAULT_THEME,
+  DARK_THEME,
   LIGHT_THEME,
   PRINT_THEME,
-  UPLIFT_THEME,
   STACKED_BAR_GAP,
   LABEL_AREA_TOP_SPACING,
   HORIZONTAL_LABEL_MIN_WIDTH,
diff --git a/packages/polaris-viz/src/hooks/tests/useHorizontalSeriesColors.test.tsx b/packages/polaris-viz/src/hooks/tests/useHorizontalSeriesColors.test.tsx
index 239a33dd4..8039815fd 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 {DEFAULT_THEME, LIGHT_THEME} from '../../constants';
+import {DARK_THEME, LIGHT_THEME} from '../../constants';
 
 const DATA: DataSeries[] = [
   {
@@ -41,7 +41,7 @@ describe('useHorizontalSeriesColors()', () => {
 
     expect(data).toStrictEqual({
       longestSeriesCount: 3,
-      seriesColors: [...DEFAULT_THEME.seriesColors.upToEight].splice(0, 2),
+      seriesColors: [...DARK_THEME.seriesColors.upToEight].splice(0, 2),
     });
   });
 
@@ -91,7 +91,7 @@ describe('useHorizontalSeriesColors()', () => {
 
     expect(data).toStrictEqual({
       longestSeriesCount: 2,
-      seriesColors: ['red', DEFAULT_THEME.seriesColors.upToEight[0]],
+      seriesColors: ['red', DARK_THEME.seriesColors.upToEight[0]],
     });
   });
 
@@ -127,7 +127,7 @@ describe('useHorizontalSeriesColors()', () => {
     expect(data).toStrictEqual({
       longestSeriesCount: 3,
       seriesColors: [
-        DEFAULT_THEME.seriesColors.single,
+        DARK_THEME.seriesColors.single,
         'rgba(144, 176, 223, 0.6)',
       ],
     });
diff --git a/packages/polaris-viz/src/index.ts b/packages/polaris-viz/src/index.ts
index 60dd17d48..eb7302e9b 100644
--- a/packages/polaris-viz/src/index.ts
+++ b/packages/polaris-viz/src/index.ts
@@ -38,10 +38,9 @@ export type {
 } from './components';
 
 export {
-  DEFAULT_THEME as PolarisVizDefaultTheme,
+  DARK_THEME as PolarisVizDarkTheme,
   LIGHT_THEME as PolarisVizLightTheme,
   PRINT_THEME as PolarisVizPrintTheme,
-  UPLIFT_THEME as PolarisUpliftTheme,
 } from './constants';
 
 export type {
diff --git a/packages/polaris-viz/src/storybook/constants.ts b/packages/polaris-viz/src/storybook/constants.ts
index 2d50cf12e..562189647 100644
--- a/packages/polaris-viz/src/storybook/constants.ts
+++ b/packages/polaris-viz/src/storybook/constants.ts
@@ -8,7 +8,7 @@ export const CONTROLS_ARGS = {
 
 export const THEME_CONTROL_ARGS = {
   description: 'The theme that the chart will inherit its styles from',
-  options: ['Default', 'Light', 'Uplift'],
+  options: ['Dark', 'Light'],
   control: {
     type: 'select',
   },
diff --git a/packages/polaris-viz/src/test-utilities/mountWithProvider.tsx b/packages/polaris-viz/src/test-utilities/mountWithProvider.tsx
index 6b885d61d..2cf2c35c1 100644
--- a/packages/polaris-viz/src/test-utilities/mountWithProvider.tsx
+++ b/packages/polaris-viz/src/test-utilities/mountWithProvider.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {mount} from '@shopify/react-testing';
 import type {PartialTheme} from '@shopify/polaris-viz-core';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {PolarisVizProvider} from '../';
 
@@ -22,7 +23,7 @@ export const mountWithProvider = (
 export const mockDefaultTheme = (overrides: PartialTheme) => {
   return {
     themes: {
-      Default: overrides,
+      [DEFAULT_THEME_NAME]: overrides,
     },
   };
 };
diff --git a/packages/polaris-viz/src/utilities/stories/renderLinearTooltipContent.chromatic.stories.tsx b/packages/polaris-viz/src/utilities/stories/renderLinearTooltipContent.chromatic.stories.tsx
index e03d18d45..99f38bd58 100644
--- a/packages/polaris-viz/src/utilities/stories/renderLinearTooltipContent.chromatic.stories.tsx
+++ b/packages/polaris-viz/src/utilities/stories/renderLinearTooltipContent.chromatic.stories.tsx
@@ -10,6 +10,7 @@ import {
   Options,
 } from '../../utilities/renderLinearTooltipContent';
 import type {RenderTooltipContentData} from 'types';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 const stories = storiesOf('Chromatic/Utilities', module).addParameters({
   docs: {page: null},
@@ -97,7 +98,7 @@ const DEFAULT_TOOLTIP_DATA: RenderTooltipContentData = {
       ],
     },
   ],
-  theme: 'Default',
+  theme: DEFAULT_THEME_NAME,
   formatters: {},
 };
 
diff --git a/packages/polaris-viz/src/utilities/tests/getTooltipContentRenderer.test.tsx b/packages/polaris-viz/src/utilities/tests/getTooltipContentRenderer.test.tsx
index 37dfa8df5..68f06e96c 100644
--- a/packages/polaris-viz/src/utilities/tests/getTooltipContentRenderer.test.tsx
+++ b/packages/polaris-viz/src/utilities/tests/getTooltipContentRenderer.test.tsx
@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {mountWithProvider} from '../../test-utilities/mountWithProvider';
 import {TooltipContent} from '../../components';
@@ -8,7 +9,7 @@ import {getTooltipContentRenderer} from '../getTooltipContentRenderer';
 describe('getTooltipContentRenderer()', () => {
   it('returns <TooltipContent />', () => {
     const renderTooltipContent = getTooltipContentRenderer({
-      theme: 'Default',
+      theme: DEFAULT_THEME_NAME,
       data: [],
     });
 
@@ -21,7 +22,7 @@ describe('getTooltipContentRenderer()', () => {
 
   it('returns null when no data is provided', () => {
     const renderTooltipContent = getTooltipContentRenderer({
-      theme: 'Default',
+      theme: DEFAULT_THEME_NAME,
       data: [],
     });
 
@@ -43,7 +44,7 @@ describe('getTooltipContentRenderer()', () => {
     const customRenderer = jest.fn();
 
     const renderTooltipContent = getTooltipContentRenderer({
-      theme: 'Default',
+      theme: DEFAULT_THEME_NAME,
       data: [],
       tooltipOptions: {
         renderTooltipContent: customRenderer,
@@ -73,6 +74,6 @@ const MOCK_TOOLTIP_DATA: RenderTooltipContentData = {
   ],
   activeIndex: 0,
   dataSeries: [],
-  theme: 'Default',
+  theme: DEFAULT_THEME_NAME,
   title: '',
 };
diff --git a/tests/setup/tests.ts b/tests/setup/tests.ts
index a7988ceaa..eb7fb968f 100644
--- a/tests/setup/tests.ts
+++ b/tests/setup/tests.ts
@@ -22,38 +22,165 @@ jest.mock('../../packages/polaris-viz/src/components/ChartContainer', () => {
 jest.mock(
   '../../packages/polaris-viz-core/src/styles/shared/_variables.scss',
   () => {
-    const actual = jest.requireActual(
-      '../../packages/polaris-viz-core/src/styles/shared/_variables.scss',
-    );
-
     return {
-      ...actual,
+      colorWhite: 'rgb(255, 255, 255)',
+      colorBlack: 'rgb(0, 0, 0)',
+      colorPurpleDark: 'rgb(80, 36, 143)',
+
+      colorDarkComparison: 'rgba(144, 176, 223, 0.8)',
+      colorLightComparison: 'rgba(103, 147, 204, 1)',
+
+      colorLightPositive: 'var(--p-icon-success, rgba(0, 127, 95, 1))',
+      colorLightNegative: 'var(--p-icon-critical, rgba(215, 44, 13, 1))',
+      colorLightnNeutral: 'var(--p-icon-subdued, rgba(140, 145, 150, 1))',
 
+      colorDarkPositive: 'var(--p-icon-success, #039c86)',
+      colorDarkNegative: 'var(--p-icon-critical, #f24f62)',
+      colorDarkNeutral: 'var(--p-icon-subdued, #8c9196)',
+
+      colorGray00: '#ffffff',
+      colorGray10: '#f6f6f7',
+      colorGray20: '#eeeeef',
       colorGray30: '#dadadd',
+      colorGray40: '#cbcbcf',
+      colorGray50: '#bdbdc2',
+      colorGray60: '#b0b0b6',
       colorGray70: '#9d9da5',
+      colorGray80: '#909099',
+      colorGray90: '#82828c',
+      colorGray100: '#70707b',
+      colorGray110: '#5e5e69',
+      colorGray120: '#545460',
+      colorGray130: '#4b4b57',
       colorGray140: '#43434e',
       colorGray150: '#2e2e36',
       colorGray160: '#1f1f25',
 
-      colorTeal70: '#4c9aaf',
+      colorIndigo00: '#f7f5ff',
+      colorIndigo10: '#efecff',
+      colorIndigo20: '#e4deff',
+      colorIndigo30: '#d4cbff',
+      colorIndigo40: '#c5b7fe',
+      colorIndigo50: '#b6a3fe',
+      colorIndigo60: '#a78ffd',
+      colorIndigo70: '#997afc',
+      colorIndigo80: '#8c63fb',
+      colorIndigo90: '#7f4afa',
+      colorIndigo100: '#7329f9',
+      colorIndigo110: '#6511e2',
+      colorIndigo120: '#540dbf',
+      colorIndigo130: '#44089e',
+      colorIndigo140: '#34057d',
+      colorIndigo150: '#25035e',
+      colorIndigo160: '#16013e',
 
-      colorBlue20: '#eeeeef',
+      colorBlue00: '#f3f7ff',
+      colorBlue10: '#e6eefe',
+      colorBlue20: '#d6e3fd',
+      colorBlue30: '#bdd2fb',
+      colorBlue40: '#a3c2f7',
+      colorBlue50: '#88b1f2',
+      colorBlue60: '#6ba2ec',
       colorBlue70: '#4b92e5',
       colorBlue80: '#4282cd',
       colorBlue90: '#3672bb',
-      colorBlue110: '#5e5e69',
+      colorBlue100: '#2b62a9',
+      colorBlue110: '#215297',
+      colorBlue120: '#174385',
+      colorBlue130: '#0e3572',
+      colorBlue140: '#06275f',
+      colorBlue150: '#021a4c',
+      colorBlue160: '#000d36',
 
-      colorIndigo70: '#997afc',
-      colorIndigo90: '#7f4afa',
+      colorTeal00: '#f0f8fb',
+      colorTeal10: '#e0f1f8',
+      colorTeal20: '#c8e7f4',
+      colorTeal30: '#9edaef',
+      colorTeal40: '#79cce5',
+      colorTeal50: '#69bbd3',
+      colorTeal60: '#5baac1',
+      colorTeal70: '#4c9aaf',
+      colorTeal80: '#3f899e',
+      colorTeal90: '#33798c',
+      colorTeal100: '#286a7b',
+      colorTeal110: '#1d5a69',
+      colorTeal120: '#144b59',
+      colorTeal130: '#0b3d48',
+      colorTeal140: '#042f38',
+      colorTeal150: '#012129',
+      colorTeal160: '#001419',
 
-      colorPurple70: '#b176e2',
+      colorMagenta00: '#fcf4fa',
+      colorMagenta10: '#f9e9f5',
+      colorMagenta20: '#f5dbef',
+      colorMagenta30: '#f0c4e6',
+      colorMagenta40: '#eaaedd',
+      colorMagenta50: '#e596d4',
+      colorMagenta60: '#e07dcc',
       colorMagenta70: '#da62c4',
-      colorOrange70: '#ca7d4a',
-      colorYellow70: '#97933e',
+      colorMagenta80: '#c654b1',
+      colorMagenta90: '#b1489e',
+      colorMagenta100: '#9c3c8b',
+      colorMagenta110: '#873178',
+      colorMagenta120: '#722665',
+      colorMagenta130: '#5e1c53',
+      colorMagenta140: '#4a1341',
+      colorMagenta150: '#370b30',
+      colorMagenta160: '#23041e',
 
-      colorDarkComparison: 'rgba(144, 176, 223, 0.6)',
+      colorPurple00: '#f9f5ff',
+      colorPurple10: '#f3eafe',
+      colorPurple20: '#ebdcfd',
+      colorPurple30: '#e0c8fa',
+      colorPurple40: '#d4b3f6',
+      colorPurple50: '#c89ef1',
+      colorPurple60: '#bd8aea',
+      colorPurple70: '#b176e2',
+      colorPurple80: '#a85de0',
+      colorPurple90: '#9f41dc',
+      colorPurple100: '#8c35c4',
+      colorPurple110: '#7a29ab',
+      colorPurple120: '#671e93',
+      colorPurple130: '#55147a',
+      colorPurple140: '#430b62',
+      colorPurple150: '#32054a',
+      colorPurple160: '#200132',
+
+      colorOrange00: '#fcf5f3',
+      colorOrange10: '#f9ebe6',
+      colorOrange20: '#f5ddd4',
+      colorOrange30: '#f1c9b8',
+      colorOrange40: '#eeb498',
+      colorOrange50: '#ec9d71',
+      colorOrange60: '#df8b55',
+      colorOrange70: '#ca7d4a',
+      colorOrange80: '#b66e3f',
+      colorOrange90: '#a26134',
+      colorOrange100: '#8e532a',
+      colorOrange110: '#7a4621',
+      colorOrange120: '#673a17',
+      colorOrange130: '#552d0d',
+      colorOrange140: '#432205',
+      colorOrange150: '#311701',
+      colorOrange160: '#1f0c00',
 
-      colorWhite: '#ffffff',
+      colorYellow00: '#fff6df',
+      colorYellow10: '#fcedc2',
+      colorYellow20: '#fae275',
+      colorYellow30: '#e6d25f',
+      colorYellow40: '#d1c256',
+      colorYellow50: '#bdb24e',
+      colorYellow60: '#aaa246',
+      colorYellow70: '#97933e',
+      colorYellow80: '#858337',
+      colorYellow90: '#74742c',
+      colorYellow100: '#636522',
+      colorYellow110: '#535718',
+      colorYellow120: '#444810',
+      colorYellow130: '#363a08',
+      colorYellow140: '#2a2d03',
+      colorYellow150: '#1d1f01',
+      colorYellow160: '#111200',
     };
   },
 );

From cea66ab1134ad8cd451404723581fa0c20e89521 Mon Sep 17 00:00:00 2001
From: Matt Vickers <matthew.vickers@shopify.com>
Date: Fri, 12 Apr 2024 16:45:45 -0400
Subject: [PATCH 2/2] v1.0.0-light-theme-default-beta.1

---
 package.json                                      |  3 ++-
 .../tests/PolarisVizProvider.test.tsx             | 12 ++++++------
 .../src/hooks/tests/usePolarisVizContext.test.tsx | 12 ++++++------
 .../src/hooks/tests/useTheme.test.tsx             |  8 ++++----
 .../src/utilities/ColorScale/ColorScale.test.ts   |  4 ++--
 .../src/utilities/createThemes.ts                 |  9 +++++++--
 .../src/utilities/tests/createThemes.test.ts      |  4 ++--
 .../ShowMoreAnnotationsButton.test.tsx            | 15 +++++++++++----
 .../components/AxisLabel/AxisLabel.test.tsx       |  6 +++---
 .../tests/useHorizontalSeriesColors.test.tsx      | 10 +++++-----
 10 files changed, 48 insertions(+), 35 deletions(-)

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('<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,
               },
@@ -60,15 +60,15 @@ describe('<PolarisVizProvider />', () => {
           }}
           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
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(<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
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('<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
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('<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
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,
       ],
     });
   });