[Visual Refresh] Add behindText vis color tokens (#8253)

elastic · Jan 7, 2025 · 7c21c6e · 7c21c6e
1 parent 31f3739
commit 7c21c6e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts
@@ -59,6 +59,17 @@ export const colorVis: _EuiThemeVisColors = {
   euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
   euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic,
 
+  euiColorVisBehindText0: euiPaletteColorBlind.euiColorVis0.graphic,
+  euiColorVisBehindText1: euiPaletteColorBlind.euiColorVis1.graphic,
+  euiColorVisBehindText2: euiPaletteColorBlind.euiColorVis2.graphic,
+  euiColorVisBehindText3: euiPaletteColorBlind.euiColorVis3.graphic,
+  euiColorVisBehindText4: euiPaletteColorBlind.euiColorVis4.graphic,
+  euiColorVisBehindText5: euiPaletteColorBlind.euiColorVis5.graphic,
+  euiColorVisBehindText6: euiPaletteColorBlind.euiColorVis6.graphic,
+  euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.graphic,
+  euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic,
+  euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic,
+
   euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
   euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100,
   euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100,

diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts
@@ -266,6 +266,27 @@ export type _EuiThemeVisColors = {
   euiColorVis8: string;
   euiColorVis9: string;
 
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText0: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText1: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText2: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText3: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText4: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText5: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText6: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText7: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText8: string;
+  /** @deprecated - temp token; used only during theme migration */
+  euiColorVisBehindText9: string;
+
   euiColorVisAsTextLight0: string;
   euiColorVisAsTextLight1: string;
   euiColorVisAsTextLight2: string;

diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis.ts
@@ -20,33 +20,43 @@ import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
 const euiPaletteColorBlind = {
   euiColorVis0: {
     graphic: '#54B399',
+    behindText: '#6DCCB1',
   },
   euiColorVis1: {
     graphic: '#6092C0',
+    behindText: '#79AAD9',
   },
   euiColorVis2: {
     graphic: '#D36086',
+    behindText: '#EE789D',
   },
   euiColorVis3: {
     graphic: '#9170B8',
+    behindText: '#A987D1',
   },
   euiColorVis4: {
     graphic: '#CA8EAE',
+    behindText: '#E4A6C7',
   },
   euiColorVis5: {
     graphic: '#D6BF57',
+    behindText: '#F1D86F',
   },
   euiColorVis6: {
     graphic: '#B9A888',
+    behindText: '#D2C0A0',
   },
   euiColorVis7: {
     graphic: '#DA8B45',
+    behindText: '#F5A35C',
   },
   euiColorVis8: {
     graphic: '#AA6556',
+    behindText: '#C47C6C',
   },
   euiColorVis9: {
     graphic: '#E7664C',
+    behindText: '#FF7E62',
   },
 };
 
@@ -62,6 +72,21 @@ export const colorVis: _EuiThemeVisColors = {
   euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
   euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic,
 
+  /**
+   * behindText variables are temp tokens; used only during theme migration.
+   * TODO: remove once Amsterdam is fully migrated
+   */
+  euiColorVisBehindText0: euiPaletteColorBlind.euiColorVis0.behindText,
+  euiColorVisBehindText1: euiPaletteColorBlind.euiColorVis1.behindText,
+  euiColorVisBehindText2: euiPaletteColorBlind.euiColorVis2.behindText,
+  euiColorVisBehindText3: euiPaletteColorBlind.euiColorVis3.behindText,
+  euiColorVisBehindText4: euiPaletteColorBlind.euiColorVis4.behindText,
+  euiColorVisBehindText5: euiPaletteColorBlind.euiColorVis5.behindText,
+  euiColorVisBehindText6: euiPaletteColorBlind.euiColorVis6.behindText,
+  euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.behindText,
+  euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.behindText,
+  euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.behindText,
+
   euiColorVisAsTextLight0: '#006BB4',
   euiColorVisAsTextLight1: '#017D73',
   euiColorVisAsTextLight2: '#F5A700',