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
angular · May 31, 2017 · e650b04 · e-cloud · Jun 20, 2017 · e650b04
1 parent 0c03946
commit e650b04
Show file tree

Hide file tree

Showing 56 changed files with 412 additions and 145 deletions.
diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
@@ -40,6 +40,7 @@ import {StyleDemo} from './style/style-demo';
 import {DataTableDemo} from './data-table/data-table-demo';
 import {PeopleDatabase} from './data-table/people-database';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {TypographyDemo} from './typography/typography-demo';
 import {
   CdkDataTableModule,
   FullscreenOverlayContainer,
@@ -168,6 +169,7 @@ export class DemoMaterialModule {}
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    TypographyDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},

diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
@@ -21,7 +21,7 @@
   <div>
     <md-toolbar color="primary">
       <button md-icon-button (click)="start.open()">
-        <md-icon class="md-24" >menu</md-icon>
+        <md-icon class="md-24">menu</md-icon>
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
@@ -30,9 +30,10 @@ <h1>Angular Material Demos</h1>
           <button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
             Change detection: {{changeDetectionStrategy}}
           </button>
-          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-            Fullscreen
+          <button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            <md-icon class="md-24">fullscreen</md-icon>
           </button>
+          <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
           <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
             {{root.dir.toUpperCase()}}
           </button>

diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
@@ -65,7 +65,8 @@ export class DemoApp {
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
-    {name: 'Style', route: 'style'}
+    {name: 'Style', route: 'style'},
+    {name: 'Typography', route: 'typography'}
   ];
 
   constructor(private _element: ElementRef) {

diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
@@ -34,6 +34,7 @@ import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DataTableDemo} from '../data-table/data-table-demo';
+import {TypographyDemo} from '../typography/typography-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -70,4 +71,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
+  {path: 'typography', component: TypographyDemo}
 ];
diff --git a/src/demo-app/index.html b/src/demo-app/index.html
@@ -9,6 +9,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

diff --git a/src/demo-app/typography/typography-demo.html b/src/demo-app/typography/typography-demo.html
@@ -0,0 +1,37 @@
+<!-- via https://en.wikipedia.org/wiki/Pangram -->
+<h1 class="mat-h0">How vexingly quick daft zebras jump!</h1>
+<h1 class="mat-h1">Jackdaws love my big sphinx of quartz.</h1>
+<h2 class="mat-h2">The five boxing wizards jump quickly.</h2>
+<h3 class="mat-h3">Pack my box with five dozen liquor jugs.</h3>
+<h4 class="mat-h4">Bright vixens jump; dozy fowl quack.</h4>
+<h5 class="mat-h5">Sphinx of black quartz, judge my vow.</h5>
+<h6 class="mat-h6">The quick brown fox jumps over the lazy dog.</h6>
+
+<div class="mat-body">
+  <p>
+    Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
+    mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
+    chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
+    jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
+    chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
+    mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
+  </p>
+
+  <p>
+    Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
+    jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
+    darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
+    jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
+    obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
+    twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
+  </p>
+
+  <p>
+    Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
+    amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
+    skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
+    Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
+    chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
+    Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
+  </p>
+</div>
diff --git a/src/demo-app/typography/typography-demo.scss b/src/demo-app/typography/typography-demo.scss
@@ -0,0 +1,3 @@
+.mat-body {
+  max-width: 800px;
+}
diff --git a/src/demo-app/typography/typography-demo.ts b/src/demo-app/typography/typography-demo.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'typography-demo',
+  templateUrl: 'typography-demo.html',
+  styleUrls: ['typography-demo.css'],
+})
+export class TypographyDemo { }
diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -21,4 +21,6 @@
     }
   }
 
-}
+}
+
+@mixin mat-autocomplete-typography($config) { }
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 // Applies a focus style to an md-button-toggle element for each of the supported palettes.
 @mixin _mat-button-toggle-focus-color($theme) {
@@ -36,3 +37,9 @@
     }
   }
 }
+
+@mixin mat-button-toggle-typography($config) {
+  .mat-button-toggle {
+    font-family: mat-font-family($config);
+  }
+}
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
@@ -4,7 +4,7 @@
 @import '../core/style/layout-common';
 
 $mat-button-toggle-padding: 0 16px !default;
-$mat-button-toggle-line-height: 36px !default;
+$mat-button-toggle-height: 36px !default;
 $mat-button-toggle-border-radius: 2px !default;
 
 .mat-button-toggle-group {
@@ -36,7 +36,6 @@ $mat-button-toggle-border-radius: 2px !default;
 
 .mat-button-toggle {
   white-space: nowrap;
-  font-family: $mat-font-family;
   position: relative;
 }
 
@@ -47,7 +46,7 @@ $mat-button-toggle-border-radius: 2px !default;
 .mat-button-toggle-label-content {
   @include user-select(none);
   display: inline-block;
-  line-height: $mat-button-toggle-line-height;
+  line-height: $mat-button-toggle-height;
   padding: $mat-button-toggle-padding;
   cursor: pointer;
 }

diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
@@ -38,11 +38,6 @@ $mat-mini-fab-padding: 8px !default;
   white-space: nowrap;
   text-decoration: none;
   vertical-align: baseline;
-
-  // Typography.
-  font-size: $mat-body-font-size-base;
-  font-family: $mat-font-family;
-  font-weight: 500;
   text-align: center;
 
   // Sizing.

diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 // Applies a focus style to an md-button element for each of the supported palettes.
 @mixin _mat-button-focus-color($theme) {
@@ -117,4 +118,8 @@
   }
 }
 
-
+@mixin mat-button-typography($config) {
+  .mat-button, .mat-raised-button, .mat-icon-button {
+    @include mat-typography-level-to-styles($config, button);
+  }
+}
diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-card-theme($theme) {
@@ -15,3 +16,22 @@
     color: mat-color($foreground, secondary-text);
   }
 }
+
+@mixin mat-card-typography($config) {
+  .mat-card {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-card-title {
+    font: {
+      size: mat-font-size($config, headline);
+      weight: mat-font-weight($config, headline);
+    }
+  }
+
+  .mat-card-subtitle,
+  .mat-card-content,
+  .mat-card-header .mat-card-title {
+    font-size: mat-font-size($config, body-1);
+  }
+}
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
@@ -14,7 +14,6 @@ $mat-card-header-size: 40px !default;
   position: relative;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
-  font-family: $mat-font-family;
 
   &:not([class*='mat-elevation-z']) {
     @include mat-elevation(2);
@@ -35,20 +34,8 @@ $mat-card-header-size: 40px !default;
   margin-bottom: 16px;
 }
 
-.mat-card-title {
+.mat-card-title, .mat-card-subtitle, .mat-card-content {
   @extend %mat-card-section-base;
-  font-size: 24px;
-  font-weight: 400;
-}
-
-.mat-card-subtitle {
-  @extend %mat-card-section-base;
-  font-size: $mat-body-font-size-base;
-}
-
-.mat-card-content {
-  @extend %mat-card-section-base;
-  font-size: $mat-body-font-size-base;
 }
 
 .mat-card-actions {
@@ -106,10 +93,6 @@ $mat-card-header-size: 40px !default;
   flex-shrink: 0;
 }
 
-.mat-card-header .mat-card-title {
-  font-size: $mat-body-font-size-base;
-}
-
 // TITLE-GROUP STYLES
 
 // images grouped with title in title-group layout

diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-checkbox-theme($theme) {
@@ -83,3 +84,14 @@
     }
   }
 }
+
+@mixin mat-checkbox-typography($config) {
+  .mat-checkbox {
+    font-family: mat-font-family($config);
+  }
+
+  // TODO(kara): Remove this style when fixing vertical baseline
+  .mat-checkbox-layout .mat-checkbox-label {
+    line-height: mat-line-height($config, body-2);
+  }
+}
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
@@ -187,8 +187,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox {
-  font-family: $mat-font-family;
-
   // Animation
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
@@ -233,11 +231,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 }
 
-// TODO(kara): Remove this style when fixing vertical baseline
-.mat-checkbox-layout .mat-checkbox-label {
-  line-height: 24px;
-}
-
 .mat-checkbox-frame {
   @extend %mat-checkbox-outer-box;
 

diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
@@ -1,5 +1,11 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.
+$mat-chip-font-size: 13px;
+$mat-chip-line-height: 16px;
+
 
 @mixin mat-chips-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
@@ -47,3 +53,10 @@
     }
   }
 }
+
+@mixin mat-chips-typography($config) {
+  .mat-chip:not(.mat-basic-chip) {
+    font-size: $mat-chip-font-size;
+    line-height: $mat-chip-line-height;
+  }
+}
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
@@ -1,7 +1,5 @@
 $mat-chip-vertical-padding: 8px;
 $mat-chip-horizontal-padding: 12px;
-$mat-chip-font-size: 13px;
-$mat-chip-line-height: 16px;
 
 $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
@@ -17,9 +15,6 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
   padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding;
   border-radius: $mat-chip-horizontal-padding * 2;
 
-  font-size: $mat-chip-font-size;
-  line-height: $mat-chip-line-height;
-
   // Apply a margin to adjacent sibling chips.
   & + & {
     margin: 0 0 0 $mat-chips-chip-margin;

diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
@@ -6,6 +6,7 @@
 @import 'option/option';
 @import 'option/option-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
+@import 'typography/all-typography';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mat-core() {
@@ -18,6 +19,7 @@
     }
   }
 
+  @include angular-material-typography();
   @include mat-ripple();
   @include mat-option();
   @include cdk-a11y();

diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss
@@ -1,5 +1,6 @@
 @import '../theming/palette';
 @import '../theming/theming';
+@import '../typography/typography-utils';
 
 @mixin mat-option-theme($theme) {
   $foreground: map-get($theme, foreground);
@@ -42,3 +43,12 @@
     }
   }
 }
+
+@mixin mat-option-typography($config) {
+  .mat-option {
+    font: {
+      family: mat-font-family($config);
+      size: mat-font-size($config, subheading);
+    }
+  }
+}