refactor(css): use variable rather direct color

justfile

@@ -55,3 +55,7 @@ front-fmt:
 
 front-lint:
     biome lint static/
+
+# check CSS rules
+front-rules:
+    stylelint static/css/

static/css/base/forms.css

@@ -56,5 +56,5 @@
 }
 
 .danger:hover {
-    background-color: var(--color-danger-hover);
+    background-color: var(--color-danger-bg-hover);
 }

static/css/base/variables.css

@@ -118,6 +118,9 @@
     --color-overlay-darkest: rgba(0, 0, 0, 0.92);
 
     /* Items */
+    --color-item: var(--color-bg-surface);
+    --color-item-hover: var(--color-bg-hover);
+    --color-item-active: #f8d2ae;
     --color-item-selected: #fff8f6;
     --color-item-hover-accent: #fff0ec;
     --color-item-hover-blue: #f0f8ff;
@@ -418,4 +421,7 @@
     --color-bg-off-white: #fafbfd;
     --color-danger-shadow: rgba(220, 38, 38, 0.2);
     --color-danger-shadow-lg: rgba(220, 38, 38, 0.3);
+
+    --color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --color-music-background: var(--color-bg-surface);
 }

static/css/components/dialogs.css

@@ -501,7 +501,7 @@
 .playlist-track-count {
     margin-left: auto;
     font-size: 12px;
-    color: #718096;
+    color: var( --color-text-muted);
 }
 
 /* Custom confirm dialog */

static/css/components/filesView.css

@@ -36,7 +36,7 @@
 }
 
 .file-item {
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-item);
 }
 
 .file-item.selected {
@@ -44,7 +44,7 @@
 }
 
 .file-item:hover {
-    background-color: var(--color-bg-hover);
+    background-color: var(--color-item-hover);
     border-color: var(--color-border-medium);
 }
 
@@ -101,7 +101,7 @@
     width: 100%;
     border-radius: 10px;
     overflow: hidden;
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-item);
     box-shadow: 0 1px 3px var(--color-shadow-xs);
 }
 
@@ -269,7 +269,7 @@
     width: 22px;
     height: 22px;
     border-radius: 6px;
-    background: var(--color-bg-surface);
+    background: var(--color-item);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -426,7 +426,7 @@
     grid-template-columns: var(--dragged-files-list-columns);
     column-gap: 12px;
     align-items: center;
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-item);
     display: flex;
     padding: 4px;
     width: 360px;
@@ -447,8 +447,8 @@
 }
 
 .dragged-items div.fading {
-    -webkit-mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
+    -webkit-mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
-    mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
+    mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
 }
 
 .dragged-items-badge {

static/css/themes/dark.css

@@ -79,8 +79,9 @@
     --color-sidebar-bg-to: #0c1322;
 
     /* Items */
-    --color-item-selected: #1a1520;
+    --color-item-active: #5a5047;
-    --color-item-hover-accent: #21262d;
+    --color-item-selected: #39281a;
+    --color-item-hover-accent: #3d342c;
 
     /* Primary */
     /* TODO: rename into primary-blue ? */

static/css/views/share-public.css

@@ -94,12 +94,15 @@ p.subtitle {
     border-color: var(--color-primary);
 }
 .error-text {
-    color: var(--color-error, #e53935);
+    color: var(--color-error-text);
     font-size: 0.85rem;
     margin-bottom: 0.75rem;
 }
 
-/* Primary button */
+/* Primary button
+FIXME: use components/buttons.css ?
+*/
+
 .btn-primary {
     display: inline-block;
     width: 100%;