From: Joe Workman <joe@workmanmail.com>
Date: Tue, 22 Mar 2022 17:13:21 +0000 (-0700)
Subject: Add text size classes
X-Git-Tag: v2.4.0^2~15
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=ae996d9f70213b0830e9406e4daee30bdb647b87;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Add text size classes

closes #743
---

diff --git a/docs/pages/typography.md b/docs/pages/typography.md
index e49be32b..2213a291 100644
--- a/docs/pages/typography.md
+++ b/docs/pages/typography.md
@@ -54,6 +54,26 @@ By inserting a `<small>` element into a header Foundation will scale the header
 
 ---
 
+## Text Sizes
+
+ You can change the size of text in paragraphs with `.text-` classes. These classes will apply to the large breakpoint as well as the small.
+
+ ```inky_example
+ <container>
+   <row>
+     <columns>
+       <p class="text-xs">Extra small</p>
+       <p class="text-sm">Small</p>
+       <p class="text-lg">Large</p>
+       <p class="text-xl">Extra large</p>
+       <p class="text-xxl">Extra extra large</p>
+     </columns>
+   </row>
+ </container>
+ ```
+
+ ---
+
 ## Links
 
 Links are very standard, and the color is preset to the Foundation primary color. [Learn more about Foundation's global colors](global.html).
diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
index 1b023b62..f0dfac41 100755
--- a/scss/components/_typography.scss
+++ b/scss/components/_typography.scss
@@ -82,6 +82,10 @@ $small-font-size: 80% !default;
 /// @type Color
 $small-font-color: $medium-gray !default;
 
+/// Default scaling coefficient for text sizes.
+/// @type Number
+$font-scale: 1.2 !default;
+
 /// Font size of lead paragraphs.
 /// @type Number
 $lead-font-size: $global-font-size * 1.25 !default;
@@ -292,6 +296,26 @@ p {
   }
 }
 
+.text-xs {
+  font-size: $global-font-size / ($font-scale * $font-scale);
+}
+
+.text-sm {
+  font-size: $global-font-size / $font-scale;
+}
+
+.text-lg {
+  font-size: $global-font-size * $font-scale;
+}
+
+.text-xl {
+  font-size: $global-font-size * ($font-scale * $font-scale);
+}
+
+.text-xxl {
+  font-size: $global-font-size * ($font-scale * $font-scale * $font-scale);
+}
+
 small,
 .small {
   font-size: $small-font-size;