From d39c0e988409f90f62af57174590044664b2bfce Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Tue, 25 Apr 2023 14:01:59 -0400 Subject: [PATCH] [EuiForm] Increase Contrast on `EuiForm` Section Controls to Pass WCAG AA Standards (#6729) * [Selection Form Controls] Increase the shade threshhold for EuiForm selection controls to meet WCAG AA guidelines for graphical objects and user interface components. Updated the hard coded form styles test case that targets customControlBorderColor with the updated HEX value * Forgot to add test update * [Selection Form Controls] Increase the tint threshhold for EuiForm selection controls to meet WCAG AA guidelines for graphical objects and user interface components. * Change the euiSwitchOff color to a darker shade. This changes the switch background color and allows it to meet WCAG AA UI guidelines * CHANGELOG * [EuiSwitch] Updated the color scheme of the disabled styling for EuiSwitch in lightmode to help distinguish the state * Delete .prettierrc Didn't mean to add my `prettierrc` * Revert "Delete .prettierrc" This reverts commit a528e8b7fe7b9666916975046503845fd227919e. * Revert prettier RC changes * [EuiSwitch] - Removed individual EuiSwitch SASS keys in favor of adding them directly to the component. - Updated icon color so that icons appear white for both states in light mode and black in dark mode - Misc comment updates * Update upcoming_changelogs/6729.md Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [EuiSwitch] Add block scoped variabled to EuiSwitch for reused colors.: --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- src/components/form/form.styles.test.tsx | 2 +- src/components/form/form.styles.ts | 6 +-- src/components/form/switch/_switch.scss | 56 +++++++++++++----------- src/global_styling/variables/_form.scss | 4 +- upcoming_changelogs/6729.md | 1 + 5 files changed, 37 insertions(+), 32 deletions(-) create mode 100644 upcoming_changelogs/6729.md diff --git a/src/components/form/form.styles.test.tsx b/src/components/form/form.styles.test.tsx index a673708fd9d..847402061b1 100644 --- a/src/components/form/form.styles.test.tsx +++ b/src/components/form/form.styles.test.tsx @@ -68,7 +68,7 @@ describe('euiFormVariables', () => { expect(result.current.controlPlaceholderText).toEqual('#878b95'); expect(result.current.inputGroupLabelBackground).toEqual('#2c2f37'); expect(result.current.customControlDisabledIconColor).toEqual('#33373f'); - expect(result.current.customControlBorderColor).toEqual('#1e1f26'); + expect(result.current.customControlBorderColor).toEqual('#16171c'); }); }); diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts index 2c51e422754..82b2323fde5 100644 --- a/src/components/form/form.styles.ts +++ b/src/components/form/form.styles.ts @@ -53,14 +53,14 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { inputGroupBorder: 'none', }; - // Colors - specific for checkboxes and radios + // Colors - specific to checkboxes, radios, switches, and range thumbs const customControlColors = { customControlDisabledIconColor: isColorDark ? shade(euiTheme.colors.mediumShade, 0.38) : tint(euiTheme.colors.mediumShade, 0.485), customControlBorderColor: isColorDark - ? shade(euiTheme.colors.lightestShade, 0.18) - : tint(euiTheme.colors.lightestShade, 0.3), + ? shade(euiTheme.colors.lightestShade, 0.4) + : tint(euiTheme.colors.lightestShade, 0.31), }; const controlLayout = { diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 15a3254acb8..ad96a2686e7 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -2,6 +2,9 @@ // stylelint-disable max-nesting-depth .euiSwitch { + $euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4)); + $euiSwitchDisabledThumbColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade); + position: relative; display: inline-flex; align-items: flex-start; @@ -24,30 +27,6 @@ @include euiCustomControlFocused; } - &:disabled { - &:hover, - ~ .euiSwitch__label:hover { - cursor: not-allowed; - } - - .euiSwitch__body { - background-color: $euiSwitchOffColor; - } - - .euiSwitch__thumb { - @include euiCustomControlDisabled; - background-color: $euiSwitchOffColor; - } - - .euiSwitch__icon { - fill: $euiFormCustomControlDisabledIconColor; - } - - + .euiSwitch__label { - color: $euiFormControlDisabledColor; - } - } - &[aria-checked='false'] { .euiSwitch__body { background-color: $euiSwitchOffColor; @@ -67,6 +46,31 @@ } } } + + &:disabled { + &:hover, + ~ .euiSwitch__label:hover { + cursor: not-allowed; + } + + .euiSwitch__body { + background-color: $euiSwitchOffDisabledColor; + } + + .euiSwitch__thumb { + background-color: rgba(0,0,0,0); + border-color: $euiSwitchDisabledThumbColor; + box-shadow: none; + } + + .euiSwitch__icon { + fill: $euiColorDarkShade; + } + + + .euiSwitch__label { + color: $euiFormControlDisabledColor; + } + } } .euiSwitch__body { @@ -107,7 +111,7 @@ width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS; height: $euiSwitchIconHeight; transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce; - fill: $euiTextColor; + fill: $euiColorEmptyShade; } .euiSwitch__icon--checked { @@ -194,7 +198,7 @@ .euiSwitch__button[aria-checked='false'], .euiSwitch__button[aria-checked='true']:disabled { .euiSwitch__thumb { - border-color: $euiFormCustomControlBorderColor; + border-color: $euiSwitchDisabledThumbColor; } } diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index a20d3ed074d..e86d3990064 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -33,13 +33,13 @@ $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 2 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade -$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default; +$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; $euiFormControlBoxShadow: 0 0 transparent !default; $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default; $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default; $euiFormInputGroupBorder: none !default; -$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default; +$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .25), transparentize($euiColorDarkShade, .4)) !default; // Icons sizes $euiFormControlIconSizes: ( diff --git a/upcoming_changelogs/6729.md b/upcoming_changelogs/6729.md new file mode 100644 index 00000000000..2d842eea26c --- /dev/null +++ b/upcoming_changelogs/6729.md @@ -0,0 +1 @@ +- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` in their unchecked states to meet WCAG AA guidelines. \ No newline at end of file