[SPIKE] Increase form control borders to 3:1 WCAG AA contrast ratios

packages/eui/src/components/form/file_picker/file_picker.styles.ts

@@ -98,14 +98,18 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextTruncate()}
       color: ${euiTheme.colors.text};
       border: ${euiTheme.border.width.thick} dashed
-        var(--euiFormControlStateColor, ${euiTheme.colors.lightShade});
+        var(--euiFormControlStateColor, ${formVariables.borderColor});
 
       ${euiCanAnimate} {
         transition: border-color ${euiTheme.animation.fast} ease-in,
           background-color ${euiTheme.animation.fast} ease-in;
       }
     `,
-    disabled: css(formStyles.disabled),
+    disabled: css`
+      --euiFormControlStateColor: ${formVariables.borderDisabledColor};
+      ${formStyles.disabled}
+      box-shadow: none;
+    `,
 
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,

packages/eui/src/components/form/form.styles.test.tsx

@@ -30,7 +30,8 @@ describe('euiFormVariables', () => {
         "backgroundColor": "#f9fbfd",
         "backgroundDisabledColor": "#eef1f7",
         "backgroundReadOnlyColor": "#FFF",
-        "borderColor": "rgba(32,38,47,0.1)",
+        "borderColor": "rgba(38,43,53,0.5)",
+        "borderDisabledColor": "rgba(38,43,53,0.2)",
         "controlBorderRadius": "6px",
         "controlBoxShadow": "0 0 transparent",
         "controlCompressedBorderRadius": "4px",
@@ -102,6 +103,7 @@ describe('euiFormControlStyles', () => {
           /* Required for Safari */
           -webkit-text-fill-color: #98A2B3;
           background-color: #eef1f7;
+          box-shadow: inset 0 0 0 1px rgba(38,43,53,0.2);
           cursor: not-allowed;
 
 
@@ -143,7 +145,7 @@ describe('euiFormControlStyles', () => {
           ",
         "inGroup": "
             block-size: 100%;
-            box-shadow: none;
+            box-shadow: none !important;
             border-radius: 0;
           ",
         "invalid": "
@@ -157,6 +159,7 @@ describe('euiFormControlStyles', () => {
 
           background-color: #FFF;
           --euiFormControlStateColor: transparent;
+          box-shadow: inset 0 0 0 1px rgba(38,43,53,0.2);
         ",
         "shared": "
 
@@ -190,7 +193,7 @@ describe('euiFormControlStyles', () => {
 
           /* We use inset box-shadow instead of border to skip extra hight calculations */
           border: none;
-          box-shadow: inset 0 0 0 1px rgba(32,38,47,0.1);
+          box-shadow: inset 0 0 0 1px rgba(38,43,53,0.5);
           background-color: #f9fbfd;
 
           background-repeat: no-repeat;

packages/eui/src/components/form/form.styles.ts

@@ -51,10 +51,13 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
     backgroundReadOnlyColor: euiTheme.colors.emptyShade,
     borderColor: transparentize(
       colorMode === 'DARK'
-        ? euiTheme.colors.ghost
-        : darken(euiTheme.border.color, 4),
-      0.1
+        ? tint(euiTheme.border.color, 0.62)
+        : darken(euiTheme.border.color, 3.85),
+      0.5
     ),
+    get borderDisabledColor() {
+      return transparentize(this.borderColor, 0.2);
+    },
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(
@@ -145,7 +148,7 @@ export const euiFormControlStyles = (euiThemeContext: UseEuiTheme) => {
     // In group
     inGroup: `
       ${logicalCSS('height', '100%')}
-      box-shadow: none;
+      box-shadow: none !important;
       border-radius: 0;
     `,
 
@@ -231,7 +234,7 @@ export const euiFormControlDefaultShadow = (euiThemeContext: UseEuiTheme) => {
   return `
     /* We use inset box-shadow instead of border to skip extra hight calculations */
     border: none;
-    box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${form.borderColor};
+    box-shadow: ${_borderShadow(euiThemeContext, form.borderColor)};
     background-color: ${form.backgroundColor};
 
     background-repeat: no-repeat;
