diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9379.md b/packages/eui-theme-borealis/changelogs/upcoming/9379.md new file mode 100644 index 000000000000..7b9e2ee07537 --- /dev/null +++ b/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. diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index de6761797e2c..1c3dd53798dd 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/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", diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts index 7092ec86e4b2..ddf5445c3c83 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts +++ b/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; diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 528bdad0991a..dd4ff69d1674 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/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", diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts index 88751dfaa765..15df4e550411 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts +++ b/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; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.scss b/packages/eui-theme-borealis/src/variables/_buttons.scss index 192990b3e7d6..364e2af5037c 100644 --- a/packages/eui-theme-borealis/src/variables/_buttons.scss +++ b/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; diff --git a/packages/eui-theme-borealis/src/variables/_overrides.ts b/packages/eui-theme-borealis/src/variables/_overrides.ts index 5cc720ed8719..2960b7425beb 100644 --- a/packages/eui-theme-borealis/src/variables/_overrides.ts +++ b/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, }, diff --git a/packages/eui-theme-borealis/src/variables/_shadows_dark.scss b/packages/eui-theme-borealis/src/variables/_shadows_dark.scss index f927adb1a24a..52125e07468c 100644 --- a/packages/eui-theme-borealis/src/variables/_shadows_dark.scss +++ b/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); diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 99ee1dc1424f..afdee323b56c 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/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; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index 097fcbf42539..e41f0d99c7cd 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/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 = { diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index de7063ff6b57..c166e45aee24 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/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; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index 89e291ae2ebb..adb85f4e5a41 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/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 = { diff --git a/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts index f5fa60e68e8c..afc488d349eb 100644 --- a/packages/eui-theme-borealis/src/variables/colors/index.ts +++ b/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, diff --git a/packages/eui-theme-common/changelogs/upcoming/9379.md b/packages/eui-theme-common/changelogs/upcoming/9379.md new file mode 100644 index 000000000000..bc9afeee518d --- /dev/null +++ b/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. diff --git a/packages/eui-theme-common/src/global_styling/functions/_colors.scss b/packages/eui-theme-common/src/global_styling/functions/_colors.scss index e5ade7886676..415bcbfa346a 100644 --- a/packages/eui-theme-common/src/global_styling/functions/_colors.scss +++ b/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); diff --git a/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss index d8feb0d4258b..1ef25f4977ac 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss +++ b/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; diff --git a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss index 61e36da78bd3..f1d77983952f 100644 --- a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss +++ b/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; diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index a71d81b0bc97..59c1cc6ccb36 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/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; }; diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 1ac47117ced5..0fdc817e4773 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/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, })} } `, diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index 3e4e30c065c2..bb1d379a6c3f 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/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; }; diff --git a/packages/eui/src/components/code/code_block_annotations.tsx b/packages/eui/src/components/code/code_block_annotations.tsx index 0c41433a236d..817ed6d0ab9a 100644 --- a/packages/eui/src/components/code/code_block_annotations.tsx +++ b/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 ( { .euiCollapsibleNavGroup__title, .euiCollapsibleNavGroup__heading, .euiAccordion__arrow { - color: ${euiTheme.colors.ghost}; + color: ${euiTheme.colors.textGhost}; } `, // Header padding diff --git a/packages/eui/src/components/color_picker/hue.styles.ts b/packages/eui/src/components/color_picker/hue.styles.ts index 662067f1ebd0..2ec268a3c7d0 100644 --- a/packages/eui/src/components/color_picker/hue.styles.ts +++ b/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; `)} } diff --git a/packages/eui/src/components/color_picker/saturation.styles.ts b/packages/eui/src/components/color_picker/saturation.styles.ts index 55d2d042dc69..30864b7476d9 100644 --- a/packages/eui/src/components/color_picker/saturation.styles.ts +++ b/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}; `, })} `, diff --git a/packages/eui/src/components/form/range/range_levels.styles.ts b/packages/eui/src/components/form/range/range_levels.styles.ts index d182736be5e2..462ee8d7ff56 100644 --- a/packages/eui/src/components/form/range/range_levels.styles.ts +++ b/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)}, diff --git a/packages/eui/src/components/form/range/range_tooltip.styles.ts b/packages/eui/src/components/form/range/range_tooltip.styles.ts index 96bd2132c531..edee0ea444f0 100644 --- a/packages/eui/src/components/form/range/range_tooltip.styles.ts +++ b/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}; diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts index 9d35ca4875e2..54502f93e466 100644 --- a/packages/eui/src/components/header/header.styles.ts +++ b/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 { diff --git a/packages/eui/src/components/icon/icon.styles.ts b/packages/eui/src/components/icon/icon.styles.ts index 61fab85e9f0d..33a61980cc65 100644 --- a/packages/eui/src/components/icon/icon.styles.ts +++ b/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], diff --git a/packages/eui/src/components/image/image_caption.styles.ts b/packages/eui/src/components/image/image_caption.styles.ts index a7c03a12a289..2bc33dc6bd3d 100644 --- a/packages/eui/src/components/image/image_caption.styles.ts +++ b/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}; } `, }; diff --git a/packages/eui/src/components/link/link.styles.ts b/packages/eui/src/components/link/link.styles.ts index 0a1f25ad11eb..1e4267fd97f6 100644 --- a/packages/eui/src/components/link/link.styles.ts +++ b/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)), }; }; diff --git a/packages/eui/src/components/list_group/list_group_item.styles.ts b/packages/eui/src/components/list_group/list_group_item.styles.ts index 0125b8d0a2a5..adc331e97047 100644 --- a/packages/eui/src/components/list_group/list_group_item.styles.ts +++ b/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` diff --git a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts index e96ef50f6d76..86a27a1b55bf 100644 --- a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts +++ b/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') diff --git a/packages/eui/src/components/text/text_color.styles.ts b/packages/eui/src/components/text/text_color.styles.ts index d2b7194600b9..7fc6a05a88b7 100644 --- a/packages/eui/src/components/text/text_color.styles.ts +++ b/packages/eui/src/components/text/text_color.styles.ts @@ -34,7 +34,7 @@ export const euiTextColorStyles = ({ euiTheme }: UseEuiTheme) => ({ `, ghost: css` color: ${euiTheme.colors - .ghost} !important; /* stylelint-disable-line declaration-no-important */ + .textGhost} !important; /* stylelint-disable-line declaration-no-important */ `, inherit: css` color: inherit; diff --git a/packages/eui/src/components/token/token.styles.ts b/packages/eui/src/components/token/token.styles.ts index 4ae802be770f..7d1957605532 100644 --- a/packages/eui/src/components/token/token.styles.ts +++ b/packages/eui/src/components/token/token.styles.ts @@ -75,8 +75,8 @@ const getTokenColor = ( : tint(iconColor, 0.2); const darkColor = isColorDark(...chroma(backgroundDarkColor).rgb()) - ? euiTheme.colors.ghost - : euiTheme.colors.ink; + ? euiTheme.colors.textGhost + : euiTheme.colors.textInk; switch (fill) { case 'none': diff --git a/packages/eui/src/components/tool_tip/tool_tip.styles.ts b/packages/eui/src/components/tool_tip/tool_tip.styles.ts index 5842ccb495c5..52822baade33 100644 --- a/packages/eui/src/components/tool_tip/tool_tip.styles.ts +++ b/packages/eui/src/components/tool_tip/tool_tip.styles.ts @@ -59,7 +59,7 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => { ${hasShadow ? euiShadow(euiThemeContext) : ''} border-radius: ${euiTheme.border.radius.medium}; background-color: ${euiToolTipBackgroundColor(euiTheme)}; - color: ${euiTheme.colors.ghost}; + color: ${euiTheme.colors.textGhost}; z-index: ${euiTheme.levels.toast}; ${logicalCSS('max-width', '256px')} overflow-wrap: break-word; diff --git a/packages/eui/src/global_styling/mixins/_button.ts b/packages/eui/src/global_styling/mixins/_button.ts index 2867bb984a0d..986ba9163c46 100644 --- a/packages/eui/src/global_styling/mixins/_button.ts +++ b/packages/eui/src/global_styling/mixins/_button.ts @@ -89,7 +89,7 @@ const getButtonVariantTokenValues = ( ) as keyof _EuiThemeButtonColors; const highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) - ? euiTheme.colors.ink + ? euiTheme.colors.textInk : color === 'disabled' ? euiTheme.components.buttons[textTokenName] : euiTheme.colors.textInverse; diff --git a/packages/website/docs/components/display/icons/index.mdx b/packages/website/docs/components/display/icons/index.mdx index b3cd7b19a0fd..33eabff0bba7 100644 --- a/packages/website/docs/components/display/icons/index.mdx +++ b/packages/website/docs/components/display/icons/index.mdx @@ -132,7 +132,7 @@ import { iconTypesLogos } from './icon_types_logos'; ```tsx const allowedColors = ['multi', 'ghost', 'text']; const getPanelGhostStyles = ({ euiTheme }: UseEuiTheme) => css` - color: ${euiTheme.colors.ghost}; + color: ${euiTheme.colors.textGhost}; background: ${euiTheme.colors.darkestShade}; `; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx index 6a6e3c407c3b..15ac82861311 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx +++ b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx @@ -49,6 +49,8 @@ import { BrandColorsTable } from './brand_colors_table'; Each brand color also has a corresponding text variant that should be used specifically when coloring text. As is used in [EuiTextColor](../../../../components/display/text.mdx#coloring-text). +Use `textGhost` for text and icons on dark backgrounds and `textInk` on light backgrounds. + import { TextColorPreview } from './text_color_preview'; import { TextColorsTable } from './text_colors_table'; @@ -183,8 +185,8 @@ import { SpecialColorsTable } from './special_colors_table'; ``` css` - color: ${euiTheme.colors.ghost}; - background-color: ${euiTheme.colors.ink}; + color: ${euiTheme.colors.disabledText}; + background-color: ${euiTheme.colors.disabled}; ` ``` diff --git a/packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx b/packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx index 176a83b471ad..63df12d2ef4b 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; @@ -8,11 +9,11 @@ export const SpecialColorsPreview = () => {
- This text is always white and the background always black. + This is disabled text on disabled background.
- ) -} + ); +}; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx index b71061218b0c..6b0a8a43dfa8 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { useEuiTheme } from '@elastic/eui'; import { ColorsTable } from './colors_table'; @@ -67,24 +68,6 @@ export const SpecialColorsTable = () => { ), }, - { - value: euiTheme.colors.ghost, - token: 'colors.ghost', - description: ( - <> - @deprecated - use plainLight instead - - ), - }, - { - value: euiTheme.colors.ink, - token: 'colors.ink', - description: ( - <> - @deprecated - use plainDark instead - - ), - }, ]} /> ); diff --git a/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx index 1d488bce468a..0f69ccbc74da 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { useEuiTheme } from '@elastic/eui'; import { ColorsTable } from './colors_table'; @@ -20,6 +21,14 @@ export const TextColorsTable = () => { value: euiTheme.colors.textSubdued, token: 'colors.textSubdued', }, + { + value: euiTheme.colors.textGhost, + token: 'colors.textGhost', + }, + { + value: euiTheme.colors.textInk, + token: 'colors.textInk', + }, { value: euiTheme.colors.link, token: 'colors.link', diff --git a/packages/website/docs/getting-started/theming/utilities/colors.mdx b/packages/website/docs/getting-started/theming/utilities/colors.mdx index 2863031f2336..0baa2fc005a6 100644 --- a/packages/website/docs/getting-started/theming/utilities/colors.mdx +++ b/packages/website/docs/getting-started/theming/utilities/colors.mdx @@ -110,7 +110,7 @@ import { IsColorDarkPreview } from './is_color_dark_preview'; Use this function to determine whether or not to use light or dark text against the given background color. It requires the values to be passed in as rgb integers and will return a `boolean` if the color is dark based on luminance. - If the function returns `true`, use `euiTheme.colors.ghost` otherwise use `euiTheme.colors.ink` as the text color. + If the function returns `true`, use `euiTheme.colors.textGhost` otherwise use `euiTheme.colors.textInk` as the text color. ``` red: 0-255; @@ -125,8 +125,8 @@ import { IsColorDarkPreview } from './is_color_dark_preview'; ```tsx css` color: ${isColorDark(color) - ? euiTheme.colors.ghost - : euiTheme.colors.ink;} + ? euiTheme.colors.textGhost + : euiTheme.colors.textInk;} ` ``` diff --git a/packages/website/docs/getting-started/theming/utilities/is_color_dark_preview.tsx b/packages/website/docs/getting-started/theming/utilities/is_color_dark_preview.tsx index 54118deedf7e..b7a1ef2976ba 100644 --- a/packages/website/docs/getting-started/theming/utilities/is_color_dark_preview.tsx +++ b/packages/website/docs/getting-started/theming/utilities/is_color_dark_preview.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { css } from '@emotion/react'; import { useEuiTheme, isColorDark } from '@elastic/eui'; @@ -7,14 +8,14 @@ export const IsColorDarkPreview = () => { return (
{isColorDark(0, 179, 164) ? 'Dark' : 'Light'}
); -} +}; diff --git a/packages/website/docs/getting-started/theming/utilities/transparentize_preview.tsx b/packages/website/docs/getting-started/theming/utilities/transparentize_preview.tsx index 46f53c4bf90e..a2af4c641f78 100644 --- a/packages/website/docs/getting-started/theming/utilities/transparentize_preview.tsx +++ b/packages/website/docs/getting-started/theming/utilities/transparentize_preview.tsx @@ -12,7 +12,9 @@ export const TransparentizePreview = () => { color={transparentize('#006837', 0.25)} style={{ color: - colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink, + colorMode === 'DARK' + ? euiTheme.colors.textGhost + : euiTheme.colors.textInk, }} > {transparentize('#006837', 0.25)} diff --git a/packages/website/docs/getting-started/working-with-emotion/migrating-from-sass.mdx b/packages/website/docs/getting-started/working-with-emotion/migrating-from-sass.mdx index b473e6b966a0..1cfbb4cfbd75 100644 --- a/packages/website/docs/getting-started/working-with-emotion/migrating-from-sass.mdx +++ b/packages/website/docs/getting-started/working-with-emotion/migrating-from-sass.mdx @@ -112,17 +112,6 @@ For a full list of tokens, see [Color tokens](../../getting-started/theming/toke `$euiColorHighlight` `useEuiTheme().euiTheme.colors.highlight` - - `$euiColorGhost` - `useEuiTheme().euiTheme.colors.ghost`
(consider replacing this with `fullShade/emptyShade` instead) - - - `$euiColorInk` - - `useEuiTheme().euiTheme.colors.ink` -
(consider replacing this with `fullShade/emptyShade` instead) - - diff --git a/packages/website/src/components/homepage/header/index.tsx b/packages/website/src/components/homepage/header/index.tsx index aa9b22dd767e..02994128bfc9 100644 --- a/packages/website/src/components/homepage/header/index.tsx +++ b/packages/website/src/components/homepage/header/index.tsx @@ -48,7 +48,7 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { --ifm-hero-background-color: transparent; --banner-title-font-size: 3.43rem; - --hero-decor-fill-white: ${euiTheme.colors.ghost}; + --hero-decor-fill-white: ${euiTheme.colors.plainLight}; --hero-decor-fill-background: ${euiTheme.colors.body}; --hero-decor-fill-lightShade: ${euiTheme.colors.lightShade}; --hero-decor-fill-brand-primary: ${euiTheme.colors.primary}; @@ -154,7 +154,7 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { padding-inline: ${euiTheme.size.l}; &:hover { - color: ${euiTheme.colors.ghost}; + color: ${euiTheme.colors.textGhost}; } `, icon: css` @@ -322,4 +322,4 @@ export function HomepageHeader() { ); -} \ No newline at end of file +} diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx index a802147bb313..68d5b35b8ce5 100644 --- a/packages/website/src/components/homepage/highlights/index.tsx +++ b/packages/website/src/components/homepage/highlights/index.tsx @@ -111,7 +111,7 @@ const CONTENT_DATA = [ const getStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ section: css` - --svg-fill-white: ${euiTheme.colors.ghost}; + --svg-fill-white: ${euiTheme.colors.plainLight}; --svg-fill-background: ${euiTheme.colors.body}; --svg-fill-lightestShade: ${euiTheme.colors.lightestShade}; --svg-fill-lightShade: ${euiTheme.colors.lightShade};