Miguel PalhasandClaude Fable 5
7935663ed7
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>
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
// @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");
|
|
});
|
|
});
|