phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add multi-accent palettes and a brighter Light Green theme (ticket 048)

Browse Source 
Every built-in theme now exposes three accents (--c-accent/-2/-3) instead
of one, so PanelChart's series palette draws distinct colours per theme
via color-mix() rather than a fixed, theme-independent hex list. Existing
presets keep their current base surface/border/text/accent look — the two
new accent vars are purely additive. Adds a new "Light Green" scheme
(light-surfaced, same green/magenta hue family as "Green") selectable
alongside the existing built-ins, both in ColorScheme (frontend + backend)
and the settings picker.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-06 02:11:33 +01:00
co-authored by Claude Sonnet 5
parent 19044753c6
commit 5371d3e283
7 changed files with 142 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/PanelChart.tsx
+16 -2
View File
@@ -22,8 +22,22 @@ export function seriesLabel(labels: Record<string, string>): string {
return entries.map(([k, v]) => `${k}=${v}`).join(', ')
}
// Fixed, small categorical palette to avoid a colour-scale dependency; cycles if there are more series than colours.
const COLORS = ['#38bdf8', '#f472b6', '#a78bfa', '#4ade80', '#fbbf24', '#fb7185', '#2dd4bf', '#f97316']
// Categorical palette drawn from the active theme's accent set (ticket 048: every built-in theme
// exposes --c-accent/--c-accent-2/--c-accent-3, not just one accent hue) instead of a hardcoded,
// theme-independent hex list. `color-mix` tints/shades those three base accents into a fuller
// 8-colour cycle (matching the previous fixed palette's size, so MAX_KEPT_SERIES/squashing below is
// unaffected) without any JS colour math or a getComputedStyle read — the browser resolves the CSS
// variables per-theme at paint time, same as `stroke="var(--c-border)"` elsewhere in this file.
const COLORS = [
'var(--c-accent)',
'var(--c-accent-2)',
'var(--c-accent-3)',
'color-mix(in srgb, var(--c-accent) 60%, white)',
'color-mix(in srgb, var(--c-accent-2) 60%, white)',
'color-mix(in srgb, var(--c-accent-3) 60%, white)',
'color-mix(in srgb, var(--c-accent) 55%, black)',
'color-mix(in srgb, var(--c-accent-2) 55%, black)',
]
// One less than the palette size: above this many series, keep the top MAX_KEPT_SERIES (by value) and squash the
// rest into a single "Other" bucket, so the squashed range never exceeds COLORS.length and never repeats a colour.