From 593374c7c5cb24c583320fde26aa9f5983dc4fee Mon Sep 17 00:00:00 2001
From: Melissa Thompson <mthompson@heysparkbox.com>
Date: Fri, 16 Feb 2024 10:59:18 -0500
Subject: [PATCH] chore(docs): increase dark mode compatibility (#2530)

* chore(docs): deprecationNotice is dark mode compatible
* chore(docs): description links are dark mode compatible
---
 .storybook/deprecated/quickaction/quickaction.yml      |  2 +-
 components/accordion/metadata/accordion.yml            |  2 +-
 components/actionbar/metadata/actionbar.yml            |  2 +-
 components/actionbutton/metadata/actionbutton.yml      |  2 +-
 components/actiongroup/metadata/actiongroup.yml        |  2 +-
 components/avatar/metadata/avatar.yml                  |  2 +-
 components/badge/metadata/badge.yml                    |  2 +-
 components/breadcrumb/metadata/breadcrumb.yml          |  2 +-
 components/button/metadata/button-accent.yml           |  2 +-
 components/button/metadata/button-negative.yml         |  2 +-
 components/button/metadata/button-primary.yml          |  4 ++--
 components/button/metadata/button-secondary.yml        |  2 +-
 components/button/metadata/button-staticcolor.yml      |  2 +-
 components/buttongroup/metadata/buttongroup.yml        |  2 +-
 components/checkbox/metadata/checkbox.yml              |  2 +-
 components/closebutton/metadata/closebutton.yml        |  2 +-
 components/colorarea/metadata/colorarea.yml            |  2 +-
 components/colorslider/metadata/colorslider.yml        |  2 +-
 components/colorwheel/metadata/colorwheel.yml          |  2 +-
 components/contextualhelp/metadata/contextualhelp.yml  |  2 +-
 components/divider/metadata/divider.yml                |  2 +-
 components/fieldlabel/metadata/fieldlabel.yml          |  6 +++---
 .../metadata/floatingactionbutton.yml                  |  2 +-
 components/helptext/metadata/helptext.yml              |  2 +-
 components/inlinealert/metadata/inlinealert.yml        |  2 +-
 components/link/metadata/link.yml                      |  2 +-
 components/menu/metadata/menu.yml                      |  2 +-
 components/modal/metadata/modal.yml                    |  2 +-
 components/picker/metadata/picker.yml                  |  2 +-
 components/popover/metadata/popover.yml                |  2 +-
 components/progressbar/metadata/meter.yml              |  2 +-
 components/progresscircle/metadata/progresscircle.yml  |  2 +-
 components/radio/metadata/radio.yml                    |  4 ++--
 components/statuslight/metadata/statuslight.yml        |  2 +-
 components/swatch/metadata/swatch.yml                  |  2 +-
 components/swatchgroup/metadata/swatchgroup.yml        |  2 +-
 components/switch/metadata/switch.yml                  |  4 ++--
 components/table/metadata/table.yml                    | 10 +++++-----
 components/tag/metadata/tag.yml                        |  2 +-
 components/taggroup/metadata/taggroup.yml              |  2 +-
 components/toast/metadata/toast.yml                    |  2 +-
 components/tooltip/metadata/tooltip.yml                |  2 +-
 components/tray/metadata/tray.yml                      |  2 +-
 components/treeview/metadata/treeview.yml              |  4 ++--
 components/typography/metadata/typography.yml          |  2 +-
 site/templates/siteComponent.pug                       |  7 ++++---
 46 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/.storybook/deprecated/quickaction/quickaction.yml b/.storybook/deprecated/quickaction/quickaction.yml
index fb97d7aa9db..2f3e9425b70 100644
--- a/.storybook/deprecated/quickaction/quickaction.yml
+++ b/.storybook/deprecated/quickaction/quickaction.yml
@@ -1,7 +1,7 @@
 id: quickactions
 name: Quick actions
 status: Deprecated
-deprecationNotice: Use an <a href="actionbar.html">action bar</a> to allow users to perform actions on either a single or multiple items at the same time, instead.
+deprecationNotice: Use an <a class="spectrum-Link" href="actionbar.html">action bar</a> to allow users to perform actions on either a single or multiple items at the same time, instead.
 description: Note that the `.spectrum-QuickActions-overlay` class should be placed on the container where the Quick Actions are displayed, and the `.spectrum-QuickActions--textOnly` class should be applied when the buttons have text only.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/quick-actions/
 examples:
diff --git a/components/accordion/metadata/accordion.yml b/components/accordion/metadata/accordion.yml
index 3e40e465c70..7150257b720 100644
--- a/components/accordion/metadata/accordion.yml
+++ b/components/accordion/metadata/accordion.yml
@@ -4,7 +4,7 @@ description: "While remaining backward compatible, the recommended markup has be
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/accordion/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/accordion/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### T-shirt sizing
diff --git a/components/actionbar/metadata/actionbar.yml b/components/actionbar/metadata/actionbar.yml
index 01e8d25131e..ae930a4f3fb 100644
--- a/components/actionbar/metadata/actionbar.yml
+++ b/components/actionbar/metadata/actionbar.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/action-bar/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/actionbar/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/actionbar/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Popover Dependency
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index 7bec4a1c9a5..acc03b5be7c 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -9,7 +9,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/actionbutton/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/actionbutton/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Action Button now requires a class on its icon
diff --git a/components/actiongroup/metadata/actiongroup.yml b/components/actiongroup/metadata/actiongroup.yml
index 751d9853454..46112eb386f 100644
--- a/components/actiongroup/metadata/actiongroup.yml
+++ b/components/actiongroup/metadata/actiongroup.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/action-group/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/actiongroup/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/actiongroup/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### New Action Button markup
diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml
index 91f4ae0757e..e3d62fded37 100644
--- a/components/avatar/metadata/avatar.yml
+++ b/components/avatar/metadata/avatar.yml
@@ -10,7 +10,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/avatar/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/avatar/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### A div wrapper is required for avatar
diff --git a/components/badge/metadata/badge.yml b/components/badge/metadata/badge.yml
index 58026f95b0d..d60ec93ef8d 100644
--- a/components/badge/metadata/badge.yml
+++ b/components/badge/metadata/badge.yml
@@ -8,7 +8,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/badge/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/badge/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Badge now includes icon and label elements
diff --git a/components/breadcrumb/metadata/breadcrumb.yml b/components/breadcrumb/metadata/breadcrumb.yml
index edbfddf3a4d..aac5cae9412 100644
--- a/components/breadcrumb/metadata/breadcrumb.yml
+++ b/components/breadcrumb/metadata/breadcrumb.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/breadcrumbs/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/breadcrumb/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/breadcrumb/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### New Action Button markup
diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml
index 030603876bb..8d3be60b926 100644
--- a/components/button/metadata/button-accent.yml
+++ b/components/button/metadata/button-accent.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Call-to-action-variant
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Fill or Outline class required
diff --git a/components/button/metadata/button-negative.yml b/components/button/metadata/button-negative.yml
index 8d3fe4e53f2..9acb42c7e1f 100644
--- a/components/button/metadata/button-negative.yml
+++ b/components/button/metadata/button-negative.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Negative
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Fill or Outline class required
diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml
index a147cdf6f79..e7bb7f449ec 100644
--- a/components/button/metadata/button-primary.yml
+++ b/components/button/metadata/button-primary.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Primary
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Fill or Outline class required
@@ -204,7 +204,7 @@ examples:
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
-          
+
           <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
             <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml
index e48c18d9267..7b86a380ffc 100644
--- a/components/button/metadata/button-secondary.yml
+++ b/components/button/metadata/button-secondary.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Secondary
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Fill or Outline class required
diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml
index 5acdefb6b71..ae8792424af 100644
--- a/components/button/metadata/button-staticcolor.yml
+++ b/components/button/metadata/button-staticcolor.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Over-background
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Fill or Outline class required
diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml
index ee113a72ba1..f35ccb05ec5 100644
--- a/components/buttongroup/metadata/buttongroup.yml
+++ b/components/buttongroup/metadata/buttongroup.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/buttongroup/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/buttongroup/metadata/mods.md">here</a>.
 examples:
   - id: buttongroup-horizontal
     name: Horizontal
diff --git a/components/checkbox/metadata/checkbox.yml b/components/checkbox/metadata/checkbox.yml
index 62b4ed6986a..bb6268fa972 100644
--- a/components/checkbox/metadata/checkbox.yml
+++ b/components/checkbox/metadata/checkbox.yml
@@ -9,7 +9,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/checkbox/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/checkbox/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Quiet and emphasized
diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml
index bef446e2c06..7e8b107e9ae 100644
--- a/components/closebutton/metadata/closebutton.yml
+++ b/components/closebutton/metadata/closebutton.yml
@@ -5,7 +5,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/closebutton/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/closebutton/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Sizing
diff --git a/components/colorarea/metadata/colorarea.yml b/components/colorarea/metadata/colorarea.yml
index f87fbb3f2fd..ae2e5ea9e5b 100644
--- a/components/colorarea/metadata/colorarea.yml
+++ b/components/colorarea/metadata/colorarea.yml
@@ -11,7 +11,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/colorarea/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/colorarea/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       - canvas variant has been removed
diff --git a/components/colorslider/metadata/colorslider.yml b/components/colorslider/metadata/colorslider.yml
index 2cc95fc6761..50edaee50bb 100644
--- a/components/colorslider/metadata/colorslider.yml
+++ b/components/colorslider/metadata/colorslider.yml
@@ -11,7 +11,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/colorslider/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/colorslider/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       - The component now supports a RTL (right-to-left) base direction with logical properties, and reverses the gradient.
diff --git a/components/colorwheel/metadata/colorwheel.yml b/components/colorwheel/metadata/colorwheel.yml
index 12602fe2437..27dd8f12780 100644
--- a/components/colorwheel/metadata/colorwheel.yml
+++ b/components/colorwheel/metadata/colorwheel.yml
@@ -11,7 +11,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/colorwheel/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/colorwheel/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       - Colorwheel no longer displays a canvas variant
diff --git a/components/contextualhelp/metadata/contextualhelp.yml b/components/contextualhelp/metadata/contextualhelp.yml
index ac5bb6f4e6d..7e06a9641ca 100644
--- a/components/contextualhelp/metadata/contextualhelp.yml
+++ b/components/contextualhelp/metadata/contextualhelp.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/contextual-help/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/popover/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/popover/metadata/mods.md">here</a>.
 examples:
   - id: contextualhelp-variants
     name: Info Icon
diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml
index fb650177e4e..f994fc5f66a 100644
--- a/components/divider/metadata/divider.yml
+++ b/components/divider/metadata/divider.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/divider/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/divider/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/divider/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Change workflow icon size to medium
diff --git a/components/fieldlabel/metadata/fieldlabel.yml b/components/fieldlabel/metadata/fieldlabel.yml
index 34f19798680..4a1a2c3ab65 100644
--- a/components/fieldlabel/metadata/fieldlabel.yml
+++ b/components/fieldlabel/metadata/fieldlabel.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/text-field/#Include-a-label
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### T-shirt sizing
@@ -83,7 +83,7 @@ examples:
     description: A Field label for a required field can display either the text "(required)", or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin.
     markup: |
       <label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
-        Life story<svg 
+        Life story<svg
           class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
           <use xlink:href="#spectrum-css-icon-Asterisk100" />
         </svg>
@@ -111,7 +111,7 @@ examples:
       </div>
 
       <label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">
-        Life story<svg 
+        Life story<svg
           class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
           <use xlink:href="#spectrum-css-icon-Asterisk100" />
         </svg>
diff --git a/components/floatingactionbutton/metadata/floatingactionbutton.yml b/components/floatingactionbutton/metadata/floatingactionbutton.yml
index 304a20f2865..c2d5f13c39f 100644
--- a/components/floatingactionbutton/metadata/floatingactionbutton.yml
+++ b/components/floatingactionbutton/metadata/floatingactionbutton.yml
@@ -7,7 +7,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/floatingactionbutton/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/floatingactionbutton/metadata/mods.md">here</a>.
 examples:
   - id: floatingactionbutton-primary
     name: Primary
diff --git a/components/helptext/metadata/helptext.yml b/components/helptext/metadata/helptext.yml
index a86b3c05691..5e1b6d9eb31 100644
--- a/components/helptext/metadata/helptext.yml
+++ b/components/helptext/metadata/helptext.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/help-text/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/helptext/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/helptext/metadata/mods.md">here</a>.
 examples:
   - id: helptext-sizing
     name: Sizing
diff --git a/components/inlinealert/metadata/inlinealert.yml b/components/inlinealert/metadata/inlinealert.yml
index 5da37ccc008..12435584c79 100644
--- a/components/inlinealert/metadata/inlinealert.yml
+++ b/components/inlinealert/metadata/inlinealert.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/in-line-alert/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/inlinealert/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/inlinealert/metadata/mods.md">here</a>.
 examples:
   - id: inlinealert-neutral
     name: Neutral
diff --git a/components/link/metadata/link.yml b/components/link/metadata/link.yml
index 35e36d1b251..58bc1ccb4c3 100644
--- a/components/link/metadata/link.yml
+++ b/components/link/metadata/link.yml
@@ -5,7 +5,7 @@ status: Verified
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/link/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/link/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Subtle variant
diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
index e498efcd333..63603b2f661 100644
--- a/components/menu/metadata/menu.yml
+++ b/components/menu/metadata/menu.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/menu/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/menu/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/menu/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### T-shirt sizing
diff --git a/components/modal/metadata/modal.yml b/components/modal/metadata/modal.yml
index 76dcbed48b5..154fb7a948a 100644
--- a/components/modal/metadata/modal.yml
+++ b/components/modal/metadata/modal.yml
@@ -3,7 +3,7 @@ description: A modal component that is used primarily by Dialog.
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/modal/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/modal/metadata/mods.md">here</a>.
 examples:
   - id: modal
     name: Modal
diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml
index 3560b94c6c4..5339feeca39 100644
--- a/components/picker/metadata/picker.yml
+++ b/components/picker/metadata/picker.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/picker/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/picker/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Component renamed
diff --git a/components/popover/metadata/popover.yml b/components/popover/metadata/popover.yml
index 790b8259655..6bcff1652b6 100644
--- a/components/popover/metadata/popover.yml
+++ b/components/popover/metadata/popover.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/popover/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/popover/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/popover/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### New Popover Positions
diff --git a/components/progressbar/metadata/meter.yml b/components/progressbar/metadata/meter.yml
index ae791be295c..c04b96c7955 100644
--- a/components/progressbar/metadata/meter.yml
+++ b/components/progressbar/metadata/meter.yml
@@ -11,7 +11,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/meter/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/progressbar/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/progressbar/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### spectrum-Meter class
diff --git a/components/progresscircle/metadata/progresscircle.yml b/components/progresscircle/metadata/progresscircle.yml
index 52c3ea0eb63..3a421c35475 100644
--- a/components/progresscircle/metadata/progresscircle.yml
+++ b/components/progresscircle/metadata/progresscircle.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/progress-circle/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/progresscircle/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/progresscircle/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Component renamed
diff --git a/components/radio/metadata/radio.yml b/components/radio/metadata/radio.yml
index 35661054a35..3de30ce5942 100644
--- a/components/radio/metadata/radio.yml
+++ b/components/radio/metadata/radio.yml
@@ -9,7 +9,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/radio/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/radio/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### T-shirt sizing
@@ -21,7 +21,7 @@ sections:
       - Read-only radio buttons do not have a focus ring, but the button should be focusable.]
 
       ### Invalid/Error State
