@hattisar/design-tokens 0.3.22 → 0.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "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

@@ -66,7 +66,10 @@
   --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);
+  /* The one hover fill for every surface: a faint veil of the ink over
+     whatever it sits on, so it never reads as a second grey competing
+     with a header band or a card (those use --color-surface-tint). */
+  --color-hover: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
   --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
@@ -128,7 +131,7 @@
      --color-surface-tint/--color-border-strong/--color-text-primary
      rather than their own literal hex, so the secondary button always
      tracks the same neutral scale as the rest of the page. */
-  --color-secondary-fill: var(--color-surface-tint);
+  --color-secondary-fill: var(--color-background-card);
   --color-secondary-border: var(--color-border-strong);
   --color-secondary-text: var(--color-text-primary);
   --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
@@ -260,6 +263,40 @@
      and the gray column-header band right below ("search area look very
      tight"). One token so the tiles and the toolbar can't drift apart. */
   --toolbar-row-height: 48px;
+  /* The pinned page header on a list page (title + actions), and what the
+     table's column headers stick beneath. */
+  --page-heading-height: 52px;
+
+  /* Buttons, after Shopify's admin: a fully rounded pill, 28px tall,
+     medium-weight small type. One set of numbers for every button the
+     app draws (primary, secondary, destructive, the save bar). */
+  --button-height: 28px;
+  --button-radius: var(--radius-full);
+  --button-padding-x: var(--space-3);
+  --button-font-size: var(--text-sm);
+  --button-font-weight: var(--font-weight-medium);
+
+  /* The big rounded containers on a list page, after Shopify's Orders
+     page: the KPI strip, the search bar and the table card all share it. */
+  --list-card-radius: var(--radius-xl);
+  /* A table row under the cursor: a faint veil of the ink, deliberately
+     lighter than the header band (--color-surface-tint) so the two never
+     read as the same grey. */
+  --table-row-hover-bg: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
+  /* The secondary button's surface, named once so every control that is a
+     secondary button in all but markup (More Actions, the dashboard
+     filters, the close x) reads the same two tokens as .btn-secondary
+     instead of keeping a private copy of the look. A white pill needs a
+     hairline of its own to read against the page. Primary is simply the
+     bare `button` rule (--color-cta). */
+  --button-secondary-bg: var(--color-secondary-fill);
+  --button-secondary-shadow: var(--shadow-btn-secondary), 0 0 0 1px var(--color-border);
+
+  /* The picture picker (ImagePicker.tsx) behind an item image, the org
+     logo and both user photos. Named so those four can't drift apart. */
+  --image-picker-size: 96px;
+  --image-picker-border: 1px dashed var(--color-border);
+  --image-picker-overlay: color-mix(in srgb, var(--color-background-card) 55%, transparent);
 
   /* Depth, deliberately restrained. These were all `none`, which left
      every surface separated by border alone — correct, legible, and
@@ -405,33 +442,46 @@
   /* 58px, not 52 — asked for directly, matched against a reference
      layout's own header height so this app's chrome proportions read
      the same. */
-  --header-height: 58px;
+  --header-height: 8px;
+  /* Height of a title bar inside a panel or drawer (notifications,
+     support). Was --header-height before the top bar left the desktop
+     shell and that token shrank to the frame's own 4px + 4px margins. */
+  --panel-header-height: 58px;
 
   /* Exact Hattisar Design match — aside/header sit at the same white
      --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: var(--color-text-primary);
-  --sidebar-text-muted: var(--color-text-muted);
-  --sidebar-active-text: var(--color-text-primary);
-  --sidebar-hover-bg: var(--color-surface-tint);
-  /* Accent ink for the row you are on: icon, label and a 3px left bar
-     all take this, and nothing takes it as a fill. --color-cta-on-
-     surface rather than --color-cta itself because this sits on a
-     white rail: measured, 3973d4 lands at 4.59:1 against it and
-     4285f4 at 3.56:1, so the unmodified CTA blue would miss AA for
-     normal text on the one rail it appears on most.
-
-     Was var(--sidebar-active-text), i.e. --color-text-primary, which
-     made it the same near-black as every other row's hover state and
-     so no accent at all. The active row had a pill fill to lean on
-     instead, except that in light theme the fill token and
-     --sidebar-hover-bg were both --color-surface-tint — so the page
-     you were on and whatever row the cursor happened to be over were
-     pixel-identical. That fill token is gone; both secondary rails
-     already read this one, so all three navs now share one accent. */
-  --sidebar-active-ink: var(--color-cta-on-surface);
-  --sidebar-rail-bg: var(--color-background-card);
+  /* The sidebar is dark chrome in every theme, built only from the
+     palette above: its fill is the theme's own near-black and its ink the
+     theme's own near-white, and every other shade is a mix of those two
+     (so a theme change re-tints all of them from one pair of tokens). */
+  --sidebar-bg: var(--color-text-primary);
+  --sidebar-active-text: var(--color-background-card);
+  --sidebar-text: color-mix(in srgb, var(--sidebar-active-text) 88%, var(--sidebar-bg));
+  --sidebar-text-muted: color-mix(in srgb, var(--sidebar-active-text) 70%, var(--sidebar-bg));
+  /* Hover (and the current row's fill), the dividers, and the search /
+     input fill: a veil of the ink over the chrome. */
+  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-active-text) 10%, transparent);
+  --sidebar-border: color-mix(in srgb, var(--sidebar-active-text) 14%, transparent);
+  --sidebar-input-bg: var(--sidebar-hover-bg);
+  /* The row you are on: the full ink on the same fill hover uses, the
+     weight doing the rest. */
+  --sidebar-active-ink: var(--sidebar-active-text);
+  --sidebar-rail-bg: var(--sidebar-bg);
+  /* The one background every popout shares (account menu, notifications,
+     support, the collapsed rail's hover menu, the search popup): the
+     sidebar colour one step lighter, so a popout reads as lifted off
+     the dark chrome rather than merging into it. */
+  --popout-bg: color-mix(in srgb, var(--sidebar-active-text) 12%, var(--sidebar-bg));
+
+  /* Sidebar and popout dimensions, named once. */
+  --sidebar-icon-size: 20px;
+  --sidebar-control-height: 36px;
+  --sidebar-badge-size: 22px;
+  --sidebar-avatar-size: 28px;
+  --popout-min-width: 180px;
+  --search-popup-width: 640px;
+  --mobile-nav-width: 350px;
 
   /* Every left-hand nav rail in an app sharing this one width instead
      of each picking its own. 260px, not 240 — asked for directly,
@@ -439,7 +489,7 @@
      layout's own sidebar width, the same reason --header-height above
      moved too. */
   --sidebar-width: 260px;
