elastic · mgadewoll · Jun 23, 2025 · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025
@@ -0,0 +1,29 @@
+- Added data vis text color tokens:
+  - `colors.vis.euiColorVisText0`
+  - `colors.vis.euiColorVisText1`
+  - `colors.vis.euiColorVisText2`
+  - `colors.vis.euiColorVisText3`
+  - `colors.vis.euiColorVisText4`
+  - `colors.vis.euiColorVisText5`
+  - `colors.vis.euiColorVisText6`
+  - `colors.vis.euiColorVisText7`
+  - `colors.vis.euiColorVisText8`
+  - `colors.vis.euiColorVisText9`
+
+**Breaking changes**
+
+- Removed tokens:
+  - `colors.vis.euiColorVisAsTextLight1`
+  - `colors.vis.euiColorVisAsTextLight0`
+  - `colors.vis.euiColorVisAsTextLight2`
+  - `colors.vis.euiColorVisAsTextLight3`
+  - `colors.vis.euiColorVisAsTextLight4`
+  - `colors.vis.euiColorVisAsTextLight5`
+  - `colors.vis.euiColorVisAsTextLight6`
+  - `colors.vis.euiColorVisAsTextDark1`
+  - `colors.vis.euiColorVisAsTextDark0`
+  - `colors.vis.euiColorVisAsTextDark2`
+  - `colors.vis.euiColorVisAsTextDark3`
+  - `colors.vis.euiColorVisAsTextDark4`
+  - `colors.vis.euiColorVisAsTextDark5`
+  - `colors.vis.euiColorVisAsTextDark6`
@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#FFC9C2",
   "euiColorVis8_behindText": "#EAAE01",
   "euiColorVis9_behindText": "#FCD883",
-  "euiColorVisAsTextLight0": "#047471",
-  "euiColorVisAsTextLight1": "#1750BA",
-  "euiColorVisAsTextLight2": "#A11262",
-  "euiColorVisAsTextLight3": "#A71627",
-  "euiColorVisAsTextLight4": "#825803",
-  "euiColorVisAsTextLight5": "#09724D",
-  "euiColorVisAsTextLight6": "#6B3C9F",
-  "euiColorVisAsTextDark0": "#16C5C0",
-  "euiColorVisAsTextDark1": "#61A2FF",
-  "euiColorVisAsTextDark2": "#EE72A6",
-  "euiColorVisAsTextDark3": "#F6726A",
-  "euiColorVisAsTextDark4": "#EAAE01",
-  "euiColorVisAsTextDark5": "#24C292",
-  "euiColorVisAsTextDark6": "#B084F5",
+  "euiColorVisText0": "#16C5C0",
+  "euiColorVisText1": "#A6EDEA",
+  "euiColorVisText2": "#61A2FF",
+  "euiColorVisText3": "#BFDBFF",
+  "euiColorVisText4": "#EE72A6",
+  "euiColorVisText5": "#FFC7DB",
+  "euiColorVisText6": "#F6726A",
+  "euiColorVisText7": "#FFC9C2",
+  "euiColorVisText8": "#EAAE01",
+  "euiColorVisText9": "#FCD883",
   "euiColorVisSuccess0": "#24C292",
   "euiColorVisSuccess1": "#AEE8D2",
   "euiColorVisWarning0": "#FCD883",

@@ -283,20 +283,16 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorVis7_behindText: string;
     euiColorVis8_behindText: string;
     euiColorVis9_behindText: string;
-    euiColorVisAsTextLight0: string;
-    euiColorVisAsTextLight1: string;
-    euiColorVisAsTextLight2: string;
-    euiColorVisAsTextLight3: string;
-    euiColorVisAsTextLight4: string;
-    euiColorVisAsTextLight5: string;
-    euiColorVisAsTextLight6: string;
-    euiColorVisAsTextDark0: string;
-    euiColorVisAsTextDark1: string;
-    euiColorVisAsTextDark2: string;
-    euiColorVisAsTextDark3: string;
-    euiColorVisAsTextDark4: string;
-    euiColorVisAsTextDark5: string;
-    euiColorVisAsTextDark6: string;
+    euiColorVisText0: string;
+    euiColorVisText1: string;
+    euiColorVisText2: string;
+    euiColorVisText3: string;
+    euiColorVisText4: string;
+    euiColorVisText5: string;
+    euiColorVisText6: string;
+    euiColorVisText7: string;
+    euiColorVisText8: string;
+    euiColorVisText9: string;
     euiColorVisSuccess0: string;
     euiColorVisSuccess1: string;
     euiColorVisWarning0: string;

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#FFC9C2",
   "euiColorVis8_behindText": "#EAAE01",
   "euiColorVis9_behindText": "#FCD883",
