@sharedex/ui 0.9.0 → 0.10.0

package/styles/form.css

@@ -0,0 +1,594 @@
+/*
+ * The default look of the form controls, from the sx tokens. Imported by ../theme.css.
+ *
+ * Same contract as the section defaults (see .claude/rules/tailwind-theme.md): everything in `@layer components`,
+ * every selector in `:where()`, so a utility class on a control always wins. It applies only with `[data-sx-styled]`,
+ * which `unstyled` drops.
+ *
+ * This sheet loads after the effects' sheets, and both have specificity 0, so an effect can't override a property
+ * set here. The look reads hooks instead, which effects set on the field:
+ *   --sx-field-edge         the box's border colour, over the look's own (transparent when an effect draws the outline)
+ *   --sx-field-line         the look's border colour for the field's state (hover, focus, invalid); effects that draw
+ *                           their own outline read it
+ *   --sx-field-label-color  the label's colour (validColor turns it red on an error)
+ *   --sx-field-label-size   the label's size (a floating label rests at the input's size)
+ *   --sx-field-label-weight its weight (a notch cuts its gap to the label's width)
+ *   --sx-field-placeholder  the placeholder's colour (transparent while a floating label rests on it)
+ *
+ * Checkboxes and radios read their own:
+ *   --sx-choice-edge        the drawn box's border colour (transparent when an effect draws its own box)
+ *   --sx-choice-line        the look's border colour for the option's state (rest, hover, checked, invalid)
+ *   --sx-choice-bg          the box's background while off;  --sx-choice-fill  a checkbox's background while on
+ *   --sx-choice-ink         the mark's colour;  --sx-choice-radius  the box's corners
+ *   --sx-choice-text        the option's words (a strikethrough mutes them)
+ *   --sx-switch-thumb / --sx-switch-thumb-on   a switch's thumb, off and on
+ *
+ * Select and Combobox:
+ *   --sx-picker-line        the box's border colour for its state (rest, hover, open or focused, invalid)
+ *   --sx-picker-radius      the list's corners (a bottom sheet rounds only its top)
+ *   --sx-option-radius      an option's corners (a sliding highlight takes the same)
+ *   --sx-option-active      the active option's background (transparent while a highlight slides under it)
+ *
+ * Range:
+ *   --sx-range-rail         the rail's colour;  --sx-range-knob  the thumb's (transparent when an effect draws the thumb)
+ */
+@layer components {
+  :where([data-sx-field][data-sx-styled]) {
+    --sx-field-bw: 1px;
+    --sx-field-line: var(--color-sx-border);
+  }
+  :where([data-sx-field][data-sx-variant="underline"]) {
+    --sx-field-px: 0rem;
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-label]) {
+    font-size: var(--sx-field-label-size, 0.875rem);
+    font-weight: var(--sx-field-label-weight, 500);
+    color: var(--sx-field-label-color, var(--color-sx-ink));
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-box]) {
+    min-block-size: 2.75rem;
+    border: var(--sx-field-bw) solid var(--sx-field-edge, var(--sx-field-line));
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    transition: border-color 200ms var(--ease-sx-out);
+  }
+  :where([data-sx-field][data-sx-variant="filled"]) {
+    --sx-field-line: transparent;
+  }
+  :where([data-sx-field][data-sx-variant="filled"] > [data-sx-field-box]) {
+    background: color-mix(in oklab, var(--color-sx-ink) 6%, var(--color-sx-secondary));
+  }
+  :where([data-sx-field][data-sx-inline][data-sx-styled] > [data-sx-field-box]) {
+    min-block-size: auto;
+    border-width: 0 0 2px;
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-sx-primary);
+    font-weight: 600;
+  }
+  :where([data-sx-field][data-sx-variant="underline"] > [data-sx-field-box]) {
+    border-width: 0 0 var(--sx-field-bw);
+    border-radius: 0;
+    background: transparent;
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-control])::placeholder {
+    color: var(--sx-field-placeholder, var(--color-sx-muted));
+    opacity: 1;
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-icon]) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-field][data-sx-styled]:not(:has([data-sx-field-control]:disabled)):hover) {
+      --sx-field-line: var(--color-sx-muted);
+    }
+  }
+  :where([data-sx-field][data-sx-styled]:focus-within) {
+    --sx-field-line: var(--color-sx-primary);
+  }
+  :where([data-sx-field][data-sx-styled]:is(:has([data-sx-field-control]:user-invalid), :has([data-sx-field-control][aria-invalid="true"]))) {
+    --sx-field-line: var(--color-sx-danger);
+  }
+  :where([data-sx-field][data-sx-styled]:has([data-sx-field-control]:disabled) > [data-sx-field-box]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  /* the field's own tools: quiet until used */
+  :where([data-sx-field][data-sx-styled] :is([data-sx-field-tool], [data-sx-field-counter], [data-sx-field-strength])) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-field][data-sx-styled] [data-sx-field-tool]:hover) {
+      color: var(--color-sx-ink);
+    }
+  }
+  :where([data-sx-field][data-sx-styled][data-sx-count="over"] [data-sx-field-counter]) {
+    color: var(--color-sx-danger);
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-level]) {
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-note]) {
+    color: var(--color-sx-ink);
+  }
+
+  /* checkboxes, radios and their groups */
+  :where([data-sx-choice][data-sx-styled]) {
+    --sx-choice-line: var(--color-sx-muted);
+  }
+  :where([data-sx-choice][data-sx-styled] [data-sx-choice-box]) {
+    border: 2px solid var(--sx-choice-edge, var(--sx-choice-line));
+    border-radius: var(--sx-choice-radius, 0.3125em);
+    background: var(--sx-choice-bg, var(--color-sx-secondary));
+    color: var(--sx-choice-ink, var(--color-sx-on-primary));
+    transition: background-color 150ms var(--ease-sx-out), border-color 150ms var(--ease-sx-out);
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="radio"] [data-sx-choice-box]) {
+    border-radius: var(--sx-choice-radius, 50%);
+    color: var(--sx-choice-ink, var(--color-sx-primary));
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="switch"] [data-sx-choice-box]) {
+    border-radius: var(--sx-choice-radius, 999px);
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="switch"] [data-sx-switch-thumb]) {
+    background: var(--sx-switch-thumb, var(--sx-choice-line));
+    color: var(--color-sx-primary);
+    box-shadow: 0 1px 2px color-mix(in oklab, var(--color-sx-ink) 25%, transparent);
+    transition: background-color 150ms var(--ease-sx-out);
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="switch"]:has([data-sx-choice-control]:checked) [data-sx-switch-thumb]) {
+    background: var(--sx-switch-thumb-on, var(--color-sx-on-primary));
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-choice][data-sx-styled]:not(:has([data-sx-choice-control]:disabled)):hover) {
+      --sx-choice-line: var(--color-sx-ink);
+    }
+  }
+  :where([data-sx-choice][data-sx-styled]:is(:has([data-sx-choice-control]:checked), :has([data-sx-choice-control]:indeterminate), [data-sx-mixed])) {
+    --sx-choice-line: var(--color-sx-primary);
+  }
+  :where([data-sx-choice][data-sx-styled]:is([data-sx-kind="checkbox"], [data-sx-kind="switch"]):is(:has([data-sx-choice-control]:checked), :has([data-sx-choice-control]:indeterminate), [data-sx-mixed]) [data-sx-choice-box]) {
+    background: var(--sx-choice-fill, var(--color-sx-primary));
+  }
+  :where([data-sx-choice][data-sx-styled]:has([data-sx-choice-control]:user-invalid, [data-sx-choice-control][aria-invalid="true"])) {
+    --sx-choice-line: var(--color-sx-danger);
+  }
+  :where([data-sx-choice][data-sx-styled] [data-sx-choice-text]) {
+    color: var(--sx-choice-text, var(--color-sx-ink));
+  }
+  :where([data-sx-choice][data-sx-styled] [data-sx-choice-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-choice][data-sx-styled]:has([data-sx-choice-control]:disabled) [data-sx-choice-row]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-group][data-sx-styled] > [data-sx-group-legend]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-group][data-sx-styled] > :is([data-sx-group-description], [data-sx-group-count])) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where(:is([data-sx-choice], [data-sx-group])[data-sx-styled] [data-sx-choice-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+
+  /* Select and Combobox: the box is a field's; the list a card in the top layer */
+  :where([data-sx-picker][data-sx-styled]) {
+    --sx-picker-line: var(--color-sx-border);
+    --sx-option-radius: calc(var(--radius-sx-control) - 0.125rem);
+  }
+  :where([data-sx-picker][data-sx-styled] > [data-sx-picker-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-picker][data-sx-styled] > [data-sx-picker-box]) {
+    min-block-size: 2.75rem;
+    border: 1px solid var(--sx-picker-line);
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    transition: border-color 200ms var(--ease-sx-out);
+  }
+  :where([data-sx-picker][data-sx-inline][data-sx-styled] > [data-sx-picker-box]) {
+    min-block-size: auto;
+    border-width: 0 0 2px;
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-sx-primary);
+    font-weight: 600;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-control])::placeholder {
+    color: var(--color-sx-muted);
+    opacity: 1;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-arrow]) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-picker][data-sx-styled]:not(:has([data-sx-picker-control]:disabled)):hover) {
+      --sx-picker-line: var(--color-sx-muted);
+    }
+  }
+  :where([data-sx-picker][data-sx-styled]:is(:focus-within, [data-sx-open])) {
+    --sx-picker-line: var(--color-sx-primary);
+  }
+  :where([data-sx-picker][data-sx-styled]:has([data-sx-picker-control]:user-invalid, [data-sx-picker-control][aria-invalid="true"])) {
+    --sx-picker-line: var(--color-sx-danger);
+  }
+  :where([data-sx-picker][data-sx-styled]:has([data-sx-picker-control]:disabled) > [data-sx-picker-box]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-chip]) {
+    background: color-mix(in oklab, var(--color-sx-primary) 14%, var(--color-sx-secondary));
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-popup]) {
+    border: 1px solid var(--color-sx-border);
+    border-radius: var(--sx-picker-radius, var(--radius-sx-control));
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    box-shadow: var(--shadow-sx-card);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option]) {
+    border-radius: var(--sx-option-radius);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option][data-active]) {
+    background: var(--sx-option-active, color-mix(in oklab, var(--color-sx-primary) 14%, transparent));
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option][aria-selected="true"]) {
+    font-weight: 500;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option-check]) {
+    color: var(--color-sx-primary);
+  }
+  :where([data-sx-picker][data-sx-styled] :is([data-sx-option][aria-disabled="true"], [data-sx-option-note])) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-picker][data-sx-styled] > [data-sx-picker-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  @supports (appearance: base-select) {
+    :where([data-sx-picker][data-sx-styled] select)::picker(select) {
+      padding: 0.25rem;
+      border: 1px solid var(--color-sx-border);
+      border-radius: var(--sx-picker-radius, var(--radius-sx-control));
+      background: var(--color-sx-secondary);
+      color: var(--color-sx-ink);
+      box-shadow: var(--shadow-sx-card);
+    }
+    :where([data-sx-picker][data-sx-styled] select option) {
+      border-radius: var(--sx-option-radius);
+    }
+    :where([data-sx-picker][data-sx-styled] select option:focus-visible) {
+      background: color-mix(in oklab, var(--color-sx-primary) 14%, transparent);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      :where([data-sx-picker][data-sx-styled] select option:hover) {
+        background: color-mix(in oklab, var(--color-sx-primary) 14%, transparent);
+      }
+    }
+    :where([data-sx-picker][data-sx-styled] select option:checked) {
+      font-weight: 500;
+    }
+  }
+
+  /* Range: a quiet rail, a solid thumb on a light ring */
+  :where([data-sx-range][data-sx-styled] [data-sx-range-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-output]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-track]) {
+    background: var(--sx-range-rail, color-mix(in oklab, var(--color-sx-ink) 14%, transparent));
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-thumb]) {
+    border: 2px solid var(--color-sx-secondary);
+    background: var(--sx-range-knob, var(--color-sx-primary));
+    box-shadow: 0 1px 3px color-mix(in oklab, var(--color-sx-ink) 30%, transparent);
+  }
+  :where([data-sx-range][data-sx-styled]:has([data-sx-range-control][aria-invalid="true"])) {
+    --sx-range-rail: color-mix(in oklab, var(--color-sx-danger) 30%, transparent);
+  }
+  :where([data-sx-range][data-sx-styled]:has([data-sx-range-control]:disabled) [data-sx-range-box]) {
+    opacity: 0.55;
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-range][data-sx-styled] [data-sx-range-thumb]) {
+      border-color: Canvas;
+      background: CanvasText;
+    }
+  }
+
+  /* OtpField: one box per character, the one you are on ringed (base sheet) */
+  :where([data-sx-otp][data-sx-styled] > [data-sx-otp-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-slot]) {
+    border: 1px solid var(--sx-otp-line, var(--color-sx-border));
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-slot][data-filled]) {
+    --sx-otp-line: var(--color-sx-muted);
+  }
+  :where([data-sx-otp][data-sx-styled]:has([data-sx-otp-control]:user-invalid, [data-sx-otp-control][aria-invalid="true"]) [data-sx-otp-slot]) {
+    --sx-otp-line: var(--color-sx-danger);
+  }
+  :where([data-sx-otp][data-sx-styled]:has([data-sx-otp-control]:disabled) [data-sx-otp-slots]) {
+    opacity: 0.55;
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-gap]) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-otp][data-sx-styled] > [data-sx-otp-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+
+  /* ChipGroup: quiet pills, tinted with a check when on. Hooks: --sx-chip-edge (the border while on; chipMerge clears it)
+     and --sx-chip-bw (the border's width, which chipMerge's pill covers) */
+  :where([data-sx-chips][data-sx-styled]) {
+    --sx-chip-bw: 1px;
+  }
+  :where([data-sx-chips][data-sx-styled] > [data-sx-chips-legend]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]) {
+    border: var(--sx-chip-bw) solid var(--sx-chip-line, var(--color-sx-border));
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    font-size: 0.875rem;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]:not(:has([data-sx-chip-control]:disabled)):hover) {
+      --sx-chip-line: var(--color-sx-muted);
+    }
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]:has([data-sx-chip-control]:checked)) {
+    border-color: var(--sx-chip-edge, color-mix(in oklab, var(--color-sx-primary) 45%, var(--color-sx-secondary)));
+    background: color-mix(in oklab, var(--color-sx-primary) 14%, var(--color-sx-secondary));
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chip-check]) {
+    color: var(--color-sx-primary);
+  }
+  :where([data-sx-chips][data-sx-styled]:has([data-sx-chip-control][aria-invalid="true"]) [data-sx-chip-option]) {
+    --sx-chip-line: var(--color-sx-danger);
+  }
+  :where([data-sx-chips][data-sx-styled] > [data-sx-chips-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chips-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]) {
+      border-color: ButtonText;
+    }
+  }
+
+  /* InlineEdit: the text shows a quiet pencil and a hint of a box on hover; the field is a field's */
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-icon]) {
+    color: var(--color-sx-muted);
+    opacity: 0.6;
+  }
+  :where([data-sx-inline][data-sx-styled][data-sx-empty] [data-sx-inline-text]) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-inline][data-sx-styled] [data-sx-inline-view]:not(:disabled):hover) {
+      border-color: var(--color-sx-border);
+      background: color-mix(in oklab, var(--color-sx-ink) 4%, transparent);
+    }
+    :where([data-sx-inline][data-sx-styled] [data-sx-inline-view]:not(:disabled):hover [data-sx-inline-icon]) {
+      opacity: 1;
+    }
+  }
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-control]) {
+    border-color: var(--color-sx-primary);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-control]:user-invalid) {
+    border-color: var(--color-sx-danger);
+  }
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-done]) {
+    color: var(--color-sx-success);
+  }
+
+  /* FileDrop: a dashed zone, quiet cards. Hooks: --sx-file-line (the zone's line; fileReject turns it red),
+     --sx-file-bar (a card's progress), --sx-file-button-bg / -ink / -line / -radius (the browser's own file button) */
+  :where([data-sx-file][data-sx-styled] > [data-sx-file-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-zone]) {
+    border: 2px dashed var(--sx-file-line, var(--color-sx-border));
+    border-radius: var(--radius-sx-card);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-icon]) {
+    color: var(--color-sx-primary);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-control])::file-selector-button {
+    border: 1px solid var(--sx-file-button-line, var(--color-sx-border));
+    border-radius: var(--sx-file-button-radius, var(--radius-sx-control));
+    background: var(--sx-file-button-bg, var(--color-sx-secondary));
+    color: var(--sx-file-button-ink, var(--color-sx-ink));
+    font-weight: 500;
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-card]) {
+    border: 1px solid var(--color-sx-border);
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-thumb]) {
+    background: color-mix(in oklab, var(--color-sx-ink) 6%, var(--color-sx-secondary));
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-size]) {
+    font-size: 0.8125rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-bar]) {
+    background: color-mix(in oklab, var(--color-sx-ink) 10%, transparent);
+    color: var(--sx-file-bar, var(--color-sx-primary));
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-done]) {
+    color: var(--color-sx-success);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-actions] > button) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-file][data-sx-styled] [data-sx-file-actions] > button:not(:disabled):hover) {
+      color: var(--color-sx-ink);
+    }
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-page]) {
+    background: color-mix(in oklab, var(--color-sx-secondary) 88%, transparent);
+    color: var(--color-sx-ink);
+    font-weight: 600;
+  }
+  :where([data-sx-file][data-sx-styled] > [data-sx-file-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  :where([data-sx-file][data-sx-styled]:has([data-sx-file-control][aria-invalid="true"])) {
+    --sx-file-line: var(--color-sx-danger);
+  }
+
+  /* FormSteps: a quiet rail, numbered dots, the current one ringed. Hook: --sx-steps-color (stepProgress sets it) */
+  :where([data-sx-steps][data-sx-styled] [data-sx-steps-progress]) {
+    color: var(--sx-steps-color, var(--color-sx-primary));
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-steps-rail]) {
+    background: var(--color-sx-border);
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-dot]) {
+    border: 2px solid var(--color-sx-border);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-steps][data-sx-styled] :is([data-sx-step-mark][data-sx-done], [data-sx-step-mark][aria-current="step"]) [data-sx-step-dot]) {
+    border-color: var(--sx-steps-color, var(--color-sx-primary));
+    color: var(--sx-steps-color, var(--color-sx-primary));
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-mark][data-sx-done] [data-sx-step-dot]) {
+    background: var(--sx-steps-color, var(--color-sx-primary));
+    color: var(--color-sx-on-primary);
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-name]) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-mark][aria-current="step"] [data-sx-step-name]) {
+    color: var(--color-sx-ink);
+    font-weight: 500;
+  }
+
+  /* FormSwap: the sliding panel in the primary colour */
+  :where([data-sx-swap][data-sx-styled] [data-sx-swap-panel]) {
+    border-radius: var(--radius-sx-card);
+    background: var(--color-sx-primary);
+    color: var(--color-sx-on-primary);
+  }
+  :where([data-sx-swap][data-sx-styled] [data-sx-swap-check]) {
+    color: var(--color-sx-success);
+  }
+
+  /* ErrorSummary, SaveStatus, PasswordRules */
+  :where([data-sx-error-summary][data-sx-styled]) {
+    padding: 1rem 1.25rem;
+    border: 2px solid var(--color-sx-danger);
+    border-radius: var(--radius-sx-card);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-error-summary][data-sx-styled] [data-sx-error-summary-title]) {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+  :where([data-sx-error-summary][data-sx-styled] li + li) {
+    margin-block-start: 0.25rem;
+  }
+  :where([data-sx-error-summary][data-sx-styled] a) {
+    color: var(--color-sx-danger);
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  :where([data-sx-save][data-sx-styled]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-save="saved"][data-sx-styled] > svg) {
+    color: var(--color-sx-success);
+  }
+  :where([data-sx-save="error"][data-sx-styled]) {
+    color: var(--color-sx-danger);
+  }
+  :where([data-sx-password-rules][data-sx-styled]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-password-rules][data-sx-styled] [data-sx-met]) {
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-password-rules][data-sx-styled] [data-sx-met] svg) {
+    color: var(--color-sx-success);
+  }
+}

