Skip to content

Commit e650b04

Browse files
crisbetommalerba
authored andcommitted
feat: integrate typography api into all components (#4375)
* feat: integrate typography api into all components * Includes the base typography styles for headers, body text etc. * Adds mixins for typography next to the theme and moves out all of the component typography styles into them. * Switches all the hardcoded typography values to use the ones from the spec. * Adjusts the letter spacing on some of the headers to align them to the spec. **Note:** While going through the components, I haven't checked whether the styles are accurate in regards to the spec. I've left notes in the places where the font sizes weren't a part of the pre-defined ones. * fix: address feedback * fix: explicit toolbar header typography * chore: add comments about letter spacing * fix: theme error * chore: re-add $mat-font-family * fix: missing typography for mat-icon-button
1 parent 0c03946 commit e650b04

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+412
-145
lines changed

src/demo-app/demo-app-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {StyleDemo} from './style/style-demo';
4040
import {DataTableDemo} from './data-table/data-table-demo';
4141
import {PeopleDatabase} from './data-table/people-database';
4242
import {DatepickerDemo} from './datepicker/datepicker-demo';
43+
import {TypographyDemo} from './typography/typography-demo';
4344
import {
4445
CdkDataTableModule,
4546
FullscreenOverlayContainer,
@@ -168,6 +169,7 @@ export class DemoMaterialModule {}
168169
RainyTabContent,
169170
FoggyTabContent,
170171
PlatformDemo,
172+
TypographyDemo,
171173
],
172174
providers: [
173175
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},

src/demo-app/demo-app/demo-app.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div>
2222
<md-toolbar color="primary">
2323
<button md-icon-button (click)="start.open()">
24-
<md-icon class="md-24" >menu</md-icon>
24+
<md-icon class="md-24">menu</md-icon>
2525
</button>
2626
<div class="demo-toolbar">
2727
<h1>Angular Material Demos</h1>
@@ -30,9 +30,10 @@ <h1>Angular Material Demos</h1>
3030
<button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
3131
Change detection: {{changeDetectionStrategy}}
3232
</button>
33-
<button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
34-
Fullscreen
33+
<button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
34+
<md-icon class="md-24">fullscreen</md-icon>
3535
</button>
36+
<button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
3637
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
3738
{{root.dir.toUpperCase()}}
3839
</button>

src/demo-app/demo-app/demo-app.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export class DemoApp {
6565
{name: 'Toolbar', route: 'toolbar'},
6666
{name: 'Tooltip', route: 'tooltip'},
6767
{name: 'Platform', route: 'platform'},
68-
{name: 'Style', route: 'style'}
68+
{name: 'Style', route: 'style'},
69+
{name: 'Typography', route: 'typography'}
6970
];
7071

7172
constructor(private _element: ElementRef) {

src/demo-app/demo-app/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {InputDemo} from '../input/input-demo';
3434
import {StyleDemo} from '../style/style-demo';
3535
import {DatepickerDemo} from '../datepicker/datepicker-demo';
3636
import {DataTableDemo} from '../data-table/data-table-demo';
37+
import {TypographyDemo} from '../typography/typography-demo';
3738

3839
export const DEMO_APP_ROUTES: Routes = [
3940
{path: '', component: Home},
@@ -70,4 +71,5 @@ export const DEMO_APP_ROUTES: Routes = [
7071
{path: 'snack-bar', component: SnackBarDemo},
7172
{path: 'platform', component: PlatformDemo},
7273
{path: 'style', component: StyleDemo},
74+
{path: 'typography', component: TypographyDemo}
7375
];

src/demo-app/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1111
<link href="theme.css" rel="stylesheet">
12+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
1213

1314
<!-- FontAwesome for md-icon demo. -->
1415
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!-- via https://en.wikipedia.org/wiki/Pangram -->
2+
<h1 class="mat-h0">How vexingly quick daft zebras jump!</h1>
3+
<h1 class="mat-h1">Jackdaws love my big sphinx of quartz.</h1>
4+
<h2 class="mat-h2">The five boxing wizards jump quickly.</h2>
5+
<h3 class="mat-h3">Pack my box with five dozen liquor jugs.</h3>
6+
<h4 class="mat-h4">Bright vixens jump; dozy fowl quack.</h4>
7+
<h5 class="mat-h5">Sphinx of black quartz, judge my vow.</h5>
8+
<h6 class="mat-h6">The quick brown fox jumps over the lazy dog.</h6>
9+
10+
<div class="mat-body">
11+
<p>
12+
Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
13+
mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
14+
chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
15+
jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
16+
chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
17+
mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
18+
</p>
19+
20+
<p>
21+
Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
22+
jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
23+
darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
24+
jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
25+
obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
26+
twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
27+
</p>
28+
29+
<p>
30+
Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
31+
amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
32+
skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
33+
Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
34+
chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
35+
Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
36+
</p>
37+
</div>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mat-body {
2+
max-width: 800px;
3+
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'typography-demo',
7+
templateUrl: 'typography-demo.html',
8+
styleUrls: ['typography-demo.css'],
9+
})
10+
export class TypographyDemo { }

src/lib/autocomplete/_autocomplete-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,6 @@
2121
}
2222
}
2323

24-
}
24+
}
25+
26+
@mixin mat-autocomplete-typography($config) { }

src/lib/button-toggle/_button-toggle-theme.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../core/theming/palette';
22
@import '../core/theming/theming';
3+
@import '../core/typography/typography-utils';
34

45
// Applies a focus style to an md-button-toggle element for each of the supported palettes.
56
@mixin _mat-button-toggle-focus-color($theme) {
@@ -36,3 +37,9 @@
3637
}
3738
}
3839
}
40+
41+
@mixin mat-button-toggle-typography($config) {
42+
.mat-button-toggle {
43+
font-family: mat-font-family($config);
44+
}
45+
}

0 commit comments

Comments
 (0)