From a55ced497d952cbdd9e21b680ce837b9e3d96e98 Mon Sep 17 00:00:00 2001 From: lkramarov Date: Tue, 22 May 2018 15:00:03 +0300 Subject: [PATCH] feat(typography): Typography (#144638) --- src/lib-dev/typography/styles.scss | 9 +-- src/lib-dev/typography/template.html | 46 ++++++++---- src/lib/button/_button-theme.scss | 17 ++--- .../styles/typography/_typography-utils.scss | 71 +++++++++++++------ .../core/styles/typography/_typography.scss | 41 ++++++----- src/lib/list/_list-theme.scss | 16 ++--- 6 files changed, 120 insertions(+), 80 deletions(-) diff --git a/src/lib-dev/typography/styles.scss b/src/lib-dev/typography/styles.scss index ace5e922a..3d48fddcc 100644 --- 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 index 000325efb..9c375377c 100644 --- a/src/lib-dev/typography/template.html +++ b/src/lib-dev/typography/template.html @@ -1,15 +1,33 @@ -
- Lorem ipsum dolor sit amet -

Labore reprehenderit corporis ullam distinctio ex.

- Display 4 - Display 3 - Display 2 - Display 1 - - Headline - Title - Subheading - - Body 2 - Body 1 +
+
Lorem ipsum dolor sit amet
+

Labore reprehenderit corporis ullam distinctio ex.

+
Display 3
+
Display 2
+
Display 1
+ +
+ +
Headline
+
Title
+
Subheading
+ +
+ +
Body
+ +
+ +
Subheading
+
BODY CAPS
+
Body mono
+ +
+ +
Caption
+
CAPTION CAPS
+
Caption mono
+ +
+ +
Small text
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index e152121b1..220fed4a8 100644 --- 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 index 54d615d3d..e36690760 100644 --- 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 index 03b97b87f..d448c8517 100644 --- 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 index e00aa0baa..e7b89d329 100644 --- 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); } } }