diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png index ca4c74b7edb..b81a5ac67b0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png index 5d5331b778e..fd3625c35a6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png differ diff --git a/packages/eui/changelogs/upcoming/8496.md b/packages/eui/changelogs/upcoming/8496.md new file mode 100644 index 00000000000..80dffd33c8e --- /dev/null +++ b/packages/eui/changelogs/upcoming/8496.md @@ -0,0 +1,12 @@ +**Bug fixes** + +- Fixes wrong `colorMode` styling for the search in `EuiHeader` with `theme="dark"` + +**Accessibility** + +- Improves text color contrast for `EuiButton` with `color="warning"` in high contrast mode +- Improves contrast and visible distinction of the following components in high contrast mode: + - `EuiCode` + - `EuiBadge` + - `EuiBetaBadge` + - `EuiNotificationBadge` \ No newline at end of file diff --git a/packages/eui/src/components/badge/badge.styles.ts b/packages/eui/src/components/badge/badge.styles.ts index 2f098d7a51c..3e9bbc044f4 100644 --- a/packages/eui/src/components/badge/badge.styles.ts +++ b/packages/eui/src/components/badge/badge.styles.ts @@ -99,7 +99,10 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => { `, // Colors - default: css(setBadgeColorVars(badgeColors.default)), + default: css` + ${setBadgeColorVars(badgeColors.default)} + border-color: ${badgeColors.default.borderColor}; + `, hollow: css` ${setBadgeColorVars(badgeColors.hollow)} border-color: ${badgeColors.hollow.borderColor}; @@ -111,6 +114,7 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => { success: css(setBadgeColorVars(badgeColors.success)), disabled: css` ${setBadgeColorVars(badgeColors.disabled)} + border-color: ${badgeColors.disabled.borderColor}; /* Override selection color, since disabled badges have rgba backgrounds with opacity */ *::selection { diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index ef668e5abe5..c162ea1d280 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/packages/eui/src/components/badge/color_utils.ts @@ -16,7 +16,12 @@ import { import { chromaValid, parseColor } from '../color_picker/utils'; export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { - const { euiTheme } = euiThemeContext; + const { euiTheme, highContrastMode } = euiThemeContext; + + const badgeColorsAccentText = getBadgeColors( + euiThemeContext, + euiTheme.colors.textAccent + ); return { // Colors shared between buttons and badges @@ -26,23 +31,36 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { danger: euiButtonFillColor(euiThemeContext, 'danger'), accent: euiButtonFillColor(euiThemeContext, 'accent'), accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'), - disabled: euiButtonColor(euiThemeContext, 'disabled'), + disabled: { + ...euiButtonColor(euiThemeContext, 'disabled'), + borderColor: highContrastMode ? euiTheme.colors.textDisabled : '', + }, // Colors unique to badges - default: getBadgeColors( - euiThemeContext, - euiTheme.components.badgeBackground - ), + default: { + ...getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground), + borderColor: highContrastMode ? euiTheme.border.color : '', + }, // Hollow has a border and is used for autocompleters and beta badges hollow: { ...getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade), - borderColor: euiTheme.components.badgeBorderColorHollow, + borderColor: highContrastMode + ? euiTheme.border.color + : euiTheme.components.badgeBorderColorHollow, }, // Colors used by beta and notification badges - subdued: getBadgeColors( - euiThemeContext, - euiTheme.components.badgeBackgroundSubdued - ), - accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent), + subdued: { + ...getBadgeColors( + euiThemeContext, + euiTheme.components.badgeBackgroundSubdued + ), + borderColor: highContrastMode ? euiTheme.border.color : '', + }, + accentText: { + ...badgeColorsAccentText, + borderColor: highContrastMode + ? badgeColorsAccentText.backgroundColor + : '', + }, accentSecondaryText: getBadgeColors( euiThemeContext, euiTheme.colors.textAccentSecondary diff --git a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts index 722ba4aeda8..70ae9bf80c6 100644 --- a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts +++ b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts @@ -32,7 +32,7 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('padding-horizontal', euiTheme.size.xs)} border-radius: ${euiTheme.border.radius.small}; ${highContrastModeStyles(euiThemeContext, { - forced: ` + preferred: ` border: ${euiTheme.border.thin}; overflow: hidden; /* Fix text clipping */ `, diff --git a/packages/eui/src/components/code/code.styles.ts b/packages/eui/src/components/code/code.styles.ts index 62acdd6fd24..41d6bfb19b6 100644 --- a/packages/eui/src/components/code/code.styles.ts +++ b/packages/eui/src/components/code/code.styles.ts @@ -7,7 +7,10 @@ */ import { css } from '@emotion/react'; -import { logicalShorthandCSS } from '../../global_styling'; +import { + highContrastModeStyles, + logicalShorthandCSS, +} from '../../global_styling'; import { UseEuiTheme } from '../../services'; import { euiCodeSyntaxVariables } from './code_syntax.styles'; @@ -23,7 +26,12 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => { font-family: ${euiTheme.font.familyCode}; font-size: 0.9em; /* 1 */ ${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */ - background: ${codeSyntaxVariables.backgroundColor}; + background-color: ${codeSyntaxVariables.backgroundColor}; + ${highContrastModeStyles(euiThemeContext, { + forced: ` + border: ${euiTheme.border.thin}; + `, + })} border-radius: ${euiTheme.border.radius.small}; font-weight: ${euiTheme.font.weight.bold}; color: ${codeSyntaxVariables.inlineCodeColor}; diff --git a/packages/eui/src/components/code/code_syntax.styles.ts b/packages/eui/src/components/code/code_syntax.styles.ts index 14d22f9d2a7..f817422f22f 100644 --- a/packages/eui/src/components/code/code_syntax.styles.ts +++ b/packages/eui/src/components/code/code_syntax.styles.ts @@ -15,9 +15,11 @@ export const euiCodeTextColors = ({ euiTheme }: UseEuiTheme) => { }; }; -// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles` +/** + * These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles` + */ export const euiCodeSyntaxVariables = (euiThemeContext: UseEuiTheme) => { - const { euiTheme } = euiThemeContext; + const { euiTheme, highContrastMode } = euiThemeContext; const { backgroundColor, color } = euiCodeTextColors(euiThemeContext); return { @@ -49,7 +51,7 @@ export const euiCodeSyntaxVariables = (euiThemeContext: UseEuiTheme) => { get tokensCss() { return ` .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) { - opacity: .7; + opacity: ${highContrastMode ? '1' : '.7'}; } .token.comment, diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts index 490234050d1..0c254402da4 100644 --- a/packages/eui/src/components/header/header.styles.ts +++ b/packages/eui/src/components/header/header.styles.ts @@ -125,8 +125,10 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => { &--group { border-color: ${ + // the header is in a faux dark mode, we can't rely on color + // switch tokens as they'd be in the wrong color mode highContrastMode - ? euiTheme.border.color + ? euiTheme.colors.plainLight : euiTheme.components.headerDarkSearchBorderColor }; @@ -135,6 +137,10 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => { } } + &__append { + border-color: ${highContrastMode ? euiTheme.colors.plainLight : ''} + } + &:not(:focus-within) { /* Increase contrast of filled text to be more than placeholder text */ color: ${selectableSitewide.color}; diff --git a/packages/eui/src/global_styling/mixins/_button.ts b/packages/eui/src/global_styling/mixins/_button.ts index 054178dcdde..c9b6ba95599 100644 --- a/packages/eui/src/global_styling/mixins/_button.ts +++ b/packages/eui/src/global_styling/mixins/_button.ts @@ -81,7 +81,7 @@ export const euiButtonFillColor = ( euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled' ) => { - const { euiTheme } = euiThemeContext; + const { euiTheme, highContrastMode } = euiThemeContext; const backgroundTokenName = getTokenName( 'backgroundFilled', @@ -93,7 +93,11 @@ export const euiButtonFillColor = ( color ) as keyof _EuiThemeButtonColors; - const foreground = euiTheme.components.buttons[textColorTokenName]; + const foreground = highContrastMode + ? color === 'warning' + ? euiTheme.colors.ink + : euiTheme.colors.textInverse + : euiTheme.components.buttons[textColorTokenName]; const background = euiTheme.components.buttons[backgroundTokenName]; return {