@hideyukimori/nene2-ui 0.8.0 → 0.14.0

package/themes/default.css

@@ -19,6 +19,30 @@
   --color-on-accent: oklch(99% 0 0);
   --color-danger: oklch(55% 0.2 25);
 
+  /* 🔴 Four contract colours the theme did not define. They are not new: `warn`,
+   * `warn-soft`, `on-warn` and `danger-soft` are in the frozen Core Token Contract v1
+   * (28 colours), and this theme defined 8 of them. Twenty are still missing — see the
+   * README — but these four are what a validity state needs.
+   *
+   * Same root cause as the radius scale: the theme was promoted verbatim from nene-payout,
+   * and payout has no warn. Six other ships do (nene-vault, nene-invoice, nene-field,
+   * nene-records, nene-deal, nene-profile), so `--color-x-slot-alert-warn-*` pointed at
+   * `--color-danger` — a warning that renders as an error. Promoting from the product with
+   * the fewest violations exported its missing distinctions along with its consistency.
+   *
+   * Values are the fleet median of the eight `--color-warn` definitions in use
+   * (2026-08-23; nene-field's hex converted to OKLCH to be counted).
+   *
+   * 🔴 `on-warn` is measured, not chosen. Against this `warn` fill: white is 3.48:1 and
+   * `text-primary` is 4.47:1 — which misses the 4.5:1 body-text threshold by 0.03, and is
+   * exactly the kind of near-miss that survives review by eye. The dark amber below is
+   * 4.97:1. The `warn` fill itself is 3.58:1 against `surface-raised`, clearing the 3:1
+   * that WCAG 1.4.11 asks of a non-text boundary. */
+  --color-warn: oklch(63% 0.135 75);
+  --color-warn-soft: oklch(95% 0.035 80);
+  --color-on-warn: oklch(21% 0.04 75);
+  --color-danger-soft: oklch(95% 0.03 30);
+
   --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.06);
 
   /* Typography. Until 0.3.0 the kit had none of these and the components carried
@@ -54,6 +78,21 @@
   --text-x-xl: 1.5rem;
   --text-x-ios-floor: 16px;
 
+  /* The smallest a control may be on a touch screen. Not a design step, for the same reason
+   * `--text-x-ios-floor` is not: it is what the platform requires, and a product lowering it
+   * is not expressing a preference, it is making targets people miss.
+   *
+   * 🔴 44px, which is what WCAG 2.5.5 (AAA) and Apple's HIG both ask for — the smallest
+   * value that satisfies the standards rather than the fleet's average. Two ships already
+   * set 48px (nene-profile, nene-deal), Material's number; a product that wants it raises
+   * the slot. Picking the higher one here would be the kit imposing a size, and picking a
+   * median would make a device constraint look like a preference.
+   *
+   * ⚠️ The kit's own `sm` button computes to about 31px against a 14px body — above the
+   * 24px WCAG 2.5.8 (AA) asks for, and well under this. The `md` button is already ~47px,
+   * so this changes nothing there. */
+  --spacing-x-touch-floor: 44px;
+
   /* ─────────────────────────────────────────────────────────────────────────
    * ② SLOTS — a product may redefine these.
    *
@@ -70,6 +109,12 @@
   --spacing-x-slot-button-pad-y: var(--spacing-x-xs);
   --spacing-x-slot-button-sm-pad-x: var(--spacing-x-xs);
   --spacing-x-slot-button-sm-pad-y: var(--spacing-x-3xs);
+  /* 🔴 The gap between an icon and its label. It exists because the button became a flex
+   * container in 0.13.0, and a flex container drops the whitespace that used to separate
+   * them: `<Button><Icon /> Save</Button>` renders the text as an anonymous flex item, and
+   * leading whitespace in one is stripped. `3xs` is 0.25rem, which is about the width of
+   * the space that disappears — so the change of display does not also change the spacing. */
+  --spacing-x-slot-button-gap: var(--spacing-x-3xs);
   --spacing-x-slot-control-pad-x: var(--spacing-x-2xs);
   --spacing-x-slot-control-pad-y: var(--spacing-x-xs);
   --spacing-x-slot-field-gap: var(--spacing-x-2xs);
