elastic · weronikaolejniczak · Feb 13, 2026
@@ -99,7 +99,7 @@ export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables
     }),
     logoMarkCss: css({
       marginLeft: euiTheme.size.s,
-      fill: euiTheme.colors.ghost,
+      fill: euiTheme.colors.plainLight,
     }),
   };
 

@@ -81,7 +81,7 @@ const getHighlightedMessage = (
     // Use EUI's makeHighContrastColor utility to calculate appropriate text color
     // This function automatically determines the best contrasting color based on WCAG standards
     const textColor = makeHighContrastColor(
-      isDarkTheme ? euiTheme.colors.ghost : euiTheme.colors.ink, // preferred foreground color
+      isDarkTheme ? euiTheme.colors.textGhost : euiTheme.colors.textInk, // preferred foreground color
       4.5 // WCAG AA contrast ratio (default in EUI)
     )(bgColor);
 

@@ -20,7 +20,7 @@ import { layoutVar } from '@kbn/core-chrome-layout-constants';
 export const useEmbeddableConsoleStyleVariables = () => {
   const { euiTheme } = useEuiTheme();
   const isDark = useIsDarkMode();
-  const background = isDark ? euiTheme.colors.ink : euiTheme.colors.darkestShade;
+  const background = isDark ? euiTheme.colors.plainDark : euiTheme.colors.darkestShade;
   const baseTextColor = makeHighContrastColor(euiTheme.colors.lightestShade)(background);
   const text = tint(baseTextColor, 0.2);
 

@@ -17,7 +17,7 @@
     opacity: 0;
     transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
     transition-delay: $euiAnimSpeedNormal;
-    background: transparentize($euiColorGhost, .5);
+    background: transparentize($euiColorPlainLight, .5);
     border-radius: $euiBorderRadius;
   }
 }

@@ -17,7 +17,7 @@ body.canvas-isFullscreen {
 
   // set the background color
   .canvasLayout {
-    background: $euiColorInk;
+    background: $euiColorPlainDark;
   }
 
   // hide all the interface parts

@@ -34,7 +34,7 @@
   .canvasPageManager__addPage {
     width: $euiSizeXXL + $euiSize;
     background: $euiColorPrimary;
-    color: $euiColorGhost;
+    color: $euiColorPlainLight;
     opacity: 0;
     animation: buttonPop $euiAnimSpeedNormal $euiAnimSlightResistance;
     animation-fill-mode: forwards;
@@ -107,7 +107,7 @@
     opacity: 0;
     transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
     transition-delay: $euiAnimSpeedNormal;
-    background: transparentize($euiColorGhost, .5);
+    background: transparentize($euiColorPlainLight, .5);
     border-radius: $euiBorderRadius;
   }
 }

@@ -24,7 +24,7 @@ $canvasElementCardWidth: 210px;
 }
 
 .canvasCheckered {
-  background-color: $euiColorGhost;
+  background-color: $euiColorPlainLight;
 
   // sass-lint:disable-block indentation
   background-image: linear-gradient(45deg, $euiColorLightShade 25%, transparent 25%),
@@ -56,14 +56,14 @@ $canvasElementCardWidth: 210px;
     bottom: 10px;
     right: 10px;
     background-color: $euiColorDanger;
-    color: $euiColorGhost;
+    color: $euiColorPlainLight;
     display: block;
     z-index: 2000;
     padding: 10px;
     max-width: 500px;
 
     a {
-      color: $euiColorGhost;
+      color: $euiColorPlainLight;
       font-weight: bold;
     }
   }

@@ -21,7 +21,7 @@ const childTitleStyle = (theme) => css`
   ${logicalCSS('padding', `${theme.euiTheme.size.l} ${theme.euiTheme.size.s}`)}
   text-align: center;
   font-size: ${euiFontSize(theme, 'xs').fontSize};
-  color: ${theme.euiTheme.colors.ghost};
+  color: ${theme.euiTheme.colors.textGhost};
   display: flex;
   flex-direction: row;
   align-items: center;

@@ -25,11 +25,11 @@ const sparklineTooltipStyle = (theme) => css`
 `;
 
 const tooltipXValueStyle = ({ euiTheme }) => css`
-  color: ${transparentize(0.3, euiTheme.colors.ghost)};
+  color: ${transparentize(0.3, euiTheme.colors.textGhost)};
 `;
 
 const tooltipYValueStyle = ({ euiTheme }) => css`
-  color: ${euiTheme.colors.ghost};
+  color: ${euiTheme.colors.textGhost};
 `;
 
 const tooltipContainerStyle = ({ euiTheme }) => css`

@@ -93,14 +93,14 @@ export function shouldColorByTerms(
 export function getContrastColor(
   color: string,
   isDarkTheme: boolean,
-  darkTextProp: 'euiColorInk' | 'euiTextColor' = 'euiColorInk',
-  lightTextProp: 'euiColorGhost' | 'euiTextColor' = 'euiColorGhost'
+  darkTextProp: 'euiColorTextInk' | 'euiTextColor' = 'euiColorTextInk',
+  lightTextProp: 'euiColorTextGhost' | 'euiTextColor' = 'euiColorTextGhost'
 ) {
-  // when in light theme both text color and colorInk are dark and the choice
+  // when in light theme both text color and textInk are dark and the choice
   // may depends on the specific context.
-  const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars[darkTextProp];
+  const darkColor = isDarkTheme ? euiDarkVars.euiColorTextInk : euiLightVars[darkTextProp];
   // Same thing for light color in dark theme
-  const lightColor = isDarkTheme ? euiDarkVars[lightTextProp] : euiLightVars.euiColorGhost;
+  const lightColor = isDarkTheme ? euiDarkVars[lightTextProp] : euiLightVars.euiColorTextGhost;
   const backgroundColor = isDarkTheme
     ? euiDarkVars.euiPageBackgroundColor
     : euiLightVars.euiPageBackgroundColor;

@@ -1,5 +1,5 @@
 .mapKeydownScrollZoom {
-  background: transparentize($euiColorInk, .5);
+  background: transparentize($euiColorPlainDark, .5);
   left: 0;
   right: 0;
   top: 0;

@@ -102,7 +102,7 @@ export const useCytoscapeOptions = (): cytoscape.CytoscapeOptions => {
           selector: 'node',
           style: {
             'background-color': (el: cytoscape.NodeSingular) =>
-              el.data('isRoot') ? euiTheme.colors.warning : euiTheme.colors.ghost,
+              el.data('isRoot') ? euiTheme.colors.warning : euiTheme.colors.plainLight,
             'background-height': '60%',
             'background-width': '60%',
             'border-color': (el: cytoscape.NodeSingular) => borderColorForNode(el, euiTheme),

@@ -41,7 +41,7 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean }> = ({ hasMissingJob
   const euiSizeM = euiTheme.size.m;
   const euiSizeS = euiTheme.size.s;
   const euiColorFullShade = euiTheme.colors.fullShade;
-  const euiColorGhost = euiTheme.colors.ghost;
+  const euiColorPlainLight = euiTheme.colors.plainLight;
   const euiColorWarning = euiTheme.colors.warning;
   const euiBorderThin = euiTheme.border.thin;
   const euiBorderRadius = euiTheme.border.radius.medium;
@@ -61,10 +61,10 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean }> = ({ hasMissingJob
     () => ({
       height: euiSizeM,
       width: euiSizeM,
-      backgroundColor: euiColorGhost,
+      backgroundColor: euiColorPlainLight,
       display: 'inline-block',
     }),
-    [euiSizeM, euiColorGhost]
+    [euiSizeM, euiColorPlainLight]
   );
 
   return (

@@ -26,14 +26,14 @@ export const useExplorerChartTooltipStyles = () => {
         },
       }),
       title: css({
-        color: euiTheme.colors.ghost,
+        color: euiTheme.colors.textGhost,
         fontSize: euiFontSizeXS,
         fontWeight: 'normal',
         whiteSpace: 'nowrap',
         gridColumnStart: 1,
       }),
       description: css({
-        color: euiTheme.colors.ghost,
+        color: euiTheme.colors.textGhost,
         fontSize: euiFontSizeXS,
         fontWeight: 'bold',
         paddingLeft: euiTheme.size.s,

@@ -287,7 +287,7 @@ export const ControlGeneralViewResponse = ({
               <b>{i18n.actions}: </b>
               {response.actions?.map((action, i) => (
                 <span key={action}>
-                  <b css={{ color: action === 'block' ? colors.danger : colors.ink }}>
+                  <b css={{ color: action === 'block' ? colors.danger : colors.textInk }}>
                     {action[0].toUpperCase() + action.slice(1)}
                   </b>
                   {i !== (response.actions?.length || 0) - 1 && ', '}

@@ -28,7 +28,7 @@ export const usePaneStyles = () => {
     right: var(--kbn-layout--application-right, 0px);
     bottom: var(--kbn-layout--application-bottom, 0px);
     // TODO EUI: add color with transparency
-    background: ${transparentize(euiTheme.colors.ink, 0.5)};
+    background: ${transparentize(euiTheme.colors.plainDark, 0.5)};
     z-index: ${euiTheme.levels.maskBelowHeader};
 
     ${euiCanAnimate} {

@@ -43,7 +43,7 @@ export const useStyles = ({
 
     const children: CSSObject = {
       position: 'relative',
-      color: colors.ghost,
+      color: colors.textGhost,
       marginLeft: size.base,
       paddingLeft: size.s,
       borderLeft: border.editable,

@@ -94,7 +94,7 @@ export const useButtonStyles = () => {
         textDecoration: 'none',
       },
       '&.isExpanded': {
-        color: colors.ghost,
+        color: colors.textGhost,
         background: colors.backgroundFilledAccentSecondary,
         '&:hover, &:focus': {
           background: `${colors.backgroundFilledAccentSecondary}`,

@@ -200,7 +200,7 @@ export const useXtermPlayer = ({
     const term = new Terminal({
       theme: {
         selectionBackground: colors.warning,
-        selectionForeground: colors.ink,
+        selectionForeground: colors.textInk,
         yellow: colors.warning,
       },
       fontFamily: font.familyCode,

@@ -38,7 +38,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
       padding: `${size.m} ${size.base}`,
     };
 
-    const windowBoundsColor = transparentize(colors.ghost, 0.6); // TODO: Borealis migration - replace transparentize with color token, get rid of ghost color
+    const windowBoundsColor = transparentize(colors.plainLight, 0.6); // TODO: Borealis migration - replace transparentize with color token
 
     const terminal: CSSObject = {
       minHeight: '100%',
@@ -73,7 +73,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
       width: '100%',
       height: 'calc(100% - 112px)',
       overflow: 'auto',
-      backgroundColor: colors.ink,
+      backgroundColor: colors.plainDark,
     };
 
     return {

@@ -16,7 +16,7 @@ export const useStyles = () => {
 
     const ratio: CSSObject = {
       fontSize: size.m,
-      color: colors.ghost,
+      color: colors.textGhost,
     };
 
     const separator: CSSObject = {