package/theme.css

@@ -16,13 +16,14 @@
  * star-slash closes the comment early and breaks the whole stylesheet.)
  */
 
-/* Default looks for Button and the headless sections, as plain CSS in
+/* Default looks for Button, the form controls and the headless sections, as plain CSS in
    Tailwind's `components` layer: any utility class you pass through
    `className` sits in the later `utilities` layer, so it always wins. (An
    @import must come before every other rule, so it sits up here.) Button comes
    first: at equal specificity a section restyles its own action buttons (the
    Hero over a photo). */
 @import "./styles/button.css";
+@import "./styles/form.css";
 @import "./styles/sections.css";
 
 /* Best-effort: register the shipped component code as a scan source. This
@@ -51,6 +52,8 @@
  *   muted      secondary text
  *   border     hairlines and outlines
  *   on-primary text placed on a primary fill
+ *   danger     errors: an invalid field's line and message
+ *   success    a field that checks out
  */
 @theme static {
   --color-sx-ink: #001d21;
@@ -60,6 +63,8 @@
   --color-sx-muted: #5b6b6e;
   --color-sx-border: #e3e6e4;
   --color-sx-on-primary: #f9f9f7;
+  --color-sx-danger: #b42318;
+  --color-sx-success: #067647;
 
   --font-sx-display: ui-sans-serif, system-ui, sans-serif;
   --font-sx-body: ui-sans-serif, system-ui, sans-serif;