@hattisar/design-tokens 0.3.26 → 0.3.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.26",
+  "version": "0.3.28",
   "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/
@@ -249,6 +267,28 @@
   --card-header-height: 36px;
   --card-header-control-height: 24px;
 
+  /* The signature widget card: a filled frame, a header band that shows the
+     frame's own fill, and a white body set into it. WidgetCard, the line-items
+     card, the form sections and the settings cards all read these, so the look
+     is changed here once and never restated per card. They are built from the
+     colour and radius tokens, so they follow the theme without a block of
+     their own. */
+  --widget-bg: var(--color-table-header);
+  --widget-border-width: 1px;
+  --widget-border-color: var(--color-border-strong);
+  --widget-radius: var(--radius-sm);
+  --widget-shadow: var(--shadow-sm);
+  --widget-header-height: var(--card-header-height);
+  --widget-header-padding: 6px var(--space-3);
+  --widget-title-size: var(--text-sm);
+  --widget-title-weight: var(--font-weight-medium);
+  --widget-body-bg: var(--color-background-card);
+  --widget-body-padding: var(--space-3) var(--space-4);
+  --widget-divider: var(--color-border);
+  /* The surface a sheet or label sits on in a preview: a shade off the card. */
+  --widget-canvas-bg: color-mix(in srgb, var(--color-text-primary) 5%, var(--color-background-card));
+  --widget-row-padding: var(--space-3) var(--space-4);
+
   /* Colours that must not follow the theme, named instead of repeated as
      hex. White on a saturated fill (an org tile, an integration logo)
      stays white in dark mode; the scrim dims the page behind a modal or
@@ -261,13 +301,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;
@@ -278,12 +318,21 @@
   --button-height: 28px;
   --button-radius: var(--radius-full);
   --button-padding-x: var(--space-3);
+  /* Not equal on purpose: the label's cap-height centre sits 0.75px above the
+     box's centre with equal padding, which reads as text riding high in the
+     pill. Three-quarters of a pixel off each side puts the ink in the middle. */
+  --button-padding-top: calc(var(--space-1) + 0.75px);
+  --button-padding-bottom: calc(var(--space-1) - 0.75px);
   --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);
+  /* 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. */
@@ -295,7 +344,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. */
@@ -483,7 +555,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;
@@ -496,7 +591,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.
@@ -612,8 +711,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);
@@ -653,6 +754,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;
@@ -721,14 +835,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;
@@ -761,6 +890,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;
@@ -928,25 +1075,33 @@ button {
   border: none;
   border-radius: var(--button-radius);
   min-height: var(--button-height);
-  padding: var(--space-1) var(--button-padding-x);
+  padding: var(--button-padding-top) var(--button-padding-x) var(--button-padding-bottom);
   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 {
@@ -991,7 +1146,7 @@ button:focus-visible {
   border: none;
   border-radius: var(--button-radius);
   min-height: var(--button-height);
-  padding: var(--space-1) var(--button-padding-x);
+  padding: var(--button-padding-top) var(--button-padding-x) var(--button-padding-bottom);
   font-size: var(--button-font-size);
   font-weight: var(--button-font-weight);
   background: var(--button-secondary-bg);
@@ -1028,7 +1183,7 @@ button:focus-visible {
   border: none;
   border-radius: var(--button-radius);
   min-height: var(--button-height);
-  padding: var(--space-1) var(--button-padding-x);
+  padding: var(--button-padding-top) var(--button-padding-x) var(--button-padding-bottom);
   font-size: var(--button-font-size);
   font-weight: var(--button-font-weight);
   background: var(--color-destructive-fill);
@@ -1341,6 +1496,10 @@ select:disabled {
 input[type="checkbox"],
 input[type="radio"] {
   width: auto;
+  /* No vertical margin: the field rule above gives every input a top margin,
+     which on a checkbox or radio set beside its label pushes it below the
+     text's centre. The sides keep the browser's own spacing. */
+  margin-block: 0;
   accent-color: var(--color-brand);
 }
 
@@ -1466,8 +1625,6 @@ input[type="radio"] {
   display: block;
   font-size: var(--text-xs);
   font-weight: 400;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
   color: var(--color-text-muted);
   margin-bottom: 6px;
 }