@hattisar/design-tokens 0.3.9 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "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
@@ -404,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);
@@ -508,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);
@@ -710,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;
@@ -720,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,
@@ -730,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);
 }
 
@@ -979,6 +1008,90 @@ 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.
+ */
+/*
+ * And a star after the label text, the way Zoho marks a required
+ * field.
+ *
+ * Harder than it looks, because the label's text is a bare text node:
+ * `<label>First Name<input required></label>`. A plain `label::after`
+ * renders after *everything* in the label — under the input, not
+ * beside the words — and the only way to attach it to the text
+ * directly would be to wrap that text in a span on every field of
+ * every form.
+ *
+ * So the label becomes a wrapping flex row for required fields only,
+ * and the three items are ordered explicitly: the text (order 0, an
+ * anonymous flex item), the star (order 1), then the control, forced
+ * onto the next line by a full-width basis. The result is the text and
+ * its star on one line and the field under them — which is what the
+ * label already looked like, with a star added and no markup touched.
+ */
+label:has(:required) {
+  /*
+   * !important because 212 labels in this app carry an inline
+   * `style={{ display: "block" }}`, and an inline declaration beats
+   * any stylesheet rule regardless of specificity. This is the case
+   * the keyword exists for: overriding markup a stylesheet cannot
+   * reach. Without it the star renders after the control on every one
+   * of those labels instead of beside the words.
+   */
+  display: flex !important;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+label:has(:required) > * {
+  order: 2;
+  flex-basis: 100%;
+}
+
+label:has(:required)::after {
+  content: "*";
+  order: 1;
+  margin-left: 2px;
+  color: var(--color-danger);
+}
+
+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 {