From fb34961fdfd52e512996fc99a6dcc5cedd244328 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Fri, 24 May 2024 18:47:15 -0400
Subject: [PATCH] progress documenting and refactoring typography

---
 docs/assets/styles/docs.css                   |  2 +-
 docs/assets/styles/search.css                 |  6 +-
 docs/docs/experimental/themer.md              | 76 +++++++++----------
 docs/docs/theming/color.md                    |  2 +-
 docs/docs/theming/typography.md               | 50 +++++++++++-
 src/components/badge/badge.styles.ts          |  2 +-
 .../breadcrumb-item/breadcrumb-item.styles.ts |  2 +-
 src/components/dialog/dialog.styles.ts        |  2 +-
 src/components/drawer/drawer.styles.ts        |  2 +-
 .../menu-label/menu-label.styles.ts           |  2 +-
 src/components/option/option.styles.ts        |  2 +-
 src/components/range/range.styles.ts          |  2 +-
 src/components/select/select.styles.ts        |  2 +-
 src/components/tooltip/tooltip.styles.ts      |  2 +-
 src/themes/active.css                         | 16 ++--
 src/themes/applied.css                        | 13 ++--
 src/themes/brutalist.css                      | 22 +++---
 src/themes/classic.css                        | 16 ++--
 src/themes/default.css                        | 52 +++++++------
 src/themes/fa.css                             | 22 +++---
 src/themes/glassy.css                         | 16 ++--
 src/themes/mellow.css                         | 16 ++--
 src/themes/migration.css                      | 18 ++---
 src/themes/playful.css                        | 22 +++---
 src/themes/premium.css                        | 14 ++--
 25 files changed, 215 insertions(+), 166 deletions(-)

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 7ae11e50d..2246ddbe6 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -61,7 +61,7 @@ wa-page > main {
 #sidebar,
 #outline {
   .current {
-    font-weight: var(--wa-font-weight-heavy);
+    font-weight: var(--wa-font-weight-bold);
     text-decoration-style: solid;
   }
 }
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index 8a1c3d6f8..f913d2fa9 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -138,7 +138,7 @@ header {
   }
 
   h3 {
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
     margin: 0;
   }
 
