feat(typography): adapts type to new designs

[Finishes #111748002]
pivotal-cf · Mar 2, 2016 · de570c0 · de570c0
1 parent 38f3e72
commit de570c0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 47 deletions.
diff --git 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
@@ -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
@@ -56,23 +56,23 @@ parent: type
 Set font sizes using headings and modifier classes.
 
 ```html_example_table
-<h1 class="title">h1.title 42px</h1>
+<h1 class="title">h1.title 48px</h1>
 
-<h1>h1 31px</h1>
+<h1>h1 42px</h1>
 
-<h2>h2 25px</h2>
+<h2>h2 36px</h2>
 
-<h3>h3 20px</h3>
+<h3>h3 26px</h3>
 
-<h4>h4 18px</h4>
+<h4>h4 20px</h4>
 
-<h5>h5 16px</h5>
+<h5>h5 18px</h5>
 
-<h6>h6 13px</h6>
+<h6>h6 14px</h6>
 
 <p>base font size 16px</p>
 
-<p class="type-sm">small text 14px</p>
+<p class="type-sm">small text 13px</p>
 
 <p class="type-xs">extra small text 12px</p>
 ```
@@ -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;