@hattisar/design-tokens 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.6",
+  "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,21 +32,40 @@
      >=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: #f7f8fa;
+  --color-background-global: #f4f4f5;
   --color-background-card: #ffffff;
-  --color-surface-tint: #f0f2f6;
+  --color-surface-tint: #e8e8ea;
   --color-input: #ffffff;
-  --color-text-primary: #10141a;
+  --color-text-primary: #09090b;
   /* ~6.4:1 on card */
-  --color-text-secondary: #4b5563;
+  --color-text-secondary: #52525b;
   /* ~4.6:1 on card — was #8f99a8 at 2.9:1, failing AA body text */
-  --color-text-muted: #5f6874;
+  --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(16, 20, 26, 0.09);
-  --color-border-strong: rgba(16, 20, 26, 0.16);
+  --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);
@@ -54,7 +73,7 @@
      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: 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
@@ -191,10 +210,10 @@
      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);
+  --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,
@@ -227,6 +246,16 @@
      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;
 
@@ -320,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: #0d0f13;
-  --color-background-card: #16191e;
-  --color-surface-tint: #1f232a;
+  --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: #e9ebef;
+  --color-text-primary: #fafafa;
   /* ~7:1 on card */
-  --color-text-secondary: #9ba4b2;
+  --color-text-secondary: #d4d4d8;
   /* ~4.7:1 on card — was #5f6b7c at 2.7:1, failing AA body text */
-  --color-text-muted: #8b94a2;
+  --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, 235, 239, 0.10);
-  --color-border-strong: rgba(233, 235, 239, 0.18);
+  --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
@@ -360,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: #0d0f13;
+  --color-brand-text: #09090b;
 
-  --shadow-btn-primary: 0 1px 2px rgba(16, 20, 26, 0.12);
-  --shadow-btn-secondary: 0 1px 2px rgba(16, 20, 26, 0.05);
+  --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);
@@ -417,12 +451,15 @@
   --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
-     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 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 —
@@ -433,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;
 }
@@ -444,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: #f7f8fa;
+  --color-background-global: #f4f4f5;
   --color-background-card: #ffffff;
-  --color-surface-tint: #f0f2f6;
+  --color-surface-tint: #e8e8ea;
   --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-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);
@@ -517,7 +557,7 @@
   --shadow-lg: none;
 
   --sidebar-bg: var(--color-background-card);
-  --sidebar-text: #10141a;
+  --sidebar-text: #09090b;
   --sidebar-text-muted: var(--color-text-muted);
   --sidebar-active-bg: var(--color-surface-tint);
   --sidebar-active-text: var(--color-text-primary);
@@ -811,17 +851,118 @@ textarea::placeholder {
    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;
 }
 
+/* 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
@@ -1137,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;