/* ============================================================================================ KUI — Kapdaa UI token system (design-uplift Phase 1 · foundation) -------------------------------------------------------------------------------------------- The ONE source of truth for the design language: colour · spacing · type · radius · elevation · density · motion. Consumed by kui.css (components) and public/js/kapdaa_ui.js. ADDITIVE & non-breaking: the `--kui-*` surface tokens ALIAS onto the existing (already theme-aware) tokens in kapdaa.css (--bg/--panel/--line/--tx*), so the kit inherits light/dark for free and NOTHING in kapdaa.css changes. Migrating the old screens onto these tokens is a later phase; this file only establishes the system. Load order: kui-tokens → kui → kapdaa.css. ============================================================================================ */ :root { /* ---- Surface & text — INK AND PAPER (D-54, owner 2026-10-13). The brand's own monochrome: the kapdaa® wordmark, the sorting platform and the client portal are black and white, so the Desk is too. A neutral ground, white surfaces, ink text and an ink primary action; colour is kept for meaning only (stage, status, charts), as ISA-101 high-performance HMI asks. Same values as the portal's --k-* set. ------------------- */ --kui-bg: #f5f5f5; /* neutral page ground (the portal's --k-ground) */ --kui-panel: #ffffff; /* work surface */ --kui-panel-2: #fafafa; /* subtle inset / zebra / header fill */ --kui-line: #e5e5e5; --kui-line-strong: #d4d4d4; --kui-ink: #0a0a0a; /* ink — headings, strongest text, the primary action (19.8:1 on white) */ --kui-text: #262626; /* body (15.1:1 on white) */ --kui-text-soft: #525252; /* captions / secondary (7.2:1 on the ground) */ /* ---- The primary action is ink, not a hue: it leaves every colour free to mean something. Hover lightens. */ --kui-accent: #0a0a0a; --kui-accent-ink: #ffffff; --kui-accent-soft: #f0f0f0; /* selected row / active item fill */ --kui-accent-hover: #262626; /* Keyboard focus: one blue ring everywhere (5.6:1 on white), never used for anything else. */ --kui-focus: #2f6aa8; /* ---- The brand shell: the Desk's navigation sits on the ink of the brand photograph and login. */ --kui-shell: #151a21; --kui-shell-2: #1d232b; --kui-shell-line: #2a313b; --kui-shell-text: #e8e6e1; --kui-shell-muted: #9aa3ad; /* 14.0:1 and 6.8:1 on the shell */ /* ---- Status register — semantic, DELIBERATELY separate from the journey/stage hues --------- (journey colour = kapdaa.STAGE_COLOR in JS + .gate-badge--; status = these three) */ --kui-good: #15803d; --kui-good-tint: var(--go-tint, #f0fdf4); /* text-safe green, 5.0:1 */ --kui-warn: var(--warn, #b45309); --kui-warn-tint: var(--warn-tint, #fef3c7); --kui-alert: var(--alert, #b91c1c); --kui-alert-tint: var(--alert-tint, #fee2e2); /* Info = IEC "action / neutral information" blue — a CALMER slate-blue, NOT ERPNext's raw #2563eb chrome blue (which we retire: primary is the accent green, info is this softer blue). */ --kui-info: #2f6aa8; --kui-info-tint: #eaf2f9; /* Status text on its tint (a chip's words), ≥ 5.5:1; the brighter hue above stays for icons, dots and bars. */ --kui-warn-text: #8a5300; --kui-good-text: #166534; --kui-alert-text: #991b1b; --kui-info-text: #24548a; /* People on site (a visitor, not a vehicle or a load): its own quiet hue, apart from status and stage. */ --kui-people: #7a4a76; /* 5.6:1 on its 14% tint */ /* A neutral tint at rest (a kind tile with nothing to say): a step off the panel, apart from the selection fill. */ --kui-neutral-tint: #f0f0f0; /* ---- Journey/STAGE spectrum — the ONE canonical CSS source, mirroring kapdaa.STAGE_COLOR (JS) and the .gate-badge-- classes. Warm intake → cool processing → green output; this is FUNCTIONAL wayfinding colour (where material is), kept deliberately apart from the status register above. Dark values brighten so dots/labels read on the near-black ground. (test_ui_consistency asserts these stay in sync with the JS map.) */ --kui-stage-received: #c2410c; --kui-stage-presorting: #a16207; --kui-stage-presorted: #0f766e; --kui-stage-sorting: #0369a1; --kui-stage-sorted: #1e40af; --kui-stage-tearing: #6d28d9; --kui-stage-torn: #6d28d9; --kui-stage-blending: #a21caf; --kui-stage-finished: #4d7c0f; --kui-stage-dispatched: #475569; --kui-stage-sold: #047857; --kui-stage-onhold: #be185d; --kui-stage-disposed: #64748b; /* A stage chip's words: its hue deepened toward ink by this share (≥ 4.5:1 on the stage's pastel in both themes). */ --kui-stage-text: 78%; /* ---- Information colour (D-67, shared with the client portal): progress, meters and selection in one muted green; charts in the portal's management-approved series (the first soft for the past, deep for now). A stage is drawn soft: a pastel of its hue (.gate-badge--*, 13%) with its text in the stage colour. */ --kui-viz: #17674f; --kui-viz-soft: #a5c8b8; --kui-viz-tint: #eaf3ee; --kui-viz-text: #14543d; --kui-series-1: #34556f; --kui-series-1-soft: #c3d0db; --kui-series-2: #b8875f; --kui-series-3: #8b7ba3; --kui-series-4: #3b3936; /* ---- Aliases: names older Kapdaa styles used without a definition (they fell back to whatever the browser inherited). Each points at the token it meant, so it follows the theme. Prefer the canonical names. */ --kui-text-2: var(--kui-text-soft); --kui-text-3: var(--kui-text-soft); --kui-text-faint: var(--kui-text-soft); --kui-muted: var(--kui-text-soft); --kui-soft: var(--kui-text-soft); --kui-line-2: var(--kui-line-strong); --kui-ok-tint: var(--kui-good-tint); --kui-font: InterVariable, Inter, system-ui, sans-serif; --kui-accent-weak: color-mix(in srgb, var(--kui-accent) 25%, transparent); /* ---- Spacing — an 8pt scale (the system had none). Use these, never magic px. -------------- */ --kui-s0: 2px; --kui-s1: 4px; --kui-s2: 8px; --kui-s3: 12px; --kui-s4: 16px; --kui-s5: 24px; --kui-s6: 32px; --kui-s7: 48px; --kui-s8: 64px; /* ---- Type scale ---------------------------------------------------------------------------- */ --kui-fs-xs: 11px; --kui-fs-sm: 12px; --kui-fs-md: 13px; --kui-fs-base: 14px; --kui-fs-lg: 16px; --kui-fs-xl: 20px; --kui-fs-2xl: 26px; --kui-fs-3xl: 34px; --kui-lh-tight: 1.15; --kui-lh: 1.5; --kui-fw: 450; --kui-fw-med: 550; --kui-fw-bold: 680; --kui-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --kui-display: "Bricolage Grotesque", Inter, system-ui, sans-serif; /* headings, page titles, big numbers */ /* ---- Radius set ---------------------------------------------------------------------------- */ --kui-r-sm: 6px; --kui-r: 8px; --kui-r-lg: 12px; --kui-r-pill: 999px; /* one set with the portal */ /* ---- Elevation set (light-tuned; overridden for dark below) -------------------------------- */ --kui-e0: none; --kui-e1: 0 1px 2px rgba(20,24,28,.06), 0 1px 3px rgba(20,24,28,.05); --kui-e2: 0 2px 4px rgba(20,24,28,.07), 0 8px 20px rgba(20,24,28,.06); --kui-e3: 0 4px 10px rgba(20,24,28,.09), 0 16px 40px rgba(20,24,28,.10); /* ---- Density-by-distance — scales control padding/target size (wall · desk · handheld). Set --kui-density on a container: 1 = desk, 1.25 = handheld/wall (bigger targets). --------- */ --kui-density: 1; --kui-control-h: calc(var(--kui-ctl-office) * var(--kui-density)); /* buttons / inputs: the kit's desk size (ERPNext's own buttons too) */ --kui-tap: calc(44px * var(--kui-density)); /* min touch target */ --kui-field-h: 36px; /* inputs, selects and the search field on the Desk (48 px on touch, kui-shell.css) */ --kui-page-w: 1400px; /* the one content width when Full Width is off (it is on by default): every page */ --kui-ph-bar-h: 66px; /* the page header's one control row */ --kui-page-wide: 1920px; /* … and the ceiling with Full Width on: a row never runs past it on a 2560 px screen */ /* ---- Density (docs/23 §2b): one mode per page, set on its root by kapdaa.ui.pageMode (office unless the page says otherwise; a coarse pointer makes office touch). Control height · one-line table row · two-line list row · the smallest target · the smallest text. The modes' values: */ --kui-ctl-office: 36px; --kui-ctl-touch: 44px; --kui-ctl-station: 56px; --kui-ctl-gloved: 64px; --kui-row-table-office: 40px; --kui-row-table-touch: 48px; --kui-row-list-desk: 56px; --kui-row-list-station: 64px; --kui-row-list-gloved: 72px; --kui-target-office: 24px; --kui-target-touch: 44px; /* WCAG 2.5.8 minimum with a mouse; 44 for a finger */ /* … and the live values every kit part reads (office here; the mode classes below change them) */ --kui-ctl: var(--kui-ctl-office); --kui-row-table: var(--kui-row-table-office); --kui-row-list: var(--kui-row-list-desk); --kui-target: var(--kui-target-office); --kui-type-floor: 11px; /* the wall, read from 3–5 m on a 55" 1080p panel: px ≥ distance_mm / 200 / 0.73 / mm_per_px */ --kui-wall-text: 32px; --kui-wall-figure: 96px; /* the lobby kiosk's display sizes, above the scale's top step (its text and controls are on the scale) */ --kui-kiosk-title: 44px; --kui-kiosk-figure: 128px; --kui-kiosk-initials: 48px; /* ---- Motion (design plan §6, D-83): five durations, three curves; the eleven named motions in kui.css use only these. Nothing moves for more than 5 s; reduced motion keeps opacity and colour, never movement. ------------- */ --kui-t-fast: 120ms; --kui-t: 200ms; --kui-t-sheet: 320ms; --kui-t-fill: 600ms; --kui-t-glow: 1200ms; --kui-ease: cubic-bezier(.4, 0, .2, 1); /* standard */ --kui-ease-out: cubic-bezier(.2, 0, 0, 1); /* enter: decelerates into place */ --kui-ease-in: cubic-bezier(.3, 0, 1, 1); /* exit: accelerates away */ --kui-m-dist: 4px; --kui-m-scale: .98; /* how far an entering thing rises, how far a pressed one sinks */ /* ---- Registers (design plan §2–3, D-83). Floor (stations, gate, bays, kiosk, wall): flat, border-led, readable in glare. Office (Home, boards, lists, reports, records): a deeper ground with borderless panels lifted by shadow. The raw values live here (so every check reads them from :root); .kui-reg-floor / .kui-reg-office below pick them. kapdaa.ui.pageMode sets the page's register from its density, kapdaa_shell.js the body's from the route. */ --kui-bg-office: #eef0f2; --kui-panel-office: #ffffff; --kui-panel-2-office: #fafafa; /* the edge of a control (field, chip, outlined button): 3.45:1 on white, ≥ 3:1 on every ground (WCAG 1.4.11) — --kui-line (1.26:1) and --kui-line-strong (1.48:1) are dividers only */ --kui-line-ctl: #8a8a8a; /* the icon stroke: 1.5 at row and sidebar sizes (as Frappe's sidebar), 2 at 24 px and up and on the floor */ --kui-icon-stroke: 1.5; /* ---- Breakpoints (reference only — CSS can't read vars in @media; JS mirrors these) -------- */ --kui-bp-phone: 640px; --kui-bp-tablet: 1099px; --kui-bp-wide: 1280px; /* phone ≤ 640 · tablet 641–1099 · desk ≥ 1100 */ } /* Dark: the surface/text tokens already flip (they alias kapdaa.css, which flips), but the elevation shadows must go deeper/softer so cards read on a dark ground. */ /* Dark overrides. Two groups: (1) elevation shadows go deeper; (2) the STATUS register is re-tuned for a dark ground — the accent/status hues brighten (so text/dots read on dark) and their TINTS darken + desaturate (so an alert/warn card is a calm dark wash, not a glaring light-pink block). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* dark for dim stations and night shifts: ink ground, paper text, paper as the action */ --kui-bg: #111417; --kui-panel: #16191d; --kui-panel-2: #1b1f24; --kui-line: #2a2f35; --kui-line-strong: #3a4048; --kui-ink: #f5f5f5; --kui-text: #d8dadc; --kui-text-soft: #a3a8ad; --kui-accent: #f5f5f5; --kui-accent-ink: #0a0a0a; --kui-accent-soft: #24292f; --kui-accent-hover: #d8dadc; --kui-focus: #7aa7ff; --kui-shell: #0b0d10; --kui-shell-2: #13161a; --kui-shell-line: #22272e; --kui-e1: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.30); --kui-e2: 0 2px 5px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.38); --kui-e3: 0 5px 14px rgba(0,0,0,.46), 0 20px 48px rgba(0,0,0,.50); --kui-good: #4ade80; --kui-good-tint: #14271c; --kui-warn: #fbbf24; --kui-warn-tint: #2a2410; --kui-alert: #f87171; --kui-alert-tint: #2c1618; --kui-info: #60a5fa; --kui-info-tint: #12233b; --kui-warn-text: #fbbf24; --kui-good-text: #4ade80; --kui-alert-text: #fca5a5; --kui-info-text: #93c5fd; --kui-stage-text: 100%; /* the lifted dark stages already read on their pastel */ --kui-people: #c792c1; /* 5.5:1 on its tint on the dark panel */ --kui-neutral-tint: #2a2f35; --kui-bg-office: #0e1013; --kui-panel-office: #1b1f24; --kui-panel-2-office: #1f242a; --kui-line-ctl: #6b737c; /* stages lifted for the dark ground (text, dots and bars stay legible: ≥4.5:1 on the dark panel) */ --kui-stage-received: #fb923c; --kui-stage-presorting: #eab308; --kui-stage-presorted: #2dd4bf; --kui-stage-sorting: #7dd3fc; --kui-stage-sorted: #818cf8; --kui-stage-tearing: #a78bfa; --kui-stage-torn: #a78bfa; --kui-stage-blending: #e879f9; --kui-stage-finished: #a3e635; --kui-stage-dispatched: #94a3b8; --kui-stage-sold: #34d399; --kui-stage-onhold: #f472b6; --kui-stage-disposed: #94a3b8; --kui-viz: #6fc4a3; --kui-viz-soft: #2f5c4c; --kui-viz-tint: #13261f; --kui-viz-text: #a3dcc4; --kui-series-1: #8fb2cf; --kui-series-1-soft: #2c3e4d; --kui-series-2: #d9ab84; --kui-series-3: #b6a8d1; --kui-series-4: #c9c5bf; } } :root[data-theme="dark"] { --kui-bg: #111417; --kui-panel: #16191d; --kui-panel-2: #1b1f24; --kui-line: #2a2f35; --kui-line-strong: #3a4048; --kui-ink: #f5f5f5; --kui-text: #d8dadc; --kui-text-soft: #a3a8ad; --kui-accent: #f5f5f5; --kui-accent-ink: #0a0a0a; --kui-accent-soft: #24292f; --kui-accent-hover: #d8dadc; --kui-focus: #7aa7ff; --kui-shell: #0b0d10; --kui-shell-2: #13161a; --kui-shell-line: #22272e; --kui-e1: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.30); --kui-e2: 0 2px 5px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.38); --kui-e3: 0 5px 14px rgba(0,0,0,.46), 0 20px 48px rgba(0,0,0,.50); --kui-good: #4ade80; --kui-good-tint: #14271c; --kui-warn: #fbbf24; --kui-warn-tint: #2a2410; --kui-alert: #f87171; --kui-alert-tint: #2c1618; --kui-info: #60a5fa; --kui-info-tint: #12233b; --kui-warn-text: #fbbf24; --kui-good-text: #4ade80; --kui-alert-text: #fca5a5; --kui-info-text: #93c5fd; --kui-stage-text: 100%; /* the lifted dark stages already read on their pastel */ --kui-people: #c792c1; --kui-neutral-tint: #2a2f35; --kui-bg-office: #0e1013; --kui-panel-office: #1b1f24; --kui-panel-2-office: #1f242a; --kui-line-ctl: #6b737c; --kui-stage-received: #fb923c; --kui-stage-presorting: #eab308; --kui-stage-presorted: #2dd4bf; --kui-stage-sorting: #7dd3fc; --kui-stage-sorted: #818cf8; --kui-stage-tearing: #a78bfa; --kui-stage-torn: #a78bfa; --kui-stage-blending: #e879f9; --kui-stage-finished: #a3e635; --kui-stage-dispatched: #94a3b8; --kui-stage-sold: #34d399; --kui-stage-onhold: #f472b6; --kui-stage-disposed: #94a3b8; --kui-viz: #6fc4a3; --kui-viz-soft: #2f5c4c; --kui-viz-tint: #13261f; --kui-viz-text: #a3dcc4; --kui-series-1: #8fb2cf; --kui-series-1-soft: #2c3e4d; --kui-series-2: #d9ab84; --kui-series-3: #b6a8d1; --kui-series-4: #c9c5bf; } /* ---- Tier tuning (research-resolved hybrid) — ONE warm-tinted-neutral base, nudged by tier. A page/kiosk OPTS IN by setting data-tier on a container; unset = the balanced base above. FLOOR/kiosk pulls the ground a hair quieter + bumps touch targets (ISA-101 high-legibility, gloved hands); DESK allows a touch more warmth for prolonged analysis (Fiori/Redwood register). Establishes the mechanism; per-page wiring is a later step. Only the surface *tint* moves — the functional colour system is shared across tiers. ------------------------- */ [data-tier="floor"] { --kui-density: 1.25; /* bigger controls + touch targets on the floor; the palette is the same everywhere */ } /* On a touch screen a floor page (line kiosks, gate, reception, places, put-away, My Work, labels: kapdaa_shell.js sets body[data-tier] by route) takes a thumb or a glove: every control 48 px. With a mouse it keeps the desk's sizes. */ @media (pointer: coarse) { [data-tier="floor"] { --kui-control-h: 48px; --kui-tap: 48px; } } /* ---- Density modes (docs/23 §2b). A coarse pointer turns office into touch; station and gloved stay as they are. A page opting in also moves the kit's buttons (--kui-control-h) to its control height. ------------------------------ */ .kui-density-office { --kui-ctl: var(--kui-ctl-office); --kui-row-table: var(--kui-row-table-office); --kui-row-list: var(--kui-row-list-desk); --kui-target: var(--kui-target-office); --kui-control-h: var(--kui-ctl); } .kui-density-touch { --kui-ctl: var(--kui-ctl-touch); --kui-row-table: var(--kui-row-table-touch); --kui-row-list: var(--kui-row-list-desk); --kui-target: var(--kui-target-touch); --kui-control-h: var(--kui-ctl); } .kui-density-station { --kui-ctl: var(--kui-ctl-station); --kui-row-table: var(--kui-row-table-touch); --kui-row-list: var(--kui-row-list-station); --kui-target: var(--kui-target-touch); --kui-type-floor: 14px; --kui-control-h: var(--kui-ctl-touch); } .kui-density-gloved { --kui-ctl: var(--kui-ctl-gloved); --kui-row-table: var(--kui-row-table-touch); --kui-row-list: var(--kui-row-list-gloved); --kui-target: var(--kui-ctl-gloved); --kui-type-floor: 14px; --kui-control-h: var(--kui-ctl-gloved); } .kui-density-wall { --kui-type-floor: var(--kui-wall-text); } /* A station or a gloved tablet is read from a step back: no text under the 14 px floor, so the small type steps (meta, chips, secondary) all lift to it there; the hierarchy then rides on weight and colour (docs/23 §2b type roles). */ :is(.kui-density-station, .kui-density-gloved) { --kui-fs-xs: var(--kui-type-floor); --kui-fs-sm: var(--kui-type-floor); --kui-fs-md: var(--kui-type-floor); } @media (pointer: coarse) { /* after the modes, so it wins over office */ :root, .kui-density-office { --kui-ctl: var(--kui-ctl-touch); --kui-row-table: var(--kui-row-table-touch); --kui-target: var(--kui-target-touch); } } /* ---- Registers (design plan §2–3). A panel's resting edge and lift, the lead block's, from the page's register; a component reads var(--kui-panel-edge, …) / var(--kui-panel-e, …) so a page with no register keeps its old look. Office in dark: shadows don't read on a dark ground, so depth is a lighter surface and a hairline. --------------- */ .kui-reg-floor { --kui-panel-edge: var(--kui-line); --kui-panel-e: none; --kui-lead-edge: var(--kui-ink); --kui-lead-e: none; --kui-lead-bg: var(--kui-panel); --kui-icon-stroke: 2; } .kui-reg-office { --kui-bg: var(--kui-bg-office); --kui-panel: var(--kui-panel-office); --kui-panel-2: var(--kui-panel-2-office); --kui-panel-edge: transparent; --kui-panel-e: var(--kui-e1); --kui-lead-edge: transparent; --kui-lead-e: var(--kui-e2); --kui-lead-bg: var(--kui-panel); --kui-hover-e: var(--kui-e2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kui-reg-office { --kui-panel-edge: var(--kui-line); --kui-panel-e: none; --kui-lead-edge: var(--kui-line-strong); --kui-lead-e: none; --kui-lead-bg: var(--kui-panel-2); --kui-hover-e: none; } } :root[data-theme="dark"] .kui-reg-office { --kui-panel-edge: var(--kui-line); --kui-panel-e: none; --kui-lead-edge: var(--kui-line-strong); --kui-lead-e: none; --kui-lead-bg: var(--kui-panel-2); --kui-hover-e: none; } /* ---- The wide step (design plan §4): content 2000 px or wider (a 27" monitor, about 2240 px with the sidebar) lifts the type and the rows one step; kapdaa.ui.pageMode sets .kui-wide on the page from its own width. Fixed steps, never fluid type. Office only: a station's and a wall's sizes are set by their distance, not the width. --------------- */ .kui-wide:not(.kui-density-station):not(.kui-density-gloved):not(.kui-density-wall) { --kui-fs-xs: 12px; --kui-fs-sm: 13px; --kui-fs-md: 14px; --kui-fs-base: 15px; --kui-fs-lg: 18px; --kui-fs-xl: 24px; --kui-fs-2xl: 30px; --kui-fs-3xl: 40px; --kui-row-table: calc(var(--kui-row-table-office) + 8px); --kui-row-list: calc(var(--kui-row-list-desk) + 8px); } /* ---- D-83 step 3 (Home pilot): the row's reading span on a wide screen (design plan §4: identity → action at most 1120 px), and the words and marks on the brand ink (Home's day band): the dark theme's status values, which read on the shell in both themes (alert 9.9:1, warn 11:1, good 10:1, info 9.5:1 on --kui-shell), the meter in the viz soft (9.6:1), the "need you" pill in the info blue under white text (5.6:1). Fixed: the band is ink in light and dark. */ :root { --kui-row-span: 1120px; --kui-shell-paper: #f5f5f5; --kui-shell-alert: #fca5a5; --kui-shell-warn: #fbbf24; --kui-shell-good: #4ade80; --kui-shell-info: #93c5fd; --kui-shell-viz: #a5c8b8; --kui-shell-focus: #7aa7ff; --kui-shell-pill: #2f6aa8; --kui-shell-pill-text: #ffffff; }