diff --git a/packages/eui/changelogs/upcoming/8100.md b/packages/eui/changelogs/upcoming/8100.md new file mode 100644 index 00000000000..374b49b9826 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8100.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s missing input borders diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts index 239af56a6a7..e1e7fa9de36 100644 --- a/packages/eui/src/components/header/header.styles.ts +++ b/packages/eui/src/components/header/header.styles.ts @@ -80,6 +80,16 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => { ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28); + // Specific color overrides for EuiSelectableTemplateSitewide + const selectableSitewide = { + color: euiTheme.colors.ghost, + borderColor: transparentize(euiTheme.colors.ghost, 0.3), + placeholderColor: makeHighContrastColor( + controlPlaceholderText, + 8 + )(backgroundColor), + }; + return ` background-color: ${backgroundColor}; @@ -112,21 +122,28 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => { .euiSelectableTemplateSitewide .euiFormControlLayout { background-color: transparent; + input { + box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${ + selectableSitewide.borderColor + }; + } + &--group { - border-color: ${transparentize(euiTheme.colors.ghost, 0.3)}; + border-color: ${selectableSitewide.borderColor}; + + input { + box-shadow: none; + } } &:not(:focus-within) { /* Increase contrast of filled text to be more than placeholder text */ - color: ${euiTheme.colors.ghost}; + color: ${selectableSitewide.color}; input { /* Increase contrast of placeholder text */ &::placeholder { - color: ${makeHighContrastColor( - controlPlaceholderText, - 8 - )(backgroundColor)}; + color: ${selectableSitewide.placeholderColor}; } /* Inherit color from form control layout */