chore: merge legacy theme with eui, update configs

elastic · Oct 6, 2023 · 95d1297 · 95d1297
1 parent 9310366
commit 95d1297
Show file tree

Hide file tree

Showing 14 changed files with 1,116 additions and 183 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -46,10 +46,9 @@
 <!-- Delete any items that are not applicable to this PR. -->
 - [ ] The proper **chart type** label has been added (e.g. `:xy`, `:partition`)
 - [ ] The proper **feature** labels have been added (e.g. `:interactions`, `:axis`)
-- [ ] The `:theme` label has been added and the `@elastic/eui-team` team has been pinged when there are `Theme` API changes
 - [ ] All related issues have been linked (i.e. `closes #123`, `fixes #123`)
 - [ ] New public API exports have been added to `packages/charts/src/index.ts`
 - [ ] Unit tests have been added or updated to match the most common scenarios
 - [ ] The proper documentation and/or storybook story has been added or updated
 - [ ] The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
-- [ ] Visual changes have been tested with all available themes including `dark`, `light`, `eui-dark` & `eui-light`
+- [ ] Visual changes have been tested with `light` and `dark` themes
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
@@ -122,7 +122,7 @@ interface EachThemeCbParams {
   urlParam: string;
 }
 
-export const themeIds = ['light', 'dark', 'eui-light', 'eui-dark'];
+export const themeIds = ['light', 'dark'];
 
 /**
  * This is a wrapper around it.each for Themes

diff --git a/e2e_server/server/mocks/use_global_parameters.ts b/e2e_server/server/mocks/use_global_parameters.ts
@@ -52,7 +52,7 @@ interface GlobalParameters {
 }
 
 export function useGlobalsParameters(): GlobalParameters {
-  const [themeId, setThemeId] = useState<string>(ThemeId.EUILight);
+  const [themeId, setThemeId] = useState<string>(ThemeId.Light);
   const [backgroundId, setBackgroundId] = useState<string | undefined>('white');
   const [togglesJSON, setTogglesJSON] = useState<string>('{}');
 
@@ -63,7 +63,7 @@ export function useGlobalsParameters(): GlobalParameters {
     const globals = getGlobalParams(params);
     const backgroundIdFromParams = globals.background ?? parameters?.background?.default ?? backgroundParams.default;
     setBackgroundId(backgroundIdFromParams);
-    const themeIdFromParams = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.EUILight;
+    const themeIdFromParams = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.Light;
     setThemeId(themeIdFromParams);
     setTogglesJSON(JSON.stringify(globals.toggles ?? '{}'));
     applyThemeCSS(themeIdFromParams);

diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -1579,6 +1579,12 @@ export const LayoutDirection: Readonly<{
 // @public (undocumented)
 export type LayoutDirection = $Values<typeof LayoutDirection>;
 
+// @public @deprecated
+export const LEGACY_DARK_THEME: Theme;
+
+// @public @deprecated
+export const LEGACY_LIGHT_THEME: Theme;
+
 // @public
 export interface LegacyAnimationConfig {
     // @alpha (undocumented)

diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
@@ -75,6 +75,8 @@ export * from './utils/themes/theme';
 export * from './utils/themes/theme_common';
 export { LIGHT_THEME } from './utils/themes/light_theme';
 export { DARK_THEME } from './utils/themes/dark_theme';
+export { LEGACY_LIGHT_THEME } from './utils/themes/legacy_light_theme';
+export { LEGACY_DARK_THEME } from './utils/themes/legacy_dark_theme';
 
 // wordcloud
 export { WordcloudViewModel } from './chart_types/wordcloud/layout/types/viewmodel_types';

diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
@@ -8,14 +8,10 @@
 
 import { palettes } from './colors';
 import { Theme } from './theme';
-import {
-  DEFAULT_CHART_MARGINS,
-  DEFAULT_CHART_PADDING,
-  DEFAULT_GEOMETRY_STYLES,
-  DEFAULT_MISSING_COLOR,
-} from './theme_common';
+import { DEFAULT_CHART_MARGINS, DEFAULT_CHART_PADDING, DEFAULT_GEOMETRY_STYLES } from './theme_common';
 import { Colors } from '../../common/colors';
-import { GOLDEN_RATIO, TAU } from '../../common/constants';
+import { TAU } from '../../common/constants';
+import { DEFAULT_FONT_FAMILY } from '../../common/default_theme_attributes';
 import { ColorVariant } from '../common';
 
 /** @public */