@@ -126,9 +171,11 @@
   --color-x-slot-alert-info-bg: var(--color-surface);
   --color-x-slot-alert-info-fg: var(--color-text-primary);
   --color-x-slot-alert-info-border: var(--color-border);
+  /* 🔴 Changed in 0.12.0: these pointed at `--color-danger`, so a warning rendered as an
+   * error. Not a shade — a different meaning wearing the wrong one. */
   --color-x-slot-alert-warn-bg: var(--color-surface);
-  --color-x-slot-alert-warn-fg: var(--color-danger);
-  --color-x-slot-alert-warn-border: var(--color-danger);
+  --color-x-slot-alert-warn-fg: var(--color-on-warn);
+  --color-x-slot-alert-warn-border: var(--color-warn);
   --color-x-slot-alert-danger-bg: var(--color-surface);
   --color-x-slot-alert-danger-fg: var(--color-danger);
   --color-x-slot-alert-danger-border: var(--color-danger);
@@ -137,6 +184,10 @@
   --text-x-slot-field-hint-size: var(--text-x-2xs);
   --color-x-slot-field-error: var(--color-danger);
   --text-x-slot-field-error-size: var(--text-x-2xs);
+  /* 🔴 `on-warn`, not `warn`. This text sits on the page, not on a warn fill: `--color-warn`
+   * measures 3.58:1 against `surface-raised`, which clears the 3:1 a border needs and misses
+   * the 4.5:1 body text needs. The dark amber clears both. */
+  --color-x-slot-field-warning-fg: var(--color-on-warn);
   --text-x-slot-field-label-size: var(--text-x-xs);
   /* 🔴 `var(--font-weight-medium)`, not `500`. Identical output — Tailwind defines that
    * step as 500 — but a literal here is a weight the kit invented, and the namespace has a
@@ -156,6 +207,166 @@
    * only because the kit cannot know a product's rem base — not because it is yours to tune. */
   --text-x-slot-control-size: var(--text-x-md);
   --text-x-slot-control-touch-size: var(--text-x-ios-floor);
