[HCM] Component styles adjustments #1

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`

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 {

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

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 */
         `,

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};

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,

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};

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 {