@hattisar/design-tokens 0.3.30 → 0.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.30",
+  "version": "0.3.32",
   "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,6 +232,7 @@
      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;
@@ -241,6 +240,11 @@
   --radius-xl: 17px;
   --radius-full: 9999px;
 
+  /* 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
      .form-section-tabs (Customer/Vendor/Item). The same gray as a widget
@@ -249,7 +253,7 @@
      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-border: var(--border-width) solid var(--color-border);
   --tabs-frame-radius: var(--radius-sm);
 
   /* Anything that floats over the page: dropdown and action menus, the
@@ -274,7 +278,7 @@
      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-shadow: var(--shadow-sm);
@@ -359,7 +363,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,9 +375,18 @@
   /* 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
+     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
@@ -461,7 +473,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
@@ -544,7 +555,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,7 +571,7 @@
   --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 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),
@@ -579,7 +589,6 @@
   --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;
@@ -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;
 }
 
@@ -712,12 +727,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));
@@ -772,7 +785,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
@@ -843,7 +855,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%);
@@ -854,7 +865,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));
@@ -913,7 +923,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
@@ -958,7 +967,7 @@
 
 *::-webkit-scrollbar-thumb {
   background: var(--color-border-strong);
-  border: 2px solid transparent;
+  border: var(--border-width-thick) solid transparent;
   background-clip: padding-box;
 }
 
@@ -1225,7 +1234,7 @@ textarea {
   width: 100%;
   padding: 8px 12px;
   margin-top: var(--field-label-gap);
-  border: 1px solid var(--color-border-strong);
+  border: var(--border-width) solid var(--color-border-strong);
   border-radius: var(--radius-sm);
   background: var(--color-input);
   color: var(--color-text-primary);
@@ -1513,7 +1522,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;
@@ -1775,7 +1784,7 @@ a.card:hover {
 
 .modal-panel {
   background: var(--color-surface-raised);
-  border: 1px solid var(--color-border-raised);
+  border: var(--border-width) solid var(--color-border-raised);
   box-shadow: var(--shadow-popover);
   width: 100%;
   max-width: 640px;
@@ -1788,7 +1797,7 @@ a.card:hover {
 
 .modal-panel-header {
   padding: 12px 16px;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1806,7 +1815,7 @@ a.card:hover {
 
 .modal-panel-footer {
   padding: 12px 16px;
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-width) solid var(--color-border);
   display: flex;
   justify-content: flex-end;
   gap: 10px;
@@ -1837,7 +1846,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. */