From a44c932dd8199de41ce6ceb4525bae4735727dbe Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 9 May 2023 14:31:30 -0400 Subject: [PATCH 1/5] [EuiSitewideSearch] Increase the color contrast on the EuiSitewideSearch meta item labels on hover. The color calculations were using a white background to create a contrasting shade instead of the light blue focus background. --- .../selectable/selectable_templates/_variables.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/selectable/selectable_templates/_variables.scss b/src/components/selectable/selectable_templates/_variables.scss index 8ff1bfedf15..631eefcb265 100644 --- a/src/components/selectable/selectable_templates/_variables.scss +++ b/src/components/selectable/selectable_templates/_variables.scss @@ -1,22 +1,25 @@ +// The $euiFocusBackgroundColor without the alpha channel +$euiSelectableTemplateFocusBackground: rgb(232, 241, 250); + $euiSelectableTemplateSitewideTypes: ( 'application': ( - 'color': makeHighContrastColor($euiColorVis1), + 'color': makeHighContrastColor($euiColorVis1, $euiSelectableTemplateFocusBackground), 'font-weight': $euiFontWeightMedium, ), 'deployment': ( - 'color': makeHighContrastColor($euiColorVis0), + 'color': makeHighContrastColor($euiColorVis0, $euiSelectableTemplateFocusBackground), 'font-weight': $euiFontWeightMedium, ), 'article': ( - 'color': makeHighContrastColor($euiColorVis3), + 'color': makeHighContrastColor($euiColorVis3, $euiSelectableTemplateFocusBackground), 'font-weight': $euiFontWeightMedium, ), 'case': ( - 'color': makeHighContrastColor($euiColorVis9), + 'color': makeHighContrastColor($euiColorVis9, $euiSelectableTemplateFocusBackground), 'font-weight': $euiFontWeightMedium, ), 'platform': ( - 'color': makeHighContrastColor($euiColorVis5), + 'color': makeHighContrastColor($euiColorVis5, $euiSelectableTemplateFocusBackground), 'font-weight': $euiFontWeightMedium, ), ); From 36e38fb06ddc4dfa02b9c4b42303d9f2dfc90b8a Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 9 May 2023 15:01:16 -0400 Subject: [PATCH 2/5] [REVERT ME] Updated sitewide search example to include all search types for demo purposes --- .../selectable/selectable_templates/sitewide_search.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index 2b791a9c709..b6ec87e6795 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx @@ -164,7 +164,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'Visualization', - type: 'application', + type: 'deployment', }, ], }, @@ -176,7 +176,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'Dashboard', - type: 'application', + type: 'article', highlightSearchString: true, }, ], @@ -186,7 +186,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'TSVB visualization', - type: 'application', + type: 'case', }, ], }, @@ -198,7 +198,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'Discover', - type: 'application', + type: 'platform', }, ], }, From 0331ca7dfaa9aab39d05550ce9f1206127ddfce4 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 9 May 2023 15:04:56 -0400 Subject: [PATCH 3/5] CHANGELOG --- upcoming_changelogs/6761.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/6761.md diff --git a/upcoming_changelogs/6761.md b/upcoming_changelogs/6761.md new file mode 100644 index 00000000000..882decfecba --- /dev/null +++ b/upcoming_changelogs/6761.md @@ -0,0 +1 @@ +- Improved the contrast ratio of meta labels within `EuiSelectableTemplateSitewide` to meet WCAG AA guidelines. From 325802ac2d31ae2cbfacc099198cf7940f57ce22 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 9 May 2023 15:46:02 -0400 Subject: [PATCH 4/5] Updated the colors for dark mode as well --- .../selectable_templates/_variables.scss | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/selectable/selectable_templates/_variables.scss b/src/components/selectable/selectable_templates/_variables.scss index 631eefcb265..6148dc9dd9e 100644 --- a/src/components/selectable/selectable_templates/_variables.scss +++ b/src/components/selectable/selectable_templates/_variables.scss @@ -1,25 +1,26 @@ -// The $euiFocusBackgroundColor without the alpha channel -$euiSelectableTemplateFocusBackground: rgb(232, 241, 250); +// The $euiFocusBackgroundColor without the alpha channel in light and dark mode +$euiSelectableTemplateFocusBackgroundLight: rgb(232, 241, 250); +$euiSelectableTemplateFocusBackgroundDark: rgb(35,56,77); $euiSelectableTemplateSitewideTypes: ( 'application': ( - 'color': makeHighContrastColor($euiColorVis1, $euiSelectableTemplateFocusBackground), + 'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis1, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis1, $euiSelectableTemplateFocusBackgroundDark)), 'font-weight': $euiFontWeightMedium, ), 'deployment': ( - 'color': makeHighContrastColor($euiColorVis0, $euiSelectableTemplateFocusBackground), + 'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis0, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis0, $euiSelectableTemplateFocusBackgroundDark)), 'font-weight': $euiFontWeightMedium, ), 'article': ( - 'color': makeHighContrastColor($euiColorVis3, $euiSelectableTemplateFocusBackground), + 'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis3, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis3, $euiSelectableTemplateFocusBackgroundDark)), 'font-weight': $euiFontWeightMedium, ), 'case': ( - 'color': makeHighContrastColor($euiColorVis9, $euiSelectableTemplateFocusBackground), + 'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis9, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis9, $euiSelectableTemplateFocusBackgroundDark)), 'font-weight': $euiFontWeightMedium, ), 'platform': ( - 'color': makeHighContrastColor($euiColorVis5, $euiSelectableTemplateFocusBackground), + 'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis5, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis5, $euiSelectableTemplateFocusBackgroundDark)), 'font-weight': $euiFontWeightMedium, ), ); From e8a228172bc180b59d8cd0831b759f2bed1507a9 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 10 May 2023 09:37:58 -0400 Subject: [PATCH 5/5] Revert "[REVERT ME] Updated sitewide search example to include all search types for demo purposes" This reverts commit 36e38fb06ddc4dfa02b9c4b42303d9f2dfc90b8a. Remove changes made to sitewide search example used for testing --- .../selectable/selectable_templates/sitewide_search.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index b6ec87e6795..2b791a9c709 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx @@ -164,7 +164,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'Visualization', - type: 'deployment', + type: 'application', }, ], }, @@ -176,7 +176,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'Dashboard', - type: 'article', + type: 'application', highlightSearchString: true, }, ], @@ -186,7 +186,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'TSVB visualization', - type: 'case', + type: 'application', }, ], }, @@ -198,7 +198,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [ meta: [ { text: 'Discover', - type: 'platform', + type: 'application', }, ], },