/* ================================================================ UI KIT — tokens.css The standard component library. Pairs with ~/Documents/UIUX-PLAYBOOK.md (this file implements it) and kit.js (behaviors). Root element: add class "tc" (theme container) to or app root. Themes: default = Slate. = warm variant. Customize per product: --accent trio + the --viz-* meaning-contract palette (validate per playbook §6). Touch nothing else lightly. ================================================================ */ .tc { --page:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --sidebar:#f7f7f8; --ink:#17171a; --ink-2:#55555e; --ink-3:#72727e; /* ink-3 ≥4.5:1 on page & surface (AA) */ --hairline:#e6e6ea; --hairline-2:#f0f0f2; --ring:rgba(23,23,26,.08); --shadow-c:23,23,26; --accent:#2770ce; --accent-ink:#1c5cab; --accent-bg:rgba(39,112,206,.08); /* accent 4.89:1 on surface (AA) */ /* ---------- meaning-contract slots (playbook §6) ---------- Every value below is CHOSEN by tools/palette-propose.js and CHECKED by tools/palette-check.js, whose own maths is proved by tools/palette-selftest.js against the 19 published CIEDE2000 pairs and the WCAG contrast boundaries. Nothing here was picked by eye. Re-run all three before changing a digit; the numbers are in checks/PALETTE-VALIDATION.md. What each slot MEANS — a contract, not a swatch set. Use a slot for its meaning or do not use it: --viz-1 the evidenced subject — confirmed, counted, signed for --viz-2 the same subject, PARTIALLY evidenced — provisional, or seen by discovery only. The middle step of the ordered run viz-1 → viz-2 → viz-mute, and it reads weaker on purpose. --viz-3 the counterparty — external, outbound, a vendor, the other side of a movement --viz-4 attention, NOT danger — the .st-warn dot. Amber. --viz-mute never assessed / never asked. Always hatched or stamped. --viz-track an empty track. Never a data mark. --viz-seq-1..5 ORDERED intensity: one hue, monotonic in L*, so it survives greyscale and all three dichromacies. Matrix and heat cells only, always with its legend. Measured, at the WORST of {normal, protanopia, deuteranopia, tritanopia}: every categorical pair ΔE ≥ 14.3 (gate is 12) every slot ≥ 3.15:1 on slate AND paper (gate is 3:1) ⚠ --viz-4 sits ΔE 9.7 from --lc-missing. No amber in sRGB clears 12 from that red at 3:1, so the two are separated by GEOMETRY instead: missing and broken-chain draw as an open gap with a dashed edge and a text plate, never as a filled amber segment. Red stays reserved. */ --viz-1:#2770ce; --viz-2:#797f97; --viz-3:#53a06a; --viz-4:#d76a00; --viz-mute:#b3b3bb; --viz-track:#ececef; --viz-seq-1:#dee5fd; --viz-seq-2:#b8c5f4; --viz-seq-3:#8ca4e7; --viz-seq-4:#5380d4; --viz-seq-5:#0759ab; --s-good:#0ca30c; --s-good-ink:#04790a; --warn:#eda100; --warn-ink:#b0500f; --danger:#d03b3b; --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.4,.44,1); --t-fast:150ms; --t-med:260ms; --t-slow:480ms; /* the entrance fade. Its own token because it is the ONE duration a person sits through before they can read the page: at --t-slow, with kit.js's stagger in front of it, a Dashboard filter change took 1,173ms to come back. See the reveal block in js/kit.js. */ --t-rv:240ms; --sans:system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; --r-card:12px; --r-ctl:8px; --topbar-h:54px; /* anything sticking under the topbar offsets by this, never a hardcoded 54 */ font-family:var(--sans); color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:14px; line-height:1.45; min-height:100vh; transition:background .35s ease,color .35s ease; } .tc[data-theme="paper"]{ --page:#f7f7f4; --surface:#fcfcfb; --surface-2:#f3f2ee; --sidebar:#f2f1ec; --ink:#141311; --ink-2:#52514e; --ink-3:#737166; /* AA on paper surface */ --hairline:#e7e6df; --hairline-2:#efeee8; --ring:rgba(20,19,17,.08); --shadow-c:20,19,17; --viz-mute:#b7b5ab; --viz-track:#edece6; } .tc *,.tc *::before,.tc *::after{box-sizing:border-box;margin:0;padding:0} .tc ::selection{background:rgba(39,112,206,.16)} /* ── ONE FOCUS INDICATOR PER CONTROL ───────────────────────────────────── THE RULE. Exactly one visible focus indicator per focused control, and this is it unless the control already has one of its own. Two kinds of control already do: one sitting in a container that lights up on :focus-within (.ak-in, .search, .at-search, .pop-flt …), and one with a :focus rule of its own (.inp, .sel, .field input …). Both used to draw their soft halo AND this hard ring inside it, which is the double ring the product owner photographed on the Ask box. HOW A CONTROL YIELDS. It declares `--focus-ring:none` on its OWN base rule — on the control, never on the wrapper, because the property inherits and a wrapper would silently strip the ring off every button inside it too (.ak-in holds the send button; .at-search holds Clear). `outline:0` is NOT how a control yields and never was: this rule sits at (0,2,0) and beat every one of those declarations, which is precisely how the two rings came to be drawn at once. WHERE NOTHING ELSE DRAWS ONE, THIS STAYS. It is the keyboard indicator. Deleting it would leave a keyboard user unable to see where they are, so a control that yields must be certain something else lights up — and a control whose own ring is switched off again (.kf-in.locked .inp) takes this one back explicitly. frontend/tools/verify-one-focus-ring.js is the guard that stops a future container drawing a second ring. border-radius:4px was here and has gone: it rounded the CONTROL, not the ring, so a focused pill (.ak-chip, 99px) squared off to 4px on focus. An outline follows the element's own radius in every browser this ships to. ──────────────────────────────────────────────────────────────────────── */ .tc :focus-visible{outline:var(--focus-ring,2px solid var(--accent));outline-offset:2px} /* forced-colors drops box-shadow, so every yielded control's halo disappears there. The outline survives, so in that mode it is drawn unconditionally. */ @media (forced-colors:active){.tc :focus-visible{outline:2px solid Highlight;outline-offset:2px}} :where(.tc) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :where(.tc) a{color:inherit;text-decoration:none} :where(.tc) svg{display:block} :where(.tc) input,:where(.tc) select,:where(.tc) textarea{font:inherit;color:inherit} /* ---------- app shell ---------- */ .shell{display:flex;min-height:100vh} .sb{position:sticky;top:0;align-self:flex-start;width:236px;height:100vh;flex:none;background:var(--sidebar);border-right:1px solid var(--hairline);display:flex;flex-direction:column;padding:14px 10px 12px;transition:width var(--t-med) var(--ease-out),background .35s ease;overflow:hidden} .shell.slim .sb{width:64px} .sb-brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px} .sb-logo{width:21px;height:26px;object-fit:contain;flex:none;transition:transform var(--t-med) var(--ease-spring)} .sb-brand:hover .sb-logo{transform:translateY(-1px) rotate(-4deg)} .sb-word{font-size:14.5px;font-weight:650;letter-spacing:-.015em;white-space:nowrap} .sb-word small{display:block;font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--ink-3);margin-top:-1px} .sb-nav{flex:1;display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .sb-nav::-webkit-scrollbar{display:none} .nav-it{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:7px;color:var(--ink-2);font-size:13px;font-weight:500;white-space:nowrap;position:relative;transition:background var(--t-fast) ease,color var(--t-fast) ease} .nav-it:hover{background:var(--surface-2);color:var(--ink)} .nav-it .nv-ic{flex:none;width:17px;height:17px;color:var(--ink-3);transition:color var(--t-fast) ease,transform var(--t-med) var(--ease-spring)} .nav-it:hover .nv-ic{color:var(--ink)} /* ⚠ A FACE IS PART OF SOMETHING — DRAW IT THAT WAY. The Store rail read Today · Goods-in · Stock · Staging · Defectives · Movements: six peers, when Staging and Defectives are faces OF Stock. Procurement had the same shape under Purchasing. Read at a glance it said the product has six desks, which is not true and is exactly the "too many sections" the rail was supposed to stop. A face now sits indented under whatever heads it — a parent item where there is one, or the section label where the seat opens straight onto a face (Finance, Compliance). One idea, one mechanism. */ .nav-it.sub{height:29px;padding-left:30px;font-size:12.5px} .nav-it.sub .nv-ic{width:15px;height:15px;opacity:.8} /* the hairline that ties a run of faces to the item above them */ .nav-it.sub::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:1.5px;background:var(--hairline)} .nav-it.sub:first-of-type::before{top:4px} .shell.slim .nav-it.sub{padding-left:0;height:32px} .shell.slim .nav-it.sub::before{display:none} .nav-it .lbl{overflow:hidden;transition:opacity var(--t-fast) ease} .shell.slim .nav-it .lbl,.shell.slim .badge,.shell.slim .sb-word,.shell.slim .nav-sec{opacity:0;pointer-events:none} .shell.slim .nav-it{justify-content:center;padding:0} .shell.slim .sb-brand{justify-content:center;padding-left:0;padding-right:0} .nav-it.active{background:var(--surface);color:var(--ink);font-weight:600;border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(var(--shadow-c),.05)} .nav-it.active .nv-ic{color:var(--accent)} .badge{margin-left:auto;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:var(--accent-bg);border-radius:99px;padding:1px 7px;transition:opacity var(--t-fast) ease} .badge.warn{color:var(--warn-ink);background:rgba(237,161,0,.12)} .nav-sec{padding:14px 8px 5px;font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;transition:opacity var(--t-fast) ease} .sb-foot{border-top:1px solid var(--hairline);padding-top:10px;margin-top:8px;display:flex;flex-direction:column;gap:2px} .user-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;transition:background var(--t-fast) ease} .user-card:hover{background:var(--surface-2)} .u-av{width:28px;height:28px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--accent),#7a3ff2);color:#fff;font-size:10.5px;font-weight:650;display:grid;place-items:center} .u-meta{min-width:0;transition:opacity var(--t-fast) ease} .shell.slim .u-meta,.shell.slim .u-gear{opacity:0;width:0} .u-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .u-role{font-size:11px;color:var(--ink-3)} .u-gear{margin-left:auto;color:var(--ink-3);transition:transform .6s var(--ease-spring),color var(--t-fast) ease,opacity var(--t-fast) ease} .user-card:hover .u-gear{transform:rotate(90deg);color:var(--ink)} .main{flex:1;min-width:0} .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--page) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--hairline)} .topbar-in{max-width:1156px;margin:0 auto;padding:0 26px;height:var(--topbar-h);display:flex;align-items:center;gap:12px} .crumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)} .crumbs b{color:var(--ink);font-weight:600} .crumbs svg{color:var(--hairline)} .sb-toggle{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);transition:background var(--t-fast) ease,color var(--t-fast) ease;margin-left:-8px} .sb-toggle:hover{background:var(--surface-2);color:var(--ink)} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px} .wrap{max-width:1156px;margin:0 auto;padding:0 26px 56px} /* Work surfaces — queues, worklists, wide tables, split doc+data, dashboards — run full width to the rail. Reading surfaces keep the capped .wrap above. See playbook §1 "Content width is a function of surface type". */ .wrap.wide{max-width:none;padding:0 32px 56px} .topbar-in.wide{max-width:none;padding:0 32px} /* Cap the measure on prose inside a wide surface, never the page itself. */ .wrap.wide .measure{max-width:72ch} /* ---------- controls ---------- */ .seg{position:relative;display:flex;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-ctl);padding:2px} .seg-thumb{position:absolute;top:2px;bottom:2px;left:0;width:60px;background:var(--surface);border:1px solid var(--hairline);border-radius:6px;box-shadow:0 1px 2px rgba(var(--shadow-c),.06);transition:transform var(--t-med) var(--ease-spring),width var(--t-med) var(--ease-spring)} .seg button{position:relative;z-index:1;padding:3.5px 13px;font-size:12.5px;font-weight:500;color:var(--ink-3);border-radius:6px;transition:color var(--t-fast) ease} .seg button.on{color:var(--ink)} .seg button:hover:not(.on){color:var(--ink-2)} .search{display:flex;align-items:center;gap:8px;width:170px;height:31px;padding:0 10px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-ctl);color:var(--ink-3);font-size:12.5px;transition:width var(--t-med) var(--ease-out),border-color var(--t-fast) ease,box-shadow var(--t-fast) ease;cursor:pointer} .search:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--hairline))} .search:focus-within{width:230px;border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline));box-shadow:0 0 0 3px var(--accent-bg)} /* .search is two things. On Messages and Reports it WRAPS an input, and the input yields the global ring below. In the top bar it IS the control — a button that opens the palette — so :focus-within above lights up the very element that is focused, and that element has to yield instead. Written as button.search so the wrapper form is untouched: putting the token on bare .search would strip the ring off anything focusable inside the wrapper. */ button.search{--focus-ring:none} .search input{--focus-ring:none;border:0;outline:0;background:none;width:100%;font:inherit;color:var(--ink)} .search input::placeholder{color:var(--ink-3)} .kbd{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--ink-3);border:1px solid var(--hairline);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--surface-2)} .icon-btn{position:relative;width:31px;height:31px;border-radius:var(--r-ctl);display:grid;place-items:center;color:var(--ink-2);border:1px solid transparent;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease} .icon-btn:hover{background:var(--surface);border-color:var(--hairline);color:var(--ink)} .icon-btn .dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--accent);border:1.5px solid var(--page)} @keyframes ring{0%{rotate:0deg}22%{rotate:12deg}45%{rotate:-9deg}65%{rotate:5deg}82%{rotate:-2deg}100%{rotate:0deg}} .icon-btn:hover .bell{animation:ring .7s var(--ease-spring);transform-origin:50% 15%} .btn{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 13px;border-radius:var(--r-ctl);font-size:12.5px;font-weight:550;border:1px solid var(--hairline);background:var(--surface);color:var(--ink-2);transition:all var(--t-fast) ease;cursor:pointer} .btn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 20%,var(--hairline));box-shadow:0 1px 2px rgba(var(--shadow-c),.06)} .btn:active{transform:scale(.97);transition-duration:60ms} .btn.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)} .btn.primary:hover{opacity:.88;color:var(--surface)} .btn.accent{background:var(--accent);border-color:var(--accent);color:#fff} .btn.accent:hover{background:var(--accent-ink);color:#fff} .btn.danger:hover{color:var(--danger);border-color:var(--danger)} .btn.sm{height:26px;padding:0 10px;font-size:11.5px} .btn.ghost{border-color:transparent;background:transparent} .btn.ghost:hover{background:var(--surface-2);box-shadow:none} .fld{display:flex;flex-direction:column;gap:5px} /* Focus is a conversation: the label wakes with its field, the ring blooms out on a spring, the placeholder steps back for the typed answer. */ .fld>label{font-size:11.5px;font-weight:600;color:var(--ink-2);transition:color var(--t-fast) ease} .fld:focus-within>label{color:var(--accent-ink)} .fld .hint{font-size:11px;color:var(--ink-3);font-weight:400} .inp,.sel{--focus-ring:none;height:32px;padding:0 10px;border:1px solid var(--hairline);border-radius:var(--r-ctl);background:var(--surface);font-size:12.5px;color:var(--ink);outline:0;transition:border-color var(--t-fast) ease,box-shadow var(--t-med) var(--ease-spring),background-position var(--t-fast) var(--ease-out);-webkit-appearance:none;appearance:none} .inp:hover:not(:focus),.sel:hover:not(:focus){border-color:color-mix(in srgb,var(--ink) 18%,var(--hairline))} .inp:focus,.sel:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));box-shadow:0 0 0 3.5px var(--accent-bg),0 1px 2px rgba(var(--shadow-c),.05)} .inp::placeholder{color:var(--ink-3);opacity:1;transition:opacity var(--t-fast) ease} .inp:focus::placeholder{opacity:.4} .sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px top 50%;padding-right:26px} .sel:focus{background-position:right 9px top 60%} /* the chevron dips: "about to drop open" */ /* ---------- every native dropdown, not only the ones that remembered ---------- 43 hand-authored written with no class at all still arrives dressed. These are `.tc select`, not `:where(.tc) select`. A zero-specificity net was tried first and rendered wrong: the reset at the top of this file is `.tc *{box-sizing:border-box;margin:0;padding:0}` at (0,1,0), which beats anything weaker, so every control came out with padding:0 and the chevron sat on top of the option text. (0,1,1) clears the reset and still loses a tie to any surface rule, which is injected into after this file. [multiple] is excluded throughout. A list box is not a dropdown: it has no arrow to replace, and a 32px box with a single-line padding would clip the rows that are the whole point of it. --------------------------------------- */ .tc select:where(:not([multiple])){--focus-ring:none;height:32px;padding:0 26px 0 10px;font-weight:400;border:1px solid var(--hairline);border-radius:var(--r-ctl);background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px top 50%;font-size:12.5px;color:var(--ink);outline:0;-webkit-appearance:none;appearance:none;transition:border-color var(--t-fast) ease,box-shadow var(--t-med) var(--ease-spring),background-position var(--t-fast) var(--ease-out)} .tc select:where(:not([multiple])):hover:not(:focus){border-color:color-mix(in srgb,var(--ink) 18%,var(--hairline))} .tc select:where(:not([multiple])):focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));box-shadow:0 0 0 3.5px var(--accent-bg),0 1px 2px rgba(var(--shadow-c),.05);background-position:right 9px top 60%} /* the standing net: .inp's `background` shorthand wipes the chevron out, so any select that names .inp — and any call site that makes the same slip tomorrow — has it put back here rather than losing its only affordance in silence. */ select.inp:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px top 50%;padding-right:26px} select.inp:not([multiple]):focus{background-position:right 9px top 60%} /* a list box keeps its rows and its own native scroll */ .tc select[multiple]{--focus-ring:none;height:auto;min-height:76px;padding:5px 6px;font-weight:400;border:1px solid var(--hairline);border-radius:var(--r-ctl);background:var(--surface);font-size:12.5px;color:var(--ink);outline:0} .tc select[multiple]:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));box-shadow:0 0 0 3.5px var(--accent-bg)} /* ---------- forms: the layout the markup was already written for ---------- .form-grid (ten forms across purchasing.js and compliance.js), .field (sixteen call sites across messages.js, import.js and estate-history.js), .field-lbl, .fld-l and .err were all written against rules this stylesheet never carried. With no rule to read, `` is inline flow, so the NEXT label's text wraps onto the end of the PREVIOUS input's line: "Raise an order" rendered as "Vendor [select] Site / [Bangalore] Equipment / [Laptop] Quantity". The intent was in the markup the whole time — several of those labels carry style="grid-column:1/-1", which means nothing at all outside a grid. Nothing below invents a second field language. Every metric is .fld/.inp/ .sel above, reused, so a control that names a class and a control that does not are the same object on screen. The collapse to one column is a CONTAINER query — the technique kit-viz.css's .rb already uses — not a viewport one. These forms open both inside the 420px .drawer and on a full-width page, and a media query cannot tell those two apart: on a wide screen it would leave the drawer two columns wide, which is precisely the case that is unreadable. -------------------------------------------------------------------------- */ .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 14px;align-items:end;container-type:inline-size} /* a field takes one column; everything else a form carries — the error line, the hint, the submit button — is a row of its own. An inline style="grid-column:1/-1" on a label still outranks both of these. */ .form-grid>*{grid-column:1/-1} .form-grid>label{grid-column:auto} .form-grid>button{justify-self:start} /* A container query styles the container's CHILDREN, never the container itself, so "one column" is expressed as "every field spans the whole row" rather than as a template change on .form-grid. Same result, and it is the only form of it that actually applies. */ @container (max-width:430px){.form-grid>label{grid-column:1/-1}} /* The label stack — .fld's 5px gap and 11.5px/600 label, including the label waking with its field on focus. .field is the same object with a carrying the text instead of a bare text node; .fld-l and .field-lbl are that span. Both were written as spans on purpose: the wrapper is itself a