Files
edr-platform/apps/edr-freight-web/backoffice/src/components/trainScheduling/trackTheme.ts
2026-08-27 07:45:32 +00:00

70 lines
2.2 KiB
TypeScript

/**
* Design tokens for the train-tracking surface, mirroring ui/scheule/track.pen.
*
* The rest of the scheduling pages key off `scheduleVisuals`/`freightBrand`;
* tracking is its own light "work surface" palette, so the tokens live here
* rather than widening the shared brand file. Brand green is darkened from the
* shared #1B9E7A to #0E8C68 so label text clears AA contrast on white.
*/
export const track = {
bg: "#F6F8FA",
surface: "#FFFFFF",
surface2: "#F4F7F9",
surface3: "#E9EEF3",
border: "#DCE4EC",
borderSoft: "#E8EDF2",
brand: "#0E8C68",
brandDark: "#0A6B50",
brandLight: "#12A87D",
brandDim: "#E4F5EF",
text: "#0F1D2B",
text2: "#48606F",
text3: "#9BAEBE",
muted: "#6A8296",
teal: "#0E8C82",
tealDim: "#DFF3F1",
blue: "#2563C9",
blueDim: "#E4EDFB",
amber: "#A66A08",
amberDim: "#FDF2DC",
amberBorder: "#E8C88C",
amberText: "#8A6420",
red: "#C43D3D",
redDim: "#FBE9E9",
grape: "#7C4BC4",
grapeDim: "#F0E7FB",
/** Status-cap wash on the left rail's identity card. */
capGradient:
"linear-gradient(115deg, #0A6B50 0%, #0E8C68 55%, #12A87D 100%)",
mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
} as const;
/** Checkpoint-kind chip colors, keyed by TrainCheckpointKind. */
export const KIND_TONE: Record<string, { bg: string; fg: string }> = {
DEPARTED: { bg: track.blueDim, fg: track.blue },
PASSED: { bg: track.brandDim, fg: track.brand },
ARRIVED: { bg: track.tealDim, fg: track.teal },
};
/** Loading/unloading window state chips. */
export const PHASE_TONE = {
done: { bg: track.surface3, fg: track.muted },
active: { bg: track.amberDim, fg: track.amber },
idle: { bg: track.surface2, fg: track.text3 },
} as const;
export type PhaseState = keyof typeof PHASE_TONE;
/** Trade-direction chips in the yard-work tables. */
export const DIRECTION_TONE: Record<string, { bg: string; fg: string }> = {
IMPORT: { bg: track.blueDim, fg: track.blue },
EXPORT: { bg: track.tealDim, fg: track.teal },
DOMESTIC: { bg: track.grapeDim, fg: track.grape },
};
export const cardStyle = {
background: track.surface,
border: `1px solid ${track.border}`,
borderRadius: 16,
} as const;