Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit f750ec7

Browse files
williamernestwilliamernest
authored
feat(typography): Update styles to match guidance (#2527)
Update all typography styles to match new guidance. Added a method of overriding individual properties in individual styles. BREAKING CHANGE: Previous typography styles are removed. The new styles are listed in the readme.
1 parent 9938d31 commit f750ec7

36 files changed

+419
-302
lines changed

‎demos/button.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,9 @@
105105
<label for="toggle-disabled" id="toggle-disabled-label">Disable buttons (excluding links)</label>
106106
</div>
107107

108-
<h1 class="mdc-typography--display2">Ripple Enabled</h1>
108+
<h1 class="mdc-typography--headline3">Ripple Enabled</h1>
109109
<fieldset>
110-
<legend class="mdc-typography--title">Text Button</legend>
110+
<legend class="mdc-typography--headline6">Text Button</legend>
111111
<div>
112112
<button class="mdc-button">
113113
Baseline
@@ -136,7 +136,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
136136
</fieldset>
137137

138138
<fieldset>
139-
<legend class="mdc-typography--title">Raised Button</legend>
139+
<legend class="mdc-typography--headline6">Raised Button</legend>
140140
<div>
141141
<button class="mdc-button mdc-button--raised">
142142
Baseline
@@ -165,7 +165,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
165165
</fieldset>
166166

167167
<fieldset>
168-
<legend class="mdc-typography--title">Unelevated Button (Experimental)</legend>
168+
<legend class="mdc-typography--headline6">Unelevated Button (Experimental)</legend>
169169
<div>
170170
<button class="mdc-button mdc-button--unelevated">
171171
Baseline
@@ -194,7 +194,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
194194
</fieldset>
195195

196196
<fieldset>
197-
<legend class="mdc-typography--title">Stroked Button (Experimental)</legend>
197+
<legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
198198
<div>
199199
<button class="mdc-button mdc-button--stroked">
200200
Baseline
@@ -223,7 +223,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
223223
</fieldset>
224224

225225
<fieldset>
226-
<legend class="mdc-typography--title">Custom button (Experimental)</legend>
226+
<legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
227227
<div>
228228
<button class="mdc-button mdc-button--unelevated big-round-corner-button">
229229
Corner Radius
@@ -235,7 +235,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
235235
</fieldset>
236236

237237
<fieldset>
238-
<legend class="mdc-typography--title">Different Color Icons/Ink</legend>
238+
<legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
239239
<div>
240240
<button class="mdc-button mdc-button--unelevated demo-ink-color">
241241
<i class="material-icons mdc-button__icon">favorite</i>
@@ -248,9 +248,9 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
248248
</div>
249249
</fieldset>
250250

251-
<h1 class="mdc-typography--display2">CSS Only</h1>
251+
<h1 class="mdc-typography--headline3">CSS Only</h1>
252252
<fieldset>
253-
<legend class="mdc-typography--title">Text Button</legend>
253+
<legend class="mdc-typography--headline6">Text Button</legend>
254254
<div>
255255
<button class="mdc-button" data-demo-no-js>
256256
Baseline
@@ -279,7 +279,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
279279
</fieldset>
280280

281281
<fieldset>
282-
<legend class="mdc-typography--title">Raised Button</legend>
282+
<legend class="mdc-typography--headline6">Raised Button</legend>
283283
<div>
284284
<button class="mdc-button mdc-button--raised" data-demo-no-js>
285285
Baseline
@@ -308,7 +308,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
308308
</fieldset>
309309

310310
<fieldset>
311-
<legend class="mdc-typography--title">Unelevated Button (Experimental)</legend>
311+
<legend class="mdc-typography--headline6">Unelevated Button (Experimental)</legend>
312312
<div>
313313
<button class="mdc-button mdc-button--unelevated" data-demo-no-js>
314314
Baseline
@@ -338,7 +338,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
338338
</fieldset>
339339

340340
<fieldset>
341-
<legend class="mdc-typography--title">Stroked Button (Experimental)</legend>
341+
<legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
342342
<div>
343343
<button class="mdc-button mdc-button--stroked" data-demo-no-js>
344344
Baseline
@@ -367,7 +367,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
367367
</fieldset>
368368

369369
<fieldset>
370-
<legend class="mdc-typography--title">Custom button (Experimental)</legend>
370+
<legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
371371
<div>
372372
<button class="mdc-button mdc-button--unelevated big-round-corner-button" data-demo-no-js>
373373
Big Corner Radius
@@ -379,7 +379,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
379379
</fieldset>
380380

381381
<fieldset>
382-
<legend class="mdc-typography--title">Different Color Icons/Ink</legend>
382+
<legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
383383
<div>
384384
<button class="mdc-button mdc-button--unelevated demo-ink-color" data-demo-no-js>
385385
<i class="material-icons mdc-button__icon">favorite</i>

‎demos/card.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@
4545
<a class="mdc-card__primary-action" href="#">
4646
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></div>
4747
<div class="demo-card__primary">
48-
<h2 class="demo-card__title mdc-typography--title">Our Changing Planet</h2>
49-
<h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
48+
<h2 class="demo-card__title mdc-typography--headline6">Our Changing Planet</h2>
49+
<h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
5050
</div>
51-
<div class="demo-card__secondary mdc-typography--body1">
51+
<div class="demo-card__secondary mdc-typography--body2">
5252
Visit ten places on our planet that are undergoing the biggest changes today.
5353
</div>
5454
</a>
@@ -100,22 +100,22 @@ <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
100100

101101
<section class="demo-card-collection">
102102
<div class="mdc-card mdc-card--stroked demo-card">
103-
<div class="demo-card-article-group-heading mdc-typography--subheading2">Headlines</div>
103+
<div class="demo-card-article-group-heading mdc-typography--subtitle2">Headlines</div>
104104

105105
<hr class="mdc-list-divider">
106106

107107
<a class="demo-card-article mdc-ripple-surface" href="#">
108-
<h2 class="demo-card-article__title mdc-typography--headline">Copper on the rise</h2>
109-
<p class="demo-card-article__snippet mdc-typography--body1">
108+
<h2 class="demo-card-article__title mdc-typography--headline5">Copper on the rise</h2>
109+
<p class="demo-card-article__snippet mdc-typography--body2">
110110
Copper price soars amid global market optimism and increased demand.
111111
</p>
112112
</a>
113113

114114
<hr class="mdc-list-divider">
115115

116116
<a class="demo-card-article mdc-ripple-surface" href="#">
117-
<h2 class="demo-card-article__title mdc-typography--headline">U.S. tech startups rebound</h2>
118-
<p class="demo-card-article__snippet mdc-typography--body1">
117+
<h2 class="demo-card-article__title mdc-typography--headline5">U.S. tech startups rebound</h2>
118+
<p class="demo-card-article__snippet mdc-typography--body2">
119119
Favorable business conditions have allowed startups to secure more fundraising deals compared to last
120120
year.
121121
</p>
@@ -124,8 +124,8 @@ <h2 class="demo-card-article__title mdc-typography--headline">U.S. tech startups
124124
<hr class="mdc-list-divider">
125125

126126
<a class="demo-card-article mdc-ripple-surface" href="#">
127-
<h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energy ambitions</h2>
128-
<p class="demo-card-article__snippet mdc-typography--body1">
127+
<h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean energy ambitions</h2>
128+
<p class="demo-card-article__snippet mdc-typography--body2">
129129
China plans to invest billions of dollars for the development of over 300 clean energy projects in
130130
Southeast Asia.
131131
</p>
@@ -145,7 +145,7 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
145145
<a class="mdc-card__primary-action demo-card__primary-action" href="#">
146146
<div class="mdc-card__media mdc-card__media--square demo-card__media">
147147
<div class="mdc-card__media-content demo-card__media-content--with-title">
148-
<div class="demo-card__media-title mdc-typography--subheading2">
148+
<div class="demo-card__media-title mdc-typography--subtitle2">
149149
Vacation Photos
150150
</div>
151151
</div>
@@ -185,9 +185,9 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
185185
<div class="demo-card__music-row">
186186
<div class="mdc-card__media mdc-card__media--square demo-card__media demo-card__media--music"></div>
187187
<div class="demo-card__music-info">
188-
<div class="demo-card__music-title mdc-typography--headline">Rozes</div>
189-
<div class="demo-card__music-artist mdc-typography--body1">Under the Grave</div>
190-
<div class="demo-card__music-year mdc-typography--body1">(2016)</div>
188+
<div class="demo-card__music-title mdc-typography--headline5">Rozes</div>
189+
<div class="demo-card__music-artist mdc-typography--body2">Under the Grave</div>
190+
<div class="demo-card__music-year mdc-typography--body2">(2016)</div>
191191
</div>
192192
</div>
193193
</a>

‎demos/drawer/drawer.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@
4747
flex-grow: 1;
4848
}
4949

