feat(typography): update typography based on redline specs

Author: Cathy Siller

source/_less/vars.less

@@ -9,6 +9,7 @@
 @gray-500: #bdbdbd;
 @gray-600: #9e9e9e;
 @gray-700: #757575;
+@gray-750: #6b6b6b;
 @gray-800: #616161;
 @gray-900: #424242;
 @gray-950: #333333;

source/_templates/component.njk

@@ -2,15 +2,9 @@
 
 {% block layout %}
   <article>
-    <header class="page-header">
-      <span class="page-title">
-        {{ page.title }}
-        {% if page.subtitle %}
-          <br />
-          <small>{{ page.subtitle }}</small>
-        {% endif %}
-      </span>
-    </header>
+    <h1 class="hxPageTitle">
+      {{ page.title }}
+    </h1>
 
     <div class="hxRow">
       <div class="hxCol-xs-12 hxCol-md-3 hxOrder-md-2">

source/components/alert/index.html

@@ -8,7 +8,7 @@
 <!-- explanation goes here -->
 
 <section>
-  <h2 id="default">Default</h2>
+  <h2 class="hxSectionTitle" id="default">Default</h2>
 
   <div class="demo">
     <div role="status" class="hxAlerts" aria-live="polite">
@@ -47,7 +47,7 @@ <h2 id="default">Default</h2>
 </section>
 
 <section>
-  <h2 id="error">Error</h2>
+  <h2 class="hxSectionTitle" id="error">Error</h2>
 
   <div class="demo">
     <div role="status" class="hxAlerts" aria-live="polite">
@@ -86,7 +86,7 @@ <h2 id="error">Error</h2>
 </section>
 
 <section>
-  <h2 id="warning">Warning</h2>
+  <h2 class="hxSectionTitle" id="warning">Warning</h2>
 
   <div class="demo">
     <div role="status" class="hxAlerts" aria-live="polite">
@@ -125,7 +125,7 @@ <h2 id="warning">Warning</h2>
 </section>
 
 <section>
-  <h2 id="success">Success</h2>
+  <h2 class="hxSectionTitle" id="success">Success</h2>
 
   <div class="demo">
     <div role="status" class="hxAlerts" aria-live="polite">

source/components/blockquote/index.html

@@ -8,9 +8,7 @@
 <!-- explanation goes here -->
 
 <section>
-  <header>
-    <h2 id="default">Default Blockquotes</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="default">Default Blockquotes</h2>
 
   <!-- explanation goes here -->
 
@@ -23,9 +21,9 @@ <h2 id="default">Default Blockquotes</h2>
 </section>
 
 <section><!-- Blockquotes -->
-  <header>
-    <h2 id="right-aligned">Right-Aligned Blockquotes</h1>
-  </header>
+  <h2 class="hxSectionTitle" id="right-aligned">Right-Aligned Blockquotes</h2>
+
+  <!-- explanation goes here -->
 
   <div class="demo">
     <blockquote class="blockquote-reverse">

source/components/breadcrumb/breadcrumb.less

@@ -3,7 +3,7 @@
   align-content: center;
   align-items: center;
   display: flex;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   height: 1.75rem;
   margin-bottom: 1rem;

source/components/button/index.html

@@ -8,9 +8,7 @@
 <!-- explanation goes here -->
 
 <section>
-  <header>
-    <h2 id="size-variants">Size Variants</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="size-variants">Size Variants</h2>
 
   <!-- explanation goes here -->
 
@@ -24,9 +22,7 @@ <h2 id="size-variants">Size Variants</h2>
 </section>
 
 <section>
-  <header>
-    <h2 id="default">Default Buttons</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="default">Default Buttons</h2>
 
   <!-- explanation goes here -->
 
@@ -39,9 +35,7 @@ <h2 id="default">Default Buttons</h2>
 </section>
 
 <section>
-  <header>
-    <h2 id="default">Primary Buttons</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="default">Primary Buttons</h2>
 
   <!-- explanation goes here -->
 
@@ -54,10 +48,8 @@ <h2 id="default">Primary Buttons</h2>
 </section>
 
 <section>
-  <header>
-    <h2 id="default">Link Buttons</h2>
-  </header>
-
+  <h2 class="hxSectionTitle" id="link-buttons">Link Buttons</h2>
+  
   <!-- explanation goes here -->
 
   <div class="demo">

source/components/code/index.html

@@ -8,7 +8,10 @@
 <!-- explanation goes here -->
 
 <section><!-- Inline Code -->
-  <h2 id="inline">Inline</h2>
+  <h2 class="hxSectionTitle" id="inline">Inline</h2>
+
+  <!-- explanation goes here -->
+
   <div class="demo">
     <p>
       Add an event listener with the <code>EventTarget.addEventListener()</code> function.
@@ -22,7 +25,7 @@ <h2 id="inline">Inline</h2>
 </section>
 
 <section><!-- Keyboard -->
-  <h2 id="keyboard">Keyboard</h2>
+  <h2 class="hxSectionTitle" id="keyboard">Keyboard</h2>
   <div class="demo">
     <p>
       Press <kbd>Ctrl+Z</kbd> (<kbd>Command+Z</kbd> on Mac)
@@ -38,7 +41,10 @@ <h2 id="keyboard">Keyboard</h2>
 </section>
 
 <section>
-  <h2 id="code-block">Code Block</h2>
+  <h2 class="hxSectionTitle" id="code-block">Code Block</h2>
+
+  <!-- explanation goes here -->
+
   <div class="demo">
     <pre><code>[Insert Code Here]</code></pre>
   </div>
@@ -48,7 +54,7 @@ <h2 id="code-block">Code Block</h2>
 </section>
 
 <section><!-- Syntax Highlighting -->
-  <h2 id="syntax-highlighting">Syntax Highlighting</h2>
+  <h2 class="hxSectionTitle" id="syntax-highlighting">Syntax Highlighting</h2>
   <p>
     HelixUI provides a built-in theme for use with the
     <a href="https://highlightjs.org/">highlight.js</a> library.

source/components/grid/index.html

@@ -5,13 +5,13 @@
 ---
 {% extends 'component.njk' %}
 {% block content %}
-<h2>12-column Grid</h2>
+<h2 class="hxSectionTitle">12-column Grid</h2>
 <p>
   The grid system requires loading <code>helix-ui.css</code> into your application.
 </p>
 
 <section>
-  <h3 id="bootstrap">Bootstrap Compatibility</h3>
+  <h3 class="hxSubSectionTitle" id="bootstrap">Bootstrap Compatibility</h3>
   <ol>
     <li>
       <b>Avoid using Bootstrap containers</b>
@@ -35,7 +35,7 @@ <h3 id="bootstrap">Bootstrap Compatibility</h3>
 </section>
 
 <section>
-  <h3 id="automatic">Automatic Columns</h3>
+  <h3 class="hxSubSectionTitle" id="automatic">Automatic Columns</h3>
   <div class="alert alert-info">
     <p>
       <b>NOTE:</b> Automatic columns are overridden by <a href="#responsive">responsive classes</a>.
@@ -92,7 +92,7 @@ <h3 id="automatic">Automatic Columns</h3>
 </section>
 
 <section>
-  <h3 id="explicit">Explicit Columns</h3>
+  <h3 class="hxSubSectionTitle" id="explicit">Explicit Columns</h3>
   <div class="alert alert-info">
     <p>
       If the sum of a row's columns exceeds 12, the columns will wrap.
@@ -182,7 +182,7 @@ <h3 id="explicit">Explicit Columns</h3>
 </section>
 
 <section>
-  <h3 id="nesting">Nesting Elements</h3>
+  <h3 class="hxSubSectionTitle" id="nesting">Nesting Elements</h3>
   <div class="alert alert-info">
     <p>
       <b>Do not apply row and column classes to the same element.</b>
@@ -245,7 +245,7 @@ <h3 id="nesting">Nesting Elements</h3>
 </section>
 
 <section>
