From 37ff60a6aa1d4f32b780d956b99e7c2908a39995 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 21 Apr 2023 14:58:54 -0400 Subject: [PATCH 01/12] [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 --- src/components/form/form.styles.ts | 2 +- src/global_styling/variables/_form.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts index 2c51e422754..dc5c018ed85 100644 --- a/src/components/form/form.styles.ts +++ b/src/components/form/form.styles.ts @@ -59,7 +59,7 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { ? shade(euiTheme.colors.mediumShade, 0.38) : tint(euiTheme.colors.mediumShade, 0.485), customControlBorderColor: isColorDark - ? shade(euiTheme.colors.lightestShade, 0.18) + ? shade(euiTheme.colors.lightestShade, 0.4) : tint(euiTheme.colors.lightestShade, 0.3), }; diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index a20d3ed074d..f377d660d80 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -33,7 +33,7 @@ $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%, 30%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; $euiFormControlBoxShadow: 0 0 transparent !default; $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default; From cd593084e6512fb27ea7ef749a9a75e5490e1b0e Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 21 Apr 2023 15:02:46 -0400 Subject: [PATCH 02/12] Forgot to add test update --- src/components/form/form.styles.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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'); }); }); From 670df8dda3e0996c8a2c5ab87d65b8d64d9b8b8b Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 21 Apr 2023 15:17:33 -0400 Subject: [PATCH 03/12] [Selection Form Controls] Increase the tint threshhold for EuiForm selection controls to meet WCAG AA guidelines for graphical objects and user interface components. --- src/components/form/form.styles.ts | 2 +- src/global_styling/variables/_form.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts index dc5c018ed85..fdfb4840690 100644 --- a/src/components/form/form.styles.ts +++ b/src/components/form/form.styles.ts @@ -60,7 +60,7 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { : tint(euiTheme.colors.mediumShade, 0.485), customControlBorderColor: isColorDark ? shade(euiTheme.colors.lightestShade, 0.4) - : tint(euiTheme.colors.lightestShade, 0.3), + : tint(euiTheme.colors.lightestShade, 0.31), }; const controlLayout = { diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index f377d660d80..0c1d484add6 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -33,7 +33,7 @@ $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, 40%, 30%) !default; +$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; $euiFormControlBoxShadow: 0 0 transparent !default; $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default; From c93ea406cb321b70bb38651b11978cfbe9eda4e3 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 21 Apr 2023 16:43:13 -0400 Subject: [PATCH 04/12] Change the euiSwitchOff color to a darker shade. This changes the switch background color and allows it to meet WCAG AA UI guidelines --- src/global_styling/variables/_form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index 0c1d484add6..e86d3990064 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -39,7 +39,7 @@ $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: ( From 74af05bec65dd450a20c6bb08fe2f588fc7655ef Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 21 Apr 2023 17:15:30 -0400 Subject: [PATCH 05/12] CHANGELOG --- upcoming_changelogs/6729.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/6729.md diff --git a/upcoming_changelogs/6729.md b/upcoming_changelogs/6729.md new file mode 100644 index 00000000000..efdcd814b7c --- /dev/null +++ b/upcoming_changelogs/6729.md @@ -0,0 +1 @@ +- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` to meet WCAG AA guidelines. \ No newline at end of file From 40957dbc210c67e8d3d1ee26f0163895699373f0 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Mon, 24 Apr 2023 15:46:33 -0400 Subject: [PATCH 06/12] [EuiSwitch] Updated the color scheme of the disabled styling for EuiSwitch in lightmode to help distinguish the state --- .prettierrc | 3 +- src/components/form/switch/_switch.scss | 49 +++++++++++++------------ src/global_styling/variables/_form.scss | 3 ++ 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/.prettierrc b/.prettierrc index b2f0fa8f00e..f641f659f7f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,6 @@ "printWidth": 80, "semi": true, "singleQuote": true, - "trailingComma": "es5" + "trailingComma": "es5", + "editor.formatOnSave": true } diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 15a3254acb8..9ddf0c895ad 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -24,30 +24,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 +43,31 @@ } } } + + &:disabled { + &:hover, + ~ .euiSwitch__label:hover { + cursor: not-allowed; + } + + .euiSwitch__body { + background-color: $euiSwitchOffDisabledColor; + } + + .euiSwitch__thumb { + background-color: $euiSwitchOffThumbDisabledColor; + border-color: $euiSwitchOffThumbDisabledBorderColor; + box-shadow: none; + } + + .euiSwitch__icon { + fill: $euiColorDarkShade; + } + + + .euiSwitch__label { + color: $euiFormControlDisabledColor; + } + } } .euiSwitch__body { diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index e86d3990064..b324f919dc7 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -40,6 +40,9 @@ $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $eui $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default; $euiFormInputGroupBorder: none !default; $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .25), transparentize($euiColorDarkShade, .4)) !default; +$euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4)) !default; +$euiSwitchOffThumbDisabledColor: rgba(0,0,0,0) !default; +$euiSwitchOffThumbDisabledBorderColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade) !default; // Icons sizes $euiFormControlIconSizes: ( From a528e8b7fe7b9666916975046503845fd227919e Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Mon, 24 Apr 2023 15:56:53 -0400 Subject: [PATCH 07/12] Delete .prettierrc Didn't mean to add my `prettierrc` --- .prettierrc | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index f641f659f7f..00000000000 --- a/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "parser": "typescript", - "printWidth": 80, - "semi": true, - "singleQuote": true, - "trailingComma": "es5", - "editor.formatOnSave": true -} From 48ed465fc949579f6ca0ba7ca7b344a7b21fb032 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Mon, 24 Apr 2023 15:57:50 -0400 Subject: [PATCH 08/12] Revert "Delete .prettierrc" This reverts commit a528e8b7fe7b9666916975046503845fd227919e. --- .prettierrc | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000000..f641f659f7f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "parser": "typescript", + "printWidth": 80, + "semi": true, + "singleQuote": true, + "trailingComma": "es5", + "editor.formatOnSave": true +} From 27961fa6cc822eda6bcb3558a92a86f1a34a9cd0 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Mon, 24 Apr 2023 15:58:26 -0400 Subject: [PATCH 09/12] Revert prettier RC changes --- .prettierrc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.prettierrc b/.prettierrc index f641f659f7f..b2f0fa8f00e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,6 +3,5 @@ "printWidth": 80, "semi": true, "singleQuote": true, - "trailingComma": "es5", - "editor.formatOnSave": true + "trailingComma": "es5" } From ab65814794ee5e0f2c59be03d1a832b41afba048 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Mon, 24 Apr 2023 18:40:07 -0400 Subject: [PATCH 10/12] [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 --- src/components/form/form.styles.ts | 2 +- src/components/form/switch/_switch.scss | 8 ++++---- src/global_styling/variables/_form.scss | 3 --- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts index fdfb4840690..82b2323fde5 100644 --- a/src/components/form/form.styles.ts +++ b/src/components/form/form.styles.ts @@ -53,7 +53,7 @@ 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) diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 9ddf0c895ad..8da98620d24 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -51,12 +51,12 @@ } .euiSwitch__body { - background-color: $euiSwitchOffDisabledColor; + background-color: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4)); } .euiSwitch__thumb { - background-color: $euiSwitchOffThumbDisabledColor; - border-color: $euiSwitchOffThumbDisabledBorderColor; + background-color: rgba(0,0,0,0); + border-color: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade); box-shadow: none; } @@ -108,7 +108,7 @@ width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS; height: $euiSwitchIconHeight; transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce; - fill: $euiTextColor; + fill: $euiColorEmptyShade; } .euiSwitch__icon--checked { diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index b324f919dc7..e86d3990064 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -40,9 +40,6 @@ $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $eui $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default; $euiFormInputGroupBorder: none !default; $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .25), transparentize($euiColorDarkShade, .4)) !default; -$euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4)) !default; -$euiSwitchOffThumbDisabledColor: rgba(0,0,0,0) !default; -$euiSwitchOffThumbDisabledBorderColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade) !default; // Icons sizes $euiFormControlIconSizes: ( From 2a960c64e69592667780f482963262657e51d5e7 Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Tue, 25 Apr 2023 12:11:09 -0400 Subject: [PATCH 11/12] Update upcoming_changelogs/6729.md Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- upcoming_changelogs/6729.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming_changelogs/6729.md b/upcoming_changelogs/6729.md index efdcd814b7c..2d842eea26c 100644 --- a/upcoming_changelogs/6729.md +++ b/upcoming_changelogs/6729.md @@ -1 +1 @@ -- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` to meet WCAG AA guidelines. \ No newline at end of file +- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` in their unchecked states to meet WCAG AA guidelines. \ No newline at end of file From e442597eac09d465edfb5874b6d8d5db26f58d55 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 25 Apr 2023 12:39:29 -0400 Subject: [PATCH 12/12] [EuiSwitch] Add block scoped variabled to EuiSwitch for reused colors.: --- src/components/form/switch/_switch.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 8da98620d24..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; @@ -51,12 +54,12 @@ } .euiSwitch__body { - background-color: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4)); + background-color: $euiSwitchOffDisabledColor; } .euiSwitch__thumb { background-color: rgba(0,0,0,0); - border-color: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade); + border-color: $euiSwitchDisabledThumbColor; box-shadow: none; } @@ -195,7 +198,7 @@ .euiSwitch__button[aria-checked='false'], .euiSwitch__button[aria-checked='true']:disabled { .euiSwitch__thumb { - border-color: $euiFormCustomControlBorderColor; + border-color: $euiSwitchDisabledThumbColor; } }