50-
@include mdc-typography(display2);
51-
font-size: 24px;
50+
@include mdc-typography(headline6);
5251
display: flex;
5352
}
5453

‎demos/drawer/permanent-drawer-above-toolbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
</header>
115115

116116
<main class="demo-main">
117-
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
117+
<h1 class="mdc-typography--headline4">Permanent Drawer</h1>
118118
<p class="mdc-typography--body1">It sits to the left of this content.</p>
119119

120120
<div id="demo-radio-buttons">

‎demos/drawer/permanent-drawer-below-toolbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
</div>
107107
</nav>
108108
<main class="demo-main">
109-
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
109+
<h1 class="mdc-typography--headline4">Permanent Drawer</h1>
110110
<p class="mdc-typography--body1">It sits to the left of this content.</p>
111111

112112
<div id="demo-radio-buttons">

‎demos/drawer/persistent-drawer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
</header>
105105

106106
<main class="demo-main">
107-
<h1 class="mdc-typography--display1">Persistent Drawer</h1>
107+
<h1 class="mdc-typography--headline4">Persistent Drawer</h1>
108108
<p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
109109
<div id="demo-radio-buttons" class="theme-radio-buttons">
110110
<div class="mdc-form-field">

‎demos/drawer/temporary-drawer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
</nav>
9292
</aside>
9393
<main class="demo-main mdc-toolbar-fixed-adjust">
94-
<h1 class="mdc-typography--display1">Temporary Drawer</h1>
94+
<h1 class="mdc-typography--headline4">Temporary Drawer</h1>
9595
<p class="mdc-typography--body1">Click the menu icon above to open.</p>
9696
<div id="demo-radio-buttons" class="theme-radio-buttons">
9797
<div class="mdc-form-field">

