@dogsbay/docs-layout 0.2.0-beta.96 → 0.2.0-beta.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/docs-layout",
-  "version": "0.2.0-beta.96",
+  "version": "0.2.0-beta.98",
   "description": "Standard documentation layout components for Dogsbay",
   "type": "module",
   "exports": {
@@ -30,8 +30,8 @@
     "./json-ld": "./src/json-ld.ts"
   },
   "dependencies": {
-    "@dogsbay/primitives": "0.2.0-beta.96",
-    "@dogsbay/ui": "0.2.0-beta.96"
+    "@dogsbay/primitives": "0.2.0-beta.98",
+    "@dogsbay/ui": "0.2.0-beta.98"
   },
   "devDependencies": {
     "happy-dom": "^20.10.6",

package/src/DocsLayout.astro

@@ -839,10 +839,39 @@ const siteIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
       ></script>
     )}
 
+    {/*
+      Theme bootstrap. Inline and BLOCKING on purpose — it must run
+      before first paint or the page flashes light before going dark.
+
+      An explicit choice wins in BOTH directions. Someone on a
+      dark-mode OS who deliberately picked light must stay light, so
+      "light" is checked rather than treated as "not dark". Only the
+      absence of a stored value falls through to the OS preference.
+
+      That fallback is the point of this block. Previously the only
+      condition was `=== "dark"`, so a visitor whose OS is in dark mode
+      got a light page until they found the toggle — and nothing else
+      in the CSS consulted prefers-color-scheme either. It also made
+      dark mode untestable by any tool that emulates the media query
+      (DevTools' Rendering panel, Playwright's colorScheme), because
+      the page did not read it.
+
+      localStorage access throws in some privacy modes; a throw here
+      would skip the class entirely, so it is guarded and degrades to
+      the OS preference.
+    */}
     <script is:inline>
-      if (localStorage.getItem("theme") === "dark") {
-        document.documentElement.classList.add("dark");
-      }
+      (function () {
+        var stored = null;
+        try {
+          stored = localStorage.getItem("theme");
+        } catch (e) {}
+        var dark =
+          stored === "dark" ||
+          (stored !== "light" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        if (dark) document.documentElement.classList.add("dark");
+      })();
     </script>
     <slot name="head" />
   </head>

package/src/TagList.astro

@@ -72,8 +72,13 @@ const chips = buildChips(tags, { indexPath, prefixes, labels });
  */
 const PALETTE: Record<TagPaletteName, string> = {
   blue: "border-blue-500/40 bg-blue-500/15 text-blue-700 dark:text-blue-300",
+  // amber-800, not -700, in light mode: amber-700 on amber-500/15 is
+  // 4.48:1 — under 4.5:1 by a hair, and failing regardless of the
+  // opacity bug below. -800 gives 6.32:1. Every other colour clears it
+  // at -700 (4.76–8.60:1). Dark mode is unaffected: text-*-300 on the
+  // same tint over a dark page is 9–12:1 across the palette.
   amber:
-    "border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    "border-amber-500/40 bg-amber-500/15 text-amber-800 dark:text-amber-300",
   emerald:
     "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
   violet:
@@ -108,7 +113,17 @@ const DEFAULT_CLASS =
         >
           {chip.prefixLabel ? (
             <Fragment>
-              <span class="opacity-70">{chip.prefixLabel}:</span>
+              {/*
+                No opacity here. `opacity-70` on the prefix blended the
+                text 30% toward the chip background and put EVERY colour
+                in the palette below 4.5:1 — measured 2.75–3.95:1, worst
+                amber, best slate. It is 12px text, so 4.5:1 applies.
+
+                The prefix/leaf distinction is carried by font-weight
+                instead: the leaf below is font-semibold against the
+                anchor's font-medium. Weight costs no contrast.
+              */}
+              <span>{chip.prefixLabel}:</span>
               <span class="font-semibold">{chip.leafLabel}</span>
             </Fragment>
           ) : (