@hattisar/design-tokens 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Shared design tokens (colors, type, radius, spacing, motion) and base primitives (reset, buttons, inputs, cards, modals, auth shell) for every Hattisar frontend.",
   "main": "tokens.css",
   "files": [

package/tokens.css

@@ -32,22 +32,49 @@
      >=4.5:1) and for a real 3-step surface ladder — surface-tint used
      to equal background-global exactly, which meant hover states had
      no visible target to land on. */
-  --color-background-global: #f6f7f9;
+  --color-background-global: #f4f4f5;
   --color-background-card: #ffffff;
-  --color-surface-tint: #eef0f3;
-  --color-input: #fdfdfd;
-  --color-text-primary: #1c2127;
+  --color-surface-tint: #e8e8ea;
+  --color-input: #ffffff;
+  --color-text-primary: #09090b;
   /* ~6.4:1 on card */
-  --color-text-secondary: #56606f;
+  --color-text-secondary: #52525b;
   /* ~4.6:1 on card — was #8f99a8 at 2.9:1, failing AA body text */
-  --color-text-muted: #6b7684;
+  --color-text-muted: #6b6b74;
   /* Derived from text-primary's own RGB (28,33,39) rather than a
      separately maintained literal, so border and text can never drift
      apart the way they used to (border was rgb(17,20,24), a different
      dark from text-primary's rgb(28,33,39)). */
-  --color-border: rgba(28, 33, 39, 0.1);
-  --color-border-strong: rgba(28, 33, 39, 0.2);
+  --color-border: #e4e4e7;
+  --color-border-strong: #d4d4d8;
+
+  /* Anything that floats over the page: dropdowns, menus, popovers,
+     modals, tooltips.
+     Reported: "we might need to add little background shadow for all
+     dropdown, popup so it differentiate from background. hard to view
+     now."
+     They all had a shadow already. The problem was that they were
+     painted --color-background-card and opened *over* cards — white on
+     white, separated by a 9%-alpha hairline and a shadow tuned so
+     softly it read as nothing. A surface only looks raised against
+     something.
+     So a floating surface gets its own tier: in dark it is a real step
+     above the card, and in light — where a popover over a white card
+     has nowhere lighter to go — the separation comes from a stronger
+     edge and a shadow with actual weight instead. */
+  --color-surface-raised: #ffffff;
+  --color-border-raised: #d4d4d8;
+  --shadow-popover: 0 4px 6px -2px rgba(9, 9, 11, 0.08), 0 12px 28px -8px rgba(9, 9, 11, 0.18);
+
   --color-hover: var(--color-surface-tint);
+  --color-focus-ring: rgba(233, 235, 239, 0.2);
+  --color-focus-ring-danger: rgba(255, 138, 156, 0.24);
+  /* The ring drawn around a focused control. Ink at low alpha rather
+     than a saturated blue: this palette has no brand hue, and a blue
+     ring here would be the one place colour appeared without meaning
+     anything — the ten status tiers are what colour is for. */
+  --color-focus-ring: rgba(9, 9, 11, 0.14);
+  --color-focus-ring-danger: rgba(199, 10, 36, 0.2);
 
   /* Named accents — the same 8 hues most of the status tiers below
      already used, promoted into reusable tokens instead of each tier repeating
@@ -69,7 +96,7 @@
   --accent-amber: #8a6600;
   --accent-bronze: #a35200;
   --accent-blue: #005bd3;
-  --accent-cyan: #007cb4;
+  --accent-cyan: #0a6d99;
   --accent-mint: #047b5d;
   --accent-fuchsia: #984062;
 
@@ -119,28 +146,28 @@
      computed. See StatusBadge.tsx for the status keyword -> tier
      mapping — ten distinct hues, deliberately no collisions. */
   --status-draft-text: var(--accent-slate);
-  --status-draft-bg: #f0f4f9;
+  --status-draft-bg: #eef1f6;
   --status-backordered-text: var(--accent-violet);
-  --status-backordered-bg: #f7ecfe;
+  --status-backordered-bg: #f3ecfd;
   --status-low-stock-text: var(--accent-amber);
-  --status-low-stock-bg: #ffd289;
+  --status-low-stock-bg: #fff1d9;
   /* Near-empty stock — more urgent than low-stock's reorder-point
      nudge, not yet fully out. Bg sits between low-stock's punchy
      amber-gold and out-of-stock's pale peach; text is --color-critical. */
   --status-critical-stock-text: var(--color-critical);
