@hattisar/design-tokens 0.3.15 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.15",
+  "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;
 
@@ -342,16 +353,24 @@
   --sidebar-bg: var(--color-background-card);
   --sidebar-text: var(--color-text-primary);
   --sidebar-text-muted: var(--color-text-muted);
-  --sidebar-active-bg: var(--color-surface-tint);
   --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: var(--color-surface-tint);
-  /* Icon tint for the active nav row — not a full fill, so
-     --sidebar-active-bg/text above stay the "you're here" pill and
-     this just adds a distinct accent on top. Reuses --sidebar-active-
-     text rather than its own color, so the accent never drifts out of
-     sync with the text it's paired with. No left border (removed —
-     read as a stray dark mark down the row on top of the pill). */
-  --sidebar-active-icon: var(--sidebar-active-text);
+  /* Accent ink for the row you are on: icon, label and a 3px left bar
+     all take this, and nothing takes it as a fill. --color-cta-on-
+     surface rather than --color-cta itself because this sits on a
+     white rail: measured, 3973d4 lands at 4.59:1 against it and
+     4285f4 at 3.56:1, so the unmodified CTA blue would miss AA for
+     normal text on the one rail it appears on most.
+
+     Was var(--sidebar-active-text), i.e. --color-text-primary, which
+     made it the same near-black as every other row's hover state and
+     so no accent at all. The active row had a pill fill to lean on
+     instead, except that in light theme the fill token and
+     --sidebar-hover-bg were both --color-surface-tint — so the page
+     you were on and whatever row the cursor happened to be over were
+     pixel-identical. That fill token is gone; both secondary rails
+     already read this one, so all three navs now share one accent. */
+  --sidebar-active-ink: var(--color-cta-on-surface);
   --sidebar-rail-bg: var(--color-background-card);
 
   /* Every left-hand nav rail in an app sharing this one width instead
@@ -523,14 +542,12 @@
   --sidebar-bg: #18181b;
   --sidebar-text: var(--color-text-primary);
   --sidebar-text-muted: var(--color-text-muted);
-  /* Two distinct white-overlay intensities on top of --sidebar-bg —
-     hover lighter, active a touch stronger — so the current page's row
-     still reads as visibly different from a row you're just passing
-     the cursor over. */
-  --sidebar-active-bg: color-mix(in srgb, white 7%, transparent);
   --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
-  --sidebar-active-icon: var(--sidebar-active-text);
+  /* --color-cta unmodified here: on #18181b it measures 4.97:1, where
+     the on-surface variant light theme uses is tuned for a white
+     ground. See the light block above for what this token is. */
+  --sidebar-active-ink: var(--color-cta);
   --sidebar-rail-bg: #18181b;
 
   color-scheme: dark;
@@ -632,10 +649,9 @@
   --sidebar-bg: var(--color-background-card);
   --sidebar-text: #09090b;
   --sidebar-text-muted: var(--color-text-muted);
-  --sidebar-active-bg: var(--color-surface-tint);
   --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: var(--color-surface-tint);
-  --sidebar-active-icon: var(--sidebar-active-text);
+  --sidebar-active-ink: var(--color-cta-on-surface);
   --sidebar-rail-bg: var(--color-background-card);
 
   color-scheme: light;
@@ -904,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);