Merge pull request #293 from EdouardVanbelle/refactor/css-color

.github/workflows/ci.yml

@@ -59,8 +59,16 @@ jobs:
         with:
           node-version: 25
 
+      # because we are not using package.json
+      - name: Install Stylelint and plugins
+        run: |
+            npm install --global \
+                stylelint@17 \
+                postcss@8 \
+                stylelint-value-no-unknown-custom-properties@6
+
       - name: Run Stylelint
-        run: npx stylelint "**/*.{css,scss}"
+        run: npx stylelint "static/css/**/*.{css,scss}"
 
   rust-fmt:
     name: Rustfmt

.stylelintrc.json

@@ -1,13 +1,22 @@
 {
+  "files": ["statc/css/**/*.css"],
+  "plugins": [
+    "stylelint-value-no-unknown-custom-properties"
+  ],
   "rules": {
     "color-no-hex": true,
     "color-named": "never",
     "function-disallowed-list": ["rgb", "rgba", "hsl", "hsla", "hwb", "oklch", "oklab"],
-    "selector-disallowed-list": ["/\\[data-theme/"]
+    "selector-disallowed-list": ["/\\[data-theme/"],
+    "csstools/value-no-unknown-custom-properties": [true, {
+      "importFrom": [
+        "static/css/base/variables.css"
+      ]
+    }]
   },
   "overrides": [
     {
-      "files": ["**/variables.css"],
+      "files": ["static/css/base/variables.css"],
       "rules": {
         "color-no-hex": null,
         "color-named": null,
@@ -15,7 +24,7 @@
       }
     },
     {
-      "files": ["**/themes/dark.css"],
+      "files": ["static/css/themes/*"],
       "rules": {
         "color-no-hex": null,
         "color-named": null,

biome.json

@@ -1,48 +1,47 @@
 {
-  "files": {
-    "includes": ["static/**/*.js", "static/**/*.css", "static/**/*.json" ]
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 4,
-    "lineWidth": 160,
-    "lineEnding": "lf"
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "correctness": {
-        "noUnusedVariables": "warn"
-      },
-      "style": {
-        "noDescendingSpecificity": "off"
-      },
-      "complexity": {
-        "noImportantStyles": "off"
-      }
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "indentStyle": "space",
-      "indentWidth": 4,
-      "quoteStyle": "single",
-      "semicolons": "always",
-      "trailingCommas": "none",
-      "bracketSameLine": false,
-      "bracketSpacing": true,
-      "operatorLinebreak": "after"
-
-    }
-  },
-  "css": {
-    "linter": {
-      "enabled": true
+    "files": {
+        "includes": ["static/**/*.js", "static/**/*.css", "static/**/*.json"]
     },
     "formatter": {
-      "enabled": true
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineWidth": 160,
+        "lineEnding": "lf"
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true,
+            "correctness": {
+                "noUnusedVariables": "warn"
+            },
+            "style": {
+                "noDescendingSpecificity": "off"
+            },
+            "complexity": {
+                "noImportantStyles": "off"
+            }
+        }
+    },
+    "javascript": {
+        "formatter": {
+            "indentStyle": "space",
+            "indentWidth": 4,
+            "quoteStyle": "single",
+            "semicolons": "always",
+            "trailingCommas": "none",
+            "bracketSameLine": false,
+            "bracketSpacing": true,
+            "operatorLinebreak": "after"
+        }
+    },
+    "css": {
+        "linter": {
+            "enabled": true
+        },
+        "formatter": {
+            "enabled": true
+        }
     }
-  }
 }

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);
-    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-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-hover-accent: #21262d;
+    --color-item-active: #5a5047;
+    --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%;