k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-18 21:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(dashboard): accent follows the user's theme instead of a fixed orange (#1081)

Browse Source 
The .trek-dash scope (dashboard, collections, vacay, atlas) hardcoded an orange
accent, ignoring the appearance theme. Drop the override so --accent inherits the
theme tokens (index.css): monochrome black/white by default, coloured per
data-scheme / custom accent. --accent-ink/-soft now map onto --accent-on/-subtle,
and accent-filled elements use --accent-text for legible text on any scheme.
Category colours are set explicitly per element and stay untouched.
This commit is contained in:
Maurice
2026-07-01 15:17:01 +02:00
committed by Maurice
parent 6be8a67c82
commit 56fee19d64
2 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/styles/collections.css
+8 -8
View File
@@ -40,7 +40,7 @@
}
.trek-dash .col-rail-label .badge {
margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0;
display: grid; place-items: center; background: var(--accent); color: var(--accent-text); font-size: 10px; letter-spacing: 0;
}
.trek-dash .col-rail-sep { height: 1px; background: var(--line); margin: 8px 6px; }
@@ -85,7 +85,7 @@
.trek-dash .col-invite .s { font-size: 11px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trek-dash .col-invite-actions { display: flex; gap: 7px; margin-top: 9px; }
.trek-dash .col-invite-actions button { flex: 1; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600; transition: background .12s, opacity .12s; }
.trek-dash .col-invite-accept { background: var(--accent); color: #fff; }
.trek-dash .col-invite-accept { background: var(--accent); color: var(--accent-text); }
.trek-dash .col-invite-accept:hover { opacity: .9; }
.trek-dash .col-invite-decline { border: 1px solid var(--line-2); color: var(--ink-2); }
.trek-dash .col-invite-decline:hover { background: var(--surface); }
@@ -198,7 +198,7 @@
border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); transition: background .12s, color .12s, border-color .12s;
}
.trek-dash .col-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.trek-dash .col-iconbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.trek-dash .col-iconbtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.trek-dash .col-viewseg { display: flex; padding: 3px; border-radius: var(--r-sm); background: oklch(0.94 0.008 70); }
.dark .trek-dash .col-viewseg { background: var(--bg-2); }
.trek-dash .col-viewseg button { width: 34px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); transition: background .12s, color .12s; }
@@ -232,7 +232,7 @@
transition: transform .12s, background .15s, color .15s;
}
.trek-dash .col-map-btn:hover { transform: translateY(-1px); background: var(--surface); }
.trek-dash .col-map-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.trek-dash .col-map-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.trek-dash .col-map-btn:disabled { opacity: .45; cursor: default; transform: none; }
.trek-dash .col-map-search {
display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; color: var(--ink-3);
@@ -274,8 +274,8 @@
.trek-dash .col-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.trek-dash .col-filter { position: relative; }
.trek-dash .col-filter-select { margin-left: auto; }
.trek-dash .col-filter-select.open { background: var(--accent); border-color: var(--accent); color: #fff; }
.trek-dash .col-filter-select.open:hover { background: var(--accent); color: #fff; }
.trek-dash .col-filter-select.open { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.trek-dash .col-filter-select.open:hover { background: var(--accent); color: var(--accent-text); }
.trek-dash .col-filter-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); transition: background .12s, border-color .12s, color .12s; }
.trek-dash .col-filter-btn:hover { background: var(--surface-2); color: var(--ink); }
.trek-dash .col-filter-btn.open { border-color: var(--accent); color: var(--ink); }
@@ -292,7 +292,7 @@
.trek-dash .col-filter-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.trek-dash .col-filter-dot.ghost { background: var(--line-2); }
.trek-dash .col-lcheck { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: transparent; flex-shrink: 0; }
.trek-dash .col-lcheck.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.trek-dash .col-lcheck.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* map view fills the body */
.trek-dash .col-mapwrap {
@@ -399,7 +399,7 @@
.trek-dash .col-detail-footer-spacer { flex: 1 1 auto; }
.trek-dash .col-detail-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); transition: background .12s, color .12s; }
.trek-dash .col-detail-btn:hover { background: var(--surface); color: var(--ink); }
.trek-dash .col-detail-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.trek-dash .col-detail-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.trek-dash .col-detail-btn.danger { color: oklch(0.6 0.2 25); border-color: transparent; background: transparent; }
.trek-dash .col-detail-btn.danger:hover { background: oklch(0.6 0.2 25 / .12); }
client/src/styles/dashboard.css
+10 -7
View File
@@ -18,9 +18,12 @@
--ink-3: oklch(0.62 0.01 65);
--line: oklch(0.92 0.008 70);
--line-2: oklch(0.88 0.01 70);
--accent: oklch(0.66 0.17 38);
--accent-ink: oklch(0.32 0.13 38);
--accent-soft: oklch(0.95 0.04 50);
/* Accent follows the user's theme (index.css --accent*): monochrome black/white
by default, coloured per data-scheme / custom accent. --accent itself is
inherited from the theme; the ink/soft aliases map onto the theme tokens.
Category colours are set explicitly per element and are unaffected. */
--accent-ink: var(--accent-on, var(--accent));
--accent-soft: var(--accent-subtle, color-mix(in oklch, var(--accent) 12%, transparent));
--success: oklch(0.58 0.12 155);
--warn: oklch(0.74 0.14 75);
@@ -52,7 +55,7 @@
--glass-blur: blur(22px) saturate(1.7);
}
/* dark variant — same geometry, dark surfaces, accent kept */
/* dark variant — same geometry, dark surfaces, theme-driven accent */
.dark .trek-dash {
--bg: oklch(0.17 0 0);
--bg-2: oklch(0.21 0 0);
@@ -63,9 +66,9 @@
--ink-3: oklch(0.6 0 0);
--line: oklch(0.32 0 0);
--line-2: oklch(0.38 0 0);
--accent: oklch(0.7 0.16 40);
--accent-ink: oklch(0.82 0.13 50);
--accent-soft: oklch(0.32 0.07 45);
/* Dark: same theme-driven accent (inherited --accent + mapped aliases). */
--accent-ink: var(--accent-on, var(--accent));
--accent-soft: var(--accent-subtle, color-mix(in oklch, var(--accent) 22%, transparent));
--success: oklch(0.7 0.13 155);
--warn: oklch(0.78 0.14 75);