-  --status-critical-stock-bg: #ffe0c2;
+  --status-critical-stock-bg: #ffe7d1;
   --status-out-of-stock-text: var(--accent-bronze);
-  --status-out-of-stock-bg: #ffede1;
+  --status-out-of-stock-bg: #ffeee4;
   --status-partially-fulfilled-text: var(--accent-blue);
-  --status-partially-fulfilled-bg: #e7f2ff;
+  --status-partially-fulfilled-bg: #e8f1fe;
   --status-shipped-text: var(--accent-cyan);
-  --status-shipped-bg: #92e5ff;
+  --status-shipped-bg: #ddf0fb;
   --status-delivered-text: var(--accent-mint);
-  --status-delivered-bg: #ddf8d8;
+  --status-delivered-bg: #e1f5e6;
   --status-cancelled-text: var(--accent-fuchsia);
-  --status-cancelled-bg: #ffcbda;
+  --status-cancelled-bg: #fde7ee;
   --status-overdue-text: var(--color-danger);
-  --status-overdue-bg: #ffecee;
+  --status-overdue-bg: #feebec;
 
   /* Page-level warning/danger/success banners — distinct from the row
      badges above: a border plus a matching soft fill, no separate text
@@ -149,11 +176,11 @@
      repeating their own literal hex) so they can never drift out of
      sync the way they briefly did here. Success intentionally doesn't:
      it was never meant to mirror --color-success, it's its own shade. */
-  --banner-warning-bg: #fff1e3;
+  --banner-warning-bg: #fff3e6;
   --banner-warning-border: var(--color-warning);
-  --banner-danger-bg: #fee8eb;
+  --banner-danger-bg: #fdeaed;
   --banner-danger-border: var(--color-danger);
-  --banner-success-bg: #cdfed4;
+  --banner-success-bg: #e2f7e6;
   --banner-success-border: var(--color-success);
 
   /* A restrained scale, not flat — every step deliberately small, since
@@ -165,17 +192,28 @@
      remove-buttons inside chips, the settings toggle switch) — never
      applied to a badge/tag/chip just for a rounder look; those use
      --radius-sm like everything else (see .status-badge and friends). */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
-  --radius-xl: 12px;
+  --radius-xs: 5px;
+  --radius-sm: 7px;
+  --radius-md: 10px;
+  --radius-lg: 13px;
+  --radius-xl: 16px;
   --radius-full: 9999px;
 
-  --shadow-xs: none;
-  --shadow-sm: none;
-  --shadow-md: none;
-  --shadow-lg: none;
+  /* Depth, deliberately restrained. These were all `none`, which left
+     every surface separated by border alone — correct, legible, and
+     completely flat: a card, a dropdown and a modal all sat on the page
+     at exactly the same height. The 32 places already reaching for
+     these tokens were asking for a hierarchy the tokens declined to
+     give them.
+     Four tiers, each tied to a job: xs for a resting control, sm for a
+     card, md for anything that floats over the page (dropdowns,
+     popovers), lg for a modal. Tinted with the ink colour rather than
+     pure black so a shadow reads as the surface's own shade instead of
+     a grey smudge. */
+  --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
+  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05), 0 2px 8px -3px rgba(9, 9, 11, 0.08);
+  --shadow-md: 0 2px 4px -1px rgba(9, 9, 11, 0.04), 0 8px 20px -4px rgba(9, 9, 11, 0.12);
+  --shadow-lg: 0 4px 8px -2px rgba(9, 9, 11, 0.06), 0 20px 48px -12px rgba(9, 9, 11, 0.22);
 
   /* One shared tier for every FloatingPanel-based dropdown/menu
      (row actions, column picker, combobox, select, table-actions,
@@ -204,18 +242,40 @@
   --space-8: 32px;
   --space-10: 40px;
   --space-12: 48px;
-
-  /* Type scale — matches sizes already in use across the app (body
-     14.5px, h2 19px, h1 23px, ...) plus one new step (--text-3xl) for
-     bento hero stats. */
-  --text-xs: 12px;
-  --text-sm: 13.5px;
-  --text-base: 14.5px;
+  /* Two steps past the old ceiling, for the gaps that separate whole
+     regions of a page rather than elements inside one. Without them
+     every large gap in the app was a hardcoded number, and they were
+     all slightly different. */
+  /* The narrowest a form field may be before it stops being readable.
+     The document forms laid fields out as `flex: 1; minWidth: 140`,
+     which on a wide screen fits six controls onto one row at about
+     130px each — narrow enough to clip "Customer's own reference"
+     mid-word. Every form field grid is built on this instead. */
+  --field-min-width: 260px;
+  /* For a control whose value is a word, not a sentence — a variant
+     name, a unit, a percentage — inside a line-item row. */
+  --field-min-width-narrow: 140px;
+
+  --space-16: 64px;
+  --space-20: 80px;
+
+  /* Type scale. The old one grew out of whatever each screen happened
+     to be using — 13.5, 14.5, 15 — three steps inside a point and a
+     half of each other, which is not a scale, it is three sizes that
+     could not agree. This is a proper ~1.2 ratio off a 14px body, so
+     the steps are actually distinguishable and a heading reads as a
+     heading rather than as slightly larger body text.
+     Body moves 14.5 -> 14: at Inter's x-height 14px is the more
+     comfortable long-session size, and it buys back the density the
+     roomier spacing below spends. */
+  --text-xs: 11.5px;
+  --text-sm: 13px;
+  --text-base: 14px;
   --text-md: 15px;
   --text-lg: 17px;
