feat(type): type-scale refactor → font-size + line-height + letter-sp…

…acing for each breakpoints
Orange-OpenSource · Oct 18, 2019 · 872cb3d · 872cb3d
1 parent dc98e19
commit 872cb3d
Show file tree

Hide file tree

Showing 5 changed files with 286 additions and 87 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -54,6 +54,7 @@ body {
   line-height: $line-height-base;
   color: $body-color;
   text-align: left; // 3
+  letter-spacing: $letter-spacing-base; // Boosted mod
   background-color: $body-bg; // 2
 }
 

diff --git a/scss/_type.scss b/scss/_type.scss
@@ -7,58 +7,165 @@
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-bottom: $headings-margin-bottom;
+  @include font-size($font-size-base); // Boosted mod
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
   color: $headings-color;
+  letter-spacing: $letter-spacing-base; // Boosted mod
 }
 
-h1, .h1 { @include font-size($h1-font-size); }
-h2, .h2 { @include font-size($h2-font-size); }
-h3, .h3 { @include font-size($h3-font-size); }
-h4, .h4 { @include font-size($h4-font-size); }
-h5, .h5 { @include font-size($h5-font-size); }
-h6, .h6 { @include font-size($h6-font-size); }
-
-// Boosted mod
-// reduce the size of titles for mobile display
-@include media-breakpoint-down(sm) {
-  h1, .h1 { @include font-size($h1-font-size-mobile); }
-  h2, .h2 { @include font-size($h2-font-size-mobile); }
-  h3, .h3 { @include font-size($h3-font-size-mobile); }
-  h4, .h4 { @include font-size($h4-font-size-mobile); }
-  h5, .h5 { @include font-size($h5-font-size-mobile); }
-  h6, .h6 { @include font-size($h6-font-size-mobile); }
+// Boosted mod: headings and displays together
+// Add letter-spacing and line-height
+// Reduce heading font-sizes for mobile
+// Mobile first, obviously
+[class*="display-"] {
+  font-weight: $display-weight;
 }
-// end mod
 
-.lead {
-  @include font-size($lead-font-size);
-  font-weight: $lead-font-weight;
-}
-
-// Type display classes
 .display-1 {
-  @include font-size($display1-size);
-  font-weight: $display1-weight;
-  line-height: $display-line-height;
+  @include font-size($h2-font-size);
+  line-height: $h2-line-height;
+  letter-spacing: $h2-spacing;
 }
+
 .display-2 {
-  @include font-size($display2-size);
-  font-weight: $display2-weight;
-  line-height: $display-line-height;
+  @include font-size($h3-font-size);
+  line-height: $h3-line-height;
+  letter-spacing: $h3-spacing;
 }
+
+h1, .h1,
 .display-3 {
-  @include font-size($display3-size);
-  font-weight: $display3-weight;
-  line-height: $display-line-height;
+  @include font-size($h4-font-size);
+  line-height: $h4-line-height;
+  letter-spacing: $h4-spacing;
 }
+
+h2, .h2,
 .display-4 {
-  @include font-size($display4-size);
-  font-weight: $display4-weight;
-  line-height: $display-line-height;
+  @include font-size($h5-font-size);
+  line-height: $h5-line-height;
+  letter-spacing: $h5-spacing;
+}
+
+.lead {
+  @include font-size($h6-font-size);
+  font-weight: $lead-font-weight;
+  line-height: $h6-line-height;
+  letter-spacing: $h6-spacing;
 }
 
+@include media-breakpoint-up(sm) {
+  .display-1 {
+    @include font-size($display2-size);
+    line-height: $display-line-height;
+    letter-spacing: $display2-spacing;
+  }
+
+  .display-2 {
+    @include font-size($display3-size);
+    line-height: $display-line-height;
+    letter-spacing: $display3-spacing;
+  }
+
+  .display-3 {
+    @include font-size($display4-size);
+    line-height: $display-line-height;
+    letter-spacing: $display4-spacing;
+  }
+
+  h1, .h1 {
+    @include font-size($h2-font-size);
+    line-height: $h2-line-height;
+    letter-spacing: $h2-spacing;
+  }
+
+  h2, .h2,
+  .display-4 {
+    @include font-size($h3-font-size);
+    line-height: $h3-line-height;
+    letter-spacing: $h3-spacing;
+  }
+
+  h3, .h3 {
+    @include font-size($h4-font-size);
+    line-height: $h4-line-height;
+    letter-spacing: $h4-spacing;
+  }
+
+  h4, .h4,
+  .lead {
+    @include font-size($h5-font-size);
+    line-height: $h5-line-height;
+    letter-spacing: $h5-spacing;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .display-1 {
+    @include font-size($display1-size);
+    letter-spacing: $display1-spacing;
+  }
+
+  .display-2 {
+    @include font-size($display2-size);
+    letter-spacing: $display2-spacing;
+  }
+
+  .display-3 {
+    @include font-size($display3-size);
+    letter-spacing: $display3-spacing;
+  }
+
+  .display-4 {
+    @include font-size($display4-size);
+    letter-spacing: $display4-spacing;
+  }
+
+  h1, .h1 {
+    @include font-size($h1-font-size);
+    line-height: $h1-line-height;
+    letter-spacing: $h1-spacing;
+  }
+
+  h2, .h2 {
+    @include font-size($h2-font-size);
+    line-height: $h2-line-height;
+    letter-spacing: $h2-spacing;
+  }
+
+  h3, .h3 {
+    @include font-size($h3-font-size);
+    line-height: $h3-line-height;
+    letter-spacing: $h3-spacing;
+  }
+
+  h4, .h4 {
+    @include font-size($h4-font-size);
+    line-height: $h4-line-height;
+    letter-spacing: $h4-spacing;
+  }
+
+  h5, .h5 {
+    @include font-size($h5-font-size);
+    line-height: $h5-line-height;
+    letter-spacing: $h5-spacing;
+  }
+
+  h6, .h6 {
+    @include font-size($h6-font-size);
+    line-height: $h6-line-height;
+    letter-spacing: $h6-spacing;
+  }
+
+  .lead {
+    @include font-size($lead-font-size);
+    line-height: $lead-line-height;
+    letter-spacing: $lead-letter-spacing;
+  }
+}
+// end mod
 
 //
 // Horizontal rules

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -313,10 +313,12 @@ $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, Liberatio
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
+// Boosted mod
+// Type scale & vertical rhythm completely revamped to match Orange Web Guidelines
 $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:                $font-size-base * 1.125 !default; // 18px
-$font-size-xlg:               $font-size-base * 1.25 !default; // 20px
-$font-size-sm:                $font-size-base * .875 !default; // 14px
+$font-size-xlg:               $font-size-base * 1.25 !default;  // 20px
+$font-size-sm:                $font-size-base * .875 !default;  // 14px
 
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
@@ -326,48 +328,63 @@ $font-weight-bolder:          bolder !default;
 
 $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.25 !default; // 20px
-
-$h1-font-size:                $font-size-base * 2.125 !default; // 34px
-$h2-font-size:                $font-size-base * 1.875 !default; // 30px
-$h3-font-size:                $font-size-base * 1.5 !default; // 24px
-$h4-font-size:                $font-size-base * 1.25 !default; // 20px
-$h5-font-size:                $font-size-base * 1.125 !default; // 18px
-$h6-font-size:                $font-size-base !default; // 16px
-
-$h1-font-size-mobile:         $font-size-base * 1.25 !default; // 20px
-$h2-font-size-mobile:         $font-size-base * 1.125 !default; // 18px
-$h3-font-size-mobile:         $font-size-base !default; // 16px
-$h4-font-size-mobile:         $font-size-base * .875 !default; // 14px
-$h5-font-size-mobile:         $font-size-base * .875 !default; // 14px
-$h6-font-size-mobile:         $font-size-base * .875 !default; // 14px
+$letter-spacing-base:         map-get($spacers, 2) / -100 !default; // -0.1px
+
+$h1-font-size:                $font-size-base * 2.125 !default;   // 34px
+$h2-font-size:                $font-size-base * 1.875 !default;   // 30px
+$h3-font-size:                $font-size-base * 1.5 !default;     // 24px
+$h4-font-size:                $font-size-xlg !default;            // 20px
+$h5-font-size:                $font-size-lg !default;             // 18px
+$h6-font-size:                $font-size-base !default;           // 16px
+$h1-spacing:                  $letter-spacing-base * 10 !default; // -1px
+$h2-spacing:                  $letter-spacing-base * 8 !default;  // -0.8px
+$h3-spacing:                  $letter-spacing-base * 6 !default;  // -0.6px
+$h4-spacing:                  $letter-spacing-base * 4 !default;  // -0.4px
+$h5-spacing:                  $letter-spacing-base * 2 !default;  // -0.2px
+$h6-spacing:                  $letter-spacing-base !default;
+$h1-line-height:              1 !default;
+$h2-line-height:              1.067 !default; // calc(32 / 30)
+$h3-line-height:              1.083 !default; // calc(26 / 24)
+$h4-line-height:              1.1 !default;   // calc(22 / 20)
+$h5-line-height:              1.111 !default; // calc(20 / 18)
+$h6-line-height:              1.125 !default; // calc(18 / 16)
 
 $headings-margin-bottom:      $spacer !default;
 $headings-font-family:        null !default;
 $headings-font-weight:        700 !default;
-$headings-line-height:        1.1 !default;
+$headings-line-height:        $h6-line-height !default;
 $headings-color:              null !default;
 
-$display1-size:               3.75rem !default; // 60px
-$display2-size:               3.125rem !default; // 50px
-$display3-size:               2.5rem !default; // 40px
-$display4-size:               2.125rem !default; // 34px
+$display1-size:               $font-size-xlg * 3 !default;   // 60px
+$display2-size:               $font-size-xlg * 2.5 !default; // 50px
+$display3-size:               $font-size-xlg * 2 !default;   // 40px
+$display4-size:               $h1-font-size !default;        // 34px
+
+$display1-spacing:            $letter-spacing-base * 24 !default; // -2.4px
+$display2-spacing:            $letter-spacing-base * 16 !default; // -1.6px
+$display3-spacing:            $letter-spacing-base * 12 !default; // -1.2px
+$display4-spacing:            $h1-spacing !default;               // -1px
+// end mod
 
-$display1-weight:             700 !default;
-$display2-weight:             700 !default;
-$display3-weight:             700 !default;
-$display4-weight:             700 !default;
-$display-line-height:         $headings-line-height !default;
+$display-weight:              700 !default;
+//$display1-weight:             700 !default; // Boosted mod
+//$display2-weight:             700 !default; // Boosted mod
+//$display3-weight:             700 !default; // Boosted mod
+//$display4-weight:             700 !default; // Boosted mod
+$display-line-height:         1 !default;
 
-$lead-font-size:              $font-size-base * 1.25 !default;
-$lead-font-weight:            300 !default;
+$lead-font-size:              $font-size-xlg !default; // Boosted mod
+$lead-font-weight:            400 !default; // Boosted mod
+$lead-line-height:            1.5 !default; // calc(30 / 20)
+$lead-letter-spacing:         -.015625rem !default; // Boosted mod
 
-$small-font-size:             .875rem !default; // 14px
+$small-font-size:             $font-size-sm !default; // Boosted mod → 14px
 
 $text-muted:                  $gray-700 !default;
 
 $blockquote-small-color:      $gray-700 !default;
 $blockquote-small-font-size:  $small-font-size !default;
-$blockquote-font-size:        $font-size-base * 1.25 !default;
+$blockquote-font-size:        $font-size-xlg !default; // Boosted mod
 
 $hr-border-color:             $gray-300 !default;
 $hr-border-width:             $border-width / 2 !default;

diff --git a/site/docs/4.3/assets/scss/_boosted-docs.scss b/site/docs/4.3/assets/scss/_boosted-docs.scss
@@ -153,14 +153,10 @@
 #placement,
 #collapsible-content,
 #sizing,
-#text-alignment {
+#text-alignment,
+#responsive-font-sizes {
   display: flex;
 
-  &::after {
-    @include sr-only();
-    content: "warning, not brand compliant";
-  }
-
   &::before {
     display: inline-block;
     height: auto;