@hattisar/design-tokens 0.3.22 → 0.3.23

package/package.json

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

@@ -261,6 +261,12 @@
      tight"). One token so the tiles and the toolbar can't drift apart. */
   --toolbar-row-height: 48px;
 
+  /* The picture picker (ImagePicker.tsx) behind an item image, the org
+     logo and both user photos. Named so those four can't drift apart. */
+  --image-picker-size: 96px;
+  --image-picker-border: 1px dashed var(--color-border);
+  --image-picker-overlay: color-mix(in srgb, var(--color-background-card) 55%, transparent);
+
   /* Depth, deliberately restrained. These were all `none`, which left
      every surface separated by border alone — correct, legible, and
      completely flat: a card, a dropdown and a modal all sat on the page
@@ -860,15 +866,11 @@ label {
   line-height: 1.4;
 }
 
-/* A required field says so once, here, rather than each form inventing
-   its own asterisk-or-not. Marked on the label so it reads before the
-   field rather than after it. */
-label[data-required]::after {
-  content: "*";
-  margin-left: 3px;
-  color: var(--color-danger);
-  font-weight: var(--font-weight-regular);
-}
+/* No star. Asked for directly, 2026-09-25: "remove star and always
+   show red border for require field unless its typed out or
+   selected". The field's own border is the one and only required
+   signal now — see input:required:invalid below — and it needs no
+   asterisk to explain what it already shows. */
 
 /* Primary action — the call-to-action fill. Charcoal, the same ink as
    --color-brand (see --color-cta above): had a hue of its own for a
@@ -1083,6 +1085,16 @@ textarea::placeholder {
    a warehouse read as a plain text box beside fields that plainly
    opened.
    ------------------------------------------------------------------ */
+/* Combobox's real `required` validation lives on an invisible sibling
+   input (see Combobox.tsx's own comment) — it has no border of its
+   own to turn red, so the visible box reads its sibling's validity
+   instead. Placed after :focus in the file so it wins while the field
+   is focused too: empty-and-required should read as an error the
+   whole time it stays empty, not just at rest. */
+.combobox-input:has(~ input:required:invalid) {
+  border-color: var(--color-danger);
+}
+
 select,
 .combobox-input {
   appearance: none;
@@ -1184,57 +1196,14 @@ 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 usual way to mark 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.
+ * No star, and no flex-row layout to hold one — the star this used to
+ * draw beside the text is gone (2026-09-25), so the label goes back
+ * to its own ordinary flow, inline `display: block` and all. The
+ * label's own colour was never touched by this rule either way (see
+ * label[data-required]'s own comment above), so the override just
+ * below — forcing the control's typed text back to normal ink — is
+ * dead weight now and kept only because removing it is out of scope
+ * for this pass.
  */
 label:has(:required) input,
 label:has(:required) select,
@@ -1274,12 +1243,27 @@ textarea:user-invalid {
   border-color: var(--color-danger);
 }
 
+/* Required and currently empty — on from the moment the form opens,
+   not waiting for a touch. Off the instant a value exists: typed text
+   satisfies :invalid on a plain input/textarea directly; a picked
+   option satisfies it on a select or Combobox's own hidden required
+   input (see .combobox-input's own rule, and .tags-input's, both
+   further down) the same way. */
+input:required:invalid,
+select:required:invalid,
+textarea:required:invalid {
+  border-color: var(--color-danger);
+}
+
 input[aria-invalid="true"]:focus-visible,
 select[aria-invalid="true"]:focus-visible,
 textarea[aria-invalid="true"]:focus-visible,
 input:user-invalid:focus-visible,
 select:user-invalid:focus-visible,
-textarea:user-invalid:focus-visible {
+textarea:user-invalid:focus-visible,
+input:required:invalid:focus-visible,
+select:required:invalid:focus-visible,
+textarea:required:invalid:focus-visible {
   border-color: var(--color-danger);
   box-shadow: 0 0 0 3px var(--color-focus-ring-danger);
 }