From b22b57069d42ddffb0c5f1ba79d072af39a06686 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 5 Jun 2026 15:18:56 -0400
Subject: [PATCH] =?UTF-8?q?style(track-card):=20glass=20theming=20?=
 =?UTF-8?q?=E2=80=94=20remove=20MudBlazor=20color=20overrides,=20add=20the?=
 =?UTF-8?q?me-scoped=20CSS=20for=20title/artist/meta=20hierarchy=20and=20n?=
 =?UTF-8?q?avy-glass=20fallback=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wwwroot/styles/deepdrft-styles.css        | 41 +++++++++++++++++++
 .../Components/TrackCard.razor                | 15 +++----
 2 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index f980e5d..e84237a 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -219,6 +219,11 @@ body, p, span, div,
     overflow: hidden;
 }
 
+/* Dark: glass edge to match NowPlayingCard vocabulary */
+.deepdrft-theme-dark .deepdrft-track-card-container {
+    border: 1px solid rgba(250, 250, 248, 0.12);
+}
+
 .deepdrft-track-card-bg {
     position: absolute;
     top: 0;
@@ -240,6 +245,15 @@ body, p, span, div,
     padding: 16px;
 }
 
+/* Scrim behind text — guarantees legibility over album art and fallback glass */
+.deepdrft-theme-dark .deepdrft-track-card-content {
+    background: linear-gradient(to top,
+        rgba(13, 27, 42, 0.75) 0%,
+        rgba(13, 27, 42, 0.35) 45%,
+        rgba(13, 27, 42, 0.00) 100%);
+}
+
+/* Fallback panel — layout (theme-agnostic) */
 .deepdrft-track-card-fallback {
     position: absolute;
     top: 0;
@@ -248,6 +262,33 @@ body, p, span, div,
     height: 100%;
 }
 
+/* Fallback panel — navy-glass, dark theme only. Mirrors NowPlayingCard's .now-playing glass. */
+.deepdrft-theme-dark .deepdrft-track-card-fallback {
+    background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent);
+    border: 1px solid rgba(250, 250, 248, 0.12);
+    backdrop-filter: blur(8px);
+}
+
+/* Fallback panel — light theme: subtle navy tint on off-white */
+.deepdrft-theme-light .deepdrft-track-card-fallback {
+    background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
+    border: 1px solid var(--deepdrft-border);
+}
+
+/* Card text — dark theme (Reading 2: NowPlayingCard hierarchy) */
+/* Title: off-white (NowPlayingCard .np-title) */
+.deepdrft-theme-dark .deepdrft-track-title {
+    color: var(--deepdrft-white);
+}
+/* Artist: moss-green (NowPlayingCard .np-label accent) */
+.deepdrft-theme-dark .deepdrft-track-artist {
+    color: var(--deepdrft-green-accent);
+}
+/* Meta (album, year): muted off-white (NowPlayingCard .np-sub) */
+.deepdrft-theme-dark .deepdrft-track-meta {
+    color: rgba(250, 250, 248, 0.55);
+}
+
 .deepdrft-track-info-middle { margin: 8px 0; }
 
 .deepdrft-track-info-bottom {
diff --git a/DeepDrftShared.Client/Components/TrackCard.razor b/DeepDrftShared.Client/Components/TrackCard.razor
index f86b6f1..d0bffda 100644
--- a/DeepDrftShared.Client/Components/TrackCard.razor
+++ b/DeepDrftShared.Client/Components/TrackCard.razor
@@ -1,5 +1,5 @@
 <MudCard Class="deepdrft-track-card-container"
-         Elevation="4">
+         Elevation="0">
 
     @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
@@ -8,7 +8,7 @@
     }
     else
     {
-        <MudPaper Class="deepdrft-track-card-fallback mud-theme-secondary"
+        <MudPaper Class="deepdrft-track-card-fallback"
                   Elevation="0">
         </MudPaper>
     }
@@ -17,14 +17,12 @@
 
         <div class="deepdrft-track-info-top">
             <MudText Typo="Typo.subtitle1"
-                     Color="Color.Surface"
-                     Class="text-truncate mb-1">
+                     Class="deepdrft-track-title text-truncate mb-1">
                 @TrackModel?.TrackName
             </MudText>
 
             <MudText Typo="Typo.caption"
-                     Color="Color.Surface"
-                     Class="text-truncate mb-2">
+                     Class="deepdrft-track-artist text-truncate mb-2">
                 @TrackModel?.Artist
             </MudText>
         </div>
@@ -33,8 +31,7 @@
             @if (!string.IsNullOrEmpty(TrackModel?.Album))
             {
                 <MudText Typo="Typo.caption"
-                         Color="Color.Surface"
-                         Class="text-truncate">
+                         Class="deepdrft-track-meta text-truncate">
                     @TrackModel.Album
                 </MudText>
             }
@@ -55,7 +52,7 @@
             @if (TrackModel?.ReleaseDate.HasValue == true)
             {
                 <MudText Typo="Typo.caption"
-                         Color="Color.Surface">
+                         Class="deepdrft-track-meta">
                     @TrackModel.ReleaseDate.Value.Year
                 </MudText>
             }