Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8704335

Browse files
fix(material/core): rename some utility classes (#31795)
1 parent f530d56 commit 8704335

File tree

2 files changed

+29
-25
lines changed

2 files changed

+29
-25
lines changed

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,26 +68,26 @@ <h2>Shape</h2>
6868
<section>
6969
<h2>Elevation</h2>
7070
<div class="demo-grid">
71-
<div class="mat-shadow-level-1 demo-box mat-bg-surface">mat-shadow-level-1</div>
72-
<div class="mat-shadow-level-2 demo-box mat-bg-surface">mat-shadow-level-2</div>
73-
<div class="mat-shadow-level-3 demo-box mat-bg-surface">mat-shadow-level-3</div>
74-
<div class="mat-shadow-level-4 demo-box mat-bg-surface">mat-shadow-level-4</div>
75-
<div class="mat-shadow-level-5 demo-box mat-bg-surface">mat-shadow-level-5</div>
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>
7676
</div>
7777
</section>
7878

7979
<section>
8080
<h2>Outline</h2>
8181
<div class="demo-grid">
82-
<div class="mat-outline demo-box">mat-outline</div>
83-
<div class="mat-outline-variant demo-box">mat-outline-variant</div>
82+
<div class="mat-border demo-box">mat-border</div>
83+
<div class="mat-border-subtle demo-box">mat-border-subtle</div>
8484
</div>
8585
</section>
8686

8787
<section>
8888
<h2>Stateful</h2>
8989
<div class="demo-grid">
90-
<div class="mat-stateful demo-box">mat-stateful</div>
91-
<div class="mat-stateful-primary demo-box">mat-stateful-primary</div>
90+
<div class="mat-interactive demo-box">mat-interactive</div>
91+
<div class="mat-interactive-primary demo-box">mat-interactive-primary</div>
9292
</div>
9393
</section>

‎src/material/core/tokens/_classes.scss‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// Utility classes that can be used to style elements with the most commonly used system tokens in
2-
// Material Design. Includes color, typography, elevation, and shape.
2+
// Material Design. Includes color, typography, elevation, state, and shape.
33
@mixin system-classes() {
44

55
// ***********************************************************************************************
6-
// Background
6+
// Background - Apply background color and a contrastful corresponding text color
7+
// See https://m3.material.io/styles/color/roles for guidance.
78
// ***********************************************************************************************
89

910
// Styles an element with a primary color background and applies an accessible contrasting
@@ -135,7 +136,7 @@
135136

136137

137138
// ***********************************************************************************************
138-
// Text
139+
// Text - Apply colors to text
139140
// ***********************************************************************************************
140141

141142
// Styles the text of an element with the primary color. Use for text that needs to stand out.
@@ -164,7 +165,8 @@
164165

165166

166167
// ***********************************************************************************************
167-
// Font
168+
// Font - Apply typography styles
169+
// See https://m3.material.io/styles/typography/applying-type for guidance.
168170
// ***********************************************************************************************
169171

170172
// Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
@@ -255,50 +257,51 @@
255257

256258

257259
// ***********************************************************************************************
258-
// Corner
260+
// Corner - Apply varying amounts of a border radius
261+
// See https://m3.material.io/styles/shape/corner-radius-scale for guidance.
259262
// ***********************************************************************************************
260263

261264
// Sets the border radius to extra small. Use for components that need a small amount of rounding,
262265
// such as a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.
263-
.mat-rounded-extra-sm {
266+
.mat-corner-extra-sm {
264267
border-radius: var(--mat-sys-corner-extra-small);
265268
}
266269

267270
// Sets the border radius to small. Use for components that need a small amount of rounding, such
268271
// as a text field.
269-
.mat-rounded-sm {
272+
.mat-corner-sm {
270273
border-radius: var(--mat-sys-corner-small);
271274
}
272275

273276
// Sets the border radius to medium. Use for components that need a medium amount of rounding,
274277
// such as a button. In Angular Material, this is used for the shape of a card.
275-
.mat-rounded-md {
278+
.mat-corner-md {
276279
border-radius: var(--mat-sys-corner-medium);
277280
}
278281

279282
// Sets the border radius to large. Use for components that need a large amount of rounding, such
280283
// as a card. In Angular Material, this is used for the shape of a floating action button and a
281284
// datepicker.
282-
.mat-rounded-lg {
285+
.mat-corner-lg {
283286
border-radius: var(--mat-sys-corner-large);
284287
}
285288

286289
// Sets the border radius to extra large. Use for components that need a large amount of
287290
// rounding. In Angular Material, this is used for the shape of a button toggle and the shape of
288291
// a dialog.
289-
.mat-rounded-xl {
292+
.mat-corner-xl {
290293
border-radius: var(--mat-sys-corner-extra-large);
291294
}
292295

293296
// Sets the border radius to full. Use for components that are circular, such as a user avatar.
294297
// In Angular Material, this is used for the shape of a badge and the shape of a button.
295-
.mat-rounded-full {
298+
.mat-corner-full {
296299
border-radius: var(--mat-sys-corner-full);
297300
}
298301

299302

300303
// ***********************************************************************************************
301-
// Border
304+
// Border - Applies a 1px solid border
302305
// ***********************************************************************************************
303306

304307
// Adds an outline to an element. Use for components that need a visible boundary. In Angular
@@ -316,12 +319,12 @@
316319

317320

318321
// ***********************************************************************************************
319-
// State
322+
// Interactive - Adds interaction colors for hover, active, and focus
320323
// ***********************************************************************************************
321324

322325
// Adds hover, focus, and active states to an element by applying varying shades of the surface
323326
// color. Use for interactive components that are not based on a primary color.
324-
.mat-stateful {
327+
.mat-interactive {
325328
&:hover {
326329
background: color-mix(
327330
in srgb,
@@ -349,7 +352,7 @@
349352

350353
// Adds hover, focus, and active states to an element by applying varying shades of the primary
351354
// color. Use for interactive components that are not based on a primary color.
352-
.mat-stateful-primary {
355+
.mat-interactive-primary {
353356
&:hover {
354357
background: color-mix(
355358
in srgb,
@@ -377,7 +380,8 @@
377380

378381

379382
// ***********************************************************************************************
380-
// Elevation
383+
// Shadow - Applies elevation levels through box-shadow
384+
// See https://m3.material.io/styles/elevation/applying-elevation for guidance.
381385
// ***********************************************************************************************
382386

383387
// Use to slightly raise the appearance of a surface. In Angular Material, this is used for the

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /