-
+
{
- const { euiTheme } = euiThemeContext;
+ const { euiTheme, highContrastMode } = euiThemeContext;
const formVars = euiFormCustomControlVariables(euiThemeContext);
const colors = {
on: formVars.colors.selected,
- off: formVars.colors.unselectedBorder,
+ off: highContrastMode
+ ? euiTheme.colors.darkShade
+ : formVars.colors.unselectedBorder,
disabled: formVars.colors.disabled,
thumb: formVars.colors.selectedIcon,
thumbBorder: formVars.colors.unselectedBorder,
@@ -142,7 +144,10 @@ const buttonStyles = (
};
};
-const bodyStyles = ({ colorMode }: UseEuiTheme, { colors }: EuiSwitchVars) => {
+const bodyStyles = (
+ { colorMode, highContrastMode, euiTheme }: UseEuiTheme,
+ { colors }: EuiSwitchVars
+) => {
// This is probably very extra, but the visual weight of the default
// disabled custom control feels different in light mode depending
// on the size of the switch, so I'm tinting it based on that.
@@ -152,6 +157,7 @@ const bodyStyles = ({ colorMode }: UseEuiTheme, { colors }: EuiSwitchVars) => {
background-color: ${colorMode === 'DARK'
? colors.disabled
: tint(colors.disabled, tintAmount)};
+ ${highContrastMode ? `border: ${euiTheme.border.thin};` : ''}
`;
return {
@@ -161,10 +167,19 @@ const bodyStyles = ({ colorMode }: UseEuiTheme, { colors }: EuiSwitchVars) => {
overflow: hidden;
border-radius: inherit;
pointer-events: none; /* Required for Kibana's Selenium driver to be able to click switches in FTR tests */
+ ${highContrastMode === 'forced' // Windows high contrast mode
+ ? `border: ${euiTheme.border.thin};`
+ : ''}
`,
- on: css`
- background-color: ${colors.on};
- `,
+ on:
+ highContrastMode === 'forced'
+ ? css`
+ background-color: ${euiTheme.border.color};
+ forced-color-adjust: none;
+ `
+ : css`
+ background-color: ${colors.on};
+ `,
off: css`
background-color: ${colors.off};
`,
diff --git a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index b2361d96bea..c3dc5b5acb0 100644
--- a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`EuiKeyPadMenuItem checkable renders as radio 1`] = `
>
{
- const { euiTheme } = euiThemeContext;
+ const { euiTheme, highContrastMode } = euiThemeContext;
return {
// Base
@@ -26,7 +30,6 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('padding-vertical', euiTheme.size.base)}
background-color: ${euiTheme.colors.emptyShade};
${logicalCSS('width', '100%')}
-
${euiTextBreakWord()} /* Prevent long lines from overflowing */
&:hover,
@@ -43,18 +46,41 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('right', euiTheme.size.base)}
`,
// Variants
- primary: css`
- ${logicalCSS('border-top', `2px solid ${euiTheme.colors.primary}`)}
- `,
- success: css`
- ${logicalCSS('border-top', `2px solid ${euiTheme.colors.success}`)}
- `,
- warning: css`
- ${logicalCSS('border-top', `2px solid ${euiTheme.colors.warning}`)}
- `,
- danger: css`
- ${logicalCSS('border-top', `2px solid ${euiTheme.colors.danger}`)}
- `,
+ colors: {
+ _getStyles: (color: string) => {
+ // Increase color/border thickness for all high contrast modes
+ const borderWidth = highContrastMode
+ ? mathWithUnits(euiTheme.border.width.thick, (x) => x * 2)
+ : euiTheme.border.width.thick;
+
+ return highContrastMode !== 'forced'
+ ? logicalCSS('border-top', `${borderWidth} solid ${color}`)
+ : // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
+ `overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ ${logicalCSS('top', 0)}
+ ${logicalCSS('horizontal', 0)}
+ ${logicalCSS('height', borderWidth)}
+ background-color: ${color};
+ forced-color-adjust: none;
+ }`;
+ },
+ get primary() {
+ return css(this._getStyles(euiTheme.colors.primary));
+ },
+ get success() {
+ return css(this._getStyles(euiTheme.colors.success));
+ },
+ get warning() {
+ return css(this._getStyles(euiTheme.colors.warning));
+ },
+ get danger() {
+ return css(this._getStyles(euiTheme.colors.danger));
+ },
+ },
};
};
diff --git a/packages/eui/src/components/toast/toast.tsx b/packages/eui/src/components/toast/toast.tsx
index e8f555aa74a..44a29b95728 100644
--- a/packages/eui/src/components/toast/toast.tsx
+++ b/packages/eui/src/components/toast/toast.tsx
@@ -42,7 +42,7 @@ export const EuiToast: FunctionComponent = ({
...rest
}) => {
const baseStyles = useEuiMemoizedStyles(euiToastStyles);
- const baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+ const baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
const headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
const headerCss = [
headerStyles.euiToastHeader,