feat(typography): Implement initial typography.

Implements initial variables, mixins and CSS classes for typography. Resolves #4542. [Delivers #126819303]
google · Jul 28, 2016 · fd76f67 · fd76f67
1 parent 2db87a8
commit fd76f67
Show file tree

Hide file tree

Showing 10 changed files with 478 additions and 2 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -27,6 +27,7 @@
  <li><a href="checkbox.html">Checkbox</a></li>
  <li><a href="radio.html">Radio</a></li>
  <li><a href="ripple.html">Ripple</a></li>
+ <li><a href="typography.html">Typography</a></li>
  </ul>
  </nav>
  </main>

diff --git a/demos/typography.html b/demos/typography.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+ Copyright 2016 Google Inc. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>MDL Typography Demo</title>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
+ <style>
+ .demo-typography--section {
+ padding: 16px;
+ border: 1px solid #ddd;
+ }
+ .demo-typography--color-styles {
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .demo-typography--light-bg {
+ background-color: #fafafa;
+ }
+ .demo-typography--dark-bg {
+ background-color: #1d1d1d;
+ }
+ </style>
+ </head>
+ <body>
+ <main>
+ <h1>MDL Typography</h1>
+ <h2>Styles</h2>
+ <section class="demo-typography--section mdl-typography">
+ <h1 class="mdl-typography--display4">Display 4</h1>
+ <h1 class="mdl-typography--display3">Display 3</h1>
+ <h1 class="mdl-typography--display2">Display 2</h1>
+ <h1 class="mdl-typography--display1">Display 1</h1>
+ <h1 class="mdl-typography--headline">Headline</h2>
+ <h2 class="mdl-typography--title">
+ Title <span class="mdl-typography--caption">Caption.</span>
+ </h3>
+ <h3 class="mdl-typography--subheading2">Subheading 2</h3>
+ <h4 class="mdl-typography--subheading1">Subheading 1</h4>
+ <p class="mdl-typography--body1">Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+ in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ <aside class="mdl-typography--body2">Body 2 text, calling something out.</aside>
+ </section>
+
+ <h2>Styles with margin adjustments</h2>
+ <section class="demo-typography--section mdl-typography">
+ <h1 class="mdl-typography--display4 mdl-typography--adjust-margin">Display 4</h1>
+ <h1 class="mdl-typography--display3 mdl-typography--adjust-margin">Display 3</h1>
+ <h1 class="mdl-typography--display2 mdl-typography--adjust-margin">Display 2</h1>
+ <h1 class="mdl-typography--display1 mdl-typography--adjust-margin">Display 1</h1>
+ <h1 class="mdl-typography--headline mdl-typography--adjust-margin">Headline</h2>
+ <h2 class="mdl-typography--title mdl-typography--adjust-margin">
+ Title <span class="mdl-typography--caption mdl-typography--adjust-margin">Caption.</span>
+ </h3>
+ <h3 class="mdl-typography--subheading2 mdl-typography--adjust-margin">Subheading 2</h3>
+ <h4 class="mdl-typography--subheading1 mdl-typography--adjust-margin">Subheading 1</h4>
+ <p class="mdl-typography--body1 mdl-typography--adjust-margin">Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+ in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ <aside class="mdl-typography--body2 mdl-typography--adjust-margin">Body 2 text, calling something out.</aside>
+ </section>
+
+ <h2>Color Classes</h2>
+ <section class="demo-typography--section mdl-typography">
+ <p class="demo-typography--color-styles demo-typography--light-bg mdl-typography--body2">
+ <span class="mdl-typography--color-primary-dark">Primary Dark</span>
+ <span class="mdl-typography--color-secondary-dark">Secondary Dark</span>
+ <span class="mdl-typography--color-hint-dark">Hint Dark</span>
+ <span class="mdl-typography--color-disabled-dark">Disabled Dark</span>
+ <span class="mdl-typography--color-icon-dark">
+ <span class="material-icons">favorite</span> (Icon Dark)
+ </span>
+ </p>
+ <p class="demo-typography--color-styles demo-typography--dark-bg mdl-typography--body2">
+ <span class="mdl-typography--color-primary-light">Primary Light</span>
+ <span class="mdl-typography--color-secondary-light">Secondary Light</span>
+ <span class="mdl-typography--color-hint-light">Hint Light</span>
+ <span class="mdl-typography--color-disabled-light">Disabled Light</span>
+ <span class="mdl-typography--color-icon-light">
+ <span class="material-icons">favorite</span> (Icon Light)
+ </span>
+ </p>
+ </section>
+ </main>
+ </body>
+</html>
diff --git a/packages/material-design-lite/material-design-lite.scss b/packages/material-design-lite/material-design-lite.scss
@@ -18,3 +18,4 @@
 @import "mdl-checkbox/mdl-checkbox";
 @import "mdl-radio/mdl-radio";
 @import "mdl-ripple/mdl-ripple";
+@import "mdl-typography/mdl-typography";
diff --git a/packages/material-design-lite/package.json b/packages/material-design-lite/package.json
@@ -9,6 +9,7 @@
  "mdl-base-component": "^1.0.0",
  "mdl-checkbox": "^1.0.0",
  "mdl-radio": "^1.0.0",
- "mdl-ripple": "^1.0.0"
+ "mdl-ripple": "^1.0.0",
+ "mdl-typography": "^1.0.0"
  }
 }
