From 7db5d56577b93a0e9d0067f9d143be7320d0b242 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 24 Feb 2026 21:33:28 -0500
Subject: [PATCH] fix(ui): make wood paneling text colors consistent and
 visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix text color display issues on wood gradient backgrounds in the
dashboard's collections container, ensuring small text matches big text
and "View All" links stand out with proper wood-specific colors.

Changes:
- Remove .text-sm from grey text rule to match big text colors
- Keep .text-secondary as only grey text class
- Links maintain wood-specific standout colors via specific selectors

Problem:
- Small text (.text-sm) was forced to grey (--wood-text-secondary)
- "View All" links inherited grey instead of wood link colors
- Inconsistent text sizing created visual hierarchy issues

Root Cause:
input.css:243-247 applied --wood-text-secondary to .text-sm
This overrode wood-specific link colors at lines 250-257

Solution:
Remove .text-sm and p.text-sm from the grey text rule:
- Before: .text-sm, .text-secondary, p.text-sm → grey
- After: .text-secondary only → grey
- .text-sm now uses --wood-text-primary (matches big text)
- Links (including "View All") use wood-specific blue colors

Impact:
- All small text now matches big text color on wood backgrounds
- "View All" links stand out with proper colors (#0066cc for light wood, #66ccff for dark)
- Improved readability and visual consistency
- Better user experience on wood gradient themes

Wood Theme Colors:
- Wood Light: #0066cc (dark blue for contrast on light background)
- Wood Dark: #66ccff (light blue for visibility on dark background)
- Wood Mahogany: #66ccff (light blue for visibility on dark background)

Files: web/static/input.css
Lines Modified: 243-247 (removed selectors)
Related: templates/dashboard.templ:100 (View All link)
---
 web/static/input.css | 500 +++++++++++++++++++++++--------------------
 1 file changed, 265 insertions(+), 235 deletions(-)

diff --git a/web/static/input.css b/web/static/input.css
index f2f4c5f..eedeea4 100644
--- a/web/static/input.css
+++ b/web/static/input.css
@@ -4,277 +4,307 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --bg-primary: #1a1b26;
-    --bg-secondary: #16161e;
-    --text-primary: #a9b1d6;
-    --text-secondary: #565f89;
-    --accent: #7aa2f7;
-    --border: #414868;
-  }
+    :root {
+        --bg-primary: #1a1b26;
+        --bg-secondary: #16161e;
+        --text-primary: #a9b1d6;
+        --text-secondary: #565f89;
+        --accent: #7aa2f7;
+        --border: #414868;
+    }
 
-  .theme-tokyo-night {
-    --bg-primary: #1a1b26;
-    --bg-secondary: #16161e;
-    --text-primary: #c0caf5;
-    --text-secondary: #c0caf5;
-    --accent: #7aa2f7;
-    --border: #414868;
-  }
+    .theme-tokyo-night {
+        --bg-primary: #1a1b26;
+        --bg-secondary: #16161e;
+        --text-primary: #c0caf5;
+        --text-secondary: #c0caf5;
+        --accent: #7aa2f7;
+        --border: #414868;
+    }
 
-  .theme-dracula {
-    --bg-primary: #282a36;
-    --bg-secondary: #21222c;
-    --text-primary: #f8f8f2;
-    --text-secondary: #6272a4;
-    --accent: #bd93f9;
-    --border: #44475a;
-  }
+    .theme-dracula {
+        --bg-primary: #282a36;
+        --bg-secondary: #21222c;
+        --text-primary: #f8f8f2;
+        --text-secondary: #6272a4;
+        --accent: #bd93f9;
+        --border: #44475a;
+    }
 
-  .theme-nord {
-    --bg-primary: #2e3440;
-    --bg-secondary: #3b4252;
-    --text-primary: #eceff4;
-    --text-secondary: #5e81ac;
-    --accent: #88c0d0;
-    --border: #4c566a;
-  }
+    .theme-nord {
+        --bg-primary: #2e3440;
+        --bg-secondary: #3b4252;
+        --text-primary: #eceff4;
+        --text-secondary: #5e81ac;
+        --accent: #88c0d0;
+        --border: #4c566a;
+    }
 
-  .theme-solarized-dark {
-    --bg-primary: #002b36;
-    --bg-secondary: #073642;
-    --text-primary: #93a1a1;
-    --text-secondary: #586e75;
-    --accent: #2aa198;
-    --border: #586e75;
-  }
+    .theme-solarized-dark {
+        --bg-primary: #002b36;
+        --bg-secondary: #073642;
+        --text-primary: #93a1a1;
+        --text-secondary: #586e75;
+        --accent: #2aa198;
+        --border: #586e75;
+    }
 
