chore(typography): refactor typography system and update style values…

…, classes, and usages across the library

src/dev/pages/avatar/avatar.ejs

@@ -1,27 +1,27 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Image URL</h3>
+    <h3 class="forge-typography--subtitle4">w/Image URL</h3>
     <div>
       <forge-avatar image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
     </div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Text</h3>
+    <h3 class="forge-typography--subtitle4">w/Text</h3>
     <div>
       <forge-avatar text="Tyler Forge"></forge-avatar>
     </div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Custom Radius (10px)</h3>
+    <h3 class="forge-typography--subtitle4">w/Custom Radius (10px)</h3>
     <div>
       <forge-avatar text="Tyler Forge" style="--forge-avatar-radius: 10px;"></forge-avatar>
     </div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Icon</h3>
+    <h3 class="forge-typography--subtitle4">w/Icon</h3>
     <div>
       <forge-avatar style="--forge-avatar-theme-background: black;">
         <forge-icon name="face" external></forge-icon>
@@ -30,14 +30,14 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Custom Slotted Content and CSS Variable</h3>
+    <h3 class="forge-typography--subtitle4">w/Custom Slotted Content and CSS Variable</h3>
     <div>
       <forge-avatar style="--forge-avatar-theme-background: #ff0000; --forge-avatar-size: 24px; --forge-avatar-font-size: 16px;">A</forge-avatar>
     </div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Invalid url</h3>
+    <h3 class="forge-typography--subtitle4">w/Invalid url</h3>
     <div>
       <forge-avatar image-url="https://httpstat.us/500" text="Invalid Url"></forge-avatar>
     </div>

src/dev/pages/badge/badge.ejs

@@ -31,7 +31,7 @@
 
   <div class="flex">
     <div class="vert">
-      <h3 class="forge-typography--subtitle1-secondary">Theme</h3>
+      <h3 class="forge-typography--subtitle4">Theme</h3>
       <forge-badge>Default</forge-badge>
       <forge-badge theme="danger">Danger</forge-badge>
       <forge-badge theme="warning">Warning</forge-badge>
@@ -40,7 +40,7 @@
       <forge-badge theme="info-secondary">Info (secondary)</forge-badge>
     </div>
     <div class="vert">
-      <h3 class="forge-typography--subtitle1-secondary">Strong theme</h3>
+      <h3 class="forge-typography--subtitle4">Strong theme</h3>
       <forge-badge strong>Default</forge-badge>
       <forge-badge theme="danger" strong>Danger</forge-badge>
       <forge-badge theme="warning" strong>Warning</forge-badge>

src/dev/pages/button-area/button-area.ejs

@@ -3,7 +3,7 @@
     <button slot="button" aria-labelledby="button-area-heading"></button>
     <div class="flex-wrapper">
       <div>
-        <div class="forge-typography--headline5" id="button-area-heading">Heading</div>
+        <div class="forge-typography--heading4" id="button-area-heading">Heading</div>
         <div>Content</div>
       </div>
       <forge-icon-button data-forge-ignore>
@@ -25,7 +25,7 @@
       <button slot="button" id="expansion-panel-button" aria-labelledby="expansion-panel-heading" aria-controls="expansion-panel-content" aria-expanded="false"></button>
       <div class="flex-wrapper">
         <div>
-          <div class="forge-typography--headline5" id="expansion-panel-heading">Expansion panel</div>
+          <div class="forge-typography--heading4" id="expansion-panel-heading">Expansion panel</div>
           <div>Subheading</div>
         </div>
         <forge-icon-button data-forge-ignore>

src/dev/pages/button-toggle/button-toggle.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1-secondary">Static</h3>
+<h3 class="forge-typography--subtitle4">Static</h3>
 <forge-button-toggle-group id="button-toggle-group">
   <forge-button-toggle value="email" aria-label="By email">
     <forge-icon name="email" slot="leading"></forge-icon>
@@ -11,7 +11,7 @@
   </forge-button-toggle>
 </forge-button-toggle-group>
 
-<h3 class="forge-typography--subtitle1-secondary">Dynamic</h3>
+<h3 class="forge-typography--subtitle4">Dynamic</h3>
 <forge-button-toggle-group id="button-toggle-group-dynamic"></forge-button-toggle-group>
 
 <script type="module" src="button-toggle.ts"></script>

src/dev/pages/card/card.ejs

@@ -1,6 +1,6 @@
 <forge-card class="demo-card">
   <forge-toolbar no-border>
-    <h3 class="forge-typography--headline5" slot="start">
+    <h3 class="forge-typography--heading4" slot="start">
       This is the card title
     </h3>
     <forge-icon-button slot="end">
@@ -10,7 +10,7 @@
     </forge-icon-button>
   </forge-toolbar>
 
-  <p class="card-body forge-typography--body2">
+  <p class="card-body forge-typography--body1">
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias
     exercitationem doloremque dolorem ullam, nesciunt quia velit
     necessitatibus numquam quasi voluptates impedit earum dolores

src/dev/pages/checkbox/checkbox.ejs

