@adia-ai/web-components 0.6.46 → 0.6.48

package/styles/colors/semantics/core.css

@@ -0,0 +1,317 @@
+/* adia:semantic/color — core semantic color aliases (L2 + L3).
+   The consumable API: canvas (neutral fg/bg/border), accent, brand, and
+   the four status families (info/success/warning/danger). Split out of
+   the 636-line semantics.css (v0.6.48 reorg, ADR-0035); imported FIRST by
+   the semantics.css barrel so the status-compat overrides in aliases.css
+   (imported last) still win, exactly as in the original source order. */
+
+:root, theme-ui, [data-theme] {
+
+  /* ══════════════════════════════════════════════════════════════
+     CANVAS — Neutral text, borders, surfaces
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-canvas-strong:   light-dark(var(--a-neutral-50-tint), var(--a-neutral-60-shade));
+  --a-canvas:          var(--a-neutral-50);
+  --a-canvas-subtle:   light-dark(var(--a-neutral-20-tint), var(--a-neutral-30-shade));
+  --a-canvas-muted:    light-dark(var(--a-neutral-10-tint), var(--a-neutral-15-shade));
+  --a-canvas-hover:    light-dark(var(--a-neutral-60-tint), var(--a-neutral-60-shade));
+  --a-canvas-active:   light-dark(var(--a-neutral-60-tint), var(--a-neutral-65-shade));
+  --a-canvas-selected: light-dark(var(--a-neutral-45-tint), var(--a-neutral-50-shade));
+
+  /* Text on neutral surfaces — low shade steps = dark text for light mode.
+     Dark-mode tint spread widened: text→subtle gap 25→35 steps,
+     subtle→disabled gap 10→15 steps, for clearer visual hierarchy. */
+  /* Subtle + muted lifted one fine-step shade-side to clear WCAG AA
+     4.5:1 on canvas-0/1/2 in both schemes. Subtle ↔ muted gap
+     compresses from 10 to 5 step-fractions — visual hierarchy
+     leans more on font-weight + size and less on shade contrast. */
+  --a-canvas-text-strong:   light-dark(var(--a-neutral-05-shade), var(--a-neutral-05-tint));
+  --a-canvas-text:          light-dark(var(--a-neutral-20-shade), var(--a-neutral-20-tint));
+  --a-canvas-text-subtle:   light-dark(var(--a-neutral-35-shade), var(--a-neutral-35-tint));
+  --a-canvas-text-muted:    light-dark(var(--a-neutral-50-shade), var(--a-neutral-50-tint));
+  --a-canvas-text-disabled: light-dark(var(--a-neutral-65-shade), var(--a-neutral-65-tint));
+  --a-canvas-text-inverse:  var(--a-neutral-10);
+
+  /* Luminance-direction surfaces (always darken relative to canvas-0) */
+  --a-canvas-well:    var(--a-canvas-1);   /* sunken panels, code blocks */
+  --a-canvas-inset:   var(--a-canvas-0);   /* recessed inputs, wells */
+  --a-canvas-pressed: var(--a-canvas-2);   /* pressed/active button states */
+
+  /* Borders on neutral surfaces — adaptive scrims flip polarity per mode. */
+  --a-canvas-border-subtle: var(--a-neutral-0-scrim);
+  --a-canvas-border:        var(--a-neutral-2-scrim);
+  --a-canvas-border-strong: var(--a-neutral-4-scrim);
+
+  /* L3 — short-alias matrix (the consumable API for neutral surfaces) */
+  --a-bg:              var(--a-canvas-0);
+  --a-bg-scrim:        var(--a-canvas-0-scrim);
+  --a-bg-subtle:       var(--a-canvas-1);
+  --a-bg-muted:        var(--a-canvas-0-scrim);
+  --a-bg-strong:       var(--a-canvas-3);
+  --a-bg-hover:        var(--a-canvas-2);
+  --a-bg-active:       var(--a-canvas-pressed);
+  --a-bg-selected:     var(--a-canvas-0-scrim);
+  --a-bg-disabled:     var(--a-canvas-muted);
+  --a-bg-invalid:      var(--a-danger-muted);
+
+  --a-fg:            var(--a-canvas-text);
+  --a-fg-subtle:     var(--a-canvas-text-subtle);
+  --a-fg-muted:      var(--a-canvas-text-muted);
+  --a-fg-strong:     var(--a-canvas-text-strong);
+  --a-fg-hover:      var(--a-canvas-text-strong);
+  /* ADR-0028: --a-fg-{active,invalid} retired (zero consumers). Use
+     `--a-ui-text-active` / `--a-ui-text-invalid` for form-control state,
+     or define a per-primitive `--<comp>-fg-{active,invalid}` token. */
+  --a-fg-selected:   var(--a-canvas-text-strong);
+  --a-fg-disabled:   var(--a-canvas-text-disabled);
+  --a-fg-inverse:    var(--a-canvas-text-inverse);
+
+  --a-border:          var(--a-canvas-border);
+  --a-border-subtle:   var(--a-canvas-border-subtle);
+  --a-border-strong:   var(--a-canvas-border-strong);
+  --a-border-hover:    var(--a-canvas-border-strong);
+  /* ADR-0028: --a-border-{active,selected,disabled,invalid} retired (zero
+     consumers). Per-primitive `--<comp>-border-{state}` is the override
+     surface; `--a-focus-ring` carries focus-active borders for form
+     controls. */
+
+  /* ══════════════════════════════════════════════════════════════
+     ACCENT — Interactive, links, focus (source for --a-primary-*)
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-accent-strong:   var(--a-accent-50);
+  --a-accent:          var(--a-accent-50);
+  --a-accent-subtle:   var(--a-accent-20);
+  --a-accent-muted:    var(--a-accent-10);
+  --a-accent-hover:    var(--a-accent-40);
+  --a-accent-active:   var(--a-accent-60);
+  --a-accent-selected: var(--a-accent-50);
+
+  /* Link family — derived from accent steps deeper than --a-accent-strong
+     (step-50) so links clear WCAG AA 4.5:1 on canvas-0/1/2 in both
+     schemes. Anchor color in `typography.css` reads --a-link rather
+     than --a-accent-strong; emphasis on hover comes from a tighter
+     chroma + darker step rather than full saturation jump. */
+  /* Polarity matches `--a-accent-N` family wrappers: at fine steps >50,
+     `tint` is the lower-L (deeper) primitive and `shade` is the higher-L
+     primitive — the naming inverts past the convergence point. Light
+     mode wants dark-on-light, so we pick `tint` (deep accent); dark
+     mode wants light-on-dark, so we pick `shade` (lifted accent). */
+  --a-link:         light-dark(var(--a-accent-55-tint), var(--a-accent-55-shade));
+  --a-link-hover:   light-dark(var(--a-accent-70-tint), var(--a-accent-70-shade));
+  --a-link-visited: light-dark(var(--a-accent-65-tint), var(--a-accent-65-shade));
+
+  /* Accent text on accent solid bg — needs light text on dark-ish accent */
+  --a-accent-text-strong:   light-dark(var(--a-accent-05-shade), var(--a-accent-05-tint));
+  --a-accent-text:          light-dark(var(--a-accent-10-shade), var(--a-accent-10-tint));
+  --a-accent-text-subtle:   light-dark(var(--a-accent-30-shade), var(--a-accent-30-tint));
+  --a-accent-text-disabled: light-dark(var(--a-accent-60-shade), var(--a-accent-60-tint));
+
+  --a-accent-border-subtle: var(--a-accent-30);
+  --a-accent-border:        var(--a-accent-45);
+  --a-accent-border-strong: var(--a-accent-60);
+
+  /* L3 — Primary (accent-filled — CTA buttons, checked controls) */
+  --a-primary-bg:           var(--a-accent-strong);
+  --a-primary-bg-hover:     var(--a-accent-hover);
+  --a-primary-bg-active:    var(--a-accent-active);
+
+  --a-primary-fg:           var(--a-accent-05-tint);
+  --a-primary-fg-hover:     var(--a-accent-text-strong);
+
+  --a-primary-border:           var(--a-accent-border);
+  --a-primary-border-hover:     var(--a-accent-border-strong);
+
+  /* Legacy shorthand — keep until all components migrate to --a-primary-* */
+  --a-primary:       var(--a-primary-bg);
+  --a-primary-hover: var(--a-primary-bg-hover);
+
+  /* L3 — Accent surface role matrix (parallel to --a-primary-*, keeps the
+     accent family addressable under its own name for components that want
+     accent-hued surfaces without the "primary action" connotation). */
+  --a-accent-bg:           var(--a-primary-bg);
+  --a-accent-bg-hover:     var(--a-primary-bg-hover);
+  --a-accent-bg-active:    var(--a-primary-bg-active);
+
+  --a-accent-fg:           var(--a-primary-fg);
+  --a-accent-fg-hover:     var(--a-primary-fg-hover);
+
+  /* accent border is already defined at L2 (--a-accent-border*);
+     L3 matches L2 since both resolve to the same scheme-aware value. */
+
+  /* ══════════════════════════════════════════════════════════════
+     BRAND — Non-interactive identity color
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-brand-strong:   var(--a-brand-70);
+  --a-brand:          var(--a-brand-50);
+  --a-brand-subtle:   var(--a-brand-40);
+  --a-brand-muted:    var(--a-brand-30);
+  --a-brand-hover:    var(--a-brand-60);
+  --a-brand-active:   var(--a-brand-60);
+  --a-brand-selected: var(--a-brand-40);
+
+  --a-brand-text-strong:   light-dark(var(--a-brand-05-tint), var(--a-brand-05-tint));
+  --a-brand-text:          light-dark(var(--a-brand-10-tint), var(--a-brand-10-tint));
+  --a-brand-text-subtle:   light-dark(var(--a-brand-30-tint), var(--a-brand-30-tint));
+  --a-brand-text-disabled: light-dark(var(--a-brand-60-shade), var(--a-brand-60-tint));
+
+  --a-brand-border-subtle: var(--a-brand-30);
+  --a-brand-border:        var(--a-brand-45);
+  --a-brand-border-strong: var(--a-brand-60);
+
+  /* L3 — Brand surface role matrix */
+  --a-brand-bg:           var(--a-brand-strong);
+  --a-brand-bg-hover:     var(--a-brand-hover);
+
+  --a-brand-fg:           var(--a-brand-text-strong);
+  --a-brand-fg-hover:     var(--a-brand-text-strong);
+
+  /* L3 border state matrix — rest state is --a-brand-border (L2 above). */
+  --a-brand-border-hover:    var(--a-brand-border-strong);
+
+  /* ══════════════════════════════════════════════════════════════
+     INFO
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-info-strong:   var(--a-info-50);
+  --a-info:          var(--a-info-50);
+  --a-info-subtle:   var(--a-info-20);
+  --a-info-muted:    var(--a-info-10);
+  --a-info-hover:    var(--a-info-40);
+  --a-info-active:   var(--a-info-60);
+  --a-info-selected: var(--a-info-50);
+
+  --a-info-text-strong:   light-dark(var(--a-info-05-tint), var(--a-info-05-tint));
+  --a-info-text:          light-dark(var(--a-info-20-shade), var(--a-info-20-tint));
+  --a-info-text-subtle:   light-dark(var(--a-info-45-shade), var(--a-info-45-tint));
+  --a-info-text-disabled: light-dark(var(--a-info-60-shade), var(--a-info-60-tint));
+
+  --a-info-border-subtle: var(--a-info-30);
+  --a-info-border:        var(--a-info-40);
+  --a-info-border-strong: var(--a-info-60);
+
+  /* L3 — Info surface role matrix */
+  --a-info-bg:           var(--a-info-strong);
+  --a-info-bg-hover:     var(--a-info-hover);
+
+  --a-info-fg:           var(--a-info-text-strong);
+  --a-info-fg-hover:     var(--a-info-text-strong);
+
+  /* L3 border state matrix — rest state is --a-info-border (L2 above). */
+  --a-info-border-hover:    var(--a-info-border-strong);
+
+  /* ══════════════════════════════════════════════════════════════
+     SUCCESS
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-success-strong:   var(--a-success-50);
+  --a-success:          var(--a-success-50);
+  --a-success-subtle:   var(--a-success-20);
+  --a-success-muted:    var(--a-success-10);
+  --a-success-hover:    var(--a-success-40);
+  --a-success-active:   var(--a-success-60);
+  --a-success-selected: var(--a-success-50);
+
+  --a-success-text-strong:   light-dark(var(--a-success-05-tint), var(--a-success-05-tint));
+  --a-success-text:          light-dark(var(--a-success-20-shade), var(--a-success-20-tint));
+  --a-success-text-subtle:   light-dark(var(--a-success-45-shade), var(--a-success-45-tint));
+  --a-success-text-disabled: light-dark(var(--a-success-60-shade), var(--a-success-60-tint));
+
+  --a-success-border-subtle: var(--a-success-30);
+  --a-success-border:        var(--a-success-40);
+  --a-success-border-strong: var(--a-success-60);
+
+  /* L3 — Success surface role matrix */
+  --a-success-bg:           var(--a-success-strong);
+  --a-success-bg-hover:     var(--a-success-hover);
+
+  --a-success-fg:           var(--a-success-text-strong);
+  --a-success-fg-hover:     var(--a-success-text-strong);
+
+  /* L3 border state matrix — rest state is --a-success-border (L2 above). */
+  --a-success-border-hover:    var(--a-success-border-strong);
+
+  /* ══════════════════════════════════════════════════════════════
+     WARNING
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-warning-strong:   var(--a-warning-50);
+  --a-warning:          var(--a-warning-50);
+  --a-warning-subtle:   var(--a-warning-20);
+  --a-warning-muted:    var(--a-warning-10);
+  --a-warning-hover:    var(--a-warning-40);
+  --a-warning-active:   var(--a-warning-60);
+  --a-warning-selected: var(--a-warning-50);
+
+  /* warning is light-colored — text on warning fills should be dark */
+  --a-warning-text-strong:   light-dark(var(--a-warning-10-shade), var(--a-warning-10-shade));
+  --a-warning-text:          light-dark(var(--a-warning-20-shade), var(--a-warning-20-tint));
+  --a-warning-text-subtle:   light-dark(var(--a-warning-45-shade), var(--a-warning-45-tint));
+  --a-warning-text-disabled: light-dark(var(--a-warning-60-shade), var(--a-warning-60-tint));
+
+  --a-warning-border-subtle: var(--a-warning-30);
+  --a-warning-border:        var(--a-warning-40);
+  --a-warning-border-strong: var(--a-warning-60);
+
+  /* L3 — Warning surface role matrix.
+     `--a-warning-bg` deliberately diverges from `--a-warning-strong`
+     (still the L2 saturated mid-tone, used as a fg/icon color by
+     alert / chart / code / empty-state / agent-trace). Surfaces using
+     `-bg` pair it with the dark `--a-warning-fg` (= -text-strong =
+     -10-shade); `-strong` + `-fg` gave muddy brown-on-brown chips
+     (pre-v0.6.36 user report on <tag-ui variant="warning">).
+     `--a-warning-20-tint` is bright in both schemes (lightness math
+     is scheme-independent) so warning surfaces keep the same
+     caution-tape look in light + dark mode. */
+  --a-warning-bg:           var(--a-warning-20-tint);
+  --a-warning-bg-hover:     var(--a-warning-hover);
+
+  --a-warning-fg:           var(--a-warning-text-strong);
+  --a-warning-fg-hover:     var(--a-warning-text-strong);
+
+  /* L3 border state matrix — rest state is --a-warning-border (L2 above). */
+  --a-warning-border-hover:    var(--a-warning-border-strong);
+
+  /* ══════════════════════════════════════════════════════════════
+     DANGER
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens */
+  --a-danger-strong:   var(--a-danger-50);
+  --a-danger:          var(--a-danger-50);
+  --a-danger-subtle:   var(--a-danger-20);
+  --a-danger-muted:    var(--a-danger-10);
+  --a-danger-hover:    var(--a-danger-40);
+  --a-danger-active:   var(--a-danger-60);
+  --a-danger-selected: var(--a-danger-50);
+
+  /* text-strong: light text for use ON danger solid fills (both modes)
+     text-default/subtle: dark text for use on neutral surfaces ABOUT danger */
+  --a-danger-text-strong:   light-dark(var(--a-danger-05-tint), var(--a-danger-05-tint));
+  --a-danger-text:          light-dark(var(--a-danger-20-shade), var(--a-danger-20-tint));
+  --a-danger-text-subtle:   light-dark(var(--a-danger-45-shade), var(--a-danger-45-tint));
+  --a-danger-text-disabled: light-dark(var(--a-danger-60-shade), var(--a-danger-60-tint));
+
+  --a-danger-border-subtle: var(--a-danger-30);
+  --a-danger-border:        var(--a-danger-40);
+  --a-danger-border-strong: var(--a-danger-60);
+
+  /* L3 — Danger surface role matrix */
+  --a-danger-bg:           var(--a-danger-strong);
+  --a-danger-bg-hover:     var(--a-danger-hover);
+
+  --a-danger-fg:           var(--a-danger-text-strong);
+  --a-danger-fg-hover:     var(--a-danger-text-strong);
+
+  /* L3 border state matrix — rest state is --a-danger-border (L2 above). */
+  --a-danger-border-hover:    var(--a-danger-border-strong);
+
+}

