Skip to content

feat(material/core): add an m2-theme API to define system vars #31616

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
Merged
merged 1 commit into from
Jul 30, 2025
Merged

feat(material/core): add an m2-theme API to define system vars #31616

merged 1 commit into from
Jul 30, 2025

Conversation

andrewseguin
Copy link
Contributor

@andrewseguin andrewseguin commented Jul 29, 2025 •
edited
Loading

Add a new mat.m2-theme($config) mixin that existing M2 clients can call to define system-level CSS variables.

This lets clients drop the need to pass around the theme config to custom components and instead just rely on the same CSS variables defined at https://material.angular.dev/guide/system-variables

// Existing M2 theme file

html {
  @include mat.m2-theme($theme-config);
}

// Output

html {
    --mat-sys-background: #faf9fd;
    --mat-sys-error: #ba1a1a;
    --mat-sys-error-container: #ffdad6;
    --mat-sys-inverse-on-surface: #f2f0f4;
    --mat-sys-inverse-primary: #abc7ff;
    --mat-sys-inverse-surface: #2f3033;
    --mat-sys-on-background: #1a1b1f;
    --mat-sys-on-error: #ffffff;
    --mat-sys-on-error-container: #93000a;
    --mat-sys-on-primary: #ffffff;
    ...
}

@andrewseguin andrewseguin requested review from a team as code owners July 29, 2025 21:51
@andrewseguin andrewseguin requested review from adolgachev and wagnermaciel and removed request for a team July 29, 2025 21:51
@andrewseguin andrewseguin changed the title M2 theme mixin feat(material/core): add an m2-theme API to define system vars Jul 29, 2025
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: material/core labels Jul 29, 2025
@andrewseguin andrewseguin added the target: minor This PR is targeted for the next minor release label Jul 29, 2025
@andrewseguin andrewseguin requested a review from crisbeto July 29, 2025 21:52
@andrewseguin andrewseguin added the action: merge The PR is ready for merge by the caretaker label Jul 30, 2025
@andrewseguin andrewseguin merged commit 20e6e92 into angular:main Jul 30, 2025
22 of 25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@crisbeto crisbeto crisbeto approved these changes

@adolgachev adolgachev Awaiting requested review from adolgachev adolgachev is a code owner automatically assigned from angular/components-googlers

@wagnermaciel wagnermaciel Awaiting requested review from wagnermaciel wagnermaciel is a code owner automatically assigned from angular/components-googlers

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker area: material/core detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@andrewseguin @crisbeto