diff --git a/packages/mdl-typography/README.md b/packages/mdl-typography/README.md
@@ -0,0 +1,134 @@
+# mdl-typography
+
+MDL typography is a CSS-only component that implements the
+[Material Design typography guidelines](https://material.google.com/style/typography.html), and makes them available to
+developers as CSS classes.
+
+## Installation
+
+> Note: Installation via the npm registry will be available after alpha.
+
+
+## Usage
+
+### Step 1: Import styles
+
+<!-- TODO(sgomes): Write this section once it becomes clear how component CSS will be imported in end user code. -->
+
+### Step 2: Import the Roboto font
+
+Material Design typography uses the Roboto font, which can easily be loaded from Google Fonts:
+
+```html
+<head>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+</head>
+```
+
+> Note: You can load more font weights and styles if you wish, but `mdl-typography` only uses 300, 400 and 500.
+
+### Step 3: `mdl-typography` class
+
+Any text that is to be formatted needs to have the `mdl-typography` class defined at some point in its hierarchy.
+
+```html
+<body class="mdl-typography">
+
+</body>
+
+```
+
+This class defines basic properties for text, such as the typeface and antialiasing settings.
+
+### Step 4: Format your text
+
+#### Style
+
+Simply add the corresponding style class to format your text:
+
+```html
+<body class="mdl-typography">
+ <h1 class="mdl-typography--display4">Big header</h1>
+
+ <p class="mdl-typography--body1">
+ A paragraph with <span class="mdl-typography--body2">emphasis</span>.
+ </p>
+</body>
+```
+
+The full list of styles:
+
+- `mdl-typography--display4`
+- `mdl-typography--display3`
+- `mdl-typography--display2`
+- `mdl-typography--display1`
+- `mdl-typography--headline`
+- `mdl-typography--title`
+- `mdl-typography--subheading`
+- `mdl-typography--body2`
+- `mdl-typography--body1`
+- `mdl-typography--caption`
+
+#### Margins and positioning
+
+In order to minimize unexpected behavior, the style classes only specify font properties, such as size, weight and line
+height.
+
+This means that while text will be correctly styled, it may not be correctly positioned. If you include the
+`mdl-typography--adjust-margin` class, though, positioning will be adjusted according to the style:
+
+```html
+<body class="mdl-typography">
+ <h1 class="mdl-typography--display4 mdl-typography--adjust-margin">
+ Big header
+ </h1>
+
+ <p class="mdl-typography--body1 mdl-typography--adjust-margin">
+ A paragraph with
+ <span class="mdl-typography--body2 mdl-typography--adjust-margin">
+ emphasis
+ </span>.
+ </p>
+</body>
+```
+
+> Note: as the name implies, `mdl-typography--adjust-margin` will change the margin properties of the element it's
+applied to, in order to align text correctly. Because of this, it should only be used in a text context; using this
+property on UI elements such as buttons may cause them to be positioned incorrectly.
+
+#### Color
+
+Most Material Design text is either black or white, but can have different opacity values depending on usage. The color
+classes help you apply the right color depending on context:
+
+```html
+<body class="mdl-typography">
+ <p class="mdl-typography--body1">
+ <span class="mdl-typography--color-primary-dark">
+ Some dark primary text.
+ </span>
+ <span class="mdl-typography--color-secondary-dark">
+ Followed by some dark secondary text.
+ </span>
+ </p>
+
+ <div class="mdl-typography--body1 mdl-typography--color-primary-light">
+ This div has a dark background, so we use a light color for text.
+ </div>
+</body>
+```
+
+The full list of color classes:
+
+| Class | Description |
+| --------------------------------- | ---------------------------------------------- |
+| `mdl-typography--primary-dark` | Primary text, in a dark color. |
+| `mdl-typography--secondary-dark` | Secondary text, in a dark color. |
+| `mdl-typography--hint-dark` | Hint text, in a dark color. |
+| `mdl-typography--disabled-dark` | Disabled text, in a dark color. |
+| `mdl-typography--icon-dark` | Icon, in a dark color (used with icon fonts). |
+| `mdl-typography--primary-light` | Primary text, in a light color. |
+| `mdl-typography--secondary-light` | Secondary text, in a light color. |
+| `mdl-typography--hint-light` | Hint text, in a light color. |
+| `mdl-typography--disabled-light` | Disabled text, in a light color. |
+| `mdl-typography--icon-light` | Icon, in a light color (used with icon fonts). |
diff --git a/packages/mdl-typography/_mixins.scss b/packages/mdl-typography/_mixins.scss
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// All variables are local, so disable pattern checking.
+// stylelint-disable scss/dollar-variable-pattern
+
+@import "./variables";
+
+@mixin mdl-typography-base {
+ font-family: $mdl-typography-font-family;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+
+@mixin mdl-typography($style) {
+ $style-props: map-get($mdl-typography-styles, $style);
+
+ @if not map-has-key($mdl-typography-styles, $style) {
+ @error "Invalid style specified! Choose one of #{map-keys($mdl-typography-styles)}";
+ }
+
+ @include mdl-typography-base;
+
+ font-size: map-get($style-props, font-size);
+ font-weight: #{map-get($style-props, font-weight)};
+ letter-spacing: map-get($style-props, letter-spacing);
+ line-height: map-get($style-props, line-height);
+}
+
+@mixin mdl-typography-adjust-margin($style) {
+ margin: map-get(map-get($mdl-typography-styles, $style), margin);
+}
+
+@mixin mdl-typography-color($color-style, $dark: false) {
+ $color-map: if($dark, $mdl-typography-colors-dark, $mdl-typography-colors-light);
+
+ color: map-get($color-map, $color-style);
+
+ @if not map-has-key($color-map, $color-style) {
+ @error "Invalid typography style. Specify one of #{map-keys($color-map)}";
+ }
+}