@hattisar/design-tokens 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "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;
@@ -277,7 +285,7 @@
      A control that stretches to the page is the thing that made these
      forms read as a wall: an email box does not need 900px, and at
      that width the eye has to travel back across empty space to find
-     the next label. Zoho holds both to a fixed, comfortable size and
+     the next label. Both are held to a fixed, comfortable size and
      lets the page be as wide as it likes. */
   --form-label-width: 160px;
   --form-control-width: 340px;
@@ -353,7 +361,7 @@
   --sidebar-height: calc(100vh - var(--header-height));
 
   /* Two widths, because a page is one of two things.
-     Measured against Shopify at 1920: their product *list* runs
+     Measured against a storefront admin at 1920: its product *list* runs
      256→1888, effectively the full area, and their product *form* runs
      605→1554 — 950px, centred, with 365px of gap either side. A table
      wants every pixel; a form wants a column you can read across
@@ -365,7 +373,7 @@
      right edge moves between pages *and* so does the amount of empty
      space, so the app reads as if it cannot decide how wide it is.
 
-     --page-width-content is 1152 rather than Shopify's 950 for a
+     --page-width-content is 1152 rather than the 950 measured there,
      reason that is ours and not theirs: their product form has no
      line-item grid and every one of our documents does. A sales order
      at 950 would scroll its item table sideways on every visit, and
@@ -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;
@@ -1029,7 +1048,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
 /* A required field says so on its label, in the red this app already
    uses for things that are wrong or missing.
    Asked for: "use our existing red for required field title" — the
-   same convention Zoho uses, where a required label is red and the
+   usual convention, where a required label is red and the
    optional ones are not.
 
    Written as `:has()` rather than a prop on forty forms: the label
@@ -1051,7 +1070,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
  * difference between one red label on a form and all of them.
  */
 /*
- * And a star after the label text, the way Zoho marks a required
+ * And a star after the label text, the usual way to mark a required
  * field.
  *
  * Harder than it looks, because the label's text is a bare text node:
@@ -1330,7 +1349,7 @@ input[type="radio"] {
    the thing the old note actually wanted. The page title moves with
    it, so the two stay aligned.
 
-   Tables are untouched and stay full width, which is what Shopify does
+   Tables are untouched and stay full width, which is what those do
    and what a table wants. */
 .record-form-layout > form,
 .record-form-layout.medium-form-layout > form,