@hattisar/design-tokens 0.3.29 → 0.3.31

package/package.json

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

@@ -375,6 +375,15 @@
   --image-picker-border: 1px 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
+     unit. Shared by a package in Calculate rates and the item form's
+     Shipping card, so the unit pickers and the gaps between the groups
+     are one width wherever a size or a weight is typed. */
+  --measure-unit-width: 84px;
+  --measure-weight-width: 100px;
+  --measure-field-gap: var(--space-2);
+  --measure-group-gap: var(--space-6);
+
   /* Depth, deliberately restrained. These were all `none`, which left
      every surface separated by border alone — correct, legible, and
      completely flat: a card, a dropdown and a modal all sat on the page
@@ -642,6 +651,12 @@
      after the first pass shipped. */
   --page-width-wide: 1680px;
 
+  /* A form that carries a table of item lines (adjustments, transfers, builds, purchase and sales orders). Wider
+     than a plain form so the table does not scroll sideways on a laptop screen, and narrower than a list page so
+     the numbers stay near their column headers on an ultrawide one. Every card on such a form is this wide,
+     not just the table, so their edges line up. */
+  --page-width-lines: 1296px;
+
   color-scheme: light dark;
 }
 
@@ -1853,6 +1868,12 @@ a.card:hover {
   --ui-tint-skeleton: 9%;
   --ui-wash: 14%;
   /* Control and row sizes. */
+  /* 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-px: var(--space-4);
+  --ui-btn-weight: var(--font-weight-medium);
   --ui-ctl: 32px;
   --ui-ctl-sm: 28px;
   --ui-hit: 40px;