@hattisar/design-tokens 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "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,30 @@
      >=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: #f7f8fa;
   --color-background-card: #ffffff;
-  --color-surface-tint: #eef0f3;
-  --color-input: #fdfdfd;
-  --color-text-primary: #1c2127;
+  --color-surface-tint: #f0f2f6;
+  --color-input: #ffffff;
+  --color-text-primary: #10141a;
   /* ~6.4:1 on card */
-  --color-text-secondary: #56606f;
+  --color-text-secondary: #4b5563;
   /* ~4.6:1 on card — was #8f99a8 at 2.9:1, failing AA body text */
-  --color-text-muted: #6b7684;
+  --color-text-muted: #5f6874;
   /* 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: rgba(16, 20, 26, 0.09);
+  --color-border-strong: rgba(16, 20, 26, 0.16);
   --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(16, 20, 26, 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 +77,7 @@
   --accent-amber: #8a6600;
   --accent-bronze: #a35200;
   --accent-blue: #005bd3;
-  --accent-cyan: #007cb4;
+  --accent-cyan: #0a6d99;
   --accent-mint: #047b5d;
   --accent-fuchsia: #984062;
 
@@ -119,28 +127,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 +157,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 +173,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(16, 20, 26, 0.04);
+  --shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.05), 0 2px 8px -3px rgba(16, 20, 26, 0.08);
+  --shadow-md: 0 2px 4px -1px rgba(16, 20, 26, 0.04), 0 8px 20px -4px rgba(16, 20, 26, 0.12);
+  --shadow-lg: 0 4px 8px -2px rgba(16, 20, 26, 0.06), 0 20px 48px -12px rgba(16, 20, 26, 0.22);
 
   /* One shared tier for every FloatingPanel-based dropdown/menu
      (row actions, column picker, combobox, select, table-actions,
@@ -204,18 +223,30 @@
   --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. */
+  --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 +275,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 +320,22 @@
      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: #0d0f13;
+  --color-background-card: #16191e;
+  --color-surface-tint: #1f232a;
   --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: #e9ebef;
   /* ~7:1 on card */
-  --color-text-secondary: #9c9da5;
+  --color-text-secondary: #9ba4b2;
   /* ~4.7:1 on card — was #5f6b7c at 2.7:1, failing AA body text */
-  --color-text-muted: #7e7f87;
+  --color-text-muted: #8b94a2;
   /* 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: rgba(233, 235, 239, 0.10);
+  --color-border-strong: rgba(233, 235, 239, 0.18);
   --color-hover: var(--color-surface-tint);
 
   /* Brighter counterparts of :root's accent set — a dark badge fill
@@ -317,7 +348,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 +360,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: #0d0f13;
 
-  --shadow-btn-primary: none;
-  --shadow-btn-secondary: none;
+  --shadow-btn-primary: 0 1px 2px rgba(16, 20, 26, 0.12);
+  --shadow-btn-secondary: 0 1px 2px rgba(16, 20, 26, 0.05);
 
   --color-secondary-fill: var(--color-surface-tint);
   --color-secondary-border: var(--color-border-strong);
@@ -350,37 +381,41 @@
   --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;
+  /* 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);
 
   /* Deliberately NOT --color-background-card — the sidebar is now a
      distinct chrome rail, true black, sitting a full step below the
@@ -409,15 +444,15 @@
    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: #f7f8fa;
   --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: #f0f2f6;
+  --color-input: #ffffff;
+  --color-text-primary: #10141a;
+  --color-text-secondary: #4b5563;
+  --color-text-muted: #5f6874;
+  --color-border: rgba(16, 20, 26, 0.09);
+  --color-border-strong: rgba(16, 20, 26, 0.16);
   --color-hover: var(--color-surface-tint);
 
   --color-brand: var(--color-text-primary);
@@ -425,8 +460,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 +478,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: #10141a;
+  --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 +641,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 +773,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 +799,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-
@@ -751,10 +822,23 @@ select {
   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). */
+/* 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 +846,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 {