From de570c0335962e8082a8754e5d500a40760d1a04 Mon Sep 17 00:00:00 2001 From: Nicole Sullivan Date: Tue, 1 Mar 2016 19:22:33 -0800 Subject: [PATCH] feat(typography): adapts type to new designs [Finishes #111748002] --- src/pivotal-ui/components/mixins.scss | 1 - src/pivotal-ui/components/pui-variables.scss | 22 +++++----- .../components/typography/typography.scss | 43 ++++--------------- 3 files changed, 19 insertions(+), 47 deletions(-) diff --git a/src/pivotal-ui/components/mixins.scss b/src/pivotal-ui/components/mixins.scss index e7074c886..88b1a855f 100644 --- a/src/pivotal-ui/components/mixins.scss +++ b/src/pivotal-ui/components/mixins.scss @@ -106,7 +106,6 @@ //pui margin-top: $whitespace-xl; margin-bottom: $whitespace-l; - font-weight: $font-weight-h1; @media all and (max-width: $screen-sm) { & { diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss index ba846bebb..87de8dc7b 100644 --- a/src/pivotal-ui/components/pui-variables.scss +++ b/src/pivotal-ui/components/pui-variables.scss @@ -287,7 +287,7 @@ $font-size-base: 16px !default; $font-size-extra-large: ceil($font-size-base * 1.5) !default; // ~21px $font-size-large: ceil($font-size-base * 1.25) !default; // ~18px $font-size-medium: ceil($font-size-base * 1.14) !default; // ~16px -$font-size-small: 14px; +$font-size-small: 13px; $font-size-extra-small: 12px; @@ -298,35 +298,35 @@ $font-weight-em-max: 900; $headings-font-family: null; -$headings-font-weight: 400 !default; +$headings-font-weight: 600 !default; $former-headings-line-height: 1.5; $headings-line-height: 1.286 !default; $headings-padding: 1em * ($former-headings-line-height - $headings-line-height) / 2; $headings-color: null; //TODO: create a mixin that will determine multiplers based on px-size -$font-size-h1: 31px; +$font-size-h1: 42px; $font-weight-h1: 400; -$font-size-h2: 25px; +$font-size-h2: 36px; $font-weight-h2: 400; -$font-size-h3: 20px; +$font-size-h3: 26px; $font-weight-h3: 400; -$font-size-h4: 18px; +$font-size-h4: 20px; $font-weight-h4: 400; -$font-size-h5: 16px; +$font-size-h5: 18px; $font-weight-h5: 400; -$font-size-h6: 13px; +$font-size-h6: 14px; $font-weight-h6: 400; -$line-height-base: 1.5; //1.428571429 !default; // 20/14 -$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px +$line-height-base: 1.35; +$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~22px -$font-size-title: 42px; +$font-size-title: 48px; // Whitespace // ------------------------- diff --git a/src/pivotal-ui/components/typography/typography.scss b/src/pivotal-ui/components/typography/typography.scss index e1e145194..3c988dd5f 100644 --- a/src/pivotal-ui/components/typography/typography.scss +++ b/src/pivotal-ui/components/typography/typography.scss @@ -56,23 +56,23 @@ parent: type Set font sizes using headings and modifier classes. ```html_example_table -

h1.title 42px

+

h1.title 48px

-

h1 31px

+

h1 42px

-

h2 25px

+

h2 36px

-

h3 20px

+

h3 26px

-

h4 18px

+

h4 20px

-
h5 16px
+
h5 18px
-
h6 13px
+
h6 14px

base font size 16px

-

small text 14px

+

small text 13px

extra small text 12px

``` @@ -141,33 +141,6 @@ h4, .h4, h5, .h5, h6, .h6 { } } -// We handle font-weight here, bootstrap handles font-size and color - -h1 { - //If you add new h1 styles, make sure to update the h1 mixin - font-weight: $font-weight-h1; -} - -h2 { - font-weight: $font-weight-h2; -} - -h3 { - font-weight: $font-weight-h3; -} - -h4 { - font-weight: $font-weight-h4; -} - -h5 { - font-weight: $font-weight-h5; -} - -h6 { - font-weight: $font-weight-h6; -} - .h1 { font-size: $font-size-h1 !important;