@hattisar/design-tokens 0.3.13 → 0.3.15

package/package.json

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

@@ -123,6 +123,14 @@
      nearest shade that passes is #1a73e8 at 4.51:1, visually the same
      blue, if the ratio matters more than the exact hex. */
   --color-cta: #4285f4;
+  /* The call-to-action blue as *text* on a surface, which is a
+     stricter bar than as a fill. #4285f4 carries white at 3.56:1 — the
+     one documented exception in check-contrast.mjs — and reusing it for
+     text would spread that exception instead of containing it. Scaled
+     13% darker it reaches 4.59:1 on a white card while reading as the
+     same blue. Dark mode needs no adjustment: #4285f4 already measures
+     4.61:1 on #1f1f23, so it keeps the brand hex exactly. */
+  --color-cta-on-surface: #3973d4;
   --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
   --color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
   --color-cta-text: #ffffff;
@@ -442,6 +450,9 @@
   --color-brand-active: color-mix(in srgb, var(--color-brand) 75%, black);
   --color-brand-text: #09090b;
   --color-cta: #4285f4;
+  /* Light mode darkens this for contrast; on a dark surface the brand
+     blue already clears AA, so it stands unmodified. */
+  --color-cta-on-surface: #4285f4;
   --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
   --color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
   --color-cta-text: #ffffff;
@@ -550,6 +561,14 @@
   --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
   --color-brand-text: #ffffff;
   --color-cta: #4285f4;
+  /* The call-to-action blue as *text* on a surface, which is a
+     stricter bar than as a fill. #4285f4 carries white at 3.56:1 — the
+     one documented exception in check-contrast.mjs — and reusing it for
+     text would spread that exception instead of containing it. Scaled
+     13% darker it reaches 4.59:1 on a white card while reading as the
+     same blue. Dark mode needs no adjustment: #4285f4 already measures
+     4.61:1 on #1f1f23, so it keeps the brand hex exactly. */
+  --color-cta-on-surface: #3973d4;
   --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
   --color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
   --color-cta-text: #ffffff;
@@ -1346,6 +1365,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 {