#1390: Addedt two additional type sizes

SAP · Jun 4, 2019 · f4a16ee · f4a16ee
1 parent 4e4355d
commit f4a16ee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/docs/pages/foundation/type.html b/docs/pages/foundation/type.html
@@ -40,6 +40,8 @@ <h2 class="docs-header-h2">Sizes</h2>
     <td class="fd-has-type-4 docs-type__scale--preview">a</td>
     <td class="fd-has-type-5 docs-type__scale--preview">a</td>
     <td class="fd-has-type-6 docs-type__scale--preview">a</td>
+    <td class="fd-has-type-7 docs-type__scale--preview">a</td>
+    <td class="fd-has-type-8 docs-type__scale--preview">a</td>
   </tr>
   <tr>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>-1</strong><br>12px</td>
@@ -50,6 +52,8 @@ <h2 class="docs-header-h2">Sizes</h2>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>4</strong><br>24px</td>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>5</strong><br>36px</td>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>6</strong><br>48px</td>
+    <td class="fd-has-type-1 docs-type__scale--info"><strong>7</strong><br>72px</td>
+    <td class="fd-has-type-1 docs-type__scale--info"><strong>8</strong><br>96px</td>
 
     </td>
   </tr>
@@ -133,6 +137,24 @@ <h4 class="docs-header-h4">6 — 48px | Line height 52px</h4>
 
 <br>
 
+<h4 class="docs-header-h4">7 — 72px | Line height 84px</h4>
+<p><a href="/guides/how-to-use-scss.html#type-mixin" target="_blank">SCSS Mixin</a>: <code>@include fd-type("7")</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#type-sizes" target="_blank">Helper class</a>: <code>.fd-has-type-7</code></p>
+{% capture type-preview %}
+<p class="fd-has-type-7">Grumpy wizards make toxic brew for the evil Queen and Jack</p>
+{% endcapture %}
+{% include display-component.html component=type-preview %}
+
+<br>
+
+<h4 class="docs-header-h4">8 — 96px | Line height 102px</h4>
+<p><a href="/guides/how-to-use-scss.html#type-mixin" target="_blank">SCSS Mixin</a>: <code>@include fd-type("8")</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#type-sizes" target="_blank">Helper class</a>: <code>.fd-has-type-8</code></p>
+{% capture type-preview %}
+<p class="fd-has-type-8">Grumpy wizards make toxic brew for the evil Queen and Jack</p>
+{% endcapture %}
+{% include display-component.html component=type-preview %}
+
+<br>
+
 <h2 class="docs-header-h2">Weights</h2>
 <p>There are three weights defined <code>light</code>, <code>normal</code>, <code>Bold</code>.
 </p>

diff --git a/scss/_settings.scss b/scss/_settings.scss
@@ -59,6 +59,8 @@ $fd-type: map-merge((
   "4": #{24/$fd-type--base}rem 32/24 16px, //23/32 16
   "5": #{36/$fd-type--base}rem 40/36 20px, //36/40 20
   "6": #{48/$fd-type--base}rem 52/48 24px, //48/52 24
+  "7": #{72/$fd-type--base}rem 84/72 32px, //84/72 32
+  "8": #{96/$fd-type--base}rem 105/96 36px, //105/96 36
 ), $fd-type);
 
 $fd-font-size: #{$fd-type--base}px !default;