feat(typography): Typography (#144638)

positive-js · May 23, 2018 · a55ced4 · a55ced4
1 parent 293766c
commit a55ced4
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 80 deletions.
diff --git a/src/lib-dev/typography/styles.scss b/src/lib-dev/typography/styles.scss
@@ -1,6 +1,3 @@
-@import '../../lib/core/core';
-
-
-.demo-typography span {
-    display: block;
-}
+@import '../../lib/core/core';
+
+@include mc-core();
diff --git a/src/lib-dev/typography/template.html b/src/lib-dev/typography/template.html
@@ -1,15 +1,33 @@
-<div class="demo-typography">
-    <span class="mc-h1">Lorem ipsum dolor sit&nbsp;amet</span>
-    <p class="caption">Labore reprehenderit corporis ullam distinctio&nbsp;ex.</p>
-    <span class="mc-display-4">Display 4</span>
-    <span class="mc-display-3">Display 3</span>
-    <span class="mc-display-2">Display 2</span>
-    <span class="mc-display-1">Display 1</span>
-
-    <span class="mc-headline">Headline</span>
-    <span class="mc-title">Title</span>
-    <span class="mc-subheading">Subheading</span>
-
-    <span class="mc-body-2">Body 2</span>
-    <span class="mc-body-1">Body 1</span>
+<div>
+    <div class="">Lorem ipsum dolor sit&nbsp;amet</div>
+    <p class="">Labore reprehenderit corporis ullam distinctio&nbsp;ex.</p>
+    <div class="mc-display-3">Display 3</div>
+    <div class="mc-display-2">Display 2</div>
+    <div class="mc-display-1">Display 1</div>
+
+    <br>
+
+    <div class="mc-headline">Headline</div>
+    <div class="mc-title">Title</div>
+    <div class="mc-subheading">Subheading</div>
+
+    <br>
+
+    <div class="mc-body">Body</div>
+
+    <br>
+
+    <div class="mc-subheading">Subheading</div>
+    <div class="mc-body_caps">BODY CAPS</div>
+    <div class="mc-body_mono">Body mono</div>
+
+    <br>
+
+    <div class="mc-caption">Caption</div>
+    <div class="mc-caption_caps">CAPTION CAPS</div>
+    <div class="mc-caption_mono">Caption mono</div>
+
+    <br>
+
+    <div class="mc-small-text">Small text</div>
 </div>
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
@@ -122,7 +122,6 @@
     }
 }
 