-  "euiColorVisAsTextLight0": "#047471",
-  "euiColorVisAsTextLight1": "#1750BA",
-  "euiColorVisAsTextLight2": "#A11262",
-  "euiColorVisAsTextLight3": "#A71627",
-  "euiColorVisAsTextLight4": "#825803",
-  "euiColorVisAsTextLight5": "#09724D",
-  "euiColorVisAsTextLight6": "#6B3C9F",
-  "euiColorVisAsTextDark0": "#16C5C0",
-  "euiColorVisAsTextDark1": "#61A2FF",
-  "euiColorVisAsTextDark2": "#EE72A6",
-  "euiColorVisAsTextDark3": "#F6726A",
-  "euiColorVisAsTextDark4": "#EAAE01",
-  "euiColorVisAsTextDark5": "#24C292",
-  "euiColorVisAsTextDark6": "#B084F5",
+  "euiColorVisText0": "#065B58",
+  "euiColorVisText1": "#047471",
+  "euiColorVisText2": "#154399",
+  "euiColorVisText3": "#0B64DD",
+  "euiColorVisText4": "#A11262",
+  "euiColorVisText5": "#D13680",
+  "euiColorVisText6": "#A71627",
+  "euiColorVisText7": "#DA3737",
+  "euiColorVisText8": "#6A4906",
+  "euiColorVisText9": "#966B03",
   "euiColorVisSuccess0": "#24C292",
   "euiColorVisSuccess1": "#AEE8D2",
   "euiColorVisWarning0": "#FCD883",

@@ -283,20 +283,16 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorVis7_behindText: string;
     euiColorVis8_behindText: string;
     euiColorVis9_behindText: string;
-    euiColorVisAsTextLight0: string;
-    euiColorVisAsTextLight1: string;
-    euiColorVisAsTextLight2: string;
-    euiColorVisAsTextLight3: string;
-    euiColorVisAsTextLight4: string;
-    euiColorVisAsTextLight5: string;
-    euiColorVisAsTextLight6: string;
-    euiColorVisAsTextDark0: string;
-    euiColorVisAsTextDark1: string;
-    euiColorVisAsTextDark2: string;
-    euiColorVisAsTextDark3: string;
-    euiColorVisAsTextDark4: string;
-    euiColorVisAsTextDark5: string;
-    euiColorVisAsTextDark6: string;
+    euiColorVisText0: string;
+    euiColorVisText1: string;
+    euiColorVisText2: string;
+    euiColorVisText3: string;
+    euiColorVisText4: string;
+    euiColorVisText5: string;
+    euiColorVisText6: string;
+    euiColorVisText7: string;
+    euiColorVisText8: string;
+    euiColorVisText9: string;
     euiColorVisSuccess0: string;
     euiColorVisSuccess1: string;
     euiColorVisWarning0: string;

@@ -19,7 +19,10 @@ import { focus } from './variables/_states';
 import { components } from './variables/_components';
 import { overrides } from './variables/_overrides';
 
-export { colorVis } from './variables/colors/_colors_vis';
+import { colorVisLight } from './variables/colors/_colors_vis_light';
+import { colorVisDark } from './variables/colors/_colors_vis_dark';
+
+export { colorVisLight as colorVis, colorVisLight, colorVisDark };
 
 export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
 

@@ -1,5 +1,6 @@
 
 // color mode specific variables
+@import './variables/colors/colors_vis_dark';
 @import './variables/colors/colors_dark';
 
 

@@ -1,4 +1,5 @@
 // color mode specific variables
+@import './variables/colors/colors_vis_light';
 @import './variables/colors/colors_light';
 
 

@@ -18,7 +18,6 @@ import {
   dark_border_colors,
 } from './colors/_colors_dark';
 import { border_colors } from './colors/_colors_light';
-import { colorVis } from './colors/_colors_vis';
 import { buttons } from './_buttons';
 import { forms } from './_forms';
 
@@ -74,31 +73,32 @@ const component_colors: _EuiThemeComponentColors = {
     ([textParagraph]) => textParagraph,
     ['colors.textParagraph']
   ),
