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: "#9dcde4", // --road
|
||
|
|
bridge: "#79d1c5", // --bridge
|
||
|
|
tunnel: "#b6c5c1", // --tunnel
|
||
|
|
shed: "#eba9eb", // --shed
|
||
|
|
watercourse: "#5FB6D6", // --water
|
||
|
|
place: "#129252", // --place
|
||
|
|
railway: "#129252", // --railway
|
||
|
|
shrine: "#b32c2c", // --shrine
|
||
|
|
other: "#ff9900", // --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",
|
||
|
|
};
|