@hattisar/design-tokens 0.3.24 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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;
@@ -221,11 +225,12 @@
 
   /* The horizontal tab block (Tabs.tsx) — one frame for every context it
      appears in, whether wrapped in .card (document forms) or
-     .form-section-tabs (Customer/Vendor/Item). Transparent on purpose:
-     the frame shows the page canvas, so the strip reads as a gray band
-     and the active tab's white pill and the white panel below stand out
-     against it. A .card frame (white) hid both. */
-  --tabs-frame-bg: transparent;
+     .form-section-tabs (Customer/Vendor/Item). The same gray as a widget
+     card's frame, so the strip reads as a gray band and the active tab's
+     white pill and the white panel below stand out against it. A .card
+     frame (white) hid both. It was transparent, which only worked while
+     the page canvas behind it was gray; it is a fill of its own now. */
+  --tabs-frame-bg: var(--color-table-header);
   --tabs-frame-border: 1px solid var(--color-border);
   --tabs-frame-radius: var(--radius-sm);
 
@@ -409,11 +414,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;
@@ -457,11 +462,11 @@
      (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));
+  --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) 10%, transparent);
+  --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
@@ -477,6 +482,8 @@
   /* 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;
@@ -488,7 +495,7 @@
      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: 220px;
   --sidebar-width-collapsed: 56px;
   --sidebar-height: calc(100vh - var(--header-height));
 
@@ -550,7 +557,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
@@ -684,7 +693,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;