From 606338b33ea2ca3bdd2fa303096e1763b3da94d3 Mon Sep 17 00:00:00 2001
From: Evan Jarrett <evan@evanjarrett.com>
Date: Mon, 31 Aug 2026 17:01:15 -0500
Subject: [PATCH] appview: fix mockup-code contrast in both themes

daisyUI dims the gutter prefix with `opacity: .5`, which multiplies
against whatever opacity the line's own text color carries. On
bg-base-300 a plain `$` measured 3.20:1 in light and 4.19:1 in dark,
and the `#` on a line already dimmed to /70 compounded to 2.15:1. The
text needs 4.5:1, so this failed in dark mode too, just less visibly
than the light-mode report that surfaced it.

Give the prefix an absolute muted color instead of a multiplying
opacity. The override has to sit unlayered: daisyUI ships this selector
in `@layer daisyui`, declared after `@layer components`, so a rule in
components loses on layer order however specific it is. A first attempt
inside components left daisyUI's `opacity: .5` live on top of the new
70% color, which made the `$` worse (0.5 -> 0.35 effective) rather than
better.

The hero tagline drops its /70 and now reads at the same weight as the
docker commands above it. install.html's two comment lines were at /50,
which failed on the text itself (3.20:1 light), and move to /70 where
they still read as comments.

Measured in Chromium against the built stylesheet, compositing each
pseudo-element color over its real background on a canvas: every prefix
and comment is now 5.84:1 light / 6.71:1 dark, against 14.03:1 / 12.02:1
for the command text, so the gutter stays visibly de-emphasized.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LpqkSRqpcnAjsSZgFTUN5z
---
 pkg/appview/src/css/main.css               | 20 ++++++++++++++++++++
 pkg/appview/templates/components/hero.html |  2 +-
 pkg/appview/templates/pages/install.html   |  4 ++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/pkg/appview/src/css/main.css b/pkg/appview/src/css/main.css
index 6d60b11..2bd6b13 100644
--- a/pkg/appview/src/css/main.css
+++ b/pkg/appview/src/css/main.css
@@ -244,6 +244,25 @@
         0 8px 24px -6px oklch(0% 0 0 / 0.12);
 }
 
+/* ========================================
+   MOCKUP-CODE GUTTER PREFIX CONTRAST
+   Override DaisyUI's `opacity: .5` on the `$`/`#` prefix
+   ======================================== */
+/* That .5 multiplies against whatever opacity the line's own text color
+   carries. On bg-base-300 it measured 3.20:1 in light and 4.19:1 in dark for
+   a plain `$`, and compounded to 2.15:1 on a line already dimmed to /70 —
+   all under the 4.5:1 this text size needs. An absolute muted color keeps the
+   gutter quiet without stacking.
+
+   Must stay UNLAYERED: daisyUI ships this selector in `@layer daisyui`, which
+   is declared after `@layer components`, so a rule in components loses on
+   layer order no matter how specific it is. Unlayered styles outrank every
+   layer. */
+.mockup-code pre[data-prefix]::before {
+    opacity: 1;
+    color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+}
+
 /* ========================================
    NAVBAR GHOST BUTTON HOVER
    Override DaisyUI's neutral hover for nav icons
@@ -497,6 +516,7 @@
     /* ----------------------------------------
        COMMAND / CODE DISPLAY
        ---------------------------------------- */
+
     .cmd {
         @apply flex items-center gap-2 relative w-fit max-w-full;
         @apply bg-base-300 rounded-md;
diff --git a/pkg/appview/templates/components/hero.html b/pkg/appview/templates/components/hero.html
index 76eb245..0bf618f 100644
--- a/pkg/appview/templates/components/hero.html
+++ b/pkg/appview/templates/components/hero.html
@@ -13,7 +13,7 @@
         <div class="mockup-code bg-base-300 text-base-content text-left w-full max-w-lg text-base mt-8">
             <pre data-prefix="$"><code>docker login {{ .RegistryURL }}</code></pre>
             <pre data-prefix="$"><code>docker push {{ .RegistryURL }}/you/app</code></pre>
-            <pre data-prefix="#" class="text-base-content/70"><code>same docker, decentralized</code></pre>
+            <pre data-prefix="#"><code>same docker, decentralized</code></pre>
         </div>
 
         <div class="flex items-center justify-center gap-4 mt-8">
diff --git a/pkg/appview/templates/pages/install.html b/pkg/appview/templates/pages/install.html
index cc743b5..af7d2bb 100644
--- a/pkg/appview/templates/pages/install.html
+++ b/pkg/appview/templates/pages/install.html
@@ -117,10 +117,10 @@
                 <h3 class="text-lg font-medium mb-3">Command not found</h3>
                 <p class="mb-4">Ensure the credential helper is in your PATH:</p>
                 <div class="mockup-code bg-base-300 text-base-content mb-6">
-                    <pre data-prefix="#" class="text-base-content/50"><code>Check if installed</code></pre>
+                    <pre data-prefix="#" class="text-base-content/70"><code>Check if installed</code></pre>
                     <pre data-prefix="$"><code>which docker-credential-atcr</code></pre>
                     <pre></pre>
-                    <pre data-prefix="#" class="text-base-content/50"><code>Add to PATH if needed</code></pre>
+                    <pre data-prefix="#" class="text-base-content/70"><code>Add to PATH if needed</code></pre>
                     <pre data-prefix="$"><code>export PATH="/usr/local/bin:$PATH"</code></pre>
                 </div>