mikkeli
2dfd52e33d
Dark palette, chosen while previewing in the Studio: - tunnel #b6c5c1 -> #a6ccc2 - shrine #a05050 -> #b94141 - other #a7b7d6 -> #8b9ab8 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PLt25nCVMsoroKALYUBu6u
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
/**
|
|
* Every colour the 274 transect video draws, named by what it is for rather than
|
|
* what it looks like. Change values here, or override `palette` in the Studio's
|
|
* input props, without touching the drawing code.
|
|
*
|
|
* The dark palette is the video's own, grown from the dark palette of
|
|
* `song-274/route/274-transect.html`; comments name the page's CSS variable each
|
|
* token corresponds to. The light palette is the page's, extended with the
|
|
* tokens the video added (shrine, railway).
|
|
*/
|
|
export type TransectPalette = {
|
|
/** Frame background. */
|
|
background: string;
|
|
/** The whole road, before the song has covered it. */
|
|
roadAhead: string;
|
|
/** The road the song has covered so far. */
|
|
roadCovered: string;
|
|
/** Node fill per feature family, as on the page's legend. */
|
|
bridge: string;
|
|
tunnel: string;
|
|
shed: string;
|
|
watercourse: string;
|
|
place: string;
|
|
/** Stations and every 信号場, whatever their roster kind. */
|
|
railway: string;
|
|
shrine: string;
|
|
other: string;
|
|
};
|
|
|
|
export type FeatureFamily =
|
|
| "bridge"
|
|
| "tunnel"
|
|
| "shed"
|
|
| "watercourse"
|
|
| "place"
|
|
| "railway"
|
|
| "shrine"
|
|
| "other";
|
|
|
|
export const darkPalette: TransectPalette = {
|
|
background: "#28323d", // --paper
|
|
roadAhead: "#49565f", // --rule
|
|
roadCovered: "#fdb021", // --road
|
|
bridge: "#9be9de", // --bridge
|
|
tunnel: "#a6ccc2", // --tunnel
|
|
shed: "#eba9eb", // --shed
|
|
watercourse: "#5FB6D6", // --water
|
|
place: "#68ad7f", // --place
|
|
railway: "#68ad7f", // --railway
|
|
shrine: "#b94141", // --shrine
|
|
other: "#8b9ab8", // --util
|
|
};
|
|
|
|
export const lightPalette: TransectPalette = {
|
|
background: "#E7ECEE",
|
|
roadAhead: "#C0CCD2",
|
|
roadCovered: "#2E4A5A",
|
|
bridge: "#116B62",
|
|
tunnel: "#3A4650",
|
|
shed: "#7A5AA6",
|
|
watercourse: "#2F7E9E",
|
|
place: "#8A6D1F",
|
|
railway: "#1F6E43",
|
|
shrine: "#9B2C2C",
|
|
other: "#5B6B75",
|
|
};
|