Skip to content

fix(material/core): separate text/bg colors in utility classes #31879

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

Merged
merged 1 commit into from
Sep 17, 2025
+228 −184
Merged

fix(material/core): separate text/bg colors in utility classes #31879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 104 additions & 49 deletions src/dev-app/system-classes-demo/system-classes-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,92 +2,147 @@ <h1>Utility Classes</h1>

<section>
<h2>Color</h2>
<div class="demo-grid">
<div class="mat-bg-primary demo-box">mat-bg-primary</div>
<div class="mat-bg-primary-container demo-box">mat-bg-primary-container</div>
<div class="mat-bg-secondary demo-box">mat-bg-secondary</div>
<div class="mat-bg-secondary-container demo-box">mat-bg-secondary-container</div>
<div class="mat-bg-error demo-box">mat-bg-error</div>
<div class="mat-bg-error-container demo-box">mat-bg-error-container</div>
<div class="mat-bg-surface demo-box">mat-bg-surface</div>
<div class="mat-bg-surface-variant demo-box">mat-bg-surface-variant</div>
<div class="mat-bg-surface-container-highest demo-box">mat-bg-surface-container-highest</div>
<div class="mat-bg-surface-container-high demo-box">mat-bg-surface-container-high</div>
<div class="mat-bg-surface-container demo-box">mat-bg-surface-container</div>
<div class="mat-bg-surface-container-low demo-box">mat-bg-surface-container-low</div>
<div class="mat-bg-surface-container-lowest demo-box">mat-bg-surface-container-lowest</div>
<div class="mat-bg-inverse-surface demo-box">mat-bg-inverse-surface</div>
<div class="mat-bg-disabled demo-box">mat-bg-disabled</div>
<h3>Primary</h3>
<div class="demo-section-container demo-grid">
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-primary demo-box">
.mat-bg-surface <br/> .mat-text-primary
</div>
<div class="mat-border mat-corner-sm mat-bg-primary mat-text-on-primary demo-box">
.mat-bg-primary <br/> .mat-text-on-primary
</div>
<div class="mat-border mat-corner-sm mat-bg-primary-container mat-text-on-primary-container demo-box">
.mat-bg-primary-container <br/> .mat-text-on-primary-container
</div>
</div>
</section>

<section>
<h2>Text Color</h2>
<div class="demo-grid">
<div class="mat-text-primary">mat-text-primary</div>
<div class="mat-text-secondary">mat-text-secondary</div>
<div class="mat-text-error">mat-text-error</div>
<div class="mat-text-disabled">mat-text-disabled</div>
<h3>Secondary</h3>
<div class="demo-section-container demo-grid">
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-secondary demo-box">
.mat-bg-surface <br/> .mat-text-secondary
</div>
<div class="mat-border mat-corner-sm mat-bg-secondary mat-text-on-secondary demo-box">
.mat-bg-secondary <br/> .mat-text-on-secondary
</div>
<div class="mat-border mat-corner-sm mat-bg-secondary-container mat-text-on-secondary-container demo-box">
.mat-bg-secondary-container <br/> .mat-text-on-secondary-container
</div>
</div>
<h3>Error</h3>
<div class="demo-section-container demo-grid">
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-error demo-box">
.mat-bg-surface <br/> .mat-text-error
</div>
<div class="mat-border mat-corner-sm mat-bg-error mat-text-on-error demo-box">
.mat-bg-error <br/> .mat-text-on-error
</div>
<div class="mat-border mat-corner-sm mat-bg-error-container mat-text-on-error-container demo-box">
.mat-bg-error-container <br/> .mat-text-on-error-container
</div>
</div>
<h3>Surface</h3>
<div class="demo-section-container demo-grid">
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-on-surface demo-box">
.mat-bg-surface <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-on-surface-variant demo-box">
.mat-bg-surface <br/> .mat-text-on-surface-variant
</div>
<div class="mat-border mat-corner-sm mat-bg-surface-variant mat-text-on-surface demo-box">
.mat-bg-surface-variant <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-surface-container-highest mat-text-on-surface demo-box">
.mat-bg-surface-container-highest <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-surface-container-high mat-text-on-surface demo-box">
.mat-bg-surface-container-high <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-surface-container mat-text-on-surface demo-box">
.mat-bg-surface-container <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-surface-container-low mat-text-on-surface demo-box">
.mat-bg-surface-container-low <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-surface-container-lowest mat-text-on-surface demo-box">
.mat-bg-surface-container-lowest <br/> .mat-text-on-surface
</div>
<div class="mat-border mat-corner-sm mat-bg-inverse-surface mat-text-inverse-on-surface demo-box">
.mat-bg-inverse-surface <br/> .mat-text-inverse-on-surface
</div>
</div>
<h3>Disabled</h3>
<div class="demo-section-container demo-grid">
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-disabled demo-box">
.mat-bg-surface <br/> .mat-text-disabled
</div>
<div class="mat-border mat-corner-sm mat-bg-disabled mat-text-disabled demo-box">
.mat-bg-disabled <br/> .mat-text-disabled
</div>
</div>
</section>