@@ -184,7 +184,7 @@ header {
 
   .site-search-result-title {
     font-size: 1.25rem;
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
     color: var(--wa-color-brand-on-normal);
   }
 
@@ -237,7 +237,7 @@ header {
     height: 1.35rem;
     justify-content: center;
     align-items: center;
-    font-weight: var(--wa-font-weight-heavy);
+    font-weight: var(--wa-font-weight-bold);
 
     &:last-of-type {
       margin-inline-end: 0.25rem;
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 9582503d5..2f879247e 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -73,45 +73,45 @@ hasOutline: false
 
     --wa-font-weight-light: 300;
     --wa-font-weight-normal: 400;
-    --wa-font-weight-medium: 600;
-    --wa-font-weight-heavy: 800;
+    --wa-font-weight-semibold: 600;
+    --wa-font-weight-bold: 800;
 
-    --wa-font-weight-heading: var(--wa-font-weight-heavy);
+    --wa-font-weight-heading: var(--wa-font-weight-bold);
     --wa-font-weight-body: var(--wa-font-weight-normal);
-    --wa-font-weight-action: var(--wa-font-weight-medium);
+    --wa-font-weight-action: var(--wa-font-weight-semibold);
 
     --wa-font-size-root: 16px;
-    --wa-font-size-2xs: var(--wa-font-size-root) * 0.6875;
-    --wa-font-size-xs: var(--wa-font-size-root) * 0.75;
-    --wa-font-size-s: var(--wa-font-size-root) * 0.875;
-    --wa-font-size-m: var(--wa-font-size-root) * 1;
-    --wa-font-size-l: var(--wa-font-size-root) * 1.25;
-    --wa-font-size-xl: var(--wa-font-size-root) * 1.625;
-    --wa-font-size-2xl: var(--wa-font-size-root) * 2;
-    --wa-font-size-3xl: var(--wa-font-size-root) * 2.5625;
-    --wa-font-size-4xl: var(--wa-font-size-root) * 3.25;
+    --wa-font-size-2xs: 1rem * 0.6875;
+    --wa-font-size-xs: 1rem * 0.75;
+    --wa-font-size-s: 1rem * 0.875;
+    --wa-font-size-m: 1rem * 1;
+    --wa-font-size-l: 1rem * 1.25;
+    --wa-font-size-xl: 1rem * 1.625;
+    --wa-font-size-2xl: 1rem * 2;
+    --wa-font-size-3xl: 1rem * 2.5625;
+    --wa-font-size-4xl: 1rem * 3.25;
 
-    --wa-line-height-compact: 1.25;
-    --wa-line-height-regular: 1.6;
+    --wa-line-height-condensed: 1.25;
+    --wa-line-height-normal: 1.6;
     --wa-line-height-expanded: 2;
 
     --wa-space-base: 1;
-    --wa-space-3xs: calc(var(--wa-space-base) * var(--wa-font-size-root) * 0.125);
-    --wa-space-2xs: calc(var(--wa-space-base) * var(--wa-font-size-root) * 0.25);
-    --wa-space-xs: calc(var(--wa-space-base) * var(--wa-font-size-root) * 0.5);
-    --wa-space-s: calc(var(--wa-space-base) * var(--wa-font-size-root) * 0.75);
-    --wa-space-m: calc(var(--wa-space-base) * var(--wa-font-size-root) * 1);
-    --wa-space-l: calc(var(--wa-space-base) * var(--wa-font-size-root) * 1.25);
-    --wa-space-xl: calc(var(--wa-space-base) * var(--wa-font-size-root) * 1.5);
-    --wa-space-2xl: calc(var(--wa-space-base) * var(--wa-font-size-root) * 2);
-    --wa-space-3xl: calc(var(--wa-space-base) * var(--wa-font-size-root) * 3);
+    --wa-space-3xs: calc(var(--wa-space-base) * 1rem * 0.125);
+    --wa-space-2xs: calc(var(--wa-space-base) * 1rem * 0.25);
+    --wa-space-xs: calc(var(--wa-space-base) * 1rem * 0.5);
+    --wa-space-s: calc(var(--wa-space-base) * 1rem * 0.75);
+    --wa-space-m: calc(var(--wa-space-base) * 1rem * 1);
+    --wa-space-l: calc(var(--wa-space-base) * 1rem * 1.25);
+    --wa-space-xl: calc(var(--wa-space-base) * 1rem * 1.5);
+    --wa-space-2xl: calc(var(--wa-space-base) * 1rem * 2);
+    --wa-space-3xl: calc(var(--wa-space-base) * 1rem * 3);
 
     --wa-border-style: solid;
 
     --wa-border-width-base: 0.0625;
-    --wa-border-width-s: calc(var(--wa-border-width-base) * var(--wa-font-size-root) * 1);
-    --wa-border-width-m: calc(var(--wa-border-width-base) * var(--wa-font-size-root) * 2);
-    --wa-border-width-l: calc(var(--wa-border-width-base) * var(--wa-font-size-root) * 3);
+    --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem * 1);
+    --wa-border-width-m: calc(var(--wa-border-width-base) * 1rem * 2);
+    --wa-border-width-l: calc(var(--wa-border-width-base) * 1rem * 3);
 
     --wa-form-controls-border-style: var(--wa-border-style);
     --wa-form-controls-border-width: var(--wa-border-width-s);
@@ -120,10 +120,10 @@ hasOutline: false
     --wa-panel-border-width: var(--wa-border-width-s);
 
     --wa-corners-base: 0.375;
-    --wa-corners-xs: calc(var(--wa-corners-base) * var(--wa-font-size-root) * 0.75);
-    --wa-corners-s: calc(var(--wa-corners-base) * var(--wa-font-size-root) * 1);
-    --wa-corners-m: calc(var(--wa-corners-base) * var(--wa-font-size-root) * 2);
-    --wa-corners-l: calc(var(--wa-corners-base) * var(--wa-font-size-root) * 3);
+    --wa-corners-xs: calc(var(--wa-corners-base) * 1rem * 0.75);
+    --wa-corners-s: calc(var(--wa-corners-base) * 1rem * 1);
+    --wa-corners-m: calc(var(--wa-corners-base) * 1rem * 2);
+    --wa-corners-l: calc(var(--wa-corners-base) * 1rem * 3);
 
     --wa-shadow-blur-base: 0.125;
     --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
@@ -162,11 +162,11 @@ hasOutline: false
 
     --wa-form-controls-label-color: var(--wa-color-text-normal);
     --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-    --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+    --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
     --wa-form-controls-value-color: var(--wa-color-text-normal);
     --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-    --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+    --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
     --wa-form-controls-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);
 
@@ -187,9 +187,9 @@ hasOutline: false
     --wa-panel-corners: var(--wa-corners-m);
 
     font-family: var(--wa-font-family-code);
-    font-size: var(--wa-font-size-root);
+    font-size: 1rem;
     font-weight: var(--wa-font-weight-normal);
-    line-height: var(--wa-line-height-regular);
+    line-height: var(--wa-line-height-normal);
 
     & wa-button,
     & wa-input,
@@ -230,7 +230,7 @@ hasOutline: false
       position: relative;
 
       &::part(summary) {
-        font-weight: var(--wa-font-weight-medium);
+        font-weight: var(--wa-font-weight-semibold);
       }
       &::part(summary-icon) {
         rotate: 0deg;
@@ -404,7 +404,7 @@ hasOutline: false
 
   #file-uploader-description {
     display: block;
-    line-height: var(--wa-line-height-compact);
+    line-height: var(--wa-line-height-condensed);
     color: var(--wa-color-text-quiet);
     margin-top: var(--wa-space-2xs);
   }
@@ -541,7 +541,7 @@ hasOutline: false
             <wa-visually-hidden>Browse icons</wa-visually-hidden>
           </wa-button>
         </wa-tooltip>
-        <small slot="help-text" style="display: inline-block; line-height: var(--wa-line-height-compact);">It's dangerous to go alone. Take these!</small>
+        <small slot="help-text" style="display: inline-block; line-height: var(--wa-line-height-condensed);">It's dangerous to go alone. Take these!</small>
       </wa-radio-group>
     </div>
   </wa-details>
diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md
index 4609bd21e..18bdb6763 100644
--- a/docs/docs/theming/color.md
+++ b/docs/docs/theming/color.md
@@ -6,7 +6,7 @@ layout: page.njk
 
 <style>
   .color-name {
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
     margin-block-end: var(--wa-space-2xs);
   }
   .color-group {
diff --git a/docs/docs/theming/typography.md b/docs/docs/theming/typography.md
index d8510369e..7ba3b6893 100644
--- a/docs/docs/theming/typography.md
+++ b/docs/docs/theming/typography.md
@@ -4,4 +4,52 @@ description: Get consistent font styles and vertical rhythm with Web Awesome's t
 layout: page.njk
 ---
 
-coming soon!
\ No newline at end of file
+## Font Family
+
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-font-family-body`   | <div style="font-family: var(--wa-font-family-body)">AaBb</div> |
+| `--wa-font-family-heading`   | <div style="font-family: var(--wa-font-family-heading)">AaBb</div> |
+| `--wa-font-family-code`   | <div style="font-family: var(--wa-font-family-code)">AaBb</div> |
+| `--wa-font-family-longform`   | <div style="font-family: var(--wa-font-family-longform)">AaBb</div> |
+
+## Font Size
+
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-font-size-2xs`   | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
+| `--wa-font-size-xs`   | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
+| `--wa-font-size-s`   | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
+| `--wa-font-size-m`   | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
+| `--wa-font-size-l`   | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
+| `--wa-font-size-xl`   | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
+| `--wa-font-size-2xl`   | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
+| `--wa-font-size-3xl`   | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
+| `--wa-font-size-4xl`   | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
+
+## Font Weight
+
+### Common
+
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-font-weight-light`   | <div style="font-weight: var(--wa-font-weight-light)">AaBb</div> |
+| `--wa-font-weight-normal`   | <div style="font-weight: var(--wa-font-weight-normal)">AaBb</div> |
+| `--wa-font-weight-semibold`   | <div style="font-weight: var(--wa-font-weight-semibold)">AaBb</div> |
+| `--wa-font-weight-bold`   | <div style="font-weight: var(--wa-font-weight-bold)">AaBb</div> |
+
+### Assigned
+
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-font-weight-body`   | <div style="font-weight: var(--wa-font-weight-body)">AaBb</div> |
+| `--wa-font-weight-heading`   | <div style="font-weight: var(--wa-font-weight-heading)">AaBb</div> |
+| `--wa-font-weight-action`   | <div style="font-weight: var(--wa-font-weight-action)">AaBb</div> |
+
+## Line Height
+
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-line-height-condensed`   | <div style="line-height: var(--wa-line-height-condensed); border-block: 1px solid var(--wa-color-brand-border-loud)">AaBb</div> |
+| `--wa-line-height-normal`   | <div style="line-height: var(--wa-line-height-normal); border-block: 1px solid var(--wa-color-brand-border-loud)">AaBb</div> |
+| `--wa-line-height-expanded`   | <div style="line-height: var(--wa-line-height-expanded); border-block: 1px solid var(--wa-color-brand-border-loud)">AaBb</div> |
\ No newline at end of file
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index a6724ad92..5b0d2d215 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -40,7 +40,7 @@ export default css`
     align-items: center;
     justify-content: center;
     font-size: max(12px, 0.75em);
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
     line-height: 1;
     background: var(--background);
     border-color: var(--border-color);
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index 2dab54a6c..26cb7b7aa 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -11,7 +11,7 @@ export default css`
     font: inherit;
     font-weight: var(--wa-font-weight-action);
     color: var(--wa-color-neutral-on-quiet);
-    line-height: var(--wa-line-height-regular);
+    line-height: var(--wa-line-height-normal);
     white-space: nowrap;
   }
 
diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts
index b5eb16444..8c62bb36d 100644
--- a/src/components/dialog/dialog.styles.ts
+++ b/src/components/dialog/dialog.styles.ts
@@ -59,7 +59,7 @@ export default css`
     flex: 1 1 auto;
     font: inherit;
     font-size: var(--wa-font-size-l);
-    line-height: var(--wa-line-height-compact);
+    line-height: var(--wa-line-height-condensed);
     padding: var(--header-spacing);
     margin: 0;
   }
diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts
index b06269962..bd3f7c4a5 100644
--- a/src/components/drawer/drawer.styles.ts
+++ b/src/components/drawer/drawer.styles.ts
@@ -82,7 +82,7 @@ export default css`
     flex: 1 1 auto;
     font: inherit;
     font-size: var(--wa-font-size-l);
-    line-height: var(--wa-line-height-compact);
+    line-height: var(--wa-line-height-condensed);
     padding: var(--header-spacing);
     margin: 0;
   }
diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts
index b7d59300d..d36b3cceb 100644
--- a/src/components/menu-label/menu-label.styles.ts
+++ b/src/components/menu-label/menu-label.styles.ts
@@ -9,7 +9,7 @@ export default css`
   .menu-label {
     display: inline-block;
     font: inherit;
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
     color: var(--wa-color-neutral-on-quiet);
     padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl));
     user-select: none;
