From 9d237e6cacbff099ff285ebfc82e0c3224bb7bf8 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 16:01:28 -0700 Subject: [PATCH 1/7] Update Emotion border color variable to meet WCAG AA 3:1 ratio requirement --- packages/eui/src/components/form/form.styles.test.tsx | 4 ++-- packages/eui/src/components/form/form.styles.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx index e0c40e47a06..0cca8631552 100644 --- a/packages/eui/src/components/form/form.styles.test.tsx +++ b/packages/eui/src/components/form/form.styles.test.tsx @@ -30,7 +30,7 @@ describe('euiFormVariables', () => { "backgroundColor": "#f9fbfd", "backgroundDisabledColor": "#eef1f7", "backgroundReadOnlyColor": "#FFF", - "borderColor": "rgba(32,38,47,0.1)", + "borderColor": "rgba(38,43,53,0.5)", "controlBorderRadius": "6px", "controlBoxShadow": "0 0 transparent", "controlCompressedBorderRadius": "4px", @@ -190,7 +190,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; diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts index d47b4940fcc..b7613c73537 100644 --- a/packages/eui/src/components/form/form.styles.ts +++ b/packages/eui/src/components/form/form.styles.ts @@ -51,9 +51,9 @@ 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 ), controlDisabledColor: euiTheme.colors.mediumShade, controlBoxShadow: '0 0 transparent', From 49b4877c690c5bf650aeaafccd6b65a4da25c2f1 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 16:01:54 -0700 Subject: [PATCH 2/7] Update Sass form border color variable to match - light mode is slightly different, presumably due to differences in shading/tinting logic --- packages/eui/src/global_styling/variables/_form.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss index e86d3990064..3a5c757b07e 100644 --- a/packages/eui/src/global_styling/variables/_form.scss +++ b/packages/eui/src/global_styling/variables/_form.scss @@ -29,8 +29,8 @@ $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; +$euiFormBorderOpaqueColor: $euiBorderColor !default; +$euiFormBorderColor: transparentize(shadeOrTint($euiFormBorderOpaqueColor, 82%, 62%), .5) !default; $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default; From d48e781281c472c69309baf0e5147b0335fbe0de Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 30 Jul 2024 08:30:54 -0700 Subject: [PATCH 3/7] Make Emotion snapshot serializer less fragile --- packages/eui/src/test/emotion-prefix.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/test/emotion-prefix.ts b/packages/eui/src/test/emotion-prefix.ts index b3d8460d06b..b45b12d6b54 100644 --- a/packages/eui/src/test/emotion-prefix.ts +++ b/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,}-(?[eE]ui[A-Z][\d\w-]*$)/ + /css-[\d\w]+-(?[eE]ui[A-Z][\d\w-]*$)/ ); // Use the captured group (`euiComponent`) if available and prepend with `emotion-`, // otherwise use the full selector. From 8589acebcea41fcdfb1e81e5460906b188e6c78f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 30 Jul 2024 09:09:40 -0700 Subject: [PATCH 4/7] Fix EuiFilePicker to use new higher contrast border color --- .../eui/src/components/form/file_picker/file_picker.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/form/file_picker/file_picker.styles.ts b/packages/eui/src/components/form/file_picker/file_picker.styles.ts index 59a9b08cf29..5ef8d6a18eb 100644 --- a/packages/eui/src/components/form/file_picker/file_picker.styles.ts +++ b/packages/eui/src/components/form/file_picker/file_picker.styles.ts @@ -98,7 +98,7 @@ 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, From ad3d3586fee5e69f9b84190e76caaf5665940653 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 30 Jul 2024 09:11:00 -0700 Subject: [PATCH 5/7] Fix layout groups to use new higher contrast colors when disabled, to match Emotion conversion --- .../form/form_control_layout/_form_control_layout.scss | 2 +- packages/eui/src/global_styling/variables/_form.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss index d94c5af5e36..06248f5f68d 100644 --- a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss +++ b/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; diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss index 3a5c757b07e..586015886f0 100644 --- a/packages/eui/src/global_styling/variables/_form.scss +++ b/packages/eui/src/global_styling/variables/_form.scss @@ -31,7 +31,7 @@ $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; $euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default; $euiFormBorderOpaqueColor: $euiBorderColor !default; $euiFormBorderColor: transparentize(shadeOrTint($euiFormBorderOpaqueColor, 82%, 62%), .5) !default; -$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; +$euiFormBorderDisabledColor: $euiFormBorderColor !default; $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; From 06d3119ea242d1b5bfadbb864415b4ef569cfb3b Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 30 Jul 2024 09:22:32 -0700 Subject: [PATCH 6/7] [SPIKE] Reduce transparency on disabled/readonly form controls - not 100% on this, may revert --- .../form/file_picker/file_picker.styles.ts | 6 ++++- .../src/components/form/form.styles.test.tsx | 5 +++- .../eui/src/components/form/form.styles.ts | 26 +++++++++++++------ .../src/global_styling/variables/_form.scss | 2 +- 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/eui/src/components/form/file_picker/file_picker.styles.ts b/packages/eui/src/components/form/file_picker/file_picker.styles.ts index 5ef8d6a18eb..de99d1d84fa 100644 --- a/packages/eui/src/components/form/file_picker/file_picker.styles.ts +++ b/packages/eui/src/components/form/file_picker/file_picker.styles.ts @@ -105,7 +105,11 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => { 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, diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx index 0cca8631552..677348fd5c9 100644 --- a/packages/eui/src/components/form/form.styles.test.tsx +++ b/packages/eui/src/components/form/form.styles.test.tsx @@ -31,6 +31,7 @@ describe('euiFormVariables', () => { "backgroundDisabledColor": "#eef1f7", "backgroundReadOnlyColor": "#FFF", "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": " diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts index b7613c73537..9d83b0730aa 100644 --- a/packages/eui/src/components/form/form.styles.ts +++ b/packages/eui/src/components/form/form.styles.ts @@ -55,6 +55,9 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { : 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}`; diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss index 586015886f0..a824e5bfc5d 100644 --- a/packages/eui/src/global_styling/variables/_form.scss +++ b/packages/eui/src/global_styling/variables/_form.scss @@ -31,7 +31,7 @@ $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; $euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default; $euiFormBorderOpaqueColor: $euiBorderColor !default; $euiFormBorderColor: transparentize(shadeOrTint($euiFormBorderOpaqueColor, 82%, 62%), .5) !default; -$euiFormBorderDisabledColor: $euiFormBorderColor !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; From 9b736c0392a9d5708fd02315c1a8ce474c05cea0 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 30 Jul 2024 09:28:38 -0700 Subject: [PATCH 7/7] [EuiSelectable] Tweak bordered prop to match other form controls --- .../components/selectable/selectable_list/_selectable_list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/selectable/selectable_list/_selectable_list.scss b/packages/eui/src/components/selectable/selectable_list/_selectable_list.scss index bb384224d1b..47afb07fa51 100644 --- a/packages/eui/src/components/selectable/selectable_list/_selectable_list.scss +++ b/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; }