tracking ui

apps/edr-freight-web/backoffice/src/components/trainScheduling/trackTheme.ts

@@ -0,0 +1,69 @@
+/**
+ * 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;