diff --git a/src/components/option/option.styles.ts b/src/components/option/option.styles.ts
index c805b643e..26e4070f4 100644
--- a/src/components/option/option.styles.ts
+++ b/src/components/option/option.styles.ts
@@ -43,7 +43,7 @@ export default css`
   .option__label {
     flex: 1 1 auto;
     display: inline-block;
-    line-height: var(--wa-line-height-compact);
+    line-height: var(--wa-line-height-condensed);
   }
 
   .option .option__check {
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index bdb1f16e6..28155321d 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -152,7 +152,7 @@ export default css`
     border-radius: var(--wa-corners-s);
     background-color: var(--wa-color-neutral-fill-loud);
     font: inherit;
-    line-height: var(--wa-line-height-regular);
+    line-height: var(--wa-line-height-normal);
     color: var(--wa-color-neutral-on-loud);
     opacity: 0;
     padding: var(--wa-space-2xs) var(--wa-space-xs);
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index 114054d00..680df7ab7 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -307,7 +307,7 @@ export default css`
 
   .select__listbox ::slotted(small) {
     font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
     color: var(--wa-color-text-quiet);
     padding-block: var(--wa-space-xs);
     padding-inline: var(--wa-space-xl);
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index c809efed6..380fe5a18 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -41,7 +41,7 @@ export default css`
     border-radius: var(--wa-corners-s);
     background-color: var(--wa-color-neutral-fill-loud);
     font: inherit;
