m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 2 Packages Projects Releases Wiki Activity

Merge: t-paliad-104 — harmonize light-theme sidebar with cream body

Browse Source
This commit is contained in:
m
2026-05-04 11:51:46 +02:00
parent 1a815979f8 e6369bc4c2
commit 102d0168e9
1 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/styles/global.css
View File

@@ -94,16 +94,22 @@
--tree-icon-case: #92400e;
--tree-icon-project: #166534;
/* Sidebar — dark midnight surface with cream text + lime active.
Built from cream-channel alphas so contrast stays consistent
on the midnight base without spraying rgba() hex around. */
--sidebar-bg: var(--hlc-midnight);
--sidebar-text: var(--hlc-cream);
--sidebar-text-muted: rgb(var(--hlc-cream-rgb) / 0.66);
--sidebar-text-active: var(--hlc-lime);
--sidebar-border: rgb(var(--hlc-cream-rgb) / 0.12);
--sidebar-hover-bg: rgb(var(--hlc-cream-rgb) / 0.08);
--sidebar-input-bg: rgb(var(--hlc-cream-rgb) / 0.08);
/* Sidebar — light mode harmonises with the cream/white body palette
(t-paliad-104). Surface lifts one step from the body cream so the
sidebar reads as part of the same design language, not a separate
midnight panel. The active item's text colour is midnight (full
contrast against the muted-grey inactive items); the brand-lime
accent stripe on .sidebar-item.active::after stays via --color-accent
directly, so the lime brand cue is preserved in both themes.
Dark mode (block below) restores the original midnight + cream + lime
palette since that already reads as one piece. */
--sidebar-bg: var(--color-bg-subtle);
--sidebar-text: var(--color-text);
--sidebar-text-muted: var(--color-text-muted);
--sidebar-text-active: var(--hlc-midnight);
--sidebar-border: var(--color-border);
--sidebar-hover-bg: rgb(var(--hlc-midnight-rgb) / 0.05);
--sidebar-input-bg: rgb(var(--hlc-midnight-rgb) / 0.05);
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
--radius: 8px;
@@ -112,12 +118,11 @@
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
/* Sidebar scrollbar — themed thin scrollbar so the auto-overflow
inside the nav reads as part of the dark sidebar surface and
doesn't clash visually with the page background. Cream-channel
alpha keeps it consistent in both light and dark mode (the
sidebar itself is always midnight). */
--sidebar-scrollbar-thumb: rgb(var(--hlc-cream-rgb) / 0.20);
--sidebar-scrollbar-thumb-hover: rgb(var(--hlc-cream-rgb) / 0.35);
inside the nav reads as part of the sidebar surface. Light mode
uses midnight-channel alpha against the cream sidebar; the dark
block below switches to cream-channel alpha against midnight. */
--sidebar-scrollbar-thumb: rgb(var(--hlc-midnight-rgb) / 0.18);
--sidebar-scrollbar-thumb-hover: rgb(var(--hlc-midnight-rgb) / 0.32);
--sidebar-scrollbar-width: 6px;
--max-width: 1080px;
--sidebar-collapsed: 64px;
@@ -133,12 +138,16 @@
/* Dark mode (m/paliad#2). Activated by the pre-paint inline script in
PWAHead.tsx setting <html data-theme="dark"> from localStorage[paliad-theme]
("dark" | "auto"+system-prefers-dark). The sidebar already lives on
midnight in light mode — its --sidebar-* tokens stay unchanged here, so
the sidebar reads identically across themes. The body palette flips to
("dark" | "auto"+system-prefers-dark). The body palette flips to
midnight-bg + cream-fg, and accent text flips back to lime (passes WCAG
AA on midnight). Status pills, dashboard cards, and tree-icon colours
are tinted-alpha-on-dark for readability. */
are tinted-alpha-on-dark for readability.
Sidebar (t-paliad-104, reversing t-paliad-083): the sidebar now flips
with the theme. Light mode keeps the sidebar on a cream-tinted surface
so it reads as part of the page; dark mode restores the original
midnight + cream-text + lime-active palette below — that combo already
reads as one piece on a midnight body. */
:root[data-theme="dark"] {
--color-bg: var(--hlc-midnight);
--color-bg-subtle: #00304a; /* slightly raised for table headers */
@@ -201,6 +210,19 @@
--tree-icon-patent: #38bdf8;
--tree-icon-case: #fbbf24;
--tree-icon-project: #86efac;
/* Sidebar — restore the original midnight + cream + lime palette here
(the light-mode defaults harmonise with the cream body; dark mode
wants the high-contrast midnight column it had before t-paliad-104). */
--sidebar-bg: var(--hlc-midnight);
--sidebar-text: var(--hlc-cream);
--sidebar-text-muted: rgb(var(--hlc-cream-rgb) / 0.66);
--sidebar-text-active: var(--hlc-lime);
--sidebar-border: rgb(var(--hlc-cream-rgb) / 0.12);
--sidebar-hover-bg: rgb(var(--hlc-cream-rgb) / 0.08);
--sidebar-input-bg: rgb(var(--hlc-cream-rgb) / 0.08);
--sidebar-scrollbar-thumb: rgb(var(--hlc-cream-rgb) / 0.20);
--sidebar-scrollbar-thumb-hover: rgb(var(--hlc-cream-rgb) / 0.35);
}
/* Smooth the body-background swap so theme toggles don't snap. Surface
@@ -685,11 +707,10 @@ main {
flex-direction: column;
overflow: hidden;
transition: width 150ms ease;
/* Sidebar lives on midnight BG, so accent text inside it stays lime
even though the rest of the page (cream/white BG) overrides accent
text to midnight. Same cascade trick will work in reverse for
dark-mode (m/paliad#2): the body-level palette flips to lime,
and this scope is a no-op. */
/* Accent text inside the sidebar tracks --sidebar-text-active so it
stays legible against the sidebar surface in either theme. Light
mode: midnight on cream-tint (no-op vs the root default). Dark
mode: lime on midnight (matches root). */
--color-accent-fg: var(--sidebar-text-active);
}
@@ -866,7 +887,10 @@ main {
top: 4px;
bottom: 4px;
width: 3px;
background: var(--sidebar-text-active);
/* Brand lime in both themes — keeps the active cue visually anchored
even when the active text colour flips between midnight (light) and
lime (dark). */
background: var(--color-accent);
border-radius: 0 2px 2px 0;
}
@@ -8328,10 +8352,11 @@ dialog.quick-add-sheet::backdrop {
background: transparent;
}
/* Light-mode placeholder scrollbar tinting — already cream-channel alpha
on the sidebar (which is midnight in both themes). On the body in dark
mode, the browser-default scrollbar is dark via color-scheme, so no
per-element override is needed here. */
/* Sidebar scrollbar tinting is handled via --sidebar-scrollbar-thumb /
-hover (see :root + dark block at top), so it tracks the sidebar
surface in either theme. On the body in dark mode the browser-default
scrollbar is dark via color-scheme, so no per-element override is
needed here. */
/* ============================================================================
t-paliad-088 — Event Types: picker, multi-select filter, add modal