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

@@ -638,24 +638,6 @@ export class Chart extends React_2.Component<ChartProps, ChartState> {
     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<D extends BaseDatum = Datum, SI extends Seri
 // @public (undocumented)
 export type CustomXDomain = (DomainRange & Pick<LogScaleOptions, 'logBase'>) | 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<typeof LegendValue>;
 
-// @public
-export const LIGHT_BASE_COLORS: ChartBaseColors;
-
 // @public (undocumented)
 export const LIGHT_THEME: Theme;
 

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';
 

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,37 +79,54 @@ 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)`,
   plainLightAlpha70: `rgba(${plainLightRGB} / 0.7)`,
   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,
   textSubdued: SEMANTIC_COLORS.shade60,
   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,

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,15 +455,15 @@ export const DARK_THEME: Theme = {
   },
   lineAnnotation: {
     line: {
-      stroke: DARK_BASE_COLORS.darkShade,
+      stroke: '#98A2B3',
       strokeWidth: 1,
       opacity: 1,
     },
   },
   rectAnnotation: {
     strokeWidth: 0,
     opacity: 0.25,
-    fill: DARK_BASE_COLORS.darkShade,
-    stroke: DARK_BASE_COLORS.darkShade,
+    fill: '#98A2B3',
+    stroke: '#98A2B3',
   },
 };

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,15 +454,15 @@ export const LIGHT_THEME: Theme = {
   },
   lineAnnotation: {
     line: {
-      stroke: LIGHT_BASE_COLORS.darkShade,
+      stroke: '#69707D',
       strokeWidth: 1,
       opacity: 1,
     },
   },
   rectAnnotation: {
     strokeWidth: 0,
     opacity: 0.25,
-    fill: LIGHT_BASE_COLORS.darkShade,
-    stroke: LIGHT_BASE_COLORS.darkShade,
+    fill: '#69707D',
+    stroke: '#69707D',
   },
 };

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;