@hattisar/design-tokens 0.3.17 → 0.3.19

package/package.json

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

@@ -300,6 +300,15 @@
      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
+     size itself put their inputs at three different starting points
+     down the card, the one thing --form-label-width above exists to
+     prevent for the row's first field. 120px is measured to the
+     longest label that lives here today, "Invoice date *" at ~97px,
+     with room to spare. */
+  --form-label-width-compact: 120px;
   --form-control-width-wide: 520px;
   --field-min-width-narrow: 140px;
 
@@ -752,24 +761,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. */
@@ -1145,21 +1152,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.