From af063b5180f3a80ffee47c6384756e01610d1973 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 9 Jan 2024 10:48:29 -0800 Subject: [PATCH 1/4] Remove `makeHighContrastColor` from disabled EuiSteps - It's creating a `chroma.js` warning that devs are concerned about - we should really just be reusing the default EuiButton colors anyway, and tweaking those if they have color contrast issues, so that multiple places at once get the updates --- src/components/steps/step_number.styles.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts index c6f361564e6..7edb3a2a440 100644 --- a/src/components/steps/step_number.styles.ts +++ b/src/components/steps/step_number.styles.ts @@ -14,7 +14,7 @@ import { euiCanAnimate, euiAnimScale, } from '../../global_styling'; -import { UseEuiTheme, makeHighContrastColor } from '../../services'; +import { UseEuiTheme } from '../../services'; import { euiStepVariables } from './step.styles'; import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins'; @@ -67,11 +67,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { border: ${euiTheme.border.thick}; `, disabled: css` - background-color: ${euiButtonFillColor(euiThemeContext, 'disabled') - .backgroundColor}; - color: ${makeHighContrastColor(euiTheme.colors.disabledText)( - euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor - )}; + ${euiButtonFillColor(euiThemeContext, 'disabled')} `, loading: css` background: transparent; From 998515d91da4d48d2e4c82cf58cb188c89f2d739 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 9 Jan 2024 10:49:03 -0800 Subject: [PATCH 2/4] More DRYing - remove multiple `euiButtonFillColor()` calls in favor of just one --- src/components/steps/step_number.styles.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts index 7edb3a2a440..457bed81330 100644 --- a/src/components/steps/step_number.styles.ts +++ b/src/components/steps/step_number.styles.ts @@ -73,9 +73,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { background: transparent; `, warning: css` - color: ${euiButtonFillColor(euiThemeContext, 'warning').color}; - background-color: ${euiButtonFillColor(euiThemeContext, 'warning') - .backgroundColor}; + ${euiButtonFillColor(euiThemeContext, 'warning')} ${euiCanAnimate} { animation: ${euiAnimScale} ${euiTheme.animation.fast} @@ -83,9 +81,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { } `, danger: css` - color: ${euiButtonFillColor(euiThemeContext, 'danger').color}; - background-color: ${euiButtonFillColor(euiThemeContext, 'danger') - .backgroundColor}; + ${euiButtonFillColor(euiThemeContext, 'danger')} ${euiCanAnimate} { animation: ${euiAnimScale} ${euiTheme.animation.fast} @@ -93,9 +89,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { } `, complete: css` - color: ${euiButtonFillColor(euiThemeContext, 'success').color}; - background-color: ${euiButtonFillColor(euiThemeContext, 'success') - .backgroundColor}; + ${euiButtonFillColor(euiThemeContext, 'success')} ${euiCanAnimate} { animation: ${euiAnimScale} ${euiTheme.animation.fast} From c24613d74519636ae9b5b549621a7098f6d7047e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 9 Jan 2024 10:52:19 -0800 Subject: [PATCH 3/4] Current step CSS cleanup - remove CSS nesting - replace hardcoded 2px with token --- src/components/steps/step_number.styles.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts index 457bed81330..794f201c7b1 100644 --- a/src/components/steps/step_number.styles.ts +++ b/src/components/steps/step_number.styles.ts @@ -97,14 +97,9 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { } `, current: css` - border: 2px solid ${euiTheme.colors.body}; - box-shadow: 0 0 0 2px ${euiTheme.colors.primary}; - - .euiStepNumber__number { - /* Transform the step number so it appears in the center of the step circle */ - display: inline-block; - transform: translateY(-2px); - } + border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.body}; + box-shadow: 0 0 0 ${euiTheme.border.width.thick} + ${euiTheme.colors.primary}; `, }; }; @@ -141,6 +136,10 @@ export const euiStepNumberContentStyles = ({ euiTheme }: UseEuiTheme) => { `, loading: css``, disabled: css``, - current: css``, + current: css` + /* Transform the step number so it appears in the center of the step circle */ + display: inline-block; + transform: translateY(-${euiTheme.border.width.thick}); + `, }; }; From 6b80f3c3327e996a0d1b5f3c83bb92513496a54d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 9 Jan 2024 11:07:54 -0800 Subject: [PATCH 4/4] changelog --- changelogs/upcoming/7454.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 changelogs/upcoming/7454.md diff --git a/changelogs/upcoming/7454.md b/changelogs/upcoming/7454.md new file mode 100644 index 00000000000..f4e4a650f2c --- /dev/null +++ b/changelogs/upcoming/7454.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed a color console warning being generated by disabled `EuiStep`s