-  --sidebar-width-collapsed: 64px;
+  --sidebar-width-collapsed: 56px;
   --sidebar-height: calc(100vh - var(--header-height));
 
   /* Two widths, because a page is one of two things.
@@ -520,7 +570,7 @@
   --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);
+  --color-hover: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
 
   /* Brighter counterparts of :root's accent set — a dark badge fill
      needs a light/saturated text color for contrast, the mirror image
@@ -618,16 +668,11 @@
      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);
+  /* Dark theme: a fill one step below the page canvas (so the page frame
+     still reads against it) and the theme's own ink; every other sidebar
+     shade is the :root mix of the two. */
+  --sidebar-bg: color-mix(in srgb, var(--color-background-global) 40%, black);
   --sidebar-active-text: var(--color-text-primary);
-  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
-  /* --color-cta is brand ink now (see :root's own --color-cta) — this
-     "current row" marker used to lean on the accent blue clearing AA
-     on #18181b without the on-surface variant's extra darkening. */
-  --sidebar-active-ink: var(--color-cta);
-  --sidebar-rail-bg: #18181b;
 
   color-scheme: dark;
 }
@@ -650,7 +695,7 @@
   --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-hover: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
 
   --color-brand: var(--color-text-primary);
   --color-brand-hover: color-mix(in srgb, var(--color-brand) 85%, black);
@@ -667,7 +712,7 @@
   --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-fill: var(--color-background-card);
   --color-secondary-border: var(--color-border-strong);
   --color-secondary-text: var(--color-text-primary);
   --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
@@ -722,13 +767,8 @@
   --shadow-md: none;
   --shadow-lg: none;
 
-  --sidebar-bg: var(--color-background-card);
-  --sidebar-text: #09090b;
-  --sidebar-text-muted: var(--color-text-muted);
-  --sidebar-active-text: var(--color-text-primary);
-  --sidebar-hover-bg: var(--color-surface-tint);
-  --sidebar-active-ink: var(--color-cta-on-surface);
-  --sidebar-rail-bg: var(--color-background-card);
+  --sidebar-bg: var(--color-text-primary);
+  --sidebar-active-text: var(--color-background-card);
 
   color-scheme: light;
 }
@@ -860,15 +900,11 @@ label {
   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);
