/* ============================================================================= AiBLE CRM — token delta for the shell + inquiry redesign PR 1 of 6. Loads LAST, after app.css, chat.css and theme.css. No markup changes. Fully revertable by deleting this file and its . Source: design_handoff_shell_and_inquiry/01-tokens.delta.css Adapted: call sites below were verified against the live build aiblecrm_deploy-6aa43fd1fc4c3ec7561da86e, not assumed. Scope: 2 changed values, 13 new tokens, 7 confirmed contrast bugs, 1 density correction. Everything else in the live :root is left alone — including the entire dark system, whose alpha tints and inset-top-edge elevation are better than the flat hexes in the design canvas. ========================================================================== */ :root { /* -- CHANGED 1 of 2 ------------------------------------------------------ --copper #b4632a is 3.9:1 on white and carries .crumb, which is the smallest tracked text in the app (10.5px, .13em). A live legibility bug. #a9581f clears 4.5:1 with no perceptual change. Dark mode's #e0965c is already fine and is NOT touched. */ --copper: #a9581f; --copper-solid: #a9581f; --copper-600: #8e4917; /* -- CHANGED 2 of 2 ------------------------------------------------------ --ink-3 #6d7c90 is 4.35:1 on white — just under AA — and it carries every column head, field label and helper line in the app. #5e6b78 is 5.5:1 on white and still 4.7:1 on --primary-50, which is what selected rows and pills sit on. Dark mode's #7d8da1 is 5.9:1 on --surface and is NOT touched. */ --ink-3: #5e6b78; /* -- NEW: foreground ON a filled brand ground ---------------------------- The app had no token for this, so ~20 components hardcoded #fff. theme.css already solved most of it by routing fills through --primary-solid / --red-solid, which stay dark enough for white text. Seven call sites were missed and fill with the raw --primary/--copper, which go LIGHT in dark mode. Those are corrected at the end of this file. New work should take its foreground from these tokens. */ --on-primary: #ffffff; --on-copper: #ffffff; --on-primary-2: #c8dcea; /* secondary text on a --primary fill */ --on-primary-line: #7fb0cf; /* hairline drawn on a --primary fill */ /* -- NEW: copper on the sidebar ----------------------------------------- The sidebar is dark in BOTH themes, so light-mode copper on it is 3.55:1 and fails. The "CRM" app label needs dark-mode copper regardless of the active theme. */ --copper-on-sidebar: #d1854a; /* -- NEW: nav icon chip fills ------------------------------------------- These are 18px squares carrying a white glyph, so they are FILLS, not text colours — they must not reuse --violet / --teal / --green, which are tuned for text and go light in dark mode. app.css hardcoded six of them (#3b6d2f, #b5751a, #6b4d8a, #2a7d8c, #a34a2d), which is why the sidebar never responded to the theme at all. */ --chip-blue: #2f6fa8; --chip-copper: #a9581f; --chip-green: #2f7a4f; --chip-violet: #6a4c93; --chip-teal: #0e7c73; --chip-amber: #8a5a06; --chip-red: #b3261e; --chip-slate: #4a5766; /* -- NEW: density as padding — see the correction block below ---------- */ --row-pad-y: 9px; --cell-pad-x: 12px; } :root[data-theme="dark"] { /* Chips hold mid-luminance in dark so the white glyph keeps working; nudged up slightly to sit correctly on the darker --surface. */ --chip-blue: #3d80bb; --chip-copper: #bf6526; --chip-green: #388c5b; --chip-violet: #7a59a6; --chip-teal: #148a80; --chip-amber: #9c6708; --chip-red: #c4362d; --chip-slate: #55636f; /* --primary is a light blue here, so ink ON it must be dark. */ --on-primary: #0a1018; --on-copper: #0a1018; --on-primary-2: #18425e; --on-primary-line: #2f6a91; /* Sidebar is dark in both themes — same value as light. */ --copper-on-sidebar: #d1854a; } /* ============================================================================= NAV CHIP FILLS app.css baked six of these as literals, so they never changed with the theme. Pointing them at the tokens above is the smallest change that makes the sidebar correct in dark mode. ========================================================================== */ .ic-blue { background: var(--chip-blue); } .ic-copper { background: var(--chip-copper); } .ic-green { background: var(--chip-green); } .ic-amber { background: var(--chip-amber); } .ic-purple { background: var(--chip-violet); } .ic-cyan { background: var(--chip-teal); } .ic-red { background: var(--chip-red); } .nav-ico { color: var(--on-primary); } /* ============================================================================= CONTRAST BUGS — seven confirmed call sites Each of these fills with the RAW --primary or --copper (not the -solid variant) and hardcodes color:#fff. In dark mode --primary is #74b8e8 and --copper is #e0965c, so white text on them lands near 1.6:1. These are live defects independent of the redesign. Every other #fff found in the grep is already routed through --primary-solid / --red-solid by theme.css and is correct as it stands. ========================================================================== */ /* 1. The avatar circle in the utility bar — most visible of the seven. */ .tm-av { color: var(--on-primary); } /* 2-3. Follow-up, call and task status chips. */ .fu-status.active, .act-chip.active, .task-chip.active { color: var(--on-primary); } /* 4. Command-palette selected row icon. */ .cx-pal-row.sel .cx-pal-ico { color: var(--on-primary); } /* 5. Recording scope toggle. */ .rec-toggle .rec-scope.active { color: var(--on-primary); } /* 6-7. Copper-filled portal button and approvals count. */ .portal-btn, .ap-count { color: var(--on-copper); } /* The app label on the dark sidebar. */ .brand-app { color: var(--copper-on-sidebar); } /* --cx-red is the Chemtex corporate mark and belongs only inside the login brand panel, never on a control. theme.css's dark block puts it on the Remember-me checkbox, which is the one violation. */ :root[data-theme="dark"] .login-remember input { accent-color: var(--primary); } /* Focus is never removed. theme.css already replaces the outline with box-shadow: var(--ring), which follows the border radius and is the better treatment — so this does NOT re-add an outline on top of it, which would draw two rings. The handoff offered the outline as a fallback for a codebase with no replacement; this one has one. Left as a guard only for elements that opt out of the ring. */ :focus-visible:not([class]) { outline: 2px solid var(--primary); outline-offset: 2px; } /* ============================================================================= DENSITY CORRECTION The live pair is: body { font-size: 13.5px; } /* app.css */ :root[data-density="compact"] { font-size: 12.5px; } /* theme.css */ Because body sets an absolute px, the compact rule never shrank body text at all — it only shrank things sized in rem/em, which is the exact set that must NOT shrink: tap targets, focus rings, the 44px mobile buttons and the icon chips. The density toggle has been doing the opposite of its job. Density is a ROW-HEIGHT decision, so drive it from padding. Two named steps, both on the 4px grid. The old 12.5px rule is left in place deliberately — it is harmless once root and body agree, and removing it is PR 4's job once both list pages have migrated. ========================================================================== */ :root { font-size: 13px; } :root[data-density="compact"] { font-size: 13px; /* neutralise 12.5 */ --row-pad-y: 4px; --cell-pad-x: 12px; } .tbl-wrap td { padding: var(--row-pad-y) var(--cell-pad-x); } .tbl-wrap thead th { padding: 8px var(--cell-pad-x); } :root[data-density="compact"] .tbl-wrap thead th { padding: 6px var(--cell-pad-x); } /* theme.css:828 already ships :root[data-density="compact"] .tbl-wrap td { padding-top/bottom: 5px } at specificity (0,2,1), which outranks the (0,1,1) rule above and would pin compact rows at 5px regardless of --row-pad-y. Matched here so the token is the single source of truth. Delete both in PR 4. */ :root[data-density="compact"] .tbl-wrap td { padding: var(--row-pad-y) var(--cell-pad-x); } /* ============================================================================= BASE SIZE 13.5px -> 13px SEPARATELY REVERTABLE. Delete this one block to keep everything else. At 13.5 every derived value lands on a half-pixel (13.5 x 1.45 = 19.575px line box), so row heights round inconsistently down a long table and dense rows look subtly uneven. 13px on a 4px grid gives predictable 20/24/28px row boxes. This is the widest-reaching line in PR 1. Nothing moves structurally, but every page gets marginally tighter. Review it on a long invoice list before keeping it. ========================================================================== */ body { font-size: 13px; }