From f5dade15511608e0bd5e3c8f9471713b5188f176 Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Sun, 26 Apr 2026 00:47:34 +0200
Subject: [PATCH] refactor(ui): css: use of variables colors only

---
 static/css/base/variables.css     |  1 +
 static/css/views/admin.css        | 16 ++++++++--------
 static/css/views/music.css        | 17 ++++++++---------
 static/css/views/share-public.css |  2 +-
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/static/css/base/variables.css b/static/css/base/variables.css
index e635079f..60b8921a 100644
--- a/static/css/base/variables.css
+++ b/static/css/base/variables.css
@@ -424,4 +424,5 @@
 
     --color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --color-music-background: var(--color-bg-surface);
+    --color-music-public-bg: rgba(74, 144, 217, 0.12);
 }
diff --git a/static/css/views/admin.css b/static/css/views/admin.css
index ab80f61f..ad2b42d4 100644
--- a/static/css/views/admin.css
+++ b/static/css/views/admin.css
@@ -1003,7 +1003,7 @@ details[open] summary {
 }
 .storage-backend-option input[type="radio"]:checked + .storage-backend-option__card {
     border-color: var(--color-accent);
-    background: var(--color-accent-subtle);
+    background: var(--color-bg-subtle);
 }
 .storage-backend-option input[type="radio"]:checked + .storage-backend-option__card i {
     color: var(--color-accent);
@@ -1058,20 +1058,20 @@ details[open] summary {
     color: var(--color-text-secondary);
 }
 .badge-migration--running {
-    background: var(--color-accent-subtle);
+    background: var(--color-bg-subtle);
     color: var(--color-accent);
 }
 .badge-migration--paused {
-    background: var(--color-warning-bg, #fff8e1);
-    color: var(--color-warning-text, #b28704);
+    background: var(--color-warning-bg);
+    color: var(--color-warning-text);
 }
 .badge-migration--completed {
-    background: var(--color-success-bg, #e8f5e9);
-    color: var(--color-success-text, #2e7d32);
+    background: var(--color-success-bg);
+    color: var(--color-success-text);
 }
 .badge-migration--failed {
-    background: var(--color-danger-bg, #fce4ec);
-    color: var(--color-danger-text, #c62828);
+    background: var(--color-danger-bg);
+    color: var(--color-danger-text);
 }
 
 .migration-progress-bar {
diff --git a/static/css/views/music.css b/static/css/views/music.css
index 5a1f0f36..6356da24 100644
--- a/static/css/views/music.css
+++ b/static/css/views/music.css
@@ -28,7 +28,7 @@
     align-items: center;
     justify-content: center;
     margin-bottom: 24px;
-    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
+    box-shadow: 0 8px 32px var(--color-shadow-2xl);
 }
 
 .music-empty-state-icon i {
@@ -230,7 +230,7 @@
     justify-content: center;
     color: var(--color-danger-text);
     font-size: 48px;
-    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 24px var(--color-shadow-3xl);
 }
 
 .music-playlist-info {
@@ -1024,7 +1024,7 @@
 }
 .music-track-remove-btn:hover {
     color: var(--color-danger-text);
-    background: rgba(231, 76, 60, 0.08);
+    background: var(--color-danger-bg);
 }
 
 /* ========== Cover art ========== */
@@ -1063,7 +1063,7 @@
     gap: 4px;
     padding: 2px 8px;
     font-size: 0.72rem;
-    background: rgba(74, 144, 217, 0.12);
+    background: var(--color-music-public-bg);
     color: var(--color-text);
     border-radius: 12px;
     margin-top: 4px;
@@ -1073,7 +1073,7 @@
 }
 #music-toggle-public-btn.active {
     color: var(--color-text);
-    background: rgba(74, 144, 217, 0.1);
+    background: var(--color-item-active);
 }
 
 /* ========== Shares management dialog ========== */
@@ -1290,8 +1290,7 @@
     outline: none;
 }
 .music-picker-search input:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
+    border-color: var(--color-accent);
 }
 
 /* ── file list ── */
@@ -1323,10 +1322,10 @@
     color: var(--color-text);
 }
 .music-picker-item:hover {
-    background: var(--color-bg-hover);
+    background: var(--color-item-hover);
 }
 .music-picker-item.selected {
-    background: rgba(102, 126, 234, 0.08);
+    background: var(--color-item-selected);
 }
 
 .music-picker-item input[type="checkbox"] {
diff --git a/static/css/views/share-public.css b/static/css/views/share-public.css
index e6757abd..2d5d4d05 100644
--- a/static/css/views/share-public.css
+++ b/static/css/views/share-public.css
@@ -108,7 +108,7 @@ FIXME: use components/buttons.css ?
     width: 100%;
     padding: 0.75rem 1.5rem;
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-bg-surface);
     border: none;
     border-radius: 8px;
     font-size: 0.95rem;