@hattisar/design-tokens 0.3.25 → 0.3.27

package/package.json

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

@@ -138,8 +138,8 @@
   --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));
-  --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-secondary-fill));
+  --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-secondary-fill));
+  --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
 
   /* Destructive button — irreversible actions only (delete, void). */
   --color-destructive-fill: #c70a24;
@@ -193,6 +193,24 @@
   --status-overdue-text: var(--color-danger);
   --status-overdue-bg: #feebec;
 
+  /* The badge palette: what a status pill is painted with, kept apart from
+     the --status-* accents above (those colour dashboard accents and row
+     bars). Quiet gray for anything healthy or finished, so a long column
+     of them stays calm; colour only where something is in progress or
+     needs a look. */
+  --badge-neutral-bg: rgba(0, 0, 0, 0.05);
+  --badge-neutral-text: #4a4a4a;
+  --badge-progress-bg: #8ce1f8;
+  --badge-progress-text: #01596f;
+  --badge-attention-bg: #ffe45c;
+  --badge-attention-text: #574100;
+  --badge-caution-bg: #ffc58a;
+  --badge-caution-text: #5c2f00;
+  --badge-critical-bg: #fed3d1;
+  --badge-critical-text: #8e0b21;
+  --badge-success-bg: #dcf5c9;
+  --badge-success-text: #214b03;
+
   /* Page-level warning/danger/success banners — distinct from the row
      badges above: a border plus a matching soft fill, no separate text
      color (banner text uses --color-text-primary as usual). Warning/
@@ -225,11 +243,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);
 
@@ -260,13 +279,13 @@
   --print-paper: #ffffff;
   --print-ink: #0f172a;
 
-  /* The row a list page's summary tiles and search/filter toolbar share.
-     48px, not the 36px table-header/tab-strip row: those are dense
-     header bands; this one holds a text field and a view switcher you
-     click into, and at 36px the icon and text sat against the card edge
-     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 row a list page's search/filter toolbar sits in: the same 36px as
+     the table-header and tab-strip rows. It was 48px, once, after the
+     icon and text sat against the card edge at 36px ("search area look
+     very tight"); the bar has its own border and a margin below it now,
+     which is what that was missing, so the shorter row is back — asked
+     for directly, to match a compact admin search field. */
+  --toolbar-row-height: 36px;
   /* The pinned page header on a list page (title + actions), and what the
      table's column headers stick beneath. */
   --page-heading-height: 52px;
@@ -283,6 +302,10 @@
   /* 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);
+  /* The outline of a list page's three containers (summary tiles, search
+     bar, table): the quiet row-divider grey, not the strong one, so the
+     frames read as surfaces rather than drawn boxes. */
+  --list-frame-border: var(--color-border);
   /* 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. */
@@ -294,7 +317,30 @@
      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 press and hover motion every button shares: a long ease-out, which
+     reads as snappy because most of the change lands in the first moments. */
+  --ease-button: cubic-bezier(0.2, 0.8, 0, 1);
+  /* An icon-only button with no fill at rest (the edit pencil): a round tint of
+     the ink on hover, 8% like the reference's. */
+  --button-tertiary-hover-bg: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
+  --duration-button: 0.4s;
+  --shadow-btn-primary:
+    0 1px 0.5px -0.5px rgba(0, 0, 0, 0.13),
+    0 1px 2px -0.5px rgba(0, 0, 0, 0.13),
+    0 4px 6px -2px rgba(0, 0, 0, 0.13),
+    0 2px 3px -1.5px rgba(0, 0, 0, 0.13),
+    inset 0 0 4px 1px var(--color-cta),
+    inset 0 0 4px 2px rgba(255, 255, 255, 0.1),
+    inset 0 0 12px -6px rgba(255, 255, 255, 0.75);
+  --shadow-btn-secondary: 0 1px 2px rgba(9, 9, 11, 0.05);
+  --button-primary-sheen:
+    radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
+    radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 66.46%);
+  --button-secondary-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.07),
+    0 2px 20px 0 rgba(0, 0, 0, 0.03),
+    0 5px 20px 0 rgba(0, 0, 0, 0.03),
+    0 8px 60px 0 rgba(0, 0, 0, 0.03);
 
   /* The picture picker (ImagePicker.tsx) behind an item image, the org
      logo and both user photos. Named so those four can't drift apart. */