+  /* The other half of the same constraint: the first says a focused control must not be
+   * small enough to make iOS zoom, this says it must not be small enough to miss. Applied
+   * only under `@media (pointer: coarse)` — pointer, not width, for the reason recorded
+   * above (an iPad in landscape is wide and still has fingers). */
+  --spacing-x-slot-control-touch-min: var(--spacing-x-touch-floor);
+
+  /* ── Colour slots ─────────────────────────────────────────────────────────────
+   * Every colour a component paints comes from here.
+   *
+   * 🔴 Until 0.9.0 only `FormField` and `InlineAlert` had any, and the other 26 components
+   * reached straight into the palette (`text-text-primary`, `bg-surface-raised`) — 59 places
+   * in 20 files. The README said "every design value a component uses comes from a slot"
+   * the whole time. The check that was supposed to enforce it listed the utility prefixes
+   * it knew about — `p px py … rounded` — so colour and weight were never inspected at all.
+   *
+   * Found by nene-vault comparing its production screens against the migrated build in a
+   * real browser (Playwright, computed styles, element by element, 2026-08-23): 73 elements
+   * matched, 21 differed, and every difference was inside a kit component. Its own markup —
+   * side nav, tables, headings — matched on every property. A product cannot make a control
+   * darker than its body text while the kit writes the colour itself.
+   *
+   * Defaults are palette references, so nothing renders differently. What changes is that
+   * there is now an opening. */
+  --color-x-slot-focus-ring: var(--color-text-primary);
+
+  --color-x-slot-button-primary-bg: var(--color-accent);
+  --color-x-slot-button-primary-fg: var(--color-on-accent);
+  --color-x-slot-button-secondary-bg: var(--color-surface-raised);
+  --color-x-slot-button-secondary-fg: var(--color-text-primary);
+  --color-x-slot-button-secondary-border: var(--color-border);
+  --color-x-slot-button-danger-bg: var(--color-danger);
+  --color-x-slot-button-danger-fg: var(--color-on-accent);
+  --color-x-slot-button-ghost-fg: var(--color-text-primary);
+
+  /* Shared by Input, Select and Textarea — they are one control with three shapes, and a
+   * product that darkens one and not the others has a bug, not a design. */
+  --color-x-slot-control-fg: var(--color-text-primary);
+  --color-x-slot-control-bg: var(--color-surface-raised);
+  --color-x-slot-control-border: var(--color-border);
+  --color-x-slot-control-placeholder: var(--color-text-muted);
+
+  /* 🔴 The kit painted nothing for validity until 0.12.0 — an invalid control looked exactly
+   * like a valid one, while `aria-invalid` was set and announced. Seven of nine ships paint
+   * it themselves (Tailwind `aria-invalid:` variants, CSS selectors, or a class name), so a
+   * migration onto the kit silently removed a signal the product already had. nene-vault
+   * lost an amber border on retention periods under ten years, and the test that guarded it
+   * asserted `aria-invalid="true"` — the attribute, not the paint — so it stayed green.
+   *
+   * 🔑 A test can check a stand-in for the thing it cares about. While both live in the
+   * same component that is the same test; the moment the real thing moves upstream, the
+   * stand-in stays behind and keeps passing.
+   *
+   * Border, not a ring: `ring-*` is a box-shadow and a parent with `overflow: hidden` clips
+   * it — the same reason the focus indicator here is an `outline`. The background carries
+   * the rest, and neither competes with the focus outline. */
+  --color-x-slot-control-invalid-border: var(--color-danger);
+  --color-x-slot-control-invalid-bg: var(--color-danger-soft);
+  --color-x-slot-control-warn-border: var(--color-warn);
+  --color-x-slot-control-warn-bg: var(--color-warn-soft);
+
+  --color-x-slot-choice-fg: var(--color-text-primary);
+  --color-x-slot-choice-border: var(--color-border);
+
+  --color-x-slot-switch-on-bg: var(--color-accent);
+  --color-x-slot-switch-on-fg: var(--color-on-accent);
+  --color-x-slot-switch-off-bg: var(--color-surface);
+  --color-x-slot-switch-off-fg: var(--color-text-muted);
+  --color-x-slot-switch-border: var(--color-border);
+
+  --color-x-slot-badge-neutral-bg: var(--color-surface);
+  --color-x-slot-badge-neutral-fg: var(--color-text-muted);
+  --color-x-slot-badge-neutral-border: var(--color-border);
+  --color-x-slot-badge-accent-bg: var(--color-accent);
+  --color-x-slot-badge-accent-fg: var(--color-on-accent);
+  --color-x-slot-badge-accent-border: var(--color-accent);
+  --color-x-slot-badge-danger-bg: var(--color-danger);
+  --color-x-slot-badge-danger-fg: var(--color-on-accent);
+  --color-x-slot-badge-danger-border: var(--color-danger);
+
+  --color-x-slot-toast-bg: var(--color-surface-raised);
+  --color-x-slot-toast-fg: var(--color-text-primary);
+  --color-x-slot-toast-border: var(--color-border);
+  --color-x-slot-toast-danger-fg: var(--color-danger);
+  --color-x-slot-toast-danger-border: var(--color-danger);
+
+  --color-x-slot-card-bg: var(--color-surface-raised);
+  --color-x-slot-card-border: var(--color-border);
+
+  --color-x-slot-modal-bg: var(--color-surface-raised);
+  --color-x-slot-modal-fg: var(--color-text-primary);
+  --color-x-slot-modal-border: var(--color-border);
+  /* The dim behind a modal. A colour, so it belongs here — the opacity that goes with it is
+   * applied by the component, since it is not a palette entry. */
+  --color-x-slot-modal-scrim: var(--color-text-primary);
+
+  --color-x-slot-table-fg: var(--color-text-primary);
+  --color-x-slot-table-header-fg: var(--color-text-muted);
+  --color-x-slot-table-border: var(--color-border);
+
+  --color-x-slot-detail-term-fg: var(--color-text-muted);
+  --color-x-slot-detail-description-fg: var(--color-text-primary);
+  --color-x-slot-detail-border: var(--color-border);
+
+  --color-x-slot-pagination-fg: var(--color-text-muted);
+  --color-x-slot-page-header-fg: var(--color-text-primary);
+  --color-x-slot-text-fg: var(--color-text-primary);
+  --color-x-slot-text-muted-fg: var(--color-text-muted);
+  --color-x-slot-spinner-fg: var(--color-text-muted);
+  --color-x-slot-empty-state-fg: var(--color-text-muted);
+  --color-x-slot-error-state-fg: var(--color-danger);
+  /* 🔴 The required marker, not the error message — that one is `--color-x-slot-field-error`.
+   * Named `-error-fg` when the colour slots were swept in (0.9.0, same day), which reads as
+   * "the error message's colour" and is not. Renamed before anything consumed it. */
+  --color-x-slot-field-required-marker: var(--color-danger);
+
+  /* An upper bound for an `<svg>` written directly inside a `Button`.
+   *
+   * 🔴 `max-*`, deliberately not `size-*`. An `<svg>` with no width/height attributes and no
+   * CSS size is a replaced element with no intrinsic size, so it lays out at 300x150 — which
+   * is how a nene-vault upload button became a 230px-tall rectangle the moment its wrapper
+   * changed from a `<div>` to a `<Stack>` (2026-08-23).
+   *
+   * Sizing it outright would fix that and break something else: a class produced by an
+   * arbitrary variant (`[&_svg]:size-6`) outranks the plain `h-6 w-6` that `Icon` puts on
+   * itself, so `<Icon size="sm">` inside a button would silently render at the button's
+   * size. A maximum has no such conflict — it constrains nothing that is already smaller,
+   * and there is no specificity contest because the two properties are different.
+   *
+   * The bound is `--spacing-x-lg`, which is 1.5rem — `Icon size="lg"` exactly — so no icon
+   * the kit ships is clamped by it. */
+  --spacing-x-slot-button-icon: var(--spacing-x-lg);
+
+  /* ── Weight slots ─────────────────────────────────────────────────────────────
+   * `font-medium` appeared inline in four components. Same rule, same reason as colour. */
+  --font-weight-x-slot-button: var(--font-weight-medium);
+  --font-weight-x-slot-table-header: var(--font-weight-medium);
+  --font-weight-x-slot-detail-term: var(--font-weight-medium);
+  --font-weight-x-slot-page-header: var(--font-weight-medium);
+
+  /* ── Size slots that decline to choose ────────────────────────────────────────
+   * 🔴 `inherit`, not a step. Button and the choice controls set no font-size today, so
+   * they take the page's — and picking a step here would change how every product already
+   * renders, which is the one thing this release must not do. `inherit` is not a design
+   * value the kit invented; it is the kit saying it has no opinion, in a place a product
+   * can now answer. nene-vault's production buttons are 13px against a 14px body, which is
+   * exactly the distinction that had nowhere to live.
+   *
+   * ⚠️ 13px is not on the type scale (0.6875 / 0.75 / 0.875 / 1 / 1.125 / 1.5rem). The
+   * scale was measured from what the fleet writes in Tailwind classes, which cannot express
+   * a value it has no step for — so that measurement could not have seen it. Recorded here
+   * rather than acted on: changing the type scale is its own decision, with its own
+   * measurement, and it is not this release's. */
+  --text-x-slot-button-size: inherit;
+  /* 🔴 `sm` gets its own, because padding already has one and the pair was asymmetric:
+   * `--spacing-x-slot-button-{,sm-}pad-{x,y}` is four slots, the font was one. nene-vault
+   * shipped md=13px and sm=12px, and on the kit both came out at the same size — its
+   * pagination "Previous" measured 12px in production against 13px on the migrated build.
+   * Defaults to `inherit` like its sibling, so nothing renders differently today. */
+  --text-x-slot-button-sm-size: inherit;
+  --text-x-slot-choice-size: inherit;
 
   /* Sentinel for the consumer's build (#316). Zero-width, so applying it does nothing.
    * Its only job is to exist: `p-x-source-probe` appears nowhere except this kit's `dist`,