@hattisar/design-tokens 0.3.16 → 0.3.17

package/package.json

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

@@ -268,6 +268,13 @@
   --space-6: 24px;
   --space-8: 32px;
   --space-10: 40px;
+
+  /* The gap between a label and the control under it. Was a bare 6px
+     inside the input rule; named because anything wrapping a control
+     has to reproduce it exactly — a wrapper that keeps the margin on
+     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;
   --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
@@ -289,6 +296,10 @@
      lets the page be as wide as it likes. */
   --form-label-width: 160px;
   --form-control-width: 340px;
+  /* 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;
   --form-control-width-wide: 520px;
   --field-min-width-narrow: 140px;
 
@@ -909,7 +920,7 @@ textarea {
   line-height: 1.4;
   width: 100%;
   padding: 8px 12px;
-  margin-top: 6px;
+  margin-top: var(--field-label-gap);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-sm);
   background: var(--color-input);