-  codeInlineColor: colorVis.euiColorVisAsTextLight6,
+  codeInlineColor: SEMANTIC_COLORS.assistance100,
   codeCommentColor: computed(
     ([textSubdued]) => textSubdued,
     ['colors.textSubdued']
   ),
+
   codeSelectorColor: 'inherit',
-  codeStringColor: colorVis.euiColorVisAsTextLight2,
-  codeTagColor: colorVis.euiColorVisAsTextLight1,
-  codeNameColor: colorVis.euiColorVisAsTextLight1,
-  codeNumberColor: colorVis.euiColorVisAsTextLight0,
-  codeInlineCodeKeywordColor: colorVis.euiColorVisAsTextLight6,
-  codeKeywordColor: colorVis.euiColorVisAsTextLight1,
+  codeStringColor: SEMANTIC_COLORS.accent100,
+  codeTagColor: SEMANTIC_COLORS.primary100,
+  codeNameColor: SEMANTIC_COLORS.primary100,
+  codeNumberColor: SEMANTIC_COLORS.accentSecondary100,
+  codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance100,
+  codeKeywordColor: SEMANTIC_COLORS.primary100,
   codeFunctionTitleColor: 'inherit',
-  codeTypeColor: colorVis.euiColorVisAsTextLight1,
+  codeTypeColor: SEMANTIC_COLORS.primary100,
   codeAttributeColor: 'inherit',
-  codeSymbolColor: colorVis.euiColorVisAsTextLight3,
+  codeSymbolColor: SEMANTIC_COLORS.danger100,
   codeParamsColor: 'inherit',
   codeMetaColor: computed(
     ([textSubdued]) => textSubdued,
     ['colors.textSubdued']
   ),
-  codeTitleColor: colorVis.euiColorVisAsTextLight4,
-  codeSectionColor: colorVis.euiColorVisAsTextLight3,
-  codeAdditionColor: colorVis.euiColorVisAsTextLight0,
-  codeDeletionColor: colorVis.euiColorVisAsTextLight3,
+  codeTitleColor: SEMANTIC_COLORS.warning100,
+  codeSectionColor: SEMANTIC_COLORS.danger100,
+  codeAdditionColor: SEMANTIC_COLORS.accentSecondary100,
+  codeDeletionColor: SEMANTIC_COLORS.danger100,
   codeSelectorClassColor: 'inherit',
   codeSelectorIdColor: 'inherit',
 
