From 61ebd8d4b9778c150625b796dbdf4499d0790a0f Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Thu, 7 Oct 2021 16:44:03 -0500
Subject: [PATCH 1/3] feat(types): improve generic types in specs, and spec
 prop types

---
 .../layout/types/viewmodel_types.ts           |   4 +-
 .../src/chart_types/goal_chart/specs/index.ts |  48 ++---
 .../src/chart_types/heatmap/specs/heatmap.ts  |  86 ++++----
 .../heatmap/state/selectors/heatmap_spec.ts   |   4 +-
 .../partition_chart/specs/index.ts            | 108 +++++-----
 .../src/chart_types/wordcloud/specs/index.ts  |  51 ++---
 .../chart_types/xy_chart/specs/area_series.ts |  53 +++++
 .../xy_chart/specs/area_series.tsx            |  46 -----
 .../src/chart_types/xy_chart/specs/axis.ts    |  36 ++++
 .../src/chart_types/xy_chart/specs/axis.tsx   |  35 ----
 .../chart_types/xy_chart/specs/bar_series.ts  |  53 +++++
 .../chart_types/xy_chart/specs/bar_series.tsx |  46 -----
 .../xy_chart/specs/bubble_series.ts           |  52 +++++
 .../xy_chart/specs/bubble_series.tsx          |  46 -----
 .../xy_chart/specs/histogram_bar_series.ts    |  53 +++++
 .../xy_chart/specs/histogram_bar_series.tsx   |  46 -----
 .../xy_chart/specs/line_annotation.ts         |  52 +++++
 .../xy_chart/specs/line_annotation.tsx        |  40 ----
 .../chart_types/xy_chart/specs/line_series.ts |  53 +++++
 .../xy_chart/specs/line_series.tsx            |  45 -----
 .../xy_chart/specs/rect_annotation.ts         |  33 +++
 .../xy_chart/specs/rect_annotation.tsx        |  38 ----
 .../src/chart_types/xy_chart/utils/specs.ts   |  85 ++++----
 packages/charts/src/specs/constants.ts        |  53 +++--
 packages/charts/src/specs/group_by.ts         |  53 +++--
 packages/charts/src/specs/settings.tsx        |  56 ++----
 packages/charts/src/specs/small_multiples.ts  |  30 +--
 packages/charts/src/state/spec_factory.ts     | 190 ++++++++++++++----
 packages/charts/src/utils/accessor.ts         |  13 +-
 packages/charts/src/utils/common.tsx          |   3 +-
 30 files changed, 832 insertions(+), 679 deletions(-)
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/area_series.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/area_series.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/axis.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/axis.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/bar_series.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/line_series.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/line_series.tsx
 create mode 100644 packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts
 delete mode 100644 packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx

diff --git a/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
index 4699e2b4447..408e8bd1066 100644
--- a/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
+++ b/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
@@ -58,8 +58,6 @@ export type ShapeViewModel = {
 };
 
 const commonDefaults = {
-  specType: SpecType.Series,
-  subtype: GoalSubtype.Goal,
   base: 0,
   actual: 50,
   ticks: [0, 25, 50, 75, 100],
@@ -85,6 +83,8 @@ export const defaultGoalSpec = {
 /** @internal */
 export const nullGoalViewModel = {
   ...commonDefaults,
+  specType: SpecType.Series,
+  subtype: GoalSubtype.Goal,
   bands: [],
   ticks: [],
   labelMajor: '',
diff --git a/packages/charts/src/chart_types/goal_chart/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts
index ab0e1036505..70e81ee4363 100644
--- a/packages/charts/src/chart_types/goal_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { Color } from '../../../common/colors';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { specComponentFactory } from '../../../state/spec_factory';
 import { LabelAccessor, RecursivePartial } from '../../../utils/common';
 import { Config } from '../layout/types/config_types';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
@@ -36,11 +36,6 @@ export type BandFillColorAccessor = (input: BandFillColorAccessorInput) => Color
 /** @alpha */
 export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
 
-const defaultProps = {
-  chartType: ChartType.Goal,
-  ...defaultGoalSpec,
-};
-
 /** @alpha */
 export interface GoalSpec extends Spec {
   specType: typeof SpecType.Series;
@@ -67,28 +62,19 @@ export interface GoalSpec extends Spec {
   bandLabels: string[];
 }
 
-type SpecRequiredProps = Pick<GoalSpec, 'id' | 'actual'>;
-type SpecOptionalProps = Partial<Omit<GoalSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
-
-/** @alpha */
-export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    GoalSpec,
-    | 'chartType'
-    | 'subtype'
-    | 'base'
-    | 'target'
-    | 'actual'
-    | 'bands'
-    | 'bandLabels'
-    | 'ticks'
-    | 'bandFillColor'
-    | 'tickValueFormatter'
-    | 'labelMajor'
-    | 'labelMinor'
-    | 'centralMajor'
-    | 'centralMinor'
-    | 'angleStart'
-    | 'angleEnd'
-  >(defaultProps),
+/**
+ * Add Goal spec to chart
+ * @alpha
+ */
+export const Goal = specComponentFactory<GoalSpec>()(
+  {
+    specType: SpecType.Series,
+    chartType: ChartType.Goal,
+  },
+  {
+    ...defaultGoalSpec,
+  },
 );
+
+/** @public */
+export type GoalProps = ComponentProps<typeof Goal>;
diff --git a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
index 36a8fe96f79..0bb20d65c8f 100644
--- a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
+++ b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
@@ -6,35 +6,21 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps, useRef } from 'react';
 
 import { ChartType } from '../..';
 import { Color } from '../../../common/colors';
 import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
-import { SeriesScales, Spec } from '../../../specs';
+import { BaseDatum, SeriesScales, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
 import { Accessor, AccessorFn } from '../../../utils/accessor';
-import { Datum, RecursivePartial } from '../../../utils/common';
+import { RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
 import { X_SCALE_DEFAULT } from './scale_defaults';
 
-const defaultProps = {
-  chartType: ChartType.Heatmap,
-  specType: SpecType.Series,
-  data: [],
-  xAccessor: ({ x }: { x: string | number }) => x,
-  yAccessor: ({ y }: { y: string | number }) => y,
-  xScaleType: X_SCALE_DEFAULT.type,
-  valueAccessor: ({ value }: { value: string | number }) => value,
-  valueFormatter: (value: number) => `${value}`,
-  xSortPredicate: Predicate.AlphaAsc,
-  ySortPredicate: Predicate.AlphaAsc,
-  config,
-};
-
 /** @public */
 export type HeatmapScaleType =
   | typeof ScaleType.Linear
@@ -59,13 +45,13 @@ export interface HeatmapBandsColorScale {
 }
 
 /** @alpha */
-export interface HeatmapSpec extends Spec {
+export interface HeatmapSpec<D extends BaseDatum> extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.Heatmap;
-  data: Datum[];
+  data: D[];
   colorScale: HeatmapBandsColorScale;
-  xAccessor: Accessor | AccessorFn;
-  yAccessor: Accessor | AccessorFn;
+  xAccessor: keyof D | AccessorFn<D>;
+  yAccessor: keyof D | AccessorFn<D>;
   valueAccessor: Accessor | AccessorFn;
   valueFormatter: (value: number) => string;
   xSortPredicate: Predicate;
@@ -76,20 +62,42 @@ export interface HeatmapSpec extends Spec {
   name?: string;
 }
 
-/** @alpha */
-export const Heatmap: React.FunctionComponent<
-  Pick<HeatmapSpec, 'id' | 'data' | 'colorScale'> & Partial<Omit<HeatmapSpec, 'chartType' | 'specType' | 'id' | 'data'>>
-> = getConnect()(
-  specComponentFactory<
-    HeatmapSpec,
-    | 'xAccessor'
-    | 'yAccessor'
-    | 'valueAccessor'
-    | 'data'
-    | 'ySortPredicate'
-    | 'xSortPredicate'
-    | 'valueFormatter'
-    | 'config'
-    | 'xScaleType'
-  >(defaultProps),
-);
+/**
+ * Adds heatmap spec to chart specs
+ * @alpha
+ */
+export const Heatmap = function <Datum extends BaseDatum>(
+  props: SFProps<
+    HeatmapSpec<Datum>,
+    keyof typeof buildProps.current['overrides'],
+    keyof typeof buildProps.current['defaults'],
+    keyof typeof buildProps.current['optionals'],
+    keyof typeof buildProps.current['requires']
+  >,
+) {
+  const buildProps = useRef(
+    buildSFProps<HeatmapSpec<Datum>>()(
+      {
+        chartType: ChartType.Heatmap,
+        specType: SpecType.Series,
+      },
+      {
+        data: [],
+        // xAccessor: ({ x }: { x: string | number }) => x,
+        // yAccessor: ({ y }: { y: string | number }) => y,
+        valueAccessor: ({ value }) => value,
+        xScaleType: X_SCALE_DEFAULT.type,
+        valueFormatter: (value) => `${value}`,
+        xSortPredicate: Predicate.AlphaAsc,
+        ySortPredicate: Predicate.AlphaAsc,
+        config,
+      },
+    ),
+  );
+  const { defaults, overrides } = buildProps.current;
+  useSpecFactory<HeatmapSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type HeatmapProps = ComponentProps<typeof Heatmap>;
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/heatmap_spec.ts b/packages/charts/src/chart_types/heatmap/state/selectors/heatmap_spec.ts
index a34755931ef..4f11040d143 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/heatmap_spec.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/heatmap_spec.ts
@@ -13,7 +13,7 @@ import { getSpecsFromStore } from '../../../../state/utils';
 import { HeatmapSpec } from '../../specs/heatmap';
 
 /** @internal */
-export function getSpecOrNull(state: GlobalChartState): HeatmapSpec | null {
-  const specs = getSpecsFromStore<HeatmapSpec>(state.specs, ChartType.Heatmap, SpecType.Series);
+export function getSpecOrNull(state: GlobalChartState): HeatmapSpec<unknown> | null {
+  const specs = getSpecsFromStore<HeatmapSpec<unknown>>(state.specs, ChartType.Heatmap, SpecType.Series);
   return specs.length > 0 ? specs[0] : null;
 }
diff --git a/packages/charts/src/chart_types/partition_chart/specs/index.ts b/packages/charts/src/chart_types/partition_chart/specs/index.ts
index 83a351fed1a..633396af841 100644
--- a/packages/charts/src/chart_types/partition_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/partition_chart/specs/index.ts
@@ -6,26 +6,19 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { Pixels } from '../../../common/geometry';
-import { Spec } from '../../../specs';
+import { BaseDatum, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants'; // kept as unshortened import on separate line otherwise import circularity emerges
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
 import { IndexedAccessorFn } from '../../../utils/accessor';
-import {
-  Datum,
-  LabelAccessor,
-  RecursivePartial,
-  ShowAccessor,
-  ValueAccessor,
-  ValueFormatter,
-} from '../../../utils/common';
+import { LabelAccessor, RecursivePartial, ShowAccessor, ValueAccessor, ValueFormatter } from '../../../utils/common';
 import { config, percentFormatter } from '../layout/config';
 import { Config, FillFontSizeRange, FillLabelConfig } from '../layout/types/config_types';
-import { NodeColorAccessor, ShapeTreeNode, ValueGetter } from '../layout/types/viewmodel_types';
-import { AGGREGATE_KEY, NodeSorter, PrimitiveValue } from '../layout/utils/group_by_rollup';
+import { NodeColorAccessor, ValueGetter } from '../layout/types/viewmodel_types';
+import { AGGREGATE_KEY, NodeSorter } from '../layout/utils/group_by_rollup';
 
 interface ExtendedFillLabelConfig extends FillLabelConfig, FillFontSizeRange {}
 
@@ -33,8 +26,8 @@ interface ExtendedFillLabelConfig extends FillLabelConfig, FillFontSizeRange {}
  * Specification for a given layer in the partition chart
  * @public
  */
-export interface Layer {
-  groupByRollup: IndexedAccessorFn;
+export interface Layer<D extends BaseDatum> {
+  groupByRollup: IndexedAccessorFn<D>;
   sortPredicate?: NodeSorter | null;
   nodeLabel?: LabelAccessor;
   fillLabel?: Partial<ExtendedFillLabelConfig>;
@@ -42,58 +35,65 @@ export interface Layer {
   shape?: { fillColor: string | NodeColorAccessor };
 }
 
-const defaultProps = {
-  chartType: ChartType.Partition,
-  specType: SpecType.Series,
-  config,
-  valueAccessor: (d: Datum) => (typeof d === 'number' ? d : 0),
-  valueGetter: (n: ShapeTreeNode): number => n[AGGREGATE_KEY],
-  valueFormatter: (d: number): string => String(d),
-  percentFormatter,
-  topGroove: 20,
-  smallMultiples: null,
-  layers: [
-    {
-      groupByRollup: (d: Datum, i: number) => i,
-      nodeLabel: (d: PrimitiveValue) => String(d),
-      showAccessor: () => true,
-      fillLabel: {},
-    },
-  ],
-};
-
 /**
  * Specifies the partition chart
  * @public
  */
-export interface PartitionSpec extends Spec {
+export interface PartitionSpec<D extends BaseDatum> extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.Partition;
   config: RecursivePartial<Config>;
-  data: Datum[];
-  valueAccessor: ValueAccessor;
+  data: D[];
+  valueAccessor: ValueAccessor<D>;
   valueFormatter: ValueFormatter;
   valueGetter: ValueGetter;
   percentFormatter: ValueFormatter;
   topGroove: Pixels;
   smallMultiples: string | null;
-  layers: Layer[];
+  layers: Layer<D>[];
 }
 
-type SpecRequiredProps = Pick<PartitionSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<PartitionSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
+const buildProps = buildSFProps<PartitionSpec<unknown>>()(
+  {
+    chartType: ChartType.Partition,
+    specType: SpecType.Series,
+  },
+  {
+    config,
+    valueAccessor: (d) => (typeof d === 'number' ? d : 0),
+    valueGetter: (n) => n[AGGREGATE_KEY],
+    valueFormatter: (d) => String(d),
+    percentFormatter,
+    topGroove: 20,
+    smallMultiples: null,
+    layers: [
+      {
+        groupByRollup: (d, i) => i,
+        nodeLabel: (d) => String(d),
+        showAccessor: () => true,
+        fillLabel: {},
+      },
+    ],
+  },
+);
+
+/**
+ * Adds partition spec to chart specs
+ * @public
+ */
+export const Partition = function <Datum extends BaseDatum>(
+  props: SFProps<
+    PartitionSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<PartitionSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
 
 /** @public */
-export const Partition: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    PartitionSpec,
-    | 'valueAccessor'
-    | 'valueGetter'
-    | 'valueFormatter'
-    | 'layers'
-    | 'config'
-    | 'percentFormatter'
-    | 'topGroove'
-    | 'smallMultiples'
-  >(defaultProps),
-);
+export type PartitionProp = ComponentProps<typeof Partition>;
diff --git a/packages/charts/src/chart_types/wordcloud/specs/index.ts b/packages/charts/src/chart_types/wordcloud/specs/index.ts
index beeb51028d6..90a77bd687b 100644
--- a/packages/charts/src/chart_types/wordcloud/specs/index.ts
+++ b/packages/charts/src/chart_types/wordcloud/specs/index.ts
@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { FontStyle } from '../../../common/text_utils';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { specComponentFactory } from '../../../state/spec_factory';
 import { RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import {
@@ -23,13 +23,6 @@ import {
   Configs as WordcloudConfigs,
 } from '../layout/types/viewmodel_types';
 
-const defaultProps = {
-  chartType: ChartType.Wordcloud,
-  specType: SpecType.Series,
-  ...defaultWordcloudSpec,
-  config,
-};
-
 export { WordModel, WeightFn, OutOfRoomCallback, WordcloudConfigs };
 
 /** @alpha */
@@ -53,28 +46,20 @@ export interface WordcloudSpec extends Spec {
   outOfRoomCallback: OutOfRoomCallback;
 }
 
-type SpecRequiredProps = Pick<WordcloudSpec, 'id'>;
-type SpecOptionalProps = Partial<Omit<WordcloudSpec, 'chartType' | 'specType' | 'id'>>;
-
-/** @alpha */
-export const Wordcloud: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    WordcloudSpec,
-    | 'chartType'
-    | 'startAngle'
-    | 'config'
-    | 'endAngle'
-    | 'angleCount'
-    | 'padding'
-    | 'fontWeight'
-    | 'fontFamily'
-    | 'fontStyle'
-    | 'minFontSize'
-    | 'maxFontSize'
-    | 'spiral'
-    | 'exponent'
-    | 'data'
-    | 'weightFn'
-    | 'outOfRoomCallback'
-  >(defaultProps),
+/**
+ * Adds wordcloud spec to chart
+ * @alpha
+ */
+export const Wordcloud = specComponentFactory<WordcloudSpec>()(
+  {
+    specType: SpecType.Series,
+    chartType: ChartType.Wordcloud,
+  },
+  {
+    ...defaultWordcloudSpec,
+    config,
+  },
 );
+
+/** @public */
+export type WordcloudProps = ComponentProps<typeof Wordcloud>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/area_series.ts b/packages/charts/src/chart_types/xy_chart/specs/area_series.ts
new file mode 100644
index 00000000000..b74b2fa79d2
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/area_series.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { AreaSeriesSpec, HistogramModeAlignments, DEFAULT_GLOBAL_ID, SeriesType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<AreaSeriesSpec<unknown>>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Area,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Linear,
+    yScaleType: ScaleType.Linear,
+    // xAccessor: 'x',
+    // yAccessors: ['y'],
+    hideInLegend: false,
+    histogramModeAlignment: HistogramModeAlignments.Center,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const AreaSeries = function <Datum extends BaseDatum>(
+  props: SFProps<
+    AreaSeriesSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<AreaSeriesSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type AreaSeriesProp = ComponentProps<typeof AreaSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/area_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/area_series.tsx
deleted file mode 100644
index 0e5231faf04..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/area_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { AreaSeriesSpec, HistogramModeAlignments, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Area,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Linear,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  histogramModeAlignment: HistogramModeAlignments.Center,
-};
-
-type SpecRequiredProps = Pick<AreaSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<AreaSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const AreaSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    AreaSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'histogramModeAlignment'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/axis.ts b/packages/charts/src/chart_types/xy_chart/specs/axis.ts
new file mode 100644
index 00000000000..7b5ce12da7a
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/axis.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { SpecType } from '../../../specs/constants';
+import { specComponentFactory } from '../../../state/spec_factory';
+import { Position } from '../../../utils/common';
+import { AxisSpec, DEFAULT_GLOBAL_ID } from '../utils/specs';
+
+/**
+ * Add axis spec to chart
+ * @public
+ */
+export const Axis = specComponentFactory<AxisSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Axis,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    hide: false,
+    showOverlappingTicks: false,
+    showOverlappingLabels: false,
+    position: Position.Left,
+  },
+);
+
+/** @public */
+export type AxisProps = ComponentProps<typeof Axis>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/axis.tsx b/packages/charts/src/chart_types/xy_chart/specs/axis.tsx
deleted file mode 100644
index d80e8c469d0..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/axis.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { Position } from '../../../utils/common';
-import { AxisSpec, DEFAULT_GLOBAL_ID } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Axis,
-  groupId: DEFAULT_GLOBAL_ID,
-  hide: false,
-  showOverlappingTicks: false,
-  showOverlappingLabels: false,
-  position: Position.Left,
-};
-
-type SpecRequired = Pick<AxisSpec, 'id'>;
-type SpecOptionals = Partial<Omit<AxisSpec, 'chartType' | 'specType' | 'seriesType' | 'id'>>;
-
-/** @public */
-export const Axis: React.FunctionComponent<SpecRequired & SpecOptionals> = getConnect()(
-  specComponentFactory<AxisSpec, 'groupId' | 'hide' | 'showOverlappingTicks' | 'showOverlappingLabels' | 'position'>(
-    defaultProps,
-  ),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bar_series.ts b/packages/charts/src/chart_types/xy_chart/specs/bar_series.ts
new file mode 100644
index 00000000000..55cd5b2431e
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/bar_series.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { useSpecFactory, SFProps, buildSFProps } from '../../../state/spec_factory';
+import { BarSeriesSpec, BaseDatum, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
+
+const buildProps = buildSFProps<BarSeriesSpec<unknown>>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Bar,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    // xAccessor: 'x',
+    // yAccessors: ['y'],
+    hideInLegend: false,
+    enableHistogramMode: false,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const BarSeries = function <Datum extends BaseDatum>(
+  props: SFProps<
+    BarSeriesSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<BarSeriesSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type BarSeriesProp = ComponentProps<typeof BarSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx
deleted file mode 100644
index 7006236bc77..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { BarSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Bar,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Ordinal,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  enableHistogramMode: false,
-};
-
-type SpecRequiredProps = Pick<BarSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<BarSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const BarSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    BarSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'enableHistogramMode'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts b/packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts
new file mode 100644
index 00000000000..5d1eb05751e
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { BaseDatum, BubbleSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
+
+const buildProps = buildSFProps<BubbleSeriesSpec<unknown>>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Bubble,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    // xAccessor: 'x',
+    // yAccessors: ['y'],
+    hideInLegend: false,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const BubbleSeries = function <Datum extends BaseDatum>(
+  props: SFProps<
+    BubbleSeriesSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<BubbleSeriesSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type BubbleSeriesProp = ComponentProps<typeof BubbleSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx
deleted file mode 100644
index ee37e0d0521..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { BubbleSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Bubble,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Ordinal,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-};
-type SpecRequiredProps = Pick<BubbleSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<BubbleSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/**
- * @alpha
- *
- * This series type uses a spatial index that is incompatible with other series types. This will
- * be fixed once an update has been made to the tooltip design.
- *
- * When used alone with other `BubbleSeries` the spatial index will be used. However when
- * mixed with other series types, the linear index will be used. This will affect highlighting
- * of points when using the `markSizeAccessor`.
- */
-export const BubbleSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    BubbleSeriesSpec,
-    'seriesType' | 'groupId' | 'xScaleType' | 'yScaleType' | 'xAccessor' | 'yAccessors' | 'hideInLegend'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts b/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts
new file mode 100644
index 00000000000..8a65cc23d0c
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { HistogramBarSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<HistogramBarSeriesSpec<unknown>>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Bar,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Linear,
+    yScaleType: ScaleType.Linear,
+    // xAccessor: 'x',
+    // yAccessors: ['y'],
+    hideInLegend: false,
+    enableHistogramMode: true as const,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const HistogramBarSeries = function <Datum extends BaseDatum>(
+  props: SFProps<
+    HistogramBarSeriesSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<HistogramBarSeriesSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type HistogramBarSeriesProp = ComponentProps<typeof HistogramBarSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx
deleted file mode 100644
index bd0d7e20b3a..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { HistogramBarSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Bar,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Linear,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  enableHistogramMode: true as const,
-};
-
-type SpecRequiredProps = Pick<HistogramBarSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<HistogramBarSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const HistogramBarSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    HistogramBarSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'enableHistogramMode'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts b/packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts
new file mode 100644
index 00000000000..9f11d02b643
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/merge_utils';
+import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<LineAnnotationSpec<unknown>>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Annotation,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    annotationType: AnnotationType.Line,
+    style: DEFAULT_ANNOTATION_LINE_STYLE,
+    hideLines: false,
+    hideTooltips: false,
+    hideLinesTooltips: true,
+    zIndex: 1,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const LineAnnotation = function <Datum extends BaseDatum>(
+  props: SFProps<
+    LineAnnotationSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<LineAnnotationSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type LineAnnotationProp = ComponentProps<typeof LineAnnotation>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx b/packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx
deleted file mode 100644
index e7f445de0bd..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/merge_utils';
-import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Annotation,
-  groupId: DEFAULT_GLOBAL_ID,
-  annotationType: AnnotationType.Line,
-  style: DEFAULT_ANNOTATION_LINE_STYLE,
-  hideLines: false,
-  hideTooltips: false,
-  hideLinesTooltips: true,
-  zIndex: 1,
-};
-
-type SpecRequiredProps = Pick<LineAnnotationSpec, 'id' | 'dataValues' | 'domainType'>;
-type SpecOptionalProps = Partial<
-  Omit<
-    LineAnnotationSpec,
-    'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'
-  >
->;
-
-/** @public */
-export const LineAnnotation: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<LineAnnotationSpec, 'groupId' | 'annotationType' | 'zIndex' | 'style'>(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_series.ts b/packages/charts/src/chart_types/xy_chart/specs/line_series.ts
new file mode 100644
index 00000000000..0659fb0f94e
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/line_series.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { SFProps, buildSFProps, useSpecFactory } from '../../../state/spec_factory';
+import { LineSeriesSpec, DEFAULT_GLOBAL_ID, HistogramModeAlignments, SeriesType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<LineSeriesSpec<unknown>>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Line,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    // xAccessor: 'x',
+    // yAccessors: ['y'],
+    hideInLegend: false,
+    histogramModeAlignment: HistogramModeAlignments.Center,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const LineSeries = function <Datum extends BaseDatum>(
+  props: SFProps<
+    LineSeriesSpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<LineSeriesSpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
+
+/** @public */
+export type LineSeriesProp = ComponentProps<typeof LineSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/line_series.tsx
deleted file mode 100644
index 3bde107fe9c..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/line_series.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { LineSeriesSpec, DEFAULT_GLOBAL_ID, HistogramModeAlignments, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Line,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Ordinal,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  histogramModeAlignment: HistogramModeAlignments.Center,
-};
-type SpecRequiredProps = Pick<LineSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<LineSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const LineSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    LineSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'histogramModeAlignment'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts b/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts
new file mode 100644
index 00000000000..59f28af53db
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { SpecType } from '../../../specs/constants';
+import { specComponentFactory } from '../../../state/spec_factory';
+import { DEFAULT_ANNOTATION_RECT_STYLE } from '../../../utils/themes/merge_utils';
+import { RectAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
+
+/** @public */
+export const RectAnnotation = specComponentFactory<RectAnnotationSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Annotation,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    annotationType: AnnotationType.Rectangle,
+    zIndex: -1,
+    style: DEFAULT_ANNOTATION_RECT_STYLE,
+    outside: false,
+  },
+);
+
+/** @public */
+export type RectAnnotationProps = ComponentProps<typeof RectAnnotation>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx b/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx
deleted file mode 100644
index 1d2a2601799..00000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { DEFAULT_ANNOTATION_RECT_STYLE } from '../../../utils/themes/merge_utils';
-import { RectAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Annotation,
-  groupId: DEFAULT_GLOBAL_ID,
-  annotationType: AnnotationType.Rectangle,
-  zIndex: -1,
-  style: DEFAULT_ANNOTATION_RECT_STYLE,
-  outside: false,
-};
-
-/** @public */
-export const RectAnnotation: React.FunctionComponent<
-  Pick<RectAnnotationSpec, 'id' | 'dataValues'> &
-    Partial<
-      Omit<
-        RectAnnotationSpec,
-        'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'
-      >
-    >
-> = getConnect()(
-  specComponentFactory<RectAnnotationSpec, 'groupId' | 'annotationType' | 'zIndex' | 'style'>(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/utils/specs.ts b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
index b30231657a5..62773bfeb4f 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/specs.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
@@ -17,8 +17,8 @@ import { ScaleType } from '../../../scales/constants';
 import { LogScaleOptions } from '../../../scales/scale_continuous';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { Accessor, AccessorFormat, AccessorFn } from '../../../utils/accessor';
-import { RecursivePartial, Position, Datum } from '../../../utils/common';
+import { AccessorFormat, AccessorFn } from '../../../utils/accessor';
+import { RecursivePartial, Position } from '../../../utils/common';
 import { CurveType } from '../../../utils/curves';
 import { OrdinalDomain } from '../../../utils/domain';
 import { AxisId, GroupId } from '../../../utils/ids';
@@ -400,7 +400,7 @@ export interface DisplayValueSpec {
 }
 
 /** @public */
-export interface SeriesSpec extends Spec {
+export interface SeriesSpec<D extends BaseDatum> extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.XYAxis;
   /**
@@ -419,7 +419,7 @@ export interface SeriesSpec extends Spec {
    */
   useDefaultGroupDomain?: boolean | string;
   /** An array of data */
-  data: Datum[];
+  data: D[];
   /** The type of series you are looking to render */
   seriesType: SeriesType;
   /** Set colors for specific series */
@@ -483,23 +483,23 @@ export type SeriesColorAccessorFn = (seriesIdentifier: XYChartSeriesIdentifier)
 export type SeriesColorAccessor = string | SeriesColorsArray | SeriesColorAccessorFn;
 
 /** @public */
-export interface SeriesAccessors {
+export interface SeriesAccessors<D extends BaseDatum = any> {
   /** The field name of the x value on Datum object */
-  xAccessor: Accessor | AccessorFn;
+  xAccessor: keyof D | AccessorFn<D>;
   /** An array of field names one per y metric value */
-  yAccessors: (Accessor | AccessorFn)[];
+  yAccessors: (keyof D | AccessorFn<D>)[];
   /** An optional accessor of the y0 value: base point for area/bar charts  */
-  y0Accessors?: (Accessor | AccessorFn)[];
+  y0Accessors?: (keyof D | AccessorFn<D>)[];
   /** An array of fields thats indicates the datum series membership */
-  splitSeriesAccessors?: (Accessor | AccessorFn)[];
+  splitSeriesAccessors?: (keyof D | AccessorFn<D>)[];
   /** An array of fields thats indicates the stack membership */
-  stackAccessors?: (Accessor | AccessorFn)[];
+  stackAccessors?: (keyof D | AccessorFn<D>)[];
   /**
    * Field name of mark size metric on `Datum`
    *
    * Only used with line/area series
    */
-  markSizeAccessor?: Accessor | AccessorFn;
+  markSizeAccessor?: keyof D | AccessorFn<D>;
 }
 
 /** @public */
@@ -536,27 +536,36 @@ export interface SeriesScales {
   yNice?: boolean;
 }
 
+type MarkFormatter<Type extends string = ''> = Type extends 'bar'
+  ? // eslint-disable-next-line @typescript-eslint/ban-types
+    {} // these options are to be empty thus {}
+  : {
+      /**
+       * A function called to format every single mark value
+       *
+       * Only used with line/area series
+       */
+      markFormat?: TickFormatter<number>;
+    };
+
 /** @public */
 
-export type BasicSeriesSpec = SeriesSpec &
-  SeriesAccessors &
-  SeriesScales & {
-    /**
-     * A function called to format every single mark value
-     *
-     * Only used with line/area series
-     */
-    markFormat?: TickFormatter<number>;
-  };
+export type BasicSeriesSpec<D extends BaseDatum, Type extends string = ''> = SeriesSpec<D> &
+  SeriesAccessors<D> &
+  SeriesScales &
+  MarkFormatter<Type>;
 
 /** @public */
-export type SeriesSpecs<S extends BasicSeriesSpec = BasicSeriesSpec> = Array<S>;
+export type SeriesSpecs<D extends BaseDatum, S extends BasicSeriesSpec<D> = BasicSeriesSpec<D>> = Array<S>;
+
+/** @internal */
+export type BaseDatum = Record<string, unknown> | unknown;
 
 /**
  * This spec describe the dataset configuration used to display a bar series.
  * @public
  */
-export type BarSeriesSpec = BasicSeriesSpec &
+export type BarSeriesSpec<D extends BaseDatum> = BasicSeriesSpec<D, 'bar'> &
   Postfixes & {
     /** @defaultValue `bar` {@link (SeriesType:type) | SeriesType.Bar} */
     seriesType: typeof SeriesType.Bar;
@@ -588,7 +597,7 @@ export type BarSeriesSpec = BasicSeriesSpec &
  * A histogram bar series is identical to a bar series except that stackAccessors are not allowed.
  * @public
  */
-export type HistogramBarSeriesSpec = Omit<BarSeriesSpec, 'stackAccessors'> & {
+export type HistogramBarSeriesSpec<D extends BaseDatum> = Omit<BarSeriesSpec<D>, 'stackAccessors'> & {
   enableHistogramMode: true;
 };
 
@@ -616,7 +625,7 @@ export type FitConfig = {
  * This spec describe the dataset configuration used to display a line series.
  * @public
  */
-export type LineSeriesSpec = BasicSeriesSpec &
+export type LineSeriesSpec<D extends BaseDatum> = BasicSeriesSpec<D, 'line'> &
   HistogramConfig & {
     /** @defaultValue `line` {@link (SeriesType:type) | SeriesType.Line} */
     seriesType: typeof SeriesType.Line;
@@ -637,7 +646,7 @@ export type LineSeriesSpec = BasicSeriesSpec &
  *
  * @alpha
  */
-export type BubbleSeriesSpec = BasicSeriesSpec & {
+export type BubbleSeriesSpec<D extends BaseDatum> = BasicSeriesSpec<D, 'bubble'> & {
   /** @defaultValue `bubble` {@link (SeriesType:type) | SeriesType.Bubble} */
   seriesType: typeof SeriesType.Bubble;
   bubbleSeriesStyle?: RecursivePartial<BubbleSeriesStyle>;
@@ -651,7 +660,7 @@ export type BubbleSeriesSpec = BasicSeriesSpec & {
  * This spec describe the dataset configuration used to display an area series.
  * @public
  */
-export type AreaSeriesSpec = BasicSeriesSpec &
+export type AreaSeriesSpec<D extends BaseDatum> = BasicSeriesSpec<D, 'area'> &
   HistogramConfig &
   Postfixes & {
     /** @defaultValue `area` {@link (SeriesType:type) | SeriesType.Area} */
@@ -789,11 +798,11 @@ export type AnnotationDomainType = $Values<typeof AnnotationDomainType>;
  * The descriptive object of a line annotation
  * @public
  */
-export interface LineAnnotationDatum {
+export interface LineAnnotationDatum<D extends BaseDatum> {
   /**
    * The value on the x or y axis accordingly to the domainType configured
    */
-  dataValue: any;
+  dataValue: D;
   /**
    * A textual description of the annotation
    */
@@ -805,9 +814,9 @@ export interface LineAnnotationDatum {
 }
 
 /** @public */
-export type LineAnnotationSpec = BaseAnnotationSpec<
+export type LineAnnotationSpec<D extends BaseDatum> = BaseAnnotationSpec<
   typeof AnnotationType.Line,
-  LineAnnotationDatum,
+  LineAnnotationDatum<D>,
   LineAnnotationStyle
 > & {
   domainType: AnnotationDomainType;
@@ -927,7 +936,7 @@ export type AnnotationPortalSettings = TooltipPortalSettings<'chart'> & {
 /** @public */
 export interface BaseAnnotationSpec<
   T extends typeof AnnotationType.Rectangle | typeof AnnotationType.Line,
-  D extends RectAnnotationDatum | LineAnnotationDatum,
+  D extends RectAnnotationDatum | LineAnnotationDatum<unknown>,
   S extends RectAnnotationStyle | LineAnnotationStyle
 > extends Spec,
     AnnotationPortalSettings {
@@ -962,10 +971,10 @@ export interface BaseAnnotationSpec<
 }
 
 /** @public */
-export type AnnotationSpec = LineAnnotationSpec | RectAnnotationSpec;
+export type AnnotationSpec<D extends BaseDatum = any> = LineAnnotationSpec<D> | RectAnnotationSpec;
 
 /** @internal */
-export function isLineAnnotation(spec: AnnotationSpec): spec is LineAnnotationSpec {
+export function isLineAnnotation<D extends BaseDatum>(spec: AnnotationSpec<D>): spec is LineAnnotationSpec<D> {
   return spec.annotationType === AnnotationType.Line;
 }
 
@@ -975,22 +984,22 @@ export function isRectAnnotation(spec: AnnotationSpec): spec is RectAnnotationSp
 }
 
 /** @internal */
-export function isBarSeriesSpec(spec: BasicSeriesSpec): spec is BarSeriesSpec {
+export function isBarSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is BarSeriesSpec<D> {
   return spec.seriesType === SeriesType.Bar;
 }
 
 /** @internal */
-export function isBubbleSeriesSpec(spec: BasicSeriesSpec): spec is BubbleSeriesSpec {
+export function isBubbleSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is BubbleSeriesSpec<D> {
   return spec.seriesType === SeriesType.Bubble;
 }
 
 /** @internal */
-export function isLineSeriesSpec(spec: BasicSeriesSpec): spec is LineSeriesSpec {
+export function isLineSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is LineSeriesSpec<D> {
   return spec.seriesType === SeriesType.Line;
 }
 
 /** @internal */
-export function isAreaSeriesSpec(spec: BasicSeriesSpec): spec is AreaSeriesSpec {
+export function isAreaSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is AreaSeriesSpec<D> {
   return spec.seriesType === SeriesType.Area;
 }
 
diff --git a/packages/charts/src/specs/constants.ts b/packages/charts/src/specs/constants.ts
index 1cedd906136..2011972d7ba 100644
--- a/packages/charts/src/specs/constants.ts
+++ b/packages/charts/src/specs/constants.ts
@@ -10,6 +10,7 @@ import { $Values } from 'utility-types';
 
 import { ChartType } from '../chart_types';
 import { BOTTOM, CENTER, LEFT, MIDDLE, RIGHT, TOP } from '../common/constants';
+import { buildSFProps } from '../state/spec_factory';
 import { Position } from '../utils/common';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 import { SettingsSpec } from './settings';
@@ -159,27 +160,37 @@ export const DEFAULT_TOOLTIP_CONFIG = {
   showNullValues: false,
 };
 
-/** @public */
-export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
-  id: '__global__settings___',
-  chartType: ChartType.Global,
-  specType: SpecType.Settings,
-  rendering: 'canvas' as const,
-  rotation: 0 as const,
-  animateData: true,
-  resizeDebounce: 10,
-  debug: false,
-  tooltip: DEFAULT_TOOLTIP_CONFIG,
-  pointerUpdateTrigger: PointerUpdateTrigger.X,
-  externalPointerEvents: {
-    tooltip: {
-      visible: false,
+/** @internal */
+export const settingsBuildProps = buildSFProps<SettingsSpec>()(
+  {
+    id: '__global__settings___' as const,
+    chartType: ChartType.Global,
+    specType: SpecType.Settings,
+  },
+  {
+    rendering: 'canvas' as const,
+    rotation: 0 as const,
+    animateData: true,
+    resizeDebounce: 10,
+    debug: false,
+    tooltip: DEFAULT_TOOLTIP_CONFIG,
+    pointerUpdateTrigger: PointerUpdateTrigger.X,
+    externalPointerEvents: {
+      tooltip: {
+        visible: false,
+      },
     },
+    baseTheme: LIGHT_THEME,
+    brushAxis: BrushAxis.X,
+    minBrushDelta: 2,
+    ariaUseDefaultSummary: true,
+    ariaLabelHeadingLevel: 'p',
+    ...DEFAULT_LEGEND_CONFIG,
   },
-  baseTheme: LIGHT_THEME,
-  brushAxis: BrushAxis.X,
-  minBrushDelta: 2,
-  ariaUseDefaultSummary: true,
-  ariaLabelHeadingLevel: 'p',
-  ...DEFAULT_LEGEND_CONFIG,
+);
+
+/** @public */
+export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
+  ...settingsBuildProps.defaults,
+  ...settingsBuildProps.overrides,
 };
diff --git a/packages/charts/src/specs/group_by.ts b/packages/charts/src/specs/group_by.ts
index 8a72f3dd328..d6370d9e287 100644
--- a/packages/charts/src/specs/group_by.ts
+++ b/packages/charts/src/specs/group_by.ts
@@ -6,16 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
-import { Spec } from '.';
+import { BaseDatum, Spec } from '.';
 import { ChartType } from '../chart_types';
 import { Predicate } from '../common/predicate';
-import { getConnect, specComponentFactory } from '../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../state/spec_factory';
 import { SpecType } from './constants';
 
 /** @public */
-export type GroupByAccessor = (spec: Spec, datum: any) => string | number;
+export type GroupByAccessor<D extends BaseDatum = any> = (spec: Spec, datum: D) => string | number;
 /** @alpha */
 export type GroupBySort = Predicate;
 
@@ -23,14 +23,14 @@ export type GroupBySort = Predicate;
  * Title formatter that handles any value returned from the GroupByAccessor
  * @public
  */
-export type GroupByFormatter = (value: ReturnType<GroupByAccessor>) => string;
+export type GroupByFormatter<D extends BaseDatum = any> = (value: ReturnType<GroupByAccessor<D>>) => string;
 
 /** @alpha */
-export interface GroupBySpec extends Spec {
+export interface GroupBySpec<D extends BaseDatum = any> extends Spec {
   /**
    * Function to return a unique value __by__ which to group the data
    */
-  by: GroupByAccessor;
+  by: GroupByAccessor<D>;
   /**
    * Sort predicate used to sort grouped data
    */
@@ -40,19 +40,34 @@ export interface GroupBySpec extends Spec {
    *
    * Only for displayed values, not used in sorting or other internal computations.
    */
-  format?: GroupByFormatter;
+  format?: GroupByFormatter<D>;
 }
-const DEFAULT_GROUP_BY_PROPS = {
-  chartType: ChartType.Global,
-  specType: SpecType.IndexOrder,
-};
 
-type DefaultGroupByProps = 'chartType' | 'specType';
+const buildProps = buildSFProps<GroupBySpec<unknown>>()(
+  {
+    chartType: ChartType.Global,
+    specType: SpecType.IndexOrder,
+  },
+  {},
+);
 
-/** @alpha */
-export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;
+/**
+ * Add GroupBy spec to chart
+ * @public
+ */
+export const GroupBy = function <Datum extends BaseDatum>(
+  props: SFProps<
+    GroupBySpec<Datum>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<GroupBySpec<Datum>>({ ...defaults, ...props, ...overrides });
+  return null;
+};
 
-/** @alpha */
-export const GroupBy: React.FunctionComponent<GroupByProps> = getConnect()(
-  specComponentFactory<GroupBySpec, DefaultGroupByProps>(DEFAULT_GROUP_BY_PROPS),
-);
+/** @public */
+export type GroupByProps = ComponentProps<typeof GroupBy>;
diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx
index f2bd1ac208e..ae91ea9dbc3 100644
--- a/packages/charts/src/specs/settings.tsx
+++ b/packages/charts/src/specs/settings.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { ComponentType, ReactChild } from 'react';
+import { ComponentProps, ComponentType, ReactChild } from 'react';
 
 import { CustomXDomain, GroupByAccessor, Spec, TooltipStickTo } from '.';
 import { Cell } from '../chart_types/heatmap/layout/types/viewmodel_types';
@@ -21,7 +21,7 @@ import { TooltipPortalSettings } from '../components';
 import { CustomTooltip } from '../components/tooltip/types';
 import { ScaleContinuousType, ScaleOrdinalType } from '../scales';
 import { LegendPath } from '../state/actions/legend';
-import { getConnect, specComponentFactory } from '../state/spec_factory';
+import { SFProps, useSpecFactory } from '../state/spec_factory';
 import { Accessor } from '../utils/accessor';
 import {
   HorizontalAlignment,
@@ -38,12 +38,12 @@ import { PartialTheme, Theme } from '../utils/themes/theme';
 import {
   BinAgg,
   BrushAxis,
-  DEFAULT_SETTINGS_SPEC,
   DEFAULT_TOOLTIP_CONFIG,
   Direction,
   PointerEventType,
   PointerUpdateTrigger,
   TooltipType,
+  settingsBuildProps,
 } from './constants';
 
 /** @public */
@@ -174,7 +174,7 @@ export type BasicListener = () => undefined | void;
 /** @public */
 export type RectAnnotationEvent = { id: SpecId; datum: RectAnnotationDatum };
 /** @public */
-export type LineAnnotationEvent = { id: SpecId; datum: LineAnnotationDatum };
+export type LineAnnotationEvent = { id: SpecId; datum: LineAnnotationDatum<any> };
 /** @public */
 export type AnnotationClickListener = (annotations: {
   rects: RectAnnotationEvent[];
@@ -681,38 +681,26 @@ export interface OrderBy {
   direction?: Direction;
 }
 
-/** @public */
-export type DefaultSettingsProps =
-  | 'id'
-  | 'chartType'
-  | 'specType'
-  | 'rendering'
-  | 'rotation'
-  | 'resizeDebounce'
-  | 'pointerUpdateDebounce'
-  | 'pointerUpdateTrigger'
-  | 'animateData'
-  | 'debug'
-  | 'tooltip'
-  | 'theme'
-  | 'brushAxis'
-  | 'minBrushDelta'
-  | 'externalPointerEvents'
-  | 'showLegend'
-  | 'showLegendExtra'
-  | 'legendPosition'
-  | 'legendMaxDepth'
-  | 'ariaUseDefaultSummary'
-  | 'ariaLabelHeadingLevel'
-  | 'ariaTableCaption';
-
-/** @public */
-export type SettingsSpecProps = Partial<Omit<SettingsSpec, 'chartType' | 'specType' | 'id'>>;
+/**
+ * Adds settings spec to chart specs
+ * @public
+ */
+export const Settings = function (
+  props: SFProps<
+    SettingsSpec,
+    keyof typeof settingsBuildProps['overrides'],
+    keyof typeof settingsBuildProps['defaults'],
+    keyof typeof settingsBuildProps['optionals'],
+    keyof typeof settingsBuildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = settingsBuildProps;
+  useSpecFactory<SettingsSpec>({ ...defaults, ...props, ...overrides });
+  return null;
+};
 
 /** @public */
-export const Settings: React.FunctionComponent<SettingsSpecProps> = getConnect()(
-  specComponentFactory<SettingsSpec, DefaultSettingsProps>(DEFAULT_SETTINGS_SPEC),
-);
+export type SettingsProp = ComponentProps<typeof Settings>;
 
 /** @internal */
 export function isPointerOutEvent(event: PointerEvent | null | undefined): event is PointerOutEvent {
diff --git a/packages/charts/src/specs/small_multiples.ts b/packages/charts/src/specs/small_multiples.ts
index 91433c12c0d..1bc9dac91cc 100644
--- a/packages/charts/src/specs/small_multiples.ts
+++ b/packages/charts/src/specs/small_multiples.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { Spec } from '.';
 import { ChartType } from '../chart_types';
 import { Ratio } from '../common/geometry';
-import { getConnect, specComponentFactory } from '../state/spec_factory';
+import { specComponentFactory } from '../state/spec_factory';
 import { SpecType } from './constants';
 
 /**
@@ -70,16 +70,18 @@ export interface SmallMultiplesSpec extends Spec {
   style?: Partial<SmallMultiplesStyle>;
 }
 
-const DEFAULT_SMALL_MULTIPLES_PROPS = {
-  id: '__global__small_multiples___',
-  chartType: ChartType.Global,
-  specType: SpecType.SmallMultiples,
-};
-
-/** @alpha */
-export type SmallMultiplesProps = Partial<Omit<SmallMultiplesSpec, 'chatType' | 'specType'>>;
-
-/** @alpha */
-export const SmallMultiples: React.FunctionComponent<SmallMultiplesProps> = getConnect()(
-  specComponentFactory<SmallMultiplesSpec, 'id'>(DEFAULT_SMALL_MULTIPLES_PROPS),
+/**
+ * Add small multiples spec to chart
+ * @alpha
+ */
+export const SmallMultiples = specComponentFactory<SmallMultiplesSpec>()(
+  {
+    id: '__global__small_multiples___',
+    chartType: ChartType.Global,
+    specType: SpecType.SmallMultiples,
+  },
+  {},
 );
+
+/** @public */
+export type SmallMultiplesProps = ComponentProps<typeof SmallMultiples>;
diff --git a/packages/charts/src/state/spec_factory.ts b/packages/charts/src/state/spec_factory.ts
index b65f89e2417..6b648d7992a 100644
--- a/packages/charts/src/state/spec_factory.ts
+++ b/packages/charts/src/state/spec_factory.ts
@@ -6,59 +6,161 @@
  * Side Public License, v 1.
  */
 
-import { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { Dispatch, bindActionCreators } from 'redux';
+import { FC, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { OptionalKeys, RequiredKeys } from 'utility-types';
 
-import { Spec } from '../specs';
-import { upsertSpec, removeSpec } from './actions/specs';
+import { Spec as Spec } from '../specs';
+import { upsertSpec as upsertSpecAction, removeSpec as removeSpecAction } from './actions/specs';
 
 /** @internal */
 export interface DispatchProps {
-  upsertSpec: (spec: Spec) => void;
-  removeSpec: (id: string) => void;
+  upsertSpec: typeof upsertSpecAction;
+  removeSpec: typeof removeSpecAction;
 }
 
-/** @internal */
-export function specComponentFactory<U extends Spec, D extends keyof U>(
-  defaultProps: Pick<U, D | 'chartType' | 'specType'>,
-) {
-  /* eslint-disable no-shadow, react-hooks/exhaustive-deps, unicorn/consistent-function-scoping */
-  const SpecInstance = (props: U & DispatchProps) => {
-    const { removeSpec, upsertSpec, ...SpecInstance } = props;
-    useEffect(() => {
-      upsertSpec(SpecInstance);
-    });
-    useEffect(
-      () => () => {
-        removeSpec(props.id);
-      },
-      [],
-    );
-    return null;
-  };
-  /* eslint-enable */
-  SpecInstance.defaultProps = defaultProps;
-  return SpecInstance;
-}
+/**
+ * Used inside custom spec component to link component to state as new spec
+ * @internal
+ */
+export function useSpecFactory<Props extends Spec>(props: Props) {
+  const dispatch = useDispatch();
+  const { upsertSpec, removeSpec } = useMemo(
+    () => ({
+      upsertSpec: bindActionCreators(upsertSpecAction, dispatch),
+      removeSpec: bindActionCreators(removeSpecAction, dispatch),
+    }),
+    [dispatch],
+  );
 
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps =>
-  bindActionCreators(
-    {
-      upsertSpec,
-      removeSpec,
+  useEffect(() => {
+    upsertSpec(props);
+  });
+  useEffect(
+    () => () => {
+      removeSpec(props.id);
     },
-    dispatch,
+    [], // eslint-disable-line react-hooks/exhaustive-deps
   );
+}
+
+/**
+ * Creates spec component factory given overrides and default props.
+ *
+ * To use this you must pass the Spec type via empty function call...
+ *
+ * ```ts
+ * const MyThing = specComponentFactory<MyThingSpec>()(overrides, defaults)
+ * ```
+ *
+ * > IMPORTANT: Both `overrides` and `defaults` should __NOT__ have explicit types.
+ * > The types are determined automatically from thier implicitly defined types, while still
+ * > enforing that the types are derived from the defined `Spec`.
+ * @internal
+ */
+export const specComponentFactory = <S extends Spec>() => <
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+>(
+  overrides: SFOverrides<S, Overrides>,
+  defaults: SFDefaults<S, Overrides, Defaults>,
+): FC<SFProps<S, Overrides, Defaults, Optionals, Requires>> => {
+  return (props) => {
+    // @ts-ignore - All Spec keys are guaranteed to be included
+    useSpecFactory<S>({ ...defaults, ...props, ...overrides });
+    return null;
+  };
+};
+
+/**
+ * Takes in prop overrides and defaults with enforced types.
+ * Determines implicit types of optional and required props.
+ *
+ * To use this you must pass the Spec type via empty function call...
+ *
+ * ```ts
+ * const MyThingBuildProps = buildSFProps<MyThingSpec>()(overrides, defaults)
+ * ```
+ *
+ * > IMPORTANT: Both `overrides` and `defaults` should __NOT__ have explicit types.
+ * > The types are determined automatically from thier implicitly defined types, while still
+ * > enforing that the types are derived from the defined `Spec`.
+ * @internal
+ */
+export const buildSFProps = <S extends Spec>() => <
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+>(
+  overrides: SFOverrides<S, Overrides>,
+  defaults: SFDefaults<S, Overrides, Defaults>,
+): BuildProps<S, Overrides, Defaults, Optionals, Requires> => ({
+  overrides,
+  defaults,
+  optionals: {} as Pick<S, Optionals>, // used to transfer type only
+  requires: {} as Pick<S, Requires>, // used to transfer type only
+});
+
+/*
+------------------------------------------------------------
+  Reused types to maintain single source of truth
+------------------------------------------------------------
+*/
+
+/**
+ * Resulting props for spec given overrides, defaults, optionals and required props
+ * @internal
+ */
+export type SFProps<
+  S extends Spec,
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+> = Pick<S, Optionals | Requires> & Partial<Pick<S, Defaults>>;
 
 /** @internal */
-export function getConnect() {
-  /**
-   * Redux assumes shallowEqual for all connected components
-   *
-   * This causes an issue where the specs are cleared and memoized spec components will never be
-   * re-rendered and thus never re-upserted to the state. Setting pure to false solves this issue
-   * and doesn't cause traditional performance degradations.
-   */
-  return connect(null, mapDispatchToProps, null, { pure: false });
+export interface BuildProps<
+  S extends Spec,
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+> {
+  overrides: SFOverrides<S, Overrides>;
+  defaults: SFDefaults<S, Overrides, Defaults>;
+  /** @deprecated typing only do not use as value */
+  optionals: Pick<S, Optionals>;
+  /** @deprecated typing only do not use as value */
+  requires: Pick<S, Requires>;
 }
+
+/** All specs __must__ provide these as overrides */
+type RequiredSpecProps = keyof Pick<Spec, 'chartType' | 'specType'>;
+
+/* Types defining keys */
+type SFOverrideKeys<S extends Spec> = keyof S;
+type SFDefaultKeys<S extends Spec, Overrides extends keyof S> = keyof Omit<S, Overrides>;
+type SFOptionalKeys<
+  S extends Spec,
+  Overrides extends keyof S,
+  Defaults extends keyof Omit<S, Overrides>
+> = OptionalKeys<Omit<S, Overrides | Defaults>>;
+type SFRequiredKeys<
+  S extends Spec,
+  Overrides extends keyof S,
+  Defaults extends keyof Omit<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>
+> = RequiredKeys<Omit<S, Overrides | Defaults | Optionals>>;
+
+/* Object types defined from key types above */
+type SFOverrides<S extends Spec, Overrides extends keyof S> = Required<Pick<S, Overrides | RequiredSpecProps>>;
+type SFDefaults<
+  S extends Spec,
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>
+> = Required<Pick<S, Defaults>>;
diff --git a/packages/charts/src/utils/accessor.ts b/packages/charts/src/utils/accessor.ts
index ecb8b617f05..25e98190beb 100644
--- a/packages/charts/src/utils/accessor.ts
+++ b/packages/charts/src/utils/accessor.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { BaseDatum } from '../chart_types/specs';
 import { Datum } from './common';
 
 /**
@@ -13,12 +14,12 @@ import { Datum } from './common';
  * @param datum - the datum
  * @public
  */
-export interface UnaryAccessorFn<Return = any> {
+export interface UnaryAccessorFn<D extends BaseDatum = any, Return = any> {
   /**
    * Name used as accessor field name in place of function reference
    */
   fieldName?: string;
-  (datum: Datum): Return;
+  (datum: D): Return;
 }
 
 /**
@@ -27,19 +28,21 @@ export interface UnaryAccessorFn<Return = any> {
  * @param index - the index in the array
  * @public
  */
-export type BinaryAccessorFn<Return = any> = (datum: Datum, index: number) => Return;
+export type BinaryAccessorFn<D extends BaseDatum = any, Return = any> = (datum: D, index: number) => Return;
 
 /**
  * An accessor function
  * @public
  */
-export type AccessorFn = UnaryAccessorFn;
+export type AccessorFn<D extends BaseDatum = any, R = any> = UnaryAccessorFn<D, R>;
 
 /**
  * An indexed accessor function
  * @public
  */
-export type IndexedAccessorFn = UnaryAccessorFn | BinaryAccessorFn;
+export type IndexedAccessorFn<D extends BaseDatum = any, Return = any> =
+  | UnaryAccessorFn<D, Return>
+  | BinaryAccessorFn<D, Return>;
 
 /**
  * A key accessor string
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx
index d2c5addf0c5..c952e2b882e 100644
--- a/packages/charts/src/utils/common.tsx
+++ b/packages/charts/src/utils/common.tsx
@@ -13,6 +13,7 @@ import { v1 as uuidV1 } from 'uuid';
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { Color, Colors } from '../common/colors';
 import { Degrees, Radian } from '../common/geometry';
+import { BaseDatum } from '../specs';
 import { AdditiveNumber } from './accessor';
 import { Point } from './point';
 
@@ -448,7 +449,7 @@ export function getUniqueValues<T>(fullArray: T[], uniqueProperty: keyof T, filt
 /** @public */
 export type ValueFormatter = (value: number) => string;
 /** @public */
-export type ValueAccessor = (d: Datum) => AdditiveNumber;
+export type ValueAccessor<D extends BaseDatum> = (d: D) => AdditiveNumber;
 /** @public */
 export type LabelAccessor<T = PrimitiveValue> = (value: T) => string;
 /** @public */

From c63295dcf9227f107c2dc79c255e69e4d36ebf34 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 13 Oct 2021 18:03:50 -0500
Subject: [PATCH 2/3] feat(settings): expose global charts context for settings

---
 .../server/generate/vrt_page_template.js      | 16 +++++------
 packages/charts/src/specs/context.ts          | 26 +++++++++++++++++
 packages/charts/src/specs/index.ts            |  1 +
 packages/charts/src/specs/settings.tsx        | 28 +++++++++++--------
 packages/charts/src/utils/common.test.ts      | 11 ++++++++
 packages/charts/src/utils/common.tsx          |  9 ++++++
 6 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 packages/charts/src/specs/context.ts

diff --git a/integration/server/generate/vrt_page_template.js b/integration/server/generate/vrt_page_template.js
index 4915989a36f..2b8481ceaab 100644
--- a/integration/server/generate/vrt_page_template.js
+++ b/integration/server/generate/vrt_page_template.js
@@ -41,8 +41,7 @@ ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElemen
 
 function pageTemplate(imports, routes, urls) {
   return `
-import React, { Suspense } from 'react';
-import { ThemeIdProvider, BackgroundIdProvider } from '../../storybook/use_base_theme';
+import React, { Suspense, useMemo } from 'react';
 import { useGlobalsParameters } from '../server/mocks/use_global_parameters';
 
 export function VRTPage() {
@@ -52,6 +51,7 @@ export function VRTPage() {
     setParams,
   } = useGlobalsParameters();
   const urlParams = new URL(window.location.toString()).searchParams;
+  const contextValue = useMemo(() => getContext(themeId, backgroundId), [themeId, backgroundId]);
   ${imports.join('\n  ')}
 
   const path = urlParams.get('path');
@@ -68,13 +68,11 @@ export function VRTPage() {
     </>);
   }
   return (
-    <ThemeIdProvider value={themeId as any}>
-      <BackgroundIdProvider value={backgroundId}>
-        <Suspense fallback={<div>Loading...</div>}>
-          ${routes.join('\n          ')}
-        </Suspense>
-      </BackgroundIdProvider>
-    </ThemeIdProvider>
+    <ElasticChartsProvider value={contextValue}>
+      <Suspense fallback={<div>Loading...</div>}>
+        ${routes.join('\n          ')}
+      </Suspense>
+    </ElasticChartsProvider>
   );
 }
 
diff --git a/packages/charts/src/specs/context.ts b/packages/charts/src/specs/context.ts
new file mode 100644
index 00000000000..fa6f9ca8e5c
--- /dev/null
+++ b/packages/charts/src/specs/context.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createContext, useContext } from 'react';
+
+import { SettingsProps } from './settings';
+
+/** @internal */
+export interface EchContext {
+  settings?: SettingsProps;
+}
+const ElasticChartsContext = createContext<EchContext>({});
+
+/**
+ * Context used to control elastic chart options globally
+ * @public
+ */
+export const ElasticChartsProvider = ElasticChartsContext.Provider;
+
+/** @internal */
+export const useChartsContext = () => useContext(ElasticChartsContext);
diff --git a/packages/charts/src/specs/index.ts b/packages/charts/src/specs/index.ts
index 274af649d59..fa24cd923ae 100644
--- a/packages/charts/src/specs/index.ts
+++ b/packages/charts/src/specs/index.ts
@@ -22,4 +22,5 @@ export * from './group_by';
 export * from './small_multiples';
 export * from './settings';
 export * from './constants';
+export * from './context';
 export * from '../chart_types/specs';
diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx
index ae91ea9dbc3..a2b2a8ddb48 100644
--- a/packages/charts/src/specs/settings.tsx
+++ b/packages/charts/src/specs/settings.tsx
@@ -24,6 +24,7 @@ import { LegendPath } from '../state/actions/legend';
 import { SFProps, useSpecFactory } from '../state/spec_factory';
 import { Accessor } from '../utils/accessor';
 import {
+  getArrayOf,
   HorizontalAlignment,
   LayoutDirection,
   Position,
@@ -45,6 +46,7 @@ import {
   TooltipType,
   settingsBuildProps,
 } from './constants';
+import { useChartsContext } from './context';
 
 /** @public */
 export interface LayerValue {
@@ -685,22 +687,26 @@ export interface OrderBy {
  * Adds settings spec to chart specs
  * @public
  */
-export const Settings = function (
-  props: SFProps<
-    SettingsSpec,
-    keyof typeof settingsBuildProps['overrides'],
-    keyof typeof settingsBuildProps['defaults'],
-    keyof typeof settingsBuildProps['optionals'],
-    keyof typeof settingsBuildProps['requires']
-  >,
-) {
+export const Settings = function ({
+  theme: userTheme = [],
+  ...props
+}: SFProps<
+  SettingsSpec,
+  keyof typeof settingsBuildProps['overrides'],
+  keyof typeof settingsBuildProps['defaults'],
+  keyof typeof settingsBuildProps['optionals'],
+  keyof typeof settingsBuildProps['requires']
+>) {
   const { defaults, overrides } = settingsBuildProps;
-  useSpecFactory<SettingsSpec>({ ...defaults, ...props, ...overrides });
+  const { theme: contextTheme = [], ...contextSettings } = useChartsContext()?.settings ?? {};
+  const theme = [...getArrayOf(userTheme), ...getArrayOf(contextTheme)];
+
+  useSpecFactory<SettingsSpec>({ ...defaults, ...contextSettings, ...props, theme, ...overrides });
   return null;
 };
 
 /** @public */
-export type SettingsProp = ComponentProps<typeof Settings>;
+export type SettingsProps = ComponentProps<typeof Settings>;
 
 /** @internal */
 export function isPointerOutEvent(event: PointerEvent | null | undefined): event is PointerOutEvent {
diff --git a/packages/charts/src/utils/common.test.ts b/packages/charts/src/utils/common.test.ts
index df75353cc67..37e34ba3973 100644
--- a/packages/charts/src/utils/common.test.ts
+++ b/packages/charts/src/utils/common.test.ts
@@ -20,6 +20,7 @@ import {
   isUniqueArray,
   isDefined,
   isDefinedFrom,
+  getArrayOf,
 } from './common';
 
 describe('common utilities', () => {
@@ -1131,4 +1132,14 @@ describe('#isDefinedFrom', () => {
     );
     expect(result).toEqual(values.slice(0, 3));
   });
+
+  describe('#getArrayOf', () => {
+    const obj = { a: 'test' };
+    it('should return array from single value', () => {
+      expect(getArrayOf(obj)).toEqual([obj]);
+    });
+    it('should return array from array of values', () => {
+      expect(getArrayOf([obj])).toEqual([obj]);
+    });
+  });
 });
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx
index c952e2b882e..19dddf15119 100644
--- a/packages/charts/src/utils/common.tsx
+++ b/packages/charts/src/utils/common.tsx
@@ -274,6 +274,15 @@ export function isArrayOrSet<T>(value: any): value is Array<T> | Set<T> {
   return Array.isArray(value) || value instanceof Set;
 }
 
+/**
+ * Returns an array of values given single value or array of values
+ * @internal
+ */
+export function getArrayOf<T>(value?: T | T[]): T[] {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
 /** @internal */
 export function isNil(value: any): value is null | undefined {
   return value === null || value === undefined;

From 675509b2b29df4e1c900c48ad55bf3d54945b862 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 13 Oct 2021 18:10:49 -0500
Subject: [PATCH 3/3] chore: fix storybook usage

---
 .../{use_base_theme.ts => context_utils.ts}   | 49 +++++++-----
 .../lines/1_x_continuous.story.tsx            |  3 +-
 .../annotations/lines/2_x_ordinal.story.tsx   |  3 +-
 .../annotations/lines/3_x_time.story.tsx      |  3 +-
 .../annotations/lines/4_y_domain.story.tsx    |  3 +-
 .../annotations/lines/5_styling.story.tsx     |  3 +-
 .../6_test_single_bar_histogram.story.tsx     |  3 +-
 .../lines/7_tooltip_options.story.tsx         |  3 +-
 .../lines/8_advanced_markers.story.tsx        |  3 +-
 .../rects/1_linear_bar_chart.story.tsx        |  3 +-
 .../rects/2_ordinal_bar_chart.story.tsx       |  3 +-
 .../rects/3_linear_line_chart.story.tsx       |  3 +-
 .../annotations/rects/4_styling.story.tsx     |  3 +-
 .../rects/5_tooltip_options.story.tsx         |  3 +-
 .../annotations/rects/6_zero_domain.story.tsx |  3 +-
 .../rects/7_with_group_id.story.tsx           |  3 +-
 .../annotations/rects/8_outside.story.tsx     |  1 -
 .../rects/9_click_handler.story.tsx           |  1 -
 .../area/10_stacked_same_naming.story.tsx     |  3 +-
 .../stories/area/11_test_linear.story.tsx     |  3 +-
 storybook/stories/area/12_test_time.story.tsx |  4 +-
 storybook/stories/area/13_band_area.story.tsx |  3 +-
 .../stories/area/14_stacked_band.story.tsx    |  3 +-
 .../stories/area/15_stacked_grouped.story.tsx |  3 +-
 .../16_test_stacked_with_missing.story.tsx    |  4 +-
 storybook/stories/area/17_negative.story.tsx  |  3 +-
 .../area/18_negative_positive.story.tsx       |  3 +-
 .../stories/area/19_negative_band.story.tsx   |  1 -
 storybook/stories/area/1_basic.story.tsx      |  3 +-
 .../area/21_with_time_timeslip.story.tsx      |  3 +-
 storybook/stories/area/2_with_time.story.tsx  |  1 -
 .../stories/area/3_with_linear.story.tsx      |  3 +-
 storybook/stories/area/4_with_log.story.tsx   |  3 +-
 .../stories/area/5_with_4_axes.story.tsx      |  4 +-
 .../area/6_with_axis_and_legend.story.tsx     |  3 +-
 storybook/stories/area/7_stacked.story.tsx    |  3 +-
 .../area/8_stacked_percentage.story.tsx       |  3 +-
 .../area/8_stacked_percentage_zeros.story.tsx |  3 +-
 .../area/9_stacked_separate_specs.story.tsx   |  4 +-
 .../axes/10_one_domain_bound.story.tsx        |  3 +-
 .../axes/11_fit_domain_extent.story.tsx       |  3 +-
 .../stories/axes/12_duplicate_ticks.story.tsx |  3 +-
 .../axes/13_label_formatting.story.tsx        |  3 +-
 storybook/stories/axes/1_basic.story.tsx      |  3 +-
 .../axes/2_tick_label_rotation.story.tsx      |  3 +-
 .../stories/axes/3_axis_4_axes.story.tsx      |  3 +-
 storybook/stories/axes/4_multi_axis.story.tsx |  3 +-
 .../axes/5_multi_axis_bar_lines.story.tsx     |  3 +-
 .../axes/6_different_tooltip.story.tsx        |  3 +-
 .../6a_different_tooltip_formatter.story.tsx  |  1 -
 .../stories/axes/7_many_tick_labels.story.tsx |  3 +-
 .../stories/axes/8_custom_domain.story.tsx    |  1 -
 .../axes/9_custom_mixed_domain.story.tsx      |  3 +-
 .../stories/bar/10_axis_and_legend.story.tsx  |  3 +-
 .../11_stacked_with_axis_and_legend.story.tsx |  3 +-
 .../bar/12_stacked_as_percentage.story.tsx    |  3 +-
 storybook/stories/bar/13_clustered.story.tsx  |  1 -
 .../bar/14_clustered_multiple.story.tsx       |  3 +-
 .../stories/bar/15_time_clustered.story.tsx   |  3 +-
 .../stories/bar/17_time_stacked.story.tsx     |  3 +-
 .../stories/bar/18_bar_chart_1y0g.story.tsx   |  3 +-
 .../stories/bar/19_bar_chart_1y1g.story.tsx   |  3 +-
 storybook/stories/bar/1_basic.story.tsx       |  4 +-
 .../stories/bar/20_bar_chart_1y2g.story.tsx   |  3 +-
 .../stories/bar/21_bar_chart_2y0g.story.tsx   |  3 +-
 .../stories/bar/22_barchart_2y1g.story.tsx    |  3 +-
 .../stories/bar/23_bar_chart_2y2g.story.tsx   |  3 +-
 .../bar/24_tooltip_visibility.story.tsx       |  3 +-
 .../stories/bar/25_high_data_volume.story.tsx |  3 +-
 .../bar/26_single_data_linear.story.tsx       |  3 +-
 .../bar/27_single_data_ordinal.story.tsx      |  3 +-
 .../bar/28_single_data_clustered.story.tsx    |  3 +-
 .../bar/29_single_data_stacked.story.tsx      |  3 +-
 storybook/stories/bar/2_label_value.story.tsx |  1 -
 .../bar/30_stacked_to_extent.story.tsx        |  3 +-
 ...1_negative_and_positive_x_values.story.tsx |  3 +-
 .../stories/bar/32_scale_to_extent.story.tsx  |  3 +-
 storybook/stories/bar/33_band_bar.story.tsx   |  3 +-
 .../stories/bar/34_test_linear.story.tsx      |  3 +-
 storybook/stories/bar/35_test_time.story.tsx  |  3 +-
 .../bar/36_test_linear_clustered.story.tsx    |  3 +-
 .../bar/37_test_time_clustered.story.tsx      |  3 +-
 .../bar/38_test_clustered_null_bars.story.tsx |  3 +-
 .../bar/39_test_stacked_null.story.tsx        |  3 +-
 storybook/stories/bar/3_with_axis.story.tsx   |  3 +-
 .../stories/bar/40_test_switch.story.tsx      |  3 +-
 .../bar/41_test_histogram_linear.story.tsx    |  1 -
 .../bar/42_test_histogram_ordinal.story.tsx   |  1 -
 .../stories/bar/43_test_discover.story.tsx    |  3 +-
 .../bar/44_test_single_histogram.story.tsx    |  4 +-
 storybook/stories/bar/45_min_height.story.tsx |  3 +-
 .../stories/bar/46_test_min_height.story.tsx  |  3 +-
 .../bar/47_stacked_only_grouped.story.tsx     |  3 +-
 .../stories/bar/48_test_tooltip.story.tsx     |  3 +-
 .../stories/bar/49_test_dual_axis.story.tsx   |  3 +-
 storybook/stories/bar/4_ordinal.story.tsx     |  3 +-
 .../bar/50_order_bins_by_sum.story.tsx        |  1 -
 .../bar/51_label_value_advanced.story.tsx     |  1 -
 .../bar/52_multi_group_same_domain.story.tsx  |  3 +-
 ...se_domain_from_different_groupid.story.tsx |  3 +-
 .../bar/54_functional_accessors.story.tsx     |  3 +-
 .../stories/bar/55_tooltip_boundary.story.tsx |  3 +-
 .../bar/56_test_use_dfl_gdomain.story.tsx     |  3 +-
 .../bar/57_test_rect_border_bars.story.tsx    |  1 -
 storybook/stories/bar/5_linear.story.tsx      |  3 +-
 .../bar/6_linear_no_linear_interval.story.tsx |  1 -
 .../stories/bar/7_with_time_xaxis.story.tsx   |  3 +-
 .../stories/bar/8_with_log_yaxis.story.tsx    |  3 +-
 .../stories/bar/9_with_stacked_log.story.tsx  |  3 +-
 storybook/stories/bubble/1_simple.story.tsx   |  1 -
 storybook/stories/bubble/2_ordinal.story.tsx  |  1 -
 storybook/stories/bubble/3_multiple.story.tsx |  1 -
 storybook/stories/bubble/4_mixed.story.tsx    |  1 -
 storybook/stories/debug/1_basic.story.tsx     |  4 +-
 .../stories/debug/2_debug_state.story.tsx     |  1 -
 .../stories/goal/10_band_in_band.story.tsx    |  3 +-
 storybook/stories/goal/11_gaps.story.tsx      |  3 +-
 storybook/stories/goal/12_range.story.tsx     |  3 +-
 .../goal/13_confidence_level.story.tsx        |  3 +-
 storybook/stories/goal/14_one_third.story.tsx |  3 +-
 .../stories/goal/15_half_circle.story.tsx     |  3 +-
 .../stories/goal/16_two_thirds.story.tsx      |  3 +-
 .../stories/goal/17_three_quarters.story.tsx  |  3 +-
 .../stories/goal/17_total_circle.story.tsx    |  3 +-
 .../stories/goal/17_very_small_gap.story.tsx  |  3 +-
 .../stories/goal/18_side_gauge.story.tsx      |  3 +-
 ...de_gauge_inverted_angle_relation.story.tsx |  4 +-
 .../goal/19_horizontal_negative.story.tsx     |  3 +-
 .../goal/20_vertical_negative.story.tsx       |  3 +-
 .../stories/goal/21_goal_negative.story.tsx   |  3 +-
 .../goal/22_horizontal_plusminus.story.tsx    |  3 +-
 .../goal/23_vertical_plusminus.story.tsx      |  3 +-
 .../stories/goal/24_goal_plusminus.story.tsx  |  3 +-
 .../goal/2_gauge_with_target.story.tsx        |  3 +-
 .../goal/3_horizontal_bullet.story.tsx        |  3 +-
 .../stories/goal/4_vertical_bullet.story.tsx  |  3 +-
 storybook/stories/goal/5_minimal.story.tsx    |  3 +-
 .../goal/6_minimal_horizontal.story.tsx       |  3 +-
 .../stories/goal/7_horizontal_bar.story.tsx   |  3 +-
 .../stories/goal/8_irregular_ticks.story.tsx  |  3 +-
 .../stories/goal/9_minimal_band.story.tsx     |  3 +-
 storybook/stories/grids/1_basic.story.tsx     |  3 +-
 .../stories/grids/2_multiple_axes.story.tsx   |  3 +-
 storybook/stories/grids/3_lines.story.tsx     |  1 -
 storybook/stories/heatmap/1_basic.story.tsx   |  1 -
 .../stories/heatmap/2_categorical.story.tsx   |  1 -
 .../stories/icicle/01_unix_icicle.story.tsx   |  3 +-
 .../stories/icicle/02_unix_flame.story.tsx    |  1 -
 .../icicle/03_cpu_profile_flame.story.tsx     |  3 +-
 .../10_brush_selection_bar.story.tsx          |  3 +-
 .../10a_brush_selection_bar_hist.story.tsx    |  1 -
 .../interactions/11_brush_time.story.tsx      |  1 -
 .../interactions/12_brush_time_hist.story.tsx |  1 -
 .../13_brush_disabled_ordinal.story.tsx       |  3 +-
 .../interactions/14_crosshair_time.story.tsx  |  1 -
 .../interactions/15_render_change.story.tsx   |  1 -
 .../16_cursor_update_action.story.tsx         |  1 -
 .../interactions/17_png_export.story.tsx      |  1 -
 .../interactions/1_bar_clicks.story.tsx       |  1 -
 .../2_area_point_clicks.story.tsx             |  1 -
 .../3_line_point_clicks.story.tsx             |  1 -
 .../4_line_area_bar_clicks.story.tsx          |  1 -
 .../4_sunburst_slice_clicks.story.tsx         |  1 -
 .../5_clicks_legend_items_bar.story.tsx       |  1 -
 .../6_clicks_legend_items_area.story.tsx      |  1 -
 .../7_clicks_legend_items_line.story.tsx      |  1 -
 .../8_clicks_legend_items_mixed.story.tsx     |  1 -
 .../9_brush_selection_linear.story.tsx        |  3 +-
 .../9a_brush_selection_linear.story.tsx       |  1 -
 .../stories/legend/10_sunburst.story.tsx      |  3 +-
 .../10_sunburst_repeated_label.story.tsx      |  1 -
 .../legend/11_legend_actions.story.tsx        |  1 -
 .../legend/12_legend_margins.story.tsx        |  1 -
 .../stories/legend/13_inside_chart.story.tsx  |  1 -
 .../stories/legend/14_single_series.story.tsx |  1 -
 .../stories/legend/1_legend_right.story.tsx   |  4 +-
 .../stories/legend/2_legend_bottom.story.tsx  |  3 +-
 .../stories/legend/3_legend_left.story.tsx    |  4 +-
 .../stories/legend/4_legend_top.story.tsx     |  3 +-
 .../stories/legend/5_changing_specs.story.tsx |  4 +-
 .../stories/legend/6_hide_legend.story.tsx    |  3 +-
 .../stories/legend/7_display_values.story.tsx |  1 -
 .../stories/legend/8_spacing_buffer.story.tsx |  4 +-
 .../stories/legend/9_color_picker.story.tsx   |  4 +-
 .../line/10_test_path_ordering.story.tsx      |  1 -
 .../11_discontinuous_data_points.story.tsx    |  3 +-
 .../line/12_orphan_data_points.story.tsx      |  1 -
 .../line/13_line_mark_accessor.story.tsx      |  1 -
 .../stories/line/14_point_shapes.story.tsx    |  1 -
 .../line/15_test_negative_points.story.tsx    |  3 +-
 storybook/stories/line/1_basic.story.tsx      |  3 +-
 storybook/stories/line/2_w_axis.story.tsx     |  1 -
 storybook/stories/line/3_ordinal.story.tsx    |  3 +-
 storybook/stories/line/4_linear.story.tsx     |  3 +-
 .../line/5_w_axis_and_legend.story.tsx        |  3 +-
 storybook/stories/line/6_curved.story.tsx     |  3 +-
 storybook/stories/line/7_multiple.story.tsx   |  3 +-
 storybook/stories/line/8_stacked.story.tsx    |  3 +-
 .../stories/line/9_multi_series.story.tsx     |  3 +-
 .../stories/mixed/1_bars_and_lines.story.tsx  |  3 +-
 .../stories/mixed/2_lines_and_areas.story.tsx |  3 +-
 .../stories/mixed/3_areas_and_bars.story.tsx  |  3 +-
 storybook/stories/mixed/4_test_bar.story.tsx  |  3 +-
 .../stories/mixed/5_test_bar_time.story.tsx   |  3 +-
 storybook/stories/mixed/6_fitting.story.tsx   |  1 -
 .../stories/mixed/6_fitting_stacked.story.tsx |  1 -
 storybook/stories/mixed/7_marks.story.tsx     |  1 -
 .../stories/mosaic/10_mosaic_simple.story.tsx |  1 -
 .../mosaic/20_mosaic_with_other.story.tsx     |  3 +-
 .../stories/rotations/1_ordinal.story.tsx     |  1 -
 .../rotations/2_negative_ordinal.story.tsx    |  3 +-
 .../rotations/3_rotations_ordinal.story.tsx   |  3 +-
 .../stories/rotations/4_90_ordinal.story.tsx  |  3 +-
 .../stories/rotations/5_180_ordinal.story.tsx |  3 +-
 .../rotations/6_negative_linear.story.tsx     |  3 +-
 .../rotations/7_rotations_linear.story.tsx    |  3 +-
 .../rotations/8_90_deg_linear.story.tsx       |  3 +-
 .../rotations/9_180_deg_linear.story.tsx      |  3 +-
 .../scales/1_different_timezones.story.tsx    |  4 +-
 .../stories/scales/2_local_tooltip.story.tsx  |  4 +-
 .../stories/scales/3_utc_tooltip.story.tsx    |  3 +-
 .../scales/4_specified_timezone.story.tsx     |  4 +-
 .../scales/6_x_scale_fallback.story.tsx       |  4 +-
 .../scales/7_log_scale_options.story.tsx      |  3 +-
 .../stories/small_multiples/1_grid.story.tsx  |  1 -
 .../2_vertical_areas.story.tsx                |  1 -
 .../small_multiples/3_grid_lines.story.tsx    |  1 -
 .../4_horizontal_bars.story.tsx               |  4 +-
 .../small_multiples/4_vertical_bars.story.tsx |  3 +-
 .../5_histogram_bars.story.tsx                |  3 +-
 .../6_heterogeneous_cartesians.story.tsx      |  4 +-
 .../small_multiples/7_sunbursts.story.tsx     |  1 -
 .../stories/streamgraph/1_basic.story.tsx     |  3 +-
 .../stories/stylings/10_custom_bars.story.tsx |  3 +-
 .../stylings/11_custom_lines.story.tsx        |  1 -
 .../stories/stylings/12_custom_area.story.tsx |  1 -
 .../stylings/13_custom_series_name.story.tsx  |  4 +-
 .../13_custom_series_name_config.story.tsx    |  4 +-
 ...14_custom_series_name_formatting.story.tsx |  4 +-
 .../stories/stylings/15_tick_label.story.tsx  |  3 +-
 .../stylings/16_style_accessor.story.tsx      |  1 -
 .../17_bar_series_color_variant.story.tsx     |  1 -
 .../18_line_series_color_variant.story.tsx    |  1 -
 .../19_area_series_color_variant.story.tsx    |  1 -
 .../stories/stylings/1_chart_size.story.tsx   | 11 ++-
 .../20_partition_background.story.tsx         |  3 +-
 .../stylings/21_partition_labels.story.tsx    |  3 +-
 .../stories/stylings/22_dark_theme.story.tsx  |  1 -
 .../stylings/23_with_texture.story.tsx        |  1 -
 .../24_texture_multiple_series.story.tsx      |  1 -
 .../stories/stylings/2_margins.story.tsx      |  1 -
 storybook/stories/stylings/3_axis.story.tsx   |  1 -
 .../stylings/4_theme_styling.story.tsx        |  1 -
 .../stylings/5_partial_custom_theme.story.tsx |  1 -
 .../stylings/6_partial_and_base.story.tsx     |  1 -
 .../stylings/7_multiple_custom.story.tsx      |  1 -
 .../8_custom_series_colors_array.story.tsx    |  3 +-
 .../9_custom_series_colors_function.story.tsx |  3 +-
 .../stories/sunburst/10_2_slice.story.tsx     |  3 +-
 .../stories/sunburst/11_small_large.story.tsx |  3 +-
 .../stories/sunburst/12_very_small.story.tsx  |  3 +-
 storybook/stories/sunburst/13_empty.story.tsx |  3 +-
 .../stories/sunburst/14_full_zero.story.tsx   |  3 +-
 .../stories/sunburst/15_single.story.tsx      |  3 +-
 .../sunburst/15_single_sunburst.story.tsx     |  3 +-
 .../sunburst/16_single_small.story.tsx        |  3 +-
 .../sunburst/17_single_very_small.story.tsx   |  3 +-
 .../stories/sunburst/18_no_sliced.story.tsx   |  3 +-
 .../stories/sunburst/19_negative.story.tsx    |  3 +-
 storybook/stories/sunburst/1_simple.story.tsx |  3 +-
 .../stories/sunburst/20_total_zero.story.tsx  |  3 +-
 .../stories/sunburst/21_high_pie.story.tsx    |  3 +-
 .../sunburst/22_counter_clockwise.story.tsx   |  3 +-
 .../stories/sunburst/23_clockwise.story.tsx   |  3 +-
 .../sunburst/24_linked_label.story.tsx        |  3 +-
 .../stories/sunburst/25_no_labels.story.tsx   |  3 +-
 .../stories/sunburst/26_percentage.story.tsx  |  3 +-
 .../sunburst/27_heterogeneous_depth.story.tsx |  3 +-
 .../sunburst/28_not_a_number.story.tsx        |  3 +-
 .../sunburst/29_custom_stroke.story.tsx       |  3 +-
 .../sunburst/2_value_formatted.story.tsx      |  3 +-
 .../sunburst/30_largest_circle.story.tsx      |  3 +-
 .../sunburst/31_bold_link_value.story.tsx     |  3 +-
 .../sunburst/32_custom_tooltip.story.tsx      |  3 +-
 .../sunburst/33_ordered_slices.story.tsx      |  3 +-
 .../sunburst/3_value_formatted_2.story.tsx    |  3 +-
 .../stories/sunburst/4_fill_labels.story.tsx  |  3 +-
 storybook/stories/sunburst/5_donut.story.tsx  |  3 +-
 .../sunburst/6_pie_chart_labels.story.tsx     |  3 +-
 .../6_pie_chart_linked_labels.story.tsx       |  3 +-
 .../stories/sunburst/7_zero_slice.story.tsx   |  3 +-
 .../sunburst/8_sunburst_two_layers.story.tsx  |  3 +-
 .../9_sunburst_three_layers.story.tsx         |  3 +-
 .../stories/test_cases/1_no_series.story.tsx  |  4 +-
 .../2_chrome_path_bug_fix.story.tsx           |  4 +-
 .../test_cases/3_no_axes_annotation.story.tsx |  3 +-
 .../4_filter_zero_values_log.story.tsx        |  3 +-
 .../5_legend_scroll_bar_sizing.story.tsx      |  4 +-
 .../6_a11y_custom_description.story.tsx       |  1 -
 .../stories/treemap/10_three_layers.story.tsx |  3 +-
 .../stories/treemap/1_one_layer.story.tsx     |  3 +-
 .../stories/treemap/2_one_layer_2.story.tsx   |  3 +-
 storybook/stories/treemap/3_mid_two.story.tsx |  3 +-
 .../treemap/4_two_layer_stress.story.tsx      |  3 +-
 .../stories/treemap/5_multicolor.story.tsx    |  3 +-
 .../stories/treemap/6_custom_style.story.tsx  |  3 +-
 .../stories/treemap/7_percentage.story.tsx    |  3 +-
 .../stories/treemap/8_groove_text.story.tsx   |  3 +-
 .../stories/treemap/9_zero_values.story.tsx   |  3 +-
 storybook/stories/waffle/1_simple.story.tsx   |  3 +-
 .../stories/wordcloud/1_wordcloud.story.tsx   |  1 -
 storybook/story_wrapper.tsx                   | 75 ++++++++++---------
 312 files changed, 304 insertions(+), 629 deletions(-)
 rename storybook/{use_base_theme.ts => context_utils.ts} (60%)

diff --git a/storybook/use_base_theme.ts b/storybook/context_utils.ts
similarity index 60%
rename from storybook/use_base_theme.ts
rename to storybook/context_utils.ts
index c5134fd097b..29835261fef 100644
--- a/storybook/use_base_theme.ts
+++ b/storybook/context_utils.ts
@@ -7,11 +7,10 @@
  */
 
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 import { $Values } from 'utility-types';
 
-import { Theme, LIGHT_THEME, DARK_THEME, DEFAULT_CHART_MARGINS } from '@elastic/charts';
-import { mergePartial } from '@elastic/charts/src/utils/common';
+import { LIGHT_THEME, DARK_THEME, DEFAULT_CHART_MARGINS, EchContext, PartialTheme, Theme } from '@elastic/charts';
 
 import { storybookParameters } from './parameters';
 
@@ -34,11 +33,16 @@ const BackgroundContext = createContext<string | undefined>(undefined);
 export const ThemeIdProvider = ThemeContext.Provider;
 export const BackgroundIdProvider = BackgroundContext.Provider;
 
-const themeMap = {
+const themeMap: Record<string, PartialTheme> = {
+  [ThemeId.EUILight]: EUI_CHARTS_THEME_LIGHT.theme,
+  [ThemeId.EUIDark]: EUI_CHARTS_THEME_DARK.theme,
+};
+
+const baseThemeMap: Record<string, Theme> = {
   [ThemeId.Light]: LIGHT_THEME,
   [ThemeId.Dark]: DARK_THEME,
-  [ThemeId.EUILight]: mergePartial(LIGHT_THEME, EUI_CHARTS_THEME_LIGHT.theme, { mergeOptionalPartialValues: true }),
-  [ThemeId.EUIDark]: mergePartial(DARK_THEME, EUI_CHARTS_THEME_DARK.theme, { mergeOptionalPartialValues: true }),
+  [ThemeId.EUILight]: LIGHT_THEME,
+  [ThemeId.EUIDark]: DARK_THEME,
 };
 
 const getBackground = (backgroundId?: string) => {
@@ -49,21 +53,26 @@ const getBackground = (backgroundId?: string) => {
   return option?.background ?? option?.color;
 };
 
-export const useBaseTheme = (): Theme => {
-  const themeId = useContext(ThemeContext);
-  const backgroundId = useContext(BackgroundContext);
-  const theme = themeMap[themeId] ?? LIGHT_THEME;
+export const getContext = (themeId: ThemeId, backgroundId: string): EchContext => {
+  const theme = themeMap[themeId] ?? {};
+  const baseTheme = baseThemeMap[themeId] ?? LIGHT_THEME;
   const backgroundColor = getBackground(backgroundId);
 
-  return mergePartial(
-    theme,
-    {
-      // eui chart theme has no margin for some reason. This is just for consistency.
-      chartMargins: DEFAULT_CHART_MARGINS,
-      background: {
-        color: backgroundColor,
-      },
+  return {
+    settings: {
+      baseTheme,
+      theme: [
+        {
+          // eui chart theme has no margin for some reason. This is just for consistency.
+          chartMargins: DEFAULT_CHART_MARGINS,
+          background: {
+            color: backgroundColor,
+          },
+        },
+        theme,
+      ],
     },
-    { mergeOptionalPartialValues: true },
-  );
+  };
 };
+
+export const useBaseTheme = () => LIGHT_THEME;
diff --git a/storybook/stories/annotations/lines/1_x_continuous.story.tsx b/storybook/stories/annotations/lines/1_x_continuous.story.tsx
index fc95184bc8b..cafc11af779 100644
--- a/storybook/stories/annotations/lines/1_x_continuous.story.tsx
+++ b/storybook/stories/annotations/lines/1_x_continuous.story.tsx
@@ -23,7 +23,6 @@ import {
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob, arrayKnobs } from '../../utils/knobs';
 
 function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
@@ -60,7 +59,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra debug={debug} rotation={rotation} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.XDomain}
diff --git a/storybook/stories/annotations/lines/2_x_ordinal.story.tsx b/storybook/stories/annotations/lines/2_x_ordinal.story.tsx
index 2d692f1cb57..eaeca3fb2bc 100644
--- a/storybook/stories/annotations/lines/2_x_ordinal.story.tsx
+++ b/storybook/stories/annotations/lines/2_x_ordinal.story.tsx
@@ -22,7 +22,6 @@ import {
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob, arrayKnobs } from '../../utils/knobs';
 
 function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
@@ -40,7 +39,7 @@ export const Example = () => {
   const dataValues = generateAnnotationData(arrayKnobs('annotation values', ['a', 'c']));
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.XDomain}
diff --git a/storybook/stories/annotations/lines/3_x_time.story.tsx b/storybook/stories/annotations/lines/3_x_time.story.tsx
index ed3019494ce..0f9f985f904 100644
--- a/storybook/stories/annotations/lines/3_x_time.story.tsx
+++ b/storybook/stories/annotations/lines/3_x_time.story.tsx
@@ -24,7 +24,6 @@ import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 const dateFormatter = timeFormatter('HH:mm:ss');
@@ -56,7 +55,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.XDomain}
diff --git a/storybook/stories/annotations/lines/4_y_domain.story.tsx b/storybook/stories/annotations/lines/4_y_domain.story.tsx
index 077bd89e829..3fcd37fb385 100644
--- a/storybook/stories/annotations/lines/4_y_domain.story.tsx
+++ b/storybook/stories/annotations/lines/4_y_domain.story.tsx
@@ -22,7 +22,6 @@ import {
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob, arrayKnobs } from '../../utils/knobs';
 
 function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
@@ -46,7 +45,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.YDomain}
diff --git a/storybook/stories/annotations/lines/5_styling.story.tsx b/storybook/stories/annotations/lines/5_styling.story.tsx
index 5c774fc9e80..fdcd0ad3edf 100644
--- a/storybook/stories/annotations/lines/5_styling.story.tsx
+++ b/storybook/stories/annotations/lines/5_styling.story.tsx
@@ -23,7 +23,6 @@ import {
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
@@ -71,7 +70,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.XDomain}
diff --git a/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx b/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx
index fea466168f3..dd434e02863 100644
--- a/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx
+++ b/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx
@@ -21,7 +21,6 @@ import {
 } from '@elastic/charts';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 export const Example = () => {
@@ -56,7 +55,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} xDomain={xDomain} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} xDomain={xDomain} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.XDomain}
diff --git a/storybook/stories/annotations/lines/7_tooltip_options.story.tsx b/storybook/stories/annotations/lines/7_tooltip_options.story.tsx
index 9dcfc547c14..f7ab01205ae 100644
--- a/storybook/stories/annotations/lines/7_tooltip_options.story.tsx
+++ b/storybook/stories/annotations/lines/7_tooltip_options.story.tsx
@@ -24,7 +24,6 @@ import { CustomAnnotationTooltip } from '@elastic/charts/src/chart_types/xy_char
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import {
   arrayKnobs,
   getBoundaryKnob,
@@ -67,7 +66,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings rotation={rotation} />
       <LineAnnotation
         id="annotation_1"
         domainType={AnnotationDomainType.XDomain}
diff --git a/storybook/stories/annotations/lines/8_advanced_markers.story.tsx b/storybook/stories/annotations/lines/8_advanced_markers.story.tsx
index 218c12efd98..b50e104876a 100644
--- a/storybook/stories/annotations/lines/8_advanced_markers.story.tsx
+++ b/storybook/stories/annotations/lines/8_advanced_markers.story.tsx
@@ -24,7 +24,6 @@ import {
 } from '@elastic/charts';
 import { isVerticalAxis } from '@elastic/charts/src/chart_types/xy_chart/utils/axis_type_utils';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob, getPositionKnob } from '../../utils/knobs';
 
 const annotationStyle = {
@@ -96,7 +95,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} showLegend={showLegend} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} showLegend={showLegend} rotation={rotation} />
       <Axis
         id="count"
         integersOnly
diff --git a/storybook/stories/annotations/rects/1_linear_bar_chart.story.tsx b/storybook/stories/annotations/rects/1_linear_bar_chart.story.tsx
index 1cae2545e31..ac41a5ced42 100644
--- a/storybook/stories/annotations/rects/1_linear_bar_chart.story.tsx
+++ b/storybook/stories/annotations/rects/1_linear_bar_chart.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings, Position } from '@elastic/charts';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 export const Example = () => {
@@ -43,7 +42,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <RectAnnotation
         id="rect"
         dataValues={[
diff --git a/storybook/stories/annotations/rects/2_ordinal_bar_chart.story.tsx b/storybook/stories/annotations/rects/2_ordinal_bar_chart.story.tsx
index a74c5c127be..4cebb428a62 100644
--- a/storybook/stories/annotations/rects/2_ordinal_bar_chart.story.tsx
+++ b/storybook/stories/annotations/rects/2_ordinal_bar_chart.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 export const Example = () => {
@@ -21,7 +20,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <RectAnnotation
         dataValues={[
           {
diff --git a/storybook/stories/annotations/rects/3_linear_line_chart.story.tsx b/storybook/stories/annotations/rects/3_linear_line_chart.story.tsx
index 761d6dbaa90..d3e44cb1880 100644
--- a/storybook/stories/annotations/rects/3_linear_line_chart.story.tsx
+++ b/storybook/stories/annotations/rects/3_linear_line_chart.story.tsx
@@ -13,7 +13,6 @@ import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings, RectAnnot
 import { Position } from '@elastic/charts/src/utils/common';
 import { BandedAccessorType } from '@elastic/charts/src/utils/geometry';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 export const Example = () => {
@@ -75,7 +74,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <RectAnnotation dataValues={dataValuesGreen} id="rect3" style={{ fill: 'lightgreen' }} />
       <RectAnnotation dataValues={dataValuesBlue} id="rect2" style={{ fill: 'blue' }} />
       <RectAnnotation dataValues={dataValuesRed} id="rect1" style={{ fill: 'red' }} />
diff --git a/storybook/stories/annotations/rects/4_styling.story.tsx b/storybook/stories/annotations/rects/4_styling.story.tsx
index fd72fdfea75..cbe01940fff 100644
--- a/storybook/stories/annotations/rects/4_styling.story.tsx
+++ b/storybook/stories/annotations/rects/4_styling.story.tsx
@@ -13,7 +13,6 @@ import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings } from '@e
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 export const Example = () => {
@@ -93,7 +92,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} rotation={rotation} />
       <RectAnnotation
         dataValues={dataValues}
         id="rect"
diff --git a/storybook/stories/annotations/rects/5_tooltip_options.story.tsx b/storybook/stories/annotations/rects/5_tooltip_options.story.tsx
index 9e778fe36c3..30af05e2121 100644
--- a/storybook/stories/annotations/rects/5_tooltip_options.story.tsx
+++ b/storybook/stories/annotations/rects/5_tooltip_options.story.tsx
@@ -21,7 +21,6 @@ import {
 import { CustomAnnotationTooltip } from '@elastic/charts/src/chart_types/xy_chart/annotations/types';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getBoundaryKnob, getChartRotationKnob, getFallbackPlacementsKnob, getPlacementKnob } from '../../utils/knobs';
 
 export const Example = () => {
@@ -71,7 +70,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings rotation={rotation} />
       <RectAnnotation
         dataValues={dataValues}
         id="rect"
diff --git a/storybook/stories/annotations/rects/6_zero_domain.story.tsx b/storybook/stories/annotations/rects/6_zero_domain.story.tsx
index c7279d7464e..3ccc1f4a4c1 100644
--- a/storybook/stories/annotations/rects/6_zero_domain.story.tsx
+++ b/storybook/stories/annotations/rects/6_zero_domain.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 
 const getKnobs = () => {
   const minY = number('min y', 0);
@@ -38,7 +37,7 @@ export const Example = () => {
   return (
     <Chart>
       <RectAnnotation id="rect" dataValues={[{ coordinates: xAxisKnobs }]} style={{ fill: 'red' }} />
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} title="x-domain axis" />
       <Axis
         domain={{
diff --git a/storybook/stories/annotations/rects/7_with_group_id.story.tsx b/storybook/stories/annotations/rects/7_with_group_id.story.tsx
index 9cbc04317d4..e5ad09272c7 100644
--- a/storybook/stories/annotations/rects/7_with_group_id.story.tsx
+++ b/storybook/stories/annotations/rects/7_with_group_id.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
 import { Position } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../../use_base_theme';
 
 const getKnobs = () => {
   const enabled = boolean('enable annotation', true);
@@ -49,7 +48,7 @@ export const Example = () => {
           style={{ fill: 'red' }}
         />
       )}
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" groupId="group2" position={Position.Bottom} title="Bottom (groupId=group2)" />
       <Axis id="left" groupId="group1" position={Position.Left} title="Left (groupId=group1)" />
       <Axis id="top" groupId="group1" position={Position.Top} title="Top (groupId=group1)" />
diff --git a/storybook/stories/annotations/rects/8_outside.story.tsx b/storybook/stories/annotations/rects/8_outside.story.tsx
index bc1662793cf..9806400ff58 100644
--- a/storybook/stories/annotations/rects/8_outside.story.tsx
+++ b/storybook/stories/annotations/rects/8_outside.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob } from '../../utils/knobs';
 
 const vGroups = {
diff --git a/storybook/stories/annotations/rects/9_click_handler.story.tsx b/storybook/stories/annotations/rects/9_click_handler.story.tsx
index 35c922c8e28..95b03d82fe5 100644
--- a/storybook/stories/annotations/rects/9_click_handler.story.tsx
+++ b/storybook/stories/annotations/rects/9_click_handler.story.tsx
@@ -26,7 +26,6 @@ import {
 } from '@elastic/charts';
 import { Icon } from '@elastic/charts/src/components/icons/icon';
 
-import { useBaseTheme } from '../../../use_base_theme';
 
 export const Example = () => {
   const onAnnotationClick = boolean('onAnnotationClick listener', true);
diff --git a/storybook/stories/area/10_stacked_same_naming.story.tsx b/storybook/stories/area/10_stacked_same_naming.story.tsx
index 851a9ef7ea8..f02aa627c35 100644
--- a/storybook/stories/area/10_stacked_same_naming.story.tsx
+++ b/storybook/stories/area/10_stacked_same_naming.story.tsx
@@ -11,13 +11,12 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis
       id="bottom"
       position={Position.Bottom}
diff --git a/storybook/stories/area/11_test_linear.story.tsx b/storybook/stories/area/11_test_linear.story.tsx
index 516122de674..4529f1c8b44 100644
--- a/storybook/stories/area/11_test_linear.story.tsx
+++ b/storybook/stories/area/11_test_linear.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => {
@@ -28,7 +27,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/area/12_test_time.story.tsx b/storybook/stories/area/12_test_time.story.tsx
index c803c0de297..6db827ca16e 100644
--- a/storybook/stories/area/12_test_time.story.tsx
+++ b/storybook/stories/area/12_test_time.story.tsx
@@ -12,8 +12,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const dateFormatter = timeFormatter('HH:mm');
 
 // for testing purposes only
@@ -32,7 +30,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} tickFormat={dateFormatter} />
       <Axis
         id="left"
diff --git a/storybook/stories/area/13_band_area.story.tsx b/storybook/stories/area/13_band_area.story.tsx
index 538b307a94d..908e10df92f 100644
--- a/storybook/stories/area/13_band_area.story.tsx
+++ b/storybook/stories/area/13_band_area.story.tsx
@@ -23,7 +23,6 @@ import {
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -40,7 +39,7 @@ export const Example = () => {
   const y1AccessorFormat = text('y1AccessorFormat', '');
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id="bottom"
         title="timestamp per 1 minute"
diff --git a/storybook/stories/area/14_stacked_band.story.tsx b/storybook/stories/area/14_stacked_band.story.tsx
index e00439c2b0d..13e5c53c0f5 100644
--- a/storybook/stories/area/14_stacked_band.story.tsx
+++ b/storybook/stories/area/14_stacked_band.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -21,7 +20,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra />
       <Axis
         id="bottom"
         title="timestamp per 1 minute"
diff --git a/storybook/stories/area/15_stacked_grouped.story.tsx b/storybook/stories/area/15_stacked_grouped.story.tsx
index 10fb3dbfe52..e29d061cba2 100644
--- a/storybook/stories/area/15_stacked_grouped.story.tsx
+++ b/storybook/stories/area/15_stacked_grouped.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data1 = [
@@ -49,7 +48,7 @@ export const Example = () => {
   ];
   return (
     <Chart renderer="canvas">
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/area/16_test_stacked_with_missing.story.tsx b/storybook/stories/area/16_test_stacked_with_missing.story.tsx
index 2ecf7f155a2..6aab7791115 100644
--- a/storybook/stories/area/16_test_stacked_with_missing.story.tsx
+++ b/storybook/stories/area/16_test_stacked_with_missing.story.tsx
@@ -10,11 +10,9 @@ import React from 'react';
 
 import { Chart, CurveType, AreaSeries, Position, Axis, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} />
     <Axis id="left" position={Position.Left} />
     <AreaSeries
diff --git a/storybook/stories/area/17_negative.story.tsx b/storybook/stories/area/17_negative.story.tsx
index 23da5ffc431..e3f6726d060 100644
--- a/storybook/stories/area/17_negative.story.tsx
+++ b/storybook/stories/area/17_negative.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -30,7 +29,7 @@ export const Example = () => {
   );
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
       <Axis
         id="left"
diff --git a/storybook/stories/area/18_negative_positive.story.tsx b/storybook/stories/area/18_negative_positive.story.tsx
index dcfeed9b623..5eb32098a88 100644
--- a/storybook/stories/area/18_negative_positive.story.tsx
+++ b/storybook/stories/area/18_negative_positive.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -29,7 +28,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend baseTheme={useBaseTheme()} />
+      <Settings showLegend />
       <Axis
         id="bottom"
         title="timestamp per 1 minute"
diff --git a/storybook/stories/area/19_negative_band.story.tsx b/storybook/stories/area/19_negative_band.story.tsx
index 545698f10c5..13b173357b8 100644
--- a/storybook/stories/area/19_negative_band.story.tsx
+++ b/storybook/stories/area/19_negative_band.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Fit, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const scaleType = select(
diff --git a/storybook/stories/area/1_basic.story.tsx b/storybook/stories/area/1_basic.story.tsx
index 5928f665af6..d650f8b53ac 100644
--- a/storybook/stories/area/1_basic.story.tsx
+++ b/storybook/stories/area/1_basic.story.tsx
@@ -11,13 +11,12 @@ import React from 'react';
 import { AreaSeries, Chart, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const { data } = KIBANA_METRICS.metrics.kibana_os_load[0];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <AreaSeries
         id="area"
         xScaleType={ScaleType.Time}
diff --git a/storybook/stories/area/21_with_time_timeslip.story.tsx b/storybook/stories/area/21_with_time_timeslip.story.tsx
index 4057a6f4835..f2d69819da6 100644
--- a/storybook/stories/area/21_with_time_timeslip.story.tsx
+++ b/storybook/stories/area/21_with_time_timeslip.story.tsx
@@ -13,7 +13,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, AxisSpec } from
 import { mergePartial } from '@elastic/charts/src/utils/common';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const minorGridStyle = { stroke: 'black', strokeWidth: 0.15, opacity: 1 };
@@ -66,7 +65,7 @@ export const Example = () => {
   const yAxisTitle = 'CPU utilization';
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis
         id="title"
         title="System Load: CPU"
diff --git a/storybook/stories/area/2_with_time.story.tsx b/storybook/stories/area/2_with_time.story.tsx
index dd80b10483f..8644b89c3af 100644
--- a/storybook/stories/area/2_with_time.story.tsx
+++ b/storybook/stories/area/2_with_time.story.tsx
@@ -13,7 +13,6 @@ import { AreaSeries, Axis, Chart, Placement, Position, ScaleType, Settings, time
 import { isDefined } from '@elastic/charts/src/utils/common';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob, getPlacementKnob, getStickToKnob } from '../utils/knobs';
 
 const dateFormatter = timeFormatter('HH:mm');
diff --git a/storybook/stories/area/3_with_linear.story.tsx b/storybook/stories/area/3_with_linear.story.tsx
index ae481c56b7f..dfb2c0ff764 100644
--- a/storybook/stories/area/3_with_linear.story.tsx
+++ b/storybook/stories/area/3_with_linear.story.tsx
@@ -11,14 +11,13 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0];
   const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 20).map((d) => [(d[0] - start) / 30000, d[1]]);
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/area/4_with_log.story.tsx b/storybook/stories/area/4_with_log.story.tsx
index d49d45d89e8..b0e1942056f 100644
--- a/storybook/stories/area/4_with_log.story.tsx
+++ b/storybook/stories/area/4_with_log.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -19,7 +18,7 @@ export const Example = () => {
   const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => (d[1] < 7 ? [d[0], null] : [d[0], d[1] - 10]));
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} tickFormat={dateFormatter} />
       <Axis
         id="left"
diff --git a/storybook/stories/area/5_with_4_axes.story.tsx b/storybook/stories/area/5_with_4_axes.story.tsx
index 865aac7d6f5..6d58918798e 100644
--- a/storybook/stories/area/5_with_4_axes.story.tsx
+++ b/storybook/stories/area/5_with_4_axes.story.tsx
@@ -11,13 +11,11 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const dateFormatter = timeFormatter('HH:mm');
 
 export const Example = () => (
   <Chart>
-    <Settings debug={false} baseTheme={useBaseTheme()} />
+    <Settings debug={false} />
     <Axis
       id="bottom"
       title="timestamp per 1 minute"
diff --git a/storybook/stories/area/6_with_axis_and_legend.story.tsx b/storybook/stories/area/6_with_axis_and_legend.story.tsx
index e1a83797fd3..1934221d903 100644
--- a/storybook/stories/area/6_with_axis_and_legend.story.tsx
+++ b/storybook/stories/area/6_with_axis_and_legend.story.tsx
@@ -11,13 +11,12 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis
       id="bottom"
       title="timestamp per 1 minute"
diff --git a/storybook/stories/area/7_stacked.story.tsx b/storybook/stories/area/7_stacked.story.tsx
index 5d738f3714a..5f16c2b3ce9 100644
--- a/storybook/stories/area/7_stacked.story.tsx
+++ b/storybook/stories/area/7_stacked.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -31,7 +30,7 @@ export const Example = () => {
   const allMetrics = [...data3, ...data2, ...data1];
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/area/8_stacked_percentage.story.tsx b/storybook/stories/area/8_stacked_percentage.story.tsx
index 79a530c5cb1..afb10f48882 100644
--- a/storybook/stories/area/8_stacked_percentage.story.tsx
+++ b/storybook/stories/area/8_stacked_percentage.story.tsx
@@ -12,14 +12,13 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, niceTimeFormatter, Position, ScaleType, Settings, StackMode } from '@elastic/charts';
 import DATA from '@elastic/charts/src/utils/data_samples/4_time_series.json';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dataNames = Object.keys(DATA);
 export const Example = () => {
   const stackedAsPercentage = boolean('stacked as percentage', true);
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/area/8_stacked_percentage_zeros.story.tsx b/storybook/stories/area/8_stacked_percentage_zeros.story.tsx
index 376555ef841..a44e9de92e8 100644
--- a/storybook/stories/area/8_stacked_percentage_zeros.story.tsx
+++ b/storybook/stories/area/8_stacked_percentage_zeros.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, niceTimeFormatter, StackMode } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis
       id="bottom"
       position={Position.Bottom}
diff --git a/storybook/stories/area/9_stacked_separate_specs.story.tsx b/storybook/stories/area/9_stacked_separate_specs.story.tsx
index f04890fdc3d..6d1e7505b2e 100644
--- a/storybook/stories/area/9_stacked_separate_specs.story.tsx
+++ b/storybook/stories/area/9_stacked_separate_specs.story.tsx
@@ -11,13 +11,11 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const dateFormatter = timeFormatter('HH:mm');
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis
       id="bottom"
       position={Position.Bottom}
diff --git a/storybook/stories/axes/10_one_domain_bound.story.tsx b/storybook/stories/axes/10_one_domain_bound.story.tsx
index 2eb5b9af522..1cc2cd35aab 100644
--- a/storybook/stories/axes/10_one_domain_bound.story.tsx
+++ b/storybook/stories/axes/10_one_domain_bound.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const leftDomain = {
@@ -26,7 +25,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend={false} xDomain={xDomain} baseTheme={useBaseTheme()} />
+      <Settings showLegend={false} xDomain={xDomain} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis
         id="left"
diff --git a/storybook/stories/axes/11_fit_domain_extent.story.tsx b/storybook/stories/axes/11_fit_domain_extent.story.tsx
index 08256545ba2..b2235735f4e 100644
--- a/storybook/stories/axes/11_fit_domain_extent.story.tsx
+++ b/storybook/stories/axes/11_fit_domain_extent.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, Chart, DomainPaddingUnit, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getKnobsFromEnum } from '../utils/knobs';
 
 export const Example = () => {
@@ -49,7 +48,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         domain={{
diff --git a/storybook/stories/axes/12_duplicate_ticks.story.tsx b/storybook/stories/axes/12_duplicate_ticks.story.tsx
index 70376577602..27873b18e36 100644
--- a/storybook/stories/axes/12_duplicate_ticks.story.tsx
+++ b/storybook/stories/axes/12_duplicate_ticks.story.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const now = DateTime.fromISO('2019-01-11T00:00:00.000').setZone('utc+1').toMillis();
@@ -42,7 +41,7 @@ export const Example = () => {
   const duplicateTicksInAxis = boolean('Show duplicate ticks in x axis', false);
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} tickFormat={formatter} showDuplicatedTicks={duplicateTicksInAxis} />
       <Axis
         id="left"
diff --git a/storybook/stories/axes/13_label_formatting.story.tsx b/storybook/stories/axes/13_label_formatting.story.tsx
index 2b6e4b4a3d4..752e2c86245 100644
--- a/storybook/stories/axes/13_label_formatting.story.tsx
+++ b/storybook/stories/axes/13_label_formatting.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const tickFormatBottom = text('tickFormat bottom', '0.0000');
@@ -25,7 +24,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis
         id="bottom"
         title="Weight"
diff --git a/storybook/stories/axes/1_basic.story.tsx b/storybook/stories/axes/1_basic.story.tsx
index ccf3ffd850b..7e4cd4dd871 100644
--- a/storybook/stories/axes/1_basic.story.tsx
+++ b/storybook/stories/axes/1_basic.story.tsx
@@ -22,7 +22,6 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const customStyle: RecursivePartial<AxisStyle> = {
@@ -38,7 +37,7 @@ export const Example = () => {
   const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 60);
   return (
     <Chart>
-      <Settings debug={boolean('debug', false)} baseTheme={useBaseTheme()} />
+      <Settings debug={boolean('debug', false)} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/axes/2_tick_label_rotation.story.tsx b/storybook/stories/axes/2_tick_label_rotation.story.tsx
index 2b8784a0461..6cbc376115f 100644
--- a/storybook/stories/axes/2_tick_label_rotation.story.tsx
+++ b/storybook/stories/axes/2_tick_label_rotation.story.tsx
@@ -22,7 +22,6 @@ import {
   DEFAULT_CHART_PADDING,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getVerticalTextAlignmentKnob, getHorizontalTextAlignmentKnob, getPositiveNumberKnob } from '../utils/knobs';
 
 const getAxisKnobs = (group?: string, gridLines = false): RecursivePartial<AxisStyle> => ({
@@ -135,7 +134,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug={debug} theme={theme} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} theme={theme} />
       <Axis
         id="bottom"
         hide={boolean('hide axis', false, Position.Bottom)}
diff --git a/storybook/stories/axes/3_axis_4_axes.story.tsx b/storybook/stories/axes/3_axis_4_axes.story.tsx
index 50db5db7b01..ae56cb8932a 100644
--- a/storybook/stories/axes/3_axis_4_axes.story.tsx
+++ b/storybook/stories/axes/3_axis_4_axes.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis
       id="bottom"
       position={Position.Bottom}
diff --git a/storybook/stories/axes/4_multi_axis.story.tsx b/storybook/stories/axes/4_multi_axis.story.tsx
index d1a91e53ae6..acdf7d50854 100644
--- a/storybook/stories/axes/4_multi_axis.story.tsx
+++ b/storybook/stories/axes/4_multi_axis.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function createThemeAction(title: string, min: number, max: number, value: number) {
   return number(
@@ -65,7 +64,7 @@ export const Example = () => {
   const seriesGroup2 = 'group2';
   return (
     <Chart size={[500, 300]}>
-      <Settings showLegend={false} theme={customTheme} debug={boolean('debug', true)} baseTheme={useBaseTheme()} />
+      <Settings showLegend={false} theme={customTheme} debug={boolean('debug', true)} />
       {renderAxisWithOptions(Position.Top, seriesGroup1, false)}
       {renderAxisWithOptions(Position.Top, seriesGroup2, true)}
       {renderAxisWithOptions(Position.Left, seriesGroup1, false)}
diff --git a/storybook/stories/axes/5_multi_axis_bar_lines.story.tsx b/storybook/stories/axes/5_multi_axis_bar_lines.story.tsx
index 23ddfe88cc0..0af6e946c48 100644
--- a/storybook/stories/axes/5_multi_axis_bar_lines.story.tsx
+++ b/storybook/stories/axes/5_multi_axis_bar_lines.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend={false} baseTheme={useBaseTheme()} />
+    <Settings showLegend={false} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left" title="Bar axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
     <Axis
diff --git a/storybook/stories/axes/6_different_tooltip.story.tsx b/storybook/stories/axes/6_different_tooltip.story.tsx
index cba3b4e8773..8772cdb5795 100644
--- a/storybook/stories/axes/6_different_tooltip.story.tsx
+++ b/storybook/stories/axes/6_different_tooltip.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend={false} baseTheme={useBaseTheme()} />
+    <Settings showLegend={false} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis
       id="left"
diff --git a/storybook/stories/axes/6a_different_tooltip_formatter.story.tsx b/storybook/stories/axes/6a_different_tooltip_formatter.story.tsx
index 278cc0d80e0..6be296b327a 100644
--- a/storybook/stories/axes/6a_different_tooltip_formatter.story.tsx
+++ b/storybook/stories/axes/6a_different_tooltip_formatter.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const showLegend = boolean('Show legend', true, 'Y axis');
diff --git a/storybook/stories/axes/7_many_tick_labels.story.tsx b/storybook/stories/axes/7_many_tick_labels.story.tsx
index 2f1c6e49ee7..08fe7455ced 100644
--- a/storybook/stories/axes/7_many_tick_labels.story.tsx
+++ b/storybook/stories/axes/7_many_tick_labels.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, RecursivePartial, AxisStyle } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const dg = new SeededDataGenerator();
@@ -26,7 +25,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings debug baseTheme={useBaseTheme()} />
+      <Settings debug />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks style={customStyle} />
       <AreaSeries
         id="lines"
diff --git a/storybook/stories/axes/8_custom_domain.story.tsx b/storybook/stories/axes/8_custom_domain.story.tsx
index d425035dd7d..f88d19297b7 100644
--- a/storybook/stories/axes/8_custom_domain.story.tsx
+++ b/storybook/stories/axes/8_custom_domain.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LIGHT_THEME, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const customXDomain = boolean('customize X domain', true, 'X axis');
diff --git a/storybook/stories/axes/9_custom_mixed_domain.story.tsx b/storybook/stories/axes/9_custom_mixed_domain.story.tsx
index 86ea60f5b4a..b19a4401aea 100644
--- a/storybook/stories/axes/9_custom_mixed_domain.story.tsx
+++ b/storybook/stories/axes/9_custom_mixed_domain.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { arrayKnobs } from '../utils/knobs';
 
 export const Example = () => {
@@ -29,7 +28,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend={false} xDomain={xDomain} baseTheme={useBaseTheme()} />
+      <Settings showLegend={false} xDomain={xDomain} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/10_axis_and_legend.story.tsx b/storybook/stories/bar/10_axis_and_legend.story.tsx
index 76a31084d49..d5198cd73ce 100644
--- a/storybook/stories/bar/10_axis_and_legend.story.tsx
+++ b/storybook/stories/bar/10_axis_and_legend.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx b/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx
index a51e5798a1e..bf70d86443e 100644
--- a/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx
+++ b/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/12_stacked_as_percentage.story.tsx b/storybook/stories/bar/12_stacked_as_percentage.story.tsx
index d02741c3a8e..fc251f82fd8 100644
--- a/storybook/stories/bar/12_stacked_as_percentage.story.tsx
+++ b/storybook/stories/bar/12_stacked_as_percentage.story.tsx
@@ -11,14 +11,13 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, StackMode } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const stackedAsPercentage = boolean('stacked as percentage', true);
   const clusterBars = boolean('cluster', true);
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis
         id="left2"
diff --git a/storybook/stories/bar/13_clustered.story.tsx b/storybook/stories/bar/13_clustered.story.tsx
index 0a8a4be4e70..a02b50a158c 100644
--- a/storybook/stories/bar/13_clustered.story.tsx
+++ b/storybook/stories/bar/13_clustered.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/bar/14_clustered_multiple.story.tsx b/storybook/stories/bar/14_clustered_multiple.story.tsx
index bde103b8122..cf8ea9bda0e 100644
--- a/storybook/stories/bar/14_clustered_multiple.story.tsx
+++ b/storybook/stories/bar/14_clustered_multiple.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="elements" showOverlappingTicks />
     <Axis id="left2" title="count" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/15_time_clustered.story.tsx b/storybook/stories/bar/15_time_clustered.story.tsx
index 12b015a7c83..70cb3a35819 100644
--- a/storybook/stories/bar/15_time_clustered.story.tsx
+++ b/storybook/stories/bar/15_time_clustered.story.tsx
@@ -21,13 +21,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const formatter = timeFormatter(niceTimeFormatByDay(1));
   return (
     <Chart>
-      <Settings debug={boolean('debug', false)} baseTheme={useBaseTheme()} />
+      <Settings debug={boolean('debug', false)} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/bar/17_time_stacked.story.tsx b/storybook/stories/bar/17_time_stacked.story.tsx
index 2936f2b3a67..8f50cba8e95 100644
--- a/storybook/stories/bar/17_time_stacked.story.tsx
+++ b/storybook/stories/bar/17_time_stacked.story.tsx
@@ -21,13 +21,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const formatter = timeFormatter(niceTimeFormatByDay(1));
   return (
     <Chart>
-      <Settings debug={boolean('debug', false)} baseTheme={useBaseTheme()} />
+      <Settings debug={boolean('debug', false)} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/bar/18_bar_chart_1y0g.story.tsx b/storybook/stories/bar/18_bar_chart_1y0g.story.tsx
index d9c820a1ac7..48849bd8412 100644
--- a/storybook/stories/bar/18_bar_chart_1y0g.story.tsx
+++ b/storybook/stories/bar/18_bar_chart_1y0g.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/19_bar_chart_1y1g.story.tsx b/storybook/stories/bar/19_bar_chart_1y1g.story.tsx
index 0d538286e50..49b03399ff3 100644
--- a/storybook/stories/bar/19_bar_chart_1y1g.story.tsx
+++ b/storybook/stories/bar/19_bar_chart_1y1g.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/1_basic.story.tsx b/storybook/stories/bar/1_basic.story.tsx
index 2ed200bf62b..7bf155fe45f 100644
--- a/storybook/stories/bar/1_basic.story.tsx
+++ b/storybook/stories/bar/1_basic.story.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 
 import { BarSeries, Chart, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const toggleSpec = boolean('toggle bar spec', true);
   const data1 = [
@@ -26,7 +24,7 @@ export const Example = () => {
   const specId = toggleSpec ? 'bars1' : 'bars2';
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <BarSeries
         id={specId}
         name="Simple bar series"
diff --git a/storybook/stories/bar/20_bar_chart_1y2g.story.tsx b/storybook/stories/bar/20_bar_chart_1y2g.story.tsx
index e2a569cb303..15680fbe74e 100644
--- a/storybook/stories/bar/20_bar_chart_1y2g.story.tsx
+++ b/storybook/stories/bar/20_bar_chart_1y2g.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/21_bar_chart_2y0g.story.tsx b/storybook/stories/bar/21_bar_chart_2y0g.story.tsx
index b12896d0ea0..dd73c6b65f3 100644
--- a/storybook/stories/bar/21_bar_chart_2y0g.story.tsx
+++ b/storybook/stories/bar/21_bar_chart_2y0g.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/22_barchart_2y1g.story.tsx b/storybook/stories/bar/22_barchart_2y1g.story.tsx
index 1ef42acc01b..a8c355e0cf4 100644
--- a/storybook/stories/bar/22_barchart_2y1g.story.tsx
+++ b/storybook/stories/bar/22_barchart_2y1g.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/23_bar_chart_2y2g.story.tsx b/storybook/stories/bar/23_bar_chart_2y2g.story.tsx
index 0dea52d2962..8689823948e 100644
--- a/storybook/stories/bar/23_bar_chart_2y2g.story.tsx
+++ b/storybook/stories/bar/23_bar_chart_2y2g.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
     <BarSeries
diff --git a/storybook/stories/bar/24_tooltip_visibility.story.tsx b/storybook/stories/bar/24_tooltip_visibility.story.tsx
index 6657257be17..91d631b3fc4 100644
--- a/storybook/stories/bar/24_tooltip_visibility.story.tsx
+++ b/storybook/stories/bar/24_tooltip_visibility.story.tsx
@@ -11,13 +11,12 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, FilterPredicate } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const isVisibleFunction: FilterPredicate = (series) => series.splitAccessors.get('g1') === 'cloudflare.com';
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/25_high_data_volume.story.tsx b/storybook/stories/bar/25_high_data_volume.story.tsx
index 86ceb60bdf8..f93b6614400 100644
--- a/storybook/stories/bar/25_high_data_volume.story.tsx
+++ b/storybook/stories/bar/25_high_data_volume.story.tsx
@@ -12,7 +12,6 @@ import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 import { TooltipType } from '@elastic/charts/src/specs/constants';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const dg = new SeededDataGenerator();
@@ -22,7 +21,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings tooltip={tooltipProps} baseTheme={useBaseTheme()} />
+      <Settings tooltip={tooltipProps} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/26_single_data_linear.story.tsx b/storybook/stories/bar/26_single_data_linear.story.tsx
index 5c41bd537bc..0fb484458bb 100644
--- a/storybook/stories/bar/26_single_data_linear.story.tsx
+++ b/storybook/stories/bar/26_single_data_linear.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
@@ -35,7 +34,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings xDomain={xDomain} rotation={getChartRotationKnob()} theme={theme} baseTheme={useBaseTheme()} />
+      <Settings xDomain={xDomain} rotation={getChartRotationKnob()} theme={theme} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/27_single_data_ordinal.story.tsx b/storybook/stories/bar/27_single_data_ordinal.story.tsx
index 8a9e1d68735..89c2f65ffc6 100644
--- a/storybook/stories/bar/27_single_data_ordinal.story.tsx
+++ b/storybook/stories/bar/27_single_data_ordinal.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
@@ -30,7 +29,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings xDomain={xDomain} rotation={getChartRotationKnob()} theme={theme} baseTheme={useBaseTheme()} />
+      <Settings xDomain={xDomain} rotation={getChartRotationKnob()} theme={theme} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/28_single_data_clustered.story.tsx b/storybook/stories/bar/28_single_data_clustered.story.tsx
index b4bd3035955..5758da56e31 100644
--- a/storybook/stories/bar/28_single_data_clustered.story.tsx
+++ b/storybook/stories/bar/28_single_data_clustered.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/29_single_data_stacked.story.tsx b/storybook/stories/bar/29_single_data_stacked.story.tsx
index 7e2053f5b28..e83bc4d636e 100644
--- a/storybook/stories/bar/29_single_data_stacked.story.tsx
+++ b/storybook/stories/bar/29_single_data_stacked.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/2_label_value.story.tsx b/storybook/stories/bar/2_label_value.story.tsx
index f0ab405ff2e..ad8ca1aa652 100644
--- a/storybook/stories/bar/2_label_value.story.tsx
+++ b/storybook/stories/bar/2_label_value.story.tsx
@@ -22,7 +22,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob, getPositionKnob } from '../utils/knobs';
 
 const dataGen = new SeededDataGenerator();
diff --git a/storybook/stories/bar/30_stacked_to_extent.story.tsx b/storybook/stories/bar/30_stacked_to_extent.story.tsx
index 7260d0dcbc2..61b45c4b1d0 100644
--- a/storybook/stories/bar/30_stacked_to_extent.story.tsx
+++ b/storybook/stories/bar/30_stacked_to_extent.story.tsx
@@ -11,14 +11,13 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const fit = boolean('fit Y domain to data', true);
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
       <Axis
         id="left2"
diff --git a/storybook/stories/bar/31_negative_and_positive_x_values.story.tsx b/storybook/stories/bar/31_negative_and_positive_x_values.story.tsx
index 62366267e8d..326628bc96b 100644
--- a/storybook/stories/bar/31_negative_and_positive_x_values.story.tsx
+++ b/storybook/stories/bar/31_negative_and_positive_x_values.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/32_scale_to_extent.story.tsx b/storybook/stories/bar/32_scale_to_extent.story.tsx
index 243966fad84..2df3933ff63 100644
--- a/storybook/stories/bar/32_scale_to_extent.story.tsx
+++ b/storybook/stories/bar/32_scale_to_extent.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, Chart, DomainPaddingUnit, Position, ScaleType, Settings } from '@elastic/charts';
 import { computeContinuousDataDomain } from '@elastic/charts/src/utils/domain';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getKnobsFromEnum, getXYSeriesKnob } from '../utils/knobs';
 
 const logDomains = (data: any[], customDomain: any) => {
@@ -75,7 +74,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="top" position={Position.Top} title="Top axis" />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/33_band_bar.story.tsx b/storybook/stories/bar/33_band_bar.story.tsx
index 774e5bf2f08..932b3e8a568 100644
--- a/storybook/stories/bar/33_band_bar.story.tsx
+++ b/storybook/stories/bar/33_band_bar.story.tsx
@@ -13,7 +13,6 @@ import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings, time
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm:ss');
 
@@ -29,7 +28,7 @@ export const Example = () => {
   const useFunctions = boolean('use fn accessors', false);
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis
         id="bottom"
         title="timestamp per 1 minute"
diff --git a/storybook/stories/bar/34_test_linear.story.tsx b/storybook/stories/bar/34_test_linear.story.tsx
index 28d53d6048f..5d1ab8e9ded 100644
--- a/storybook/stories/bar/34_test_linear.story.tsx
+++ b/storybook/stories/bar/34_test_linear.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => {
@@ -28,7 +27,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/35_test_time.story.tsx b/storybook/stories/bar/35_test_time.story.tsx
index 3a1c055c0d2..32fd8706f96 100644
--- a/storybook/stories/bar/35_test_time.story.tsx
+++ b/storybook/stories/bar/35_test_time.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm:ss');
 
@@ -32,7 +31,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} tickFormat={dateFormatter} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/36_test_linear_clustered.story.tsx b/storybook/stories/bar/36_test_linear_clustered.story.tsx
index 6907a52bf59..be768eb9f38 100644
--- a/storybook/stories/bar/36_test_linear_clustered.story.tsx
+++ b/storybook/stories/bar/36_test_linear_clustered.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => {
@@ -28,7 +27,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/37_test_time_clustered.story.tsx b/storybook/stories/bar/37_test_time_clustered.story.tsx
index 6ec814136f7..67c98972462 100644
--- a/storybook/stories/bar/37_test_time_clustered.story.tsx
+++ b/storybook/stories/bar/37_test_time_clustered.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter('HH:mm:ss');
 
@@ -32,7 +31,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} tickFormat={dateFormatter} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/38_test_clustered_null_bars.story.tsx b/storybook/stories/bar/38_test_clustered_null_bars.story.tsx
index a742bf56c07..b7a3d5cc237 100644
--- a/storybook/stories/bar/38_test_clustered_null_bars.story.tsx
+++ b/storybook/stories/bar/38_test_clustered_null_bars.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => {
@@ -27,7 +26,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/39_test_stacked_null.story.tsx b/storybook/stories/bar/39_test_stacked_null.story.tsx
index 01087830c12..b4f7af6a66a 100644
--- a/storybook/stories/bar/39_test_stacked_null.story.tsx
+++ b/storybook/stories/bar/39_test_stacked_null.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => {
@@ -27,7 +26,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/3_with_axis.story.tsx b/storybook/stories/bar/3_with_axis.story.tsx
index b0539088460..9d7f61fe280 100644
--- a/storybook/stories/bar/3_with_axis.story.tsx
+++ b/storybook/stories/bar/3_with_axis.story.tsx
@@ -10,12 +10,11 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/40_test_switch.story.tsx b/storybook/stories/bar/40_test_switch.story.tsx
index eca1b7f9bea..a6ed5d8b08d 100644
--- a/storybook/stories/bar/40_test_switch.story.tsx
+++ b/storybook/stories/bar/40_test_switch.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/41_test_histogram_linear.story.tsx b/storybook/stories/bar/41_test_histogram_linear.story.tsx
index 23d140ac2e6..3dcf58de284 100644
--- a/storybook/stories/bar/41_test_histogram_linear.story.tsx
+++ b/storybook/stories/bar/41_test_histogram_linear.story.tsx
@@ -27,7 +27,6 @@ import {
 } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 // for testing purposes only
diff --git a/storybook/stories/bar/42_test_histogram_ordinal.story.tsx b/storybook/stories/bar/42_test_histogram_ordinal.story.tsx
index 1c68f7da6c7..363f9533ce0 100644
--- a/storybook/stories/bar/42_test_histogram_ordinal.story.tsx
+++ b/storybook/stories/bar/42_test_histogram_ordinal.story.tsx
@@ -20,7 +20,6 @@ import {
   Settings,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 // for testing purposes only
diff --git a/storybook/stories/bar/43_test_discover.story.tsx b/storybook/stories/bar/43_test_discover.story.tsx
index 5d0dd8fef1b..48c9dcc461b 100644
--- a/storybook/stories/bar/43_test_discover.story.tsx
+++ b/storybook/stories/bar/43_test_discover.story.tsx
@@ -20,7 +20,6 @@ import {
   timeFormatter,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const TEST_DATASET_DISCOVER = {
   xAxisLabel: 'timestamp per 30 seconds',
@@ -50,7 +49,7 @@ export const Example = () => {
   const useCustomMinInterval = boolean('use custom minInterval of 30s', true);
   return (
     <Chart>
-      <Settings xDomain={useCustomMinInterval ? xDomain : undefined} baseTheme={useBaseTheme()} />
+      <Settings xDomain={useCustomMinInterval ? xDomain : undefined} />
       <Axis id="discover-histogram-left-axis" position={Position.Left} title={TEST_DATASET_DISCOVER.yAxisLabel} />
       <Axis
         id="discover-histogram-bottom-axis"
diff --git a/storybook/stories/bar/44_test_single_histogram.story.tsx b/storybook/stories/bar/44_test_single_histogram.story.tsx
index 8d7142764e0..8755d4769a4 100644
--- a/storybook/stories/bar/44_test_single_histogram.story.tsx
+++ b/storybook/stories/bar/44_test_single_histogram.story.tsx
@@ -20,8 +20,6 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 // for testing purposes only
 export const Example = () => {
   const formatter = timeFormatter(niceTimeFormatByDay(1));
@@ -34,7 +32,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings xDomain={xDomain} baseTheme={useBaseTheme()} />
+      <Settings xDomain={xDomain} />
       <Axis
         id="bottom"
         title="timestamp per 1 minute"
diff --git a/storybook/stories/bar/45_min_height.story.tsx b/storybook/stories/bar/45_min_height.story.tsx
index aaca2868fc0..128780a3b47 100644
--- a/storybook/stories/bar/45_min_height.story.tsx
+++ b/storybook/stories/bar/45_min_height.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const minBarHeight = number('minBarHeight', 5);
@@ -28,7 +27,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="Bottom" position={Position.Bottom} />
       <Axis id="left" title="Left" position={Position.Left} />
       <BarSeries
diff --git a/storybook/stories/bar/46_test_min_height.story.tsx b/storybook/stories/bar/46_test_min_height.story.tsx
index aa754478810..c24eb86ab16 100644
--- a/storybook/stories/bar/46_test_min_height.story.tsx
+++ b/storybook/stories/bar/46_test_min_height.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 // for testing purposes only
 export const Example = () => {
@@ -38,7 +37,7 @@ export const Example = () => {
   ];
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="Bottom" position={Position.Bottom} />
       <Axis id="left" title="Left" position={Position.Left} />
       <BarSeries
diff --git a/storybook/stories/bar/47_stacked_only_grouped.story.tsx b/storybook/stories/bar/47_stacked_only_grouped.story.tsx
index 19eef30e954..8c49e0a60a4 100644
--- a/storybook/stories/bar/47_stacked_only_grouped.story.tsx
+++ b/storybook/stories/bar/47_stacked_only_grouped.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data1 = [
@@ -71,7 +70,7 @@ export const Example = () => {
   ];
   return (
     <Chart renderer="canvas">
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" title="index" position={Position.Bottom} />
       <Axis
         id="left"
diff --git a/storybook/stories/bar/48_test_tooltip.story.tsx b/storybook/stories/bar/48_test_tooltip.story.tsx
index 854638c69d6..02915fb8e8a 100644
--- a/storybook/stories/bar/48_test_tooltip.story.tsx
+++ b/storybook/stories/bar/48_test_tooltip.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   getBoundaryKnob,
   getChartRotationKnob,
@@ -53,7 +52,7 @@ export const Example = () => {
   return (
     <div className="buffer" style={{ width: '100%', height: '100%', paddingLeft: 80, paddingRight: 80 }}>
       <Chart>
-        <Settings rotation={rotation} tooltip={tooltipOptions} showLegend={showLegend} baseTheme={useBaseTheme()} />
+        <Settings rotation={rotation} tooltip={tooltipOptions} showLegend={showLegend} />
         <Axis id="bottom" hide={!showAxes} position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
         <Axis
           id="left2"
diff --git a/storybook/stories/bar/49_test_dual_axis.story.tsx b/storybook/stories/bar/49_test_dual_axis.story.tsx
index 53d0782ac91..cf561791cdc 100644
--- a/storybook/stories/bar/49_test_dual_axis.story.tsx
+++ b/storybook/stories/bar/49_test_dual_axis.story.tsx
@@ -11,14 +11,13 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const stack13 = boolean('Stack bars1 and bars3', true);
   const stack24 = boolean('Stack bars2 and bars4', false);
   return (
     <Chart>
-      <Settings showLegend baseTheme={useBaseTheme()} />
+      <Settings showLegend />
       <Axis id="count1" title="count" position={Position.Left} />
       <Axis id="count2" groupId="2" title="count" position={Position.Right} />
       <Axis id="x" title="goods" position={Position.Bottom} />
diff --git a/storybook/stories/bar/4_ordinal.story.tsx b/storybook/stories/bar/4_ordinal.story.tsx
index efb32329474..bdbf7933507 100644
--- a/storybook/stories/bar/4_ordinal.story.tsx
+++ b/storybook/stories/bar/4_ordinal.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/50_order_bins_by_sum.story.tsx b/storybook/stories/bar/50_order_bins_by_sum.story.tsx
index 047d185c74b..f86657dbda3 100644
--- a/storybook/stories/bar/50_order_bins_by_sum.story.tsx
+++ b/storybook/stories/bar/50_order_bins_by_sum.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, BinAgg, Direction } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const data = [
   { x1: 'b', x2: 2, g1: 'false', g2: 'Canada', y1: 19, y2: 22 },
diff --git a/storybook/stories/bar/51_label_value_advanced.story.tsx b/storybook/stories/bar/51_label_value_advanced.story.tsx
index 306f90d0326..9e2d498b989 100644
--- a/storybook/stories/bar/51_label_value_advanced.story.tsx
+++ b/storybook/stories/bar/51_label_value_advanced.story.tsx
@@ -22,7 +22,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 const dataGen = new SeededDataGenerator();
diff --git a/storybook/stories/bar/52_multi_group_same_domain.story.tsx b/storybook/stories/bar/52_multi_group_same_domain.story.tsx
index 3b24f65c314..8e9444c7b49 100644
--- a/storybook/stories/bar/52_multi_group_same_domain.story.tsx
+++ b/storybook/stories/bar/52_multi_group_same_domain.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Settings, Chart, Position, ScaleType } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data1 = [
@@ -49,7 +48,7 @@ export const Example = () => {
 
   return (
     <Chart renderer="canvas">
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} />
       <Axis
         id="left y"
diff --git a/storybook/stories/bar/53_use_domain_from_different_groupid.story.tsx b/storybook/stories/bar/53_use_domain_from_different_groupid.story.tsx
index a7fbd458163..4f20b3daed7 100644
--- a/storybook/stories/bar/53_use_domain_from_different_groupid.story.tsx
+++ b/storybook/stories/bar/53_use_domain_from_different_groupid.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Settings, Chart, Position, ScaleType, DEFAULT_GLOBAL_ID } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data1 = [
@@ -48,7 +47,7 @@ export const Example = () => {
 
   return (
     <Chart renderer="canvas">
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} />
       <Axis id="left y" title="GREEN" position={Position.Right} />
       <Axis id="right 1 y" groupId={groupId1} title="BLUE" position={Position.Right} />
diff --git a/storybook/stories/bar/54_functional_accessors.story.tsx b/storybook/stories/bar/54_functional_accessors.story.tsx
index 13cf7bc8d7c..923cc5a8312 100644
--- a/storybook/stories/bar/54_functional_accessors.story.tsx
+++ b/storybook/stories/bar/54_functional_accessors.story.tsx
@@ -22,7 +22,6 @@ import {
 } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const xAccessorFn: AccessorFn = (d) => d.x;
@@ -35,7 +34,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings onElementClick={onElementClick} showLegend legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings onElementClick={onElementClick} showLegend legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/55_tooltip_boundary.story.tsx b/storybook/stories/bar/55_tooltip_boundary.story.tsx
index 151cd392104..8b8eb8ba13f 100644
--- a/storybook/stories/bar/55_tooltip_boundary.story.tsx
+++ b/storybook/stories/bar/55_tooltip_boundary.story.tsx
@@ -12,7 +12,6 @@ import React, { useRef } from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, TooltipProps } from '@elastic/charts';
 import { getRandomNumberGenerator, SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const rng = getRandomNumberGenerator();
@@ -66,7 +65,7 @@ export const Example = () => {
       <div ref={white} style={{ backgroundColor: 'white', padding: 30, height: '100%' }}>
         <div ref={blue} style={{ backgroundColor: 'blue', padding: 30, height: '100%' }}>
           <Chart>
-            <Settings tooltip={{ boundary, boundaryPadding, offset }} baseTheme={useBaseTheme()} />
+            <Settings tooltip={{ boundary, boundaryPadding, offset }} />
             <Axis id="bottom" hide={!showAxes} position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
             <Axis
               id="left"
diff --git a/storybook/stories/bar/56_test_use_dfl_gdomain.story.tsx b/storybook/stories/bar/56_test_use_dfl_gdomain.story.tsx
index 095bc0569cb..8ab5d046b93 100644
--- a/storybook/stories/bar/56_test_use_dfl_gdomain.story.tsx
+++ b/storybook/stories/bar/56_test_use_dfl_gdomain.story.tsx
@@ -10,12 +10,11 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="bottom" position={Position.Bottom} />
       <Axis id="right" groupId="mainGroup" position={Position.Left} ticks={5} />
 
diff --git a/storybook/stories/bar/57_test_rect_border_bars.story.tsx b/storybook/stories/bar/57_test_rect_border_bars.story.tsx
index 6bb51221a09..2a468b97794 100644
--- a/storybook/stories/bar/57_test_rect_border_bars.story.tsx
+++ b/storybook/stories/bar/57_test_rect_border_bars.story.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   return (
diff --git a/storybook/stories/bar/5_linear.story.tsx b/storybook/stories/bar/5_linear.story.tsx
index b85de5301fd..ea216f66f0d 100644
--- a/storybook/stories/bar/5_linear.story.tsx
+++ b/storybook/stories/bar/5_linear.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
@@ -33,7 +32,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings rotation={getChartRotationKnob()} theme={theme} baseTheme={useBaseTheme()} />
+      <Settings rotation={getChartRotationKnob()} theme={theme} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/bar/6_linear_no_linear_interval.story.tsx b/storybook/stories/bar/6_linear_no_linear_interval.story.tsx
index 5169a1bd789..184d58b3709 100644
--- a/storybook/stories/bar/6_linear_no_linear_interval.story.tsx
+++ b/storybook/stories/bar/6_linear_no_linear_interval.story.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
diff --git a/storybook/stories/bar/7_with_time_xaxis.story.tsx b/storybook/stories/bar/7_with_time_xaxis.story.tsx
index a3409a58664..c05da969a77 100644
--- a/storybook/stories/bar/7_with_time_xaxis.story.tsx
+++ b/storybook/stories/bar/7_with_time_xaxis.story.tsx
@@ -21,13 +21,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const formatter = timeFormatter(niceTimeFormatByDay(1));
   return (
     <Chart>
-      <Settings debug={boolean('debug', false)} baseTheme={useBaseTheme()} />
+      <Settings debug={boolean('debug', false)} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/bar/8_with_log_yaxis.story.tsx b/storybook/stories/bar/8_with_log_yaxis.story.tsx
index 1af14f63a34..684297cd55f 100644
--- a/storybook/stories/bar/8_with_log_yaxis.story.tsx
+++ b/storybook/stories/bar/8_with_log_yaxis.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis
       id="left2"
diff --git a/storybook/stories/bar/9_with_stacked_log.story.tsx b/storybook/stories/bar/9_with_stacked_log.story.tsx
index 3dd473ef227..8821593e02a 100644
--- a/storybook/stories/bar/9_with_stacked_log.story.tsx
+++ b/storybook/stories/bar/9_with_stacked_log.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis
       id="left2"
diff --git a/storybook/stories/bubble/1_simple.story.tsx b/storybook/stories/bubble/1_simple.story.tsx
index efc993f1849..3f5088ef2c8 100644
--- a/storybook/stories/bubble/1_simple.story.tsx
+++ b/storybook/stories/bubble/1_simple.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { Axis, Chart, BubbleSeries, Position, ScaleType, Settings, TooltipType, PointShape } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const data = dg.generateRandomSeries(100);
diff --git a/storybook/stories/bubble/2_ordinal.story.tsx b/storybook/stories/bubble/2_ordinal.story.tsx
index 3f7cb170f28..bafab80d829 100644
--- a/storybook/stories/bubble/2_ordinal.story.tsx
+++ b/storybook/stories/bubble/2_ordinal.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { Axis, Chart, BubbleSeries, Position, ScaleType, Settings, TooltipType } from '@elastic/charts';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const rng = getRandomNumberGenerator();
 const data = new Array(100).fill(0).map(() => ({
diff --git a/storybook/stories/bubble/3_multiple.story.tsx b/storybook/stories/bubble/3_multiple.story.tsx
index a091c6aa280..ebedb0e4a54 100644
--- a/storybook/stories/bubble/3_multiple.story.tsx
+++ b/storybook/stories/bubble/3_multiple.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { Axis, Chart, BubbleSeries, Position, ScaleType, Settings, TooltipType } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 
diff --git a/storybook/stories/bubble/4_mixed.story.tsx b/storybook/stories/bubble/4_mixed.story.tsx
index ebe1cadbc74..56b301871f6 100644
--- a/storybook/stories/bubble/4_mixed.story.tsx
+++ b/storybook/stories/bubble/4_mixed.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { Axis, Chart, BubbleSeries, Position, ScaleType, Settings, LineSeries } from '@elastic/charts';
 import { SeededDataGenerator, getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const rng = getRandomNumberGenerator();
diff --git a/storybook/stories/debug/1_basic.story.tsx b/storybook/stories/debug/1_basic.story.tsx
index 9f334d4083c..acb3d7ae76e 100644
--- a/storybook/stories/debug/1_basic.story.tsx
+++ b/storybook/stories/debug/1_basic.story.tsx
@@ -11,14 +11,12 @@ import React from 'react';
 
 import { Chart, ScaleType, Settings, Position, Axis, BarSeries, AreaSeries, CurveType } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const debug = boolean('debug', true);
 
   return (
     <Chart>
-      <Settings debug={debug} showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings debug={debug} showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
       <Axis id="top" position={Position.Top} title="Top axis" showOverlappingTicks />
diff --git a/storybook/stories/debug/2_debug_state.story.tsx b/storybook/stories/debug/2_debug_state.story.tsx
index 5d423bfb546..4b31f1d79ba 100644
--- a/storybook/stories/debug/2_debug_state.story.tsx
+++ b/storybook/stories/debug/2_debug_state.story.tsx
@@ -26,7 +26,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const debug = boolean('debug', false);
diff --git a/storybook/stories/goal/10_band_in_band.story.tsx b/storybook/stories/goal/10_band_in_band.story.tsx
index 5aad312fa84..3b2ceb8fe52 100644
--- a/storybook/stories/goal/10_band_in_band.story.tsx
+++ b/storybook/stories/goal/10_band_in_band.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -26,7 +25,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/11_gaps.story.tsx b/storybook/stories/goal/11_gaps.story.tsx
index 6d5a9570d9f..97498ccc30d 100644
--- a/storybook/stories/goal/11_gaps.story.tsx
+++ b/storybook/stories/goal/11_gaps.story.tsx
@@ -14,7 +14,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -34,7 +33,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Goal
         id="spec_1"
         subtype={subtype}
diff --git a/storybook/stories/goal/12_range.story.tsx b/storybook/stories/goal/12_range.story.tsx
index 87bcd2bccd8..fc5ed8df347 100644
--- a/storybook/stories/goal/12_range.story.tsx
+++ b/storybook/stories/goal/12_range.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/13_confidence_level.story.tsx b/storybook/stories/goal/13_confidence_level.story.tsx
index ba0924da076..fec918a29c9 100644
--- a/storybook/stories/goal/13_confidence_level.story.tsx
+++ b/storybook/stories/goal/13_confidence_level.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/14_one_third.story.tsx b/storybook/stories/goal/14_one_third.story.tsx
index 880e0e6519d..9610edf10a3 100644
--- a/storybook/stories/goal/14_one_third.story.tsx
+++ b/storybook/stories/goal/14_one_third.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/15_half_circle.story.tsx b/storybook/stories/goal/15_half_circle.story.tsx
index 5e92eae4637..c1354bdf7ac 100644
--- a/storybook/stories/goal/15_half_circle.story.tsx
+++ b/storybook/stories/goal/15_half_circle.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/16_two_thirds.story.tsx b/storybook/stories/goal/16_two_thirds.story.tsx
index 52d0e7cd47d..781567d155b 100644
--- a/storybook/stories/goal/16_two_thirds.story.tsx
+++ b/storybook/stories/goal/16_two_thirds.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/17_three_quarters.story.tsx b/storybook/stories/goal/17_three_quarters.story.tsx
index b856e747312..7a3a1a68051 100644
--- a/storybook/stories/goal/17_three_quarters.story.tsx
+++ b/storybook/stories/goal/17_three_quarters.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/17_total_circle.story.tsx b/storybook/stories/goal/17_total_circle.story.tsx
index 31085abdaf2..4a660077aa9 100644
--- a/storybook/stories/goal/17_total_circle.story.tsx
+++ b/storybook/stories/goal/17_total_circle.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/17_very_small_gap.story.tsx b/storybook/stories/goal/17_very_small_gap.story.tsx
index 252d549e1fb..03f1cab6112 100644
--- a/storybook/stories/goal/17_very_small_gap.story.tsx
+++ b/storybook/stories/goal/17_very_small_gap.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/18_side_gauge.story.tsx b/storybook/stories/goal/18_side_gauge.story.tsx
index 12763b60900..d92bc34b381 100644
--- a/storybook/stories/goal/18_side_gauge.story.tsx
+++ b/storybook/stories/goal/18_side_gauge.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import { Chart, Goal, Color, BandFillColorAccessorInput, Settings } from '@elastic/charts';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -25,7 +24,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/18_side_gauge_inverted_angle_relation.story.tsx b/storybook/stories/goal/18_side_gauge_inverted_angle_relation.story.tsx
index 0e62be76e2b..fd803bd7615 100644
--- a/storybook/stories/goal/18_side_gauge_inverted_angle_relation.story.tsx
+++ b/storybook/stories/goal/18_side_gauge_inverted_angle_relation.story.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 import { Chart, Goal, Color, BandFillColorAccessorInput, Settings } from '@elastic/charts';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const subtype = GoalSubtype.Goal;
 
 const colorMap: { [k: number]: Color } = {
@@ -25,7 +23,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/19_horizontal_negative.story.tsx b/storybook/stories/goal/19_horizontal_negative.story.tsx
index 4279b0bade7..7771e70049d 100644
--- a/storybook/stories/goal/19_horizontal_negative.story.tsx
+++ b/storybook/stories/goal/19_horizontal_negative.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/20_vertical_negative.story.tsx b/storybook/stories/goal/20_vertical_negative.story.tsx
index e87e4cb35cb..2e498213436 100644
--- a/storybook/stories/goal/20_vertical_negative.story.tsx
+++ b/storybook/stories/goal/20_vertical_negative.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/21_goal_negative.story.tsx b/storybook/stories/goal/21_goal_negative.story.tsx
index 68e1f49b20b..710ce41a79c 100644
--- a/storybook/stories/goal/21_goal_negative.story.tsx
+++ b/storybook/stories/goal/21_goal_negative.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/22_horizontal_plusminus.story.tsx b/storybook/stories/goal/22_horizontal_plusminus.story.tsx
index 305108a9448..f1fb9d76f87 100644
--- a/storybook/stories/goal/22_horizontal_plusminus.story.tsx
+++ b/storybook/stories/goal/22_horizontal_plusminus.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -33,7 +32,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/23_vertical_plusminus.story.tsx b/storybook/stories/goal/23_vertical_plusminus.story.tsx
index bafc02e92ea..fb0bfd4dcf4 100644
--- a/storybook/stories/goal/23_vertical_plusminus.story.tsx
+++ b/storybook/stories/goal/23_vertical_plusminus.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -33,7 +32,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/24_goal_plusminus.story.tsx b/storybook/stories/goal/24_goal_plusminus.story.tsx
index 4e26971db89..44e4d2451e4 100644
--- a/storybook/stories/goal/24_goal_plusminus.story.tsx
+++ b/storybook/stories/goal/24_goal_plusminus.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -33,7 +32,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/2_gauge_with_target.story.tsx b/storybook/stories/goal/2_gauge_with_target.story.tsx
index 4b1437dac2b..636375d9e19 100644
--- a/storybook/stories/goal/2_gauge_with_target.story.tsx
+++ b/storybook/stories/goal/2_gauge_with_target.story.tsx
@@ -14,7 +14,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -42,7 +41,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Goal
         id="spec_1"
         subtype={subtype}
diff --git a/storybook/stories/goal/3_horizontal_bullet.story.tsx b/storybook/stories/goal/3_horizontal_bullet.story.tsx
index fc11ef1329b..3b0d85beed9 100644
--- a/storybook/stories/goal/3_horizontal_bullet.story.tsx
+++ b/storybook/stories/goal/3_horizontal_bullet.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/4_vertical_bullet.story.tsx b/storybook/stories/goal/4_vertical_bullet.story.tsx
index e10a2450896..c4300f07225 100644
--- a/storybook/stories/goal/4_vertical_bullet.story.tsx
+++ b/storybook/stories/goal/4_vertical_bullet.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/5_minimal.story.tsx b/storybook/stories/goal/5_minimal.story.tsx
index 0e4a67d1895..dcc4792ded3 100644
--- a/storybook/stories/goal/5_minimal.story.tsx
+++ b/storybook/stories/goal/5_minimal.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -32,7 +31,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/6_minimal_horizontal.story.tsx b/storybook/stories/goal/6_minimal_horizontal.story.tsx
index 50cd4ce1e78..d05e13bd3bd 100644
--- a/storybook/stories/goal/6_minimal_horizontal.story.tsx
+++ b/storybook/stories/goal/6_minimal_horizontal.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/7_horizontal_bar.story.tsx b/storybook/stories/goal/7_horizontal_bar.story.tsx
index 34df6e1a0d5..32abd338814 100644
--- a/storybook/stories/goal/7_horizontal_bar.story.tsx
+++ b/storybook/stories/goal/7_horizontal_bar.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const q1 = 255 - 255 * 0.4;
 const q2 = 255 - 255 * 0.25;
@@ -31,7 +30,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/8_irregular_ticks.story.tsx b/storybook/stories/goal/8_irregular_ticks.story.tsx
index 48b6ae224ec..61f553a07ac 100644
--- a/storybook/stories/goal/8_irregular_ticks.story.tsx
+++ b/storybook/stories/goal/8_irregular_ticks.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -27,7 +26,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/goal/9_minimal_band.story.tsx b/storybook/stories/goal/9_minimal_band.story.tsx
index a2867d18b02..ec21522b22c 100644
--- a/storybook/stories/goal/9_minimal_band.story.tsx
+++ b/storybook/stories/goal/9_minimal_band.story.tsx
@@ -13,7 +13,6 @@ import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 
 const subtype = GoalSubtype.Goal;
 
@@ -25,7 +24,7 @@ const bandFillColor = (x: number): Color => colorMap[x];
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Goal
       id="spec_1"
       subtype={subtype}
diff --git a/storybook/stories/grids/1_basic.story.tsx b/storybook/stories/grids/1_basic.story.tsx
index 4191c1939d3..59dd7532f03 100644
--- a/storybook/stories/grids/1_basic.story.tsx
+++ b/storybook/stories/grids/1_basic.story.tsx
@@ -21,7 +21,6 @@ import {
   Settings,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function generateGridLineStyle(group: string, gridColor = 'purple'): GridLineStyle {
   const groupId = `${group} axis`;
@@ -96,7 +95,7 @@ export const Example = () => {
   const integersOnlyRight = boolean('right axis show only intger values', false, 'right axis');
   return (
     <Chart>
-      <Settings debug={boolean('debug', false)} theme={theme} baseTheme={useBaseTheme()} />
+      <Settings debug={boolean('debug', false)} theme={theme} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/grids/2_multiple_axes.story.tsx b/storybook/stories/grids/2_multiple_axes.story.tsx
index 993f79f29e6..4167467d2dc 100644
--- a/storybook/stories/grids/2_multiple_axes.story.tsx
+++ b/storybook/stories/grids/2_multiple_axes.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, GridLineStyle, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function generateGridLineStyle(group: string, gridColor = 'purple'): GridLineStyle {
   const groupId = `${group} axis`;
@@ -74,7 +73,7 @@ export const Example = () => {
 
   return (
     <Chart size={[500, 300]}>
-      <Settings debug={boolean('debug', false)} baseTheme={useBaseTheme()} />
+      <Settings debug={boolean('debug', false)} />
       <Axis
         id="left1"
         title="Left axis 1"
diff --git a/storybook/stories/grids/3_lines.story.tsx b/storybook/stories/grids/3_lines.story.tsx
index 71f1e936092..1f52d6c0633 100644
--- a/storybook/stories/grids/3_lines.story.tsx
+++ b/storybook/stories/grids/3_lines.story.tsx
@@ -24,7 +24,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getTooltipTypeKnob } from '../utils/knobs';
 
 const dg = new SeededDataGenerator();
diff --git a/storybook/stories/heatmap/1_basic.story.tsx b/storybook/stories/heatmap/1_basic.story.tsx
index 4804c093d51..4dcead8ebb6 100644
--- a/storybook/stories/heatmap/1_basic.story.tsx
+++ b/storybook/stories/heatmap/1_basic.story.tsx
@@ -26,7 +26,6 @@ import {
 import { Config } from '@elastic/charts/src/chart_types/heatmap/layout/types/config_types';
 import { SWIM_LANE_DATA } from '@elastic/charts/src/utils/data_samples/test_anomaly_swim_lane';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const [selection, setSelection] = useState<{ x: (string | number)[]; y: (string | number)[] } | undefined>();
diff --git a/storybook/stories/heatmap/2_categorical.story.tsx b/storybook/stories/heatmap/2_categorical.story.tsx
index 64428613b6c..bcde3e552fd 100644
--- a/storybook/stories/heatmap/2_categorical.story.tsx
+++ b/storybook/stories/heatmap/2_categorical.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { Chart, Heatmap, Settings } from '@elastic/charts';
 import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data = boolean('filter dataset', true)
diff --git a/storybook/stories/icicle/01_unix_icicle.story.tsx b/storybook/stories/icicle/01_unix_icicle.story.tsx
index d1ef1ce7429..3eb8a9eaed8 100644
--- a/storybook/stories/icicle/01_unix_icicle.story.tsx
+++ b/storybook/stories/icicle/01_unix_icicle.story.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { config, getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils';
 import { viridis18 as palette } from '../utils/utils';
 
@@ -19,7 +18,7 @@ const color = palette.slice().reverse();
 export const Example = () => {
   return (
     <Chart>
-      <Settings showLegend flatLegend legendMaxDepth={maxDepth} baseTheme={useBaseTheme()} />
+      <Settings showLegend flatLegend legendMaxDepth={maxDepth} />
       <Partition
         id="spec_1"
         data={getFlatData()}
diff --git a/storybook/stories/icicle/02_unix_flame.story.tsx b/storybook/stories/icicle/02_unix_flame.story.tsx
index 3fa7b2f11f8..4d8de2ae6e2 100644
--- a/storybook/stories/icicle/02_unix_flame.story.tsx
+++ b/storybook/stories/icicle/02_unix_flame.story.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 
 import { Chart, Datum, LegendStrategy, Partition, PartitionLayout, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { config, getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils';
 import { plasma18 as palette } from '../utils/utils';
 
diff --git a/storybook/stories/icicle/03_cpu_profile_flame.story.tsx b/storybook/stories/icicle/03_cpu_profile_flame.story.tsx
index d5034f4a0e4..6f257aca9f8 100644
--- a/storybook/stories/icicle/03_cpu_profile_flame.story.tsx
+++ b/storybook/stories/icicle/03_cpu_profile_flame.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, PrimitiveValue, Settings } from '@elastic/charts';
 import data from '@elastic/charts/src/mocks/hierarchical/cpu_profile_tree_mock.json';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { config } from '../utils/hierarchical_input_utils';
 import { discreteColor, viridis18 as palette } from '../utils/utils';
 
@@ -32,7 +31,7 @@ export const Example = () => {
   const clipText = boolean("Allow, and clip, texts that wouldn't otherwise fit", true);
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Partition
         id="spec_1"
         data={data.facts}
diff --git a/storybook/stories/interactions/10_brush_selection_bar.story.tsx b/storybook/stories/interactions/10_brush_selection_bar.story.tsx
index 80124a9562e..acfafccbc0d 100644
--- a/storybook/stories/interactions/10_brush_selection_bar.story.tsx
+++ b/storybook/stories/interactions/10_brush_selection_bar.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { isVerticalRotation } from '@elastic/charts/src/chart_types/xy_chart/state/utils/common';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
@@ -21,7 +20,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings onBrushEnd={action('onBrushEnd')} rotation={rotation} baseTheme={useBaseTheme()} />
+      <Settings onBrushEnd={action('onBrushEnd')} rotation={rotation} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/interactions/10a_brush_selection_bar_hist.story.tsx b/storybook/stories/interactions/10a_brush_selection_bar_hist.story.tsx
index 8b7285a50b7..cd0879715f7 100644
--- a/storybook/stories/interactions/10a_brush_selection_bar_hist.story.tsx
+++ b/storybook/stories/interactions/10a_brush_selection_bar_hist.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => (
diff --git a/storybook/stories/interactions/11_brush_time.story.tsx b/storybook/stories/interactions/11_brush_time.story.tsx
index b8420606b62..f7658f5147a 100644
--- a/storybook/stories/interactions/11_brush_time.story.tsx
+++ b/storybook/stories/interactions/11_brush_time.story.tsx
@@ -24,7 +24,6 @@ import {
   Settings,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/interactions/12_brush_time_hist.story.tsx b/storybook/stories/interactions/12_brush_time_hist.story.tsx
index dd6b865cb4d..784418d0314 100644
--- a/storybook/stories/interactions/12_brush_time_hist.story.tsx
+++ b/storybook/stories/interactions/12_brush_time_hist.story.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/charts';
 import { isVerticalRotation } from '@elastic/charts/src/chart_types/xy_chart/state/utils/common';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/interactions/13_brush_disabled_ordinal.story.tsx b/storybook/stories/interactions/13_brush_disabled_ordinal.story.tsx
index 6cf2dcb4dff..5c25c4dec85 100644
--- a/storybook/stories/interactions/13_brush_disabled_ordinal.story.tsx
+++ b/storybook/stories/interactions/13_brush_disabled_ordinal.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => (
   <Chart>
-    <Settings onBrushEnd={action('onBrushEnd')} rotation={getChartRotationKnob()} baseTheme={useBaseTheme()} />
+    <Settings onBrushEnd={action('onBrushEnd')} rotation={getChartRotationKnob()} />
     <Axis id="bottom" position={Position.Bottom} title="bottom" showOverlappingTicks />
     <Axis id="left" title="left" position={Position.Left} />
     <LineSeries
diff --git a/storybook/stories/interactions/14_crosshair_time.story.tsx b/storybook/stories/interactions/14_crosshair_time.story.tsx
index 324f2a93052..a8c83528c92 100644
--- a/storybook/stories/interactions/14_crosshair_time.story.tsx
+++ b/storybook/stories/interactions/14_crosshair_time.story.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/interactions/15_render_change.story.tsx b/storybook/stories/interactions/15_render_change.story.tsx
index 5bb2343fc8e..d867956c262 100644
--- a/storybook/stories/interactions/15_render_change.story.tsx
+++ b/storybook/stories/interactions/15_render_change.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const onRenderChange = action('onRenderChange');
 
diff --git a/storybook/stories/interactions/16_cursor_update_action.story.tsx b/storybook/stories/interactions/16_cursor_update_action.story.tsx
index f43d066d1d6..0096a0befd3 100644
--- a/storybook/stories/interactions/16_cursor_update_action.story.tsx
+++ b/storybook/stories/interactions/16_cursor_update_action.story.tsx
@@ -27,7 +27,6 @@ import {
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 import { palettes } from '@elastic/charts/src/utils/themes/colors';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getTooltipTypeKnob, getPlacementKnob } from '../utils/knobs';
 
 const chartTypes: Record<string, any> = {
diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx
index da2432250a1..0108a0e9674 100644
--- a/storybook/stories/interactions/17_png_export.story.tsx
+++ b/storybook/stories/interactions/17_png_export.story.tsx
@@ -29,7 +29,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { Color } from '../../../packages/charts/src/common/colors';
-import { useBaseTheme } from '../../use_base_theme';
 import { productLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => {
diff --git a/storybook/stories/interactions/1_bar_clicks.story.tsx b/storybook/stories/interactions/1_bar_clicks.story.tsx
index d137527b569..47345d94002 100644
--- a/storybook/stories/interactions/1_bar_clicks.story.tsx
+++ b/storybook/stories/interactions/1_bar_clicks.story.tsx
@@ -21,7 +21,6 @@ import {
   TooltipValueFormatter,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const onElementListeners = {
   onElementClick: action('onElementClick'),
diff --git a/storybook/stories/interactions/2_area_point_clicks.story.tsx b/storybook/stories/interactions/2_area_point_clicks.story.tsx
index 10cb577aba4..7b8550fa117 100644
--- a/storybook/stories/interactions/2_area_point_clicks.story.tsx
+++ b/storybook/stories/interactions/2_area_point_clicks.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const onElementListeners = {
   onElementClick: action('onElementClick'),
diff --git a/storybook/stories/interactions/3_line_point_clicks.story.tsx b/storybook/stories/interactions/3_line_point_clicks.story.tsx
index 78c114fe47c..e5b223fd34e 100644
--- a/storybook/stories/interactions/3_line_point_clicks.story.tsx
+++ b/storybook/stories/interactions/3_line_point_clicks.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const onElementListeners = {
   onElementClick: action('onElementClick'),
diff --git a/storybook/stories/interactions/4_line_area_bar_clicks.story.tsx b/storybook/stories/interactions/4_line_area_bar_clicks.story.tsx
index c17c3beceff..0f870562346 100644
--- a/storybook/stories/interactions/4_line_area_bar_clicks.story.tsx
+++ b/storybook/stories/interactions/4_line_area_bar_clicks.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const onElementListeners = {
   onElementClick: action('onElementClick'),
diff --git a/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx b/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx
index 3d0965842a4..1a69866f419 100644
--- a/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx
+++ b/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { Chart, Position, Settings, Partition, PartitionLayout } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   indexInterpolatedFillColor,
   interpolatorCET2s,
diff --git a/storybook/stories/interactions/5_clicks_legend_items_bar.story.tsx b/storybook/stories/interactions/5_clicks_legend_items_bar.story.tsx
index 7d1abf14ede..d33875519ee 100644
--- a/storybook/stories/interactions/5_clicks_legend_items_bar.story.tsx
+++ b/storybook/stories/interactions/5_clicks_legend_items_bar.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { BARCHART_2Y2G } from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const onLegendItemListeners = {
   onLegendItemOver: action('onLegendItemOver'),
diff --git a/storybook/stories/interactions/6_clicks_legend_items_area.story.tsx b/storybook/stories/interactions/6_clicks_legend_items_area.story.tsx
index b5709af2f21..2d16e9b0b28 100644
--- a/storybook/stories/interactions/6_clicks_legend_items_area.story.tsx
+++ b/storybook/stories/interactions/6_clicks_legend_items_area.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
diff --git a/storybook/stories/interactions/7_clicks_legend_items_line.story.tsx b/storybook/stories/interactions/7_clicks_legend_items_line.story.tsx
index 645262c6297..e8d83a78fe6 100644
--- a/storybook/stories/interactions/7_clicks_legend_items_line.story.tsx
+++ b/storybook/stories/interactions/7_clicks_legend_items_line.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
diff --git a/storybook/stories/interactions/8_clicks_legend_items_mixed.story.tsx b/storybook/stories/interactions/8_clicks_legend_items_mixed.story.tsx
index 5c2132b20bf..533f469b3cd 100644
--- a/storybook/stories/interactions/8_clicks_legend_items_mixed.story.tsx
+++ b/storybook/stories/interactions/8_clicks_legend_items_mixed.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
diff --git a/storybook/stories/interactions/9_brush_selection_linear.story.tsx b/storybook/stories/interactions/9_brush_selection_linear.story.tsx
index c69cad30436..098cec6acf6 100644
--- a/storybook/stories/interactions/9_brush_selection_linear.story.tsx
+++ b/storybook/stories/interactions/9_brush_selection_linear.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => (
   <Chart>
-    <Settings onBrushEnd={action('onBrushEnd')} rotation={getChartRotationKnob()} baseTheme={useBaseTheme()} />
+    <Settings onBrushEnd={action('onBrushEnd')} rotation={getChartRotationKnob()} />
     <Axis id="bottom" position={Position.Bottom} title="bottom" showOverlappingTicks />
     <Axis id="left" title="left" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
     <Axis id="top" position={Position.Top} title="top" showOverlappingTicks />
diff --git a/storybook/stories/interactions/9a_brush_selection_linear.story.tsx b/storybook/stories/interactions/9a_brush_selection_linear.story.tsx
index 21f0feb92be..b3afa1645e6 100644
--- a/storybook/stories/interactions/9a_brush_selection_linear.story.tsx
+++ b/storybook/stories/interactions/9a_brush_selection_linear.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, BrushAxis } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/legend/10_sunburst.story.tsx b/storybook/stories/legend/10_sunburst.story.tsx
index 8272bc3b0cd..ccefaebd8c3 100644
--- a/storybook/stories/legend/10_sunburst.story.tsx
+++ b/storybook/stories/legend/10_sunburst.story.tsx
@@ -14,7 +14,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   discreteColor,
   colorBrewerCategoricalStark9,
@@ -115,7 +114,7 @@ export const Example = () => {
 Example.parameters = {
   background: { default: 'white' },
   markdown: `To flatten a hierarchical legend (like the rendered in a pie chart or a treemap when using a multi-layer configuration) you can
-add the \`flatLegend\` prop into the \`<Settings  baseTheme={useBaseTheme()} />\` component.
+add the \`flatLegend\` prop into the \`<Settings  />\` component.
 
 To limit displayed hierarchy to a specific depth, you can use the \`legendMaxDepth\` prop. The first layer will have a depth of \`1\`.`,
 };
diff --git a/storybook/stories/legend/10_sunburst_repeated_label.story.tsx b/storybook/stories/legend/10_sunburst_repeated_label.story.tsx
index 0e98a07ee1f..ab56f375365 100644
--- a/storybook/stories/legend/10_sunburst_repeated_label.story.tsx
+++ b/storybook/stories/legend/10_sunburst_repeated_label.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Chart, LegendStrategy, Partition, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const flatLegend = boolean('flatLegend', false);
diff --git a/storybook/stories/legend/11_legend_actions.story.tsx b/storybook/stories/legend/11_legend_actions.story.tsx
index 7c7f4e9e030..524fa712f8b 100644
--- a/storybook/stories/legend/11_legend_actions.story.tsx
+++ b/storybook/stories/legend/11_legend_actions.story.tsx
@@ -37,7 +37,6 @@ import {
 } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getPositionKnob, getEuiPopoverPositionKnob } from '../utils/knobs';
 
 const getAction = (anchorPosition: PopoverAnchorPosition): LegendAction => ({ series, label }) => {
diff --git a/storybook/stories/legend/12_legend_margins.story.tsx b/storybook/stories/legend/12_legend_margins.story.tsx
index 93f08676ce9..bc0c74018d3 100644
--- a/storybook/stories/legend/12_legend_margins.story.tsx
+++ b/storybook/stories/legend/12_legend_margins.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { BARCHART_1Y1G } from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
diff --git a/storybook/stories/legend/13_inside_chart.story.tsx b/storybook/stories/legend/13_inside_chart.story.tsx
index 7fb21a93612..c7cd703534b 100644
--- a/storybook/stories/legend/13_inside_chart.story.tsx
+++ b/storybook/stories/legend/13_inside_chart.story.tsx
@@ -24,7 +24,6 @@ import {
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const data = dg.generateGroupedSeries(10, 20);
diff --git a/storybook/stories/legend/14_single_series.story.tsx b/storybook/stories/legend/14_single_series.story.tsx
index a4e872f3eec..0b4cf0f2c71 100644
--- a/storybook/stories/legend/14_single_series.story.tsx
+++ b/storybook/stories/legend/14_single_series.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { BarSeries, Chart, ScaleType, Settings } from '@elastic/charts';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getPositionKnob } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/legend/1_legend_right.story.tsx b/storybook/stories/legend/1_legend_right.story.tsx
index ad25ce6ace5..35d6688fedd 100644
--- a/storybook/stories/legend/1_legend_right.story.tsx
+++ b/storybook/stories/legend/1_legend_right.story.tsx
@@ -11,15 +11,13 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const yAccessors = ['y1', 'y2'];
   const splitSeriesAccessors = ['g1', 'g2'];
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/2_legend_bottom.story.tsx b/storybook/stories/legend/2_legend_bottom.story.tsx
index 00fac5f2327..2f6318722e5 100644
--- a/storybook/stories/legend/2_legend_bottom.story.tsx
+++ b/storybook/stories/legend/2_legend_bottom.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Bottom} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Bottom} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/3_legend_left.story.tsx b/storybook/stories/legend/3_legend_left.story.tsx
index 0d33649cd2e..05759ffb9f1 100644
--- a/storybook/stories/legend/3_legend_left.story.tsx
+++ b/storybook/stories/legend/3_legend_left.story.tsx
@@ -11,11 +11,9 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Left} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Left} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/4_legend_top.story.tsx b/storybook/stories/legend/4_legend_top.story.tsx
index b264b359e05..8894e4a7a74 100644
--- a/storybook/stories/legend/4_legend_top.story.tsx
+++ b/storybook/stories/legend/4_legend_top.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Top} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Top} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/5_changing_specs.story.tsx b/storybook/stories/legend/5_changing_specs.story.tsx
index 9858f5633ef..9695d82b97c 100644
--- a/storybook/stories/legend/5_changing_specs.story.tsx
+++ b/storybook/stories/legend/5_changing_specs.story.tsx
@@ -12,13 +12,11 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const splitSeries = boolean('split series', true) ? ['g1', 'g2'] : undefined;
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Top} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Top} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/6_hide_legend.story.tsx b/storybook/stories/legend/6_hide_legend.story.tsx
index fc8755cda94..2d182e16fe3 100644
--- a/storybook/stories/legend/6_hide_legend.story.tsx
+++ b/storybook/stories/legend/6_hide_legend.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const hideBarSeriesInLegend = boolean('hide bar series in legend', false);
@@ -19,7 +18,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/7_display_values.story.tsx b/storybook/stories/legend/7_display_values.story.tsx
index 4b4f9e93a4c..5011b66bb32 100644
--- a/storybook/stories/legend/7_display_values.story.tsx
+++ b/storybook/stories/legend/7_display_values.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts';
 import { TSVB_DATASET } from '@elastic/charts/src/utils/data_samples/test_dataset_tsvb';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { arrayKnobs } from '../utils/knobs';
 
 export const Example = () => {
diff --git a/storybook/stories/legend/8_spacing_buffer.story.tsx b/storybook/stories/legend/8_spacing_buffer.story.tsx
index 6e0069e22c5..76ef08a96bc 100644
--- a/storybook/stories/legend/8_spacing_buffer.story.tsx
+++ b/storybook/stories/legend/8_spacing_buffer.story.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const theme: PartialTheme = {
     legend: {
@@ -26,7 +24,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings theme={theme} showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings theme={theme} showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/legend/9_color_picker.story.tsx b/storybook/stories/legend/9_color_picker.story.tsx
index 3060c17dc0c..9c800dd2067 100644
--- a/storybook/stories/legend/9_color_picker.story.tsx
+++ b/storybook/stories/legend/9_color_picker.story.tsx
@@ -24,8 +24,6 @@ import {
 } from '@elastic/charts';
 import { BARCHART_1Y1G } from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const onChangeAction = action('onChange');
 
 export const Example = () => {
@@ -71,7 +69,7 @@ export const Example = () => {
   CustomColorPicker.displayName = 'CustomColorPicker';
   return (
     <Chart>
-      <Settings showLegend legendColorPicker={CustomColorPicker} baseTheme={useBaseTheme()} />
+      <Settings showLegend legendColorPicker={CustomColorPicker} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/line/10_test_path_ordering.story.tsx b/storybook/stories/line/10_test_path_ordering.story.tsx
index 3e39ea5021f..b83cc72acec 100644
--- a/storybook/stories/line/10_test_path_ordering.story.tsx
+++ b/storybook/stories/line/10_test_path_ordering.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { Axis, LineSeries, Chart, Position, ScaleType, Settings, Direction } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 /**
  * Data to defined consistent order of series when using shuffle
diff --git a/storybook/stories/line/11_discontinuous_data_points.story.tsx b/storybook/stories/line/11_discontinuous_data_points.story.tsx
index 8d96adb58cb..832c2a79b0b 100644
--- a/storybook/stories/line/11_discontinuous_data_points.story.tsx
+++ b/storybook/stories/line/11_discontinuous_data_points.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings, Fit, AreaSeries } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const fitEnabled = boolean('enable fit function', false);
@@ -19,7 +18,7 @@ export const Example = () => {
   const LineOrAreaSeries = isArea ? AreaSeries : LineSeries;
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="x" position={Position.Bottom} />
       <Axis id="y" position={Position.Left} />
 
diff --git a/storybook/stories/line/12_orphan_data_points.story.tsx b/storybook/stories/line/12_orphan_data_points.story.tsx
index 7ba7930d9e6..4fbe42ab4bf 100644
--- a/storybook/stories/line/12_orphan_data_points.story.tsx
+++ b/storybook/stories/line/12_orphan_data_points.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings, Fit, AreaSeries } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const fitEnabled = boolean('enable fit function', false);
diff --git a/storybook/stories/line/13_line_mark_accessor.story.tsx b/storybook/stories/line/13_line_mark_accessor.story.tsx
index 85f64ab03dd..6140b9392b7 100644
--- a/storybook/stories/line/13_line_mark_accessor.story.tsx
+++ b/storybook/stories/line/13_line_mark_accessor.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, Chart, Position, ScaleType, Settings, LineSeries } from '@elastic/charts';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const rng = getRandomNumberGenerator();
 const bubbleData = new Array(30).fill(0).map((_, i) => ({
diff --git a/storybook/stories/line/14_point_shapes.story.tsx b/storybook/stories/line/14_point_shapes.story.tsx
index ea8c30a0ac1..8ca6d23fa9e 100644
--- a/storybook/stories/line/14_point_shapes.story.tsx
+++ b/storybook/stories/line/14_point_shapes.story.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { renderEuiColorPicker } from '../legend/11_legend_actions.story';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
diff --git a/storybook/stories/line/15_test_negative_points.story.tsx b/storybook/stories/line/15_test_negative_points.story.tsx
index eeb2d0958f4..af257ade496 100644
--- a/storybook/stories/line/15_test_negative_points.story.tsx
+++ b/storybook/stories/line/15_test_negative_points.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { LineSeries, Chart, ScaleType, Settings, Position, Axis } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const negative = boolean('use negative values', true);
@@ -35,7 +34,7 @@ export const Example = () => {
   });
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="y" position={Position.Left} />
       <Axis id="x" position={Position.Bottom} />
       <LineSeries fit="linear" id="line" xScaleType={ScaleType.Time} yScaleType={yScaleType} data={data} />
diff --git a/storybook/stories/line/1_basic.story.tsx b/storybook/stories/line/1_basic.story.tsx
index 45c19c35a24..c949f1704ec 100644
--- a/storybook/stories/line/1_basic.story.tsx
+++ b/storybook/stories/line/1_basic.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Chart, LineSeries, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const toggleSpec = boolean('toggle line spec', true);
@@ -23,7 +22,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <LineSeries
         id={specId}
         xScaleType={ScaleType.Time}
diff --git a/storybook/stories/line/2_w_axis.story.tsx b/storybook/stories/line/2_w_axis.story.tsx
index fe026878afd..ddd1100c685 100644
--- a/storybook/stories/line/2_w_axis.story.tsx
+++ b/storybook/stories/line/2_w_axis.story.tsx
@@ -20,7 +20,6 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
diff --git a/storybook/stories/line/3_ordinal.story.tsx b/storybook/stories/line/3_ordinal.story.tsx
index b014b6d265a..fc6f95c07a6 100644
--- a/storybook/stories/line/3_ordinal.story.tsx
+++ b/storybook/stories/line/3_ordinal.story.tsx
@@ -20,14 +20,13 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings rotation={getChartRotationKnob()} baseTheme={useBaseTheme()} />
+    <Settings rotation={getChartRotationKnob()} />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/line/4_linear.story.tsx b/storybook/stories/line/4_linear.story.tsx
index 5d5530b3d0c..006e70171a2 100644
--- a/storybook/stories/line/4_linear.story.tsx
+++ b/storybook/stories/line/4_linear.story.tsx
@@ -20,13 +20,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/line/5_w_axis_and_legend.story.tsx b/storybook/stories/line/5_w_axis_and_legend.story.tsx
index ecbb16b3e6e..b8a45916faa 100644
--- a/storybook/stories/line/5_w_axis_and_legend.story.tsx
+++ b/storybook/stories/line/5_w_axis_and_legend.story.tsx
@@ -20,13 +20,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/line/6_curved.story.tsx b/storybook/stories/line/6_curved.story.tsx
index 92ed6b703b9..4b0a9eb9ca2 100644
--- a/storybook/stories/line/6_curved.story.tsx
+++ b/storybook/stories/line/6_curved.story.tsx
@@ -21,13 +21,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/line/7_multiple.story.tsx b/storybook/stories/line/7_multiple.story.tsx
index def4a8e4bbe..44a6623a6f1 100644
--- a/storybook/stories/line/7_multiple.story.tsx
+++ b/storybook/stories/line/7_multiple.story.tsx
@@ -21,13 +21,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/line/8_stacked.story.tsx b/storybook/stories/line/8_stacked.story.tsx
index 80b78df2093..53f7576c6ae 100644
--- a/storybook/stories/line/8_stacked.story.tsx
+++ b/storybook/stories/line/8_stacked.story.tsx
@@ -21,13 +21,12 @@ import {
 } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/line/9_multi_series.story.tsx b/storybook/stories/line/9_multi_series.story.tsx
index 1041de21e01..283b4d9d80b 100644
--- a/storybook/stories/line/9_multi_series.story.tsx
+++ b/storybook/stories/line/9_multi_series.story.tsx
@@ -22,13 +22,12 @@ import {
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 import { TSVB_DATASET } from '@elastic/charts/src/utils/data_samples/test_dataset_tsvb';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
     <Axis
       id="left"
diff --git a/storybook/stories/mixed/1_bars_and_lines.story.tsx b/storybook/stories/mixed/1_bars_and_lines.story.tsx
index ee4253a7cbd..0fb65effe22 100644
--- a/storybook/stories/mixed/1_bars_and_lines.story.tsx
+++ b/storybook/stories/mixed/1_bars_and_lines.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/mixed/2_lines_and_areas.story.tsx b/storybook/stories/mixed/2_lines_and_areas.story.tsx
index 1c165880854..fdb608af05c 100644
--- a/storybook/stories/mixed/2_lines_and_areas.story.tsx
+++ b/storybook/stories/mixed/2_lines_and_areas.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/mixed/3_areas_and_bars.story.tsx b/storybook/stories/mixed/3_areas_and_bars.story.tsx
index 06240997d8c..ebbc132f132 100644
--- a/storybook/stories/mixed/3_areas_and_bars.story.tsx
+++ b/storybook/stories/mixed/3_areas_and_bars.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { AreaSeries, Axis, BarSeries, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart renderer="canvas">
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
     <Axis id="top" position={Position.Top} title="Top axis" showOverlappingTicks />
diff --git a/storybook/stories/mixed/4_test_bar.story.tsx b/storybook/stories/mixed/4_test_bar.story.tsx
index 628ff075bae..56e5d0c6973 100644
--- a/storybook/stories/mixed/4_test_bar.story.tsx
+++ b/storybook/stories/mixed/4_test_bar.story.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data1 = [
@@ -38,7 +37,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/mixed/5_test_bar_time.story.tsx b/storybook/stories/mixed/5_test_bar_time.story.tsx
index 3a56fcc56d3..ecf22aa8664 100644
--- a/storybook/stories/mixed/5_test_bar_time.story.tsx
+++ b/storybook/stories/mixed/5_test_bar_time.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 import { timeFormatter } from '@elastic/charts/src/utils/data/formatters';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const start = DateTime.fromISO('2019-01-01T00:00:00.000', { zone: 'utc' });
@@ -42,7 +41,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id="bottom"
         position={Position.Bottom}
diff --git a/storybook/stories/mixed/6_fitting.story.tsx b/storybook/stories/mixed/6_fitting.story.tsx
index 09c2321c9f8..46a3860594f 100644
--- a/storybook/stories/mixed/6_fitting.story.tsx
+++ b/storybook/stories/mixed/6_fitting.story.tsx
@@ -22,7 +22,6 @@ import {
   SeriesType,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const dataTypes = {
diff --git a/storybook/stories/mixed/6_fitting_stacked.story.tsx b/storybook/stories/mixed/6_fitting_stacked.story.tsx
index 61c1476eecc..5212855485f 100644
--- a/storybook/stories/mixed/6_fitting_stacked.story.tsx
+++ b/storybook/stories/mixed/6_fitting_stacked.story.tsx
@@ -13,7 +13,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings, Fit, StackMode } from '@elastic/charts';
 import { getRandomNumberGenerator, getRNGSeed } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const randomizeBoundingData = getRNGSeed() ? false : boolean('randomize bounding data', false);
diff --git a/storybook/stories/mixed/7_marks.story.tsx b/storybook/stories/mixed/7_marks.story.tsx
index fc954df4921..ec728e31f59 100644
--- a/storybook/stories/mixed/7_marks.story.tsx
+++ b/storybook/stories/mixed/7_marks.story.tsx
@@ -14,7 +14,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const getRandomNumber = getRandomNumberGenerator();
 const data1 = new Array(100).fill(0).map((_, x) => ({
diff --git a/storybook/stories/mosaic/10_mosaic_simple.story.tsx b/storybook/stories/mosaic/10_mosaic_simple.story.tsx
index 452a7443144..1060b9f7078 100644
--- a/storybook/stories/mosaic/10_mosaic_simple.story.tsx
+++ b/storybook/stories/mosaic/10_mosaic_simple.story.tsx
@@ -23,7 +23,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { keepDistinct } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { countryLookup, colorBrewerCategoricalPastel12B, regionLookup } from '../utils/utils';
 
 const productLookup: Record<string, { label: string; position: number }> = {
diff --git a/storybook/stories/mosaic/20_mosaic_with_other.story.tsx b/storybook/stories/mosaic/20_mosaic_with_other.story.tsx
index 1e26452a111..adbdf9a853e 100644
--- a/storybook/stories/mosaic/20_mosaic_with_other.story.tsx
+++ b/storybook/stories/mosaic/20_mosaic_with_other.story.tsx
@@ -21,7 +21,6 @@ import {
 } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { countryLookup } from '../utils/utils';
 
 const categoricalColors = ['rgb(110,110,110)', 'rgb(123,123,123)', 'darkgrey', 'lightgrey'];
@@ -42,7 +41,7 @@ const data = [
 export const Example = () => {
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Partition
         id="spec_1"
         data={data}
diff --git a/storybook/stories/rotations/1_ordinal.story.tsx b/storybook/stories/rotations/1_ordinal.story.tsx
index 723ad087647..e077137bc6a 100644
--- a/storybook/stories/rotations/1_ordinal.story.tsx
+++ b/storybook/stories/rotations/1_ordinal.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
diff --git a/storybook/stories/rotations/2_negative_ordinal.story.tsx b/storybook/stories/rotations/2_negative_ordinal.story.tsx
index adb656cb365..c67649dbd63 100644
--- a/storybook/stories/rotations/2_negative_ordinal.story.tsx
+++ b/storybook/stories/rotations/2_negative_ordinal.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={-90} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={-90} />
     <Axis id="y top" position={Position.Top} title="y top axis" />
     <Axis id="x right" title="x right axis" position={Position.Right} />
     <Axis id="y bottom" position={Position.Bottom} title="y bottom axis" />
diff --git a/storybook/stories/rotations/3_rotations_ordinal.story.tsx b/storybook/stories/rotations/3_rotations_ordinal.story.tsx
index 07fd60fc1ce..99ea6d90052 100644
--- a/storybook/stories/rotations/3_rotations_ordinal.story.tsx
+++ b/storybook/stories/rotations/3_rotations_ordinal.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={0} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={0} />
     <Axis id="x top" position={Position.Top} title="x top axis" />
     <Axis id="y right" title="y right axis" position={Position.Right} />
     <Axis id="x bottom" position={Position.Bottom} title="x bottom axis" />
diff --git a/storybook/stories/rotations/4_90_ordinal.story.tsx b/storybook/stories/rotations/4_90_ordinal.story.tsx
index 4a50cf527ed..f430c88ce35 100644
--- a/storybook/stories/rotations/4_90_ordinal.story.tsx
+++ b/storybook/stories/rotations/4_90_ordinal.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={90} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={90} />
     <Axis id="y top" position={Position.Top} title="y top axis" />
     <Axis id="x right" title="x right axis" position={Position.Right} />
     <Axis id="y bottom" position={Position.Bottom} title="y bottom axis" />
diff --git a/storybook/stories/rotations/5_180_ordinal.story.tsx b/storybook/stories/rotations/5_180_ordinal.story.tsx
index bd233337ef2..d127f622f79 100644
--- a/storybook/stories/rotations/5_180_ordinal.story.tsx
+++ b/storybook/stories/rotations/5_180_ordinal.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={180} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={180} />
     <Axis id="x top" position={Position.Top} title="x top axis" />
     <Axis id="y right" title="y right axis" position={Position.Right} />
     <Axis id="x bottom" position={Position.Bottom} title="x bottom axis" />
diff --git a/storybook/stories/rotations/6_negative_linear.story.tsx b/storybook/stories/rotations/6_negative_linear.story.tsx
index cffae527acd..560cf6af379 100644
--- a/storybook/stories/rotations/6_negative_linear.story.tsx
+++ b/storybook/stories/rotations/6_negative_linear.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={-90} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={-90} />
     <Axis id="y top" position={Position.Top} title="y top axis" />
     <Axis id="x right" title="x right axis" position={Position.Right} />
     <Axis id="y bottom" position={Position.Bottom} title="y bottom axis" />
diff --git a/storybook/stories/rotations/7_rotations_linear.story.tsx b/storybook/stories/rotations/7_rotations_linear.story.tsx
index 6dab2610f39..addb52e3c6b 100644
--- a/storybook/stories/rotations/7_rotations_linear.story.tsx
+++ b/storybook/stories/rotations/7_rotations_linear.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={0} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={0} />
     <Axis id="x top" position={Position.Top} title="x top axis" />
     <Axis id="y right" title="y right axis" position={Position.Right} />
     <Axis id="x bottom" position={Position.Bottom} title="x bottom axis" />
diff --git a/storybook/stories/rotations/8_90_deg_linear.story.tsx b/storybook/stories/rotations/8_90_deg_linear.story.tsx
index f06fdb831d0..925301ec49a 100644
--- a/storybook/stories/rotations/8_90_deg_linear.story.tsx
+++ b/storybook/stories/rotations/8_90_deg_linear.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={90} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={90} />
     <Axis id="y top" position={Position.Top} title="y top axis" />
     <Axis id="x right" title="x right axis" position={Position.Right} />
     <Axis id="y bottom" position={Position.Bottom} title="y bottom axis" />
diff --git a/storybook/stories/rotations/9_180_deg_linear.story.tsx b/storybook/stories/rotations/9_180_deg_linear.story.tsx
index 04ae1b2aff5..f56a11639a1 100644
--- a/storybook/stories/rotations/9_180_deg_linear.story.tsx
+++ b/storybook/stories/rotations/9_180_deg_linear.story.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={180} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={180} />
     <Axis id="x top" position={Position.Top} title="x top axis" />
     <Axis id="y right" title="y right axis" position={Position.Right} />
     <Axis id="x bottom" position={Position.Bottom} title="x bottom axis" />
diff --git a/storybook/stories/scales/1_different_timezones.story.tsx b/storybook/stories/scales/1_different_timezones.story.tsx
index 385ff044139..929af11ecfe 100644
--- a/storybook/stories/scales/1_different_timezones.story.tsx
+++ b/storybook/stories/scales/1_different_timezones.story.tsx
@@ -12,8 +12,6 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const today = Date.now();
 const UTC_DATE = DateTime.fromISO('2019-01-01T00:00:00.000Z').toMillis();
 const UTC_PLUS8_DATE = DateTime.fromISO('2019-01-01T00:00:00.000+08:00', {
@@ -74,7 +72,7 @@ export const Example = () => {
   }
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="time" position={Position.Bottom} tickFormat={tooltipFn} />
       <Axis id="y" position={Position.Left} />
       <LineSeries
diff --git a/storybook/stories/scales/2_local_tooltip.story.tsx b/storybook/stories/scales/2_local_tooltip.story.tsx
index 7a39bc57c38..83790443137 100644
--- a/storybook/stories/scales/2_local_tooltip.story.tsx
+++ b/storybook/stories/scales/2_local_tooltip.story.tsx
@@ -11,15 +11,13 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const UTC_DATE = DateTime.fromISO('2019-01-01T00:00:00.000Z').toMillis();
 const DAY_INCREMENT_1 = 1000 * 60 * 60 * 24;
 const UTC_DATASET = new Array(10).fill(0).map((d, i) => [UTC_DATE + DAY_INCREMENT_1 * i, i % 5]);
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis
       id="time"
       position={Position.Bottom}
diff --git a/storybook/stories/scales/3_utc_tooltip.story.tsx b/storybook/stories/scales/3_utc_tooltip.story.tsx
index 952412ad3df..11a2adf125b 100644
--- a/storybook/stories/scales/3_utc_tooltip.story.tsx
+++ b/storybook/stories/scales/3_utc_tooltip.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const UTC_DATE = DateTime.fromISO('2019-01-01T00:00:00.000Z').toMillis();
 const DAY_INCREMENT_1 = 1000 * 60 * 60 * 24;
@@ -19,7 +18,7 @@ const UTC_DATASET = new Array(10).fill(0).map((d, i) => [UTC_DATE + DAY_INCREMEN
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis
       id="time"
       position={Position.Bottom}
diff --git a/storybook/stories/scales/4_specified_timezone.story.tsx b/storybook/stories/scales/4_specified_timezone.story.tsx
index 931cbe16b7d..4a09dd4699f 100644
--- a/storybook/stories/scales/4_specified_timezone.story.tsx
+++ b/storybook/stories/scales/4_specified_timezone.story.tsx
@@ -11,11 +11,9 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Axis id="time" position={Position.Bottom} tickFormat={(d) => DateTime.fromMillis(d, { zone: 'utc-6' }).toISO()} />
     <Axis id="y" position={Position.Left} />
     <LineSeries
diff --git a/storybook/stories/scales/6_x_scale_fallback.story.tsx b/storybook/stories/scales/6_x_scale_fallback.story.tsx
index bda23b29566..a772c163ddf 100644
--- a/storybook/stories/scales/6_x_scale_fallback.story.tsx
+++ b/storybook/stories/scales/6_x_scale_fallback.story.tsx
@@ -11,13 +11,11 @@ import React from 'react';
 
 import { Axis, Chart, BarSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const includeString = boolean('include string is x data', true);
   return (
     <Chart>
-      <Settings xDomain={{ min: 0, max: 10 }} baseTheme={useBaseTheme()} />
+      <Settings xDomain={{ min: 0, max: 10 }} />
       <Axis id="y" title="count" position={Position.Left} />
       <Axis id="x" title={includeString ? 'ordinal fallback scale' : 'linear scale'} position={Position.Bottom} />
       <BarSeries
diff --git a/storybook/stories/scales/7_log_scale_options.story.tsx b/storybook/stories/scales/7_log_scale_options.story.tsx
index e561897abca..4d10ae70c44 100644
--- a/storybook/stories/scales/7_log_scale_options.story.tsx
+++ b/storybook/stories/scales/7_log_scale_options.story.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/charts';
 import { LogBase, LogScaleOptions } from '@elastic/charts/src/scales/scale_continuous';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { logBaseMap, logFormatter } from '../utils/formatters';
 import { getKnobsFromEnum } from '../utils/knobs';
 
@@ -128,7 +127,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings xDomain={xLogKnobs} baseTheme={useBaseTheme()} />
+      <Settings xDomain={xLogKnobs} />
       <Axis id="y" position={Position.Left} domain={yLogKnobs} tickFormat={logFormatter(yLogKnobs.logBase)} />
       <Axis
         id="x"
diff --git a/storybook/stories/small_multiples/1_grid.story.tsx b/storybook/stories/small_multiples/1_grid.story.tsx
index b6643d9048c..4a5bd0b41a7 100644
--- a/storybook/stories/small_multiples/1_grid.story.tsx
+++ b/storybook/stories/small_multiples/1_grid.story.tsx
@@ -30,7 +30,6 @@ import {
 } from '@elastic/charts';
 import { getRandomNumberGenerator, SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const getRandomNumber = getRandomNumberGenerator();
 const dg = new SeededDataGenerator();
diff --git a/storybook/stories/small_multiples/2_vertical_areas.story.tsx b/storybook/stories/small_multiples/2_vertical_areas.story.tsx
index c32d1550f8b..0652143667d 100644
--- a/storybook/stories/small_multiples/2_vertical_areas.story.tsx
+++ b/storybook/stories/small_multiples/2_vertical_areas.story.tsx
@@ -27,7 +27,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const numOfDays = 60;
diff --git a/storybook/stories/small_multiples/3_grid_lines.story.tsx b/storybook/stories/small_multiples/3_grid_lines.story.tsx
index ccb0bade148..538ec7baaff 100644
--- a/storybook/stories/small_multiples/3_grid_lines.story.tsx
+++ b/storybook/stories/small_multiples/3_grid_lines.story.tsx
@@ -29,7 +29,6 @@ import {
 import { isVerticalAxis } from '@elastic/charts/src/chart_types/xy_chart/utils/axis_type_utils';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const numOfDays = 90;
diff --git a/storybook/stories/small_multiples/4_horizontal_bars.story.tsx b/storybook/stories/small_multiples/4_horizontal_bars.story.tsx
index 4c1110ee96f..34375bc54e5 100644
--- a/storybook/stories/small_multiples/4_horizontal_bars.story.tsx
+++ b/storybook/stories/small_multiples/4_horizontal_bars.story.tsx
@@ -25,8 +25,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const dg = new SeededDataGenerator();
 const numOfDays = 7;
 function generateData() {
@@ -65,7 +63,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings onElementClick={onElementClick} rotation={90} showLegend={showLegend} baseTheme={useBaseTheme()} />
+      <Settings onElementClick={onElementClick} rotation={90} showLegend={showLegend} />
       <Axis id="time" position={Position.Bottom} gridLine={{ visible: false }} />
       <Axis id="y" title="Day of week" position={Position.Left} gridLine={{ visible: false }} />
 
diff --git a/storybook/stories/small_multiples/4_vertical_bars.story.tsx b/storybook/stories/small_multiples/4_vertical_bars.story.tsx
index 2bab0667fb2..5a5a9d3460f 100644
--- a/storybook/stories/small_multiples/4_vertical_bars.story.tsx
+++ b/storybook/stories/small_multiples/4_vertical_bars.story.tsx
@@ -28,7 +28,6 @@ import {
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 import { ColorVariant } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const numOfDays = 7;
@@ -75,7 +74,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings onElementClick={onElementClick} showLegend={showLegend} baseTheme={useBaseTheme()} />
+      <Settings onElementClick={onElementClick} showLegend={showLegend} />
       <Axis id="time" title="Day of week" position={Position.Bottom} gridLine={{ visible: false }} />
       <Axis id="y" title="Count of logins" position={Position.Left} gridLine={{ visible: false }} />
 
diff --git a/storybook/stories/small_multiples/5_histogram_bars.story.tsx b/storybook/stories/small_multiples/5_histogram_bars.story.tsx
index 7d8b4cd141e..7434d9d9138 100644
--- a/storybook/stories/small_multiples/5_histogram_bars.story.tsx
+++ b/storybook/stories/small_multiples/5_histogram_bars.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { ScaleType, Position, Chart, Axis, GroupBy, SmallMultiples, Settings, BarSeries } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const data = [
   { x: 30, split: 'Cloudy', y: 9 },
@@ -58,7 +57,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings theme={{ scales: { barsPadding, histogramPadding } }} showLegend baseTheme={useBaseTheme()} />
+      <Settings theme={{ scales: { barsPadding, histogramPadding } }} showLegend />
       <Axis id="x" position={Position.Bottom} />
       <Axis
         id="y"
diff --git a/storybook/stories/small_multiples/6_heterogeneous_cartesians.story.tsx b/storybook/stories/small_multiples/6_heterogeneous_cartesians.story.tsx
index c286f170858..706e4fe0f4c 100644
--- a/storybook/stories/small_multiples/6_heterogeneous_cartesians.story.tsx
+++ b/storybook/stories/small_multiples/6_heterogeneous_cartesians.story.tsx
@@ -28,8 +28,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const dg = new SeededDataGenerator();
 const numOfDays = 7;
 function generateData() {
@@ -68,7 +66,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings onElementClick={onElementClick} showLegend={showLegend} baseTheme={useBaseTheme()} />
+      <Settings onElementClick={onElementClick} showLegend={showLegend} />
       <Axis id="time" position={Position.Bottom} gridLine={{ visible: false }} />
       <Axis id="y" title="Day of week" position={Position.Left} gridLine={{ visible: false }} />
 
diff --git a/storybook/stories/small_multiples/7_sunbursts.story.tsx b/storybook/stories/small_multiples/7_sunbursts.story.tsx
index b3f6257ede5..bc8d48aaf66 100644
--- a/storybook/stories/small_multiples/7_sunbursts.story.tsx
+++ b/storybook/stories/small_multiples/7_sunbursts.story.tsx
@@ -25,7 +25,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { keepDistinct } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { colorBrewerCategoricalPastel12, countryLookup, productLookup, regionLookup } from '../utils/utils';
 
 const data = mocks.sunburst; // .filter((d) => countryLookup[d.dest].continentCountry.slice(0, 2) === 'eu');
diff --git a/storybook/stories/streamgraph/1_basic.story.tsx b/storybook/stories/streamgraph/1_basic.story.tsx
index f1b880c187e..928272387be 100644
--- a/storybook/stories/streamgraph/1_basic.story.tsx
+++ b/storybook/stories/streamgraph/1_basic.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Chart, ScaleType, StackMode, Axis, Position, CurveType, Settings } from '@elastic/charts';
 import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const stackMode = select<StackMode>(
@@ -25,7 +24,7 @@ export const Example = () => {
   );
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis id="x" position={Position.Bottom} />
       <Axis id="y" position={Position.Left} />
       <AreaSeries
diff --git a/storybook/stories/stylings/10_custom_bars.story.tsx b/storybook/stories/stylings/10_custom_bars.story.tsx
index 80dba95e1e5..ad00e6ef80f 100644
--- a/storybook/stories/stylings/10_custom_bars.story.tsx
+++ b/storybook/stories/stylings/10_custom_bars.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
@@ -63,7 +62,7 @@ export const Example = () => {
 
   return (
     <Chart renderer="canvas">
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} theme={theme} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} theme={theme} />
       <Axis id="bottom" position={Position.Bottom} showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/stylings/11_custom_lines.story.tsx b/storybook/stories/stylings/11_custom_lines.story.tsx
index 2f8744f7c97..921fe82fe66 100644
--- a/storybook/stories/stylings/11_custom_lines.story.tsx
+++ b/storybook/stories/stylings/11_custom_lines.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, Chart, LineSeries, Position, ScaleType, Settings, LineSeriesStyle } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/storybook/stories/stylings/12_custom_area.story.tsx b/storybook/stories/stylings/12_custom_area.story.tsx
index 37d60235b9b..525b70e395c 100644
--- a/storybook/stories/stylings/12_custom_area.story.tsx
+++ b/storybook/stories/stylings/12_custom_area.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, LineSeriesStyle, PartialTheme } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/storybook/stories/stylings/13_custom_series_name.story.tsx b/storybook/stories/stylings/13_custom_series_name.story.tsx
index d93cfd07975..1398d8b21b0 100644
--- a/storybook/stories/stylings/13_custom_series_name.story.tsx
+++ b/storybook/stories/stylings/13_custom_series_name.story.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameFn } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const customSeriesNamingFn: SeriesNameFn = ({ yAccessor, splitAccessors }) => {
     if (yAccessor === 'y1' && splitAccessors.get('g') === 'a') {
@@ -24,7 +22,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/stylings/13_custom_series_name_config.story.tsx b/storybook/stories/stylings/13_custom_series_name_config.story.tsx
index a33a51f1e67..834a7eab617 100644
--- a/storybook/stories/stylings/13_custom_series_name_config.story.tsx
+++ b/storybook/stories/stylings/13_custom_series_name_config.story.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameConfigOptions } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const customSeriesNameOptions: SeriesNameConfigOptions = {
     names: [
@@ -32,7 +30,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx b/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx
index dde2cd53281..0f6b9a97b2a 100644
--- a/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx
+++ b/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx
@@ -12,8 +12,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameFn } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const start = DateTime.fromISO('2019-01-01T00:00:00.000', { zone: 'utc' });
   const data = [
@@ -54,7 +52,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/stylings/15_tick_label.story.tsx b/storybook/stories/stylings/15_tick_label.story.tsx
index ba89c23bc89..ce097b87b0b 100644
--- a/storybook/stories/stylings/15_tick_label.story.tsx
+++ b/storybook/stories/stylings/15_tick_label.story.tsx
@@ -21,7 +21,6 @@ import {
   AxisStyle,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
@@ -58,7 +57,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings theme={theme} debug={boolean('debug', true)} baseTheme={useBaseTheme()} />
+      <Settings theme={theme} debug={boolean('debug', true)} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks style={customStyle} />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
       <AreaSeries
diff --git a/storybook/stories/stylings/16_style_accessor.story.tsx b/storybook/stories/stylings/16_style_accessor.story.tsx
index 711d6fc0c55..77eae9ea224 100644
--- a/storybook/stories/stylings/16_style_accessor.story.tsx
+++ b/storybook/stories/stylings/16_style_accessor.story.tsx
@@ -25,7 +25,6 @@ import {
   PointStyleAccessor,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const hasThreshold = boolean('threshold', true);
diff --git a/storybook/stories/stylings/17_bar_series_color_variant.story.tsx b/storybook/stories/stylings/17_bar_series_color_variant.story.tsx
index e6911de3ae9..23fec0ead4e 100644
--- a/storybook/stories/stylings/17_bar_series_color_variant.story.tsx
+++ b/storybook/stories/stylings/17_bar_series_color_variant.story.tsx
@@ -13,7 +13,6 @@ import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } f
 import { ColorVariant } from '@elastic/charts/src/utils/common';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const fillOption = select(
diff --git a/storybook/stories/stylings/18_line_series_color_variant.story.tsx b/storybook/stories/stylings/18_line_series_color_variant.story.tsx
index 7a3335f98ec..24881865a68 100644
--- a/storybook/stories/stylings/18_line_series_color_variant.story.tsx
+++ b/storybook/stories/stylings/18_line_series_color_variant.story.tsx
@@ -12,7 +12,6 @@ import { Axis, LineSeries, Chart, Position, ScaleType, Settings, PartialTheme }
 import { ColorVariant } from '@elastic/charts/src/utils/common';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const customTheme: PartialTheme = {
diff --git a/storybook/stories/stylings/19_area_series_color_variant.story.tsx b/storybook/stories/stylings/19_area_series_color_variant.story.tsx
index 30947699bf5..ef18162053e 100644
--- a/storybook/stories/stylings/19_area_series_color_variant.story.tsx
+++ b/storybook/stories/stylings/19_area_series_color_variant.story.tsx
@@ -12,7 +12,6 @@ import { Axis, AreaSeries, Chart, Position, ScaleType, Settings, PartialTheme }
 import { ColorVariant } from '@elastic/charts/src/utils/common';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const customTheme: PartialTheme = {
diff --git a/storybook/stories/stylings/1_chart_size.story.tsx b/storybook/stories/stylings/1_chart_size.story.tsx
index f3a85789e2c..10880b56ab9 100644
--- a/storybook/stories/stylings/1_chart_size.story.tsx
+++ b/storybook/stories/stylings/1_chart_size.story.tsx
@@ -12,7 +12,6 @@ import { BarSeries, Chart, ScaleType, Settings, PartialTheme } from '@elastic/ch
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 import { TooltipType } from '@elastic/charts/src/specs/constants';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const data2 = dg.generateSimpleSeries(40);
@@ -29,7 +28,7 @@ export const Example = () => {
   return (
     <div>
       <Chart size={{ width: 100, height: 50 }}>
-        <Settings tooltip={TooltipType.None} theme={theme} baseTheme={useBaseTheme()} />
+        <Settings tooltip={TooltipType.None} theme={theme} />
         <BarSeries
           id="bars"
           xScaleType={ScaleType.Linear}
@@ -40,7 +39,7 @@ export const Example = () => {
         />
       </Chart>
       <Chart size={{ height: 50 }}>
-        <Settings tooltip={TooltipType.None} theme={theme} baseTheme={useBaseTheme()} />
+        <Settings tooltip={TooltipType.None} theme={theme} />
         <BarSeries
           id="bars"
           xScaleType={ScaleType.Linear}
@@ -51,7 +50,7 @@ export const Example = () => {
         />
       </Chart>
       <Chart size={['50%', 50]}>
-        <Settings tooltip={TooltipType.None} theme={theme} baseTheme={useBaseTheme()} />
+        <Settings tooltip={TooltipType.None} theme={theme} />
         <BarSeries
           id="bars"
           xScaleType={ScaleType.Linear}
@@ -62,7 +61,7 @@ export const Example = () => {
         />
       </Chart>
       <Chart size={[undefined, 50]}>
-        <Settings tooltip={TooltipType.None} theme={theme} baseTheme={useBaseTheme()} />
+        <Settings tooltip={TooltipType.None} theme={theme} />
         <BarSeries
           id="bars"
           xScaleType={ScaleType.Linear}
@@ -73,7 +72,7 @@ export const Example = () => {
         />
       </Chart>
       <Chart size={50}>
-        <Settings tooltip={TooltipType.None} theme={theme} baseTheme={useBaseTheme()} />
+        <Settings tooltip={TooltipType.None} theme={theme} />
         <BarSeries
           id="bars"
           xScaleType={ScaleType.Linear}
diff --git a/storybook/stories/stylings/20_partition_background.story.tsx b/storybook/stories/stylings/20_partition_background.story.tsx
index b9e82fcd597..14b59cf4402 100644
--- a/storybook/stories/stylings/20_partition_background.story.tsx
+++ b/storybook/stories/stylings/20_partition_background.story.tsx
@@ -14,7 +14,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   discreteColor,
   colorBrewerCategoricalStark9,
@@ -32,7 +31,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings theme={bGColorDisabled ? undefined : partialColorTheme} baseTheme={useBaseTheme()} />
+      <Settings theme={bGColorDisabled ? undefined : partialColorTheme} />
       <Partition
         id="spec_1"
         data={mocks.miniSunburst}
diff --git a/storybook/stories/stylings/21_partition_labels.story.tsx b/storybook/stories/stylings/21_partition_labels.story.tsx
index 616b1ec9e4c..dd107a68839 100644
--- a/storybook/stories/stylings/21_partition_labels.story.tsx
+++ b/storybook/stories/stylings/21_partition_labels.story.tsx
@@ -13,7 +13,6 @@ import { Chart, Datum, Partition, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => {
@@ -24,7 +23,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings theme={partialCustomTheme} baseTheme={useBaseTheme()} />
+      <Settings theme={partialCustomTheme} />
       <Partition
         id="spec_1"
         data={mocks.pie}
diff --git a/storybook/stories/stylings/22_dark_theme.story.tsx b/storybook/stories/stylings/22_dark_theme.story.tsx
index 198566238b7..6206ec33c03 100644
--- a/storybook/stories/stylings/22_dark_theme.story.tsx
+++ b/storybook/stories/stylings/22_dark_theme.story.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const data1 = dg.generateGroupedSeries(40, 4);
diff --git a/storybook/stories/stylings/23_with_texture.story.tsx b/storybook/stories/stylings/23_with_texture.story.tsx
index 6efc8991c0f..06f3c46b45a 100644
--- a/storybook/stories/stylings/23_with_texture.story.tsx
+++ b/storybook/stories/stylings/23_with_texture.story.tsx
@@ -22,7 +22,6 @@ import {
 } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getKnobsFromEnum, getXYSeriesKnob } from '../utils/knobs';
 
 const dg = new SeededDataGenerator();
diff --git a/storybook/stories/stylings/24_texture_multiple_series.story.tsx b/storybook/stories/stylings/24_texture_multiple_series.story.tsx
index d5b828d7b05..04a149460e7 100644
--- a/storybook/stories/stylings/24_texture_multiple_series.story.tsx
+++ b/storybook/stories/stylings/24_texture_multiple_series.story.tsx
@@ -12,7 +12,6 @@ import React, { useState } from 'react';
 import { Axis, Chart, CurveType, Position, TexturedStyles, Settings, TextureShape } from '@elastic/charts';
 import { getRandomNumberGenerator, SeededDataGenerator, getRandomEntryFn } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getKnobsFromEnum, getXYSeriesKnob } from '../utils/knobs';
 
 const group = {
diff --git a/storybook/stories/stylings/2_margins.story.tsx b/storybook/stories/stylings/2_margins.story.tsx
index 96ef33ee2e4..0e2715b55e4 100644
--- a/storybook/stories/stylings/2_margins.story.tsx
+++ b/storybook/stories/stylings/2_margins.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/storybook/stories/stylings/3_axis.story.tsx b/storybook/stories/stylings/3_axis.story.tsx
index ee0fd07b1c7..b99b6643cd9 100644
--- a/storybook/stories/stylings/3_axis.story.tsx
+++ b/storybook/stories/stylings/3_axis.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/storybook/stories/stylings/4_theme_styling.story.tsx b/storybook/stories/stylings/4_theme_styling.story.tsx
index 4a2681b6d8a..d13ccc635b1 100644
--- a/storybook/stories/stylings/4_theme_styling.story.tsx
+++ b/storybook/stories/stylings/4_theme_styling.story.tsx
@@ -25,7 +25,6 @@ import {
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 import { palettes } from '@elastic/charts/src/utils/themes/colors';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/storybook/stories/stylings/5_partial_custom_theme.story.tsx b/storybook/stories/stylings/5_partial_custom_theme.story.tsx
index becb9e98988..00ef8ac211d 100644
--- a/storybook/stories/stylings/5_partial_custom_theme.story.tsx
+++ b/storybook/stories/stylings/5_partial_custom_theme.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const data1 = dg.generateGroupedSeries(40, 4);
diff --git a/storybook/stories/stylings/6_partial_and_base.story.tsx b/storybook/stories/stylings/6_partial_and_base.story.tsx
index 6517bb6339e..436ca6e8e28 100644
--- a/storybook/stories/stylings/6_partial_and_base.story.tsx
+++ b/storybook/stories/stylings/6_partial_and_base.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const dg = new SeededDataGenerator();
 const data1 = dg.generateGroupedSeries(40, 4);
diff --git a/storybook/stories/stylings/7_multiple_custom.story.tsx b/storybook/stories/stylings/7_multiple_custom.story.tsx
index a6e2ec24a58..3d27b1a6794 100644
--- a/storybook/stories/stylings/7_multiple_custom.story.tsx
+++ b/storybook/stories/stylings/7_multiple_custom.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts';
 import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/storybook/stories/stylings/8_custom_series_colors_array.story.tsx b/storybook/stories/stylings/8_custom_series_colors_array.story.tsx
index 0faf38bf4b0..3b23c814baa 100644
--- a/storybook/stories/stylings/8_custom_series_colors_array.story.tsx
+++ b/storybook/stories/stylings/8_custom_series_colors_array.story.tsx
@@ -11,11 +11,10 @@ import React from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+    <Settings showLegend showLegendExtra legendPosition={Position.Right} />
     <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
     <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/stylings/9_custom_series_colors_function.story.tsx b/storybook/stories/stylings/9_custom_series_colors_function.story.tsx
index 17ce0177718..d078f1a3910 100644
--- a/storybook/stories/stylings/9_custom_series_colors_function.story.tsx
+++ b/storybook/stories/stylings/9_custom_series_colors_function.story.tsx
@@ -21,7 +21,6 @@ import {
 } from '@elastic/charts';
 import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const barColor = color('barSeriesColor', '#000');
@@ -47,7 +46,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 
diff --git a/storybook/stories/sunburst/10_2_slice.story.tsx b/storybook/stories/sunburst/10_2_slice.story.tsx
index d238c5f0132..f50c7ac422f 100644
--- a/storybook/stories/sunburst/10_2_slice.story.tsx
+++ b/storybook/stories/sunburst/10_2_slice.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings debugState baseTheme={useBaseTheme()} />
+    <Settings debugState />
     <Partition
       id="spec_1"
       data={mocks.pie.slice(0, 2)}
diff --git a/storybook/stories/sunburst/11_small_large.story.tsx b/storybook/stories/sunburst/11_small_large.story.tsx
index 5e25f947f90..4c2cc9db523 100644
--- a/storybook/stories/sunburst/11_small_large.story.tsx
+++ b/storybook/stories/sunburst/11_small_large.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[
diff --git a/storybook/stories/sunburst/12_very_small.story.tsx b/storybook/stories/sunburst/12_very_small.story.tsx
index 4a13f6d4963..8228a523d4e 100644
--- a/storybook/stories/sunburst/12_very_small.story.tsx
+++ b/storybook/stories/sunburst/12_very_small.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[
diff --git a/storybook/stories/sunburst/13_empty.story.tsx b/storybook/stories/sunburst/13_empty.story.tsx
index c82b9dcd45b..d50adff189e 100644
--- a/storybook/stories/sunburst/13_empty.story.tsx
+++ b/storybook/stories/sunburst/13_empty.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[
diff --git a/storybook/stories/sunburst/14_full_zero.story.tsx b/storybook/stories/sunburst/14_full_zero.story.tsx
index 90571d951f1..1143d25ddb2 100644
--- a/storybook/stories/sunburst/14_full_zero.story.tsx
+++ b/storybook/stories/sunburst/14_full_zero.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[
diff --git a/storybook/stories/sunburst/15_single.story.tsx b/storybook/stories/sunburst/15_single.story.tsx
index 4831eaf699a..f741a1ceb77 100644
--- a/storybook/stories/sunburst/15_single.story.tsx
+++ b/storybook/stories/sunburst/15_single.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie.slice(0, 1)}
diff --git a/storybook/stories/sunburst/15_single_sunburst.story.tsx b/storybook/stories/sunburst/15_single_sunburst.story.tsx
index 9d79a2f0d6a..64a3ce48c18 100644
--- a/storybook/stories/sunburst/15_single_sunburst.story.tsx
+++ b/storybook/stories/sunburst/15_single_sunburst.story.tsx
@@ -13,7 +13,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   discreteColor,
   colorBrewerCategoricalStark9,
@@ -24,7 +23,7 @@ import {
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend baseTheme={useBaseTheme()} />
+    <Settings showLegend />
     <Partition
       id="spec_1"
       data={mocks.miniSunburst.slice(0, 1)}
diff --git a/storybook/stories/sunburst/16_single_small.story.tsx b/storybook/stories/sunburst/16_single_small.story.tsx
index ce852dd92cf..cb2aa23aca9 100644
--- a/storybook/stories/sunburst/16_single_small.story.tsx
+++ b/storybook/stories/sunburst/16_single_small.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie.slice(0, 1)}
diff --git a/storybook/stories/sunburst/17_single_very_small.story.tsx b/storybook/stories/sunburst/17_single_very_small.story.tsx
index 63071aca21b..e74b6e31629 100644
--- a/storybook/stories/sunburst/17_single_very_small.story.tsx
+++ b/storybook/stories/sunburst/17_single_very_small.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie.slice(0, 1)}
diff --git a/storybook/stories/sunburst/18_no_sliced.story.tsx b/storybook/stories/sunburst/18_no_sliced.story.tsx
index 93671691891..b4c01236bdd 100644
--- a/storybook/stories/sunburst/18_no_sliced.story.tsx
+++ b/storybook/stories/sunburst/18_no_sliced.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[]}
diff --git a/storybook/stories/sunburst/19_negative.story.tsx b/storybook/stories/sunburst/19_negative.story.tsx
index 60ad2cf33ce..cff9a3d29e4 100644
--- a/storybook/stories/sunburst/19_negative.story.tsx
+++ b/storybook/stories/sunburst/19_negative.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie
diff --git a/storybook/stories/sunburst/1_simple.story.tsx b/storybook/stories/sunburst/1_simple.story.tsx
index cd519282a43..613c7e83e74 100644
--- a/storybook/stories/sunburst/1_simple.story.tsx
+++ b/storybook/stories/sunburst/1_simple.story.tsx
@@ -13,14 +13,13 @@ import { Chart, Datum, Partition, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => {
   const showDebug = boolean('show table for debugging', false);
   return (
     <Chart>
-      <Settings debug={showDebug} baseTheme={useBaseTheme()} />
+      <Settings debug={showDebug} />
       <Partition
         id="spec_1"
         data={mocks.pie}
diff --git a/storybook/stories/sunburst/20_total_zero.story.tsx b/storybook/stories/sunburst/20_total_zero.story.tsx
index 665359a6547..f0abafb8636 100644
--- a/storybook/stories/sunburst/20_total_zero.story.tsx
+++ b/storybook/stories/sunburst/20_total_zero.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie.map((s) => ({ ...s, exportVal: 0 }))}
diff --git a/storybook/stories/sunburst/21_high_pie.story.tsx b/storybook/stories/sunburst/21_high_pie.story.tsx
index 2e314f45d16..b624d4d8ba1 100644
--- a/storybook/stories/sunburst/21_high_pie.story.tsx
+++ b/storybook/stories/sunburst/21_high_pie.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.manyPie}
diff --git a/storybook/stories/sunburst/22_counter_clockwise.story.tsx b/storybook/stories/sunburst/22_counter_clockwise.story.tsx
index 57e5a54b8d3..3a465fce6e5 100644
--- a/storybook/stories/sunburst/22_counter_clockwise.story.tsx
+++ b/storybook/stories/sunburst/22_counter_clockwise.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/23_clockwise.story.tsx b/storybook/stories/sunburst/23_clockwise.story.tsx
index 43675b0ae7f..393a5003f6c 100644
--- a/storybook/stories/sunburst/23_clockwise.story.tsx
+++ b/storybook/stories/sunburst/23_clockwise.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/24_linked_label.story.tsx b/storybook/stories/sunburst/24_linked_label.story.tsx
index 7036e099241..f5a26f14fe8 100644
--- a/storybook/stories/sunburst/24_linked_label.story.tsx
+++ b/storybook/stories/sunburst/24_linked_label.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/25_no_labels.story.tsx b/storybook/stories/sunburst/25_no_labels.story.tsx
index aa704fb14e0..971bfbb4cd5 100644
--- a/storybook/stories/sunburst/25_no_labels.story.tsx
+++ b/storybook/stories/sunburst/25_no_labels.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/26_percentage.story.tsx b/storybook/stories/sunburst/26_percentage.story.tsx
index 263b94f009a..4ab2cdd2973 100644
--- a/storybook/stories/sunburst/26_percentage.story.tsx
+++ b/storybook/stories/sunburst/26_percentage.story.tsx
@@ -13,7 +13,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   discreteColor,
   colorBrewerCategoricalStark9,
@@ -24,7 +23,7 @@ import {
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_26"
       data={mocks.miniSunburst}
diff --git a/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx b/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx
index 3619a489cbe..bfb7ba44b1a 100644
--- a/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx
+++ b/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx
@@ -14,7 +14,6 @@ import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/l
 import { PrimitiveValue } from '@elastic/charts/src/chart_types/partition_chart/layout/utils/group_by_rollup';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   discreteColor,
   colorBrewerCategoricalStark9,
@@ -25,7 +24,7 @@ import {
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.miniSunburst}
diff --git a/storybook/stories/sunburst/28_not_a_number.story.tsx b/storybook/stories/sunburst/28_not_a_number.story.tsx
index 8de3a4af9bd..a19a7dcf032 100644
--- a/storybook/stories/sunburst/28_not_a_number.story.tsx
+++ b/storybook/stories/sunburst/28_not_a_number.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie
diff --git a/storybook/stories/sunburst/29_custom_stroke.story.tsx b/storybook/stories/sunburst/29_custom_stroke.story.tsx
index 8d7626a8ce7..904bb65cd6d 100644
--- a/storybook/stories/sunburst/29_custom_stroke.story.tsx
+++ b/storybook/stories/sunburst/29_custom_stroke.story.tsx
@@ -13,7 +13,6 @@ import { Chart, Datum, PartialTheme, Partition, PartitionLayout, Settings } from
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => {
@@ -24,7 +23,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings theme={partialCustomTheme} baseTheme={useBaseTheme()} />
+      <Settings theme={partialCustomTheme} />
       <Partition
         id="spec_1"
         data={mocks.manyPie}
diff --git a/storybook/stories/sunburst/2_value_formatted.story.tsx b/storybook/stories/sunburst/2_value_formatted.story.tsx
index cd05fd0a029..c8a70039608 100644
--- a/storybook/stories/sunburst/2_value_formatted.story.tsx
+++ b/storybook/stories/sunburst/2_value_formatted.story.tsx
@@ -13,12 +13,11 @@ import { Chart, Datum, Partition, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorTurbo, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/30_largest_circle.story.tsx b/storybook/stories/sunburst/30_largest_circle.story.tsx
index bbd41849291..189bf4890e9 100644
--- a/storybook/stories/sunburst/30_largest_circle.story.tsx
+++ b/storybook/stories/sunburst/30_largest_circle.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/31_bold_link_value.story.tsx b/storybook/stories/sunburst/31_bold_link_value.story.tsx
index 6dea62809ee..5535517b288 100644
--- a/storybook/stories/sunburst/31_bold_link_value.story.tsx
+++ b/storybook/stories/sunburst/31_bold_link_value.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/32_custom_tooltip.story.tsx b/storybook/stories/sunburst/32_custom_tooltip.story.tsx
index 296e557794b..a6514df7dc0 100644
--- a/storybook/stories/sunburst/32_custom_tooltip.story.tsx
+++ b/storybook/stories/sunburst/32_custom_tooltip.story.tsx
@@ -13,7 +13,6 @@ import { Chart, Datum, Partition, PartitionLayout, Settings, CustomTooltip as CT
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getPlacementKnob, getFallbackPlacementsKnob, getBoundaryKnob } from '../utils/knobs';
 import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s, regionLookup } from '../utils/utils';
 
@@ -41,7 +40,7 @@ export const Example = () => {
   };
   return (
     <Chart>
-      <Settings showLegend legendMaxDepth={1} tooltip={tooltipOptions} baseTheme={useBaseTheme()} />
+      <Settings showLegend legendMaxDepth={1} tooltip={tooltipOptions} />
       <Partition
         id="spec_1"
         data={mocks.sunburst}
diff --git a/storybook/stories/sunburst/33_ordered_slices.story.tsx b/storybook/stories/sunburst/33_ordered_slices.story.tsx
index b4894a48ede..ab5913dacb5 100644
--- a/storybook/stories/sunburst/33_ordered_slices.story.tsx
+++ b/storybook/stories/sunburst/33_ordered_slices.story.tsx
@@ -21,7 +21,6 @@ import {
 } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { discreteColor, countryLookup, colorBrewerCategoricalPastel12B } from '../utils/utils';
 
 const categoricalColors = colorBrewerCategoricalPastel12B.slice(3);
@@ -56,7 +55,7 @@ const sortPredicate = ([name1, node1]: ArrayEntry, [name2, node2]: ArrayEntry) =
 export const Example = () => {
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Partition
         id="spec_1"
         data={data}
diff --git a/storybook/stories/sunburst/3_value_formatted_2.story.tsx b/storybook/stories/sunburst/3_value_formatted_2.story.tsx
index bc099a076d3..80dd7f11598 100644
--- a/storybook/stories/sunburst/3_value_formatted_2.story.tsx
+++ b/storybook/stories/sunburst/3_value_formatted_2.story.tsx
@@ -13,12 +13,11 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { discreteColor, colorBrewerCategoricalPastel12, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/4_fill_labels.story.tsx b/storybook/stories/sunburst/4_fill_labels.story.tsx
index f23c43531dc..9eb433d1958 100644
--- a/storybook/stories/sunburst/4_fill_labels.story.tsx
+++ b/storybook/stories/sunburst/4_fill_labels.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/5_donut.story.tsx b/storybook/stories/sunburst/5_donut.story.tsx
index 5eb417574c3..8c1c992c25c 100644
--- a/storybook/stories/sunburst/5_donut.story.tsx
+++ b/storybook/stories/sunburst/5_donut.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/sunburst/6_pie_chart_labels.story.tsx b/storybook/stories/sunburst/6_pie_chart_labels.story.tsx
index 54124f3ca19..117f5f1eca6 100644
--- a/storybook/stories/sunburst/6_pie_chart_labels.story.tsx
+++ b/storybook/stories/sunburst/6_pie_chart_labels.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[
diff --git a/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx b/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx
index cf1aade9c15..d0e26b738ad 100644
--- a/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx
+++ b/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx
@@ -11,12 +11,11 @@ import React from 'react';
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={[
diff --git a/storybook/stories/sunburst/7_zero_slice.story.tsx b/storybook/stories/sunburst/7_zero_slice.story.tsx
index 1dcccdc1d02..78360bdb8ea 100644
--- a/storybook/stories/sunburst/7_zero_slice.story.tsx
+++ b/storybook/stories/sunburst/7_zero_slice.story.tsx
@@ -12,12 +12,11 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
 export const Example = () => (
   <Chart size={{ height: 180 }}>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie
diff --git a/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx b/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx
index cf2701d08ae..cc4e117c4f8 100644
--- a/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx
+++ b/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx
@@ -13,14 +13,13 @@ import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/cha
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s, regionLookup } from '../utils/utils';
 
 export const Example = () => {
   const showDebug = boolean('show table for debugging', false);
   return (
     <Chart>
-      <Settings showLegend legendMaxDepth={1} baseTheme={useBaseTheme()} debug={showDebug} />
+      <Settings showLegend legendMaxDepth={1} debug={showDebug} />
       <Partition
         id="spec_1"
         data={mocks.sunburst}
diff --git a/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx b/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx
index ef6dee79f71..a078fc8e6e0 100644
--- a/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx
+++ b/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx
@@ -14,7 +14,6 @@ import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/c
 import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import {
   discreteColor,
   colorBrewerCategoricalStark9,
@@ -25,7 +24,7 @@ import {
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend legendStrategy="pathWithDescendants" baseTheme={useBaseTheme()} />
+    <Settings showLegend legendStrategy="pathWithDescendants" />
     <Partition
       id="spec_1"
       data={mocks.miniSunburst}
diff --git a/storybook/stories/test_cases/1_no_series.story.tsx b/storybook/stories/test_cases/1_no_series.story.tsx
index d5427db7ff1..b2817565c03 100644
--- a/storybook/stories/test_cases/1_no_series.story.tsx
+++ b/storybook/stories/test_cases/1_no_series.story.tsx
@@ -12,8 +12,6 @@ import React, { FC } from 'react';
 
 import { Chart, Settings, Axis, Position } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const NoResults: FC<{ msg: string }> = ({ msg }) => (
   <EuiFlexItem>
     <EuiFlexGroup direction="column" alignItems="center" justifyContent="center">
@@ -35,7 +33,7 @@ export const Example = () => {
     <Chart>
       <Axis id="count" title="count" position={Position.Left} />
       <Axis id="x" title="goods" position={Position.Bottom} />
-      <Settings noResults={customNoResults ? <NoResults msg={noResultsMsg} /> : undefined} baseTheme={useBaseTheme()} />
+      <Settings noResults={customNoResults ? <NoResults msg={noResultsMsg} /> : undefined} />
     </Chart>
   );
 };
diff --git a/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx b/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx
index 40ff724fbc0..290a14879c1 100644
--- a/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx
+++ b/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 
 import { AreaSeries, Chart, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 export const Example = () => {
   const data = [
     { g: 'css', x: 1614092400000, y: 13 },
@@ -69,7 +67,7 @@ export const Example = () => {
 
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <AreaSeries
         id="test3"
         stackMode="percentage"
diff --git a/storybook/stories/test_cases/3_no_axes_annotation.story.tsx b/storybook/stories/test_cases/3_no_axes_annotation.story.tsx
index a26b05f6753..0bc00315bf2 100644
--- a/storybook/stories/test_cases/3_no_axes_annotation.story.tsx
+++ b/storybook/stories/test_cases/3_no_axes_annotation.story.tsx
@@ -20,7 +20,6 @@ import {
   Settings,
 } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob } from '../utils/knobs';
 
 function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
@@ -41,7 +40,7 @@ export const Example = () => {
   const chartRotation = getChartRotationKnob();
   return (
     <Chart>
-      <Settings rotation={chartRotation} baseTheme={useBaseTheme()} />
+      <Settings rotation={chartRotation} />
       <LineAnnotation
         domainType={AnnotationDomainType.XDomain}
         id="ann"
diff --git a/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx b/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx
index 289a9485d8d..e1195db7221 100644
--- a/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx
+++ b/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 
 import { Chart, Axis, Position, AreaSeries, ScaleType, LogBase, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { logFormatter } from '../utils/formatters';
 
 /**
@@ -22,7 +21,7 @@ export const Example = () => {
   const logMinLimit = number('logMinLimit', 0.001);
   return (
     <Chart>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings />
       <Axis
         id="count"
         position={Position.Left}
diff --git a/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx b/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx
index 21b50b70b50..4e466cf880a 100644
--- a/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx
+++ b/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx
@@ -10,8 +10,6 @@ import React from 'react';
 
 import { Chart, Axis, Position, BarSeries, ScaleType, Settings } from '@elastic/charts';
 
-import { useBaseTheme } from '../../use_base_theme';
-
 const data = [
   { g: 'AE', x: '2021-04-06 00:00', y: 1 },
   { g: 'AE', x: '2021-04-06 03:00', y: 0 },
@@ -64,7 +62,7 @@ const data = [
 export const Example = () => {
   return (
     <Chart>
-      <Settings showLegend baseTheme={useBaseTheme()} />
+      <Settings showLegend />
       <Axis id="count" position={Position.Left} />
       <Axis id="time" position={Position.Bottom} integersOnly />
       <BarSeries
diff --git a/storybook/stories/test_cases/6_a11y_custom_description.story.tsx b/storybook/stories/test_cases/6_a11y_custom_description.story.tsx
index e9f26a6a6c2..27dfbe6ddae 100644
--- a/storybook/stories/test_cases/6_a11y_custom_description.story.tsx
+++ b/storybook/stories/test_cases/6_a11y_custom_description.story.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Chart, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const automatedSeries = boolean('Use the default generated series types of charts for screen readers', true);
diff --git a/storybook/stories/treemap/10_three_layers.story.tsx b/storybook/stories/treemap/10_three_layers.story.tsx
index 90a519a806f..67884f53039 100644
--- a/storybook/stories/treemap/10_three_layers.story.tsx
+++ b/storybook/stories/treemap/10_three_layers.story.tsx
@@ -17,7 +17,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 import { keepDistinct } from '@elastic/charts/src/utils/common';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { countryLookup, productLookup, regionLookup } from '../utils/utils';
 
 const interpolator = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.5]));
@@ -32,7 +31,7 @@ const countryCount = countries.length;
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend baseTheme={useBaseTheme()} />
+    <Settings showLegend />
     <Partition
       id="spec_1"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/1_one_layer.story.tsx b/storybook/stories/treemap/1_one_layer.story.tsx
index 2bd9a8f9fdf..f0c0756fa4a 100644
--- a/storybook/stories/treemap/1_one_layer.story.tsx
+++ b/storybook/stories/treemap/1_one_layer.story.tsx
@@ -15,7 +15,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension);
 
@@ -26,7 +25,7 @@ const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => c
 
 export const Example = () => (
   <Chart>
-    <Settings debugState baseTheme={useBaseTheme()} />
+    <Settings debugState />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/treemap/2_one_layer_2.story.tsx b/storybook/stories/treemap/2_one_layer_2.story.tsx
index 5a646ef4a9e..5909ebbe475 100644
--- a/storybook/stories/treemap/2_one_layer_2.story.tsx
+++ b/storybook/stories/treemap/2_one_layer_2.story.tsx
@@ -15,14 +15,13 @@ import { arrayToLookup } from '@elastic/charts/src/common/color_calcs';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { discreteColor, colorBrewerCategoricalPastel12 } from '../utils/utils';
 
 const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension);
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie}
diff --git a/storybook/stories/treemap/3_mid_two.story.tsx b/storybook/stories/treemap/3_mid_two.story.tsx
index d0714234a49..e92e586b751 100644
--- a/storybook/stories/treemap/3_mid_two.story.tsx
+++ b/storybook/stories/treemap/3_mid_two.story.tsx
@@ -16,7 +16,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { countryDimension, regionDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const regionLookup = arrayToLookup((d: Datum) => d.region, regionDimension);
 const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
@@ -25,7 +24,7 @@ const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r,
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend baseTheme={useBaseTheme()} />
+    <Settings showLegend />
     <Partition
       id="spec_1"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/4_two_layer_stress.story.tsx b/storybook/stories/treemap/4_two_layer_stress.story.tsx
index 01c3eea80b4..a7c258afc4d 100644
--- a/storybook/stories/treemap/4_two_layer_stress.story.tsx
+++ b/storybook/stories/treemap/4_two_layer_stress.story.tsx
@@ -16,7 +16,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { countryDimension, productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension);
 const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
@@ -25,7 +24,7 @@ const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r,
 
 export const Example = () => (
   <Chart>
-    <Settings showLegend baseTheme={useBaseTheme()} />
+    <Settings showLegend />
     <Partition
       id="spec_1"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/5_multicolor.story.tsx b/storybook/stories/treemap/5_multicolor.story.tsx
index bc4d269dad9..90c5d517795 100644
--- a/storybook/stories/treemap/5_multicolor.story.tsx
+++ b/storybook/stories/treemap/5_multicolor.story.tsx
@@ -15,7 +15,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { countryDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { regionLookup } from '../utils/utils';
 
 const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
@@ -37,7 +36,7 @@ export const Example = () => (
       }
     }
   >
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/6_custom_style.story.tsx b/storybook/stories/treemap/6_custom_style.story.tsx
index 9b22b26b707..612bf99303d 100644
--- a/storybook/stories/treemap/6_custom_style.story.tsx
+++ b/storybook/stories/treemap/6_custom_style.story.tsx
@@ -14,7 +14,6 @@ import { arrayToLookup } from '@elastic/charts/src/common/color_calcs';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { countryDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { regionLookup } from '../utils/utils';
 
 const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
@@ -29,7 +28,7 @@ const fillColor = ({ [MODEL_KEY]: model }: any) => {
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/7_percentage.story.tsx b/storybook/stories/treemap/7_percentage.story.tsx
index 6cee1cdfacd..b58b165e4ae 100644
--- a/storybook/stories/treemap/7_percentage.story.tsx
+++ b/storybook/stories/treemap/7_percentage.story.tsx
@@ -16,7 +16,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { countryDimension, regionDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const regionLookup = arrayToLookup((d: Datum) => d.region, regionDimension);
 const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
@@ -31,7 +30,7 @@ export const Example = () => (
       }
     }
   >
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_7"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/8_groove_text.story.tsx b/storybook/stories/treemap/8_groove_text.story.tsx
index 508f19e9493..974da5667d9 100644
--- a/storybook/stories/treemap/8_groove_text.story.tsx
+++ b/storybook/stories/treemap/8_groove_text.story.tsx
@@ -17,7 +17,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { countryDimension, regionDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const regionLookup = arrayToLookup((d: Datum) => d.region, regionDimension);
 const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
@@ -26,7 +25,7 @@ const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r,
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.sunburst}
diff --git a/storybook/stories/treemap/9_zero_values.story.tsx b/storybook/stories/treemap/9_zero_values.story.tsx
index cea218cf830..1ef802316dd 100644
--- a/storybook/stories/treemap/9_zero_values.story.tsx
+++ b/storybook/stories/treemap/9_zero_values.story.tsx
@@ -15,7 +15,6 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension);
 
@@ -26,7 +25,7 @@ const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => c
 
 export const Example = () => (
   <Chart>
-    <Settings baseTheme={useBaseTheme()} />
+    <Settings />
     <Partition
       id="spec_1"
       data={mocks.pie.map((d: any, i: number) => (i ? d : { ...d, exportVal: 0 }))}
diff --git a/storybook/stories/waffle/1_simple.story.tsx b/storybook/stories/waffle/1_simple.story.tsx
index c8e01a98a6a..68077cb68d3 100644
--- a/storybook/stories/waffle/1_simple.story.tsx
+++ b/storybook/stories/waffle/1_simple.story.tsx
@@ -13,14 +13,13 @@ import { Chart, Datum, Partition, PartitionLayout, Settings, ShapeTreeNode } fro
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
-import { useBaseTheme } from '../../use_base_theme';
 import { discreteColor, colorBrewerCategoricalStark9, productLookup } from '../utils/utils';
 
 export const Example = () => {
   const showDebug = boolean('show table for debugging', false);
   return (
     <Chart className="story-chart">
-      <Settings baseTheme={useBaseTheme()} debug={showDebug} showLegend flatLegend showLegendExtra />
+      <Settings debug={showDebug} showLegend flatLegend showLegendExtra />
       <Partition
         id="spec_1"
         data={mocks.pie.slice(0, 4)}
diff --git a/storybook/stories/wordcloud/1_wordcloud.story.tsx b/storybook/stories/wordcloud/1_wordcloud.story.tsx
index 68168d94de3..26f1d3defef 100644
--- a/storybook/stories/wordcloud/1_wordcloud.story.tsx
+++ b/storybook/stories/wordcloud/1_wordcloud.story.tsx
@@ -15,7 +15,6 @@ import { WeightFn, WordModel } from '@elastic/charts/src/chart_types/wordcloud/l
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 import { palettes as euiPalettes } from '@elastic/charts/src/utils/themes/colors';
 
-import { useBaseTheme } from '../../use_base_theme';
 
 const text =
   'Webtwo ipsum sifteo twones chegg lijit meevee spotify, joukuu wakoopa greplin. Sclipo octopart wufoo, balihoo. Kiko groupon fleck revver blyve joyent dogster, zoodles zooomr scribd dogster mog. Zinch orkut jabber trulia, sclipo. Chumby imvu rovio ning zoho akismet napster, kippt zillow mzinga zoho. ' +
diff --git a/storybook/story_wrapper.tsx b/storybook/story_wrapper.tsx
index 8e2bfdb0493..3f4c84ab588 100644
--- a/storybook/story_wrapper.tsx
+++ b/storybook/story_wrapper.tsx
@@ -8,52 +8,53 @@
 
 import { EuiMarkdownFormat, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
 import { DecoratorFunction } from '@storybook/addons';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { ThemeId, ThemeIdProvider, BackgroundIdProvider } from './use_base_theme';
+import { ElasticChartsProvider } from '@elastic/charts';
 
-export const StoryWrapper: DecoratorFunction<JSX.Element> = (Story, context) => {
-  if (!Story) return <div>No Story</div>;
+import { getContext, ThemeId } from './context_utils';
 
+export const StoryWrapper: DecoratorFunction<JSX.Element> = (Story, context) => {
   const themeId = context.globals?.theme ?? ThemeId.Light;
   const backgroundId = context.globals?.background;
   const markdown = context?.parameters?.markdown;
+  const contextValue = useMemo(() => getContext(themeId, backgroundId), [themeId, backgroundId]);
 
-  return (
-    <ThemeIdProvider value={themeId}>
-      <BackgroundIdProvider value={backgroundId}>
-        <EuiFlexGroup gutterSize="none" direction="column" responsive={false}>
-          <EuiFlexItem id="story-header" grow={false}>
-            <EuiFlexGroup gutterSize="none" direction="column" responsive={false}>
-              <EuiFlexItem>
-                <EuiText>
-                  <h1 style={{ fontWeight: 200 }}>{context.kind}</h1>
-                </EuiText>
-              </EuiFlexItem>
-
-              <EuiFlexItem>
-                <EuiText>
-                  <h2 style={{ fontWeight: 400 }}>{context.name}</h2>
-                </EuiText>
-              </EuiFlexItem>
-
-              <EuiHorizontalRule />
-            </EuiFlexGroup>
-          </EuiFlexItem>
+  if (!Story) return <div>No Story</div>;
 
-          <EuiFlexItem grow={false}>
-            <div id="story-root">
-              <Story {...context} />
-            </div>
-          </EuiFlexItem>
+  return (
+    <ElasticChartsProvider value={contextValue}>
+      <EuiFlexGroup gutterSize="none" direction="column" responsive={false}>
+        <EuiFlexItem id="story-header" grow={false}>
+          <EuiFlexGroup gutterSize="none" direction="column" responsive={false}>
+            <EuiFlexItem>
+              <EuiText>
+                <h1 style={{ fontWeight: 200 }}>{context.kind}</h1>
+              </EuiText>
+            </EuiFlexItem>
 
-          {markdown && (
-            <EuiFlexItem style={{ padding: 24 }}>
-              <EuiMarkdownFormat>{markdown}</EuiMarkdownFormat>
+            <EuiFlexItem>
+              <EuiText>
+                <h2 style={{ fontWeight: 400 }}>{context.name}</h2>
+              </EuiText>
             </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </BackgroundIdProvider>
-    </ThemeIdProvider>
+
+            <EuiHorizontalRule />
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <div id="story-root">
+            <Story {...context} />
+          </div>
+        </EuiFlexItem>
+
+        {markdown && (
+          <EuiFlexItem style={{ padding: 24 }}>
+            <EuiMarkdownFormat>{markdown}</EuiMarkdownFormat>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </ElasticChartsProvider>
   );
 };