-    line-height: var(--wa-line-height-regular);
+    line-height: var(--wa-line-height-normal);
     text-align: start;
     white-space: normal;
     color: var(--wa-color-neutral-on-loud);
diff --git a/src/themes/active.css b/src/themes/active.css
index 34accea7d..a461b131e 100644
--- a/src/themes/active.css
+++ b/src/themes/active.css
@@ -203,13 +203,13 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 550;
-  --wa-font-weight-heavy: 650;
+  --wa-font-weight-semibold: 550;
+  --wa-font-weight-bold: 650;
   --wa-font-weight-black: 900;
 
-  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-heading: var(--wa-font-weight-bold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-medium);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
   /* The default typescale is based on the Major Second scale (x1.125).
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -224,8 +224,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -328,11 +328,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
diff --git a/src/themes/applied.css b/src/themes/applied.css
index 0943adbf7..9aed6c1ac 100644
--- a/src/themes/applied.css
+++ b/src/themes/applied.css
@@ -5,7 +5,6 @@
 html {
   box-sizing: border-box;
   background-color: var(--wa-color-surface-default);
-  font-size: var(--wa-font-size-root);
   padding: 0;
   margin: 0;
 }
@@ -21,7 +20,7 @@ body {
   font-family: var(--wa-font-family-body);
   font-size: var(--wa-font-size-m);
   font-weight: var(--wa-font-weight-body);
-  line-height: var(--wa-line-height-regular);
+  line-height: var(--wa-line-height-normal);
   text-size-adjust: none;
   color: var(--wa-color-text-normal);
   padding: 0;
@@ -76,7 +75,7 @@ h5,
 h6 {
   font-family: var(--wa-font-family-heading);
   font-weight: var(--wa-font-weight-heading);
-  line-height: var(--wa-line-height-compact);
+  line-height: var(--wa-line-height-condensed);
   text-wrap: balance;
 }
 
@@ -117,7 +116,7 @@ i {
 
 strong,
 b {
-  font-weight: var(--wa-font-weight-heavy);
+  font-weight: var(--wa-font-weight-bold);
 }
 
 s {
@@ -343,7 +342,7 @@ tbody tr {
 }
 
 tbody tr:hover {
-  background-color: color-mix(in oklab, var(--wa-color-brand-fill-normal), transparent 50%);
+  background-color: color-mix(in oklab, var(--wa-color-brand-fill-quiet), transparent 50%);
   border-top-color: var(--wa-color-brand-border-quiet);
 }
 
@@ -353,7 +352,7 @@ tbody tr:hover + tr {
 
 th {
   font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-heavy);
+  font-weight: var(--wa-font-weight-bold);
 }
 
 td,
@@ -364,7 +363,7 @@ th {
 
 /* Definition lists */
 dt {
-  font-weight: var(--wa-font-weight-medium);
+  font-weight: var(--wa-font-weight-semibold);
 }
 
 dd {
diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css
index 942eabe2c..b56a149c9 100644
--- a/src/themes/brutalist.css
+++ b/src/themes/brutalist.css
@@ -204,12 +204,12 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 700;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 700;
 
-  --wa-font-weight-heading: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-medium);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
   /* The default typescale is based on the Major Second scale (x1.125).
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -224,8 +224,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -328,12 +328,12 @@
   --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
-  --wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-font-weight: var(--wa-font-weight-semibold);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
@@ -638,13 +638,13 @@
     --background: transparent;
     --background-checked: var(--wa-form-controls-activated-color);
     --border-color: var(--wa-form-controls-activated-color);
-    --height: calc(1.2em * var(--wa-line-height-compact) - 0.125rem);
+    --height: calc(1.2em * var(--wa-line-height-condensed) - 0.125rem);
   }
 
   wa-switch::part(control),
   wa-switch::part(thumb) {
     border-radius: var(--wa-corners-base);
-    --wa-line-height-compact: 5px;
+    --wa-line-height-condensed: 5px;
   }
 
   wa-switch::part(thumb) {
diff --git a/src/themes/classic.css b/src/themes/classic.css
index 28444a57d..daf105ec4 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -207,12 +207,12 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
 
-  --wa-font-weight-heading: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-medium);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
   /* The default typescale is based on the Major Second scale (x1.125).
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -227,8 +227,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -332,11 +332,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
diff --git a/src/themes/default.css b/src/themes/default.css
index e18d7e495..0117be800 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -229,35 +229,37 @@
   /**
    * Typography
    */