@@ -25,15 +21,15 @@ export const DARK_THEME: Theme = {
   lineSeriesStyle: {
     line: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1,
     },
     point: {
       visible: true,
       stroke: ColorVariant.Series,
-      strokeWidth: 1,
-      fill: Colors.Black.keyword,
-      radius: 2,
+      strokeWidth: 2,
+      fill: '#1D1E24',
+      radius: 3,
       opacity: 1,
     },
     isolatedPoint: {
@@ -69,15 +65,15 @@ export const DARK_THEME: Theme = {
     },
     line: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1,
     },
     point: {
       visible: false,
       stroke: ColorVariant.Series,
-      strokeWidth: 1,
-      fill: Colors.Black.keyword,
-      radius: 2,
+      strokeWidth: 2,
+      fill: '#1D1E24',
+      radius: 3,
       opacity: 1,
     },
     isolatedPoint: {
@@ -111,11 +107,12 @@ export const DARK_THEME: Theme = {
       strokeWidth: 1,
     },
     displayValue: {
-      fontSize: 8,
+      fontSize: 10,
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      alignment: { horizontal: 'center', vertical: 'middle' },
       padding: 0,
-      fill: '#999',
+      fill: { textBorder: 0 },
       offsetX: 0,
       offsetY: 0,
     },
@@ -136,17 +133,17 @@ export const DARK_THEME: Theme = {
   axes: {
     axisTitle: {
       fontSize: 12,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       padding: {
-        inner: 8,
+        inner: 10,
         outer: 0,
       },
-      fill: '#D4D4D4',
+      fill: '#DFE5EF',
       visible: true,
     },
     axisPanelTitle: {
       fontSize: 10,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       padding: {
         inner: 8,
         outer: 0,
@@ -156,16 +153,16 @@ export const DARK_THEME: Theme = {
     },
     axisLine: {
       visible: true,
-      stroke: '#444',
+      stroke: '#343741',
       strokeWidth: 1,
     },
     tickLabel: {
       visible: true,
       fontSize: 10,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
-      fill: '#999',
-      padding: 0,
+      fill: '#81858f',
+      padding: { outer: 8, inner: 10 },
       rotation: 0,
       offset: {
         x: 0,
@@ -178,33 +175,33 @@ export const DARK_THEME: Theme = {
       },
     },
     tickLine: {
-      visible: true,
-      stroke: '#444',
+      visible: false,
+      stroke: '#343741',
       strokeWidth: 1,
       size: 10,
       padding: 10,
     },
     gridLine: {
       horizontal: {
-        visible: false,
-        stroke: '#D3DAE6',
+        visible: true,
+        stroke: '#343741',
         strokeWidth: 1,
         opacity: 1,
         dash: [0, 0],
       },
       vertical: {
-        visible: false,
-        stroke: '#D3DAE6',
+        visible: true,
+        stroke: '#343741',
         strokeWidth: 1,
         opacity: 1,
-        dash: [0, 0],
+        dash: [4, 4],
       },
       lumaSteps: [63, 103, 159, 191, 223, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
     },
   },
   colors: {
     vizColors: palettes.echPaletteColorBlind.colors,
-    defaultVizColor: DEFAULT_MISSING_COLOR,
+    defaultVizColor: '#6092C0',
   },
   legend: {
     verticalWidth: 200,
@@ -217,24 +214,25 @@ export const DARK_THEME: Theme = {
   },
   crosshair: {
     band: {
-      fill: '#2A2A2A',
       visible: true,
+      fill: '#2a2b33',
     },
     line: {
-      stroke: '#999',
-      strokeWidth: 1,
       visible: true,
+      stroke: '#98A2B3',
+      strokeWidth: 1,
+      dash: [4, 4],
     },
     crossLine: {
-      stroke: '#999',
-      strokeWidth: 1,
-      dash: [5, 5],
       visible: true,
+      stroke: '#98A2B3',
+      strokeWidth: 1,
+      dash: [4, 4],
     },
   },
   background: {
-    color: 'transparent',
-    fallbackColor: Colors.Black.keyword,
+    color: '#1D1E24',
+    fallbackColor: '#1D1E24',
   },
   goal: {
     minFontSize: 8,
@@ -252,48 +250,48 @@ export const DARK_THEME: Theme = {
     capturePad: 16,
     tickLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#81858f',
     },
     majorLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#DFE5EF',
     },
     minorLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#81858f',
     },
     majorCenterLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#DFE5EF',
     },
     minorCenterLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#81858f',
     },
     targetLine: {
-      stroke: 'white',
+      stroke: '#D4DAE5',
     },
     tickLine: {
-      stroke: 'snow',
+      stroke: '#535966',
     },
     progressLine: {
-      stroke: 'white',
+      stroke: '#D4DAE5',
     },
   },
   partition: {
-    outerSizeRatio: 1 / GOLDEN_RATIO,
+    outerSizeRatio: 1,
     emptySizeRatio: 0,
-    fontFamily: 'Sans-Serif',
+    fontFamily: DEFAULT_FONT_FAMILY,
     minFontSize: 8,
     maxFontSize: 64,
     idealFontSizeJump: 1.05,
     maximizeFontSize: false,
-    circlePadding: 2,
+    circlePadding: 4,
     radialPadding: TAU / 360,
     horizontalTextAngleThreshold: TAU / 12,
     horizontalTextEnforcer: 1,
@@ -304,7 +302,7 @@ export const DARK_THEME: Theme = {
       fontVariant: 'normal',
       fontWeight: 400,
       valueFont: {
-        fontWeight: 400,
+        fontWeight: 700,
         fontStyle: 'normal',
         fontVariant: 'normal',
       },
@@ -314,7 +312,7 @@ export const DARK_THEME: Theme = {
     linkLabel: {
       maximumSection: 10,
       fontFamily: 'Sans-Serif',
-      fontSize: 12,
+      fontSize: 11,
       fontStyle: 'normal',
       fontVariant: 'normal',
       fontWeight: 400,
@@ -323,9 +321,9 @@ export const DARK_THEME: Theme = {
       horizontalStemLength: 10,
       radiusPadding: 10,
       lineWidth: 1,
-      maxCount: 36,
+      maxCount: 5,
       maxTextLength: 100,
-      textColor: ColorVariant.Adaptive,
+      textColor: '#DFE5EF',
       minimumStemLength: 0,
       stemAngle: TAU / 8,
       padding: 0,
@@ -335,8 +333,8 @@ export const DARK_THEME: Theme = {
         fontVariant: 'normal',
       },
     },
-    sectorLineWidth: 1,
-    sectorLineStroke: Colors.Black.keyword,
+    sectorLineWidth: 1.5,
+    sectorLineStroke: '#1D1E24',
   },
   heatmap: {
     brushArea: {
@@ -356,7 +354,7 @@ export const DARK_THEME: Theme = {
     xAxisLabel: {
       visible: true,
       fontSize: 12,
-      fontFamily: 'Sans-Serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
       textColor: Colors.White.keyword,
       fontVariant: 'normal',
@@ -368,7 +366,7 @@ export const DARK_THEME: Theme = {
       visible: true,
       width: 'auto',
       fontSize: 12,
-      fontFamily: 'Sans-Serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
       textColor: Colors.White.keyword,
       fontVariant: 'normal',
@@ -390,7 +388,7 @@ export const DARK_THEME: Theme = {
         maxWidth: 'fill',
         minFontSize: 8,
         maxFontSize: 12,
-        fontFamily: 'Sans-Serif',
+        fontFamily: DEFAULT_FONT_FAMILY,
         fontStyle: 'normal',
         textColor: Colors.White.keyword,
         fontVariant: 'normal',