@hattisar/design-tokens 0.3.14 → 0.3.16

package/package.json

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

@@ -342,16 +342,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 +531,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 +638,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;
@@ -1365,6 +1370,23 @@ input[type="radio"] {
   margin: 0;
 }
 
+/* Cards that follow a form and belong to the same record — custom
+   fields, storefront access, attachments.
+
+   They are not part of the form: each saves itself, so none of them
+   belongs inside its <form>. But they have to line up with it, and the
+   rule above only centres a `> form`, so rendered as plain siblings
+   they spanned the whole page while the form sat centred above them —
+   and stacked flush against each other, since nothing was providing
+   the gap the form's own wrapper gives its children. */
+.record-form-trailing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  max-width: var(--page-width-content);
+  margin-inline: auto;
+}
+
 /* Collapsible accordion sections — a plain chevron that rotates open
    instead of the browser's own disclosure-triangle marker. */
 .form-section-summary {