-  --wa-font-family-heading: system-ui;
-  --wa-font-family-body: system-ui;
-  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  --wa-font-family-longform: 'Lora', serif;
+  --wa-font-family-body: ui-sans-serif, sans-serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: ui-monospace, monospace;
+  --wa-font-family-longform: ui-serif, serif;
+
+  /* The default type scale is roughly based on the Major Second scale (x1.125), 
+   * with each value rounded to the nearest whole pixel based on a 16px root font size.
+   * For larger font sizes, every other step on the scale is skipped in order to maximize variation. 
+   * A multiplier is provided to increase or decrease all font sizes at once. */
+  --wa-font-size-multiplier: 1;
+  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
+  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
+  --wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
+  --wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
+  --wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
+  --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
+  --wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
+  --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
+  --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
 
-  --wa-font-weight-heading: var(--wa-font-weight-heavy);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-bold);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.125;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -361,11 +363,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
diff --git a/src/themes/fa.css b/src/themes/fa.css
index d2150857c..e33538287 100644
--- a/src/themes/fa.css
+++ b/src/themes/fa.css
@@ -208,12 +208,12 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 700;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 700;
 
-  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-heading: var(--wa-font-weight-bold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-heavy);
+  --wa-font-weight-action: var(--wa-font-weight-bold);
 
   /* The default typescale is based on the Major Second scale (x1.125).
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -228,8 +228,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.75;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.75;
   --wa-line-height-expanded: 2;
 
   /**
@@ -332,12 +332,12 @@
   --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
-  --wa-form-controls-label-font-weight: var(--wa-font-weight-heavy);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-font-weight: var(--wa-font-weight-bold);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
@@ -517,7 +517,7 @@
     text-transform: uppercase;
 
     &::part(base) {
-      font-weight: var(--wa-font-weight-heavy);
+      font-weight: var(--wa-font-weight-bold);
     }
   }
 
@@ -604,7 +604,7 @@
   }
 
   wa-tag {
-    font-weight: var(--wa-font-weight-heavy);
+    font-weight: var(--wa-font-weight-bold);
   }
 
   wa-input,
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index b582acbac..a744e75a4 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -203,12 +203,12 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
 
-  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-heading: var(--wa-font-weight-bold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-medium);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
   /* The default typescale is based on the Major Second scale (x1.125).
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -223,8 +223,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -327,11 +327,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index ab5054878..1c5f59072 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -203,12 +203,12 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
 
-  --wa-font-weight-heading: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-medium);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
   /* The default typescale is based on the Major Second scale (x1.125). 
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -223,8 +223,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -327,11 +327,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
diff --git a/src/themes/migration.css b/src/themes/migration.css
index 90904ba22..b418ce9a9 100644
--- a/src/themes/migration.css
+++ b/src/themes/migration.css
@@ -204,13 +204,13 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
   --wa-font-weight-black: 700;
 
   --wa-font-weight-heading: var(--wa-font-weight-black);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-heavy);
+  --wa-font-weight-action: var(--wa-font-weight-bold);
 
   /* The default typescale is based on the Major Second scale (x1.125). 
    * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -225,8 +225,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -329,12 +329,12 @@
   --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-quiet);
-  --wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-font-weight: var(--wa-font-weight-semibold);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
@@ -525,7 +525,7 @@
   a,
   wa-badge,
   wa-tag {
-    font-weight: var(--wa-font-weight-medium);
+    font-weight: var(--wa-font-weight-semibold);
   }
 
   wa-badge {
diff --git a/src/themes/playful.css b/src/themes/playful.css
index bc4a9650e..36af66220 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -217,12 +217,12 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 600;
-  --wa-font-weight-heavy: 700;
+  --wa-font-weight-semibold: 600;
+  --wa-font-weight-bold: 700;
   --wa-font-weight-black: 800;
 
-  --wa-font-weight-heading: var(--wa-font-weight-medium);
-  --wa-font-weight-body: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
+  --wa-font-weight-body: var(--wa-font-weight-semibold);
   --wa-font-weight-action: var(--wa-font-weight-normal);
 
   /* The default typescale is based on the Major Second scale (x1.125).
@@ -238,8 +238,8 @@
   --wa-font-size-3xl: 2.222rem; /* 41px */
   --wa-font-size-4xl: 3.1rem; /* 56px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2.2;
 
   /**
@@ -342,11 +342,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);
 
@@ -680,7 +680,7 @@
     --border-radius: var(--wa-corners-pill);
     --border-width: var(--wa-border-width-m);
     --border-style: dashed;
-    font-weight: var(--wa-font-weight-heavy);
+    font-weight: var(--wa-font-weight-bold);
 
     &[variant='brand'] {
       --border-color: var(--wa-color-brand-border-quiet);
@@ -818,7 +818,7 @@
   }
 
   .product-detail .price {
-    font-weight: var(--wa-font-weight-heavy);
+    font-weight: var(--wa-font-weight-bold);
   }
 
   .support-table wa-card {
@@ -827,7 +827,7 @@
 
   .support-table th {
     font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-heavy);
+    font-weight: var(--wa-font-weight-bold);
     background-color: var(--wa-color-surface-lowered);
   }
 
diff --git a/src/themes/premium.css b/src/themes/premium.css
index b3ef8801d..1c40fa727 100644
--- a/src/themes/premium.css
+++ b/src/themes/premium.css
@@ -206,10 +206,10 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
 
-  --wa-font-weight-heading: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
   --wa-font-weight-action: var(--wa-font-weight-normal);
 
@@ -226,8 +226,8 @@
   --wa-font-size-3xl: 2.5625rem; /* 41px */
   --wa-font-size-4xl: 3.25rem; /* 52px */
 
-  --wa-line-height-compact: 1.25;
-  --wa-line-height-regular: 1.6;
+  --wa-line-height-condensed: 1.25;
+  --wa-line-height-normal: 1.6;
   --wa-line-height-expanded: 2;
 
   /**
@@ -330,11 +330,11 @@
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-controls-label-line-height: var(--wa-line-height-regular);
+  --wa-form-controls-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-controls-value-color: var(--wa-color-text-normal);
   --wa-form-controls-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-controls-value-line-height: var(--wa-line-height-compact);
+  --wa-form-controls-value-line-height: var(--wa-line-height-condensed);
 
   --wa-form-controls-placeholder-color: var(--wa-color-base-60);