fix(docs): resolve accessibility report issues

packages/stacks-docs/src/app.css

@@ -478,6 +478,7 @@ h1 {
     list-style: none;
 }
 .docs-link {
+    color: var(--theme-link-color, var(--black-600));
     font-weight: 500;
 }
 

packages/stacks-docs/src/components/BannerPreview.svelte

@@ -24,6 +24,6 @@
         <strong>Stacks is currently frozen in read-only mode.</strong> Contact the team to restore access.
     </span>
     <div class="s-banner--actions">
-        <button type="button" class="s-link s-banner--dismiss"><Icon src={IconCross} /></button>
+        <button type="button" class="s-link s-banner--dismiss" aria-label="Dismiss banner"><Icon src={IconCross} /></button>
     </div>
 </aside>

packages/stacks-docs/src/components/ClassTable.svelte

@@ -117,7 +117,7 @@
                             {:else}
                                 {@const val = String((row as Record<string, unknown>)[col] ?? '')}
                                 {#if val === 'N/A'}
-                                    <span class="fc-black-350">N/A</span>
+                                    <span class="fc-black-400">N/A</span>
                                 {:else if val.startsWith('.')}
                                     <code>{val}</code>
                                 {:else}

packages/stacks-docs/src/docs/public/system/base/overflow.md

@@ -82,7 +82,7 @@ description: Atomic overflow classes allow you to change an element's overflow p
 ```
 
 <Example>
-    <div class="overflow-x-auto d-grid grid__3 sm:grid__2 md:grid__3 lg:grid__2 g16 fs-caption ff-mono pb64" tabindex="0">
+    <div class="overflow-x-auto d-grid grid__3 sm:grid__2 md:grid__3 lg:grid__2 g16 fs-caption ff-mono pb64" tabindex="0" role="region" aria-label="Overflow examples">
         <div>
             <div class="mb4">.overflow-auto</div>
             <div class="ba bc-black-225 pt32 hs2 overflow-auto">

packages/stacks-docs/src/docs/public/system/components/buttons.md

@@ -201,7 +201,9 @@ Each button class has a selected state which can be visually activated by applyi
 </script>
 ```
 
-<ToggleButtonDemo />
+<Example>
+    <ToggleButtonDemo />
+</Example>
 
 ## Additional styles
 

packages/stacks-docs/src/docs/public/system/components/buttons/AnchorButtonTable.svelte

@@ -51,7 +51,7 @@
                 <Button href="#" class="ws-nowrap" {variant} {weight}>Ask question</Button>
               </td>
               <td class="va-middle ta-center px4">
-                <Button href="#" class="ws-nowrap" {variant} {weight} selected aria-pressed="true">Ask question</Button>
+                <Button href="#" class="ws-nowrap" {variant} {weight} selected role="button" aria-pressed="true">Ask question</Button>
               </td>
               <td class="va-middle ta-center px4">
                 <Button href="#" class="ws-nowrap" {variant} {weight} disabled>Ask question</Button>

packages/stacks-docs/src/routes/+page.svelte

@@ -61,7 +61,7 @@
       >
         <Icon src={icons[category.title]} />
         <h2 class="mt-auto fs-headline1 mb12">{category.title}</h2>
-        <p class="mb0 fs-body2 fc-black-300">{category.description}</p>
+        <p class="mb0 fs-body2 fc-black-250 d:fc-black-400">{category.description}</p>
       </a>
     {/each}