[EuiForm] Increase Contrast on EuiForm Section Controls to Pass WCA…

…G 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 a528e8b.

* 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

@@ -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');
   });
 });
 

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 = {

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

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: (

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.