-}
+/* No star. Asked for directly, 2026-09-25: "remove star and always
+   show red border for require field unless its typed out or
+   selected". The field's own border is the one and only required
+   signal now — see input:required:invalid below — and it needs no
+   asterisk to explain what it already shows. */
 
 /* Primary action — the call-to-action fill. Charcoal, the same ink as
    --color-brand (see --color-cta above): had a hue of its own for a
@@ -878,10 +914,11 @@ button {
   font: inherit;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius-xs);
-  padding: 4px 10px;
-  font-size: var(--text-base);
-  font-weight: 400;
+  border-radius: var(--button-radius);
+  min-height: var(--button-height);
+  padding: var(--space-1) var(--button-padding-x);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
   background: var(--color-cta);
   color: var(--color-cta-text);
   box-shadow: var(--shadow-btn-primary);
@@ -940,13 +977,14 @@ button:focus-visible {
   font: inherit;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius-xs);
-  padding: 4px 10px;
-  font-size: var(--text-base);
-  font-weight: 400;
-  background: var(--color-secondary-fill);
+  border-radius: var(--button-radius);
+  min-height: var(--button-height);
+  padding: var(--space-1) var(--button-padding-x);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  background: var(--button-secondary-bg);
   color: var(--color-secondary-text);
-  box-shadow: var(--shadow-btn-secondary);
+  box-shadow: var(--button-secondary-shadow);
   text-decoration: none;
 }
 
@@ -976,10 +1014,11 @@ button:focus-visible {
   font: inherit;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius-xs);
-  padding: 4px 10px;
-  font-size: var(--text-base);
-  font-weight: 400;
+  border-radius: var(--button-radius);
+  min-height: var(--button-height);
+  padding: var(--space-1) var(--button-padding-x);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
   background: var(--color-destructive-fill);
   /* Bare button{} above defaults every <button> to box-shadow:
      var(--shadow-btn-primary), a layered bevel built around
@@ -1083,6 +1122,16 @@ textarea::placeholder {
    a warehouse read as a plain text box beside fields that plainly
    opened.
    ------------------------------------------------------------------ */
+/* Combobox's real `required` validation lives on an invisible sibling
+   input (see Combobox.tsx's own comment) — it has no border of its
+   own to turn red, so the visible box reads its sibling's validity
+   instead. Placed after :focus in the file so it wins while the field
+   is focused too: empty-and-required should read as an error the
+   whole time it stays empty, not just at rest. */
+.combobox-input:has(~ input:required:invalid) {
+  border-color: var(--color-danger);
+}
+
 select,
 .combobox-input {
   appearance: none;
@@ -1184,57 +1233,14 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
  * difference between one red label on a form and all of them.
  */
 /*
- * And a star after the label text, the usual way to mark a required
- * field.
- *
- * Harder than it looks, because the label's text is a bare text node:
- * `<label>First Name<input required></label>`. A plain `label::after`
- * renders after *everything* in the label — under the input, not
- * beside the words — and the only way to attach it to the text
- * directly would be to wrap that text in a span on every field of
- * every form.
- *
- * So the label becomes a wrapping flex row for required fields only,
- * and the three items are ordered explicitly: the text (order 0, an
- * anonymous flex item), the star (order 1), then the control, forced
- * onto the next line by a full-width basis. The result is the text and
- * its star on one line and the field under them — which is what the
- * label already looked like, with a star added and no markup touched.
- */
-label:has(:required) {
-  /*
-   * !important because 212 labels in this app carry an inline
-   * `style={{ display: "block" }}`, and an inline declaration beats
-   * any stylesheet rule regardless of specificity. This is the case
-   * the keyword exists for: overriding markup a stylesheet cannot
-   * reach. Without it the star renders after the control on every one
-   * of those labels instead of beside the words.
-   */
-  display: flex !important;
-  flex-wrap: wrap;
-  align-items: baseline;
-}
-
-label:has(:required) > * {
-  order: 2;
-  flex-basis: 100%;
-}
-
-label:has(:required)::after {
-  content: "*";
-  order: 1;
-  margin-left: 2px;
-  color: var(--color-danger);
-}
-
-label:has(:required) {
-  color: var(--color-danger);
-}
-
-/*
- * The controls inside go back to the normal ink. Colour inherits, so
- * without this a red label means red typing in the box under it — and
- * on a Combobox, red text in the dropdown as well.
+ * No star, and no flex-row layout to hold one — the star this used to
+ * draw beside the text is gone (2026-09-25), so the label goes back
+ * to its own ordinary flow, inline `display: block` and all. The
+ * label's own colour was never touched by this rule either way (see
+ * label[data-required]'s own comment above), so the override just
+ * below — forcing the control's typed text back to normal ink — is
+ * dead weight now and kept only because removing it is out of scope
+ * for this pass.
  */
 label:has(:required) input,
 label:has(:required) select,
@@ -1274,12 +1280,27 @@ textarea:user-invalid {
   border-color: var(--color-danger);
 }
 
+/* Required and currently empty — on from the moment the form opens,
+   not waiting for a touch. Off the instant a value exists: typed text
+   satisfies :invalid on a plain input/textarea directly; a picked
+   option satisfies it on a select or Combobox's own hidden required
+   input (see .combobox-input's own rule, and .tags-input's, both
+   further down) the same way. */
+input:required:invalid,
+select:required:invalid,
+textarea:required: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 {
+textarea:user-invalid:focus-visible,
+input:required:invalid:focus-visible,
+select:required:invalid:focus-visible,
+textarea:required:invalid:focus-visible {
   border-color: var(--color-danger);
   box-shadow: 0 0 0 3px var(--color-focus-ring-danger);
 }