-  .theme-monokai {
-    --bg-primary: #272822;
-    --bg-secondary: #3e3d32;
-    --text-primary: #f8f8f2;
-    --text-secondary: #75715e;
-    --accent: #a6e22e;
-    --border: #49483e;
-  }
+    .theme-monokai {
+        --bg-primary: #272822;
+        --bg-secondary: #3e3d32;
+        --text-primary: #f8f8f2;
+        --text-secondary: #75715e;
+        --accent: #a6e22e;
+        --border: #49483e;
+    }
 
-  .theme-one-dark-pro {
-    --bg-primary: #282c34;
-    --bg-secondary: #21252b;
-    --text-primary: #abb2bf;
-    --text-secondary: #5c6370;
-    --accent: #61dafb;
-    --border: #3e4451;
-  }
+    .theme-one-dark-pro {
+        --bg-primary: #282c34;
+        --bg-secondary: #21252b;
+        --text-primary: #abb2bf;
+        --text-secondary: #5c6370;
+        --accent: #61dafb;
+        --border: #3e4451;
+    }
 
-  .theme-material-dark {
-    --bg-primary: #263238;
-    --bg-secondary: #37474f;
-    --text-primary: #eeffff;
-    --text-secondary: #546e7a;
-    --accent: #80cbc4;
-    --border: #455a64;
-  }
+    .theme-material-dark {
+        --bg-primary: #263238;
+        --bg-secondary: #37474f;
+        --text-primary: #eeffff;
+        --text-secondary: #546e7a;
+        --accent: #80cbc4;
+        --border: #455a64;
+    }
 
-  .theme-catppuccin-mocha {
-    --bg-primary: #1e1e2e;
-    --bg-secondary: #181825;
-    --text-primary: #cdd6f4;
-    --text-secondary: #bac2de;
-    --accent: #f38ba8;
-    --border: #313244;
-  }
+    .theme-catppuccin-mocha {
+        --bg-primary: #1e1e2e;
+        --bg-secondary: #181825;
+        --text-primary: #cdd6f4;
+        --text-secondary: #bac2de;
+        --accent: #f38ba8;
+        --border: #313244;
+    }
 
-  .theme-catppuccin-macchiato {
-    --bg-primary: #24273a;
-    --bg-secondary: #1e2030;
-    --text-primary: #cad3f5;
-    --text-secondary: #b8c0e0;
-    --accent: #f0c6c6;
-    --border: #363a4f;
-  }
+    .theme-catppuccin-macchiato {
+        --bg-primary: #24273a;
+        --bg-secondary: #1e2030;
+        --text-primary: #cad3f5;
+        --text-secondary: #b8c0e0;
+        --accent: #f0c6c6;
+        --border: #363a4f;
+    }
 
-  .theme-catppuccin-frappe {
-    --bg-primary: #303446;
-    --bg-secondary: #292c3c;
-    --text-primary: #c6d0f5;
-    --text-secondary: #b5bfe2;
-    --accent: #f2d5cf;
-    --border: #414559;
-  }
+    .theme-catppuccin-frappe {
+        --bg-primary: #303446;
+        --bg-secondary: #292c3c;
+        --text-primary: #c6d0f5;
+        --text-secondary: #b5bfe2;
+        --accent: #f2d5cf;
+        --border: #414559;
+    }
 
-  .theme-catppuccin-latte {
-    --bg-primary: #eff1f5;
-    --bg-secondary: #e6e9ef;
-    --text-primary: #4c4f69;
-    --text-secondary: #5c5f77;
-    --accent: #d20f39;
-    --border: #bcc0cc;
-  }
+    .theme-catppuccin-latte {
+        --bg-primary: #eff1f5;
+        --bg-secondary: #e6e9ef;
+        --text-primary: #4c4f69;
+        --text-secondary: #5c5f77;
+        --accent: #d20f39;
+        --border: #bcc0cc;
+    }
 
-  body {
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-  }
+    body {
+        background-color: var(--bg-primary);
+        color: var(--text-primary);
+    }
 
-  /* Header component styles */
-  .header-nav {
-    position: sticky;
-    top: 0;
-  }
+    /* Header component styles */
+    .header-nav {
+        position: sticky;
+        top: 0;
+    }
 
-  /* Make header sticky only on docs pages */
-  body:not(.page-docs) .header-nav {
-    position: static;
-  }
+    /* Make header sticky only on docs pages */
+    body:not(.page-docs) .header-nav {
+        position: static;
+    }
 
