feature: Palette Enhancements

DeepDrftPublic.Client/Controls/PlayStateIcon.razor

@@ -16,5 +16,6 @@ else
                    Color="Color"
                    Size="Size"
                    Disabled="@Disabled"
-                   OnClick="@OnToggle" />
+                   OnClick="@OnToggle"
+                   Class="xxxx"/>
 }

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));
+}

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>
 

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",

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);