Skip to content

Fix stepper icon color in M2 #29564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

json-derulo
Copy link
Contributor

@json-derulo json-derulo commented Aug 9, 2024

Currently, the step icon M2 theming does not work correctly. The foreground color uses the contrast color of the primary color, but this does not necessarily provide enough contrast to the background. With this changes, the default foreground color is adjusted to ensure sufficient contrast to the background, regardless of the primary contrast color.

Fixes #29518

@json-derulo json-derulo requested a review from a team as a code owner August 9, 2024 16:09
@json-derulo json-derulo requested review from amysorto and mmalerba and removed request for a team August 9, 2024 16:09
@json-derulo json-derulo force-pushed the fix-stepper-icon-colors-m2 branch from 6c97993 to e650efa Compare August 9, 2024 16:51
@andrewseguin
Copy link
Contributor

If the contrast is not sufficient, you can adjust which values are used when you use m2-define-palette. The current implementation seems appropriate to say that it uses the color, and then its defined contrast color

@json-derulo
Copy link
Contributor Author

@andrewseguin Thanks for checking the PR. However I believe changing the values in the palettes won't properly fix the underlying issue. The problem is that currently the foreground color of the header icon is set to the contrast color of the primary color. This is wrong, because the background of this icon is not the primary color but some other gray color.

So instead of making the color of the header icon depend on the primary contrast color, this value should instead be set to a value which gives better contrast to the gray background. Which is white for light theme and black for dark theme.

Also feel free to play around in the dev app, there the issue is visible in dark mode.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 18, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(stepper): bad contrast of step icon in untouched state for M2
3 participants