-  /* Add class to body on docs pages */
-  .page-docs .header-nav {
-    position: sticky;
-    top: 0;
-    z-index: 50;
-  }
+    /* Add class to body on docs pages */
+    .page-docs .header-nav {
+        position: sticky;
+        top: 0;
+        z-index: 50;
+    }
 
-  .card {
-    background-color: var(--bg-secondary);
-    border-color: var(--border);
-  }
+    .card {
+        background-color: var(--bg-secondary);
+        border-color: var(--border);
+    }
 
-  .btn-primary {
-    background-color: var(--accent);
-    color: var(--bg-primary);
-  }
+    .btn-primary {
+        background-color: var(--accent);
+        color: var(--bg-primary);
+    }
 
-  .btn-primary:hover {
-    opacity: 0.8;
-  }
+    .btn-primary:hover {
+        opacity: 0.8;
+    }
 }
 
 @layer components {
-  .loading-spinner {
-    display: inline-block;
-    width: 40px;
-    height: 40px;
-    border: 4px solid var(--border);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
+    .loading-spinner {
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        border: 4px solid var(--border);
+        border-top-color: var(--accent);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
 
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
 
-  .status-pending { background-color: #f59e0b; color: white; }
-  .status-processing { background-color: #3b82f6; color: white; }
-  .status-completed { background-color: #10b981; color: white; }
-  .status-failed { background-color: #ef4444; color: white; }
+    .status-pending {
+        background-color: #f59e0b;
+        color: white;
+    }
+    .status-processing {
+        background-color: #3b82f6;
+        color: white;
+    }
+    .status-completed {
+        background-color: #10b981;
+        color: white;
+    }
+    .status-failed {
+        background-color: #ef4444;
+        color: white;
+    }
 
-  .priority-1 { background-color: #ef4444; color: white; }
-  .priority-2 { background-color: #f97316; color: white; }
-  .priority-3 { background-color: #f59e0b; color: white; }
-  .priority-5 { background-color: #10b981; color: white; }
-  .priority-7 { background-color: #6b7280; color: white; }
-  .priority-10 { background-color: #9ca3af; color: white; }
+    .priority-1 {
+        background-color: #ef4444;
+        color: white;
+    }
+    .priority-2 {
+        background-color: #f97316;
+        color: white;
+    }
+    .priority-3 {
+        background-color: #f59e0b;
+        color: white;
+    }
+    .priority-5 {
+        background-color: #10b981;
+        color: white;
+    }
+    .priority-7 {
+        background-color: #6b7280;
+        color: white;
+    }
+    .priority-10 {
+        background-color: #9ca3af;
+        color: white;
+    }
 
-  /* Override highlight.js hardcoded colors for code blocks */
-  .prose pre code.hljs {
-    background-color: transparent !important;
-  }
+    /* Override highlight.js hardcoded colors for code blocks */
+    .prose pre code.hljs {
+        background-color: transparent !important;
+    }
 
-  .prose code.hljs {
-    background-color: #1a1b26 !important;
-    padding: 0.2em 0.4em;
-  }
+    .prose code.hljs {
+        background-color: #1a1b26 !important;
+        padding: 0.2em 0.4em;
+    }
 
-  .prose pre {
-    background-color: #16161e !important;
-  }
+    .prose pre {
+        background-color: #16161e !important;
+    }
 
-  .prose .hljs {
-    background-color: transparent !important;
-    color: #c0caf5 !important;
-  }
+    .prose .hljs {
+        background-color: transparent !important;
+        color: #c0caf5 !important;
+    }
 
-  /* Active/inactive states for theme and wood paneling buttons */
-  .bg-theme-active,
-  .bg-wood-active {
-    background-color: var(--bg-primary) !important;
-  }
+    /* Active/inactive states for theme and wood paneling buttons */
+    .bg-theme-active,
+    .bg-wood-active {
+        background-color: var(--bg-primary) !important;
+    }
 
-  .bg-theme-inactive,
-  .bg-wood-inactive {
-    background-color: var(--bg-secondary) !important;
-  }
+    .bg-theme-inactive,
+    .bg-wood-inactive {
+        background-color: var(--bg-secondary) !important;
+    }
 
-  /* Smart text colors for wood paneling backgrounds */
-  /* Wood Light - needs dark text for contrast */
-  #collections-container[data-wood="wood-light"] {
-      --wood-text-primary: #1a1a1a;
-      --wood-text-secondary: #4a4a4a;
-      --wood-border: #2a2a2a;
-  }
+    /* Smart text colors for wood paneling backgrounds */
+    /* Wood Light - needs dark text for contrast */
+    #collections-container[data-wood="wood-light"] {
+        --wood-text-primary: #1a1a1a;
+        --wood-text-secondary: #4a4a4a;
+        --wood-border: #2a2a2a;
+    }
 
-  /* Wood Dark - needs light text */
-  #collections-container[data-wood="wood-dark"] {
-      --wood-text-primary: #f5f5f5;
-      --wood-text-secondary: #c0c0c0;
-      --wood-border: #5c3317;
-  }
+    /* Wood Dark - needs light text */
+    #collections-container[data-wood="wood-dark"] {
+        --wood-text-primary: #f5f5f5;
+        --wood-text-secondary: #c0c0c0;
+        --wood-border: #5c3317;
+    }
 
-  /* Wood Mahogany - needs light text (darkest background) */
-  #collections-container[data-wood="wood-mahogany"] {
-      --wood-text-primary: #f5f5f5;
-      --wood-text-secondary: #c0c0c0;
-      --wood-border: #5c3317;
-  }
+    /* Wood Mahogany - needs light text (darkest background) */
+    #collections-container[data-wood="wood-mahogany"] {
+        --wood-text-primary: #f5f5f5;
+        --wood-text-secondary: #c0c0c0;
+        --wood-border: #5c3317;
+    }
 
-  /* Apply wood-specific text colors to all text within collections container */
-  #collections-container[data-wood] h1,
-  #collections-container[data-wood] h2,
-  #collections-container[data-wood] h3,
-  #collections-container[data-wood] p,
-  #collections-container[data-wood] span,
-  #collections-container[data-wood] a,
-  #collections-container[data-wood] button {
-      color: var(--wood-text-primary) !important;
-  }
+    /* Apply wood-specific text colors to all text within collections container */
+    #collections-container[data-wood] h1,
+    #collections-container[data-wood] h2,
+    #collections-container[data-wood] h3,
+    #collections-container[data-wood] p,
+    #collections-container[data-wood] span,
+    #collections-container[data-wood] a,
+    #collections-container[data-wood] button {
+        color: var(--wood-text-primary) !important;
+    }
 
-  #collections-container[data-wood] .text-sm,
-  #collections-container[data-wood] .text-secondary,
-  #collections-container[data-wood] p.text-sm {
-      color: var(--wood-text-secondary) !important;
-  }
+    #collections-container[data-wood] .text-secondary {
+        color: var(--wood-text-secondary) !important;
+    }
 
-  /* Links on wood-light need darker color for visibility */
-  #collections-container[data-wood="wood-light"] a {
-      color: #0066cc !important;
-  }
-  /* Links on dark woods use lighter color */
-  #collections-container[data-wood="wood-dark"] a,
-  #collections-container[data-wood="wood-mahogany"] a {
-      color: #66ccff !important;
-  }
+    /* Links on wood-light need darker color for visibility */
+    #collections-container[data-wood="wood-light"] a {
+        color: #0066cc !important;
+    }
+    /* Links on dark woods use lighter color */
+    #collections-container[data-wood="wood-dark"] a,
+    #collections-container[data-wood="wood-mahogany"] a {
+        color: #66ccff !important;
+    }
 
     /* Wood Light - use darker gradient */
