Skip to content

Commit 613cf54

Browse files
andrewseguinandrewseguin
authoredOct 17, 2024··
fix(material/core): rename sys vars from mat-app to mat-sys (#29879)
·
20.0.0-next.519.0.0-next.9
1 parent b9deeee commit 613cf54

File tree

7 files changed

+155
-155
lines changed

7 files changed

+155
-155
lines changed
 

‎src/dev-app/theme/theme-demo.html

+31-31
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,18 @@ <h1>Colors</h1>
2424
colors and follow their uses to add theme colors to your application's custom components.
2525
</p>
2626
<p>
27-
Note that variables starting with "mat-app-on-*" are designed to be used for text or icons
28-
placed on top of its paired parent color. For example, <span class="demo-surface-variable">--mat-app-on-primary</span>
29-
is used for text and icons in elements filled with the <span class="demo-surface-variable">--mat-app-primary</span> color.
27+
Note that variables starting with "--mat-sys-on-*" are designed to be used for text or icons
28+
placed on top of its paired parent color. For example, <span class="demo-surface-variable">--mat-sys-on-primary</span>
29+
is used for text and icons in elements filled with the <span class="demo-surface-variable">--mat-sys-primary</span> color.
3030
</p>
3131

3232
<div class="demo-group">
3333
<div class="demo-color-container">
3434
<div class="demo-heading"
35-
[style.background-color]="'var(--mat-app-primary)'"
36-
[style.color]="'var(--mat-app-on-primary)'">
35+
[style.background-color]="'var(--mat-sys-primary)'"
36+
[style.color]="'var(--mat-sys-on-primary)'">
3737
<div class="demo-name"> Primary</div>
38-
<div class="demo-variable demo-code"> --mat-app-primary</div>
38+
<div class="demo-variable demo-code"> --mat-sys-primary</div>
3939
</div>
4040
<div class="demo-description">
4141
<p>
@@ -48,7 +48,7 @@ <h1>Colors</h1>
4848
outline color of form fields.
4949
</p>
5050
<p>
51-
Use the color <span class="demo-surface-variable">--mat-app-on-primary</span> for
51+
Use the color <span class="demo-surface-variable">--mat-sys-on-primary</span> for
5252
icons, text, and other visual elements placed on a primary background. This
5353
color is calculated to be optimal for accessibility and legibility.
5454
</p>
@@ -57,10 +57,10 @@ <h1>Colors</h1>
5757

5858
<div class="demo-color-container">
5959
<div class="demo-heading"
60-
[style.background-color]="'var(--mat-app-surface)'"
61-
[style.color]="'var(--mat-app-on-surface)'">
60+
[style.background-color]="'var(--mat-sys-surface)'"
61+
[style.color]="'var(--mat-sys-on-surface)'">
6262
<div class="demo-name"> Surface</div>
63-
<div class="demo-variable code"> --mat-app-surface</div>
63+
<div class="demo-variable code"> --mat-sys-surface</div>
6464
</div>
6565
<div class="demo-description">
6666
<p>
@@ -72,7 +72,7 @@ <h1>Colors</h1>
7272
components such as the dialog, card, table, and more.
7373
</p>
7474
<p>
75-
Use the color <span class="demo-surface-variable">--mat-app-on-surface</span> for
75+
Use the color <span class="demo-surface-variable">--mat-sys-on-surface</span> for
7676
icons, text, and other visual elements placed on a surface background. This
7777
color is calculated to be optimal for accessibility and legibility.
7878
</p>
@@ -81,10 +81,10 @@ <h1>Colors</h1>
8181

8282
<div class="demo-color-container">
8383
<div class="demo-heading"
84-
[style.background-color]="'var(--mat-app-error)'"
85-
[style.color]="'var(--mat-app-on-error)'">
84+
[style.background-color]="'var(--mat-sys-error)'"
85+
[style.color]="'var(--mat-sys-on-error)'">
8686
<div class="demo-name"> Error</div>
87-
<div class="demo-variable demo-code"> --mat-app-error</div>
87+
<div class="demo-variable demo-code"> --mat-sys-error</div>
8888
</div>
8989
<div class="demo-description">
9090
<p>
@@ -95,7 +95,7 @@ <h1>Colors</h1>
9595
form fields inputs.
9696
</p>
9797
<p>
98-
Use the color <span class="demo-surface-variable">--mat-app-on-error</span> for
98+
Use the color <span class="demo-surface-variable">--mat-sys-on-error</span> for
9999
icons, text, and other visual elements placed on an error background. This
100100
color is calculated to be optimal for accessibility and legibility.
101101
</p>
@@ -104,10 +104,10 @@ <h1>Colors</h1>
104104

105105
<div class="demo-color-container">
106106
<div class="demo-heading"
107-
[style.background-color]="'var(--mat-app-outline)'"
108-
[style.color]="'var(--mat-app-surface)'">
107+
[style.background-color]="'var(--mat-sys-outline)'"
108+
[style.color]="'var(--mat-sys-surface)'">
109109
<div class="demo-name"> Outline</div>
110-
<div class="demo-variable demo-code"> --mat-app-outline </div>
110+
<div class="demo-variable demo-code"> --mat-sys-outline </div>
111111
</div>
112112
<div class="demo-description">
113113
<p>
@@ -119,7 +119,7 @@ <h1>Colors</h1>
119119
form field.
120120
</p>
121121
<p>
122-
Use the color <span class="demo-surface-variable">--mat-app-outline-variant</span> for a less
122+
Use the color <span class="demo-surface-variable">--mat-sys-outline-variant</span> for a less
123123
prominent outline.
124124
</p>
125125
</div>
@@ -135,7 +135,7 @@ <h1>Colors</h1>
135135
to components.
136136
</p>
137137
<p>
138-
Colors may be paired with a <span class="demo-surface-variable">--mat-app-on-</span> variable
138+
Colors may be paired with a <span class="demo-surface-variable">--mat-sys-on-</span> variable
139139
that should be used for text and icons placed within a filled container.
140140
</p>
141141

@@ -152,7 +152,7 @@ <h2>Surface Colors</h2>
152152

153153
<p>
154154
Containers filled with a surface color should apply the
155-
<span class="demo-surface-variable">--mat-app-on-surface</span> color to text
155+
<span class="demo-surface-variable">--mat-sys-on-surface</span> color to text
156156
and icons placed within.
157157
</p>
158158

@@ -188,9 +188,9 @@ <h1>Typography</h1>
188188
@for (size of ['small', 'medium', 'large']; track $index) {
189189
<div class="demo-typography-example">
190190
<div class="demo-typography-variable">
191-
<div class="demo-surface-variable">--mat-app-{{category}}-{{size}}</div>
191+
<div class="demo-surface-variable">--mat-sys-{{category}}-{{size}}</div>
192192
</div>
193-
<div class="demo-typography-text" [style.font]="'var(--mat-app-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
193+
<div class="demo-typography-text" [style.font]="'var(--mat-sys-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
194194
</div>
195195
}
196196
</div>
@@ -204,12 +204,12 @@ <h1>Typography</h1>
204204
For example, the values for medium body text may be defined as follows:
205205
</p>
206206
<pre class="demo-code-block">
207-
--mat-app-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
208-
--mat-app-body-medium-font: Roboto, sans-serif;
209-
--mat-app-body-medium-line-height: 1.25rem;
210-
--mat-app-body-medium-size: 0.875rem;
211-
--mat-app-body-medium-tracking: 0.016rem;
212-
--mat-app-body-medium-weight: 400;
207+
--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
208+
--mat-sys-body-medium-font: Roboto, sans-serif;
209+
--mat-sys-body-medium-line-height: 1.25rem;
210+
--mat-sys-body-medium-size: 0.875rem;
211+
--mat-sys-body-medium-tracking: 0.016rem;
212+
--mat-sys-body-medium-weight: 400;
213213
</pre>
214214

215215
<h1>Elevation</h1>
@@ -225,8 +225,8 @@ <h1>Elevation</h1>
225225
</p>
226226

227227
@for (level of [0, 1, 2, 3, 4, 5]; track $index) {
228-
<div class="demo-elevation code" [style.box-shadow]="'var(--mat-app-level' + level + ')'">
229-
box-shadow: var(--mat-app-level{{level}})
228+
<div class="demo-elevation code" [style.box-shadow]="'var(--mat-sys-level' + level + ')'">
229+
box-shadow: var(--mat-sys-level{{level}})
230230
</div>
231231
}
232232

‎src/dev-app/theme/theme-demo.scss

+48-48
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,24 @@
66
}
77