-  --text-xl: 19px;
-  --text-2xl: 23px;
-  --text-3xl: 29px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
 
   /* A real weight scale — headings, card titles, and KPI/stat values
      use these to stand apart from the body text around them; dense
@@ -244,10 +304,10 @@
      --hd-card-bg as every card (bordered, not tonally separate),
      mirrored by dark theme's own literal Hattisar Design values below. */
   --sidebar-bg: var(--color-background-card);
-  --sidebar-text: #1c2127;
-  --sidebar-text-muted: #5f6b7c;
+  --sidebar-text: var(--color-text-primary);
+  --sidebar-text-muted: var(--color-text-muted);
   --sidebar-active-bg: var(--color-surface-tint);
-  --sidebar-active-text: #1c2127;
+  --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: var(--color-surface-tint);
   /* Icon tint for the active nav row — not a full fill, so
      --sidebar-active-bg/text above stay the "you're here" pill and
@@ -289,22 +349,27 @@
      sits below the hover/tint tier. Modest steps between each (not a
      dramatic jump) plus real borders is what keeps a dark theme
      reading crisp instead of washed out — see --color-border below. */
-  --color-background-global: #121214;
-  --color-background-card: #1b1b1f;
-  --color-surface-tint: #232328;
+  --color-background-global: #09090b;
+  --color-background-card: #18181b;
+  --color-surface-tint: #27272a;
   --color-input: var(--color-background-card);
   /* Not pure white — pure white text on a near-black surface causes
      halation (a glow/vibrate effect on the eye over long sessions).
      ~92% white instead. */
-  --color-text-primary: #e9e9ec;
+  --color-text-primary: #fafafa;
   /* ~7:1 on card */
-  --color-text-secondary: #9c9da5;
+  --color-text-secondary: #d4d4d8;
   /* ~4.7:1 on card — was #5f6b7c at 2.7:1, failing AA body text */
-  --color-text-muted: #7e7f87;
+  --color-text-muted: #a1a1aa;
   /* Derived from text-primary's own RGB (233,233,236) — same
      single-source-of-truth reasoning as :root's own --color-border. */
