jason.woltje
7fdb488270
Add a reviewed `theme` plugin kind (interfaceVersion 1, export `theme`, switch
"list"). A module returns data only: a displayName and a flat map of colour
custom properties for light, dim and dark. checkTheme validates names and
#rrggbb colours strictly and checks each text/background pair for contrast; a
bad module is refused and logged, never served.
The ten shipped palettes become the first ten modules under
packages/plugins/theme/<name>/. Modules are found by directory scan
(loader.discoverModules, loader.loadInstalled), not by a list in the Console.
loadModule and createLoader are unchanged.
The organization file takes `appearance: { theme, mode }`, validated in
packages/business/src/appearance.mjs; a missing appearance is valid.
GET /api/themes (themes-http.mjs) serves the installed, valid themes.
Browser: the Settings picker lists /api/themes. Precedence is a per-organization
browser override, then the organization's saved theme, then the built-in default
(Harbor, dark). Clearing the override restores the organization's choice. An
uninstalled or invalid saved theme renders the default with a visible warning
and keeps the saved value. A legacy global browser preference is not copied to
every organization. The organization is named in text, so colour is never the
only cue. A plain load writes no appearance record. The default look is
unchanged: computed styles match the base commit element for element.
61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
// Harbor: complementary. Clear blue with a restrained copper counterpoint. The warm accent balances cool navigation and gives selected details a second voice.
|
|
// docs/design/tokens.json with the Console's own Harbor overlay for light and dark (tokens.css, "Dashboard reference").
|
|
// The theme test lists every value that differs from tokens.json; the browser test checks them against the rendered page.
|
|
export const interfaceVersion = 1;
|
|
|
|
export function theme() {
|
|
return {
|
|
displayName: "Harbor",
|
|
tokens: {
|
|
light: {
|
|
"--canvas": "#f1f5fa",
|
|
"--surface": "#ffffff",
|
|
"--raised": "#e4edf8",
|
|
"--line": "#c8d4e3",
|
|
"--border": "#636e7e",
|
|
"--text": "#34445a",
|
|
"--muted": "#53677e",
|
|
"--action": "#2266bf",
|
|
"--onAction": "#ffffff",
|
|
"--accent": "#8d5e20",
|
|
"--focus": "#2266bf",
|
|
"--success": "#287658",
|
|
"--warning": "#8f5c19",
|
|
"--danger": "#ba2e26",
|
|
},
|
|
dim: {
|
|
"--canvas": "#242d38",
|
|
"--surface": "#2e3947",
|
|
"--raised": "#384556",
|
|
"--line": "#47576c",
|
|
"--border": "#a4acb7",
|
|
"--text": "#d6dbe1",
|
|
"--muted": "#a9b1bc",
|
|
"--action": "#8ab4ea",
|
|
"--onAction": "#10141a",
|
|
"--accent": "#e1b47a",
|
|
"--focus": "#8ab4ea",
|
|
"--success": "#85d5b7",
|
|
"--warning": "#e7b574",
|
|
"--danger": "#ea9d99",
|
|
},
|
|
dark: {
|
|
"--canvas": "#141821",
|
|
"--surface": "#1d222b",
|
|
"--raised": "#293446",
|
|
"--line": "#444f60",
|
|
"--border": "#a4acb7",
|
|
"--text": "#d8e0ef",
|
|
"--muted": "#b5c2d6",
|
|
"--action": "#64b5ff",
|
|
"--onAction": "#10141a",
|
|
"--accent": "#e1b47a",
|
|
"--focus": "#74a6e7",
|
|
"--success": "#85d5b7",
|
|
"--warning": "#e7b574",
|
|
"--danger": "#e37d78",
|
|
},
|
|
},
|
|
};
|
|
}
|