-  #collections-container[data-wood="wood-light"] .carousel-nav-left {
-      background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
-  }
-  #collections-container[data-wood="wood-light"] .carousel-nav-right {
-      background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
-  }
-  /* Wood Dark/Mahogany - use subtle white/transparent gradient */
-  #collections-container[data-wood="wood-dark"] .carousel-nav-left,
-  #collections-container[data-wood="wood-mahogany"] .carousel-nav-left {
-      background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
-  }
-  #collections-container[data-wood="wood-dark"] .carousel-nav-right,
-  #collections-container[data-wood="wood-mahogany"] .carousel-nav-right {
-      background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
-  }
+    #collections-container[data-wood="wood-light"] .carousel-nav-left {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
+    }
+    #collections-container[data-wood="wood-light"] .carousel-nav-right {
+        background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
+    }
+    /* Wood Dark/Mahogany - use subtle white/transparent gradient */
+    #collections-container[data-wood="wood-dark"] .carousel-nav-left,
+    #collections-container[data-wood="wood-mahogany"] .carousel-nav-left {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
+    }
+    #collections-container[data-wood="wood-dark"] .carousel-nav-right,
+    #collections-container[data-wood="wood-mahogany"] .carousel-nav-right {
+        background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
+    }
 
-  /* Add subtle borders to book cards on wood backgrounds */
-  #collections-container[data-wood] .book-card {
-      border: 1px solid var(--wood-border);
-  }
-}
\ No newline at end of file
+    /* Add subtle borders to book cards on wood backgrounds */
+    #collections-container[data-wood] .book-card {
+        border: 1px solid var(--wood-border);
+    }
+}