[#251] typography management (#256)

- Replaced the multiple variables specifying font-sizes with a single map.
- Added mixins & functions to use that map.
- Removed the uneccessary duplication of font-family when the specified webfont is the same as the base font.
- Fixes a bug whereby the base font-size was incorrectly output for larger screensizes.
- Update reference images at large viewport sizes
- Added namespace to generated font-sizes.
- Base line-height now set by an overridable variable
- Fix regression on master — background colour of styleguide fullscreen sections should be white

scss/bitstyles/base/_typography.scss

@@ -1,8 +1,7 @@
 /* stylelint-disable selector-no-type */
 html {
   font-family: $bitstyles-font-family-body;
-  font-size: px-to-em($bitstyles-font-size-base-small);
-  line-height: 1.5;
+  line-height: $bitstyles-line-height-base;
   color: palette('text');
   background: palette('background');
 
@@ -34,59 +33,7 @@ h6 {
   @include generic-heading;
 }
 
-h1 {
-  @include font-size($bitstyles-font-size-h1-small);
-}
-
-h2 {
-  @include font-size($bitstyles-font-size-h2-small);
-}
-
-h3 {
-  @include font-size($bitstyles-font-size-h3-small);
-}
-
-h4 {
-  @include font-size($bitstyles-font-size-h4-small);
-}
-
-h5 {
-  @include font-size($bitstyles-font-size-h5-small);
-}
-
-h6 {
-  @include font-size($bitstyles-font-size-h6-small);
-}
-
-@include media-query($bitstyles-typography-breakpoint) {
-  html {
-    font-size: px-to-em($bitstyles-font-size-base, $bitstyles-font-size-base);
-  }
-
-  h1 {
-    @include font-size($bitstyles-font-size-h1, $bitstyles-font-size-base);
-  }
-
-  h2 {
-    @include font-size($bitstyles-font-size-h2, $bitstyles-font-size-base);
-  }
-
-  h3 {
-    @include font-size($bitstyles-font-size-h3, $bitstyles-font-size-base);
-  }
-
-  h4 {
-    @include font-size($bitstyles-font-size-h4, $bitstyles-font-size-base);
-  }
-
-  h5 {
-    @include font-size($bitstyles-font-size-h5, $bitstyles-font-size-base);
-  }
-
-  h6 {
-    @include font-size($bitstyles-font-size-h6, $bitstyles-font-size-base);
-  }
-}
+@include generate-font-sizes('', (html, h1, h2, h3, h4, h5, h6));
 
 // Paragraphs
 //

scss/bitstyles/objects/_typography.scss

@@ -33,60 +33,4 @@
   @include generic-heading;
 }
 
-.#{$bitstyles-namespace}o-h0 {
-  @include font-size($bitstyles-font-size-h0-small);
-}
-
-.#{$bitstyles-namespace}o-h1 {
-  @include font-size($bitstyles-font-size-h1-small);
-}
-
-.#{$bitstyles-namespace}o-h2 {
-  @include font-size($bitstyles-font-size-h2-small);
-}
-
-.#{$bitstyles-namespace}o-h3 {
-  @include font-size($bitstyles-font-size-h3-small);
-}
-
-.#{$bitstyles-namespace}o-h4 {
-  @include font-size($bitstyles-font-size-h4-small);
-}
-
-.#{$bitstyles-namespace}o-h5 {
-  @include font-size($bitstyles-font-size-h5-small);
-}
-
-.#{$bitstyles-namespace}o-h6 {
-  @include font-size($bitstyles-font-size-h6-small);
-}
-
-@include media-query($bitstyles-typography-breakpoint) {
-  .#{$bitstyles-namespace}o-h0 {
-    @include font-size($bitstyles-font-size-h0, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h1 {
-    @include font-size($bitstyles-font-size-h1, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h2 {
-    @include font-size($bitstyles-font-size-h2, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h3 {
-    @include font-size($bitstyles-font-size-h3, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h4 {
-    @include font-size($bitstyles-font-size-h4, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h5 {
-    @include font-size($bitstyles-font-size-h5, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h6 {
-    @include font-size($bitstyles-font-size-h6, $bitstyles-font-size-base);
-  }
-}
+@include generate-font-sizes('.o-', (h0, h1, h2, h3, h4, h5, h6));

scss/bitstyles/settings/_global.typography.scss

@@ -7,22 +7,30 @@ $bitstyles-font-weight-light: 300 !default;
 $bitstyles-font-weight-normal: 400 !default;
 $bitstyles-font-weight-bold: 700 !default;
 
-$bitstyles-typography-breakpoint: medium !default;
-
 $bitstyles-font-size-base-small: 16px !default;
-$bitstyles-font-size-h0-small: 32px !default;
-$bitstyles-font-size-h1-small: 24px !default;
-$bitstyles-font-size-h2-small: 20px !default;
-$bitstyles-font-size-h3-small: 18px !default;
-$bitstyles-font-size-h4-small: $bitstyles-font-size-base-small !default;
-$bitstyles-font-size-h5-small: $bitstyles-font-size-base-small !default;
-$bitstyles-font-size-h6-small: $bitstyles-font-size-base-small !default;
-
 $bitstyles-font-size-base: 18px !default;
-$bitstyles-font-size-h0: 86px !default;
-$bitstyles-font-size-h1: 40px !default;
-$bitstyles-font-size-h2: 28px !default;
-$bitstyles-font-size-h3: 20px !default;
-$bitstyles-font-size-h4: $bitstyles-font-size-base !default;
-$bitstyles-font-size-h5: $bitstyles-font-size-base !default;
-$bitstyles-font-size-h6: $bitstyles-font-size-base !default;
+
+$bitstyles-line-height-base: 1.5 !default;
+
+$bitstyles-font-sizes: (
+  'base': (
+    'html': $bitstyles-font-size-base-small,
+    'h0': 32px,
+    'h1': 24px,
+    'h2': 20px,
+    'h3': 18px,
+    'h4': $bitstyles-font-size-base-small,
+    'h5': $bitstyles-font-size-base-small,
+    'h6': $bitstyles-font-size-base-small
+  ),
+  'medium': (
+    'html': $bitstyles-font-size-base,
+    'h0': 86px,
+    'h1': 40px,
+    'h2': 28px,
+    'h3': 20px,
+    'h4': $bitstyles-font-size-base,
+    'h5': $bitstyles-font-size-base,
+    'h6': $bitstyles-font-size-base
+  )
+) !default;

scss/bitstyles/tools/_typography.scss

@@ -14,8 +14,10 @@
   font-weight: $bitstyles-font-weight-bold;
   text-rendering: optimizeLegibility;
 
-  .fonts-loaded & {
-    font-family: $bitstyles-font-family-header-loaded;
+  @if $bitstyles-font-family-header-loaded != $bitstyles-font-family-header {
+    .fonts-loaded & {
+      font-family: $bitstyles-font-family-header-loaded;
+    }
   }
 }
 
@@ -25,9 +27,91 @@
 //
 // Styleguide 1.15.2
 
-@mixin font-size($pixel-size, $browser-context: $bitstyles-font-size-base-small) {
+@mixin set-font-size($pixel-size, $browser-context: $bitstyles-font-size-base-small) {
   /* stylelint-disable declaration-block-no-duplicate-properties */
   font-size: $pixel-size;
   font-size: px-to-rem($pixel-size, $browser-context);
   /* stylelint-enable declaration-block-no-duplicate-properties */
 }
+
+// Font-size generator
+//
+// Set font-sizes in the map `$bitstyles-font-sizes` e.g.
+// ```scss
+// $bitstyles-font-sizes: (
+//   'base': (
+//     'html': $bitstyles-font-size-base-small,
+//     'h0': 32px,
+//     'h1': 24px,
+//     'h2': 20px,
+//     'h3': 18px,
+//     'h4': $bitstyles-font-size-base-small,
+//     'h5': $bitstyles-font-size-base-small,
+//     'h6': $bitstyles-font-size-base-small
+//   ),
+//   'medium-and-up': (
+//     'html': $bitstyles-font-size-base,
+//     'h0': 86px,
+//     'h1': 40px,
+//     'h2': 28px,
+//     'h3': 20px,
+//     'h4': $bitstyles-font-size-base,
+//     'h5': $bitstyles-font-size-base,
+//     'h6': $bitstyles-font-size-base
+//   )
+// );
+// ```
+//
+// `base` is a reserved word, and results in font-sizes being output without an enclosing media query.
+//
+// @param $subset Provide a list of element names for which to output font-sizes.
+//
+// @param $prefix Provide a string that will be prepended to the element name. Can include `.` to output classnames instead of elements.
+//
+// Styleguide 1.15.3
+
+@mixin generate-font-sizes($prefix: '', $subset: ()) {
+  @each $media-query in $bitstyles-font-sizes {
+    $media-query-name: nth($media-query, 1);
+    $font-sizes: nth($media-query, 2);
+
+    // Don’t wrap base classes in a media-query
+    @if $media-query-name == 'base' {
+      @include output-font-sizes($font-sizes, $prefix, $subset);
+    }
+
+    @else {
+      @include media-query($media-query-name) {
+        @include output-font-sizes($font-sizes, $prefix, $subset);
+      }
+    }
+  }
+}
+
+@mixin output-font-sizes($font-sizes, $prefix, $subset) {
+  $base-size: $bitstyles-font-size-base-small;
+
+  @if map-has-key($font-sizes, 'html') {
+    $base-size: map-get($font-sizes, 'html');
+  }
+
+  @each $element in ($font-sizes) {
+    $element-name: nth($element, 1);
+    $font-size: nth($element, 2);
+
+    @if (length($subset) == 0) or (index($subset, $element-name)) {
+      #{$bitstyles-namespace}#{$prefix}#{$element-name} {
+        /* stylelint-disable max-nesting-depth */
+        @if $element-name == 'html' {
+          // Base font-size must be relative to browser default, not itself!
+          @include set-font-size($font-size);
+        }
+
+        @else {
+          @include set-font-size($font-size, $base-size);
+        }
+        /* stylelint-enable max-nesting-depth */
+      }
+    }
+  }
+}

styleguide/assets/stylesheets/styleguide-theme.css

@@ -91,3 +91,9 @@ li.sg,
   padding-top: 0.2em;
   padding-bottom: 0.2em;
 }
+
+.section-fullscreen .section-markup-wrapper {
+  width: 100vw;
+  min-height: 100vh;
+  background: #fff;
+}

test/backstop_data/backstop_helpers/clickButton.js

@@ -1,4 +1,7 @@
+const onLoad = require('./onLoad.js');
+
 module.exports = function(casper) {
+  onLoad(casper);
   const TRANSITION_DURATION = 1000;
 
   casper.click('.o-button');

test/backstop_data/backstop_helpers/clickLink.js

@@ -1,4 +1,7 @@
+const onLoad = require('./onLoad.js');
+
 module.exports = function(casper) {
+  onLoad(casper);
   const TRANSITION_DURATION = 1000;
 
   casper.click('.o-link');

test/backstop_data/backstop_helpers/onLoad.js

@@ -0,0 +1,5 @@
+module.exports = function(casper) {
+  casper.evaluate(function() {
+    document.body.style['-webkit-font-smoothing'] = 'none';
+  })
+}