Hotfix: Move typescale from prototype to typography and enable default!

docs/pages/prototyping-utilities.md

@@ -274,37 +274,6 @@ You can use font styling to style your text. You can change the font styling by
 
 ---
 
-## Typescale
-
-Adjust font-size by overriding an element’s default size. This can be useful to size a `<p>` or `<h1>` through `<h6>` using Foundation's existing header sizes.
-
-<div class="callout primary">
-  <p><strong>Especially useful because:</strong> It's important to avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code>&lt;h2&gt;</code> in your code, the next heading used should be either <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
-</div>
-
-For headers:
-
-```html
-<h2 class="h1">Lorem Ipsum Dolor</h2>
-<h3 class="h2">Lorem Ipsum Dolor</h3>
-<h4 class="h3">Lorem Ipsum Dolor</h4>
-<h5 class="h4">Lorem Ipsum Dolor</h5>
-<h6 class="h5">Lorem Ipsum Dolor</h6>
-```
-
-For text:
-
-```html_example
-<p class="h1">Lorem Ipsum Dolor</p>
-<p class="h2">Lorem Ipsum Dolor</p>
-<p class="h3">Lorem Ipsum Dolor</p>
-<p class="h4">Lorem Ipsum Dolor</p>
-<p class="h5">Lorem Ipsum Dolor</p>
-<p class="h6">Lorem Ipsum Dolor</p>
-```
-
----
-
 ## List Styling
 
 <div class="primary callout">

docs/pages/typography-helpers.md

@@ -140,6 +140,37 @@ In Foundation, the `<ul>` is a bulleted list and `<ol>` is a numbered list by de
 
 ---
 
+## Typescale
+
+Adjust font-size by overriding an element’s default size. This can be useful to size a `<p>` or `<h1>` through `<h6>` using Foundation's existing header sizes.
+
+<div class="callout primary">
+  <p><strong>Especially useful because:</strong> It's important to avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code>&lt;h2&gt;</code> in your code, the next heading used should be either <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
+</div>
+
+For headers:
+
+```html
+<h2 class="h1">Lorem Ipsum Dolor</h2>
+<h3 class="h2">Lorem Ipsum Dolor</h3>
+<h4 class="h3">Lorem Ipsum Dolor</h4>
+<h5 class="h4">Lorem Ipsum Dolor</h5>
+<h6 class="h5">Lorem Ipsum Dolor</h6>
+```
+
+For text:
+
+```html_example
+<p class="h1">Lorem Ipsum Dolor</p>
+<p class="h2">Lorem Ipsum Dolor</p>
+<p class="h3">Lorem Ipsum Dolor</p>
+<p class="h4">Lorem Ipsum Dolor</p>
+<p class="h5">Lorem Ipsum Dolor</p>
+<p class="h6">Lorem Ipsum Dolor</p>
+```
+
+---
+
 ## Statistics
 
 If you're building a dashboard, you might need to display some important numbers *real big*. Just add the `.stat` class to any element to amp up the font size.

scss/prototype/_prototype.scss

@@ -15,9 +15,6 @@
 // Rotate Mixin
 @import 'rotate';
 
-// Typescale
-@import 'typescale';
-
 // Text utilities
 @import 'text-utilities';
 
@@ -70,7 +67,6 @@
 @import 'spacing';
 
 @mixin foundation-prototype-classes {
-  @include foundation-prototype-typescale;
   @include foundation-prototype-text-utilities;
   @include foundation-prototype-text-transformation;
   @include foundation-prototype-text-decoration;

scss/typography/_base.scss

@@ -306,12 +306,12 @@ $abbr-underline: 1px dotted $black !default;
   }
 
   // Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
     font-family: $header-font-family;
     font-style: $header-font-style;
     font-weight: $header-font-weight;
@@ -329,7 +329,7 @@ $abbr-underline: 1px dotted $black !default;
     @include breakpoint($size) {
       @each $header, $header-defs in $headers {
         $font-size-temp: 1rem;
-        #{$header} {
+        #{$header}, .#{$header} {
 
           @if map-has-key($header-defs, font-size) {
             $font-size-temp: rem-calc(map-get($header-defs, font-size));