Skip to content
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.

Sign up for GitHub

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

Jump to bottom

mat-slider-toggle not using correct color. (ignoring hue) #11854

Closed
robindijkhof opened this issue Jun 20, 2018 · 4 comments · Fixed by #12698
Closed

mat-slider-toggle not using correct color. (ignoring hue) #11854

robindijkhof opened this issue Jun 20, 2018 · 4 comments · Fixed by #12698
Assignees
@devversion
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@robindijkhof
Copy link
Contributor

robindijkhof commented Jun 20, 2018 •
edited
Loading

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-slider-toggle should use the exact same color as the primary color.

What is the current behavior?

It is ignoring the hue/tint (not sure what it is called)

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

https://github.com/robindijkhof/mat-slide-toggle
image

While my primary color is: $app-primary: mat-palette($mat-blue, 900);. it is ignoring the 900

What is the use-case or motivation for changing an existing behavior?

Incorrect behaviour

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.3
Material 6.3.0

Is there anything else we should know?
@devversion
Copy link
Member

devversion commented Jun 20, 2018 •
edited
Loading

Previously, with the old Material Design guidelines, the hue colors were explicitly defined (e.g. see #1568)

checked = Hue 500 (light);
checked = Hue 200 (dark)

I'm not sure whether it makes sense to use the default hue that can be customized by the user here.

The slide-toggle won't always look good in dark themes by default, meaning that the user needs to customize his palette and adjust the default hue.

However I see that there needs to be a way to match those colors. One possibility would be to default to the current logic if the default hue is not changed to a different value (e.g. from 500 to 900)

@robindijkhof
Copy link
Contributor Author

@devversion In my opinion it make sense to use the default hue. That's because it it a formcontrol and all other formcontrols AFAIK do use the hue.

@devversion
Copy link
Member

devversion commented Jul 14, 2018 •
edited
Loading

I've mentioned the issue in the team meeting and since it would be a visually breaking change we don't want to switch to the default hue yet.

The new design specifications are not very explicit about the proper hue, but the old version was. I will continue researching about the proper hue. Just making clear that this will be a low priority.

@devversion devversion added the P5 The team acknowledges the request but does not plan to address it, it remains open for discussion label Jul 14, 2018
devversion added a commit to devversion/material2 that referenced this issue Aug 16, 2018
@devversion
fix(slide-toggle): respect primary palette of theme
27a1c54 
* Instead of hard-coding the hue 500 for the checked color, the `default` hue for a palette should be used (falls back to 500 unless explicitly specified). This is similar to the MDC implementation and what the selection control specs show.
* Fixes a missing thing for the 2018 spec alignment: The thumb bar should have a `0.54` opacity of the checked thumb color
* Removes duplicate CSS for setting the unchecked ripple color.
* Updates spec comments to refer to the reworked Material Design guidelines webpage.

Fixes angular#11854
@devversion devversion added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P5 The team acknowledges the request but does not plan to address it, it remains open for discussion labels Aug 16, 2018
devversion added a commit to devversion/material2 that referenced this issue Aug 16, 2018
@devversion
fix(slide-toggle): respect primary palette of theme
b20aa28 
* Instead of hard-coding the hue 500 for the checked color, the `default` hue for a palette should be used (falls back to 500 unless explicitly specified). This is similar to the MDC implementation and what the selection control specs show.
* Fixes a missing thing for the 2018 spec alignment: The thumb bar should have a `0.54` opacity of the checked thumb color
* Removes duplicate CSS for setting the unchecked ripple color.
* Updates spec comments to refer to the reworked Material Design guidelines webpage.

Fixes angular#11854
@devversion devversion mentioned this issue Aug 16, 2018
Merged
devversion added a commit to devversion/material2 that referenced this issue Aug 17, 2018
@devversion
fix(slide-toggle): respect primary palette of theme
f039eaf 
* Instead of hard-coding the hue 500 for the checked color, the `default` hue for a palette should be used (falls back to 500 unless explicitly specified). This is similar to the MDC implementation and what the selection control specs show.
* Fixes a missing thing for the 2018 spec alignment: The thumb bar should have a `0.54` opacity of the checked thumb color
* Removes duplicate CSS for setting the unchecked ripple color.
* Updates spec comments to refer to the reworked Material Design guidelines webpage.

Fixes angular#11854
jelbourn pushed a commit that referenced this issue Aug 22, 2018
@devversion @jelbourn
fix(slide-toggle): respect primary palette of theme (#12698)
dad0ed0 
* Instead of hard-coding the hue 500 for the checked color, the `default` hue for a palette should be used (falls back to 500 unless explicitly specified). This is similar to the MDC implementation and what the selection control specs show.
* Fixes a missing thing for the 2018 spec alignment: The thumb bar should have a `0.54` opacity of the checked thumb color
* Removes duplicate CSS for setting the unchecked ripple color.
* Updates spec comments to refer to the reworked Material Design guidelines webpage.

Fixes #11854
@MichaelScottBurke MichaelScottBurke mentioned this issue Sep 8, 2018
Closed
@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 Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(slide-toggle): respect primary palette of theme devversion/material2
2 participants
@devversion @robindijkhof