‎demos/image-list.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
</div>
150150
</div>
151151

152-
<h1 class="mdc-typography--headline">Standard Image List</h1>
152+
<h1 class="mdc-typography--headline5">Standard Image List</h1>
153153
<div>
154154
<div class="mdc-form-field">
155155
<div class="mdc-radio">
@@ -305,7 +305,7 @@ <h1 class="mdc-typography--headline">Standard Image List</h1>
305305
</li>
306306
</ul>
307307

308-
<h1 class="mdc-typography--headline">Masonry Image List</h1>
308+
<h1 class="mdc-typography--headline5">Masonry Image List</h1>
309309
<div>
310310
<div class="mdc-form-field">
311311
<div class="mdc-radio">

‎demos/linear-progress.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373

7474
<section>
7575
<fieldset>
76-
<legend class="mdc-typography--title">Linear Progress Indicators</legend>
76+
<legend class="mdc-typography--headline6">Linear Progress Indicators</legend>
7777

7878
<figure class="linear-progress-demo">
7979
<div role="progressbar" class="mdc-linear-progress">

‎demos/select.html

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,6 @@
3131
padding-left: 0;
3232
}
3333

34-
/* Hack to work around style-loader asynchronously loading styles. */
35-
/* Equivalent to using mdc-typography's subheading2, which is used in the sass file. */
36-
.mdc-select {
37-
font-family: Roboto, sans-serif;
38-
font-size: 1rem;
39-
font-weight: 400;
40-
letter-spacing: .04em;
41-
}
42-
4334
.example {
4435
max-width: 400px;
4536
margin: 24px;
@@ -87,7 +78,7 @@
8778
</section>
8879

8980
<section class="example">
90-
<h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
81+
<h2 class="mdc-typography--headline6">Fully-Featured JS Component</h2>
9182
<section id="demo-wrapper">
9283
<div id="js-select" class="mdc-select">
9384
<select class="mdc-select__native-control" id="full-func-js-select">
@@ -141,7 +132,7 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
141132
</div>
142133
</section>
143134
<section class="example">
144-
<h2 class="mdc-typography--title">Select box</h2>
135+
<h2 class="mdc-typography--headline6">Select box</h2>
145136
<section id="box-demo-wrapper">
146137
<div id="box-js-select" class="mdc-select mdc-select--box">
147138
<select class="mdc-select__native-control" id="select-box">
@@ -188,7 +179,7 @@ <h2 class="mdc-typography--title">Select box</h2>
188179
</div>
189180
</section>
190181
<section class="example">
191-
<h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
182+
<h2 class="mdc-typography--headline6">Pre-selected option via HTML</h2>
192183
<section>
193184
<div id="js-pre-selected" class="mdc-select">
194185
<select class="mdc-select__native-control" id="select-preselected">
@@ -211,7 +202,7 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
211202
</section>
212203
</section>
213204
<section class="example">
214-
<h2 class="mdc-typography--title">MDC Select with optgroups</h2>
205+
<h2 class="mdc-typography--headline6">MDC Select with optgroups</h2>
215206
<div id="optgroup-js-select" class="mdc-select">
216207
<select class="mdc-select__native-control" id="select-optgroups">
217208
<optgroup label="Meats">

0 commit comments

Comments
 (0)