bug: ui theme is inaccessible (#106)

* increase contrast

* aria-labels

Author: kbvernon

css/code.css

@@ -15,7 +15,7 @@
 }
 
 html:not(.dark) .z-code {
-    @apply bg-gray-100;
+    @apply bg-gray-50;
 }
 
 .z-code {

css/content.css

@@ -1,8 +1,9 @@
 @layer base {
 
-    /* Typography rules for guide and blog content. The `to (.bc)` boundary
-       stops descent into shortcode subtrees so basecoat components keep
-       their own styling. */
+    /* 
+    Typography rules for guide and blog content. The `to (.bc)` boundary stops 
+    descent into shortcode subtrees so basecoat components keep their own styling. 
+    */
     @scope (.content) to (.bc) {
 
         :is(h1, h2, h3, h4, h5) {
@@ -47,7 +48,7 @@
         }
 
         a {
-            @apply text-primary hover:underline;
+            @apply text-link hover:text-link-hover hover:underline;
         }
     }
 }

css/theme.css

@@ -48,6 +48,8 @@
     --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
     --tracking-normal: 0em;
     --spacing: 0.25rem;
+    --link: oklch(0.54 0.2 150);
+    --link-hover: oklch(0.7 0.2 150);
 }
 
 .dark {
@@ -98,6 +100,8 @@
     --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
     --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
     --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+    --link: var(--primary);
+    --link-hover: oklch(from var(--primary) 0.86 c h);
 }
 
 @theme inline {
@@ -147,6 +151,9 @@
     --shadow-lg: var(--shadow-lg);
     --shadow-xl: var(--shadow-xl);
     --shadow-2xl: var(--shadow-2xl);
+
+    --color-link: var(--link);
+    --color-link-hover: var(--link-hover);
 }
 
 @layer base {

templates/navbar.html

@@ -1,23 +1,27 @@
 <div class="flex h-14 w-full items-center gap-2 px-4">
-    <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))" aria-label="Toggle sidebar" data-tooltip="Toggle sidebar"
-        data-side="bottom" data-align="start" class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5">
+    <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
+            aria-label="Toggle sidebar" data-tooltip="Toggle sidebar"
+            data-side="bottom" data-align="start" class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5">
         <span class="iconify lucide--sidebar"></span>
     </button>
     <div class="relative">
-        <span class="iconify lucide--search absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none"></span>
+        <span
+              class="iconify lucide--search absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none"></span>
         <input class="input h-8 pl-8" id="input-with-text" type="search" placeholder="Search the docs">
     </div>
     <button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="bottom"
-        onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-icon-outline size-8">
+            onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-icon-outline size-8">
         <span class="iconify lucide--sun hidden dark:block"></span>
         <span class="iconify lucide--moon block dark:hidden"></span>
     </button>
-    <a href="{{ config.extra.url.github }}" class="btn-icon-outline size-8" target="_blank" rel="noopener noreferrer" data-tooltip="GitHub repository"
-        data-side="bottom" data-align="end">
+    <a href="{{ config.extra.url.github }}" class="btn-icon-outline size-8" target="_blank" rel="noopener noreferrer"
+       data-tooltip="GitHub repository"
+       data-side="bottom" data-align="end" aria-label="Link to GitHub repository">
         <span class="iconify mdi--github"></span>
     </a>
-    <a href="{{ config.extra.url.discord }}" class="btn-icon-outline size-8" target="_blank" rel="noopener noreferrer" data-tooltip="Discord channel"
-        data-side="bottom" data-align="end">
+    <a href="{{ config.extra.url.discord }}" class="btn-icon-outline size-8" target="_blank" rel="noopener noreferrer"
+       data-tooltip="Discord channel"
+       data-side="bottom" data-align="end" aria-label="Link to Discord channel">
         <span class="iconify fa7-brands--discord text-xs"></span>
     </a>
 </div>