@@ -1,33 +1,33 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1">Default</h3>
+    <h3 class="forge-typography--subtitle4">Default</h3>
     <forge-checkbox>
       <input type="checkbox" id="default-checkbox" checked>
-      <label for="default-checkbox">Checkbox label</label>
+      <label for="default-checkbox" class="forge-typography--label">Checkbox label</label>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Dense</h3>
+    <h3 class="forge-typography--subtitle4">Dense</h3>
     <forge-checkbox dense>
       <input type="checkbox" id="dense-checkbox" checked>
-      <label for="dense-checkbox">Dense checkbox</label>
+      <label for="dense-checkbox" class="forge-typography--label">Dense checkbox</label>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Indeterminate</h3>
+    <h3 class="forge-typography--subtitle4">Indeterminate</h3>
     <forge-checkbox >
       <input type="checkbox" id="indeterminate-checkbox" checked>
-      <label for="indeterminate-checkbox">Indeterminate checkbox</label>
+      <label for="indeterminate-checkbox" class="forge-typography--label">Indeterminate checkbox</label>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Disabled</h3>
+    <h3 class="forge-typography--subtitle4">Disabled</h3>
     <forge-checkbox>
       <input type="checkbox" id="disabled-checkbox" checked disabled>
-      <label for="disabled-checkbox">Disabled checkbox</label>
+      <label for="disabled-checkbox" class="forge-typography--label">Disabled checkbox</label>
     </forge-checkbox>
   </div>
 </div>

src/dev/pages/chips/chips.ejs

@@ -1,6 +1,6 @@
 <div class="vert">
   <div id="chips-basic">
-    <h3>Basic chips</h3>
+    <h3 class="forge-typography--subtitle4">Basic chips</h3>
     <forge-chip-set style="width: 600px; display: flex; flex: auto; flex-direction: row; flex-wrap: wrap;">
       <forge-chip>Small</forge-chip>
       <forge-chip>Medium</forge-chip>
@@ -9,7 +9,7 @@
   </div>
 
   <div id="chips-choice">
-    <h3>Choice chips</h3>
+    <h3 class="forge-typography--subtitle4">Choice chips</h3>
     <forge-chip-set type="choice">
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
@@ -18,7 +18,7 @@
   </div>
 
   <div id="chips-choice-vertical">
-    <h3>Choice chips (vertical)</h3>
+    <h3 class="forge-typography--subtitle4">Choice chips (vertical)</h3>
     <forge-chip-set type="choice" vertical>
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
@@ -27,8 +27,8 @@
   </div>
 
   <div id="chips-filter">
-    <h3>Filter chips</h3>
-    <h5>No leading icon</h5>
+    <h3 class="forge-typography--subtitle4">Filter chips</h3>
+    <h4 class="forge-typography--subtitle1">No leading icon</h4>
     <forge-chip-set type="filter">
       <forge-chip value="tops" selected>Tops</forge-chip>
       <forge-chip value="bottoms" selected>Bottoms</forge-chip>
@@ -38,7 +38,7 @@
   </div>
 
   <div id="chips-filter-leading">
-    <h5>With leading icon</h5>
+    <h3 class="forge-typography--subtitle4">With leading icon</h3>
     <forge-chip-set type="filter">
       <forge-chip selected>
         <forge-icon slot="leading" name="face"></forge-icon>
@@ -60,7 +60,7 @@
   </div>
 
   <div id="chips-action">
-    <h3>Action chips</h3>
+    <h3 class="forge-typography--subtitle4">Action chips</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
         <forge-icon slot="leading" name="event"></forge-icon>
@@ -82,7 +82,7 @@
   </div>
 
   <div id="chips-avatar">
-    <h3>With leading avatar</h3>
+    <h3 class="forge-typography--subtitle4">With leading avatar</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
         <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
@@ -104,7 +104,7 @@
   </div>
 
   <div id="chips-input">
-    <h3 class="flex">
+    <h3 class="flex forge-typography--subtitle4">
       Input chips
       <span>
         <forge-icon-button>
@@ -135,7 +135,7 @@
   </div>
 
   <div id="chips-input">
-    <h3>Invalid chips</h3>
+    <h3 class="forge-typography--subtitle4">Invalid chips</h3>
     <forge-chip-set type="input">
       <forge-chip invalid>
         <forge-icon slot="leading" name="place"></forge-icon>

src/dev/pages/dialog/dialog-template-basic.ejs

@@ -1,27 +1,27 @@
 <div class="dialog-container">
   <forge-scaffold>
     <forge-toolbar slot="header" class="header-toolbar" no-border forge-dialog-move-target>
-      <h1 slot="start" class="forge-typography--headline5">Dialog title</h1>
+      <h1 slot="start" class="forge-typography--heading4">Dialog title</h1>
       <forge-icon-button slot="end">
         <button type="button" id="close-button">
           <forge-icon name="close"></forge-icon>
         </button>
       </forge-icon-button>
     </forge-toolbar>
     <div slot="body" class="dialog-body">
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
       </p>
 
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
       </p>
 
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!

