@hattisar/design-tokens 0.3.8 → 0.3.10

package/package.json

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

@@ -109,6 +109,25 @@
   --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
   --color-brand-text: #ffffff;
 
+  /* The main call to action.
+     Asked for by hex: "main CTA color #4285f4". It is the one place in
+     this palette with a hue — greys carry structure, colour carries
+     status, and now one blue carries "this is the button you press".
+     --color-brand stays charcoal ink: it is the focus ring, the active
+     tab marker and the checkbox tick, and turning all of those blue is
+     a bigger change than a call-to-action colour.
+
+     White on #4285f4 measures 3.56:1, below the 4.5:1 this file
+     promises everywhere else. It is recorded as a deliberate exception
+     in check-contrast.mjs rather than quietly left out of it — the
+     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;
+  --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;
+
+
   /* Secondary button — bordered light-gray fill. Reuses
      --color-surface-tint/--color-border-strong/--color-text-primary
      rather than their own literal hex, so the secondary button always
@@ -254,11 +273,15 @@
   --field-min-width: 260px;
   /* For a control whose value is a word, not a sentence — a variant
      name, a unit, a percentage — inside a line-item row. */
-  /* The metadata rail on a master-data form. Narrower than the
-     document rail (340px), which has to hold a party summary and a
-     Notes textarea — this holds status, tags and a note, and a
-     narrower rail keeps the content column the obvious subject. */
-  --record-rail-width: 300px;
+  /* The label column on a vertical form, and how wide a control gets.
+     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
+     lets the page be as wide as it likes. */
+  --form-label-width: 160px;
+  --form-control-width: 340px;
+  --form-control-width-wide: 520px;
   --field-min-width-narrow: 140px;
 
   --space-16: 64px;
@@ -400,6 +423,10 @@
   --color-brand-hover: color-mix(in srgb, var(--color-brand) 90%, black);
   --color-brand-active: color-mix(in srgb, var(--color-brand) 75%, black);
   --color-brand-text: #09090b;
+  --color-cta: #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;
 
   --shadow-btn-primary: 0 1px 2px rgba(9, 9, 11, 0.12);
   --shadow-btn-secondary: 0 1px 2px rgba(9, 9, 11, 0.05);
@@ -504,6 +531,10 @@
   --color-brand-hover: color-mix(in srgb, var(--color-brand) 85%, black);
   --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
   --color-brand-text: #ffffff;
+  --color-cta: #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;
 
   --shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-btn-secondary: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -706,8 +737,10 @@ label[data-required]::after {
   font-weight: var(--font-weight-regular);
 }
 
-/* Primary action — highest-contrast neutral fill (--color-brand),
-   paired text color (--color-brand-text). */
+/* Primary action — the call-to-action fill. Charcoal until it was
+   given a colour of its own; --color-brand still carries structure
+   (focus ring, active tab, checkbox tick) and is deliberately not
+   this. */
 button {
   font: inherit;
   cursor: pointer;
@@ -716,8 +749,8 @@ button {
   padding: 5px 10px;
   font-size: var(--text-base);
   font-weight: 400;
-  background: var(--color-brand);
-  color: var(--color-brand-text);
+  background: var(--color-cta);
+  color: var(--color-cta-text);
   box-shadow: var(--shadow-btn-primary);
   transition:
     transform 0.05s ease,
@@ -726,11 +759,11 @@ button {
 }
 
 button:hover {
-  background: var(--color-brand-hover);
+  background: var(--color-cta-hover);
 }
 
 button:active {
-  background: var(--color-brand-active);
+  background: var(--color-cta-active);
   transform: scale(0.97);
 }
 
@@ -975,6 +1008,46 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
    box-shadow spread follows the border-radius exactly, so it reads as
    one thickened edge — which fixes the original complaint without
    leaving keyboard users hunting for which field they are in. */
+/* 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
+   optional ones are not.
+
+   Written as `:has()` rather than a prop on forty forms: the label
+   already wraps its control, so the markup that says "required" is
+   already there and nothing needs to be repeated. A field that becomes
+   optional stops being red on its own, which a hand-maintained flag
+   would not.
+
+   The control inside is put back to the normal ink — colour is
+   inherited, and a red label would otherwise mean red typing in the
+   box under it. */
+/*
+ * Descendant, not direct child. A Combobox already renders a hidden
+ * `<input required>` so that native form validation still works the
+ * way the `<select required>` it replaced did — but it is nested
+ * inside the container div, so `> :required` could not see it and only
+ * the handful of plain `<input required>` fields turned red. Every
+ * picker in the app is a Combobox underneath, so this is the
+ * difference between one red label on a form and all of them.
+ */
+label:has(:required) {
+  color: var(--color-danger);
+}
+
+/*
+ * The controls inside go back to the normal ink. Colour inherits, so
+ * without this a red label means red typing in the box under it — and
+ * on a Combobox, red text in the dropdown as well.
+ */
+label:has(:required) input,
+label:has(:required) select,
+label:has(:required) textarea,
+label:has(:required) .combobox-input {
+  color: var(--color-text-primary);
+}
+
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {