[Colors] Create text-ink and text-ghost tokens

packages/eui-theme-borealis/changelogs/upcoming/9379.md

@@ -0,0 +1,5 @@
+- Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode.
+
+**Breaking changes**
+
+- Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases.

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json

@@ -354,8 +354,6 @@
   "euiColorSeverityDanger": "#EE4C48",
   "euiColorChartLines": "#7186A8",
   "euiColorChartBand": "#243147",
-  "euiColorGhost": "#FFFFFF",
-  "euiColorInk": "#000000",
   "euiColorPrimary": "#61A2FF",
   "euiColorAccent": "#EE72A6",
   "euiColorAccentSecondary": "#16C5C0",
@@ -397,6 +395,8 @@
   "euiColorTextSubdued": "#98A8C3",
   "euiColorTextDisabled": "#6A7FA0",
   "euiColorTextInverse": "#07101F",
+  "euiColorTextGhost": "#FFFFFF",
+  "euiColorTextInk": "#07101F",
   "euiColorBackgroundBasePrimary": "#0A2342",
   "euiColorBackgroundBaseAccent": "#351725",
   "euiColorBackgroundBaseAccentSecondary": "#03282B",

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts

@@ -355,8 +355,6 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorSeverityDanger: string;
     euiColorChartLines: string;
     euiColorChartBand: string;
-    euiColorGhost: string;
-    euiColorInk: string;
     euiColorPrimary: string;
     euiColorAccent: string;
     euiColorAccentSecondary: string;
@@ -398,6 +396,8 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorTextSubdued: string;
     euiColorTextDisabled: string;
     euiColorTextInverse: string;
+    euiColorTextGhost: string;
+    euiColorTextInk: string;
     euiColorBackgroundBasePrimary: string;
     euiColorBackgroundBaseAccent: string;
     euiColorBackgroundBaseAccentSecondary: string;

packages/eui-theme-borealis/src/eui_theme_borealis_light.json

@@ -354,8 +354,6 @@
   "euiColorSeverityDanger": "#EE4C48",
   "euiColorChartLines": "#CAD3E2",
   "euiColorChartBand": "#F6F9FC",
-  "euiColorGhost": "#FFFFFF",
-  "euiColorInk": "#000000",
   "euiColorPrimary": "#0B64DD",
   "euiColorAccent": "#BC1E70",
   "euiColorAccentSecondary": "#008B87",
@@ -397,6 +395,8 @@
   "euiColorTextSubdued": "#516381",
   "euiColorTextDisabled": "#798EAF",
   "euiColorTextInverse": "#FFFFFF",
+  "euiColorTextGhost": "#FFFFFF",
+  "euiColorTextInk": "#07101F",
   "euiColorBackgroundBasePrimary": "#E8F1FF",
   "euiColorBackgroundBaseAccent": "#FFEBF5",
   "euiColorBackgroundBaseAccentSecondary": "#E2F9F7",

packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts

@@ -355,8 +355,6 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorSeverityDanger: string;
     euiColorChartLines: string;
     euiColorChartBand: string;
-    euiColorGhost: string;
-    euiColorInk: string;
     euiColorPrimary: string;
     euiColorAccent: string;
     euiColorAccentSecondary: string;
@@ -398,6 +396,8 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorTextSubdued: string;
     euiColorTextDisabled: string;
     euiColorTextInverse: string;
+    euiColorTextGhost: string;
+    euiColorTextInk: string;
     euiColorBackgroundBasePrimary: string;
     euiColorBackgroundBaseAccent: string;
     euiColorBackgroundBaseAccentSecondary: string;

packages/eui-theme-borealis/src/variables/_buttons.scss

@@ -11,7 +11,7 @@ $euiButtonTypes: (
   warning: $euiColorBackgroundFilledWarning,
   risk: $euiColorBackgroundFilledRisk,
   danger: $euiColorBackgroundFilledDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
+  ghost: $euiColorPlainLight, // Ghost is color-mode-invariant
   text: $euiColorBackgroundFilledText, // Reserved for special use cases
 ) !default;
 

packages/eui-theme-borealis/src/variables/_overrides.ts

@@ -15,9 +15,15 @@ import { severityColorsLightHighContrast } from './colors/_colors_severity_hcm';
 export const overrides: _EuiThemeOverrides = {
   HCM: {
     colors: {
-      ink: PRIMITIVE_COLORS.black,
-      ghost: PRIMITIVE_COLORS.white,
+      plainDark: PRIMITIVE_COLORS.black,
+      plainLight: PRIMITIVE_COLORS.white,
+      DARK: {
+        textInk: PRIMITIVE_COLORS.black,
+        textGhost: PRIMITIVE_COLORS.white,
+      },
       LIGHT: {
+        textInk: PRIMITIVE_COLORS.black,
+        textGhost: PRIMITIVE_COLORS.white,
         vis: visColorsLightHighContrast,
         severity: severityColorsLightHighContrast,
       },

packages/eui-theme-borealis/src/variables/_shadows_dark.scss

@@ -1,5 +1,5 @@
 // Shadows
-$euiShadowColor: $euiColorInk !default;
+$euiShadowColor: $euiColorPlainDark !default;
 
 $euiShadowDownXS: 0 1px 4px 0 hsla(from $euiShadowColor h s l / 0.4), 0 2px 8px 0 hsla(from $euiShadowColor h s l / 0.24);
 $euiShadowDownS: 0 2px 7px 0 hsla(from $euiShadowColor h s l / 0.46), 0 4px 11px 0 hsla(from $euiShadowColor h s l / 0.26);

packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss

@@ -5,10 +5,6 @@
 
 @import 'semantic_colors';
 
-// Constants (legacy)
-$euiColorGhost: $euiColorWhite !default;
-$euiColorInk: $euiColorBlack !default;
-
 // Brand
 $euiColorPrimary: $euiColorPrimary60 !default;
 $euiColorAccent: $euiColorAccent60 !default;

packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts

@@ -66,6 +66,8 @@ export const dark_text_colors: _EuiThemeTextColors = {
   textSubdued: SEMANTIC_COLORS.shade55,
   textDisabled: SEMANTIC_COLORS.shade80,
   textInverse: SEMANTIC_COLORS.plainDark,
+  textInk: SEMANTIC_COLORS.plainDark,
+  textGhost: SEMANTIC_COLORS.plainLight,
 };
 
 export const dark_shades: _EuiThemeShadeColors = {

packages/eui-theme-borealis/src/variables/colors/_colors_light.scss

@@ -5,11 +5,6 @@
 
 @import 'semantic_colors';
 
-// These colors stay the same no matter the theme
-// @deprecated
-$euiColorGhost: $euiColorWhite !default;
-$euiColorInk: $euiColorBlack !default;
-
 // Brand
 $euiColorPrimary: $euiColorPrimary90 !default;
 $euiColorAccent: $euiColorAccent90 !default;

packages/eui-theme-borealis/src/variables/colors/_colors_light.ts

@@ -66,6 +66,8 @@ export const text_colors: _EuiThemeTextColors = {
   textSubdued: SEMANTIC_COLORS.shade95,
   textDisabled: SEMANTIC_COLORS.shade70,
   textInverse: SEMANTIC_COLORS.plainLight,
+  textInk: SEMANTIC_COLORS.plainDark,
+  textGhost: SEMANTIC_COLORS.plainLight,
 };
 
 export const shade_colors: _EuiThemeShadeColors = {

packages/eui-theme-borealis/src/variables/colors/index.ts

@@ -16,8 +16,6 @@ import { colorVisDark } from './_colors_vis_dark';
 import { severityColors } from './_colors_severity';
 
 export const colors: _EuiThemeColors = {
-  ghost: SEMANTIC_COLORS.plainLight,
-  ink: SEMANTIC_COLORS.plainDark,
   plainLight: SEMANTIC_COLORS.plainLight,
   plainDark: SEMANTIC_COLORS.plainDark,
 

packages/eui-theme-common/changelogs/upcoming/9379.md

@@ -0,0 +1,5 @@
+- Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. 
+
+**Breaking changes**
+
+- Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases.

packages/eui-theme-common/src/global_styling/functions/_colors.scss

@@ -5,12 +5,12 @@
 
 // Mixes a provided color with white.
 @function tint($color, $percent) {
-  @return mix($euiColorGhost, $color, $percent);
+  @return mix($euiColorPlainLight, $color, $percent);
 }
 
 // Mixes a provided color with black.
 @function shade($color, $percent) {
-  @return mix($euiColorInk, $color, $percent);
+  @return mix($euiColorPlainDark, $color, $percent);
 }
 
 // For theming. Checks the text color and tells us whether it's light or dark.
@@ -72,7 +72,7 @@
 // Given $color, decide whether $lightText or $darkText should be used as the text color
 // ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has
 //     a higher contrast than #FFF against a #EEE background.
-@function chooseLightOrDarkText($background, $lightText: $euiColorGhost, $darkText: $euiColorInk) {
+@function chooseLightOrDarkText($background, $lightText: $euiColorPlainLight, $darkText: $euiColorPlainDark) {
   $lightContrast: contrastRatio($background, $lightText);
   $darkContrast: contrastRatio($background, $darkText);
 

packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss

@@ -1,12 +1,12 @@
 @mixin euiToolTipStyle($size: null) {
-  @include euiBottomShadow($color: $euiColorInk);
+  @include euiBottomShadow($color: $euiColorPlainDark);
 
   $euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default;
   $euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default;
 
   border-radius: $euiBorderRadius;
   background-color: $euiTooltipBackgroundColor;
-  color: $euiColorGhost;
+  color: $euiColorPlainLight;
   z-index: $euiZLevel9;
   max-width: 256px;
   overflow-wrap: break-word;

packages/eui-theme-common/src/global_styling/variables/_buttons.scss

@@ -9,7 +9,7 @@ $euiButtonTypes: (
   success: $euiColorSuccess,
   warning: $euiColorWarning,
   danger: $euiColorDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
+  ghost: $euiColorPlainLight, // Ghost is color-mode-invariant
   text: $euiColorDarkShade, // Reserved for special use cases
 ) !default;
 

packages/eui-theme-common/src/global_styling/variables/colors.ts

@@ -145,6 +145,8 @@ export type _EuiThemeTextColors = {
   textSubdued: ColorModeSwitch;
   textDisabled: ColorModeSwitch;
   textInverse: ColorModeSwitch;
+  textInk: ColorModeSwitch;
+  textGhost: ColorModeSwitch;
 };
 
 export type _EuiThemeSpecialColors = {
@@ -367,9 +369,6 @@ export type _EuiThemeSeverityColors = {
 };
 
 export type _EuiThemeConstantColors = {
-  ghost: string;
-  ink: string;
-
   plainLight: string;
   plainDark: string;
 };

packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts

@@ -42,7 +42,9 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
       &:focus {
         ${euiFocusRing(euiThemeContext, 'outset', {
           color:
-            colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink,
+            colorMode === 'DARK'
+              ? euiTheme.colors.plainLight
+              : euiTheme.colors.plainDark,
         })}
       }
     `,

packages/eui/src/components/badge/color_utils.ts

@@ -98,8 +98,8 @@ export const getBadgeColors = (
 
 export const getTextColor = ({ euiTheme }: UseEuiTheme, bgColor: string) => {
   const textColor = isColorDark(...chroma(bgColor).rgb())
-    ? euiTheme.colors.ghost
-    : euiTheme.colors.ink;
+    ? euiTheme.colors.textGhost
+    : euiTheme.colors.textInk;
 
   return textColor;
 };

packages/eui/src/components/code/code_block_annotations.tsx

@@ -49,7 +49,7 @@ export const EuiCodeBlockAnnotation: FunctionComponent<
 
   const { euiTheme, colorMode } = useEuiTheme();
   const isDarkMode = colorMode === 'DARK';
-  const iconColor = isDarkMode ? euiTheme.colors.ink : 'ghost';
+  const iconColor = isDarkMode ? euiTheme.colors.textInk : 'ghost';
 
   return (
     <EuiPopover

packages/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts

@@ -29,7 +29,7 @@ export const euiCollapsibleNavGroupStyles = ({ euiTheme }: UseEuiTheme) => {
       .euiCollapsibleNavGroup__title,
       .euiCollapsibleNavGroup__heading,
       .euiAccordion__arrow {
-        color: ${euiTheme.colors.ghost};
+        color: ${euiTheme.colors.textGhost};
       }
     `,
     // Header padding

packages/eui/src/components/color_picker/hue.styles.ts

@@ -96,8 +96,8 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
             box-shadow: ${thumbBoxShadow};
           `,
           preferred: `
-            background-color: ${euiTheme.colors.ghost};
-            border: ${thumbBorder} solid ${euiTheme.colors.ink};
+            background-color: ${euiTheme.colors.plainLight};
+            border: ${thumbBorder} solid ${euiTheme.colors.plainDark};
             box-shadow: none;
           `,
         })}
@@ -119,7 +119,7 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
         preferred: `
           &:focus {
             ${euiRangeThumbPerBrowser(`
-              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
+              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.plainDark};
               outline-offset: 0;
             `)}
           }

packages/eui/src/components/color_picker/saturation.styles.ts

@@ -49,7 +49,7 @@ export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
               border-color: ${euiTheme.colors.primary};
             `,
             preferred: `
-              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
+              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.plainDark};
               outline-offset: 0;
             `,
           })}
@@ -118,8 +118,8 @@ export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
           }
         `,
         preferred: `
-          border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.ink};
-          background-color: ${euiTheme.colors.ghost};
+          border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.plainDark};
+          background-color: ${euiTheme.colors.plainLight};
         `,
       })}
     `,

packages/eui/src/components/form/range/range_levels.styles.ts

@@ -18,7 +18,9 @@ export const euiRangeLevelsStyles = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
 
   const isColorDark = colorMode === 'DARK';
-  const stripeColor = isColorDark ? euiTheme.colors.ink : euiTheme.colors.ghost;
+  const stripeColor = isColorDark
+    ? euiTheme.colors.plainDark
+    : euiTheme.colors.plainLight;
   const stripesBackground = `repeating-linear-gradient(
     -45deg,
     ${transparentize(stripeColor, 0.5)},

packages/eui/src/components/form/range/range_tooltip.styles.ts

@@ -55,7 +55,7 @@ export const euiRangeTooltipValueStyles = (euiThemeContext: UseEuiTheme) => {
       transform: translateY(-50%);
 
       ${euiFontSize(euiThemeContext, 's')}
-      color: ${euiTheme.colors.ghost};
+      color: ${euiTheme.colors.textGhost};
       background-color: ${toolTipBackgroundColor};
       border: ${euiTheme.border.width.thin} solid ${borderColor};
       border-radius: ${euiTheme.border.radius.small};

packages/eui/src/components/header/header.styles.ts

@@ -84,7 +84,7 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
     .euiHeaderLogo__text,
     .euiHeaderLink,
     .euiHeaderSectionItemButton {
-      color: ${euiTheme.colors.ghost};
+      color: ${euiTheme.colors.textGhost};
     }
 
     .euiHeaderLink-isActive {

packages/eui/src/components/icon/icon.styles.ts

@@ -50,7 +50,7 @@ export const euiIconStyles = ({ euiTheme }: UseEuiTheme) => ({
     color: ${euiTheme.colors.textAccentSecondary};
   `,
   ghost: css`
-    color: ${euiTheme.colors.ghost};
+    color: ${euiTheme.colors.textGhost};
 
     /* Really force all paths to inherit (specifically for logos) */
     *[fill],

packages/eui/src/components/image/image_caption.styles.ts

@@ -20,12 +20,12 @@ export const euiImageCaptionStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('margin-top', euiTheme.size.xs)}
     `,
     isOnOverlayMask: css`
-      color: ${euiTheme.colors.ghost};
-      text-shadow: 0 1px 2px ${transparentize(euiTheme.colors.ink, 0.6)};
+      color: ${euiTheme.colors.textGhost};
+      text-shadow: 0 1px 2px ${transparentize(euiTheme.colors.plainDark, 0.6)};
 
       [class*='euiLink'] {
         /* Override link color for visibility */
-        color: ${euiTheme.colors.ghost};
+        color: ${euiTheme.colors.textGhost};
       }
     `,
   };

packages/eui/src/components/link/link.styles.ts

@@ -59,7 +59,7 @@ export const euiLinkStyles = (euiThemeContext: UseEuiTheme) => {
     accent: css(_colorCSS(euiTheme.colors.textAccent)),
     danger: css(_colorCSS(euiTheme.colors.textDanger)),
     warning: css(_colorCSS(euiTheme.colors.textWarning)),
-    ghost: css(_colorCSS(euiTheme.colors.ghost)),
+    ghost: css(_colorCSS(euiTheme.colors.textGhost)),
     text: css(_colorCSS(euiTheme.colors.textParagraph)),
   };
 };

packages/eui/src/components/list_group/list_group_item.styles.ts

@@ -140,7 +140,7 @@ export const euiListGroupItemInnerStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.subduedText};
     `,
     ghost: css`
-      color: ${euiTheme.colors.ghost};
+      color: ${euiTheme.colors.textGhost};
     `,
     // Variants
     isDisabled: css`

packages/eui/src/components/markdown_editor/markdown_format.styles.ts

@@ -152,7 +152,10 @@ export const euiMarkdownFormatStyles = (euiThemeContext: UseEuiTheme) => {
         euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.danger)
       ),
       ghost: css(
-        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.ghost)
+        euiMarkdownAdjustBorderColors(
+          euiThemeContext,
+          euiTheme.colors.plainLight
+        )
       ),
       inherit: css(
         euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor')