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

Merge ticket 048: multi-accent and brighter theme variants

Browse Source
This commit is contained in:
Hugh Kaznowski
2026-09-06 02:11:49 +01:00
parent 19044753c6 5371d3e283
commit 8e7973e4fd
7 changed files with 142 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/settings.rs
+3
View File
@@ -37,6 +37,9 @@ pub enum ColorScheme {
Yellow,
Pink,
Orange,
/// Brighter, light-surfaced counterpart to `Green` (ticket 048).
#[serde(rename = "light_green")]
LightGreen,
#[default]
System,
}
webapp/src/components/NavMenu.tsx
+8 -2
View File
@@ -27,8 +27,14 @@ const COLOR_SCHEMES: ColorScheme[] = [
'yellow',
'pink',
'orange',
'light_green',
]
/** Display label for a `ColorScheme`: underscores become spaces so `capitalize` (which titles each word) renders e.g. "light_green" as "Light Green". */
function schemeLabel(scheme: ColorScheme): string {
return scheme.replace(/_/g, ' ')
}
export function NavMenu({ stats }: { stats: Stats | null }) {
const [openPanel, setOpenPanel] = useState<PanelName>(null)
const panel = useSettingsPanel()
@@ -307,14 +313,14 @@ function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }
: 'border-border-soft text-text-muted hover:bg-surface-2'
}`}
>
{scheme}
{schemeLabel(scheme)}
</button>
{scheme !== 'system' && (
<button
type="button"
onClick={() => downloadBuiltinTheme(scheme)}
className="rounded-r border border-l-0 border-border-soft px-1.5 py-1 text-xs text-text-faint hover:bg-surface-2 hover:text-text"
aria-label={`Download ${scheme} theme`}
aria-label={`Download ${schemeLabel(scheme)} theme`}
title="Download as .css"
>
↓
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.
webapp/src/index.css
+61
View File
@@ -34,6 +34,14 @@
* composite K = H+150 (mod 360), then fill --c-surface-, --c-border-,
* --c-text- as hsl(H, ...) at the saturation/lightness steps below, accent
* + accent-text as hsl(C, ...), and accent-soft as hsl(K, ...).
*
* --c-accent (base look, unchanged above) is joined by two more accent
* colours (ticket 048) so charts/highlights can draw from a 3-colour set
* instead of one hue: --c-accent-2 sits at H+90 and --c-accent-3 at H+270 —
* a quadrature pair straddling the base hue, distinct from both the
* complement (accent) and the split-complement (accent-soft). These are
* purely additive: nothing that already reads --c-accent/-soft/-text
* changes look.
*/
:root {
color-scheme: light dark;
@@ -62,6 +70,8 @@
--c-accent: #0ea5e9;
--c-accent-soft: #0369a1;
--c-accent-text: #7dd3fc;
--c-accent-2: #a78bfa;
--c-accent-3: #4ade80;
}
/* Exact lightness mirror of :root's neutral-950..50 scale (Tailwind neutral,
@@ -91,6 +101,8 @@ html.light {
--c-accent: #0284c7;
--c-accent-soft: #7dd3fc;
--c-accent-text: #0369a1;
--c-accent-2: #7c3aed;
--c-accent-3: #16a34a;
}
/* base hue 0 (red): surfaces/borders/text tinted red; accent complement 180
@@ -115,6 +127,8 @@ html.red {
--c-accent: hsl(180 70% 62%);
--c-accent-soft: hsl(150 55% 34%);
--c-accent-text: hsl(180 75% 80%);
--c-accent-2: hsl(90 65% 58%);
--c-accent-3: hsl(270 65% 68%);
}
/* base hue 140 (green): surfaces/borders/text tinted green; accent complement
@@ -139,6 +153,8 @@ html.green {
--c-accent: hsl(320 70% 62%);
--c-accent-soft: hsl(290 55% 34%);
--c-accent-text: hsl(320 75% 80%);
--c-accent-2: hsl(230 65% 62%);
--c-accent-3: hsl(50 65% 58%);
}
/* base hue 210 (blue): surfaces/borders/text tinted blue; accent complement
@@ -163,6 +179,8 @@ html.blue {
--c-accent: hsl(30 70% 62%);
--c-accent-soft: hsl(0 55% 34%);
--c-accent-text: hsl(30 75% 80%);
--c-accent-2: hsl(300 65% 68%);
--c-accent-3: hsl(120 65% 55%);
}
/* base hue 50 (yellow): surfaces/borders/text tinted yellow; accent
@@ -187,6 +205,8 @@ html.yellow {
--c-accent: hsl(230 70% 62%);
--c-accent-soft: hsl(200 55% 34%);
--c-accent-text: hsl(230 75% 80%);
--c-accent-2: hsl(140 65% 55%);
--c-accent-3: hsl(320 65% 68%);
}
/* base hue 330 (pink): surfaces/borders/text tinted pink; accent complement
@@ -211,6 +231,8 @@ html.pink {
--c-accent: hsl(150 70% 62%);
--c-accent-soft: hsl(120 55% 34%);
--c-accent-text: hsl(150 75% 80%);
--c-accent-2: hsl(60 65% 58%);
--c-accent-3: hsl(240 65% 68%);
}
/* base hue 30 (orange): surfaces/borders/text tinted orange; accent
@@ -235,6 +257,43 @@ html.orange {
--c-accent: hsl(210 70% 62%);
--c-accent-soft: hsl(180 55% 34%);
--c-accent-text: hsl(210 75% 80%);
--c-accent-2: hsl(120 65% 55%);
--c-accent-3: hsl(300 65% 68%);
}
/* Brighter, light-surfaced counterpart to `green` (ticket 048): same base
hue (140) and accent hues as `green`, but with a `light`-style inverted
surface/border/text scale (high lightness instead of low) so it reads as
a distinctly brighter theme, not a re-tint of the dark `green`. Danger
colours are `light`'s (hue-neutral), matching how `light` itself doesn't
tint danger either. */
html.light_green {
--c-surface-0: hsl(140 40% 96%);
--c-surface-1: hsl(140 35% 92%);
--c-surface-2: hsl(140 30% 85%);
--c-border: hsl(140 25% 80%);
--c-border-soft: hsl(140 22% 70%);
--c-border-faint: hsl(140 35% 92%);
--c-border-strong: hsl(140 20% 40%);
--c-text: hsl(140 30% 12%);
--c-text-secondary: hsl(140 20% 25%);
--c-text-muted: hsl(140 15% 40%);
--c-text-subtle: hsl(140 10% 50%);
--c-text-faint: hsl(140 10% 65%);
--c-text-faintest: hsl(140 12% 80%);
--c-danger-bg: #fee2e2;
--c-danger-border: #fca5a5;
--c-danger-text: #b91c1c;
--c-danger-text-strong: #991b1b;
--c-accent: hsl(320 70% 40%);
--c-accent-soft: hsl(290 60% 85%);
--c-accent-text: hsl(320 75% 28%);
--c-accent-2: hsl(230 70% 45%);
--c-accent-3: hsl(50 70% 38%);
}
@theme inline {
@@ -262,6 +321,8 @@ html.orange {
--color-accent: var(--c-accent);
--color-accent-soft: var(--c-accent-soft);
--color-accent-text: var(--c-accent-text);
--color-accent-2: var(--c-accent-2);
--color-accent-3: var(--c-accent-3);
}
html,
webapp/src/lib/api.ts
+1
View File
@@ -90,6 +90,7 @@ export type ColorScheme =
| 'yellow'
| 'pink'
| 'orange'
| 'light_green'
export interface Settings {
color_scheme: ColorScheme
webapp/src/lib/themes.ts
+42
View File
@@ -22,6 +22,8 @@ export const THEME_CSS_VARS = [
'--c-accent',
'--c-accent-soft',
'--c-accent-text',
'--c-accent-2',
'--c-accent-3',
] as const
export type ThemeVars = Record<(typeof THEME_CSS_VARS)[number], string>
@@ -49,6 +51,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': '#0ea5e9',
'--c-accent-soft': '#0369a1',
'--c-accent-text': '#7dd3fc',
'--c-accent-2': '#a78bfa',
'--c-accent-3': '#4ade80',
},
light: {
'--c-surface-0': '#fafafa',
@@ -71,6 +75,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': '#0284c7',
'--c-accent-soft': '#7dd3fc',
'--c-accent-text': '#0369a1',
'--c-accent-2': '#7c3aed',
'--c-accent-3': '#16a34a',
},
red: {
'--c-surface-0': 'hsl(0 32% 10%)',
@@ -93,6 +99,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': 'hsl(180 70% 62%)',
'--c-accent-soft': 'hsl(150 55% 34%)',
'--c-accent-text': 'hsl(180 75% 80%)',
'--c-accent-2': 'hsl(90 65% 58%)',
'--c-accent-3': 'hsl(270 65% 68%)',
},
green: {
'--c-surface-0': 'hsl(140 32% 10%)',
@@ -115,6 +123,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': 'hsl(320 70% 62%)',
'--c-accent-soft': 'hsl(290 55% 34%)',
'--c-accent-text': 'hsl(320 75% 80%)',
'--c-accent-2': 'hsl(230 65% 62%)',
'--c-accent-3': 'hsl(50 65% 58%)',
},
blue: {
'--c-surface-0': 'hsl(210 32% 10%)',
@@ -137,6 +147,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': 'hsl(30 70% 62%)',
'--c-accent-soft': 'hsl(0 55% 34%)',
'--c-accent-text': 'hsl(30 75% 80%)',
'--c-accent-2': 'hsl(300 65% 68%)',
'--c-accent-3': 'hsl(120 65% 55%)',
},
yellow: {
'--c-surface-0': 'hsl(50 32% 10%)',
@@ -159,6 +171,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': 'hsl(230 70% 62%)',
'--c-accent-soft': 'hsl(200 55% 34%)',
'--c-accent-text': 'hsl(230 75% 80%)',
'--c-accent-2': 'hsl(140 65% 55%)',
'--c-accent-3': 'hsl(320 65% 68%)',
},
pink: {
'--c-surface-0': 'hsl(330 32% 10%)',
@@ -181,6 +195,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': 'hsl(150 70% 62%)',
'--c-accent-soft': 'hsl(120 55% 34%)',
'--c-accent-text': 'hsl(150 75% 80%)',
'--c-accent-2': 'hsl(60 65% 58%)',
'--c-accent-3': 'hsl(240 65% 68%)',
},
orange: {
'--c-surface-0': 'hsl(30 32% 10%)',
@@ -203,6 +219,32 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
'--c-accent': 'hsl(210 70% 62%)',
'--c-accent-soft': 'hsl(180 55% 34%)',
'--c-accent-text': 'hsl(210 75% 80%)',
'--c-accent-2': 'hsl(120 65% 55%)',
'--c-accent-3': 'hsl(300 65% 68%)',
},
light_green: {
'--c-surface-0': 'hsl(140 40% 96%)',
'--c-surface-1': 'hsl(140 35% 92%)',
'--c-surface-2': 'hsl(140 30% 85%)',
'--c-border': 'hsl(140 25% 80%)',
'--c-border-soft': 'hsl(140 22% 70%)',
'--c-border-faint': 'hsl(140 35% 92%)',
'--c-border-strong': 'hsl(140 20% 40%)',
'--c-text': 'hsl(140 30% 12%)',
'--c-text-secondary': 'hsl(140 20% 25%)',
'--c-text-muted': 'hsl(140 15% 40%)',
'--c-text-subtle': 'hsl(140 10% 50%)',
'--c-text-faint': 'hsl(140 10% 65%)',
'--c-text-faintest': 'hsl(140 12% 80%)',
'--c-danger-bg': '#fee2e2',
'--c-danger-border': '#fca5a5',
'--c-danger-text': '#b91c1c',
'--c-danger-text-strong': '#991b1b',
'--c-accent': 'hsl(320 70% 40%)',
'--c-accent-soft': 'hsl(290 60% 85%)',
'--c-accent-text': 'hsl(320 75% 28%)',
'--c-accent-2': 'hsl(230 70% 45%)',
'--c-accent-3': 'hsl(50 70% 38%)',
},
}
webapp/src/lib/useSettingsPanel.ts
+11 -1
View File
@@ -21,7 +21,17 @@ import {
const INJECTED_THEME_ATTR = 'data-ottyl-theme-css-id'
// Themes selectable independently of `system`, each backed by a `html.<name>` block in `index.css`.
const THEME_CLASSES = ['light', 'dark', 'red', 'green', 'blue', 'yellow', 'pink', 'orange'] as const
const THEME_CLASSES = [
'light',
'dark',
'red',
'green',
'blue',
'yellow',
'pink',
'orange',
'light_green',
] as const
// Reflects `colorScheme` onto `<html>` as a class + `data-color-scheme`; when a custom theme is active, no built-in class is added at all, since a class selector would out-specificity its injected `:root` override (see `applyCustomThemeCss`) and mask it.
function applyColorScheme(colorScheme: ColorScheme, customThemeActive: boolean) {