@@ -280,6 +283,7 @@ export const euiFormControlDisabledStyles = (euiThemeContext: UseEuiTheme) => {
     /* Required for Safari */
     -webkit-text-fill-color: ${form.controlDisabledColor};
     background-color: ${form.backgroundDisabledColor};
+    box-shadow: ${_borderShadow(euiThemeContext, form.borderDisabledColor)};
     cursor: not-allowed;
 
     ${euiPlaceholderPerBrowser(`
@@ -299,6 +303,7 @@ export const euiFormControlReadOnlyStyles = (euiThemeContext: UseEuiTheme) => {
 
     background-color: ${form.backgroundReadOnlyColor};
     --euiFormControlStateColor: transparent;
+    box-shadow: ${_borderShadow(euiThemeContext, form.borderDisabledColor)};
   `;
 };
 
@@ -319,19 +324,20 @@ export const euiFormControlAutoFillStyles = (euiThemeContext: UseEuiTheme) => {
 
   // Re-create the border, since the above webkit box shadow overrides the default border box-shadow
   // + change the border color to match states, since the underline background gradient no longer works
-  const borderColor = transparentize(euiTheme.colors.primaryText, 0.2);
-  const invalidBorder = euiTheme.colors.danger;
-  const borderShadow = (color: string) =>
-    `inset 0 0 0 ${euiTheme.border.width.thin} ${color}`;
+  const autofillBorder = _borderShadow(
+    euiThemeContext,
+    transparentize(euiTheme.colors.primaryText, 0.2)
+  );
+  const invalidBorder = _borderShadow(euiThemeContext, euiTheme.colors.danger);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
   return `
     &:-webkit-autofill {
       -webkit-text-fill-color: ${textColor};
-      -webkit-box-shadow: ${borderShadow(borderColor)}, ${backgroundShadow};
+      -webkit-box-shadow: ${autofillBorder}, ${backgroundShadow};
 
       &:invalid {
-        -webkit-box-shadow: ${borderShadow(invalidBorder)}, ${backgroundShadow};
+        -webkit-box-shadow: ${invalidBorder}, ${backgroundShadow};
       }
     }
   `;
@@ -344,3 +350,7 @@ const euiPlaceholderPerBrowser = (content: string) => `
   &:-moz-placeholder { ${content} }
   &::placeholder { ${content} }
 `;
+
+// EUI uses inset box-shadow instead of border to skip extra hight calculations
+const _borderShadow = ({ euiTheme }: UseEuiTheme, color: string) =>
+  `inset 0 0 0 ${euiTheme.border.width.thin} ${color}`;

packages/eui/src/components/form/form_control_layout/_form_control_layout.scss

@@ -194,7 +194,7 @@
     cursor: default;
     background: $euiFormInputGroupLabelBackground;
     border-color: transparent;
-    box-shadow: inset 0 0 0 1px $euiFormInputGroupLabelBackground;
+    box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
     input {
       background-color: $euiFormBackgroundReadOnlyColor;

packages/eui/src/components/selectable/selectable_list/_selectable_list.scss

@@ -13,7 +13,7 @@
 
 .euiSelectableList-bordered {
   overflow: hidden;
-  border: $euiBorderThin;
+  border: $euiBorderWidthThin solid $euiFormBorderColor;
   border-radius: $euiBorderRadius;
 }
 

packages/eui/src/global_styling/variables/_form.scss

@@ -29,9 +29,9 @@ $euiSwitchThumbSizeMini: $euiSwitchHeightMini !default;
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
 $euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default;
-$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default;
-$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
-$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
+$euiFormBorderOpaqueColor: $euiBorderColor !default;
+$euiFormBorderColor: transparentize(shadeOrTint($euiFormBorderOpaqueColor, 82%, 62%), .5) !default;
+$euiFormBorderDisabledColor: transparentize($euiFormBorderColor, .3) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;

packages/eui/src/test/emotion-prefix.ts

@@ -12,7 +12,7 @@ export const replaceEmotionPrefix = (selector: string) => {
   // Contains `eui[ComponentName] or `Eui[ComponentName]`.
   // Capture the component name (from above) and all variant additions until the end of the string.
   const euiMatch = selector.match(
-    /css-[\d\w]{5,}-(?<euiComponent>[eE]ui[A-Z][\d\w-]*$)/
+    /css-[\d\w]+-(?<euiComponent>[eE]ui[A-Z][\d\w-]*$)/
   );
   // Use the captured group (`euiComponent`) if available and prepend with `emotion-`,
   // otherwise use the full selector.