-      - Invalid radio buttons are signified by including [Help text](helptext.html) in a [Field group](fieldgroup.html). The `.is-invalid` class has been removed. See Field group for an example with an invalid radio group. 
+      - Invalid radio buttons are signified by including [Help text](helptext.html) in a [Field group](fieldgroup.html). The `.is-invalid` class has been removed. See Field group for an example with an invalid radio group.
 
       ### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
diff --git a/components/statuslight/metadata/statuslight.yml b/components/statuslight/metadata/statuslight.yml
index 65f4eefbd14..09359419d1c 100644
--- a/components/statuslight/metadata/statuslight.yml
+++ b/components/statuslight/metadata/statuslight.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/status-light/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/statuslight/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/statuslight/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### T-shirt sizing
diff --git a/components/swatch/metadata/swatch.yml b/components/swatch/metadata/swatch.yml
index f21c3afb6a9..85c28dfeb29 100644
--- a/components/swatch/metadata/swatch.yml
+++ b/components/swatch/metadata/swatch.yml
@@ -6,7 +6,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/swatch/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/swatch/metadata/mods.md">here</a>.
 examples:
   - id: swatch-sizing
     name: Sizing
diff --git a/components/swatchgroup/metadata/swatchgroup.yml b/components/swatchgroup/metadata/swatchgroup.yml
index 2052378c635..2c9905783d6 100644
--- a/components/swatchgroup/metadata/swatchgroup.yml
+++ b/components/swatchgroup/metadata/swatchgroup.yml
@@ -7,7 +7,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/swatchgroup/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/swatchgroup/metadata/mods.md">here</a>.
 examples:
   - id: swatchgroup-compact
     name: Density - Compact
