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.

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

fix(material-experimental/theming): Update color palettes #28472

Merged
merged 1 commit into from
Jan 26, 2024

Conversation

mmalerba
Copy link
Contributor

Changes the way M3 color palettes a bit to make the color choices more in line with what the spec expects. In particular, select the secondary palette automatically based on the primary palette (secondary is intended to be a more muted version of primary). We still allow the user to select what tertiary color to pair with their primary, since the spec doesn't make the same sort of assumptions about the tertiary color.

Note: because our demo targets styles at the .mat-primary, .mat-accent, .mat-error classes, it winds up overriding the default color combo that users would see out of the box for the mat-select (a primary form-field with a secondary selected option). This is one example where the M2 color="primary/accent/warn" API doesn't quite align with how colors work in M3. We do not expect users to apply colors in this way, and we probably shouldn't do it in our demo either. For now I've added an extra checkbox to the select demo that lets us observe the form-field/select combo users would see out of the box without our overrides.

@mmalerba mmalerba added target: minor This PR is targeted for the next minor release dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Jan 23, 2024
Copy link

github-actions bot commented Jan 23, 2024

Deployed dev-app for 9cd2aed to: https://ng-dev-previews-comp--pr-angular-components-28472-dev-3uhl7th7.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

Changes the way M3 color palettes a bit to make the color choices more
in line with what the spec expects. In particular, select the secondary
palette automatically based on the primary palette (secondary is
intended to be a more muted version of primary). We still allow the user
to select what tertiary color to pair with their primary, since the spec
doesn't make the same sort of assumptions about the tertiary color.

Note: because our demo targets styles at the .mat-primary, .mat-accent,
.mat-error classes, it winds up overriding the default color combo that
users would see out of the box for the mat-select (a primary form-field
with a secondary selected option). This is one example where the M2
color="primary/accent/warn" API doesn't quite align with how colors work
in M3. We do not expect users to apply colors in this way, and we
probably shouldn't do it in our demo either. For now I've added an extra
checkbox to the select demo that lets us observe the form-field/select
combo users would see out of the box without our overrides.
@mmalerba
Copy link
Contributor Author

I should also add that if we want different base colors for the palettes themselves, we can easily update them. I wrote a little snippet to extract values from https://m3.material.io/theme-builder#/custom into the format we need, so just lmk what colors you'd like

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great 🚀

@devversion devversion removed their request for review January 24, 2024 12:56
@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Jan 26, 2024
@mmalerba mmalerba merged commit 0da585f into angular:main Jan 26, 2024
23 of 25 checks passed
@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 Feb 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker dev-app preview When applied, previews of the dev-app are deployed to Firebase target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants