feat(typography): Add button style to typography (#1064)

packages/mdc-typography/README.md

@@ -24,6 +24,7 @@ MDC Typography is a foundational module that applies these styles to MDC Web com
 * Body 2
 * Body 1
 * Caption
+* Button
 
 ### Usage
 
@@ -88,6 +89,7 @@ CSS Class | Description
 `mdc-typography--body2` | Sets font properties as Body 2
 `mdc-typography--body1` | Sets font properties as Body 1
 `mdc-typography--caption` | Sets font properties as Caption
+`mdc-typography--button` | Sets font properties as Button
 `mdc-typography--adjust-margin` | Positions text, used in conjunction with font classes above
 
 > **A note about `mdc-typography--adjust-margin`**, `mdc-typography--adjust-margin` will change the margin properties of the element it is applied to, to align text correctly. `mdc-typography--adjust-margin` should only be used in a text context; using this property on UI elements such as buttons may cause them to be positioned incorrectly.
@@ -120,3 +122,4 @@ These styles can be used as the `$style` argument for `mdc-typography` and `mdc-
 * `body2`
 * `body1`
 * `caption`
+* `button`

packages/mdc-typography/_mixins.scss

@@ -35,6 +35,8 @@
   font-weight: #{map-get($style-props, font-weight)};
   letter-spacing: map-get($style-props, letter-spacing);
   line-height: map-get($style-props, line-height);
+  text-decoration: map-get($style-props, text-decoration);
+  text-transform: map-get($style-props, text-transform);
 }
 
 @mixin mdc-typography-adjust-margin($style) {

packages/mdc-typography/_variables.scss

@@ -35,76 +35,107 @@ $mdc-typography-styles: (
     line-height: 7rem, /* 112sp */
     font-weight: map-get($mdc-typography-font-weight-values, light),
     letter-spacing: -.04em,
-    margin: -1rem 0 3.5rem -.085em /* -16sp 0 56sp -.085em */
+    margin: -1rem 0 3.5rem -.085em /* -16sp 0 56sp -.085em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   display3: (
     font-size: 3.5rem, /* 56px */
     line-height: 3.5rem, /* 56px */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: -.02em,
-    margin: -8px 0 64px -.07em
+    margin: -8px 0 64px -.07em,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   display2: (
     font-size: 2.813rem, /* 45px */
     line-height: 3rem, /* 48px */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: normal,
-    margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */
+    margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   display1: (
     font-size: 2.125rem, /* 34sp */
     line-height: 2.5rem, /* 40sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: normal,
-    margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */
+    margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   headline: (
     font-size: 1.5rem, /* 24sp */
     line-height: 2rem, /* 32sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: normal,
-    margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */
+    margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   title: (
     font-size: 1.25rem, /* 20sp */
     line-height: 2rem, /* 32sp */
     font-weight: map-get($mdc-typography-font-weight-values, medium),
     letter-spacing: .02em,
-    margin: -.5rem 0 1rem -.05em /* -8sp 0 16sp -.05em */
+    margin: -.5rem 0 1rem -.05em /* -8sp 0 16sp -.05em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   subheading2: (
     font-size: 1rem, /* 16sp */
     line-height: 1.75rem, /* 28sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .04em,
-    margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */
+    margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   subheading1: (
     font-size: .938rem, /* 15sp */
     line-height: 1.5rem, /* 24sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .04em,
-    margin: -.313rem 0 .813rem -.06em /* -5sp 0 13sp -.06em */
+    margin: -.313rem 0 .813rem -.06em /* -5sp 0 13sp -.06em */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   body2: (
     font-size: .875rem, /* 14sp */
     line-height: 1.5rem, /* 24sp */
     font-weight: map-get($mdc-typography-font-weight-values, medium),
     letter-spacing: .04em,
-    margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */
+    margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   body1: (
     font-size: .875rem, /* 14sp */
     line-height: 1.25rem, /* 20sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .04em,
-    margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */
+    margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */,
+    text-decoration: inherit,
+    text-transform: inherit
   ),
   caption: (
     font-size: .75rem, /* 12sp */
     line-height: 1.25rem, /* 20sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .08em,
-    margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */
+    margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */,
+    text-decoration: inherit,
+    text-transform: inherit
+  ),
+  button: (
+    font-size: .875rem, /* 14sp */
+    line-height: 2.25rem, /* 36sp */
+    font-weight: map-get($mdc-typography-font-weight-values, medium),
+    letter-spacing: .04em,
+    margin: inherit /* We do not have adjust margin for button */,
+    text-decoration: none,
+    text-transform: uppercase
   )
 ) !default;