From beb4cf108abbd6451bd252b5a33d87cae1d6aaef Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 28 Jan 2025 14:35:32 +0100 Subject: [PATCH] style(theme): cleanup remaining theme changes (#2602) Remove remaining Amsterdam colors, using their hex code until #2601 is done. BREAKING CHANGE: the light and dark themes follow the EUI Borealis theme. --- packages/charts/api/charts.api.md | 24 ---- packages/charts/src/index.ts | 1 - .../charts/src/utils/themes/base_colors.ts | 106 ++++++++++-------- .../charts/src/utils/themes/dark_theme.ts | 13 +-- .../charts/src/utils/themes/light_theme.ts | 23 ++-- packages/charts/src/utils/themes/theme.ts | 14 --- 6 files changed, 74 insertions(+), 107 deletions(-) diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index a3d9870cb7..b4b194a9d2 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -638,24 +638,6 @@ export class Chart extends React_2.Component { render(): React_2.JSX.Element; } -// @public -export interface ChartBaseColors { - // (undocumented) - darkestShade: string; - // (undocumented) - darkShade: string; - // (undocumented) - emptyShade: string; - // (undocumented) - lightestShade: string; - // (undocumented) - lightShade: string; - // (undocumented) - mediumShade: string; - // (undocumented) - title: string; -} - // @public (undocumented) export interface ChartProps { // (undocumented) @@ -883,9 +865,6 @@ export interface CustomTooltipProps) | OrdinalDomain; -// @public -export const DARK_BASE_COLORS: ChartBaseColors; - // @public (undocumented) export const DARK_THEME: Theme; @@ -1925,9 +1904,6 @@ export const LegendValue: Readonly<{ // @public (undocumented) export type LegendValue = $Values; -// @public -export const LIGHT_BASE_COLORS: ChartBaseColors; - // @public (undocumented) export const LIGHT_THEME: Theme; diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index 39a905754e..5e4c236c6e 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -79,7 +79,6 @@ export * from './utils/themes/theme_common'; export { getChartsTheme } from './utils/themes/get_charts_theme'; export { LIGHT_THEME } from './utils/themes/light_theme'; export { DARK_THEME } from './utils/themes/dark_theme'; -export { LIGHT_BASE_COLORS, DARK_BASE_COLORS } from './utils/themes/base_colors'; export { LEGACY_LIGHT_THEME } from './utils/themes/legacy_light_theme'; export { LEGACY_DARK_THEME } from './utils/themes/legacy_dark_theme'; diff --git a/packages/charts/src/utils/themes/base_colors.ts b/packages/charts/src/utils/themes/base_colors.ts index 7c2a4e7096..3ac107b93d 100644 --- a/packages/charts/src/utils/themes/base_colors.ts +++ b/packages/charts/src/utils/themes/base_colors.ts @@ -8,37 +8,10 @@ import chroma from 'chroma-js'; -import { ChartBaseColors } from './theme'; - -/** - * Base light theme colors designed to match eui, see https://eui.elastic.co/#/theming/colors/values#shades - * @public - */ -export const LIGHT_BASE_COLORS: ChartBaseColors = { - emptyShade: '#FFF', - lightestShade: '#F1F4FA', - lightShade: '#D3DAE6', - mediumShade: '#98A2B3', - darkShade: '#69707D', - darkestShade: '#343741', - title: '#1A1C21', -}; - /** - * Base dark theme colors designed to match eui, see https://eui.elastic.co/#/theming/colors/values#shades - * @public + * Primitive colors from EUI theme Borealis https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts + * @internal */ -export const DARK_BASE_COLORS: ChartBaseColors = { - emptyShade: '#1D1E24', - lightestShade: '#25262E', - lightShade: '#343741', - mediumShade: '#535966', - darkShade: '#98A2B3', - darkestShade: '#D4DAE5', - title: '#DFE5EF', -}; - -/** @internal */ export const PRIMITIVE_COLORS = { white: '#FFFFFF', blueBlack: '#07101F', @@ -69,7 +42,10 @@ export const PRIMITIVE_COLORS = { pink90: '#BC1E70', }; -/** @internal */ +/** + * Semantic colors from EUI theme Borealis https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts + * @internal + */ export const SEMANTIC_COLORS = { plainLight: PRIMITIVE_COLORS.white, plainDark: PRIMITIVE_COLORS.blueBlack, @@ -103,7 +79,11 @@ const primary100RGB = chroma(SEMANTIC_COLORS.primary100).rgb().join(' '); const plainLightRGB = chroma(SEMANTIC_COLORS.plainLight).rgb().join(' '); const shade145RGB = chroma(SEMANTIC_COLORS.shade145).rgb().join(' '); -/** @internal */ +/** + * Semantic colors from EUI theme Borealis https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts + * + * @internal + */ export const SEMANTIC_ALPHA_COLORS = { primary100Alpha4: `rgba(${primary100RGB} / 0.04)`, plainLightAlpha8: `rgba(${plainLightRGB} / 0.08)`, @@ -111,21 +91,30 @@ export const SEMANTIC_ALPHA_COLORS = { shade145Alpha70: `rgba(${shade145RGB} / 0.7)`, }; -/** @internal */ +/** + * Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts + * @internal + */ export const DARK_BORDER_COLORS = { borderBaseSubdued: SEMANTIC_COLORS.shade120, borderBasePlain: SEMANTIC_COLORS.shade100, borderBasePrimary: SEMANTIC_COLORS.primary120, }; -/** @internal */ +/** + * Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts + * @internal + */ export const LIGHT_BORDER_COLORS = { borderBaseSubdued: SEMANTIC_COLORS.shade20, borderBasePlain: SEMANTIC_COLORS.shade30, borderBasePrimary: SEMANTIC_COLORS.primary30, }; -/** @internal */ +/** + * Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts + * @internal + */ export const DARK_TEXT_COLORS = { textParagraph: SEMANTIC_COLORS.shade30, textHeading: SEMANTIC_COLORS.shade20, @@ -133,7 +122,11 @@ export const DARK_TEXT_COLORS = { textDisabled: SEMANTIC_COLORS.shade80, textInverse: SEMANTIC_COLORS.plainDark, }; -/** @internal */ + +/** + * Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts + * @internal + */ export const LIGHT_TEXT_COLORS = { textParagraph: SEMANTIC_COLORS.shade130, textHeading: SEMANTIC_COLORS.shade140, @@ -142,17 +135,10 @@ export const LIGHT_TEXT_COLORS = { textInverse: SEMANTIC_COLORS.plainLight, }; -/** @internal */ -export const LIGHT_BACKGROUND_COLORS = { - backgroundBasePlain: SEMANTIC_COLORS.plainLight, - backgroundBaseDisabled: SEMANTIC_COLORS.shade15, - backgroundBaseInteractiveHover: SEMANTIC_ALPHA_COLORS.primary100Alpha4, - backgroundFilledPrimary: SEMANTIC_COLORS.primary90, - backgroundFilledText: SEMANTIC_COLORS.shade60, - backgroundFilledAccent: SEMANTIC_COLORS.accent90, -}; - -/** @internal */ +/** + * Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts + * @internal + */ export const DARK_BACKGROUND_COLORS = { backgroundBasePlain: SEMANTIC_COLORS.shade145, backgroundBaseDisabled: SEMANTIC_COLORS.shade130, @@ -162,17 +148,39 @@ export const DARK_BACKGROUND_COLORS = { backgroundFilledAccent: SEMANTIC_COLORS.accent60, }; -/** @internal */ +/** + * Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts + * @internal + */ +export const LIGHT_BACKGROUND_COLORS = { + backgroundBasePlain: SEMANTIC_COLORS.plainLight, + backgroundBaseDisabled: SEMANTIC_COLORS.shade15, + backgroundBaseInteractiveHover: SEMANTIC_ALPHA_COLORS.primary100Alpha4, + backgroundFilledPrimary: SEMANTIC_COLORS.primary90, + backgroundFilledText: SEMANTIC_COLORS.shade60, + backgroundFilledAccent: SEMANTIC_COLORS.accent90, +}; + +/** + * Custom light colors specific for charts + * @internal + */ export const LIGHT_BACKGROUND_COLORS_CUSTOM = { backgroundBasePlainAlpha70: SEMANTIC_ALPHA_COLORS.plainLightAlpha70, }; -/** @internal */ +/** + * Custom dark colors specific for charts + * @internal + */ export const DARK_BACKGROUND_COLORS_CUSTOM = { backgroundBasePlainAlpha70: SEMANTIC_ALPHA_COLORS.shade145Alpha70, }; -/** @internal */ +/** + * Severity colors from EUI https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts + * @internal + */ export const SEVERITY_COLORS = { euiColorSeverity5: SEMANTIC_COLORS.shade30, euiColorSeverity7: SEMANTIC_COLORS.warning30, diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts index 431d643ccf..576102dfa4 100644 --- a/packages/charts/src/utils/themes/dark_theme.ts +++ b/packages/charts/src/utils/themes/dark_theme.ts @@ -7,7 +7,6 @@ */ import { - DARK_BASE_COLORS, DARK_TEXT_COLORS, DARK_BORDER_COLORS, DARK_BACKGROUND_COLORS, @@ -267,7 +266,7 @@ export const DARK_THEME: Theme = { majorLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: DARK_BASE_COLORS.title, + fill: '#DFE5EF', }, minorLabel: { fontStyle: 'normal', @@ -277,7 +276,7 @@ export const DARK_THEME: Theme = { majorCenterLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: DARK_BASE_COLORS.title, + fill: '#DFE5EF', }, minorCenterLabel: { fontStyle: 'normal', @@ -288,7 +287,7 @@ export const DARK_THEME: Theme = { stroke: '#D4DAE5', }, tickLine: { - stroke: DARK_BASE_COLORS.mediumShade, + stroke: '#535966', }, progressLine: { stroke: '#D4DAE5', @@ -456,7 +455,7 @@ export const DARK_THEME: Theme = { }, lineAnnotation: { line: { - stroke: DARK_BASE_COLORS.darkShade, + stroke: '#98A2B3', strokeWidth: 1, opacity: 1, }, @@ -464,7 +463,7 @@ export const DARK_THEME: Theme = { rectAnnotation: { strokeWidth: 0, opacity: 0.25, - fill: DARK_BASE_COLORS.darkShade, - stroke: DARK_BASE_COLORS.darkShade, + fill: '#98A2B3', + stroke: '#98A2B3', }, }; diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index 56cc585b8f..41e09ae00c 100644 --- a/packages/charts/src/utils/themes/light_theme.ts +++ b/packages/charts/src/utils/themes/light_theme.ts @@ -10,7 +10,6 @@ import { DARK_TEXT_COLORS, LIGHT_BACKGROUND_COLORS, LIGHT_BACKGROUND_COLORS_CUSTOM, - LIGHT_BASE_COLORS, LIGHT_BORDER_COLORS, LIGHT_TEXT_COLORS, } from './base_colors'; @@ -262,36 +261,36 @@ export const LIGHT_THEME: Theme = { tickLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, + fill: '#646a77', }, majorLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: LIGHT_BASE_COLORS.darkestShade, + fill: '#343741', }, minorLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, + fill: '#646a77', }, majorCenterLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: LIGHT_BASE_COLORS.darkestShade, + fill: '#343741', }, minorCenterLabel: { fontStyle: 'normal', fontFamily: DEFAULT_FONT_FAMILY, - fill: '#646a77', // LIGHT_BASE_COLORS.darkShade, + fill: '#646a77', }, targetLine: { - stroke: LIGHT_BASE_COLORS.darkestShade, + stroke: '#343741', }, tickLine: { - stroke: LIGHT_BASE_COLORS.mediumShade, + stroke: '#98A2B3', }, progressLine: { - stroke: LIGHT_BASE_COLORS.darkestShade, + stroke: '#343741', }, }, partition: { @@ -455,7 +454,7 @@ export const LIGHT_THEME: Theme = { }, lineAnnotation: { line: { - stroke: LIGHT_BASE_COLORS.darkShade, + stroke: '#69707D', strokeWidth: 1, opacity: 1, }, @@ -463,7 +462,7 @@ export const LIGHT_THEME: Theme = { rectAnnotation: { strokeWidth: 0, opacity: 0.25, - fill: LIGHT_BASE_COLORS.darkShade, - stroke: LIGHT_BASE_COLORS.darkShade, + fill: '#69707D', + stroke: '#69707D', }, }; diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts index 7adbde0436..8aabb593ea 100644 --- a/packages/charts/src/utils/themes/theme.ts +++ b/packages/charts/src/utils/themes/theme.ts @@ -18,20 +18,6 @@ import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment import { Margins, Padding, SimplePadding } from '../dimensions'; import { Point } from '../point'; -/** - * Base color definitions - theme-specific - * @public - */ -export interface ChartBaseColors { - emptyShade: string; - lightShade: string; - lightestShade: string; - mediumShade: string; - darkShade: string; - darkestShade: string; - title: string; -} - /** @public */ export interface Visible { visible: boolean;