src/dev/pages/divider/divider.ejs

@@ -1,9 +1,9 @@
-<h3 class="forge-typography--subtitle2">Horizontal</h3>
+<h3 class="forge-typography--subtitle4">Horizontal</h3>
 <div>
   <forge-divider></forge-divider>
 </div>
 
-<h3 class="forge-typography--subtitle2">Vertical</h3>
+<h3 class="forge-typography--subtitle4">Vertical</h3>
 <div style="margin-left: 50px; height: 200px;">
   <forge-divider vertical></forge-divider>
 </div>

src/dev/pages/drawer/drawer-dismissible-right.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Dismissible (right)</h3>
+<h3 class="forge-typography--subtitle4">Dismissible (right)</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-dismissible-right-app-bar" title-text="Dismissible Drawer - Right" slot="header">

src/dev/pages/drawer/drawer-dismissible.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Dismissible</h3>
+<h3 class="forge-typography--subtitle4">Dismissible</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-dismissible-app-bar" title-text="Dismissible Drawer" slot="header">

src/dev/pages/drawer/drawer-mini-hover-right.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini Hover (right)</h3>
+<h3 class="forge-typography--subtitle4">Mini Hover (right)</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-hover-app-bar" title-text="Mini Hover Drawer" slot="header">

src/dev/pages/drawer/drawer-mini-hover.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini Hover</h3>
+<h3 class="forge-typography--subtitle4">Mini Hover</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-hover-app-bar" title-text="Mini Hover Drawer" slot="header">

src/dev/pages/drawer/drawer-mini.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini</h3>
+<h3 class="forge-typography--subtitle4">Mini</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-app-bar" title-text="Mini Drawer" slot="header">

src/dev/pages/drawer/drawer-modal.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Modal</h3>
+<h3 class="forge-typography--subtitle4">Modal</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-modal-app-bar" title-text="Modal Drawer" slot="header">

src/dev/pages/drawer/drawer-permanent.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Permanent</h3>
+<h3 class="forge-typography--subtitle4">Permanent</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar title-text="Permanent Drawer" menu="false" slot="header">

src/dev/pages/expansion-panel/expansion-panel.ejs

@@ -1,17 +1,17 @@
-<h3 class="forge-typography--subtitle1">Basic (unstyled)</h3>
+<h3 class="forge-typography--subtitle4">Basic (unstyled)</h3>
 <forge-expansion-panel id="expansion-panel-basic">
   <div slot="header">Click me</div>
   <div>Expandable content</div>
 </forge-expansion-panel>
 
-<h3 class="forge-typography--subtitle1">Card</h3>
+<h3 class="forge-typography--subtitle4">Card</h3>
 <forge-card class="expandable-card">
   <forge-expansion-panel id="expansion-panel-card">
     <div slot="header" role="button" class="flex expansion-panel-header">
-      <div class="forge-typography--body1">Click me too</div>
+      <div>Click me too</div>
       <forge-open-icon></forge-open-icon>
     </div>
-    <div class="forge-typography--body1">
+    <div>
       Expandable card content
     </div>
   </forge-expansion-panel>

src/dev/pages/file-picker/file-picker.ejs

@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Default</h3>
+<h3 class="forge-typography--subtitle4">Default</h3>
 
 <forge-file-picker id="file-picker-default" style="--forge-file-picker-width: 320px; width: 320px;">
   <span slot="primary">Drag files here or</span>
@@ -10,7 +10,7 @@
 </forge-file-picker>
 <ul id="file-picker-list"></ul>
 
-<h3 class="forge-typography--subtitle1">Compact</h3>
+<h3 class="forge-typography--subtitle4">Compact</h3>
 
 <forge-file-picker id="file-picker-compact" compact>
   <forge-button type="outlined">
@@ -19,7 +19,7 @@
 </forge-file-picker>
 <ul id="file-picker-list-compact"></ul>
 
-<h3 class="forge-typography--subtitle1">Borderless</h3>
+<h3 class="forge-typography--subtitle4">Borderless</h3>
 
 <forge-card style="width: 400px; --forge-card-padding: 0;">
   <div style="height: 400px;">

src/dev/pages/focus-indicator/focus-indicator.ejs

@@ -45,7 +45,7 @@
   <!-- Typical card example -->
   <div tabindex="0" role="button" class="example-target">
     <forge-card role="presentation" style="border-radius: 4px;">
-      <p class="forge-typography--body" style="margin: 0;">
+      <p style="margin: 0;">
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, nihil et sequi similique ad,
         voluptas quod quisquam iure deleniti voluptatibus pariatur laborum maiores iste omnis ut sapiente!
         Repellendus, autem delectus.
@@ -58,7 +58,7 @@
   <!-- Inward example -->
   <div>
     <div class="example-target inward-example" tabindex="0" role="button">
-      <span class="forge-typography--body">Inward example</span>
+      <span>Inward example</span>
       <forge-focus-indicator allow-focus inward></forge-focus-indicator>
       <forge-state-layer></forge-state-layer>
     </div>