/* One palette for every EAMS surface. R2.1, friction F-27. * * Until this file existed the web application and the field application each * kept their own colours. The web was built on a blue primary (#1B78CE) and * the field application on a navy one (#1B3A6B), down to a different * `theme-color` in the page head, so an officer who opened both saw two * products from two companies. Nothing forced them apart; they were simply * written months apart in two files nobody compared. * * So the values live here once and nowhere else: * * /eams frontend/src/index.css imports this file and maps the * shadcn-vue token names onto it. The import is resolved at build * time, so the browser still downloads one stylesheet. * /field frontend/src/field/field.css imports this file too, and the * build inlines it, so the field application carries the palette * in its own stylesheet and opens with no signal (ADR 009). * * Adding a colour means adding it here. A hex code written straight into a * component is how the two identities appeared in the first place, and * frontend/scripts/check-contrast.mjs reads this file to prove every pair * that is actually drawn can be read. * * WHY THE PRIMARY IS NOT THE CORPORATE HEX. PT Divistant's blue is #1C7DD6. * White text on it reaches 4.24:1, under the 4.5:1 needed for normal text, * which put every primary button in the product below the threshold. Hue and * saturation are kept and only lightness is lowered, so side by side with a * printed document template the two read as the same colour. * * WHY SOME STATUS COLOURS COME IN PAIRS. A green that is legible as text on * white is too dark to notice as a filled bar, and one that reads well as a * fill fails as text on a tinted panel. Rather than let each surface pick its * own, the scale carries both: --pid-ok is the fill, --pid-ok-soft the tinted * panel, and --pid-ok-soft-ink the text drawn on that panel. * * DARK MODE IS EXPLICIT ON BOTH SURFACES. /eams puts `.dark` on from * the user's own choice of Terang, Gelap or Ikuti Perangkat. The field * application has no such setting and follows the device, so its page sets * data-pid-theme before the first paint. Neither surface may rely on a bare * `prefers-color-scheme` rule here: a media query in this file would repaint * /eams dark for a user who explicitly asked for Terang on a device set to * dark. */ :root { /* Surfaces, from the page backwards. `shell` is the application chrome: the sidebar on the web, the page itself in the field application. */ --pid-bg: #ffffff; --pid-surface: #ffffff; --pid-surface-muted: #f1f5f9; --pid-shell: #f8fafc; /* Text. `soft` is secondary prose, `faint` is a label or a caption. */ --pid-ink: #0f172a; --pid-ink-soft: #475569; --pid-ink-faint: #64748b; /* `line` is a control border: the edge of an input, an option or a tile, which WCAG 2.2 asks to reach 3:1 because it is what tells a control from the page around it. The field application had it at #cbd5e1, which is 1.4:1 on white; on a quayside in sunlight that is no edge at all. A line that only separates two rows may be faint, and that one is `line-soft`. */ --pid-line: #748399; --pid-line-soft: #dce3ec; --pid-brand: #1b78ce; --pid-brand-ink: #ffffff; --pid-brand-soft: #eef7fe; --pid-brand-soft-ink: #0f5090; --pid-ok: #12883e; --pid-ok-soft: #ddefe8; --pid-ok-soft-ink: #0b6e55; --pid-warn: #b36205; --pid-warn-soft: #fdf0dc; --pid-warn-soft-ink: #8a4b0a; --pid-bad: #dc2626; --pid-bad-ink: #ffffff; --pid-bad-soft: #f9e3e3; --pid-bad-soft-ink: #a32f2f; /* Asset condition, worst last. Kept apart from the brand blue because these say how bad something is, and an accent colour that also means "this is a link" cannot say that as well. Every place they are drawn also prints the figure, so the colour is a second reading, never the only one. The unsurveyed grey was once 1.36:1 against its own track, which made the part of the chart saying "nobody has looked at these" the part nobody could see. */ --pid-condition-good: #16a34a; --pid-condition-minor: #d97706; --pid-condition-major: #dc2626; --pid-condition-lost: #7f1d1d; --pid-condition-unknown: #7690b0; /* The asset map's own ground (FR-21). Indonesia is drawn a step lighter than its neighbours, and both sit on a sea tinted towards the brand blue, so the archipelago reads as the subject before any marker is drawn. They are grounds, not signals: every marker on them carries its own ring in the surface colour. */ --pid-map-sea: #dde8f4; --pid-map-land: #edf1f5; --pid-map-land-home: #f8fafc; --pid-map-coast: #9aaec6; --pid-radius: 0.625rem; /* Declared rather than inherited, and deliberately not a web font. The field application has to open inside a cold store with no signal, and a downloaded font is one more request to fail; a face that arrives late also reflows a form under a gloved thumb. The stack names the faces each platform actually ships instead of trusting `system-ui` alone, which resolves to different widths across Android builds. Anything narrower than this belongs in a component, not here. */ --pid-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; } /* Dark values. `.dark` is what /eams sets; `[data-pid-theme='dark']` is what the field page sets from the device preference. One list of values, two ways in, so neither surface can drift into a dark mode of its own. */ .dark, [data-pid-theme='dark'] { --pid-bg: #0b1220; --pid-surface: #111a2b; --pid-surface-muted: #1e293b; --pid-shell: #0f172a; --pid-ink: #e2e8f0; --pid-ink-soft: #cbd5e1; --pid-ink-faint: #94a3b8; --pid-line: #6b7c94; --pid-line-soft: #212d42; --pid-brand: #45a6e9; --pid-brand-ink: #0b1220; --pid-brand-soft: #133a60; --pid-brand-soft-ink: #d5ecfc; --pid-ok: #22c55e; --pid-ok-soft: #0c2e24; --pid-ok-soft-ink: #6ee7b7; --pid-warn: #f59e0b; --pid-warn-soft: #332008; --pid-warn-soft-ink: #fcd9a0; --pid-bad: #ef4444; --pid-bad-ink: #0b1220; --pid-bad-soft: #3a1414; --pid-bad-soft-ink: #fca5a5; --pid-condition-good: #22c55e; --pid-condition-minor: #f59e0b; --pid-condition-major: #ef4444; --pid-condition-lost: #c71e1e; --pid-condition-unknown: #60738e; /* Chosen for the dark page rather than inverted from the light values: a deep sea, land a step up from it, and a coast only just visible. */ --pid-map-sea: #08101d; --pid-map-land: #141d2d; --pid-map-land-home: #1b2740; --pid-map-coast: #34476a; }