itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): WCAG contrast audit for middle-earth

Browse Source 
- Lift --warning (#c88a10 → #805408) from 2.42:1 to 5.38:1 on bg-card;
  deeper tanner's gold in line with Rohan sun motifs
- Strengthen --border (rgba 0.38 → 0.85 alpha, umber) from 2.64:1 to 3.79:1
  for the 3:1 UI-component threshold
- Raise --text-muted (#6a5230 → #5a4428) to reach AA on card/surface1
- Component overrides on dark sidebar (#241a0e): .connection-type/-server
  (1.95 → 5.52), .nav-section-label, .lyrics-line/-status,
  .queue-item-duration, .queue-divider span, .player-time
- Darken --text-muted override inside parchment .glass panel (3.89 → 7.37)

Warm bronze/brass/aged-oak palette preserved — no cold tones introduced.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-18 12:02:14 +02:00
parent f8bc39036a
commit f60dabbd31
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/theme.css
+12 -12
View File
@@ -6622,11 +6622,11 @@ input[type="range"]:hover::-webkit-slider-thumb {
--volume-accent: #d4a820; --volume-accent: #d4a820;
--text-primary: #1e1408; --text-primary: #1e1408;
--text-secondary: #3e2c1a; --text-secondary: #3e2c1a;
--text-muted: #6a5230; --text-muted: #5a4428;
--border: rgba(180, 140, 50, 0.38); --border: rgba(122, 92, 24, 0.85);
--border-subtle: rgba(180, 140, 50, 0.18); --border-subtle: rgba(180, 140, 50, 0.18);
--positive: #4a7038; --positive: #4a7038;
--warning: #c88a10; --warning: #805408;
--danger: #8a2820; --danger: #8a2820;
--radius-sm: 4px; --radius-sm: 4px;
--radius-md: 8px; --radius-md: 8px;
@@ -6694,7 +6694,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
} }
[data-theme='middle-earth'] .nav-section-label { [data-theme='middle-earth'] .nav-section-label {
color: #6a5030; color: #b88a50;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.14em; letter-spacing: 0.14em;
font-size: 0.67em; font-size: 0.67em;
@@ -6730,7 +6730,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
} }
[data-theme='middle-earth'] .player-time { [data-theme='middle-earth'] .player-time {
color: #7a5c30; color: #a88048;
} }
/* ── Transport buttons: Mithril-crafted, hearthlit ── */ /* ── Transport buttons: Mithril-crafted, hearthlit ── */
@@ -6882,10 +6882,10 @@ input[type="range"]:hover::-webkit-slider-thumb {
pointer-events: none; pointer-events: none;
} }
/* Connection indicators */ /* Connection indicators — sidebar is dark, need light text */
[data-theme='middle-earth'] .connection-type, [data-theme='middle-earth'] .connection-type,
[data-theme='middle-earth'] .connection-server { [data-theme='middle-earth'] .connection-server {
color: #5a4828; color: #b88a50;
} }
/* ── Theme accordion: old book binding ── */ /* ── Theme accordion: old book binding ── */
@@ -6973,7 +6973,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
} }
[data-theme='middle-earth'] .glass [style*="var(--text-muted)"] { [data-theme='middle-earth'] .glass [style*="var(--text-muted)"] {
color: #8a7250 !important; color: #5e4828 !important;
} }
/* ── Hover / selection: candlelight — warm gold glow ── */ /* ── Hover / selection: candlelight — warm gold glow ── */
@@ -7088,7 +7088,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
} }
[data-theme='middle-earth'] .queue-item-duration { [data-theme='middle-earth'] .queue-item-duration {
color: #8a6838; color: #b08858;
} }
[data-theme='middle-earth'] .queue-tab-btn { [data-theme='middle-earth'] .queue-tab-btn {
@@ -7106,7 +7106,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
} }
[data-theme='middle-earth'] .lyrics-line { [data-theme='middle-earth'] .lyrics-line {
color: #8a6840; color: #b08858;
} }
[data-theme='middle-earth'] .lyrics-line.active { [data-theme='middle-earth'] .lyrics-line.active {
@@ -7119,12 +7119,12 @@ input[type="range"]:hover::-webkit-slider-thumb {
} }
[data-theme='middle-earth'] .lyrics-status { [data-theme='middle-earth'] .lyrics-status {
color: #7a5a30; color: #a88048;
} }
/* Queue: "Nächste Titel" divider label */ /* Queue: "Nächste Titel" divider label */
[data-theme='middle-earth'] .queue-divider span { [data-theme='middle-earth'] .queue-divider span {
color: #a07840 !important; color: #b8905a !important;
} }
/* Queue: artist text visible on hover for inactive items */ /* Queue: artist text visible on hover for inactive items */