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

@@ -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:

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

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

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

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

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

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

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

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

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

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" />

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

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

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

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

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

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

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.

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

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

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

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>

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

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

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

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