package/styles/colors/semantics/data-viz.css

@@ -0,0 +1,129 @@
+/* adia:semantic/color — categorical data-visualization palette.
+   The 10 --a-data-0..9 series colors + their @property tuning knobs.
+   Split out of semantics.css (v0.6.48 reorg, ADR-0035). The @property
+   registrations are global, so relocating them here is cascade-inert. */
+
+/* ─── Data palette parameterization ───
+   All 10 slots live in an analogous arc centered on --a-accent-hue,
+   fanning out in alternating cool/warm pairs with a uniform step
+   (--a-data-delta). Slot 0 is the anchor (accent hue). Slots 1-8 are
+   symmetric pairs at ±1, ±2, ±3, ±4 × delta; slot 9 extends one more
+   step on the warm side (+5 × delta).
+
+   Offsets from --a-accent-hue:
+     0: 0     1: −1Δ   2: +1Δ   3: −2Δ   4: +2Δ
+     5: −3Δ   6: +3Δ   7: −4Δ   8: +4Δ   9: +5Δ
+
+   Two axes of differentiation — hue (via delta) AND lightness (via a
+   3-phase rotation keyed on N mod 3). Under CVD (deuteranopia/protanopia)
+   the red-green axis collapses and same-L neighbors in the green-teal
+   zone would converge; the L rotation rescues them by ensuring any three
+   consecutive slots have three different L values.
+
+   Tuning knobs:
+     --a-data-delta     : hue step between consecutive pairs (default 22)
+     --a-data-l-spread  : ±L offset for phases 1 and 2 (default 0.07)
+     --a-data-l-light   : base L for phase-0 slots in light mode
+     --a-data-l-dark    : base L for phase-0 slots in dark mode
+     --a-data-c         : uniform chroma across all slots
+     --a-data-N-hue     : pin an individual slot's hue absolutely
+
+   At default accent=225, delta=22: slot 7 lands at 137 (8° from success
+   hue 145) and slot 2 at 247 (3° from info hue 250). The L rotation
+   places slot 2 in phase 2 (deeper) and slot 7 in phase 1 (lighter),
+   so neither reads as its respective status token. */
+@property --a-data-l-light  { syntax: "<number>"; inherits: true; initial-value: 0.55; }
+@property --a-data-l-dark   { syntax: "<number>"; inherits: true; initial-value: 0.72; }
+@property --a-data-l-spread { syntax: "<number>"; inherits: true; initial-value: 0.10; }
+@property --a-data-c        { syntax: "<number>"; inherits: true; initial-value: 0.16; }
+@property --a-data-delta    { syntax: "<number>"; inherits: true; initial-value: 22;   }
+@property --a-data-0-hue    { syntax: "<number>"; inherits: true; initial-value: 225; }
+@property --a-data-1-hue    { syntax: "<number>"; inherits: true; initial-value: 203; }
+@property --a-data-2-hue    { syntax: "<number>"; inherits: true; initial-value: 247; }
+@property --a-data-3-hue    { syntax: "<number>"; inherits: true; initial-value: 181; }
+@property --a-data-4-hue    { syntax: "<number>"; inherits: true; initial-value: 269; }
+@property --a-data-5-hue    { syntax: "<number>"; inherits: true; initial-value: 159; }
+@property --a-data-6-hue    { syntax: "<number>"; inherits: true; initial-value: 291; }
+@property --a-data-7-hue    { syntax: "<number>"; inherits: true; initial-value: 137; }
+@property --a-data-8-hue    { syntax: "<number>"; inherits: true; initial-value: 313; }
+@property --a-data-9-hue    { syntax: "<number>"; inherits: true; initial-value: 335; }
+
+:root, theme-ui, [data-theme] {
+  /* ══════════════════════════════════════════════════════════════
+     DATA PALETTE — 10 categorical series colors for charts
+
+     All 10 slots are computed as offsets from --a-accent-hue via a
+     single --a-data-delta step, so retuning accent or delta shifts the
+     whole palette coherently. Slot 0 is the anchor (accent hue); slots
+     1-8 alternate cool/warm at ±1..±4 × delta; slot 9 extends to +5Δ.
+
+     Override --a-data-l-light / --a-data-l-dark / --a-data-c to retune
+     the palette's tone, --a-data-delta to squeeze or spread the arc,
+     or any --a-data-N-hue to pin an individual slot.
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-data-0-hue: var(--a-accent-hue);
+  --a-data-1-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 1);
+  --a-data-2-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 1);
+  --a-data-3-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 2);
+  --a-data-4-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 2);
+  --a-data-5-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 3);
+  --a-data-6-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 3);
+  --a-data-7-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 4);
+  --a-data-8-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 4);
+  --a-data-9-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 5);
+
+  /* Three L phases — each slot's phase is (N mod 3). Two consecutive
+     slots always differ in both hue AND lightness, and any three
+     consecutive slots span all three L values, so no CVD-collapse
+     pocket of same-L slots exists in the green-teal confusion zone. */
+  --_data-l-light-0: var(--a-data-l-light);
+  --_data-l-light-1: calc(var(--a-data-l-light) + var(--a-data-l-spread));
+  --_data-l-light-2: calc(var(--a-data-l-light) - var(--a-data-l-spread));
+  --_data-l-dark-0:  var(--a-data-l-dark);
+  --_data-l-dark-1:  calc(var(--a-data-l-dark) + var(--a-data-l-spread));
+  --_data-l-dark-2:  calc(var(--a-data-l-dark) - var(--a-data-l-spread));
+
+  /* slot N uses L-phase (N mod 3): 0/3/6/9 → phase 0; 1/4/7 → phase 1; 2/5/8 → phase 2 */
+  --a-data-0: light-dark(
+    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-0-hue)),
+    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-0-hue))
+  );
+  --a-data-1: light-dark(
+    oklch(var(--_data-l-light-1) var(--a-data-c) var(--a-data-1-hue)),
+    oklch(var(--_data-l-dark-1)  var(--a-data-c) var(--a-data-1-hue))
+  );
+  --a-data-2: light-dark(
+    oklch(var(--_data-l-light-2) var(--a-data-c) var(--a-data-2-hue)),
+    oklch(var(--_data-l-dark-2)  var(--a-data-c) var(--a-data-2-hue))
+  );
+  --a-data-3: light-dark(
+    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-3-hue)),
+    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-3-hue))
+  );
+  --a-data-4: light-dark(
+    oklch(var(--_data-l-light-1) var(--a-data-c) var(--a-data-4-hue)),
+    oklch(var(--_data-l-dark-1)  var(--a-data-c) var(--a-data-4-hue))
+  );
+  --a-data-5: light-dark(
+    oklch(var(--_data-l-light-2) var(--a-data-c) var(--a-data-5-hue)),
+    oklch(var(--_data-l-dark-2)  var(--a-data-c) var(--a-data-5-hue))
+  );
+  --a-data-6: light-dark(
+    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-6-hue)),
+    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-6-hue))
+  );
+  --a-data-7: light-dark(
+    oklch(var(--_data-l-light-1) var(--a-data-c) var(--a-data-7-hue)),
+    oklch(var(--_data-l-dark-1)  var(--a-data-c) var(--a-data-7-hue))
+  );
+  --a-data-8: light-dark(
+    oklch(var(--_data-l-light-2) var(--a-data-c) var(--a-data-8-hue)),
+    oklch(var(--_data-l-dark-2)  var(--a-data-c) var(--a-data-8-hue))
+  );
+  --a-data-9: light-dark(
+    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-9-hue)),
+    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-9-hue))
+  );
+
+}

