Add component-specific CSS variables for tray app styling

Author: jmylchreest

.github/workflows/docs.yml

@@ -10,17 +10,12 @@ on:
     paths:
       - "docs/**"
       - ".github/workflows/docs.yml"
-  workflow_run:
-    workflows: ["Test", "Release"]
-    types:
-      - completed
   workflow_dispatch:
 
 jobs:
   deploy:
     name: Deploy Documentation
     runs-on: ubuntu-latest
-    if: ${{ github.event_name != 'workflow_run' || github.event.workflow_run.conclusion == 'success' }}
     container:
       image: squidfunk/mkdocs-material:latest
     permissions:

contrib/keylightd-tray/frontend/src/style.css

@@ -11,6 +11,12 @@
     --error: #f38ba8;
     --surface: #181825;
     --overlay: #11111b;
+
+    /* Component-specific colors (customizable) */
+    --slider-track: var(--bg-tertiary);
+    --input-bg: var(--surface);
+    --input-border: var(--bg-tertiary);
+    --list-item-bg: var(--surface);
 }
 
 * {
@@ -228,7 +234,7 @@ body {
     appearance: none;
     height: 4px;
     border-radius: 2px;
-    background: var(--bg-tertiary);
+    background: var(--slider-track);
     outline: none;
 }
 
@@ -432,9 +438,9 @@ body {
 .setting-row input[type="password"] {
     flex: 1;
     padding: 6px 10px;
-    border: 1px solid var(--bg-tertiary);
+    border: 1px solid var(--input-border);
     border-radius: 4px;
-    background-color: var(--surface);
+    background-color: var(--input-bg);
     color: var(--text-primary);
     font-size: 12px;
 }
@@ -586,7 +592,7 @@ body {
 }
 
 .group-item {
-    background-color: var(--surface);
+    background-color: var(--list-item-bg);
     border-radius: 6px;
     padding: 10px;
 }

docs/docs/tray-app.md

@@ -116,6 +116,12 @@ Override with `-css` flag.
     /* Surface colors */
     --surface: #181825;
     --overlay: #11111b;
+    
+    /* Component-specific colors */
+    --slider-track: var(--bg-tertiary);
+    --input-bg: var(--surface);
+    --input-border: var(--bg-tertiary);
+    --list-item-bg: var(--surface);
 }
 ```