diff --git a/components/switch/metadata/switch.yml b/components/switch/metadata/switch.yml
index a15f96c03d4..0cebd67302d 100644
--- a/components/switch/metadata/switch.yml
+++ b/components/switch/metadata/switch.yml
@@ -3,13 +3,13 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/switch/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/switch/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/switch/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Component renamed
       Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`.
       ### T-shirt sizing
-      Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium". 
+      Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium".
       ### Quiet and emphasized
       Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
       If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed.
diff --git a/components/table/metadata/table.yml b/components/table/metadata/table.yml
index 8a7b970dd71..df332cdf499 100644
--- a/components/table/metadata/table.yml
+++ b/components/table/metadata/table.yml
@@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/table/
 sections:
   - name: Custom properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/table/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/table/metadata/mods.md">here</a>.
   - name: Migration guide
     description: |
       ### Sorted icon moved to left side of text
@@ -1040,8 +1040,8 @@ examples:
           <tr class="spectrum-Table-row spectrum-Table-row--collapsible" data-tier="0" id="table-cr-alpha">
             <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
               <div class="spectrum-Table-collapseInner">
-                <button 
-                  class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon" 
+                <button
+                  class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon"
                   aria-label="Collapse"
                   aria-expanded="true"
                   aria-controls="table-cr-bravo table-cr-delta"
@@ -1059,8 +1059,8 @@ examples:
           <tr class="spectrum-Table-row spectrum-Table-row--collapsible" data-tier="1" id="table-cr-bravo">
             <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
               <div class="spectrum-Table-collapseInner">
-                <button 
-                  class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon" 
+                <button
+                  class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon"
                   aria-label="Expand"
                   aria-expanded="false"
                   aria-controls="table-cr-charlie"
diff --git a/components/tag/metadata/tag.yml b/components/tag/metadata/tag.yml
index f6cd4c34aa4..36becfb308a 100644
--- a/components/tag/metadata/tag.yml
+++ b/components/tag/metadata/tag.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/tag/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tag/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Pluralized classes changed to singular
diff --git a/components/taggroup/metadata/taggroup.yml b/components/taggroup/metadata/taggroup.yml
index b112e0589a3..8f8786951b7 100644
--- a/components/taggroup/metadata/taggroup.yml
+++ b/components/taggroup/metadata/taggroup.yml
@@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/taggroup/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/taggroup/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Updated tag classes
diff --git a/components/toast/metadata/toast.yml b/components/toast/metadata/toast.yml
index 3ba43300c4b..6165311d23a 100644
--- a/components/toast/metadata/toast.yml
+++ b/components/toast/metadata/toast.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/toast/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/toast/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/toast/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Clear button replaced by Close button
diff --git a/components/tooltip/metadata/tooltip.yml b/components/tooltip/metadata/tooltip.yml
index baf54721e3e..0e66e63387f 100644
--- a/components/tooltip/metadata/tooltip.yml
+++ b/components/tooltip/metadata/tooltip.yml
@@ -3,7 +3,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/tooltip/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/tooltip/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tooltip/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### Tooltip now has 22 directions
diff --git a/components/tray/metadata/tray.yml b/components/tray/metadata/tray.yml
index 548a064d491..1598a710da8 100644
--- a/components/tray/metadata/tray.yml
+++ b/components/tray/metadata/tray.yml
@@ -5,7 +5,7 @@ description: |
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/tray/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tray/metadata/mods.md">here</a>.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/trays/
 examples:
   - id: tray
diff --git a/components/treeview/metadata/treeview.yml b/components/treeview/metadata/treeview.yml
index 9c542464564..b55aba22534 100644
--- a/components/treeview/metadata/treeview.yml
+++ b/components/treeview/metadata/treeview.yml
@@ -6,7 +6,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/tree-view/
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/treeview/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/treeview/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
       ### T-shirt sizing
@@ -38,7 +38,7 @@ sections:
 
       ### Revised sections markup
       The markup for sections has changed so that the heading is now a child of an `li` instead of the `ul`, to ensure valid markup. An additional
-      class `spectrum-TreeView-section` has been added for the first level `li` elements that contain the section heading and its child Tree view. 
+      class `spectrum-TreeView-section` has been added for the first level `li` elements that contain the section heading and its child Tree view.
 
 examples:
   - id: treeview-standard
diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml
index dfb255ca997..5b52468117b 100644
--- a/components/typography/metadata/typography.yml
+++ b/components/typography/metadata/typography.yml
@@ -46,7 +46,7 @@ examples:
 sections:
   - name: Custom Properties API
     description: |
-      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/typography/metadata/mods.md">here</a>.
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/typography/metadata/mods.md">here</a>.
   - name: Applying margins
     description: |
       By default, Typography components do not include outer margins. If you would like to add margins, simply add the `.spectrum-Typography` class to your container, and every typography component inside of your container will have the correct margins.
diff --git a/site/templates/siteComponent.pug b/site/templates/siteComponent.pug
index 8dd65badf46..fdfbe9c2e95 100644
--- a/site/templates/siteComponent.pug
+++ b/site/templates/siteComponent.pug
@@ -149,9 +149,10 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                   h3.spectrum-InLineAlert-header Deprecated component
                     svg(class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="36" viewBox="0 0 36 36" width="36")
                       path(d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z")
-                  p.spectrum-InLineAlert-content This component has been deprecated.
-                    if component.deprecationNotice
-                      span!= util.markdown.render(component.deprecationNotice)
+                  section.spectrum-InLineAlert-content
+                    p This component has been deprecated.
+                      if component.deprecationNotice
+                        span!= util.markdown.render(component.deprecationNotice)
 
               table.spectrum-CSSComponent-detailsTable
                 tr.spectrum-Body