From 7ad9c0b52113af6e3029dd9d064bfc3c853d8d5c Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Tue, 15 Aug 2017 11:02:01 -0400
Subject: [PATCH] Added new font family utilities.

Removed "text-mono" utility.
Renamed "@system-font-stack" variable to "@font-family-system".
---
 docs/source/borders.md  | 22 +++++++++++-----------
 docs/source/spacing.md  | 32 ++++++++++++++++----------------
 docs/source/text.md     | 13 +++++++++----
 src/utilities/text.less | 14 ++++++++++----
 4 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/docs/source/borders.md b/docs/source/borders.md
index b7667f9f5..b7d179e97 100644
--- a/docs/source/borders.md
+++ b/docs/source/borders.md
@@ -20,23 +20,23 @@ Construct border size utilities using the `.border{-side?}{-width?}` syntax. For
 <div class="flex flex-top mt-8 text-sm leading-none">
     <div class="pr-12">
         <div class="mb-3 text-dark-soft text-uppercase">Class</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">border</code></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
     </div>
     <div class="pl-12 pr-12 border-l">
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Side</span> <span class="text-dark-softer text-xs">(optional)</span></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded bg-light-softer">&nbsp;</code> All</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">r</code> Right</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">b</code> Bottom</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer">&nbsp;</code> All</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
     </div>
     <div class="pl-12 border-l">
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Width</span> <span class="text-dark-softer text-xs">(optional)</span></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">0</code> 0px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded bg-light-softer">&nbsp;</code> 1px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 2px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 4px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">8</code> 8px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer">&nbsp;</code> 1px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 2px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 4px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 8px</div>
     </div>
 </div>
 
diff --git a/docs/source/spacing.md b/docs/source/spacing.md
index 0123ed021..cf72d1504 100644
--- a/docs/source/spacing.md
+++ b/docs/source/spacing.md
@@ -18,28 +18,28 @@ The syntax below is combined to create a system for padding and margins. For exa
 <div class="flex flex-top mt-8 text-sm">
     <div class="pr-12">
         <div class="mb-3 text-dark-soft text-uppercase">Class</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">p</code> Padding</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">m</code> Margin</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">pull</code> Negative Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
     </div>
     <div class="pl-12 pr-12 border-l">
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Position</span> <span class="text-dark-softer text-xs">(optional)</span></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">r</code> Right</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">b</code> Bottom</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">x</code> Horizontal</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">y</code> Vertical</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
     </div>
     <div class="pl-12 border-l">
         <div class="mb-3 text-dark-soft text-uppercase">Space</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">0</code> 0</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">1</code> 0.25rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 0.5rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">3</code> 0.75rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 1rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 1.5rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">8</code> 2rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
     </div>
 </div>
 
diff --git a/docs/source/text.md b/docs/source/text.md
index 35ca5d312..cc1572377 100644
--- a/docs/source/text.md
+++ b/docs/source/text.md
@@ -19,20 +19,25 @@ title: "Text"
 <h2 id="font-family">Font family</h2>
 
 ```html
-<div class="text-mono"></div>
+<div class="sans"></div>
+<div class="serif"></div>
+<div class="mono"></div>
 ```
 
 ```less
 div {
-  .text-mono;
+  .sans;
+  .serif;
+  .mono;
 }
 ```
 
 ```less
 // Customize the font stack
-@system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-@font-family-base: @system-font-stack;
+@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
 @font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+@font-family-base: @font-family-sans;
 ```
 
 <h2 id="font-sizes">Font sizes</h2>
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 8e2368cdc..9b124384b 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -1,7 +1,12 @@
 // Font family
-@system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-@font-family-base: @system-font-stack;
+@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
 @font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+@font-family-base: @font-family-sans;
+
+.sans { font-family: @font-family-sans; }
+.serif { font-family: @font-family-serif; }
+.mono { font-family: @font-family-mono; }
 
 // Default line height
 @line-height: 1.5;
@@ -108,7 +113,6 @@
 .text-smooth { -webkit-font-smoothing: antialiased; }
 .text-strike { text-decoration: line-through; }
 .text-shadow-solid { text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
-.text-mono { font-family: @font-family-mono; }
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -116,6 +120,9 @@
 }
 
 .responsive({
+  &text-sans { .sans; }
+  &text-serif { .serif; }
+  &text-mono { .mono; }
   &text-center { .text-center; }
   &text-left { .text-left; }
   &text-right { .text-right; }
@@ -135,6 +142,5 @@
   &text-smooth { .text-smooth; }
   &text-strike { .text-strike; }
   &text-shadow-solid { .text-shadow-solid; }
-  &text-mono { .text-mono; }
   &text-ellipsis { .text-ellipsis; }
 });