/* GENERATED FILE -- DO NOT EDIT. Source: shared/tokens.css. Regenerate with scripts/sync_tokens.py. Edits here are silently overwritten and will fail --check. */ /* ========================================================================= JET CockpitView — canonical colour values ------------------------------------------------------------------------- AUTHORED HERE. The copies at dashboard/src/tokens.css, frontend/tokens.css and mobile/tokens.css are GENERATED by scripts/sync_tokens.py — edit this file, then run that script. `--check` fails if a copy has drifted. Why copies rather than one linked file: frontend/ is deployed standalone on Vercel with outputDirectory "frontend" (see vercel.json), so nothing above that directory is served there. mobile/ is served from its own static mount, and the dashboard bundles its copy through Vite. There is no single path all three can reach. WHAT LIVES HERE: the values that cross an app boundary — the ones where three apps showing "the same" colour actually showed three colours. WHAT DOES NOT: which value plays which role in which theme. The apps use opposite theme conventions (the dashboard is light-first with a `dark` class on ; the field apps are dark-first with [data-theme="light"] opting out) and crew deliberately keeps its own visual language. Each app maps these to its own semantic names. This unifies what the colours ARE, not how they are used. FORM: each value is declared once as a space-separated RGB triplet, with a colour alias derived from it by rgb(). The triplet is what Tailwind's modifier needs (bg-brand-500/20); the alias is what plain CSS wants. Deriving one from the other means they cannot drift apart. ========================================================================= */ :root { /* --- Brand ----------------------------------------------------------- Facts about the JET logo rather than design decisions. Both sit at 73% saturation, the grading rule the logo already follows: the blue is hsl(216,73%,37%), the red hsl(355,73%,47%). Before this file, the three apps disagreed about all of these by small amounts -- measured in OKLab, the logo blue against the dashboard's own "brand" was 1.63, the crew red against the dashboard's red 3.43. Small enough to read as sloppiness rather than intent, which is worse than an obvious difference. */ --jet-blue-rgb: 26 81 164; /* #1A51A4 */ --jet-red-rgb: 209 32 48; /* #D12030 */ --jet-blue: rgb(var(--jet-blue-rgb)); --jet-red: rgb(var(--jet-red-rgb)); /* The blue lifted for dark surfaces. JET blue itself scores about 2.2:1 on a dark ground and cannot be used as text there. This value clears 4.5:1 on EVERY dark surface in the product -- the dashboard's navy-800 (4.59:1) and navy-900 (5.10:1), the Field Console's panel (4.94:1) and page (5.80:1), and crew's dark card (5.03:1). The neighbouring ramp step #4785E2 was tried first and fails on navy-800 at 4.17:1, which is why this is its own value and not a step. */ --jet-blue-lift-rgb: 83 141 228; /* #538DE4 */ --jet-blue-lift: rgb(var(--jet-blue-lift-rgb)); /* --- Status ---------------------------------------------------------- One pair each, because no single value passes contrast on both grounds. -on-light is for light themes, -on-dark for dark ones. */ --jet-good-on-light-rgb: 20 128 78; /* #14804E */ --jet-good-on-dark-rgb: 28 176 107; /* #1CB06B */ --jet-warn-on-light-rgb: 150 103 23; /* #966717 */ --jet-warn-on-dark-rgb: 176 122 28; /* #B07A1C */ --jet-crit-on-light-rgb: 217 34 49; /* #D92231 */ --jet-crit-on-dark-rgb: 232 105 116; /* #E86974 */ --jet-good-on-light: rgb(var(--jet-good-on-light-rgb)); --jet-good-on-dark: rgb(var(--jet-good-on-dark-rgb)); --jet-warn-on-light: rgb(var(--jet-warn-on-light-rgb)); --jet-warn-on-dark: rgb(var(--jet-warn-on-dark-rgb)); --jet-crit-on-light: rgb(var(--jet-crit-on-light-rgb)); --jet-crit-on-dark: rgb(var(--jet-crit-on-dark-rgb)); /* --- Muted text ------------------------------------------------------- Same pairing, same reason: light mode needs a dark muted, dark mode a light one. 7.09:1 on the dashboard's ground, 6.18:1 on its navy card. */ --jet-muted-on-light-rgb: 75 85 99; /* #4B5563 */ --jet-muted-on-dark-rgb: 154 165 188; /* #9AA5BC */ --jet-muted-on-light: rgb(var(--jet-muted-on-light-rgb)); --jet-muted-on-dark: rgb(var(--jet-muted-on-dark-rgb)); }