diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png
index 84b4979c43..b2f2f5dbc0 100644
Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png differ
diff --git a/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png b/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png
index a117d47769..534ece25ce 100644
Binary files a/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png and b/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png
new file mode 100644
index 0000000000..6f549ac318
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png
new file mode 100644
index 0000000000..ad0aa52c42
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png
new file mode 100644
index 0000000000..cbfd9b3b9a
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png
new file mode 100644
index 0000000000..cbfd9b3b9a
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png
new file mode 100644
index 0000000000..4439457778
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png
new file mode 100644
index 0000000000..2b45e504c4
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png
new file mode 100644
index 0000000000..fabb78a039
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png
new file mode 100644
index 0000000000..fabb78a039
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png
new file mode 100644
index 0000000000..11de00a658
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png
new file mode 100644
index 0000000000..1fbe71ab2d
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-eui-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png
new file mode 100644
index 0000000000..dd2a0d6f2d
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-eui-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png
new file mode 100644
index 0000000000..dd2a0d6f2d
Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-metric-with-transparent-bg-color-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png
index 86309bf9bc..0c19e50c31 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png
index 00f33b0c30..3ce7ab7862 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png
index 86309bf9bc..0c19e50c31 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png
index 00f33b0c30..3ce7ab7862 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png
index 7a20df120f..7ec59e9d95 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png
index 397034a0c8..122918d262 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png differ
diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png
index 30a337dd8f..c105a23035 100644
Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png differ
diff --git a/e2e/tests/metric_stories.test.ts b/e2e/tests/metric_stories.test.ts
index 51b0d293bf..2e095c4c0a 100644
--- a/e2e/tests/metric_stories.test.ts
+++ b/e2e/tests/metric_stories.test.ts
@@ -8,6 +8,7 @@
import { test } from '@playwright/test';
+import { eachTheme, pwEach } from '../helpers';
import { common } from '../page_objects';
test.describe('Metric', () => {
@@ -21,7 +22,7 @@ test.describe('Metric', () => {
'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-light&knob-use progress bar=&knob-progress bar direction=horizontal&knob-max trend data points=30&knob-layout=grid',
);
});
- test('should render vertical progress bar in dark mode', async ({ page }) => {
+ test('should render vertical progress bar in dark mode', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=vertical&knob-use progress bar=true',
);
@@ -31,14 +32,14 @@ test.describe('Metric', () => {
'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=horizontal&knob-use progress bar=true',
);
});
- test('should render no progress bar in dark mode', async ({ page }) => {
+ test('should render no progress bar in dark mode', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=horizontal&knob-use progress bar=',
);
});
test('text value with trend', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
- 'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:eui-light&knob-EUI icon glyph name=warning&knob-color=rgba(166, 219, 208, 0.47)&knob-extra=1310 (-74% week before)&knob-is numeric metric=false&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=trend&knob-subtitle=&knob-title=Most used in&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=United States&knob-value postfix=&knob-value prefix=&knob-show icon=',
+ 'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:eui-light&knob-EUI icon glyph name=warning&knob-color=rgba(166, 219, 208, 1)&knob-extra=1310 (-74% week before)&knob-is numeric metric=false&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=trend&knob-subtitle=&knob-title=Most used in&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=United States&knob-value postfix=&knob-value prefix=&knob-show icon=',
);
});
test('value icon and value color', async ({ page }) => {
@@ -46,4 +47,18 @@ test.describe('Metric', () => {
'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:eui-light&knob-title=Network out&knob-subtitle=host: 1dc4e&knob-progress or trend=trend&knob-progress bar direction=vertical&knob-trend data points=30&knob-trend shape=area&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-extra=last 5m&knob-progress max=100&knob-is numeric metric=true&knob-value=55.23&knob-value prefix=&knob-value postfix=GB&knob-color=rgba(255, 255, 255, 1)&knob-use value color=true&knob-value color=rgba(189, 0, 0, 1)&knob-show icon=true&knob-EUI icon glyph name=warning&knob-show value icon=true&knob-EUI value icon glyph name=sortUp',
);
});
+
+ pwEach.describe(['trend', 'bar', 'none'])(
+ (v) => `Metric - ${v} type`,
+ (type) => {
+ eachTheme.test(
+ async ({ page, urlParam }) => {
+ await common.expectChartAtUrlToMatchScreenshot(page)(
+ `http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last 5m&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`,
+ );
+ },
+ (t) => `should render metric with transparent bg color - ${t} theme`,
+ );
+ },
+ );
});
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 15fc2b8631..8928a2f49c 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -1840,8 +1840,6 @@ export type MetricSpecProps = ComponentProps;
// @public (undocumented)
export interface MetricStyle {
- // (undocumented)
- background: Color;
// (undocumented)
barBackground: Color;
// (undocumented)
diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
index 7dbb839c23..8f76c37e05 100644
--- a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
+++ b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -140,6 +140,7 @@ export function shapeViewModel(
const cellHeightInner = cellHeight - gridStrokeWidth;
if (colorToRgba(background.color)[3] < 1) {
+ // TODO: centralize this check and bg color fallback across all chart types
Logger.expected(
'Text contrast requires a opaque background color, using fallbackColor',
'an opaque color',
@@ -200,7 +201,7 @@ export function shapeViewModel(
visible: !isValueInRanges(d.value, bandsToHide),
formatted: formattedValue,
fontSize,
- textColor: fillTextColor(background.fallbackColor, cellBackgroundColor, background.color),
+ textColor: fillTextColor(background.fallbackColor, cellBackgroundColor, background.color).color.keyword,
});
return acc;
}, new Map());
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/index.tsx b/packages/charts/src/chart_types/metric/renderer/dom/index.tsx
index ea8e197914..f3524603d0 100644
--- a/packages/charts/src/chart_types/metric/renderer/dom/index.tsx
+++ b/packages/charts/src/chart_types/metric/renderer/dom/index.tsx
@@ -15,9 +15,9 @@ import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { Metric as MetricComponent } from './metric';
-import { highContrastColor } from '../../../../common/color_calcs';
+import { ColorContrastOptions, highContrastColor } from '../../../../common/color_calcs';
import { colorToRgba } from '../../../../common/color_library_wrappers';
-import { Colors } from '../../../../common/colors';
+import { getResolvedBackgroundColor } from '../../../../common/fill_text_color';
import { BasicListener, ElementClickListener, ElementOverListener, settingsBuildProps } from '../../../../specs';
import { onChartRendered } from '../../../../state/actions/chart';
import { GlobalChartState } from '../../../../state/chart_state';
@@ -30,7 +30,7 @@ import { getChartThemeSelector } from '../../../../state/selectors/get_chart_the
import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
-import { MetricStyle } from '../../../../utils/themes/theme';
+import { BackgroundStyle, MetricStyle } from '../../../../utils/themes/theme';
import { MetricSpec } from '../../specs';
import { chartSize } from '../../state/selectors/chart_size';
import { getMetricSpecs } from '../../state/selectors/data';
@@ -47,6 +47,7 @@ interface StateProps {
specs: MetricSpec[];
a11y: A11ySettings;
style: MetricStyle;
+ background: BackgroundStyle;
locale: string;
onElementClick?: ElementClickListener;
onElementOut?: BasicListener;
@@ -76,6 +77,7 @@ class Component extends React.Component {
a11y,
specs: [spec], // ignoring other specs
style,
+ background,
onElementClick,
onElementOut,
onElementOver,
@@ -93,11 +95,12 @@ class Component extends React.Component {
}, 0);
const panel = { width: width / maxColumns, height: height / totalRows };
-
- const emptyForegroundColor =
- highContrastColor(colorToRgba(style.background)) === Colors.White.rgba
- ? style.text.lightColor
- : style.text.darkColor;
+ const backgroundColor = getResolvedBackgroundColor(background.fallbackColor, background.color);
+ const contrastOptions: ColorContrastOptions = {
+ lightColor: colorToRgba(style.text.lightColor),
+ darkColor: colorToRgba(style.text.darkColor),
+ };
+ const { color: emptyForegroundColor } = highContrastColor(colorToRgba(backgroundColor), undefined, contrastOptions);
return (
// eslint-disable-next-line jsx-a11y/no-redundant-roles
@@ -123,7 +126,7 @@ class Component extends React.Component {
return !datum ? (
) : (
@@ -138,6 +141,8 @@ class Component extends React.Component {
columnIndex={columnIndex}
panel={panel}
style={style}
+ backgroundColor={backgroundColor}
+ contrastOptions={contrastOptions}
onElementClick={onElementClick}
onElementOut={onElementOut}
onElementOver={onElementOver}
@@ -185,6 +190,7 @@ const DEFAULT_PROPS: StateProps = {
},
a11y: DEFAULT_A11Y_SETTINGS,
style: LIGHT_THEME.metric,
+ background: LIGHT_THEME.background,
locale: settingsBuildProps.defaults.locale,
};
@@ -193,6 +199,7 @@ const mapStateToProps = (state: GlobalChartState): StateProps => {
return DEFAULT_PROPS;
}
const { onElementClick, onElementOut, onElementOver, locale } = getSettingsSpecSelector(state);
+ const { metric: style, background } = getChartThemeSelector(state);
return {
initialized: true,
chartId: state.chartId,
@@ -203,7 +210,8 @@ const mapStateToProps = (state: GlobalChartState): StateProps => {
onElementClick,
onElementOver,
onElementOut,
- style: getChartThemeSelector(state).metric,
+ background,
+ style,
locale,
};
};
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx b/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx
index b745ddf306..e69f0249b8 100644
--- a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx
+++ b/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx
@@ -10,12 +10,13 @@ import classNames from 'classnames';
import React, { CSSProperties, useState } from 'react';
import { ProgressBar } from './progress';
-import { SparkLine } from './sparkline';
+import { SparkLine, getSparkLineColor } from './sparkline';
import { MetricText } from './text';
-import { highContrastColor } from '../../../../common/color_calcs';
-import { changeColorLightness, colorToRgba } from '../../../../common/color_library_wrappers';
-import { Colors } from '../../../../common/colors';
+import { ColorContrastOptions } from '../../../../common/color_calcs';
+import { changeColorLightness } from '../../../../common/color_library_wrappers';
+import { Color } from '../../../../common/colors';
import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
+import { fillTextColor } from '../../../../common/fill_text_color';
import {
BasicListener,
ElementClickListener,
@@ -39,6 +40,8 @@ export const Metric: React.FunctionComponent<{
datum: MetricDatum;
panel: Size;
style: MetricStyle;
+ backgroundColor: Color;
+ contrastOptions: ColorContrastOptions;
locale: string;
onElementClick?: ElementClickListener;
onElementOver?: ElementOverListener;
@@ -53,6 +56,8 @@ export const Metric: React.FunctionComponent<{
datum,
panel,
style,
+ backgroundColor,
+ contrastOptions,
locale,
onElementClick,
onElementOver,
@@ -75,16 +80,11 @@ export const Metric: React.FunctionComponent<{
const lightnessAmount = mouseState === 'leave' ? 0 : mouseState === 'enter' ? 0.05 : 0.1;
const interactionColor = changeColorLightness(datum.color, lightnessAmount, 0.8);
- const backgroundInteractionColor = changeColorLightness(style.background, lightnessAmount, 0.8);
const datumWithInteractionColor: MetricDatum = {
...datum,
color: interactionColor,
};
- const updatedStyle: MetricStyle = {
- ...style,
- background: backgroundInteractionColor,
- };
const event: MetricElementEvent = { type: 'metricElementEvent', rowIndex, columnIndex };
@@ -92,17 +92,35 @@ export const Metric: React.FunctionComponent<{
backgroundColor:
!isMetricWTrend(datumWithInteractionColor) && !isMetricWProgress(datumWithInteractionColor)
? datumWithInteractionColor.color
- : updatedStyle.background,
+ : undefined,
cursor: onElementClick ? 'pointer' : DEFAULT_CSS_CURSOR,
borderColor: style.border,
};
- const bgColor = isMetricWTrend(datum) || !isMetricWProgress(datum) ? datum.color : style.background;
+ const highContrastTextColor = fillTextColor(
+ backgroundColor,
+ isMetricWProgress(datum) ? backgroundColor : datum.color,
+ undefined,
+ contrastOptions,
+ );
+ let finalTextColor = highContrastTextColor.color;
+
+ if (isMetricWTrend(datum)) {
+ const { ratio, color, shade } = fillTextColor(
+ backgroundColor,
+ getSparkLineColor(datum.color),
+ undefined,
+ contrastOptions,
+ );
- const highContrastTextColor =
- highContrastColor(colorToRgba(bgColor)) === Colors.White.rgba ? style.text.lightColor : style.text.darkColor;
+ // TODO verify this check is applied correctly
+ if (shade !== highContrastTextColor.shade && ratio > highContrastTextColor.ratio) {
+ finalTextColor = color;
+ }
+ }
const onElementClickHandler = () => onElementClick && onElementClick([event]);
+
return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/click-events-have-key-events
{isMetricWTrend(datumWithInteractionColor) && }
{isMetricWProgress(datumWithInteractionColor) && (
-
+
)}
-
+
);
};
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx b/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx
index dbffab4f61..d83e17bb16 100644
--- a/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx
+++ b/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx
@@ -15,6 +15,12 @@ import { isFiniteNumber } from '../../../../utils/common';
import { CurveType } from '../../../../utils/curves';
import { MetricTrendShape, MetricWTrend } from '../../specs';
+/** @internal */
+export const getSparkLineColor = (color: MetricWTrend['color']) => {
+ const [h, s, l, a] = colorToHsl(color);
+ return hslToColor(h, s, l >= 0.8 ? l - 0.1 : l + 0.1, a);
+};
+
/** @internal */
export const SparkLine: FunctionComponent<{
id: string;
@@ -36,8 +42,6 @@ export const SparkLine: FunctionComponent<{
trendShape === MetricTrendShape.Bars ? CurveType.CURVE_STEP_AFTER : CurveType.LINEAR,
);
- const [h, s, l] = colorToHsl(color);
- const pathColor = hslToColor(h, s, l >= 0.8 ? l - 0.1 : l + 0.1);
const titleId = `${id}-trend-title`;
const descriptionId = `${id}-trend-description`;
return (
@@ -51,17 +55,31 @@ export const SparkLine: FunctionComponent<{
role="img"
aria-labelledby={`${titleId} ${descriptionId}`}
>
+
+
+
+
+
+
+
{trendA11yTitle}
{trendA11yDescription}
-
+
+
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.test.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.test.ts
index 9d64e7c680..02f19e9476 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.test.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.test.ts
@@ -268,6 +268,6 @@ describe('Test fillTextColor function', () => {
const fillColor = 'rgba(55, 126, 184, 0.7)';
const containerBackgroundColor = 'white';
const expectedAdjustedTextColor = 'rgba(0, 0, 0, 1)'; // with WCAG 2 is black
- expect(fillTextColor(fillColor, containerBackgroundColor)).toEqual(expectedAdjustedTextColor);
+ expect(fillTextColor(fillColor, containerBackgroundColor).color.keyword).toEqual(expectedAdjustedTextColor);
});
});
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
index a9afa69cbe..347dfb11b1 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
@@ -90,7 +90,7 @@ export function linkTextLayout(
}
const textColor =
linkLabel.textColor === ColorVariant.Adaptive
- ? fillTextColor(fallbackBGColor, null, backgroundColor)
+ ? fillTextColor(fallbackBGColor, null, backgroundColor).color.keyword
: linkLabel.textColor;
const labelFontSpec: Font = { ...linkLabel, textColor };
const valueFontSpec: Font = { ...linkLabel, ...linkLabel.valueFont, textColor };
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
index 1c2572aff6..1a0df66497 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -170,7 +170,7 @@ export function makeQuadViewModel(
const textColor = textNegligible
? Colors.Transparent.keyword
: fillLabel.textColor === ColorVariant.Adaptive
- ? fillTextColor(fallbackBGColor, fillColor, backgroundColor)
+ ? fillTextColor(fallbackBGColor, fillColor, backgroundColor).color.keyword
: fillLabel.textColor;
return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor, ...node };
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts
index be91dd8222..754a944814 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts
@@ -204,8 +204,8 @@ function getTextColors(
shadowColor: fillDefinition.borderColor || Colors.Transparent.keyword,
};
}
- const fillColor = fillTextColor(fallbackBGColor, geometryColor, backgroundColor);
- const shadowColor = fillTextColor(fallbackBGColor, fillColor, backgroundColor);
+ const fillColor = fillTextColor(fallbackBGColor, geometryColor, backgroundColor).color.keyword;
+ const shadowColor = fillTextColor(fallbackBGColor, fillColor, backgroundColor).color.keyword;
return {
fillColor,
diff --git a/packages/charts/src/common/color_calcs.test.ts b/packages/charts/src/common/color_calcs.test.ts
index 62db2ec2ac..c452a57aa9 100644
--- a/packages/charts/src/common/color_calcs.test.ts
+++ b/packages/charts/src/common/color_calcs.test.ts
@@ -17,8 +17,8 @@ describe('Color calcs', () => {
const background: RgbaTuple = [120, 116, 178, 0.7];
const blendedBackground: RgbaTuple = [161, 158, 201, 1];
expect(combineColors(background, Colors.White.rgba)).toEqual(blendedBackground);
- expect(highContrastColor(blendedBackground, 'WCAG2')).toEqual(Colors.Black.rgba);
- expect(highContrastColor(blendedBackground, 'WCAG3')).toEqual(Colors.White.rgba);
+ expect(highContrastColor(blendedBackground, 'WCAG2').color.rgba).toEqual(Colors.Black.rgba);
+ expect(highContrastColor(blendedBackground, 'WCAG3').color.rgba).toEqual(Colors.White.rgba);
});
});
describe('test the combineColors function', () => {
diff --git a/packages/charts/src/common/color_calcs.ts b/packages/charts/src/common/color_calcs.ts
index 982504e3bb..a5a02c8866 100644
--- a/packages/charts/src/common/color_calcs.ts
+++ b/packages/charts/src/common/color_calcs.ts
@@ -6,9 +6,11 @@
* Side Public License, v 1.
*/
+import { Required } from 'utility-types';
+
import { APCAContrast } from './apca_color_contrast';
import { RgbaTuple, RGBATupleToString, RgbTuple } from './color_library_wrappers';
-import { Colors } from './colors';
+import { ColorDefinition, Colors } from './colors';
import { getWCAG2ContrastRatio } from './wcag2_color_contrast';
/** @internal */
@@ -45,16 +47,63 @@ export function combineColors([fgR, fgG, fgB, fgA]: RgbaTuple, [bgR, bgG, bgB, b
return [r, g, b, alpha];
}
-function getHighContrastColorWCAG2(background: RgbTuple): RgbaTuple {
- const wWhite = getWCAG2ContrastRatio(Colors.White.rgba, background);
- const wBlack = getWCAG2ContrastRatio(Colors.Black.rgba, background);
- return wWhite >= wBlack ? Colors.White.rgba : Colors.Black.rgba;
+/** @internal */
+export interface ColorContrastOptions {
+ darkColor?: RgbaTuple;
+ lightColor?: RgbaTuple;
}
-function getHighContrastColorAPCA(background: RgbTuple): RgbaTuple {
- const wWhiteText = Math.abs(APCAContrast(background, Colors.White.rgba));
- const wBlackText = Math.abs(APCAContrast(background, Colors.Black.rgba));
- return wWhiteText > wBlackText ? Colors.White.rgba : Colors.Black.rgba;
+const getOptionWithDefaults = (options: ColorContrastOptions = {}): Required => ({
+ darkColor: Colors.Black.rgba,
+ lightColor: Colors.White.rgba,
+ ...options,
+});
+
+function getHighContrastColorWCAG2(background: RgbTuple, options: ColorContrastOptions = {}): HighContrastResult {
+ const { lightColor, darkColor } = getOptionWithDefaults(options);
+ const wLight = getWCAG2ContrastRatio(lightColor, background);
+ const wDark = getWCAG2ContrastRatio(darkColor, background);
+ return wLight >= wDark
+ ? {
+ color: {
+ rgba: lightColor,
+ keyword: RGBATupleToString(lightColor),
+ },
+ ratio: wLight,
+ shade: 'light',
+ }
+ : {
+ color: {
+ rgba: darkColor,
+ keyword: RGBATupleToString(darkColor),
+ },
+ ratio: wDark,
+ shade: 'dark',
+ };
+}
+
+function getHighContrastColorAPCA(background: RgbTuple, options: ColorContrastOptions = {}): HighContrastResult {
+ const { lightColor, darkColor } = getOptionWithDefaults(options);
+ const wLightText = Math.abs(APCAContrast(background, lightColor));
+ const wDarkText = Math.abs(APCAContrast(background, darkColor));
+
+ return wLightText > wDarkText
+ ? {
+ color: {
+ rgba: lightColor,
+ keyword: RGBATupleToString(lightColor),
+ },
+ ratio: wLightText,
+ shade: 'light',
+ }
+ : {
+ color: {
+ rgba: darkColor,
+ keyword: RGBATupleToString(darkColor),
+ },
+ ratio: wDarkText,
+ shade: 'dark',
+ };
}
const HIGH_CONTRAST_FN = {
@@ -62,10 +111,21 @@ const HIGH_CONTRAST_FN = {
WCAG3: getHighContrastColorAPCA,
};
+/** @internal */
+export interface HighContrastResult {
+ color: ColorDefinition;
+ ratio: number;
+ shade: 'light' | 'dark';
+}
+
/**
* Use white or black text depending on the high contrast mode used
* @internal
*/
-export function highContrastColor(background: RgbTuple, mode: keyof typeof HIGH_CONTRAST_FN = 'WCAG2'): RgbaTuple {
- return HIGH_CONTRAST_FN[mode](background);
+export function highContrastColor(
+ background: RgbTuple,
+ mode: keyof typeof HIGH_CONTRAST_FN = 'WCAG2',
+ options?: ColorContrastOptions,
+): HighContrastResult {
+ return HIGH_CONTRAST_FN[mode](background, options);
}
diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts
index 806811d792..da4309b1f0 100644
--- a/packages/charts/src/common/color_library_wrappers.ts
+++ b/packages/charts/src/common/color_library_wrappers.ts
@@ -83,18 +83,20 @@ export function colorToRgba(color: Color): RgbaTuple {
}
/** @internal */
-export function colorToHsl(color: Color) {
- const [r, g, b] = colorToRgba(color);
- return chroma.rgb(r, g, b).hsl();
+export function colorToHsl(color: Color): [h: number, s: number, l: number, a: number] {
+ const [r, g, b, a] = colorToRgba(color);
+ const [h, s, l] = chroma.rgb(r, g, b).hsl(); // alpha not preserved
+ return [h, s, l, a];
}
+
/** @internal */
-export function hslToColor(h: number, s: number, l: number): Color {
- const rgba = chroma.hsl(h, s, l).rgba();
+export function hslToColor(h: number, s: number, l: number, a = 1): Color {
+ const rgba = chroma.hsl(h, s, l).alpha(a).rgba();
return RGBATupleToString(rgba);
}
/** @internal */
export function changeColorLightness(color: Color, lightnessAmount: number, lightnessThreshold: number): Color {
- const [h, s, l] = colorToHsl(color);
- return hslToColor(h, s, l >= lightnessThreshold ? l - lightnessAmount : l + lightnessAmount);
+ const [h, s, l, a] = colorToHsl(color);
+ return hslToColor(h, s, l >= lightnessThreshold ? l - lightnessAmount : l + lightnessAmount, a);
}
diff --git a/packages/charts/src/common/colors.tsx b/packages/charts/src/common/colors.tsx
index d4a6b7834e..332379c78d 100644
--- a/packages/charts/src/common/colors.tsx
+++ b/packages/charts/src/common/colors.tsx
@@ -15,10 +15,13 @@ import { RgbaTuple } from './color_library_wrappers';
export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string
/** @internal */
-export const Colors: Record<
- 'Red' | 'White' | 'Black' | 'Transparent' | 'DarkOpaqueRed',
- { keyword: Color; rgba: RgbaTuple }
-> = {
+export interface ColorDefinition {
+ keyword: Color;
+ rgba: RgbaTuple;
+}
+
+/** @internal */
+export const Colors: Record<'Red' | 'White' | 'Black' | 'Transparent' | 'DarkOpaqueRed', ColorDefinition> = {
Red: {
keyword: 'red',
rgba: [255, 0, 0, 1],
diff --git a/packages/charts/src/common/fill_text_color.test.ts b/packages/charts/src/common/fill_text_color.test.ts
index 38078e18ce..af2e8dfc96 100644
--- a/packages/charts/src/common/fill_text_color.test.ts
+++ b/packages/charts/src/common/fill_text_color.test.ts
@@ -13,19 +13,19 @@ import { fillTextColor, TRANSPARENT_LIMIT } from './fill_text_color';
describe('Fill text color', () => {
describe('highContrastColor', () => {
it('should return black when background is white', () => {
- expect(fillTextColor(Colors.White.keyword, null, Colors.White.keyword)).toEqual(
+ expect(fillTextColor(Colors.White.keyword, null, Colors.White.keyword).color.keyword).toEqual(
RGBATupleToString(Colors.Black.rgba),
);
});
// test contrast computation
it('should return black with yellow/semi-transparent background', () => {
- expect(fillTextColor(Colors.White.keyword, null, 'rgba(255,255,51,0.3)')).toEqual(
+ expect(fillTextColor(Colors.White.keyword, null, 'rgba(255,255,51,0.3)').color.keyword).toEqual(
RGBATupleToString(Colors.Black.rgba),
);
});
it('should use white text for Thailand color', () => {
// black for WCAG2, white for WCAG3
- expect(fillTextColor(Colors.White.keyword, null, 'rgba(120, 116, 178, 1)')).toEqual(
+ expect(fillTextColor(Colors.White.keyword, null, 'rgba(120, 116, 178, 1)').color.keyword).toEqual(
RGBATupleToString(Colors.Black.rgba),
);
});
@@ -35,29 +35,32 @@ describe('Fill text color', () => {
const fallbackBG = Colors.White.keyword;
it('should use fallbackBG if background is transparent and no foreground', () => {
- expect(fillTextColor(fallbackBG, null, Colors.Transparent.keyword)).toEqual('rgba(0, 0, 0, 1)');
+ expect(fillTextColor(fallbackBG, null, Colors.Transparent.keyword).color.keyword).toEqual('rgba(0, 0, 0, 1)');
});
it('should use fallbackBG if background is lower tranparent limit and no foreground', () => {
- expect(fillTextColor(fallbackBG, null, `rgba(120, 116, 178, ${TRANSPARENT_LIMIT - Number.EPSILON})`)).toEqual(
- 'rgba(0, 0, 0, 1)',
- );
+ expect(
+ fillTextColor(fallbackBG, null, `rgba(120, 116, 178, ${TRANSPARENT_LIMIT - Number.EPSILON})`).color.keyword,
+ ).toEqual('rgba(0, 0, 0, 1)');
});
it('should contrast fallbackBG with foreground if background is transparent', () => {
- expect(fillTextColor(fallbackBG, 'rgba(0, 0, 255, 1)', Colors.Transparent.keyword)).toEqual(
+ expect(fillTextColor(fallbackBG, 'rgba(0, 0, 255, 1)', Colors.Transparent.keyword).color.keyword).toEqual(
'rgba(255, 255, 255, 1)',
);
});
it('should contrast fallbackBG with transparent foreground if background is transparent', () => {
expect(
- fillTextColor(fallbackBG, `rgba(0, 0, 255, ${TRANSPARENT_LIMIT - Number.EPSILON})`, Colors.Transparent.keyword),
+ fillTextColor(fallbackBG, `rgba(0, 0, 255, ${TRANSPARENT_LIMIT - Number.EPSILON})`, Colors.Transparent.keyword)
+ .color.keyword,
).toEqual('rgba(0, 0, 0, 1)');
});
it('should return constrast with opac foreground and opac background', () => {
- expect(fillTextColor(fallbackBG, 'rgba(0, 0, 255, 1)', 'rgba(255, 0, 0, 1)')).toEqual('rgba(255, 255, 255, 1)');
+ expect(fillTextColor(fallbackBG, 'rgba(0, 0, 255, 1)', 'rgba(255, 0, 0, 1)').color.keyword).toEqual(
+ 'rgba(255, 255, 255, 1)',
+ );
});
});
});
diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts
index 62c242ba54..68b2371264 100644
--- a/packages/charts/src/common/fill_text_color.ts
+++ b/packages/charts/src/common/fill_text_color.ts
@@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
-import { combineColors, highContrastColor } from './color_calcs';
+import { ColorContrastOptions, HighContrastResult, combineColors, highContrastColor } from './color_calcs';
import { colorToRgba, RGBATupleToString } from './color_library_wrappers';
import { Color, Colors } from './colors';
@@ -26,7 +26,8 @@ export function fillTextColor(
fallbackBGColor: Color,
foreground: Color | null,
background: Color = Colors.Transparent.keyword,
-): Color {
+ options?: ColorContrastOptions,
+): HighContrastResult {
let backgroundRGBA = colorToRgba(background);
if (backgroundRGBA[3] < TRANSPARENT_LIMIT) {
@@ -36,8 +37,22 @@ export function fillTextColor(
if (foreground) {
const foregroundRGBA = colorToRgba(foreground);
const blendedFgBg = combineColors(foregroundRGBA, backgroundRGBA);
- return RGBATupleToString(highContrastColor(blendedFgBg));
+ return highContrastColor(blendedFgBg, 'WCAG2', options);
+ }
+
+ return highContrastColor(backgroundRGBA);
+}
+
+/** @internal */
+export function getResolvedBackgroundColor(
+ fallbackBGColor: Color,
+ background: Color = Colors.Transparent.keyword,
+): Color {
+ let backgroundRGBA = colorToRgba(background);
+
+ if (backgroundRGBA[3] < TRANSPARENT_LIMIT) {
+ backgroundRGBA = colorToRgba(fallbackBGColor);
}
- return RGBATupleToString(highContrastColor(backgroundRGBA));
+ return RGBATupleToString(backgroundRGBA);
}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx
index 2524ffb739..2b471c0c9f 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx
@@ -12,7 +12,7 @@ import React from 'react';
import { useTooltipContext } from './tooltip_provider';
import { TooltipTableCell, TooltipTableCellProps } from './tooltip_table_cell';
import { combineColors, highContrastColor } from '../../../common/color_calcs';
-import { colorToRgba, RGBATupleToString } from '../../../common/color_library_wrappers';
+import { colorToRgba } from '../../../common/color_library_wrappers';
import { Color, Colors } from '../../../common/colors';
/** @public */
@@ -42,7 +42,7 @@ export function TooltipTableColorCell({
const foregroundRGBA = colorToRgba(stripColor === Colors.Transparent.keyword ? backgroundColor : stripColor);
const backgroundRGBA = colorToRgba(backgroundColor);
const blendedFgBg = combineColors(foregroundRGBA, backgroundRGBA);
- return RGBATupleToString(highContrastColor(blendedFgBg, 'WCAG3'));
+ return highContrastColor(blendedFgBg, 'WCAG3').color.keyword;
};
const renderColorStrip = () => {
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index 3dfb1cd5fb..ca3c2e50d8 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -410,7 +410,6 @@ export const DARK_THEME: Theme = {
},
border: '#343741',
barBackground: '#343741',
- background: '#1D1E23',
nonFiniteText: 'N/A',
minHeight: 64,
},
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index 4e88e8b8d5..01e44d3023 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -409,7 +409,6 @@ export const LIGHT_THEME: Theme = {
},
border: '#EDF0F5',
barBackground: '#EDF0F5',
- background: '#FFFFFF',
nonFiniteText: 'N/A',
minHeight: 64,
},
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index 23f844f75a..b4db27c0f5 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -312,7 +312,6 @@ export interface MetricStyle {
lightColor: Color;
};
border: Color;
- background: Color;
barBackground: Color;
nonFiniteText: string;
minHeight: Pixels;