package/styles/colors/semantics/features.css

@@ -0,0 +1,114 @@
+/* adia:semantic/color — semantic feature surfaces.
+   FOCUS (canonical ring recipe), UI/FIELD (form input surfaces),
+   HIGHLIGHT & SELECTION, and CHROME (neutral overlays on arbitrary
+   backgrounds). Contiguous in the original source; split out of
+   semantics.css (v0.6.48 reorg, ADR-0035). */
+
+:root, theme-ui, [data-theme] {
+  /* ══════════════════════════════════════════════════════════════
+     FOCUS — canonical ring recipe shared by all form controls
+     ══════════════════════════════════════════════════════════════
+
+     The ring is a dual-layer box-shadow: an inner "gap" the canvas
+     color wide, then an outer ring the accent color wide. Tuning any
+     of the scalar tokens below cascades to every component that
+     consumes `--a-focus-ring`:
+
+       --a-focus-width   — outer ring thickness
+       --a-focus-offset  — inner gap thickness (distance from element
+                           edge to ring)
+       --a-focus-color   — ring color (default: accent-strong)
+       --a-focus-bg      — gap color (default: the surface under the
+                           control; normally matches --a-canvas-0)
+
+     Invalid / error state uses the same geometry but a danger color
+     via `--a-focus-ring-invalid`.
+
+     Components must NOT hardcode 2px / 4px / accent hex in their CSS;
+     consume either `--a-focus-ring` directly or an L3 alias like
+     `--{component}-focus-ring: var(--a-focus-ring)` (the more common
+     pattern — gives per-component override headroom without breaking
+     the canonical default). */
+
+  --a-focus-color:         var(--a-accent-strong);
+  --a-focus-color-invalid: var(--a-danger);
+  --a-focus-width:         2px;
+  --a-focus-offset:        2px;
+  --a-focus-bg:            var(--a-canvas-0);
+
+  --a-focus-ring-shadow: 0 0 0 var(--a-focus-offset) var(--a-focus-bg),
+    0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color);
+  --a-focus-ring-shadow-invalid: 0 0 0 var(--a-focus-offset) var(--a-focus-bg),
+    0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color-invalid);
+
+  /* L3 — what components consume. */
+  --a-ring:              var(--a-focus-color);
+  --a-ring-invalid:      var(--a-focus-color-invalid);
+  --a-focus-ring:        var(--a-focus-ring-shadow);
+  --a-focus-ring-invalid: var(--a-focus-ring-shadow-invalid);
+
+  /* ══════════════════════════════════════════════════════════════
+     UI (FIELD) — Form input surfaces
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-ui-bg:               var(--a-canvas-0-scrim);
+  --a-ui-bg-hover:         var(--a-canvas-0-scrim);
+  --a-ui-bg-active:        var(--a-canvas-0);
+  --a-ui-bg-selected:      var(--a-canvas-0-scrim);
+  --a-ui-bg-disabled:      var(--a-canvas-1);
+  --a-ui-bg-invalid:       var(--a-danger-muted);
+
+  --a-ui-text:             var(--a-fg-strong);
+  --a-ui-text-hover:       var(--a-fg-strong);
+  --a-ui-text-active:      var(--a-fg-strong);
+  --a-ui-text-selected:    var(--a-fg-strong);
+  --a-ui-text-placeholder: var(--a-fg-muted);
+  --a-ui-text-subtle:      var(--a-fg-subtle);
+  --a-ui-text-muted:       var(--a-fg-muted);
+  --a-ui-text-disabled:    var(--a-fg-disabled);
+  --a-ui-text-invalid:     var(--a-danger-text);
+
+  --a-ui-border:           light-dark(var(--a-neutral-85-shade), var(--a-neutral-85-tint));
+  --a-ui-border-hover:     light-dark(var(--a-neutral-75-shade), var(--a-neutral-75-tint));
+  --a-ui-border-active:    var(--a-accent-50);
+  --a-ui-border-selected:  var(--a-accent-50);
+  --a-ui-border-disabled:  var(--a-neutral-30);
+  --a-ui-border-invalid:   var(--a-danger-50);
+
+  --a-ui-caret:            var(--a-accent-50);
+
+  /* ══════════════════════════════════════════════════════════════
+     HIGHLIGHT & SELECTION — Text-level emphasis
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-highlight-strong:  var(--a-warning-30);
+  --a-highlight:         var(--a-warning-20);
+  --a-highlight-subtle:  var(--a-warning-10);
+  --a-highlight-text:    var(--a-fg-strong);
+
+  --a-selection-bg:      var(--a-accent-20);
+  --a-selection-text:    var(--a-fg-strong);
+  --a-selection-radius:  var(--a-space-1);
+
+  /* ══════════════════════════════════════════════════════════════
+     CHROME — Neutral overlays on arbitrary-color surfaces
+     Theme-stable near-opaque white/black for UI chrome drawn on
+     top of unpredictable content (color-picker thumbs, video
+     controls, modal scrims). Do NOT theme-tint — chrome must read
+     equally against red / blue / dark / light underlays.
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-chrome-light:      var(--a-neutral-0-tint);
+  --a-chrome-dark:       var(--a-neutral-0-shade);
+  --a-chrome-border:      var(--a-chrome-light);
+  --a-chrome-ring-subtle: oklch(0 0 0 / 0.3);
+  --a-chrome-shadow-soft: oklch(0 0 0 / 0.2);
+  --a-chrome-backdrop:    oklch(0 0 0 / 0.5);
+  /* §230-bundle (v0.5.9): canonical badge-on-chrome pair — light text +
+     dark semi-transparent surface. Used by primitives that overlay text
+     on unpredictable backgrounds (swatch badges, video controls, color
+     readouts). Must read against red / blue / dark / light underlays. */
+  --a-chrome-fg:         var(--a-chrome-light);
+  --a-chrome-bg:         oklch(0 0 0 / 0.4);
+
+}