-  --color-border: rgba(233, 233, 236, 0.09);
-  --color-border-strong: rgba(233, 233, 236, 0.16);
+  --color-border: #27272a;
+  --color-border-strong: #3f3f46;
+  /* A genuine step above the card, which is what makes a dropdown read
+     as floating rather than pasted on. */
+  --color-surface-raised: #1f1f23;
+  --color-border-raised: #3f3f46;
+  --shadow-popover: 0 4px 6px -2px rgba(0, 0, 0, 0.5), 0 16px 40px -10px rgba(0, 0, 0, 0.75);
   --color-hover: var(--color-surface-tint);
 
   /* Brighter counterparts of :root's accent set — a dark badge fill
@@ -317,7 +382,7 @@
   --accent-violet: #d4ccff;
   --accent-amber: #ffc879;
   --accent-bronze: #ffab73;
-  --accent-blue: #4188ff;
+  --accent-blue: #7ba9ff;
   --accent-cyan: #91d0ff;
   --accent-mint: #2ced83;
   --accent-fuchsia: #ff9dbd;
@@ -329,10 +394,10 @@
   --color-brand: var(--color-text-primary);
   --color-brand-hover: color-mix(in srgb, var(--color-brand) 90%, black);
   --color-brand-active: color-mix(in srgb, var(--color-brand) 75%, black);
-  --color-brand-text: #121212;
+  --color-brand-text: #09090b;
 
-  --shadow-btn-primary: none;
-  --shadow-btn-secondary: none;
+  --shadow-btn-primary: 0 1px 2px rgba(9, 9, 11, 0.12);
+  --shadow-btn-secondary: 0 1px 2px rgba(9, 9, 11, 0.05);
 
   --color-secondary-fill: var(--color-surface-tint);
   --color-secondary-border: var(--color-border-strong);
@@ -350,44 +415,51 @@
   --color-success: var(--accent-mint);
 
   --status-draft-text: var(--accent-slate);
-  --status-draft-bg: #2a2d2f;
+  --status-draft-bg: #262a31;
   --status-backordered-text: var(--accent-violet);
-  --status-backordered-bg: #35294a;
+  --status-backordered-bg: #312747;
   --status-low-stock-text: var(--accent-amber);
-  --status-low-stock-bg: #43380f;
+  --status-low-stock-bg: #3f3411;
   --status-critical-stock-text: var(--color-critical);
-  --status-critical-stock-bg: #4a3010;
+  --status-critical-stock-bg: #452c12;
   --status-out-of-stock-text: var(--accent-bronze);
-  --status-out-of-stock-bg: #4a2c14;
+  --status-out-of-stock-bg: #452916;
   --status-partially-fulfilled-text: var(--accent-blue);
-  --status-partially-fulfilled-bg: #1c2c4a;
+  --status-partially-fulfilled-bg: #1b2740;
   --status-shipped-text: var(--accent-cyan);
-  --status-shipped-bg: #103846;
+  --status-shipped-bg: #0f3341;
   --status-delivered-text: var(--accent-mint);
-  --status-delivered-bg: #163c22;
+  --status-delivered-bg: #133620;
   --status-cancelled-text: var(--accent-fuchsia);
-  --status-cancelled-bg: #472233;
+  --status-cancelled-bg: #421f2f;
   --status-overdue-text: var(--color-danger);
-  --status-overdue-bg: #452023;
+  --status-overdue-bg: #401d21;
 
-  --banner-warning-bg: #412d00;
+  --banner-warning-bg: #3a2907;
   --banner-warning-border: var(--color-warning);
-  --banner-danger-bg: #5f0716;
+  --banner-danger-bg: #4a1119;
   --banner-danger-border: var(--color-danger);
-  --banner-success-bg: #073630;
+  --banner-success-bg: #0a3129;
   --banner-success-border: var(--color-success);
 
-  --shadow-xs: none;
-  --shadow-sm: none;
-  --shadow-md: none;
-  --shadow-lg: none;
-
-  /* Deliberately NOT --color-background-card — the sidebar is now a
-     distinct chrome rail, true black, sitting a full step below the
-     page canvas rather than matching the card surface. Common
-     enterprise-dark-theme pattern (VS Code's activity bar, Slack's
-     rail): the frame reads as structurally separate from content. */
-  --sidebar-bg: #000000;
+  /* A dark surface cannot be lifted by a soft grey shadow — there is
+     nothing lighter behind it to catch the light. So these go darker
+     and deeper than their light-theme counterparts, which is what
+     actually reads as elevation on a near-black page. */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px -3px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 8px 22px -4px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 24px 56px -12px rgba(0, 0, 0, 0.75);
+
+  /* A distinct chrome rail, still — but a step *above* the canvas now
+     rather than below it. It used to be true black under a #0d0f13
+     page, which read as a rail. Against zinc-950 the same black is
+     three values away from the page and the rail disappeared, so the
+     separation now comes from the other direction: zinc-900, the same
+     surface as a card, which is where shadcn puts a sidebar too.
+     The frame still reads as structurally separate from content, which
+     was the point of the original choice. */
+  --sidebar-bg: #18181b;
   --sidebar-text: var(--color-text-primary);
   --sidebar-text-muted: var(--color-text-muted);
   /* Two distinct white-overlay intensities on top of --sidebar-bg —
@@ -398,7 +470,7 @@
   --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
   --sidebar-active-icon: var(--sidebar-active-text);
-  --sidebar-rail-bg: #000000;
+  --sidebar-rail-bg: #18181b;
 
   color-scheme: dark;
 }
@@ -409,15 +481,18 @@
    takes the nearest declaration in the tree, so relying on :root
    alone would lose to a dark attribute set higher up. */
 [data-theme="light"] {
-  --color-background-global: #f6f7f9;
+  --color-background-global: #f4f4f5;
   --color-background-card: #ffffff;
-  --color-surface-tint: #eef0f3;
-  --color-input: #fdfdfd;
-  --color-text-primary: #1c2127;
-  --color-text-secondary: #56606f;
-  --color-text-muted: #6b7684;
-  --color-border: rgba(28, 33, 39, 0.1);
-  --color-border-strong: rgba(28, 33, 39, 0.2);
+  --color-surface-tint: #e8e8ea;
+  --color-input: #ffffff;
+  --color-text-primary: #09090b;
+  --color-text-secondary: #52525b;
+  --color-text-muted: #6b6b74;
+  --color-border: #e4e4e7;
+  --color-border-strong: #d4d4d8;
+  --color-surface-raised: #ffffff;
+  --color-border-raised: #d4d4d8;
+  --shadow-popover: 0 4px 6px -2px rgba(9, 9, 11, 0.08), 0 12px 28px -8px rgba(9, 9, 11, 0.18);
   --color-hover: var(--color-surface-tint);
 
   --color-brand: var(--color-text-primary);
@@ -425,8 +500,8 @@
   --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
   --color-brand-text: #ffffff;
 
-  --shadow-btn-primary: none;
-  --shadow-btn-secondary: none;
+  --shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-btn-secondary: 0 1px 2px rgba(0, 0, 0, 0.3);
 
   --color-secondary-fill: var(--color-surface-tint);
   --color-secondary-border: var(--color-border-strong);
@@ -443,43 +518,49 @@
   --color-success: #047b5d;
 
   --status-draft-text: var(--accent-slate);
-  --status-draft-bg: #f0f4f9;
+  --status-draft-bg: #eef1f6;
   --status-backordered-text: var(--accent-violet);
-  --status-backordered-bg: #f7ecfe;
+  --status-backordered-bg: #f3ecfd;
   --status-low-stock-text: var(--accent-amber);
-  --status-low-stock-bg: #ffd289;
+  --status-low-stock-bg: #fff1d9;
   --status-critical-stock-text: var(--color-critical);
-  --status-critical-stock-bg: #ffe0c2;
+  --status-critical-stock-bg: #ffe7d1;
   --status-out-of-stock-text: var(--accent-bronze);
-  --status-out-of-stock-bg: #ffede1;
+  --status-out-of-stock-bg: #ffeee4;
   --status-partially-fulfilled-text: var(--accent-blue);
-  --status-partially-fulfilled-bg: #e7f2ff;
+  --status-partially-fulfilled-bg: #e8f1fe;
   --status-shipped-text: var(--accent-cyan);
-  --status-shipped-bg: #92e5ff;
+  --status-shipped-bg: #ddf0fb;
   --status-delivered-text: var(--accent-mint);
-  --status-delivered-bg: #ddf8d8;
+  --status-delivered-bg: #e1f5e6;
   --status-cancelled-text: var(--accent-fuchsia);
-  --status-cancelled-bg: #ffcbda;
+  --status-cancelled-bg: #fde7ee;
   --status-overdue-text: var(--color-danger);
-  --status-overdue-bg: #ffecee;
+  --status-overdue-bg: #feebec;
 
-  --banner-warning-bg: #fff1e3;
+  --banner-warning-bg: #fff3e6;
   --banner-warning-border: var(--color-warning);
-  --banner-danger-bg: #fee8eb;
+  --banner-danger-bg: #fdeaed;
   --banner-danger-border: var(--color-danger);
-  --banner-success-bg: #cdfed4;
+  --banner-success-bg: #e2f7e6;
   --banner-success-border: #047b5d;
 
+  /* Deliberately still flat, unlike :root's. The only thing that pins
+     itself to light is a print page, and a shadow on paper is a grey
+     smear. This block exists to restate the light palette inside a dark
+     ancestor — it is a copy of :root's values by necessity (custom
+     properties cannot be re-pointed at another block), so anything
+     changed above has to be changed here too. */
   --shadow-xs: none;
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: none;
 
   --sidebar-bg: var(--color-background-card);
-  --sidebar-text: #1c2127;
-  --sidebar-text-muted: #5f6b7c;
+  --sidebar-text: #09090b;
+  --sidebar-text-muted: var(--color-text-muted);
   --sidebar-active-bg: var(--color-surface-tint);
-  --sidebar-active-text: #1c2127;
+  --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: var(--color-surface-tint);
   --sidebar-active-icon: var(--sidebar-active-text);
   --sidebar-rail-bg: var(--color-background-card);
@@ -600,9 +681,24 @@ td a:hover {
   font-weight: var(--font-weight-semibold);
 }
 
+/* A label should recede so the value it names is what gets scanned.
+   Medium weight at a step down from body, in secondary ink — quieter
+   than the data, still comfortably above AA. */
 label {
   font-size: var(--text-sm);
-  font-weight: 400;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+/* A required field says so once, here, rather than each form inventing
+   its own asterisk-or-not. Marked on the label so it reads before the
+   field rather than after it. */
+label[data-required]::after {
+  content: "*";
+  margin-left: 3px;
+  color: var(--color-danger);
+  font-weight: var(--font-weight-regular);
 }
 
 /* Primary action — highest-contrast neutral fill (--color-brand),
@@ -717,14 +813,24 @@ button:focus-visible {
   background: var(--color-destructive-hover);
 }
 
+/* font-family is inherited; size, weight and colour are stated.
+   `font: inherit` alone meant a field took its type from whatever
+   wrapped it — and most fields in this app are wrapped in their own
+   <label>, which is a step smaller and now medium weight. So a field
+   inside a label rendered at 13px and one outside at 14px, and the
+   label change would have made the wrapped ones semibold. The value a
+   person typed should look the same everywhere it appears. */
 input,
 select,
 textarea {
-  font: inherit;
+  font-family: inherit;
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
   width: 100%;
-  padding: 7px 10px;
-  margin-top: 4px;
-  border: 1px solid var(--color-border);
+  padding: 8px 12px;
+  margin-top: 6px;
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-sm);
   background: var(--color-input);
   color: var(--color-text-primary);
@@ -733,6 +839,11 @@ textarea {
     box-shadow 0.15s ease;
 }
 
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text-muted);
+}
+
 /* The browser's native select arrow renders at its own baseline/size
    per-OS (a mismatched-color chevron and off-center text) —
    appearance:none strips it entirely and this draws a fixed, always-
@@ -740,21 +851,135 @@ textarea {
    bottom padding is what actually centers the selected value; the
    native arrow's box was throwing that off by consuming space
    asymmetrically. The open option list itself stays OS-native — no
-   browser lets CSS reach inside it. */
-select {
+   browser lets CSS reach inside it.
+
+   `input[list]` gets the same chevron. It opens a dropdown of
+   suggestions exactly as a select does, but Chrome draws no affordance
+   for one at all — so a datalist field read as a plain text box while
+   sitting between two selects that both had an arrow. The difference
+   that remains, that you may also type a value not on the list, is the
+   right one to leave invisible: typing into a text box is
+   self-evidently allowed. */
+/* ------------------------------------------------------------------
+   Choosing one of something: four controls, one appearance.
+
+   They are four because they do different jobs, and collapsing them
+   would cost something real each time:
+
+     select            a closed set small enough to scroll. Cheap,
+                       native, keyboard- and mobile-friendly.
+     Combobox          a closed set too large to scroll — there are
+                       4,021 customers here, and a <select> of 4,021
+                       options is not a control, it is a punishment.
+     input[type=date]  a date. The native one carries the OS picker,
+                       typed entry, locale order and mobile wheels;
+                       a hand-built calendar loses all four and is a
+                       well-known accessibility swamp.
+
+   Which to reach for:
+     under ~15 fixed options, closed  -> select
+     anything else                    -> Combobox
+
+   Not input[list]. A datalist accepts typed values, which is why it
+   looked like the right control for an open set — but its suggestion
+   popup is drawn by the browser and no CSS reaches inside it, so the
+   field opens looking like nothing else on the page. Combobox's
+   `onCreate` covers the open set with the app's own dropdown: where
+   there is no table to insert into, "creating" is just accepting the
+   typed text (see ChannelSelect, VariantSelect).
+
+   What they share is the mark at the right-hand end that says "this
+   opens something", and it is the same mark in the same place on all
+   of them. It was not: the Combobox had none at all, so a customer or
+   a warehouse read as a plain text box beside fields that plainly
+   opened.
+   ------------------------------------------------------------------ */
+select,
+.combobox-input {
   appearance: none;
   -webkit-appearance: none;
-  line-height: normal;
   padding-right: 32px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23727676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
 }
 
-/* Focus state: just the field's own border switching to brand color —
-   no outline ring outside the field's edge (an outline-offset ring
-   there used to double up as a second, floating rectangle around the
-   input instead of reading as one focused box). */
+/* Only a native select needs this, and sharing it was a bug worth
+   recording. `line-height: normal` is here to re-centre a select's
+   text after appearance:none strips the native box — a select does not
+   honour the 1.4 the other fields use. A .combobox-input is a real
+   <input> and does, so inheriting `normal` (about 1.2) made it roughly
+   three pixels shorter than the text field and the date field beside
+   it: same padding, same border, visibly smaller box.
+
+   The chevron above is what the two share. The line-height is not. */
+select {
+  line-height: normal;
+}
+
+/* A date field's calendar button is drawn by the browser, not by us —
+   it cannot be swapped for the chevron above, but it can be given the
+   same weight and the same position, so a row of dates and selects
+   reads as one row of controls rather than two kinds. Sized and dimmed
+   to match; `color-scheme` (set on :root and both themes) is what
+   makes it and the popup follow the theme. */
+input[type="date"]::-webkit-calendar-picker-indicator {
+  opacity: 0.55;
+  cursor: pointer;
+  padding: 0;
+  margin-right: 2px;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+/* A button that carries no button chrome — a chevron toggle, a
+   "Forgot password?" link, an inline remove. Seven of these were made
+   bare by hand with `style={{ background: "none", border: "none",
+   padding: 0 }}`, and every one of them missed the same thing: the
+   bare `button` rule above also sets `box-shadow:
+   var(--shadow-btn-primary)`, which an inline background and border
+   do not clear.
+   That was invisible while every --shadow-* token was `none`. Turning
+   them on gave each of these buttons a floating rectangle its author
+   had explicitly tried to remove — the "extra layer" behind
+   "Additional information". Declared once here so the next one cannot
+   miss it. */
+.btn-bare {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: inherit;
+}
+
+.btn-bare:hover:not(:disabled) {
+  background: none;
+  box-shadow: none;
+  transform: none;
+}
+
+/* Focus: the border goes to brand ink and a soft ring is drawn *by the
+   field itself*, with box-shadow rather than outline.
+   The border alone was the previous answer, after an `outline` with an
+   offset had read as a second rectangle floating around the input. A
+   box-shadow spread follows the border-radius exactly, so it reads as
+   one thickened edge — which fixes the original complaint without
+   leaving keyboard users hunting for which field they are in. */
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px var(--color-focus-ring);
+}
+
+/* Kept for pointer focus too — a click into a field should still show
+   which one is live, just without the ring shouting. */
 input:focus,
 select:focus,
 textarea:focus {
@@ -762,6 +987,31 @@ textarea:focus {
   border-color: var(--color-brand);
 }
 
+/* A field the browser or the form has judged invalid.
+   There was no error state at all: a rejected field looked exactly
+   like an accepted one, and the only signal was whatever the server
+   said afterwards. :user-invalid rather than :invalid deliberately —
+   it waits until somebody has actually interacted, so an untouched
+   form does not open covered in red. */
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"],
+input:user-invalid,
+select:user-invalid,
+textarea:user-invalid {
+  border-color: var(--color-danger);
+}
+
+input[aria-invalid="true"]:focus-visible,
+select[aria-invalid="true"]:focus-visible,
+textarea[aria-invalid="true"]:focus-visible,
+input:user-invalid:focus-visible,
+select:user-invalid:focus-visible,
+textarea:user-invalid:focus-visible {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-danger);
+}
+
 input:disabled,
 select:disabled,
 textarea:disabled {
@@ -1028,10 +1278,10 @@ a.card:hover {
 }
 
 .modal-panel {
-  background: var(--color-background-card);
-  border: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-raised);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-popover);
   width: 100%;
   max-width: 640px;
   max-height: 80vh;