diff --git a/src/core/packages/chrome/browser-internal/src/ui/header/header_logo.tsx b/src/core/packages/chrome/browser-internal/src/ui/header/header_logo.tsx index be678ecaf1352..16af67d769cb3 100644 --- a/src/core/packages/chrome/browser-internal/src/ui/header/header_logo.tsx +++ b/src/core/packages/chrome/browser-internal/src/ui/header/header_logo.tsx @@ -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, }), }; diff --git a/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/content.tsx b/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/content.tsx index 957cff043a5ee..2fa417f89a3c3 100644 --- a/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/content.tsx +++ b/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/content.tsx @@ -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); diff --git a/src/platform/plugins/shared/console/public/application/containers/embeddable/styles.ts b/src/platform/plugins/shared/console/public/application/containers/embeddable/styles.ts index 7e7c6a2c0a524..9163497cc9a87 100644 --- a/src/platform/plugins/shared/console/public/application/containers/embeddable/styles.ts +++ b/src/platform/plugins/shared/console/public/application/containers/embeddable/styles.ts @@ -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); diff --git a/x-pack/platform/plugins/private/canvas/public/components/element_card/element_card.scss b/x-pack/platform/plugins/private/canvas/public/components/element_card/element_card.scss index e6a308cc6af48..bdab5a42f03b6 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/element_card/element_card.scss +++ b/x-pack/platform/plugins/private/canvas/public/components/element_card/element_card.scss @@ -17,7 +17,7 @@ opacity: 0; transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance; transition-delay: $euiAnimSpeedNormal; - background: transparentize($euiColorGhost, .5); + background: transparentize($euiColorPlainLight, .5); border-radius: $euiBorderRadius; } } diff --git a/x-pack/platform/plugins/private/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/platform/plugins/private/canvas/public/components/fullscreen/fullscreen.scss index 1cf85c570ed35..1c70f02226aaf 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/fullscreen/fullscreen.scss +++ b/x-pack/platform/plugins/private/canvas/public/components/fullscreen/fullscreen.scss @@ -17,7 +17,7 @@ body.canvas-isFullscreen { // set the background color .canvasLayout { - background: $euiColorInk; + background: $euiColorPlainDark; } // hide all the interface parts diff --git a/x-pack/platform/plugins/private/canvas/public/components/page_manager/page_manager.scss b/x-pack/platform/plugins/private/canvas/public/components/page_manager/page_manager.scss index dfff47c61eaa1..a2bd7b7b255b2 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/page_manager/page_manager.scss +++ b/x-pack/platform/plugins/private/canvas/public/components/page_manager/page_manager.scss @@ -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; } } diff --git a/x-pack/platform/plugins/private/canvas/public/style/main.scss b/x-pack/platform/plugins/private/canvas/public/style/main.scss index b53181bef85b9..0cf614f2585b8 100644 --- a/x-pack/platform/plugins/private/canvas/public/style/main.scss +++ b/x-pack/platform/plugins/private/canvas/public/style/main.scss @@ -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; } } diff --git a/x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js b/x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js index 1472530f241f6..fd17326341d6c 100644 --- a/x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js +++ b/x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js @@ -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; diff --git a/x-pack/platform/plugins/private/monitoring/public/components/sparkline/index.js b/x-pack/platform/plugins/private/monitoring/public/components/sparkline/index.js index 868bcfd7601d9..b6fdec3e1f686 100644 --- a/x-pack/platform/plugins/private/monitoring/public/components/sparkline/index.js +++ b/x-pack/platform/plugins/private/monitoring/public/components/sparkline/index.js @@ -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` diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/coloring/utils.ts b/x-pack/platform/plugins/shared/lens/public/shared_components/coloring/utils.ts index ecc5374b77575..1498f06c6a607 100644 --- a/x-pack/platform/plugins/shared/lens/public/shared_components/coloring/utils.ts +++ b/x-pack/platform/plugins/shared/lens/public/shared_components/coloring/utils.ts @@ -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; diff --git a/x-pack/platform/plugins/shared/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss b/x-pack/platform/plugins/shared/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss index 82e2489d96210..b2732e2756870 100644 --- a/x-pack/platform/plugins/shared/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss +++ b/x-pack/platform/plugins/shared/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss @@ -1,5 +1,5 @@ .mapKeydownScrollZoom { - background: transparentize($euiColorInk, .5); + background: transparentize($euiColorPlainDark, .5); left: 0; right: 0; top: 0; diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx index 67a5bca1ef131..8ed4b8411886b 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx @@ -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), diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx index bac68571dccb0..d067e6fa3da91 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx @@ -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 ( diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts index dceda53fbb12a..28a1bcfdd3abe 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts @@ -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, diff --git a/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx b/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx index 0de8a1f49520e..114295e745b6d 100644 --- a/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx +++ b/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx @@ -287,7 +287,7 @@ export const ControlGeneralViewResponse = ({ {i18n.actions}: {response.actions?.map((action, i) => ( - + {action[0].toUpperCase() + action.slice(1)} {i !== (response.actions?.length || 0) - 1 && ', '} diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx index 3ae14ccdf3b36..b516b0ec8dfff 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx @@ -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} { diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts index 4d603776ea537..72bb32f14049c 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts @@ -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, diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts index f200f0b568573..f94023386ffc0 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts @@ -94,7 +94,7 @@ export const useButtonStyles = () => { textDecoration: 'none', }, '&.isExpanded': { - color: colors.ghost, + color: colors.textGhost, background: colors.backgroundFilledAccentSecondary, '&:hover, &:focus': { background: `${colors.backgroundFilledAccentSecondary}`, diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/hooks.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/hooks.ts index 1947cd436738e..8e169c7b3aabf 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/hooks.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/hooks.ts @@ -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, diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts index 5fe1c5744d45e..a80590081ff21 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts @@ -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 { diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_text_sizer/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_text_sizer/styles.ts index bef6a84352fb9..d3c5b01e8ea94 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/tty_text_sizer/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_text_sizer/styles.ts @@ -16,7 +16,7 @@ export const useStyles = () => { const ratio: CSSObject = { fontSize: size.m, - color: colors.ghost, + color: colors.textGhost, }; const separator: CSSObject = {