-  <h3 id="offsetting">Offsetting Columns</h3>
+  <h3 class="hxSubSectionTitle" id="offsetting">Offsetting Columns</h3>
   <p>
     You can use the <code>.hxOffset-N</code> class (1 &le; N &le; 11)
     to offset your column from the start of the row.
@@ -326,7 +326,7 @@ <h3 id="offsetting">Offsetting Columns</h3>
 </section>
 
 <section>
-  <h3 id="reordering">Reordering Columns</h3>
+  <h3 class="hxSubSectionTitle" id="reordering">Reordering Columns</h3>
   <p>
     Use the <code>.hxOrder-N</code> classes (1 &le; N &le; 12) to
     reorder your columns.
@@ -368,7 +368,7 @@ <h3 id="reordering">Reordering Columns</h3>
 </section>
 
 <section>
-  <h3 id="responsive">Responsive Layout</h3>
+  <h3 class="hxSubSectionTitle" id="responsive">Responsive Layout</h3>
   <div class="alert alert-info">
     <p>
       Responsive column classes override <a href="#automatic">automatic columns</a>.
@@ -464,7 +464,7 @@ <h3 id="responsive">Responsive Layout</h3>
 </section>
 
 <section>
-  <h3 id="wrapping">Column Wrapping</h3>
+  <h3 class="hxSubSectionTitle" id="wrapping">Column Wrapping</h3>
   <p>
     The following example should arrange the content into 3 columns on small
     screens, 4 columns on medium screens, and 6 columns on all other sizes.
@@ -536,7 +536,7 @@ <h3 id="wrapping">Column Wrapping</h3>
 </section>
 
 <section>
-  <h3 id="styling">Styling the Grid</h3>
+  <h3 class="hxSubSectionTitle" id="styling">Styling the Grid</h3>
   <div class="alert alert-info">
     <p>
       <b>Avoid styling rows and columns.</b>

source/components/icon/index.html

@@ -20,7 +20,7 @@
 </p>
 
 <section>
-  <h2 id="syntax">Example</h2>
+  <h2 class="hxSectionTitle" id="syntax">Example</h2>
   <p>
     Set the <code>type</code> attribute to any value <a href="#icon-types">listed below</a>.
   </p>
@@ -55,7 +55,7 @@ <h2 id="syntax">Example</h2>
 </section>
 
 <section>
-  <h2 id="styling">Styling</h2>
+  <h2 class="hxSectionTitle" id="styling">Styling</h2>
   <div class="alert alert-info">
     Icons inherit the <code>color</code> and <code>background-color</code>
     of their parent.
@@ -79,7 +79,7 @@ <h2 id="styling">Styling</h2>
 </section>
 
 <section>
-  <h2 id="icon-types">Icon Types</h2>
+  <h2 class="hxSectionTitle" id="icon-types">Icon Types</h2>
   <p>There are {{ data.icons.length }} icons available!</p>
   <div class="hxRow">
     {% for icon in data.icons %}

source/components/list/index.html

@@ -6,9 +6,7 @@
 {% extends 'component.njk' %}
 {% block content %}
 <section>
-  <header>
-    <h2 id="unordered">Unordered</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="unordered">Unordered</h2>
 
   <!-- explanation goes here -->
 
@@ -27,9 +25,7 @@ <h2 id="unordered">Unordered</h2>
 </section>
 
 <section>
-  <header>
-    <h2 id="ordered">Ordered Lists</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="ordered">Ordered Lists</h2>
 
   <!-- explanation goes here -->
 
@@ -48,9 +44,7 @@ <h2 id="ordered">Ordered Lists</h2>
 </section>
 
 <section>
-  <header>
-    <h2 id="vertical-description">Vertical Description</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="vertical-description">Vertical Description</h2>
 
   <!-- explanation goes here -->
 
@@ -69,9 +63,7 @@ <h2 id="vertical-description">Vertical Description</h2>
 </section>
 
 <section>
-  <header>
-    <h2 id="horizontal-description">Horizontal Description</h2>
-  </header>
+  <h2 class="hxSectionTitle" id="horizontal-description">Horizontal Description</h2>
 
   <!-- explanation goes here -->