feat(maestro): graphite web default + palette picker
Graphite replaces the signal-green accent as the default web palette; data-palette on <html> selects ice-cyan, periwinkle, amber-phosphor, ember or orchid (each with dark + light token sets), picked from a new sidebar-footer dropdown and persisted in localStorage. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Miguel Palhas
co-authored by
Claude Fable 5
Claude Fable 5
parent
bff0eddc12
commit
7935663ed7
+2
-1
@@ -24,7 +24,7 @@ import {
|
||||
} from "./activity.js";
|
||||
import type { TreeNode } from "./tree.js";
|
||||
import { buildTree } from "./tree.js";
|
||||
import { createThemeToggle } from "./theme.js";
|
||||
import { createPaletteSelect, createThemeToggle } from "./theme.js";
|
||||
|
||||
/** Ask the shell to open the spawn modal. Handled in main.ts, where the
|
||||
* multi-view controller lives; dispatched from every Spawn affordance. */
|
||||
@@ -380,6 +380,7 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
|
||||
helpBtn.addEventListener("click", () => toggleHelp());
|
||||
footer.appendChild(helpBtn);
|
||||
footer.appendChild(createThemeToggle());
|
||||
footer.appendChild(createPaletteSelect());
|
||||
// DEV-only shortcut to the standalone design kit (?kit). Lets you reach it by
|
||||
// clicking inside a proxied preview (e.g. crit live) that has no address bar.
|
||||
if (import.meta.env.DEV) {
|
||||
|
||||
+3
-3
@@ -4,7 +4,7 @@
|
||||
// critiqued as a whole — buttons (including terminal-native variants for
|
||||
// review), inputs, chips, badges, session rows, and empty states.
|
||||
import "./kit.css";
|
||||
import { createThemeToggle } from "./theme.js";
|
||||
import { createPaletteSelect, createThemeToggle } from "./theme.js";
|
||||
|
||||
function h(tag: string, className?: string, html?: string): HTMLElement {
|
||||
const el = document.createElement(tag);
|
||||
@@ -102,7 +102,7 @@ export function renderKit(): HTMLElement {
|
||||
back.className = "btn btn-ghost";
|
||||
back.href = "?mock";
|
||||
back.textContent = "← back to app";
|
||||
headerActions.append(back, createThemeToggle());
|
||||
headerActions.append(back, createThemeToggle(), createPaletteSelect());
|
||||
header.appendChild(headerActions);
|
||||
page.appendChild(header);
|
||||
|
||||
@@ -113,7 +113,7 @@ export function renderKit(): HTMLElement {
|
||||
{
|
||||
const { el, body } = section(
|
||||
"Color tokens",
|
||||
"Slate neutrals (hue ~256) + signal-green = alive. Swap by theme toggle.",
|
||||
"Graphite neutrals; activity colours are the only hue. Swap by theme toggle + palette picker.",
|
||||
);
|
||||
body.classList.add("kit-swatches");
|
||||
const tokens = [
|
||||
|
||||
+385
-46
@@ -1,8 +1,12 @@
|
||||
/* =========================================================================
|
||||
maestro web — design system
|
||||
Register: product (a tool; design serves the task).
|
||||
Identity: precise, calm, alive. Monospace-as-UI; signal-green = "alive".
|
||||
Identity: precise, calm, alive. Monospace-as-UI; graphite chrome where the
|
||||
activity colours (green = alive) are the only hue on screen.
|
||||
Theme: dark (default) + light, all via OKLCH custom-property tokens.
|
||||
Palette: `data-palette` on <html> swaps the accent + base tint (see the
|
||||
"palettes" section at the end of the token area); graphite is the bare
|
||||
document.
|
||||
========================================================================= */
|
||||
|
||||
:root {
|
||||
@@ -63,24 +67,25 @@
|
||||
/* ---- color: dark (default) ---- */
|
||||
color-scheme: dark;
|
||||
|
||||
--bg: oklch(0.178 0.012 256);
|
||||
--bg-grid: oklch(0.215 0.014 256);
|
||||
--surface: oklch(0.214 0.014 256);
|
||||
--surface-2: oklch(0.252 0.016 256);
|
||||
--surface-3: oklch(0.292 0.018 256);
|
||||
--border: oklch(0.318 0.018 256);
|
||||
--border-strong: oklch(0.4 0.022 256);
|
||||
--bg: oklch(0.172 0.006 256);
|
||||
--bg-grid: oklch(0.21 0.007 256);
|
||||
--surface: oklch(0.208 0.007 256);
|
||||
--surface-2: oklch(0.246 0.008 256);
|
||||
--surface-3: oklch(0.286 0.009 256);
|
||||
--border: oklch(0.312 0.01 256);
|
||||
--border-strong: oklch(0.395 0.012 256);
|
||||
|
||||
--ink: oklch(0.945 0.006 256);
|
||||
--muted: oklch(0.722 0.014 256);
|
||||
--faint: oklch(0.58 0.014 256);
|
||||
--ink: oklch(0.945 0.004 256);
|
||||
--muted: oklch(0.72 0.008 256);
|
||||
--faint: oklch(0.58 0.008 256);
|
||||
|
||||
/* signal green = "alive", primary action, focus, selection */
|
||||
--accent: oklch(0.83 0.16 152);
|
||||
--accent-strong: oklch(0.88 0.17 152);
|
||||
--accent-ink: oklch(0.2 0.03 256);
|
||||
--accent-tint: oklch(0.83 0.16 152 / 0.12);
|
||||
--accent-ring: oklch(0.83 0.16 152 / 0.55);
|
||||
/* graphite: the accent is ink itself — primary action, focus, selection.
|
||||
The activity colours below stay the only hue on screen. */
|
||||
--accent: oklch(0.92 0.005 256);
|
||||
--accent-strong: oklch(0.97 0.003 256);
|
||||
--accent-ink: oklch(0.2 0.012 256);
|
||||
--accent-tint: oklch(0.92 0.005 256 / 0.1);
|
||||
--accent-ring: oklch(0.92 0.005 256 / 0.5);
|
||||
|
||||
--live: oklch(0.84 0.17 152);
|
||||
--live-glow: oklch(0.84 0.17 152 / 0.55);
|
||||
@@ -92,30 +97,30 @@
|
||||
--shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
|
||||
--shadow-2:
|
||||
0 12px 28px -8px oklch(0 0 0 / 0.6), 0 2px 8px oklch(0 0 0 / 0.4);
|
||||
--term-bg: oklch(0.158 0.012 256);
|
||||
--term-bg: oklch(0.155 0.006 256);
|
||||
}
|
||||
|
||||
:root[data-theme="light"],
|
||||
:root[data-theme="light"] body {
|
||||
color-scheme: light;
|
||||
|
||||
--bg: oklch(0.985 0.003 256);
|
||||
--bg-grid: oklch(0.93 0.006 256);
|
||||
--bg: oklch(0.985 0.002 256);
|
||||
--bg-grid: oklch(0.93 0.004 256);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.965 0.004 256);
|
||||
--surface-3: oklch(0.93 0.006 256);
|
||||
--border: oklch(0.892 0.008 256);
|
||||
--border-strong: oklch(0.82 0.012 256);
|
||||
--surface-2: oklch(0.965 0.003 256);
|
||||
--surface-3: oklch(0.93 0.004 256);
|
||||
--border: oklch(0.892 0.005 256);
|
||||
--border-strong: oklch(0.82 0.008 256);
|
||||
|
||||
--ink: oklch(0.26 0.014 256);
|
||||
--muted: oklch(0.47 0.016 256);
|
||||
--faint: oklch(0.62 0.016 256);
|
||||
--ink: oklch(0.26 0.012 256);
|
||||
--muted: oklch(0.47 0.012 256);
|
||||
--faint: oklch(0.62 0.012 256);
|
||||
|
||||
--accent: oklch(0.6 0.15 151);
|
||||
--accent-strong: oklch(0.55 0.16 151);
|
||||
--accent-ink: oklch(0.99 0.01 152);
|
||||
--accent-tint: oklch(0.6 0.15 151 / 0.12);
|
||||
--accent-ring: oklch(0.6 0.15 151 / 0.5);
|
||||
--accent: oklch(0.27 0.01 256);
|
||||
--accent-strong: oklch(0.2 0.01 256);
|
||||
--accent-ink: oklch(0.985 0.002 256);
|
||||
--accent-tint: oklch(0.27 0.01 256 / 0.1);
|
||||
--accent-ring: oklch(0.27 0.01 256 / 0.45);
|
||||
|
||||
--live: oklch(0.6 0.16 151);
|
||||
--live-glow: oklch(0.6 0.16 151 / 0.45);
|
||||
@@ -136,23 +141,23 @@
|
||||
:root:not([data-theme]) {
|
||||
color-scheme: light;
|
||||
|
||||
--bg: oklch(0.985 0.003 256);
|
||||
--bg-grid: oklch(0.93 0.006 256);
|
||||
--bg: oklch(0.985 0.002 256);
|
||||
--bg-grid: oklch(0.93 0.004 256);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.965 0.004 256);
|
||||
--surface-3: oklch(0.93 0.006 256);
|
||||
--border: oklch(0.892 0.008 256);
|
||||
--border-strong: oklch(0.82 0.012 256);
|
||||
--surface-2: oklch(0.965 0.003 256);
|
||||
--surface-3: oklch(0.93 0.004 256);
|
||||
--border: oklch(0.892 0.005 256);
|
||||
--border-strong: oklch(0.82 0.008 256);
|
||||
|
||||
--ink: oklch(0.26 0.014 256);
|
||||
--muted: oklch(0.47 0.016 256);
|
||||
--faint: oklch(0.62 0.016 256);
|
||||
--ink: oklch(0.26 0.012 256);
|
||||
--muted: oklch(0.47 0.012 256);
|
||||
--faint: oklch(0.62 0.012 256);
|
||||
|
||||
--accent: oklch(0.6 0.15 151);
|
||||
--accent-strong: oklch(0.55 0.16 151);
|
||||
--accent-ink: oklch(0.99 0.01 152);
|
||||
--accent-tint: oklch(0.6 0.15 151 / 0.12);
|
||||
--accent-ring: oklch(0.6 0.15 151 / 0.5);
|
||||
--accent: oklch(0.27 0.01 256);
|
||||
--accent-strong: oklch(0.2 0.01 256);
|
||||
--accent-ink: oklch(0.985 0.002 256);
|
||||
--accent-tint: oklch(0.27 0.01 256 / 0.1);
|
||||
--accent-ring: oklch(0.27 0.01 256 / 0.45);
|
||||
|
||||
--live: oklch(0.6 0.16 151);
|
||||
--live-glow: oklch(0.6 0.16 151 / 0.45);
|
||||
@@ -169,6 +174,311 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- palettes ----
|
||||
`data-palette` on <html> recolours the accent + base tint on top of the
|
||||
light/dark machinery above. Graphite (the default) is the bare document.
|
||||
Each palette ships a dark block, a pinned-light block, and a system-light
|
||||
block; `--live`/`--danger`/`--warn` stay semantic and are not redefined
|
||||
(except amber-phosphor, whose accent would collide with the stock warn). */
|
||||
|
||||
/* ice-cyan: signal-cyan accent on the slate base. */
|
||||
:root[data-palette="ice-cyan"] {
|
||||
--bg: oklch(0.178 0.012 256);
|
||||
--bg-grid: oklch(0.215 0.014 256);
|
||||
--surface: oklch(0.214 0.014 256);
|
||||
--surface-2: oklch(0.252 0.016 256);
|
||||
--surface-3: oklch(0.292 0.018 256);
|
||||
--border: oklch(0.318 0.018 256);
|
||||
--border-strong: oklch(0.4 0.022 256);
|
||||
--ink: oklch(0.945 0.006 256);
|
||||
--muted: oklch(0.722 0.014 256);
|
||||
--faint: oklch(0.58 0.014 256);
|
||||
--accent: oklch(0.85 0.115 205);
|
||||
--accent-strong: oklch(0.89 0.12 205);
|
||||
--accent-ink: oklch(0.24 0.03 230);
|
||||
--accent-tint: oklch(0.85 0.115 205 / 0.12);
|
||||
--accent-ring: oklch(0.85 0.115 205 / 0.55);
|
||||
--term-bg: oklch(0.158 0.012 256);
|
||||
}
|
||||
:root[data-palette="ice-cyan"][data-theme="light"],
|
||||
:root[data-palette="ice-cyan"][data-theme="light"] body {
|
||||
--bg: oklch(0.985 0.003 256);
|
||||
--bg-grid: oklch(0.93 0.006 256);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.965 0.004 256);
|
||||
--surface-3: oklch(0.93 0.006 256);
|
||||
--border: oklch(0.892 0.008 256);
|
||||
--border-strong: oklch(0.82 0.012 256);
|
||||
--ink: oklch(0.26 0.014 256);
|
||||
--muted: oklch(0.47 0.016 256);
|
||||
--faint: oklch(0.62 0.016 256);
|
||||
--accent: oklch(0.52 0.1 220);
|
||||
--accent-strong: oklch(0.47 0.11 220);
|
||||
--accent-ink: oklch(0.99 0.005 220);
|
||||
--accent-tint: oklch(0.52 0.1 220 / 0.12);
|
||||
--accent-ring: oklch(0.52 0.1 220 / 0.5);
|
||||
--term-bg: oklch(0.165 0.012 256);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-palette="ice-cyan"]:not([data-theme]) {
|
||||
--bg: oklch(0.985 0.003 256);
|
||||
--bg-grid: oklch(0.93 0.006 256);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.965 0.004 256);
|
||||
--surface-3: oklch(0.93 0.006 256);
|
||||
--border: oklch(0.892 0.008 256);
|
||||
--border-strong: oklch(0.82 0.012 256);
|
||||
--ink: oklch(0.26 0.014 256);
|
||||
--muted: oklch(0.47 0.016 256);
|
||||
--faint: oklch(0.62 0.016 256);
|
||||
--accent: oklch(0.52 0.1 220);
|
||||
--accent-strong: oklch(0.47 0.11 220);
|
||||
--accent-ink: oklch(0.99 0.005 220);
|
||||
--accent-tint: oklch(0.52 0.1 220 / 0.12);
|
||||
--accent-ring: oklch(0.52 0.1 220 / 0.5);
|
||||
--term-bg: oklch(0.165 0.012 256);
|
||||
}
|
||||
}
|
||||
/* periwinkle: indigo base, blue-violet accent. */
|
||||
:root[data-palette="periwinkle"] {
|
||||
--bg: oklch(0.175 0.018 278);
|
||||
--bg-grid: oklch(0.212 0.021 278);
|
||||
--surface: oklch(0.212 0.021 278);
|
||||
--surface-2: oklch(0.25 0.024 278);
|
||||
--surface-3: oklch(0.29 0.026 278);
|
||||
--border: oklch(0.318 0.026 278);
|
||||
--border-strong: oklch(0.4 0.028 278);
|
||||
--ink: oklch(0.93 0.012 278);
|
||||
--muted: oklch(0.71 0.02 278);
|
||||
--faint: oklch(0.57 0.022 278);
|
||||
--accent: oklch(0.75 0.125 275);
|
||||
--accent-strong: oklch(0.79 0.13 275);
|
||||
--accent-ink: oklch(0.18 0.04 278);
|
||||
--accent-tint: oklch(0.75 0.125 275 / 0.14);
|
||||
--accent-ring: oklch(0.75 0.125 275 / 0.55);
|
||||
--term-bg: oklch(0.155 0.018 278);
|
||||
}
|
||||
:root[data-palette="periwinkle"][data-theme="light"],
|
||||
:root[data-palette="periwinkle"][data-theme="light"] body {
|
||||
--bg: oklch(0.982 0.004 278);
|
||||
--bg-grid: oklch(0.93 0.008 278);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.96 0.006 278);
|
||||
--surface-3: oklch(0.93 0.008 278);
|
||||
--border: oklch(0.885 0.01 278);
|
||||
--border-strong: oklch(0.82 0.014 278);
|
||||
--ink: oklch(0.27 0.02 278);
|
||||
--muted: oklch(0.47 0.02 278);
|
||||
--faint: oklch(0.62 0.02 278);
|
||||
--accent: oklch(0.5 0.17 272);
|
||||
--accent-strong: oklch(0.45 0.17 272);
|
||||
--accent-ink: oklch(0.99 0.005 272);
|
||||
--accent-tint: oklch(0.5 0.17 272 / 0.12);
|
||||
--accent-ring: oklch(0.5 0.17 272 / 0.5);
|
||||
--term-bg: oklch(0.165 0.018 278);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-palette="periwinkle"]:not([data-theme]) {
|
||||
--bg: oklch(0.982 0.004 278);
|
||||
--bg-grid: oklch(0.93 0.008 278);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.96 0.006 278);
|
||||
--surface-3: oklch(0.93 0.008 278);
|
||||
--border: oklch(0.885 0.01 278);
|
||||
--border-strong: oklch(0.82 0.014 278);
|
||||
--ink: oklch(0.27 0.02 278);
|
||||
--muted: oklch(0.47 0.02 278);
|
||||
--faint: oklch(0.62 0.02 278);
|
||||
--accent: oklch(0.5 0.17 272);
|
||||
--accent-strong: oklch(0.45 0.17 272);
|
||||
--accent-ink: oklch(0.99 0.005 272);
|
||||
--accent-tint: oklch(0.5 0.17 272 / 0.12);
|
||||
--accent-ring: oklch(0.5 0.17 272 / 0.5);
|
||||
--term-bg: oklch(0.165 0.018 278);
|
||||
}
|
||||
}
|
||||
|
||||
/* amber-phosphor: CRT amber on warm graphite. `--warn` shifts orange so the
|
||||
awaiting colour stays distinct from the accent. */
|
||||
:root[data-palette="amber-phosphor"] {
|
||||
--bg: oklch(0.178 0.008 70);
|
||||
--bg-grid: oklch(0.214 0.01 70);
|
||||
--surface: oklch(0.214 0.01 70);
|
||||
--surface-2: oklch(0.252 0.012 70);
|
||||
--surface-3: oklch(0.292 0.013 70);
|
||||
--border: oklch(0.318 0.014 70);
|
||||
--border-strong: oklch(0.4 0.016 70);
|
||||
--ink: oklch(0.94 0.008 78);
|
||||
--muted: oklch(0.72 0.014 75);
|
||||
--faint: oklch(0.58 0.014 75);
|
||||
--accent: oklch(0.83 0.14 78);
|
||||
--accent-strong: oklch(0.87 0.145 78);
|
||||
--accent-ink: oklch(0.25 0.05 78);
|
||||
--accent-tint: oklch(0.83 0.14 78 / 0.13);
|
||||
--accent-ring: oklch(0.83 0.14 78 / 0.55);
|
||||
--warn: oklch(0.76 0.15 55);
|
||||
--term-bg: oklch(0.158 0.008 70);
|
||||
}
|
||||
:root[data-palette="amber-phosphor"][data-theme="light"],
|
||||
:root[data-palette="amber-phosphor"][data-theme="light"] body {
|
||||
--bg: oklch(0.983 0.004 78);
|
||||
--bg-grid: oklch(0.93 0.007 78);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.962 0.005 78);
|
||||
--surface-3: oklch(0.93 0.007 78);
|
||||
--border: oklch(0.888 0.01 78);
|
||||
--border-strong: oklch(0.82 0.012 78);
|
||||
--ink: oklch(0.27 0.015 70);
|
||||
--muted: oklch(0.47 0.016 70);
|
||||
--faint: oklch(0.62 0.016 70);
|
||||
--accent: oklch(0.6 0.13 70);
|
||||
--accent-strong: oklch(0.55 0.13 70);
|
||||
--accent-ink: oklch(0.99 0.01 78);
|
||||
--accent-tint: oklch(0.6 0.13 70 / 0.12);
|
||||
--accent-ring: oklch(0.6 0.13 70 / 0.5);
|
||||
--warn: oklch(0.58 0.14 50);
|
||||
--term-bg: oklch(0.165 0.008 70);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-palette="amber-phosphor"]:not([data-theme]) {
|
||||
--bg: oklch(0.983 0.004 78);
|
||||
--bg-grid: oklch(0.93 0.007 78);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.962 0.005 78);
|
||||
--surface-3: oklch(0.93 0.007 78);
|
||||
--border: oklch(0.888 0.01 78);
|
||||
--border-strong: oklch(0.82 0.012 78);
|
||||
--ink: oklch(0.27 0.015 70);
|
||||
--muted: oklch(0.47 0.016 70);
|
||||
--faint: oklch(0.62 0.016 70);
|
||||
--accent: oklch(0.6 0.13 70);
|
||||
--accent-strong: oklch(0.55 0.13 70);
|
||||
--accent-ink: oklch(0.99 0.01 78);
|
||||
--accent-tint: oklch(0.6 0.13 70 / 0.12);
|
||||
--accent-ring: oklch(0.6 0.13 70 / 0.5);
|
||||
--warn: oklch(0.58 0.14 50);
|
||||
--term-bg: oklch(0.165 0.008 70);
|
||||
}
|
||||
}
|
||||
|
||||
/* ember: warm orange-red accent. */
|
||||
:root[data-palette="ember"] {
|
||||
--bg: oklch(0.18 0.009 50);
|
||||
--bg-grid: oklch(0.216 0.011 50);
|
||||
--surface: oklch(0.216 0.011 50);
|
||||
--surface-2: oklch(0.254 0.013 50);
|
||||
--surface-3: oklch(0.294 0.014 50);
|
||||
--border: oklch(0.32 0.015 50);
|
||||
--border-strong: oklch(0.4 0.017 50);
|
||||
--ink: oklch(0.94 0.007 50);
|
||||
--muted: oklch(0.72 0.013 50);
|
||||
--faint: oklch(0.58 0.013 50);
|
||||
--accent: oklch(0.74 0.15 45);
|
||||
--accent-strong: oklch(0.78 0.155 45);
|
||||
--accent-ink: oklch(0.2 0.04 45);
|
||||
--accent-tint: oklch(0.74 0.15 45 / 0.14);
|
||||
--accent-ring: oklch(0.74 0.15 45 / 0.55);
|
||||
--term-bg: oklch(0.158 0.009 50);
|
||||
}
|
||||
:root[data-palette="ember"][data-theme="light"],
|
||||
:root[data-palette="ember"][data-theme="light"] body {
|
||||
--bg: oklch(0.983 0.004 50);
|
||||
--bg-grid: oklch(0.93 0.006 50);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.962 0.005 50);
|
||||
--surface-3: oklch(0.93 0.006 50);
|
||||
--border: oklch(0.888 0.009 50);
|
||||
--border-strong: oklch(0.82 0.012 50);
|
||||
--ink: oklch(0.27 0.014 50);
|
||||
--muted: oklch(0.47 0.015 50);
|
||||
--faint: oklch(0.62 0.015 50);
|
||||
--accent: oklch(0.58 0.17 40);
|
||||
--accent-strong: oklch(0.53 0.17 40);
|
||||
--accent-ink: oklch(0.99 0.008 40);
|
||||
--accent-tint: oklch(0.58 0.17 40 / 0.11);
|
||||
--accent-ring: oklch(0.58 0.17 40 / 0.5);
|
||||
--term-bg: oklch(0.165 0.009 50);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-palette="ember"]:not([data-theme]) {
|
||||
--bg: oklch(0.983 0.004 50);
|
||||
--bg-grid: oklch(0.93 0.006 50);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.962 0.005 50);
|
||||
--surface-3: oklch(0.93 0.006 50);
|
||||
--border: oklch(0.888 0.009 50);
|
||||
--border-strong: oklch(0.82 0.012 50);
|
||||
--ink: oklch(0.27 0.014 50);
|
||||
--muted: oklch(0.47 0.015 50);
|
||||
--faint: oklch(0.62 0.015 50);
|
||||
--accent: oklch(0.58 0.17 40);
|
||||
--accent-strong: oklch(0.53 0.17 40);
|
||||
--accent-ink: oklch(0.99 0.008 40);
|
||||
--accent-tint: oklch(0.58 0.17 40 / 0.11);
|
||||
--accent-ring: oklch(0.58 0.17 40 / 0.5);
|
||||
--term-bg: oklch(0.165 0.009 50);
|
||||
}
|
||||
}
|
||||
|
||||
/* orchid: muted violet accent on a faintly violet base. */
|
||||
:root[data-palette="orchid"] {
|
||||
--bg: oklch(0.177 0.014 305);
|
||||
--bg-grid: oklch(0.213 0.017 305);
|
||||
--surface: oklch(0.213 0.017 305);
|
||||
--surface-2: oklch(0.251 0.02 305);
|
||||
--surface-3: oklch(0.291 0.021 305);
|
||||
--border: oklch(0.318 0.022 305);
|
||||
--border-strong: oklch(0.4 0.024 305);
|
||||
--ink: oklch(0.935 0.01 305);
|
||||
--muted: oklch(0.715 0.018 305);
|
||||
--faint: oklch(0.575 0.018 305);
|
||||
--accent: oklch(0.78 0.13 310);
|
||||
--accent-strong: oklch(0.82 0.135 310);
|
||||
--accent-ink: oklch(0.22 0.05 310);
|
||||
--accent-tint: oklch(0.78 0.13 310 / 0.14);
|
||||
--accent-ring: oklch(0.78 0.13 310 / 0.55);
|
||||
--term-bg: oklch(0.155 0.014 305);
|
||||
}
|
||||
:root[data-palette="orchid"][data-theme="light"],
|
||||
:root[data-palette="orchid"][data-theme="light"] body {
|
||||
--bg: oklch(0.983 0.004 305);
|
||||
--bg-grid: oklch(0.93 0.007 305);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.961 0.005 305);
|
||||
--surface-3: oklch(0.93 0.007 305);
|
||||
--border: oklch(0.886 0.01 305);
|
||||
--border-strong: oklch(0.82 0.013 305);
|
||||
--ink: oklch(0.27 0.018 305);
|
||||
--muted: oklch(0.47 0.018 305);
|
||||
--faint: oklch(0.62 0.018 305);
|
||||
--accent: oklch(0.5 0.17 308);
|
||||
--accent-strong: oklch(0.45 0.17 308);
|
||||
--accent-ink: oklch(0.99 0.005 308);
|
||||
--accent-tint: oklch(0.5 0.17 308 / 0.11);
|
||||
--accent-ring: oklch(0.5 0.17 308 / 0.5);
|
||||
--term-bg: oklch(0.165 0.014 305);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-palette="orchid"]:not([data-theme]) {
|
||||
--bg: oklch(0.983 0.004 305);
|
||||
--bg-grid: oklch(0.93 0.007 305);
|
||||
--surface: oklch(1 0 0);
|
||||
--surface-2: oklch(0.961 0.005 305);
|
||||
--surface-3: oklch(0.93 0.007 305);
|
||||
--border: oklch(0.886 0.01 305);
|
||||
--border-strong: oklch(0.82 0.013 305);
|
||||
--ink: oklch(0.27 0.018 305);
|
||||
--muted: oklch(0.47 0.018 305);
|
||||
--faint: oklch(0.62 0.018 305);
|
||||
--accent: oklch(0.5 0.17 308);
|
||||
--accent-strong: oklch(0.45 0.17 308);
|
||||
--accent-ink: oklch(0.99 0.005 308);
|
||||
--accent-tint: oklch(0.5 0.17 308 / 0.11);
|
||||
--accent-ring: oklch(0.5 0.17 308 / 0.5);
|
||||
--term-bg: oklch(0.165 0.014 305);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- reset / base ---------- */
|
||||
|
||||
* {
|
||||
@@ -435,6 +745,35 @@ textarea {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* Palette picker: a ghost-button-shaped <select>. */
|
||||
.palette-select {
|
||||
appearance: none;
|
||||
height: var(--control-h);
|
||||
padding: 0 var(--sp-2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-2);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-12);
|
||||
cursor: pointer;
|
||||
max-width: 9ch;
|
||||
text-overflow: ellipsis;
|
||||
transition:
|
||||
color var(--dur-fast) var(--ease-out),
|
||||
border-color var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.palette-select:hover {
|
||||
color: var(--ink);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.palette-select:focus-visible {
|
||||
border-color: var(--accent);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.sidebar-search .search {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { beforeAll, beforeEach, describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
createPaletteSelect,
|
||||
initTheme,
|
||||
PALETTES,
|
||||
resolvedPalette,
|
||||
setPalette,
|
||||
} from "./theme.js";
|
||||
|
||||
// happy-dom's vitest environment ships no localStorage global; back it with a
|
||||
// plain in-memory map so persistence is observable.
|
||||
let store = new Map<string, string>();
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window, "localStorage", {
|
||||
value: {
|
||||
getItem: (k: string) => store.get(k) ?? null,
|
||||
setItem: (k: string, v: string) => store.set(k, v),
|
||||
removeItem: (k: string) => store.delete(k),
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe("palette selection", () => {
|
||||
beforeEach(() => {
|
||||
store = new Map();
|
||||
delete document.documentElement.dataset.palette;
|
||||
delete document.documentElement.dataset.theme;
|
||||
});
|
||||
|
||||
it("defaults to graphite with no data-palette attribute", () => {
|
||||
initTheme();
|
||||
expect(resolvedPalette()).toBe("graphite");
|
||||
expect(document.documentElement.dataset.palette).toBeUndefined();
|
||||
});
|
||||
|
||||
it("setPalette stamps data-palette and persists", () => {
|
||||
setPalette("ember");
|
||||
expect(document.documentElement.dataset.palette).toBe("ember");
|
||||
expect(resolvedPalette()).toBe("ember");
|
||||
|
||||
// A fresh boot re-applies the stored palette.
|
||||
delete document.documentElement.dataset.palette;
|
||||
initTheme();
|
||||
expect(document.documentElement.dataset.palette).toBe("ember");
|
||||
});
|
||||
|
||||
it("selecting graphite removes the attribute again", () => {
|
||||
setPalette("orchid");
|
||||
setPalette("graphite");
|
||||
expect(document.documentElement.dataset.palette).toBeUndefined();
|
||||
initTheme();
|
||||
expect(document.documentElement.dataset.palette).toBeUndefined();
|
||||
});
|
||||
|
||||
it("ignores an unknown stored palette", () => {
|
||||
localStorage.setItem("maestro-palette", "glorb");
|
||||
initTheme();
|
||||
expect(resolvedPalette()).toBe("graphite");
|
||||
expect(document.documentElement.dataset.palette).toBeUndefined();
|
||||
});
|
||||
|
||||
it("the picker lists every palette and applies the chosen one", () => {
|
||||
const select = createPaletteSelect();
|
||||
expect([...select.options].map((o) => o.value)).toEqual([...PALETTES]);
|
||||
expect(select.value).toBe("graphite");
|
||||
|
||||
select.value = "periwinkle";
|
||||
select.dispatchEvent(new Event("change"));
|
||||
expect(document.documentElement.dataset.palette).toBe("periwinkle");
|
||||
expect(localStorage.getItem("maestro-palette")).toBe("periwinkle");
|
||||
});
|
||||
});
|
||||
+64
-1
@@ -1,10 +1,26 @@
|
||||
// Theme: dark (default) + light, persisted. When the user hasn't pinned a
|
||||
// theme we follow the OS via CSS `prefers-color-scheme`; pinning sets an
|
||||
// explicit `data-theme` on <html> that overrides the media query.
|
||||
//
|
||||
// Palette: orthogonal to light/dark. Each palette ships both a dark and a
|
||||
// light token set in styles.css; `data-palette` on <html> selects it, and
|
||||
// graphite — the default — is the bare document with no attribute.
|
||||
|
||||
type Theme = "light" | "dark";
|
||||
const KEY = "maestro-theme";
|
||||
|
||||
/** Every `data-palette` value, in picker order. Graphite is the default. */
|
||||
export const PALETTES = [
|
||||
"graphite",
|
||||
"ice-cyan",
|
||||
"periwinkle",
|
||||
"amber-phosphor",
|
||||
"ember",
|
||||
"orchid",
|
||||
] as const;
|
||||
export type Palette = (typeof PALETTES)[number];
|
||||
const PALETTE_KEY = "maestro-palette";
|
||||
|
||||
function stored(): Theme | null {
|
||||
const v = localStorage.getItem(KEY);
|
||||
return v === "light" || v === "dark" ? v : null;
|
||||
@@ -21,18 +37,46 @@ export function resolvedTheme(): Theme {
|
||||
return stored() ?? systemTheme();
|
||||
}
|
||||
|
||||
/** Apply a pinned theme at boot (no-op when following the system). */
|
||||
function storedPalette(): Palette | null {
|
||||
const v = localStorage.getItem(PALETTE_KEY);
|
||||
return (PALETTES as readonly string[]).includes(v ?? "")
|
||||
? (v as Palette)
|
||||
: null;
|
||||
}
|
||||
|
||||
/** The palette in force (stored or the graphite default). */
|
||||
export function resolvedPalette(): Palette {
|
||||
return document.documentElement.dataset.palette as Palette | undefined
|
||||
?? storedPalette()
|
||||
?? "graphite";
|
||||
}
|
||||
|
||||
/** Pin a palette. Graphite is the bare document, so it clears the attribute. */
|
||||
export function setPalette(p: Palette): void {
|
||||
localStorage.setItem(PALETTE_KEY, p);
|
||||
if (p === "graphite") delete document.documentElement.dataset.palette;
|
||||
else document.documentElement.dataset.palette = p;
|
||||
}
|
||||
|
||||
/** Apply the pinned theme + palette at boot (no-ops when unpinned). */
|
||||
export function initTheme(): void {
|
||||
// Dev-only `?theme=light|dark` override for visual review; stripped in prod.
|
||||
if (import.meta.env.DEV) {
|
||||
const q = new URLSearchParams(location.search).get("theme");
|
||||
if (q === "light" || q === "dark") {
|
||||
document.documentElement.dataset.theme = q;
|
||||
applyStoredPalette();
|
||||
return;
|
||||
}
|
||||
}
|
||||
const pinned = stored();
|
||||
if (pinned) document.documentElement.dataset.theme = pinned;
|
||||
applyStoredPalette();
|
||||
}
|
||||
|
||||
function applyStoredPalette(): void {
|
||||
const p = storedPalette();
|
||||
if (p && p !== "graphite") document.documentElement.dataset.palette = p;
|
||||
}
|
||||
|
||||
function setTheme(t: Theme): void {
|
||||
@@ -58,3 +102,22 @@ export function createThemeToggle(): HTMLButtonElement {
|
||||
});
|
||||
return btn;
|
||||
}
|
||||
|
||||
/** A footer dropdown that picks the colour palette. */
|
||||
export function createPaletteSelect(): HTMLSelectElement {
|
||||
const select = document.createElement("select");
|
||||
select.className = "palette-select";
|
||||
select.setAttribute("aria-label", "Colour palette");
|
||||
select.title = "Colour palette";
|
||||
for (const p of PALETTES) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = p;
|
||||
opt.textContent = p;
|
||||
select.appendChild(opt);
|
||||
}
|
||||
select.value = resolvedPalette();
|
||||
select.addEventListener("change", () => {
|
||||
setPalette(select.value as Palette);
|
||||
});
|
||||
return select;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user