@@ -482,7 +528,30 @@
   --sidebar-icon-size: 20px;
   --sidebar-control-height: 36px;
   --sidebar-item-height: 30px;
+  /* The sidebar's search field: a short, rounder pill on a lighter fill,
+     lifted by a faint inner highlight and a hairline edge so it reads as a
+     raised control on the dark rail rather than a flat patch. */
+  --sidebar-search-height: 30px;
+  --sidebar-search-radius: var(--radius-lg);
+  --sidebar-search-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--sidebar-active-text) 2%, transparent),
+    inset 0 1px 1px 0 color-mix(in srgb, var(--sidebar-active-text) 6%, transparent),
+    inset 0 0 12px 1px color-mix(in srgb, var(--sidebar-active-text) 6%, transparent),
+    0 1px 2px 0 rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.1);
   --sidebar-item-weight: 450;
+  /* One row for all three rails (the main sidebar, Settings, Reports): the
+     same padding, icon-to-label gap, weight and active weight, so the same
+     row looks the same wherever it sits. A sub-item's text starts under its
+     parent's text: left padding + the icon + the gap. */
+  --sidebar-icon-inset: 6px;
+  --sidebar-row-padding: 5px 8px 5px var(--sidebar-icon-inset);
+  --sidebar-row-gap: var(--space-2);
+  /* The space between one row and the next, at every level, so a top-level
+     row and a sub-item sit the same distance from their neighbours. */
+  --sidebar-row-spacing: 6px;
+  --sidebar-sub-indent: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size) + var(--sidebar-row-gap));
+  --sidebar-active-weight: var(--font-weight-medium);
   --sidebar-badge-size: 22px;
   --sidebar-avatar-size: 28px;
   --popout-min-width: 180px;
@@ -495,7 +564,11 @@
      layout's own sidebar width, the same reason --header-height above
      moved too. */
   --sidebar-width: 220px;
