From 0c99921e81db6a3f0e2fe10be979c3098df229ef Mon Sep 17 00:00:00 2001
From: rucolastico <diegoricomartell@gmail.com>
Date: Tue, 6 Oct 2026 22:01:10 -0600
Subject: [PATCH] fix(ui): improve Solarized contrast and table row hover

Address review feedback on the Solarized themes:

- Use text-specific shades for links and the login system name, keeping
  them above 4.5:1 on table surfaces and hover rows (darkened blue on
  Light, lightened cyan on Dark). Canonical blue stays for controls.
- Darken the Light theme's violet accent, which is also used as text
  (album artist), to keep it above 4.5:1.
- Give secondary buttons readable text: base3 on violet (Light) and
  base03 on cyan (Dark), instead of the body text color.
- Apply the row hover color to table cells, whose opaque background was
  hiding the row hover.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: rucolastico <diegoricomartell@gmail.com>
---
 ui/src/themes/solarizedDark.js  | 10 +++++++---
 ui/src/themes/solarizedLight.js | 12 ++++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/src/themes/solarizedDark.js b/ui/src/themes/solarizedDark.js
index 7690c266d..ef703e75c 100644
--- a/ui/src/themes/solarizedDark.js
+++ b/ui/src/themes/solarizedDark.js
@@ -7,7 +7,7 @@ const currentLine = '#0d4251' // base02, slightly lighter for hover and headers
 const foreground = '#93a1a1' // base1
 const comment = '#839496' // base0
 const blue = '#268bd2'
-const link = '#2aa198' // cyan
+const link = '#57b5ae' // cyan, lightened to keep text links above 4.5:1
 const accent = '#2aa198' // cyan, since violet is too dark on base03
 const red = '#dc322f'
 
@@ -62,7 +62,7 @@ export default {
     },
     secondary: {
       main: accent,
-      contrastText: foreground,
+      contrastText: background,
     },
     error: {
       main: red,
@@ -163,6 +163,10 @@ export default {
         '&:hover': {
           backgroundColor: `${currentLine} !important`,
         },
+        // Cells have an opaque background, so the hover must be applied to them too
+        '&:hover > .MuiTableCell-root': {
+          background: `${currentLine} !important`,
+        },
       },
     },
     MuiTableHead: {
@@ -282,7 +286,7 @@ export default {
     },
     NDLogin: {
       systemNameLink: {
-        color: blue,
+        color: link,
       },
       welcome: {
         color: foreground,
diff --git a/ui/src/themes/solarizedLight.js b/ui/src/themes/solarizedLight.js
index 253d7d68f..a2a906b54 100644
--- a/ui/src/themes/solarizedLight.js
+++ b/ui/src/themes/solarizedLight.js
@@ -7,8 +7,8 @@ const currentLine = '#e4ddc6' // base2, slightly darker for hover and headers
 const foreground = '#586e75' // base01
 const comment = '#657b83' // base00
 const blue = '#268bd2'
-const link = '#268bd2' // blue
-const accent = '#6c71c4' // violet
+const link = '#1c6599' // blue, darkened to keep text links above 4.5:1
+const accent = '#5d61a9' // violet, darkened to keep text above 4.5:1
 const red = '#dc322f'
 
 // For Album, Playlist play button
@@ -62,7 +62,7 @@ export default {
     },
     secondary: {
       main: accent,
-      contrastText: foreground,
+      contrastText: surface,
     },
     error: {
       main: red,
@@ -163,6 +163,10 @@ export default {
         '&:hover': {
           backgroundColor: `${currentLine} !important`,
         },
+        // Cells have an opaque background, so the hover must be applied to them too
+        '&:hover > .MuiTableCell-root': {
+          background: `${currentLine} !important`,
+        },
       },
     },
     MuiTableHead: {
@@ -282,7 +286,7 @@ export default {
     },
     NDLogin: {
       systemNameLink: {
-        color: blue,
+        color: link,
       },
       welcome: {
         color: foreground,