@hattisar/design-tokens 0.3.32 → 0.3.33

package/package.json

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

@@ -239,6 +239,12 @@
   --radius-lg: 14px;
   --radius-xl: 17px;
   --radius-full: 9999px;
+  /* Roles. Stylesheets say what a corner is FOR, so changing the look of every control or every container is one
+     edit here: a control is anything you press or type into (buttons, fields, the search bar); a container holds
+     other things (cards, tiles, the table card, popovers); a chip is a small label. */
+  --radius-control: var(--radius-sm);
+  --radius-container: var(--radius-md);
+  --radius-chip: var(--radius-xs);
 
   /* The width of a rule or a border: a hairline everywhere, a heavier one where a line has to carry weight (a print rule, a
      highlighted edge). Stated here so no stylesheet or component writes "1px" for a border. */
@@ -254,14 +260,14 @@
      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: var(--border-width) solid var(--color-border);
-  --tabs-frame-radius: var(--radius-sm);
+  --tabs-frame-radius: var(--radius-control);
 
   /* Anything that floats over the page: dropdown and action menus, the
      global-search results, combobox lists, the profile/notification
      drawer, tooltips and modal dialogs. Their surface already had a
      border and a shadow but no radius, so every popup was a hard
      rectangle beside the rounded buttons and cards that opened it. */
-  --popup-radius: var(--radius-sm);
+  --popup-radius: var(--radius-container);
 
   /* The header row shared by every titled card (WidgetCard) and the tab
      strip that stands in for one, and the control that sits inside it (a
@@ -280,7 +286,7 @@
   --widget-bg: var(--color-table-header);
   --widget-border-width: var(--border-width);
   --widget-border-color: var(--color-border-strong);
-  --widget-radius: var(--radius-sm);
+  --widget-radius: var(--radius-container);
   --widget-shadow: var(--shadow-sm);
   --widget-header-height: var(--card-header-height);
   --widget-header-padding: 6px var(--space-3);
@@ -332,7 +338,7 @@
 
   /* 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);
+  --list-card-radius: var(--radius-container);
   /* 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. */
@@ -449,6 +455,9 @@
      the input ends up 6px taller than the field it contains, which is
      how an overlaid control centres itself slightly high. */
   --field-label-gap: 6px;
+  /* The vertical padding of a text field, select or textarea. 8px (a 38px field) is the shared default; the staff app sets it
+     from a field height (data-views.css), so the height is one number and the padding follows from the line height. */
+  --field-pad-y: 8px;
   --space-12: 48px;
   /* Two steps past the old ceiling, for the gaps that separate whole
      regions of a page rather than elements inside one. Without them
@@ -526,6 +535,31 @@
   --duration-fast: 100ms;
   --duration-base: 150ms;
   --duration-slow: 250ms;
+  /* Panels that move as a whole (the sidebar collapsing, a Settings menu opening beside it): longer than a control's
+     hover, with an ease-out that lands softly, so the layout glides instead of snapping. */
+  --duration-panel: 350ms;
+  --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
+  /* Things that arrive (the menu on load): 400ms on a long ease-out, which lands most of the way in the first
+     moments. The same curve as --ease-button. A row starts --nav-enter-shift to the left and --nav-enter-blur
+     out of focus, and each row follows the one above by --stagger-step. */
+  --duration-enter: 400ms;
+  --ease-enter: cubic-bezier(0.2, 0.8, 0, 1);
+  --stagger-step: 10ms;
+  /* The frame first, then what is in it: the sidebar column, the page and their backgrounds are on screen at once,
+     and every arriving thing waits this long before it starts, as Shopify's does (its contents begin well after
+     the shell is up). */
+  --enter-delay: 200ms;
+  /* A section's sub-items arriving when you open it: the same recipe, gentler. They only step 4px and follow each
+     other 25ms apart, measured off Shopify's sub-menus. */
+  --sub-enter-shift: -4px;
+  --sub-stagger-step: 25ms;
+  --nav-enter-shift: -60px;
+  --nav-enter-blur: 2px;
+  --page-enter-rise: 60px;
+  /* What happens when you point at or press something: quick, on the browser's own `ease`, which is the curve
+     Shopify's admin uses for every hover colour fade. Arrivals above are slow; reactions are not. */
+  --duration-hover: 150ms;
+  --ease-hover: ease;
 
   /* 58px, not 52 — asked for directly, matched against a reference
      layout's own header height so this app's chrome proportions read
@@ -562,14 +596,20 @@
   --popout-bg: color-mix(in srgb, var(--sidebar-active-text) 12%, var(--sidebar-bg));
 
   /* Sidebar and popout dimensions, named once. */
-  --sidebar-icon-size: 20px;
+  /* A menu icon: 18px, drawn at 1.5px (--sidebar-icon-stroke on the 24-unit grid it is drawn on, 2 is 1.5px at this
+     size), as Shopify's admin does at 16px with text a size smaller. The inset below is chosen so the icon sits at
+     the same place in the 48px collapsed rail: 2 * 8 + 2 * 7 + 18. The slot is the 20px column the Settings and
+     Reports rows were built around; their icon is centred in it so their text does not move. */
+  --sidebar-icon-size: 18px;
+  --sidebar-icon-stroke: 2;
+  --sidebar-icon-slot: 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-radius: var(--radius-control);
   --sidebar-search-shadow:
     inset 0 0 0 var(--border-width) 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),