-  --sidebar-width-collapsed: 56px;
+  /* The collapsed rail is exactly the width of its icon column: the row's
+     icon inset, the icon, and the same inset again, inside the rail's own
+     padding — so an icon is in the same place whether the rail is open or
+     closed. */
+  --sidebar-width-collapsed: calc(2 * var(--space-2) + 2 * var(--sidebar-icon-inset) + var(--sidebar-icon-size));
   --sidebar-height: calc(100vh - var(--header-height));
 
   /* Two widths, because a page is one of two things.
@@ -611,8 +684,10 @@
   --color-cta-active: var(--color-brand-active);
   --color-cta-text: var(--color-brand-text);
 
-  --shadow-btn-primary: 0 1px 2px rgba(9, 9, 11, 0.12);
-  --shadow-btn-secondary: 0 1px 2px rgba(9, 9, 11, 0.05);
+  --shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-btn-secondary: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --button-primary-sheen: none;
+  --button-secondary-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3);
 
   --color-secondary-fill: var(--color-surface-tint);
   --color-secondary-border: var(--color-border-strong);
@@ -652,6 +727,19 @@
   --status-overdue-text: var(--color-danger);
   --status-overdue-bg: #401d21;
 
+  --badge-neutral-bg: rgba(255, 255, 255, 0.08);
+  --badge-neutral-text: #d4d4d8;
+  --badge-progress-bg: #0f3341;
+  --badge-progress-text: #8ce1f8;
+  --badge-attention-bg: #4a3b00;
+  --badge-attention-text: #ffe45c;
+  --badge-caution-bg: #4d2c0a;
+  --badge-caution-text: #ffc58a;
+  --badge-critical-bg: #4d1218;
+  --badge-critical-text: #fda4a8;
+  --badge-success-bg: #1f3a0f;
+  --badge-success-text: #b3f782;
+
   --banner-warning-bg: #3a2907;
   --banner-warning-border: var(--color-warning);
   --banner-danger-bg: #4a1119;
@@ -720,14 +808,29 @@
   --color-cta-active: var(--color-brand-active);
   --color-cta-text: var(--color-brand-text);
 
-  --shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-btn-secondary: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-btn-primary:
+    0 1px 0.5px -0.5px rgba(0, 0, 0, 0.13),
+    0 1px 2px -0.5px rgba(0, 0, 0, 0.13),
+    0 4px 6px -2px rgba(0, 0, 0, 0.13),
+    0 2px 3px -1.5px rgba(0, 0, 0, 0.13),
+    inset 0 0 4px 1px var(--color-cta),
+    inset 0 0 4px 2px rgba(255, 255, 255, 0.1),
+    inset 0 0 12px -6px rgba(255, 255, 255, 0.75);
+  --shadow-btn-secondary: 0 1px 2px rgba(9, 9, 11, 0.05);
+  --button-primary-sheen:
+    radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
+    radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 66.46%);
+  --button-secondary-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.07),
+    0 2px 20px 0 rgba(0, 0, 0, 0.03),
+    0 5px 20px 0 rgba(0, 0, 0, 0.03),
+    0 8px 60px 0 rgba(0, 0, 0, 0.03);
 
   --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));
-  --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-secondary-fill));
+  --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-secondary-fill));
+  --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
 
   --color-destructive-fill: #c70a24;
   --color-destructive-hover: #a30a24;
@@ -760,6 +863,24 @@
   --status-overdue-text: var(--color-danger);
   --status-overdue-bg: #feebec;
 
+  /* The badge palette: what a status pill is painted with, kept apart from
+     the --status-* accents above (those colour dashboard accents and row
+     bars). Quiet gray for anything healthy or finished, so a long column
+     of them stays calm; colour only where something is in progress or
+     needs a look. */
+  --badge-neutral-bg: rgba(0, 0, 0, 0.05);
+  --badge-neutral-text: #4a4a4a;
+  --badge-progress-bg: #8ce1f8;
+  --badge-progress-text: #01596f;
+  --badge-attention-bg: #ffe45c;
+  --badge-attention-text: #574100;
+  --badge-caution-bg: #ffc58a;
+  --badge-caution-text: #5c2f00;
+  --badge-critical-bg: #fed3d1;
+  --badge-critical-text: #8e0b21;
+  --badge-success-bg: #dcf5c9;
+  --badge-success-text: #214b03;
+
   --banner-warning-bg: #fff3e6;
   --banner-warning-border: var(--color-warning);
   --banner-danger-bg: #fdeaed;
@@ -931,21 +1052,29 @@ button {
   font-size: var(--button-font-size);
   font-weight: var(--button-font-weight);
   background: var(--color-cta);
+  /* A soft light at the top edge and a fainter one at the bottom, the way
+     the reference admin lifts its primary button off the page. Anything that
+     sets its own `background:` shorthand clears this along with the colour. */
+  background-image: var(--button-primary-sheen);
   color: var(--color-cta-text);
   box-shadow: var(--shadow-btn-primary);
   transition:
-    transform 0.05s ease,
-    background 0.15s ease,
-    box-shadow 0.15s ease;
+    background-color var(--duration-button) var(--ease-button),
+    box-shadow var(--duration-button) var(--ease-button),
+    transform var(--duration-button) var(--ease-button);
 }
 
 button:hover {
   background: var(--color-cta-hover);
+  background-image: var(--button-primary-sheen);
 }
 
+/* Pressed is a darker fill, not a shrink: the button stays the size it is,
+   which is what made the old one feel busy. */
 button:active {
   background: var(--color-cta-active);
-  transform: scale(0.97);
+  background-image: var(--button-primary-sheen);
+  transform: none;
 }
 
 button:disabled {