<section>
<h2>Typography</h2>
<div class="demo-typography">
<h3> Display </h3>
<div class="demo-section-container demo-typography">
<div class="mat-font-display-lg">mat-font-display-lg (Display Large)</div>
<div class="mat-font-display-md">mat-font-display-md (Display Medium)</div>
<div class="mat-font-display-sm">mat-font-display-sm (Display Small)</div>
</div>
<h3> Headline </h3>
<div class="demo-section-container demo-typography">
<div class="mat-font-headline-lg">mat-font-headline-lg (Headline Large)</div>
<div class="mat-font-headline-md">mat-font-headline-md (Headline Medium)</div>
<div class="mat-font-headline-sm">mat-font-headline-sm (Headline Small)</div>
</div>
<h3> Title </h3>
<div class="demo-section-container demo-typography">
<div class="mat-font-title-lg">mat-font-title-lg (Title Large)</div>
<div class="mat-font-title-md">mat-font-title-md (Title Medium)</div>
<div class="mat-font-title-sm">mat-font-title-sm (Title Small)</div>
</div>
<h3> Headline </h3>
<div class="demo-section-container demo-typography">
<div class="mat-font-body-lg">mat-font-body-lg (Body Large)</div>
<div class="mat-font-body-md">mat-font-body-md (Body Medium)</div>
<div class="mat-font-body-sm">mat-font-body-sm (Body Small)</div>
</div>
<h3> Label </h3>
<div class="demo-section-container demo-typography">
<div class="mat-font-label-lg">mat-font-label-lg (Label Large)</div>
<div class="mat-font-label-md">mat-font-label-md (Label Medium)</div>
<div class="mat-font-label-sm">mat-font-label-sm (Label Small)</div>
</div>
</section>

<section>
<h2>Shape</h2>
<div class="demo-grid">
<div class="mat-corner-extra-sm demo-box mat-bg-primary-container">
<div class="demo-section-container demo-grid">
<div class="mat-border mat-corner-extra-sm demo-box mat-bg-primary-container">
mat-corner-extra-sm
</div>
<div class="mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
<div class="mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
<div class="mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>
<div class="mat-corner-xl demo-box mat-bg-primary-container">
<div class="mat-border mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
<div class="mat-border mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
<div class="mat-border mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>
<div class="mat-border mat-corner-xl demo-box mat-bg-primary-container">
mat-corner-xl
</div>
<div class="mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
<div class="mat-border mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
</div>
</section>

<section>
<h2>Elevation</h2>
<div class="demo-grid">
<div class="mat-shadow-1 demo-box mat-bg-surface">mat-shadow-1</div>
<div class="mat-shadow-2 demo-box mat-bg-surface">mat-shadow-2</div>
<div class="mat-shadow-3 demo-box mat-bg-surface">mat-shadow-3</div>
<div class="mat-shadow-4 demo-box mat-bg-surface">mat-shadow-4</div>
<div class="mat-shadow-5 demo-box mat-bg-surface">mat-shadow-5</div>
<div class="demo-section-container demo-grid">
<div class="mat-border-subtle mat-shadow-1 demo-box mat-bg-surface">mat-shadow-1</div>
<div class="mat-border-subtle mat-shadow-2 demo-box mat-bg-surface">mat-shadow-2</div>
<div class="mat-border-subtle mat-shadow-3 demo-box mat-bg-surface">mat-shadow-3</div>
<div class="mat-border-subtle mat-shadow-4 demo-box mat-bg-surface">mat-shadow-4</div>
<div class="mat-border-subtle mat-shadow-5 demo-box mat-bg-surface">mat-shadow-5</div>
</div>
</section>

<section>
<h2>Outline</h2>
<div class="demo-grid">
<div class="demo-section-container demo-grid">
<div class="mat-border demo-box">mat-border</div>
<div class="mat-border-subtle demo-box">mat-border-subtle</div>
</div>
</section>

<section>
<h2>Stateful</h2>
<div class="demo-grid">
<div class="mat-interactive demo-box">mat-interactive</div>
<div class="mat-interactive-primary demo-box">mat-interactive-primary</div>
</div>
</section>
10 changes: 9 additions & 1 deletion src/dev-app/system-classes-demo/system-classes-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}

Expand All @@ -16,3 +16,11 @@
.demo-typography > div {
margin-bottom: 16px;
}

.demo-section-container {
padding: 16px;
}

h3 {
padding-left: 16px;
}
Loading
Loading