Stepper : Change colors for accessibility

[matthieu-castier]

I want to propose an evolution/improvement on

Design Tokens

Description

The background-color of steppers aren't valid with the WCAG AA.

Describe the solution you would like

In packages/tokens/build/scss/_tokens.scss change the value of :

• $color-stepper-item-current-background
• $color-stepper-link-hover-text
• $color-stepper-indicator-current-background
• $color-stepper-indicator-current-border
• $color-stepper-icon
• $color-stepper-title

Old value : #46a610 New value: #188803 ($color-primary-01-600)

Describe the alternatives you considered

No response

Additional comments

No response

[tiloyi]

Hi @matthieu-castier , Thanks for your issue, we will take care of it.

[tiloyi]

Hi @caqueste , I'm tagging you, because we're going to need design recommendations on this.

[matthieu-castier]

Related to this issue : https://github.com/adeo/mozaic-design-system/issues/1268

[florencemcd]

@tiloyi do you have an update on this please ?

[tiloyi]

Hi @florencemcd the point is on the design side. I think it's up to @caqueste to tell us where he stands on that.

[caqueste]

Hello @tiloyi @matthieu-castier @florencemcd 👋 Sorry for the delay, I had to cover the most important topics.

@tiloyi We can make a quick fix, so you can update the value of the tokens mentioned in the issue and change the $color-primary-01-500 to $color-primary-01-600: $color-stepper-item-current-background $color-stepper-link-hover-text $color-stepper-indicator-current-background $color-stepper-indicator-current-border $color-stepper-icon $color-stepper-title

Except this token : $color-stepper-link-hover-text, please change to $color-grey-999

For the compact version, you can also change the value of the stepper title (Step 3/4) to $color-primary-01-600.

Thanks!