@hattisar/design-tokens 0.3.31 → 0.3.33

package/package.json

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

@@ -136,7 +136,6 @@
      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-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) 3%, var(--color-secondary-fill));
   --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
@@ -223,7 +222,6 @@
   --banner-danger-bg: #fdeaed;
   --banner-danger-border: var(--color-danger);
   --banner-success-bg: #e2f7e6;
-  --banner-success-border: var(--color-success);
 
   /* A restrained scale, not flat — every step deliberately small, since
      most controls here are compact (30-36px buttons/inputs, smaller
@@ -234,12 +232,24 @@
      remove-buttons inside chips, the settings toggle switch) — never
      applied to a badge/tag/chip just for a rounder look; those use
      --radius-sm like everything else (see .status-badge and friends). */
+  --radius-2xs: 3px; /* the smallest rounding: a keyboard hint, a scrollbar thumb, a highlighted word, the top of a tab's indicator */
   --radius-xs: 6px;
   --radius-sm: 8px;
   --radius-md: 11px;
   --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. */
+  --border-width: 1px;
+  --border-width-thick: 2px;
 
   /* The horizontal tab block (Tabs.tsx) — one frame for every context it
      appears in, whether wrapped in .card (document forms) or
@@ -249,15 +259,15 @@
      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);
+  --tabs-frame-border: var(--border-width) solid var(--color-border);
+  --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
@@ -274,9 +284,9 @@
      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-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);
@@ -328,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. */
@@ -359,7 +369,6 @@
     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%);
@@ -372,7 +381,7 @@
   /* The picture picker (ImagePicker.tsx) behind an item image, the org
      logo and both user photos. Named so those four can't drift apart. */
   --image-picker-size: 96px;
-  --image-picker-border: 1px dashed var(--color-border);
+  --image-picker-border: var(--border-width) dashed var(--color-border);
   --image-picker-overlay: color-mix(in srgb, var(--color-background-card) 55%, transparent);
 
   /* The measurement row: three sizes and their unit, a weight and its
@@ -446,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
@@ -470,7 +482,6 @@
   /* A control sharing a line with others — the second and third field
      of a header row. Narrower than a control that owns its row, because
      three of those do not fit and a date needs far less than 340px. */
-  --form-control-width-compact: 200px;
   /* The label beside it. Fixed rather than sized to each label's own
      text — "Order date", "Due date" and "Tax rate" all sit in this
      position on different rows of the same header, and letting each
@@ -524,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
@@ -553,7 +589,6 @@
   /* 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
@@ -561,16 +596,22 @@
   --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 1px color-mix(in srgb, var(--sidebar-active-text) 2%, transparent),
+    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),
     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),
@@ -580,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
@@ -588,10 +629,11 @@
   --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;
-  --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
@@ -727,12 +769,10 @@
   --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);
   --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);
   --color-secondary-text: var(--color-text-primary);
   --color-secondary-hover: color-mix(in srgb, white 6%, var(--color-secondary-fill));
   --color-secondary-active: color-mix(in srgb, white 12%, var(--color-secondary-fill));
@@ -787,7 +827,6 @@
   --banner-danger-bg: #4a1119;
   --banner-danger-border: var(--color-danger);
   --banner-success-bg: #0a3129;
-  --banner-success-border: var(--color-success);
 
   /* A dark surface cannot be lifted by a soft grey shadow — there is
      nothing lighter behind it to catch the light. So these go darker
@@ -858,7 +897,6 @@
     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%);
@@ -869,7 +907,6 @@
     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) 3%, var(--color-secondary-fill));
   --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
@@ -928,7 +965,6 @@
   --banner-danger-bg: #fdeaed;
   --banner-danger-border: var(--color-danger);
   --banner-success-bg: #e2f7e6;
-  --banner-success-border: #047b5d;
 
   /* Deliberately still flat, unlike :root's. The only thing that pins
      itself to light is a print page, and a shadow on paper is a grey
@@ -973,7 +1009,7 @@
 
 *::-webkit-scrollbar-thumb {
   background: var(--color-border-strong);
-  border: 2px solid transparent;
+  border: var(--border-width-thick) solid transparent;
   background-clip: padding-box;
 }
 
@@ -1238,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: 1px solid var(--color-border-strong);
-  border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-control);
   background: var(--color-input);
   color: var(--color-text-primary);
   transition:
@@ -1528,7 +1564,7 @@ input[type="radio"] {
    job. */
 .card {
   background: var(--color-background-card);
-  border: 1px solid var(--color-border-strong);
+  border: var(--border-width) solid var(--color-border-strong);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-sm);
   padding: 16px;
@@ -1790,7 +1826,7 @@ a.card:hover {
 
 .modal-panel {
   background: var(--color-surface-raised);
-  border: 1px solid var(--color-border-raised);
+  border: 0;
   box-shadow: var(--shadow-popover);
   width: 100%;
   max-width: 640px;
@@ -1803,7 +1839,6 @@ a.card:hover {
 
 .modal-panel-header {
   padding: 12px 16px;
-  border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1821,7 +1856,6 @@ a.card:hover {
 
 .modal-panel-footer {
   padding: 12px 16px;
-  border-top: 1px solid var(--color-border);
   display: flex;
   justify-content: flex-end;
   gap: 10px;
@@ -1842,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));
@@ -1852,7 +1916,6 @@ a.card:hover {
   --ui-field-bg-hover: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-field-hover), var(--ui-card));
   --ui-row-alt: color-mix(in srgb, var(--color-text-primary) 3%, transparent);
   /* Every other row of a table, laid over its surface: what tells one row from the next now that no rule does. */
-  --ui-row-zebra: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
   /* A rule between rows: present enough to follow a line across, quiet enough not to read as a grid. */
   --ui-divider: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
   /* The one hairline that stays when borders do not: a thin line blended into the surface, where two panels of the same tone meet. */
@@ -1871,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;
@@ -1898,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));