88
h1 {
9-
font: var(--mat-app-title-large);
9+
font: var(--mat-sys-title-large);
1010
font-size: 28px;
1111
padding-top: 32px;
1212
}
1313

1414
h2 {
15-
font: var(--mat-app-title-large);
15+
font: var(--mat-sys-title-large);
1616
}
1717

1818
a {
19-
color: var(--mat-app-primary);
19+
color: var(--mat-sys-primary);
2020
}
2121

2222
.demo-warn {
23-
background: var(--mat-app-error-container);
24-
color: var(--mat-app-on-error-container);
25-
border: 1px solid var(--mat-app-outline-variant);
26-
border-radius: var(--mat-app-corner-extra-small);
23+
background: var(--mat-sys-error-container);
24+
color: var(--mat-sys-on-error-container);
25+
border: 1px solid var(--mat-sys-outline-variant);
26+
border-radius: var(--mat-sys-corner-extra-small);
2727
padding: 8px;
2828
}
2929

@@ -39,18 +39,18 @@ a {
3939
}
4040

4141
.demo-color-container {
42-
border-radius: var(--mat-app-corner-small);
42+
border-radius: var(--mat-sys-corner-small);
4343
display: inline-block;
44-
font: var(--mat-app-body-medium);
44+
font: var(--mat-sys-body-medium);
4545
vertical-align: top;
4646
}
4747

