@hattisar/design-tokens 0.3.23 → 0.3.25

package/package.json

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

@@ -33,7 +33,11 @@
      to equal background-global exactly, which meant hover states had
      no visible target to land on. */
   --color-background-global: #f4f4f5;
+  /* The frame the routed page sits in: white in light, the canvas in dark. */
+  --color-background-page: #ffffff;
   --color-background-card: #ffffff;
+  /* Table column-header band: a step lighter than the hover tint. */
+  --color-table-header: #f7f7f7;
   --color-surface-tint: #e8e8ea;
   --color-input: #ffffff;
   --color-text-primary: #09090b;
@@ -66,7 +70,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 +135,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 +267,34 @@
      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. */
@@ -378,11 +413,11 @@
      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-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 13px;
+  --text-md: 14px;
+  --text-lg: 16px;
   --text-xl: 20px;
   --text-2xl: 24px;
   --text-3xl: 30px;
@@ -411,41 +446,56 @@
   /* 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) 86%, var(--sidebar-bg));
+  --sidebar-text-muted: color-mix(in srgb, var(--sidebar-active-text) 65%, 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) 19%, 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-item-height: 30px;
+  --sidebar-item-weight: 450;
+  --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,
      matched (to the nearest round number) against a reference
      layout's own sidebar width, the same reason --header-height above
      moved too. */
-  --sidebar-width: 260px;
-  --sidebar-width-collapsed: 64px;
+  --sidebar-width: 220px;
+  --sidebar-width-collapsed: 56px;
   --sidebar-height: calc(100vh - var(--header-height));
 
   /* Two widths, because a page is one of two things.
@@ -506,7 +556,9 @@
      dramatic jump) plus real borders is what keeps a dark theme
      reading crisp instead of washed out — see --color-border below. */
   --color-background-global: #09090b;
+  --color-background-page: #09090b;
   --color-background-card: #18181b;
+  --color-table-header: #27272a;
   --color-surface-tint: #27272a;
   --color-input: var(--color-background-card);
   /* Not pure white — pure white text on a near-black surface causes
@@ -526,7 +578,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
@@ -624,16 +676,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;
 }
@@ -645,7 +692,10 @@
    alone would lose to a dark attribute set higher up. */
 [data-theme="light"] {
   --color-background-global: #f4f4f5;
+  --color-background-page: #ffffff;
   --color-background-card: #ffffff;
+  /* Table column-header band: a step lighter than the hover tint. */
+  --color-table-header: #f7f7f7;
   --color-surface-tint: #e8e8ea;
   --color-input: #ffffff;
   --color-text-primary: #09090b;
@@ -656,7 +706,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);
@@ -673,7 +723,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));
@@ -728,13 +778,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;
 }
@@ -880,10 +925,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);
@@ -942,13 +988,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;
 }
 
@@ -978,10 +1025,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