@@ -331,18 +331,19 @@ export const components: _EuiThemeComponents = {
 
     buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,
 
-    codeInlineColor: colorVis.euiColorVisAsTextDark6,
-    codeStringColor: colorVis.euiColorVisAsTextDark2,
-    codeTagColor: colorVis.euiColorVisAsTextDark1,
-    codeNameColor: colorVis.euiColorVisAsTextDark1,
-    codeNumberColor: colorVis.euiColorVisAsTextDark0,
-    codeKeywordColor: colorVis.euiColorVisAsTextDark6,
-    codeTypeColor: colorVis.euiColorVisAsTextDark1,
-    codeSymbolColor: colorVis.euiColorVisAsTextDark3,
-    codeTitleColor: colorVis.euiColorVisAsTextDark4,
-    codeSectionColor: colorVis.euiColorVisAsTextDark3,
-    codeAdditionColor: colorVis.euiColorVisAsTextDark0,
-    codeDeletionColor: colorVis.euiColorVisAsTextDark3,
+    codeInlineColor: SEMANTIC_COLORS.assistance60,
+    codeStringColor: SEMANTIC_COLORS.accent60,
+    codeTagColor: SEMANTIC_COLORS.primary60,
+    codeNameColor: SEMANTIC_COLORS.primary60,
+    codeNumberColor: SEMANTIC_COLORS.accentSecondary60,
+    codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance60,
+    codeKeywordColor: SEMANTIC_COLORS.assistance60,
+    codeTypeColor: SEMANTIC_COLORS.primary60,
+    codeSymbolColor: SEMANTIC_COLORS.danger60,
+    codeTitleColor: SEMANTIC_COLORS.warning60,
+    codeSectionColor: SEMANTIC_COLORS.danger60,
+    codeAdditionColor: SEMANTIC_COLORS.accentSecondary60,
+    codeDeletionColor: SEMANTIC_COLORS.danger60,
 
     filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade105,
 

@@ -9,7 +9,6 @@
 @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index';
 @import 'states';
 
-@import './colors/colors_vis';
 @import './colors/colors_severity';
 @import 'form';
 @import 'page';

@@ -6,44 +6,44 @@
 // The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
 $euiPaletteColorBlind: (
   euiColorVis0: (
-    graphic: #00BEB8,
-    behindText: #00BEB8,
+    graphic: #16C5C0,
+    behindText: #16C5C0,
   ),
   euiColorVis1: (
-    graphic: #93E5E0,
-    behindText: #93E5E0,
+    graphic: #A6EDEA,
+    behindText: #A6EDEA,
   ),
   euiColorVis2: (
-    graphic: #599DFF,
-    behindText: #599DFF,
+    graphic: #61A2FF,
+    behindText: #61A2FF,
   ),
   euiColorVis3: (
-    graphic: #B4D5FF,
-    behindText: #B4D5FF,
+    graphic: #BFDBFF,
+    behindText: #BFDBFF,
   ),
   euiColorVis4: (
     graphic: #ED6BA2,
-    behindText: #ED6BA2,
+    behindText: #EE72A6,
   ),
   euiColorVis5: (
-    graphic: #FFBED5,
-    behindText: #FFBED5,
+    graphic: #FFC7DB,
+    behindText: #FFC7DB,
   ),
   euiColorVis6: (
-    graphic: #F66D64,
-    behindText: #F66D64,
+    graphic: #F6726A,
+    behindText: #F6726A,
   ),
   euiColorVis7: (
-    graphic: #FFC0B8,
+    graphic: #FFC9C2,
     behindText: #FFC0B8,
   ),
   euiColorVis8: (
-    graphic: #ED9E00,
-    behindText: #ED9E00,
+    graphic: #EAAE01,
+    behindText: #EAAE01,
   ),
   euiColorVis9: (
-    graphic: #FFD569,
-    behindText: #FFD569,
+    graphic: #FCD883,
+    behindText: #FCD883,
   )
 ) !default;
 

@@ -0,0 +1,14 @@
+// stylelint-disable color-no-hex
+
+@import './colors_vis';
+
+$euiColorVisText0: #16C5C0 !default;
+$euiColorVisText1: #A6EDEA !default;
+$euiColorVisText2: #61A2FF !default;
+$euiColorVisText3: #BFDBFF !default;
+$euiColorVisText4: #EE72A6 !default;
+$euiColorVisText5: #FFC7DB !default;
+$euiColorVisText6: #F6726A !default;
+$euiColorVisText7: #FFC9C2 !default;
+$euiColorVisText8: #EAAE01 !default;
+$euiColorVisText9: #FCD883 !default;
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
+
+import { SEMANTIC_COLORS } from './_semantic_colors';
+import { colorVisLight } from './_colors_vis_light';
+
+export const colorVisDark: _EuiThemeVisColors = {
+  ...colorVisLight,
+
+  euiColorVisText0: SEMANTIC_COLORS.accentSecondary60,
+  euiColorVisText1: SEMANTIC_COLORS.accentSecondary30,
+  euiColorVisText2: SEMANTIC_COLORS.primary60,
+  euiColorVisText3: SEMANTIC_COLORS.primary30,
+  euiColorVisText4: SEMANTIC_COLORS.accent60,
+  euiColorVisText5: SEMANTIC_COLORS.accent30,
+  euiColorVisText6: SEMANTIC_COLORS.danger60,
+  euiColorVisText7: SEMANTIC_COLORS.danger30,
+  euiColorVisText8: SEMANTIC_COLORS.warning60,
+  euiColorVisText9: SEMANTIC_COLORS.warning30,
+};
@@ -0,0 +1,14 @@
+// stylelint-disable color-no-hex
+
+@import './colors_vis';
+
+$euiColorVisText0: #065B58 !default;
+$euiColorVisText1: #047471 !default;
+$euiColorVisText2: #154399 !default;
+$euiColorVisText3: #0B64DD !default;
+$euiColorVisText4: #A11262 !default;
+$euiColorVisText5: #D13680 !default;
+$euiColorVisText6: #A71627 !default;
+$euiColorVisText7: #DA3737 !default;
+$euiColorVisText8: #6A4906 !default;
+$euiColorVisText9: #966B03 !default;