@@ -581,7 +621,7 @@
      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-icon-inset: 7px;
   --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
@@ -591,7 +631,9 @@
   --sidebar-active-weight: var(--font-weight-medium);
   --sidebar-avatar-size: 28px;
   --popout-min-width: 180px;
-  --search-popup-width: 640px;
+  --search-popup-width: 650px;
+  --search-popup-field-height: 64px;
+  --search-popup-min-height: 420px;
   --mobile-nav-width: 350px;
 
   /* Every left-hand nav rail in an app sharing this one width instead
@@ -1232,10 +1274,10 @@ textarea {
   font-weight: var(--font-weight-regular);
   line-height: 1.4;
   width: 100%;
-  padding: 8px 12px;
+  padding: var(--field-pad-y) 12px;
   margin-top: var(--field-label-gap);
   border: var(--border-width) solid var(--color-border-strong);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-control);
   background: var(--color-input);
   color: var(--color-text-primary);
   transition:
@@ -1784,7 +1826,7 @@ a.card:hover {
 
 .modal-panel {
   background: var(--color-surface-raised);
-  border: var(--border-width) solid var(--color-border-raised);
+  border: 0;
   box-shadow: var(--shadow-popover);
   width: 100%;
   max-width: 640px;
@@ -1797,7 +1839,6 @@ a.card:hover {
 
 .modal-panel-header {
   padding: 12px 16px;
-  border-bottom: var(--border-width) solid var(--color-border);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1815,7 +1856,6 @@ a.card:hover {
 
 .modal-panel-footer {
   padding: 12px 16px;
-  border-top: var(--border-width) solid var(--color-border);
   display: flex;
   justify-content: flex-end;
   gap: 10px;
@@ -1836,6 +1876,36 @@ a.card:hover {
   --ui-accent-hover: #0b5f58;
   --ui-accent-ink: #fff;
   --ui-accent-soft: color-mix(in srgb, var(--ui-accent) var(--ui-wash), transparent);
+  /* The monochrome action: near-black on light, near-white on dark, with its hover and the ink that sits on it.
+     The staff app points --ui-accent at these (data-views.css); the Storefront keeps the accent above, which a
+     seller can swap. */
+  --ui-action: #1a1a1a;
+  --ui-action-hover: #303030;
+  --ui-action-ink: #ffffff;
+  /* The cool-grey look's surfaces and edges, by role. data-views.css maps the staff app's --ui-* tokens onto these,
+     so no stylesheet writes a grey of its own. */
+  --surface-canvas: #eef0f4;
+  --surface-paper: #ffffff;
+  --surface-band: #f6f7f9;
+  --surface-tray: #eceef2;
+  --edge-hairline: #dfe2e8;
+  --edge-strong: #cfd3da;
+  --edge-raised: #dcdfe5;
+  --grid-line: #e9ebef;
+  /* What a shadow is drawn in, and the two pure ends for a highlight or a scrim. */
+  --shadow-ink: #101828;
+  --ui-white: #ffffff;
+  --ui-black: #000000;
+  /* The light-grey guide line a label or barcode preview draws around its cell. Paper, so it is the same in every
+     theme (it is not in the dark block). */
+  --paper-guide: #999999;
+  /* Data colours for chart series 2 to 5 (series 1 follows the action colour). Distinct, sharing one saturation. */
+  --chart-2: #4f46e5;
+  --chart-3: #0284c7;
+  --chart-4: #9333ea;
+  --chart-5: #d97706;
+  /* The Storefront's muted text on a light page: a notch darker than the shared muted token, for contrast. */
+  --sf-muted-light: #52525b;
   --ui-surface: var(--color-background-page);
   --ui-card: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-card), var(--ui-surface));
   --ui-tray: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-tray), var(--ui-card));
@@ -1864,7 +1934,7 @@ a.card:hover {
   /* One button for every app that reads this tier: a rounded rectangle that matches the fields beside it, a
      32px target (the height of a field), medium-weight type. Apps map their own --button-* onto these. */
   --ui-btn-height: 32px;
-  --ui-btn-radius: var(--radius-sm);
+  --ui-btn-radius: var(--radius-control);
   --ui-btn-px: var(--space-4);
   --ui-btn-weight: var(--font-weight-medium);
   --ui-ctl: 32px;
@@ -1891,6 +1961,22 @@ a.card:hover {
   --ui-accent: #2dd4bf;
   --ui-accent-hover: #5eead4;
   --ui-accent-ink: #04201d;
+  --ui-action: #f1f1f1;
+  --ui-action-hover: #d4d4d4;
+  --ui-action-ink: #1a1a1a;
+  --surface-canvas: #0c0c0f;
+  --surface-paper: #15161a;
+  --surface-band: #1a1b20;
+  --surface-tray: #1f2026;
+  --edge-hairline: #2a2c33;
+  --edge-strong: #3a3d46;
+  --edge-raised: #31343c;
+  --grid-line: #24262c;
+  --shadow-ink: #000000;
+  --chart-2: #818cf8;
+  --chart-3: #38bdf8;
+  --chart-4: #c084fc;
+  --chart-5: #fbbf24;
   --ui-surface: var(--color-background-global);
   --ui-tint-card: 5%;
   --ui-card: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-card), var(--color-background-page));