Add $family-secondary, $family-tertiary, and 6 font family helpers (#2178)

* Add secondary and tertiary font families to derived-variables.sass

* Add font family helpers to helpers.sass

* Add has-font-* to typography-helpers.html

* Correct number of font family helpers in typography-helpers.html

* Remove $family-tertiary, change has-font to is-family, and update docs.

diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index 1d5d9ffb7296f03ad7ee8e5131ce6a5365c68f56..e29985ed8b9426445c96c2aa980ed2dcb52164df 100644 (file)
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -396,7 +396,7 @@ breadcrumb:
   <tbody>
   <tr>
     <td><code>has-text-weight-light</code></td>
-    <td>Transforms  text weight to <strong>light</strong></td>
+    <td>Transforms text weight to <strong>light</strong></td>
   </tr>
   <tr>
     <td><code>has-text-weight-normal</code></td>
@@ -412,3 +412,48 @@ breadcrumb:
   </tr>
   </tbody>
 </table>
+
+{% include elements/anchor.html name="Font family" %}
+
+<div class="content">
+  <p>
+    You can change the font family with the use of one of <strong>5 font family
+    helpers</strong>:
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    <th>
+      Family
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><code>is-family-primary</code></td>
+    <td>Changes font family to <strong>$family-primary</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-secondary</code></td>
+    <td>Changes font family to <strong>$family-secondary</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-sans-serif</code></td>
+    <td>Changes font family to <strong>$family-sans-serif</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-monospace</code></td>
+    <td>Changes font family to <strong>$family-monospace</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-code</code></td>
+    <td>Changes font family to <strong>$family-code</strong></td>
+  </tr>
+  </tbody>
+</table>
+

diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass
index 10c9056eae4d2e6eb67b82ee6656138615fefe8e..17fdf15acc3a92827a80a6faaec228762064ef1a 100644 (file)
--- a/sass/base/helpers.sass
+++ b/sass/base/helpers.sass
@@ -120,6 +120,21 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
 .has-text-weight-bold
   font-weight: $weight-bold !important
 
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important
+
 // Visibility
 
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'

diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass
index aa912813a411611c7f49a1867d9a3c882e27a67c..c464814af156df06aa5186a7b998fe129713983d 100644 (file)
--- a/sass/utilities/derived-variables.sass
+++ b/sass/utilities/derived-variables.sass
@@ -67,6 +67,7 @@ $link-active-border: $grey-dark !default
 // Typography
 
 $family-primary: $family-sans-serif !default
+$family-secondary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default