Skip to content

Commit 31562a4

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
fix(material/core): separate text/bg colors in utility classes (#31879)
Co-authored-by: Andrew Seguin <[email protected]>
1 parent 48e1b35 commit 31562a4

File tree

3 files changed

+228
-184
lines changed

3 files changed

+228
-184
lines changed

‎src/dev-app/system-classes-demo/system-classes-demo.html‎

Lines changed: 104 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,92 +2,147 @@ <h1>Utility Classes</h1>
22

33
<section>
44
<h2>Color</h2>
5-
<div class="demo-grid">
6-
<div class="mat-bg-primary demo-box">mat-bg-primary</div>
7-
<div class="mat-bg-primary-container demo-box">mat-bg-primary-container</div>
8-
<div class="mat-bg-secondary demo-box">mat-bg-secondary</div>
9-
<div class="mat-bg-secondary-container demo-box">mat-bg-secondary-container</div>
10-
<div class="mat-bg-error demo-box">mat-bg-error</div>
11-
<div class="mat-bg-error-container demo-box">mat-bg-error-container</div>
12-
<div class="mat-bg-surface demo-box">mat-bg-surface</div>
13-
<div class="mat-bg-surface-variant demo-box">mat-bg-surface-variant</div>
14-
<div class="mat-bg-surface-container-highest demo-box">mat-bg-surface-container-highest</div>
15-
<div class="mat-bg-surface-container-high demo-box">mat-bg-surface-container-high</div>
16-
<div class="mat-bg-surface-container demo-box">mat-bg-surface-container</div>
17-
<div class="mat-bg-surface-container-low demo-box">mat-bg-surface-container-low</div>
18-
<div class="mat-bg-surface-container-lowest demo-box">mat-bg-surface-container-lowest</div>
19-
<div class="mat-bg-inverse-surface demo-box">mat-bg-inverse-surface</div>
20-
<div class="mat-bg-disabled demo-box">mat-bg-disabled</div>
5+
<h3>Primary</h3>
6+
<div class="demo-section-container demo-grid">
7+
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-primary demo-box">
8+
.mat-bg-surface <br/> .mat-text-primary
9+
</div>
10+
<div class="mat-border mat-corner-sm mat-bg-primary mat-text-on-primary demo-box">
11+
.mat-bg-primary <br/> .mat-text-on-primary
12+
</div>
13+
<div class="mat-border mat-corner-sm mat-bg-primary-container mat-text-on-primary-container demo-box">
14+
.mat-bg-primary-container <br/> .mat-text-on-primary-container
15+
</div>
2116
</div>
22-
</section>
23-
24-
<section>
25-
<h2>Text Color</h2>
26-
<div class="demo-grid">
27-
<div class="mat-text-primary">mat-text-primary</div>
28-
<div class="mat-text-secondary">mat-text-secondary</div>
29-
<div class="mat-text-error">mat-text-error</div>
30-
<div class="mat-text-disabled">mat-text-disabled</div>
17+
<h3>Secondary</h3>
18+
<div class="demo-section-container demo-grid">
19+
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-secondary demo-box">
20+
.mat-bg-surface <br/> .mat-text-secondary
21+
</div>
22+
<div class="mat-border mat-corner-sm mat-bg-secondary mat-text-on-secondary demo-box">
23+
.mat-bg-secondary <br/> .mat-text-on-secondary
24+
</div>
25+
<div class="mat-border mat-corner-sm mat-bg-secondary-container mat-text-on-secondary-container demo-box">
26+
.mat-bg-secondary-container <br/> .mat-text-on-secondary-container
27+
</div>
28+
</div>
29+
<h3>Error</h3>
30+
<div class="demo-section-container demo-grid">
31+
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-error demo-box">
32+
.mat-bg-surface <br/> .mat-text-error
33+
</div>
34+
<div class="mat-border mat-corner-sm mat-bg-error mat-text-on-error demo-box">
35+
.mat-bg-error <br/> .mat-text-on-error
36+
</div>
37+
<div class="mat-border mat-corner-sm mat-bg-error-container mat-text-on-error-container demo-box">
38+
.mat-bg-error-container <br/> .mat-text-on-error-container
39+
</div>
40+
</div>
41+
<h3>Surface</h3>
42+
<div class="demo-section-container demo-grid">
43+
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-on-surface demo-box">
44+
.mat-bg-surface <br/> .mat-text-on-surface
45+
</div>
46+
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-on-surface-variant demo-box">
47+
.mat-bg-surface <br/> .mat-text-on-surface-variant
48+
</div>
49+
<div class="mat-border mat-corner-sm mat-bg-surface-variant mat-text-on-surface demo-box">
50+
.mat-bg-surface-variant <br/> .mat-text-on-surface
51+
</div>
52+
<div class="mat-border mat-corner-sm mat-bg-surface-container-highest mat-text-on-surface demo-box">
53+
.mat-bg-surface-container-highest <br/> .mat-text-on-surface
54+
</div>
55+
<div class="mat-border mat-corner-sm mat-bg-surface-container-high mat-text-on-surface demo-box">
56+
.mat-bg-surface-container-high <br/> .mat-text-on-surface
57+
</div>
58+
<div class="mat-border mat-corner-sm mat-bg-surface-container mat-text-on-surface demo-box">
59+
.mat-bg-surface-container <br/> .mat-text-on-surface
60+
</div>
61+
<div class="mat-border mat-corner-sm mat-bg-surface-container-low mat-text-on-surface demo-box">
62+
.mat-bg-surface-container-low <br/> .mat-text-on-surface
63+
</div>
64+
<div class="mat-border mat-corner-sm mat-bg-surface-container-lowest mat-text-on-surface demo-box">
65+
.mat-bg-surface-container-lowest <br/> .mat-text-on-surface
66+
</div>
67+
<div class="mat-border mat-corner-sm mat-bg-inverse-surface mat-text-inverse-on-surface demo-box">
68+
.mat-bg-inverse-surface <br/> .mat-text-inverse-on-surface
69+
</div>
70+
</div>
71+
<h3>Disabled</h3>
72+
<div class="demo-section-container demo-grid">
73+
<div class="mat-border mat-corner-sm mat-bg-surface mat-text-disabled demo-box">
74+
.mat-bg-surface <br/> .mat-text-disabled
75+
</div>
76+
<div class="mat-border mat-corner-sm mat-bg-disabled mat-text-disabled demo-box">
77+
.mat-bg-disabled <br/> .mat-text-disabled
78+
</div>
3179
</div>
32-
</section>
3380

3481
<section>
3582
<h2>Typography</h2>
36-
<div class="demo-typography">
83+
<h3> Display </h3>
84+
<div class="demo-section-container demo-typography">
3785
<div class="mat-font-display-lg">mat-font-display-lg (Display Large)</div>
3886
<div class="mat-font-display-md">mat-font-display-md (Display Medium)</div>
3987
<div class="mat-font-display-sm">mat-font-display-sm (Display Small)</div>
88+
</div>
89+
<h3> Headline </h3>
90+
<div class="demo-section-container demo-typography">
4091
<div class="mat-font-headline-lg">mat-font-headline-lg (Headline Large)</div>
4192
<div class="mat-font-headline-md">mat-font-headline-md (Headline Medium)</div>
4293
<div class="mat-font-headline-sm">mat-font-headline-sm (Headline Small)</div>
94+
</div>
95+
<h3> Title </h3>
96+
<div class="demo-section-container demo-typography">
4397
<div class="mat-font-title-lg">mat-font-title-lg (Title Large)</div>
4498
<div class="mat-font-title-md">mat-font-title-md (Title Medium)</div>
4599
<div class="mat-font-title-sm">mat-font-title-sm (Title Small)</div>
100+
</div>
101+
<h3> Headline </h3>
102+
<div class="demo-section-container demo-typography">
46103
<div class="mat-font-body-lg">mat-font-body-lg (Body Large)</div>
47104
<div class="mat-font-body-md">mat-font-body-md (Body Medium)</div>
48105
<div class="mat-font-body-sm">mat-font-body-sm (Body Small)</div>
49106
</div>
107+
<h3> Label </h3>
108+
<div class="demo-section-container demo-typography">
109+
<div class="mat-font-label-lg">mat-font-label-lg (Label Large)</div>
110+
<div class="mat-font-label-md">mat-font-label-md (Label Medium)</div>
111+
<div class="mat-font-label-sm">mat-font-label-sm (Label Small)</div>
112+
</div>
50113
</section>
51114

52115
<section>
53116
<h2>Shape</h2>
54-
<div class="demo-grid">
55-
<div class="mat-corner-extra-sm demo-box mat-bg-primary-container">
117+
<div class="demo-section-container demo-grid">
118+
<div class="mat-border mat-corner-extra-sm demo-box mat-bg-primary-container">
56119
mat-corner-extra-sm
57120
</div>
58-
<div class="mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
59-
<div class="mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
60-
<div class="mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>
61-
<div class="mat-corner-xl demo-box mat-bg-primary-container">
121+
<div class="mat-border mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
122+
<div class="mat-border mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
123+
<div class="mat-border mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>
124+
<div class="mat-border mat-corner-xl demo-box mat-bg-primary-container">
62125
mat-corner-xl
63126
</div>
64-
<div class="mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
127+
<div class="mat-border mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
65128
</div>
66129
</section>
67130

68131
<section>
69132
<h2>Elevation</h2>
70-
<div class="demo-grid">
71-
<div class="mat-shadow-1 demo-box mat-bg-surface">mat-shadow-1</div>
72-
<div class="mat-shadow-2 demo-box mat-bg-surface">mat-shadow-2</div>
73-
<div class="mat-shadow-3 demo-box mat-bg-surface">mat-shadow-3</div>
74-
<div class="mat-shadow-4 demo-box mat-bg-surface">mat-shadow-4</div>
75-
<div class="mat-shadow-5 demo-box mat-bg-surface">mat-shadow-5</div>
133+
<div class="demo-section-container demo-grid">
134+
<div class="mat-border-subtle mat-shadow-1 demo-box mat-bg-surface">mat-shadow-1</div>
135+
<div class="mat-border-subtle mat-shadow-2 demo-box mat-bg-surface">mat-shadow-2</div>
136+
<div class="mat-border-subtle mat-shadow-3 demo-box mat-bg-surface">mat-shadow-3</div>
137+
<div class="mat-border-subtle mat-shadow-4 demo-box mat-bg-surface">mat-shadow-4</div>
138+
<div class="mat-border-subtle mat-shadow-5 demo-box mat-bg-surface">mat-shadow-5</div>
76139
</div>
77140
</section>
78141

79142
<section>
80143
<h2>Outline</h2>
81-
<div class="demo-grid">
144+
<div class="demo-section-container demo-grid">
82145
<div class="mat-border demo-box">mat-border</div>
83146
<div class="mat-border-subtle demo-box">mat-border-subtle</div>
84147
</div>
85148
</section>
86-
87-
<section>
88-
<h2>Stateful</h2>
89-
<div class="demo-grid">
90-
<div class="mat-interactive demo-box">mat-interactive</div>
91-
<div class="mat-interactive-primary demo-box">mat-interactive-primary</div>
92-
</div>
93-
</section>

‎src/dev-app/system-classes-demo/system-classes-demo.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.demo-grid {
22
display: grid;
3-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
3+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
44
gap: 16px;
55
}
66

@@ -16,3 +16,11 @@
1616
.demo-typography > div {
1717
margin-bottom: 16px;
1818
}
19+
20+
.demo-section-container {
21+
padding: 16px;
22+
}
23+
24+
h3 {
25+
padding-left: 16px;
26+
}

0 commit comments

Comments
 (0)