From 84a302ce245930ea94cce56bc332967c58834101 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 6 Jun 2026 21:24:19 -0400
Subject: [PATCH] feature: Palette Enhancements

---
 DeepDrftPublic.Client/Controls/PlayStateIcon.razor       | 3 ++-
 DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css   | 7 +++++++
 DeepDrftPublic.Client/Pages/TrackDetail.razor            | 6 ++----
 DeepDrftShared.Client/Common/DeepDrftPalettes.cs         | 2 +-
 DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css

diff --git a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor
index dd720ac..30d5bfa 100644
--- a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor
+++ b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor
@@ -16,5 +16,6 @@ else
                    Color="Color"
                    Size="Size"
                    Disabled="@Disabled"
-                   OnClick="@OnToggle" />
+                   OnClick="@OnToggle"
+                   Class="xxxx"/>
 }
diff --git a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
new file mode 100644
index 0000000..64e8c42
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
@@ -0,0 +1,7 @@
+::deep .xxxx {
+    background-color: var(--deepdrft-muted)
+}
+
+::deep .xxxx:hover {
+    background-color: color-mix(var(--deepdrft-muted), var(--deepdrft-navy));
+}
\ No newline at end of file
diff --git a/DeepDrftPublic.Client/Pages/TrackDetail.razor b/DeepDrftPublic.Client/Pages/TrackDetail.razor
index 03b274f..c997b6f 100644
--- a/DeepDrftPublic.Client/Pages/TrackDetail.razor
+++ b/DeepDrftPublic.Client/Pages/TrackDetail.razor
@@ -1,4 +1,5 @@
 @page "/track/{EntryKey}"
+@using DeepDrftPublic.Client.Controls
 
 <PageTitle>@(ViewModel.Track?.TrackName ?? "Track") - DeepDrft</PageTitle>
 
@@ -57,10 +58,7 @@ else if (ViewModel.Track is not null)
             </div>
             
             <div>
-                <MudIconButton Icon="@(isThisTrackPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
-                               Color="Color.Tertiary"
-                               Size="Size.Large"
-                               OnClick="PlayTrack" />
+                <PlayStateIcon Size="Size.Large" Color="Color.Secondary" OnToggle="@PlayTrack"/>
             </div>
         </MudStack>
 
diff --git a/DeepDrftShared.Client/Common/DeepDrftPalettes.cs b/DeepDrftShared.Client/Common/DeepDrftPalettes.cs
index 5133530..bbc9f5e 100644
--- a/DeepDrftShared.Client/Common/DeepDrftPalettes.cs
+++ b/DeepDrftShared.Client/Common/DeepDrftPalettes.cs
@@ -23,7 +23,7 @@ public static class DeepDrftPalettes
         Primary = "#17283f",                              // Navy-mid - text, buttons
         PrimaryDarken = "#112338",                        // Navy - hover, pressed
         Secondary = "#3D7A68",                            // Green-accent - secondary actions, emphasis
-        Tertiary = "#3aa163",                             // Green-interactive - primary interactive accent
+        Tertiary = "#429d6a",                             // Green-interactive - primary interactive accent
         Background = "#FAFAF8",                           // Warm off-white
         BackgroundGray = "#F0F2F0",                       // Slight warm gray for contrast
         Surface = "#FAFAF8",
diff --git a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
index b5c8a35..7928f63 100644
--- a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
+++ b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
@@ -11,7 +11,7 @@
     --deepdrft-green: #1A3C34;
     --deepdrft-green-light: #2A5C4F;
     --deepdrft-green-accent: #3D7A68;
-    --deepdrft-green-interactive: #3aa163;
+    --deepdrft-green-interactive: #429d6a;
     --deepdrft-muted: #8A9BB0;
     --deepdrft-white: #FAFAF8;
     --deepdrft-border: rgba(13, 27, 42, 0.10);