-
 @mixin _mc-button-theme-color($theme, $color: 'default') {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
@@ -146,7 +145,6 @@
     &.mc-primary,
     &.mc-second,
     &.mc-warn {
-
         &.cdk-focused {
             border-color: mc-color($primary, 500);
             box-shadow: 0 0 0 1px mc-color($primary, 500);
@@ -155,7 +153,6 @@
 }
 
 @mixin mc-button-theme($theme) {
-
     .mc-button,
     .mc-xs-button,
     .mc-sm-button,
@@ -167,13 +164,13 @@
 }
 
 @mixin mc-button-typography($config) {
-
-    .mc-button {
-        font: {
-            size:   mc-font-size($config, button);
-            family: mc-font-family($config, button);
-            weight: mc-font-weight($config, button);
-        }
+    .mc-button,
+    .mc-xs-button,
+    .mc-sm-button,
+    .mc-lg-button,
+    .mc-xl-button,
+    .mc-icon-button {
+        @include mc-typography-level-to-styles($config, body);
     }
 }
 
diff --git a/src/lib/core/styles/typography/_typography-utils.scss b/src/lib/core/styles/typography/_typography-utils.scss
@@ -4,14 +4,18 @@
 @function mc-typography-level(
     $font-size,
     $line-height: $font-size,
-    $font-weight: 400,
-    $font-family: null
+    $letter-spacing: normal,
+    $font-weight: normal,
+    $font-family: null,
+    $text-transform: null
 ) {
     @return (
         font-size: $font-size,
         line-height: $line-height,
         font-weight: $font-weight,
-        font-family: $font-family
+        font-family: $font-family,
+        letter-spacing: $letter-spacing,
+        text-transform: $text-transform
     );
 }
 
@@ -31,6 +35,14 @@
     @return _mc-get-type-value($config, $level, font-weight);
 }
 
+@function mc-letter-spacing($config, $level) {
+    @return _mc-get-type-value($config, $level, letter-spacing);
+}
+
+@function mc-text-transform($config, $level) {
+    @return _mc-get-type-value($config, $level, text-transform);
+}
+
 // Gets the font-family from a typography config and removes the quotes around it.
 @function mc-font-family($config, $level: null) {
     $font-family: map-get($config, font-family);
@@ -47,13 +59,30 @@
     $font-weight: mc-font-weight($config, $level);
     $line-height: mc-line-height($config, $level);
     $font-family: mc-font-family($config, $level);
+    $text-transform: mc-font-family($config, $level);
 
     font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    letter-spacing: mc-letter-spacing($config, $level);
+    text-transform: mc-text-transform($config, $level);
 }
 
 // OpenType ligatures, discretionary ligatures and lining figures enabled if available.
 // TODO: mb need add $selector: '.mc-typography' ?
 @mixin mc-base-typography($config) {
+    .mc-display-1 {
+        @include mc-typography-level-to-styles($config, display-1);
+        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    }
+
+    .mc-display-2 {
+        @include mc-typography-level-to-styles($config, display-2);
+        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    }
+
+    .mc-display-3 {
+        @include mc-typography-level-to-styles($config, display-3);
+        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    }
 
     .mc-headline {
         @include mc-typography-level-to-styles($config, headline);
@@ -63,39 +92,35 @@
         @include mc-typography-level-to-styles($config, title);
     }
 
-    .mc-subheading-1 {
-        @include mc-typography-level-to-styles($config, subheading-1);
+    .mc-body {
+        @include mc-typography-level-to-styles($config, body);
     }
 
-    .mc-subheading-2 {
-        @include mc-typography-level-to-styles($config, subheading-2);
+    .mc-body_caps {
+        @include mc-typography-level-to-styles($config, body-caps);
     }
 
-    .mc-body-strong {
-        @include mc-typography-level-to-styles($config, body-2);
+    .mc-subheading {
+        @include mc-typography-level-to-styles($config, subheading);
     }
 
-    .mc-body {
-        @include mc-typography-level-to-styles($config, body-1);
+    .mc-body_mono {
+        @include mc-typography-level-to-styles($config, body-mono);
     }
 
-    .mc-display-1 {
-        @include mc-typography-level-to-styles($config, display-1);
-        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    .mc-caption {
+        @include mc-typography-level-to-styles($config, caption);
     }
 
-    .mc-display-2 {
-        @include mc-typography-level-to-styles($config, display-2);
-        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    .mc-caption_caps {
+        @include mc-typography-level-to-styles($config, caption-caps);
     }
 
-    .mc-display-3 {
-        @include mc-typography-level-to-styles($config, display-3);
-        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    .mc-caption_mono {
+        @include mc-typography-level-to-styles($config, caption-mono);
     }
 
-    .mc-display-4 {
-        @include mc-typography-level-to-styles($config, display-4);
-        font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    .mc-small-text {
+        @include mc-typography-level-to-styles($config, small-text);
     }
 }
diff --git a/src/lib/core/styles/typography/_typography.scss b/src/lib/core/styles/typography/_typography.scss
@@ -4,40 +4,45 @@
 
 @function mc-typography-config(
     $font-family:   map-get(map-get($fonts, base), font-family),
+    $font-family-mono:   map-get(map-get($fonts, monospace), font-family),
 
-    $display-1:     mc-typography-level(34px, 44px),
+    $display-1:     mc-typography-level(34px, 44px, 0.3px),
     $display-2:     mc-typography-level(45px, 56px),
-    $display-3:     mc-typography-level(56px, 76px),
-    $display-4:     mc-typography-level(56px, 76px, 300),
+    $display-3:     mc-typography-level(56px, 76px, -0.4px),
 
     $headline:      mc-typography-level(24px, 32px),
-    $title:         mc-typography-level(20px, 28px, 500),
-    $subheading-1:  mc-typography-level(16px, 20px),
-    $subheading-2:  mc-typography-level(15px, 28px),
+    $title:         mc-typography-level(20px, 28px, 0.2px, 500),
 
-    $body-1:        mc-typography-level(15px, 20px),
-    $body-2:        mc-typography-level(15px, 20px, 500),
-    $caption:       mc-typography-level(13px, 16px),
+    $body:          mc-typography-level(15px, 20px, 0.2px),
+    $body-caps:     mc-typography-level(15px, 20px, 1.7px, normal, $font-family, uppercase),
+    $subheading:    mc-typography-level(15px, 20px, 0.2px, 500),
+    $body-mono:     mc-typography-level(15px, 20px, normal, normal, $font-family-mono),
 
-    $button:        mc-typography-level(15px, 20px)
+    $caption:       mc-typography-level(13px, 16px, 0.2px),
+    $caption-caps:  mc-typography-level(13px, 16px, 1.5px, normal, $font-family, uppercase),
+    $caption-mono:  mc-typography-level(13px, 16px, normal, normal, $font-family-mono),
+
+    $small-text:    mc-typography-level(11px, 16px, 0.2px)
 ) {
 
     $config: (
         display-1:      $display-1,
         display-2:      $display-2,
         display-3:      $display-3,
-        display-4:      $display-4,
-
-        body-1:         $body-1,
-        body-2:         $body-2,
-        caption:        $caption,
 
         headline:       $headline,
         title:          $title,
-        subheading-1:   $subheading-1,
-        subheading-2:   $subheading-2,
 
-        button:         $button
+        body:           $body,
+        body-caps:      $body-caps,
+        subheading:     $subheading,
+        body-mono:      $body-mono,
+
+        caption:        $caption,
+        caption-caps:   $caption-caps,
+        caption-mono:   $caption-mono,
+
+        small-text:     $small-text
     );
 
     @each $key, $level in $config {

diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
@@ -17,7 +17,6 @@
 
     .mc-list,
     .mc-list-selection {
-
         .mc-list-item {
             color: mc-color($foreground, text);
         }
@@ -64,23 +63,22 @@
 
     .mc-list,
     .mc-list-selection {
-
         .mc-list-item {
-            font-size: mc-font-size($config, subheading-2);
+            font-size: mc-font-size($config, subheading);
 
-            @include mc-line-base(mc-font-size($config, body-1));
+            @include mc-line-base(mc-font-size($config, body));
         }
 
         .mc-list-option {
-            font-size: mc-font-size($config, subheading-2);
+            font-size: mc-font-size($config, subheading);
 
-            @include mc-line-base(mc-font-size($config, body-1));
+            @include mc-line-base(mc-font-size($config, body));
         }
 
         .mc-subheader {
-            font-family: mc-font-family($config, body-2);
-            font-size: mc-font-size($config, body-2);
-            font-weight: mc-font-weight($config, body-2);
+            font-family: mc-font-family($config, subheading);
+            font-size: mc-font-size($config, subheading);
+            font-weight: mc-font-weight($config, subheading);
         }
     }
 }