@hattisar/design-tokens 0.3.16 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "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;
 
@@ -741,24 +752,22 @@ a {
   text-decoration: none;
 }
 
+/* The app's one accent blue — same token as the sidebar's current-row
+   ink and the active document tab. Not .card: a card-styled link is a
+   clickable surface, not inline text, and turning its whole contents
+   blue on hover would tint every stat number/label inside a dashboard
+   tile along with it (see a.card below, which keeps its own hover
+   treatment instead). */
+a:hover:not(.card) {
+  color: var(--color-cta-on-surface);
+}
+
 a:focus-visible {
   outline: 1.5px dashed var(--color-brand);
   outline-offset: 4px;
   border-radius: var(--radius-full);
 }
 
-/* Table-cell identity links (item name, PO number, ...) go semibold on
-   hover instead of the row itself tinting. Weight rather than
-   underline, reserved for hover specifically (not the persistent
-   "you're on this page" signal a nav rail's [aria-current="page"] uses
-   semibold for too), so there's no confusion between a row you're
-   pointing at and one you're actually on. Scoped to table cells only,
-   not every <a> in an app (nav links, card links, etc. keep their own
-   existing hover treatments). */
-td a:hover {
-  font-weight: var(--font-weight-semibold);
-}
-
 /* A label should recede so the value it names is what gets scanned.
    Medium weight at a step down from body, in secondary ink — quieter
    than the data, still comfortably above AA. */
@@ -909,7 +918,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);
@@ -1134,21 +1143,22 @@ label:has(:required) .combobox-input {
   color: var(--color-text-primary);
 }
 
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: none;
-  border-color: var(--color-brand);
-  box-shadow: 0 0 0 3px var(--color-focus-ring);
-}
+/* The app's one accent blue, not --color-brand — asked for directly.
+   --color-brand still does the same job for the controls that used to
+   share this border with it (checkbox tick, a:focus-visible's outline),
+   so it stays defined as-is; this just stops reading its (near-black)
+   value for the field border specifically.
 
-/* Kept for pointer focus too — a click into a field should still show
-   which one is live, just without the ring shouting. */
+   No box-shadow ring — asked for directly ("we do not need out shadow
+   on input area when typing"). :focus and :focus-visible used to carry
+   different treatments (a ring for keyboard focus, none for a plain
+   click) and are one rule now that there's no ring to tell them apart
+   by. */
 input:focus,
 select:focus,
 textarea:focus {
   outline: none;
-  border-color: var(--color-brand);
+  border-color: var(--color-cta-on-surface);
 }
 
 /* A field the browser or the form has judged invalid.