4848
.demo-heading {
49-
color: var(--mat-app-on-primary);
50-
background: var(--mat-app-primary);
51-
border: 1px solid var(--mat-app-outline);
52-
border-top-right-radius: var(--mat-app-corner-small);
53-
border-top-left-radius: var(--mat-app-corner-small);
49+
color: var(--mat-sys-on-primary);
50+
background: var(--mat-sys-primary);
51+
border: 1px solid var(--mat-sys-outline);
52+
border-top-right-radius: var(--mat-sys-corner-small);
53+
border-top-left-radius: var(--mat-sys-corner-small);
5454
border-bottom: none;
5555
padding: 16px;
5656
display: flex;
@@ -59,19 +59,19 @@ a {
5959
}
6060

6161
.demo-name {
62-
font: var(--mat-app-title-medium);
62+
font: var(--mat-sys-title-medium);
6363
}
6464

6565
.demo-variable {
66-
font: var(--mat-app-title-small);
66+
font: var(--mat-sys-title-small);
6767
font-family: monospace;
6868
text-align: right;
6969
}
7070

7171
.demo-description {
72-
border: 1px solid var(--mat-app-outline);
73-
border-bottom-right-radius: var(--mat-app-corner-small);
74-
border-bottom-left-radius: var(--mat-app-corner-small);
72+
border: 1px solid var(--mat-sys-outline);
73+
border-bottom-right-radius: var(--mat-sys-corner-small);
74+
border-bottom-left-radius: var(--mat-sys-corner-small);
7575
padding: 0 16px;
7676
}
7777

@@ -82,8 +82,8 @@ a {
8282
.demo-surface-variable {
8383
display: inline-block;
8484
font-family: monospace;
85-
background: var(--mat-app-primary-container);
86-
color: var(--mat-app-on-primary-container);
85+
background: var(--mat-sys-primary-container);
86+
color: var(--mat-sys-on-primary-container);
8787
padding: 2px 6px;
8888
margin: 0 2px;
8989
border-radius: 4px;
@@ -93,17 +93,17 @@ mat-expansion-panel {
9393
margin-top: 24px;
9494
overflow: visible;
9595
@include mat.expansion-overrides((
96-
'container-text-font': var(--mat-app-body-medium-font),
97-
'container-text-size': var(--mat-app-body-medium-size),
98-
'container-text-weight': var(--mat-app-body-medium-weight),
99-
'container-text-line-height': var(--mat-app-body-medium-line-height),
100-
'container-text-tracking': var(--mat-app-body-medium-tracking),
96+
'container-text-font': var(--mat-sys-body-medium-font),
97+
'container-text-size': var(--mat-sys-body-medium-size),
98+
'container-text-weight': var(--mat-sys-body-medium-weight),
99+
'container-text-line-height': var(--mat-sys-body-medium-line-height),
100+
'container-text-tracking': var(--mat-sys-body-medium-tracking),
101101
));
102102
}
103103

104104
.demo-compact-color-container {
105-
border-radius: var(--mat-app-corner-small);
106-
border: 1px solid var(--mat-app-outline);
105+
border-radius: var(--mat-sys-corner-small);
106+
border: 1px solid var(--mat-sys-outline);
107107
overflow: hidden; // Hide child heading background color
108108
margin-top: 24px;
109109

@@ -112,7 +112,7 @@ mat-expansion-panel {
112112
border-radius: 0;
113113

114114
&:not(:nth-child(1)) {
115-
border-top: 1px solid var(--mat-app-outline);
115+
border-top: 1px solid var(--mat-sys-outline);
116116
}
117117
}
118118

@@ -122,19 +122,19 @@ mat-expansion-panel {
122122
}
123123

124124
.demo-typography-group {
125-
border: 1px solid var(--mat-app-outline);
126-
border-radius: var(--mat-app-corner-small);
125+
border: 1px solid var(--mat-sys-outline);
126+
border-radius: var(--mat-sys-corner-small);
127127
margin-top: 40px;
128128
overflow: hidden;
129129
}
130130

131131
.demo-typography-title {
132132
text-transform: capitalize;
133-
font: var(--mat-app-title-medium);
133+
font: var(--mat-sys-title-medium);
134134
padding: 16px;
135-
border-bottom: 1px solid var(--mat-app-outline);
136-
background: var(--mat-app-primary-container);
137-
color: var(--mat-app-on-primary-container);
135+
border-bottom: 1px solid var(--mat-sys-outline);
136+
background: var(--mat-sys-primary-container);
137+
color: var(--mat-sys-on-primary-container);
138138
}
139139

140140
.demo-typography-variable {
@@ -145,7 +145,7 @@ mat-expansion-panel {
145145
padding: 16px;
146146
display: flex;
147147
align-items: baseline;
148-
border-top: 1px solid var(--mat-app-outline-variant);
148+
border-top: 1px solid var(--mat-sys-outline-variant);
149149

150150
&:nth-child(1) {
151151
border: none;
@@ -166,31 +166,31 @@ mat-expansion-panel {
166166
display: flex;
167167
align-items: center;
168168
justify-content: center;
169-
background: var(--mat-app-surface-container);
170-
color: var(--mat-app-on-surface);
171-
border-radius: var(--mat-app-corner-extra-small);
169+
background: var(--mat-sys-surface-container);
170+
color: var(--mat-sys-on-surface);
171+
border-radius: var(--mat-sys-corner-extra-small);
172172
}
173173

174174
.demo-code-block {
175-
background: var(--mat-app-surface-container-low);
175+
background: var(--mat-sys-surface-container-low);
176176
padding: 16px;
177-
border-radius: var(--mat-app-corner-small);
178-
border: 1px solid var(--mat-app-outline);
177+
border-radius: var(--mat-sys-corner-small);
178+
border: 1px solid var(--mat-sys-outline);
179179
}
180180

181181
.demo-overrides {
182-
background-color: var(--mat-app-primary);
183-
color: var(--mat-app-on-primary);
184-
font: var(--mat-app-body-medium);
185-
border-radius: var(--mat-app-corner-large);
186-
box-shadow: var(--mat-app-level3);
182+
background-color: var(--mat-sys-primary);
183+
color: var(--mat-sys-on-primary);
184+
font: var(--mat-sys-body-medium);
185+
border-radius: var(--mat-sys-corner-large);
186+
box-shadow: var(--mat-sys-level3);
187187
padding: 16px;
188188

189189
@include mat.theme-overrides((
190190
primary: #ebdcff,
191191
on-primary: #230f46,
192192
body-medium: 600 1.5rem / 2.25rem Arial,
193193
corner-large: 32px,
194-
level3: 0 4px 6px 1px var(--mat-app-surface-dim),
194+
level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
195195
));
196196
}

0 commit comments

Comments
 (0)
Please sign in to comment.