298f5942eb
Shop-floor operators and managers live on these screens all day — the
old look worked but felt like a spec sheet. Pass through all 5 pages
with one design language: gradient KPI cards, hero banners, soft
shadows, rounded corners, large touch targets, friendly empty states.
Dark mode and light mode both look deliberate, not inverted.
New shared file: _fp_shopfloor_tokens.scss
A single source of truth for radii, elevation (shadows that respect
dark mode via color-mix on foreground), typography scale (tabular
numerics for KPIs, 18px base for shop-floor readability), animation
easings, semantic gradients (@mixin fp-grad), tone helpers
(@mixin fp-tone), focus ring, and the 44px touch-min token.
Every other SCSS file imports this — no duplicated colour math.
Gradients are built on color-mix(in srgb, var(--bs-foo) X%, transparent)
so they layer naturally on either the light or dark page background.
No @media-prefers-color-scheme forks needed.
Tablet Station (fusion_plating_shopfloor.scss):
* Hero banner with dual radial-gradient wash (brand + success), live
station chip, gradient focus ring on the picker.
* KPI cards (6-up on desktop, 2x3 on phone) get a subtle top accent
line, coloured gradient overlay, 40px headline number, faded icon
at corner. Tone variants (info/success/warning/danger/muted) drive
colour without extra CSS.
* Active WO banner is a green gradient pill with a breathing-dot
pulse — unmissable when something is running.
* Panels get top accents, queue rows get priority pills (HI/M/·),
bake/gate/hold rows get colour-coded left accent bars.
* Tiles have a 4px left stripe keyed to state + hover lift.
* Status chips are uppercase, pill-shaped, tone-tinted with
color-mix so they respect theme.
* Empty states now have a large 36px icon + friendly copy instead
of a one-liner.
* Focus rings use the shared @mixin fp-focus-ring.
Manager Desk (manager_dashboard.scss):
* Same hero treatment with radial gradient + live-dot pulse.
* 3 panels carry a coloured top accent bar — amber (Unassigned),
green (In Progress), blue (Team). Instant visual routing.
* KPI strip matches tablet.
* MO cards get a left priority stripe (red for HOT, amber for
Urgent), lift on hover, expand cleanly.
* Team avatars get a border + subtle tint background for depth.
* Worker/tank pickers have custom focus rings.
Plant Overview (plant_overview.scss):
* Header is now a gradient wash tied to the brand colour.
* Work-centre columns get a thin gradient top-stripe and pill-style
count badges.
* Cards have real depth (layered shadow), lift harder on hover,
change border colour on hover.
All three files share the same design tokens, so colours/shadows/
radii are identical across pages. Edit one place, everything updates.
Verified: backend asset bundle compiles clean (no SCSS errors), zero
warnings on module upgrade, asset cache cleared for fresh delivery.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>