@adia-ai/web-components 0.6.46 → 0.6.48

package/styles/colors/semantics.css

@@ -15,622 +15,13 @@
      border     •    •       •        •          •          •
    ═══════════════════════════════════════════════════════════════ */
 
-/* ─── 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] {
-
-  /* ══════════════════════════════════════════════════════════════
-     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);
-
-  /* ══════════════════════════════════════════════════════════════
-     BUCKETS — sequential 5-step ramp per family for data-vis consumers
-
-     Distinct from `--a-data-0..9` (categorical, distinct hues) — buckets
-     are 5 steps within ONE family, ordered low → high. Used by sequential
-     data-vis surfaces (heatmap-ui, choropleth, treemap intensity).
-
-     Anchor: bucket-2 = `--a-{family}-strong` (semantic step-50). Steps 0
-     and 1 sit lighter (toward muted); steps 3 and 4 sit deeper (toward
-     active). Light/dark scheme polarity is honored via `light-dark()` —
-     in light mode the lighter primitives are step-tints, in dark mode
-     the lighter primitives are step-shades, so "low intensity" reads
-     as low contrast against canvas-0 in either scheme.
-
-     Coordinate with chart palette: `--a-data-N` are categorical (10 hue
-     slots fanning out from accent-hue); buckets stay within one family
-     so a heatmap colored `[color="success"]` doesn't drift through the
-     accent → success → warning hue arc. Five steps were chosen so the
-     ramp fits within WCAG AA against `--a-canvas-0` at the high end and
-     remains visually distinguishable at the low end.
-     ══════════════════════════════════════════════════════════════ */
-
-  /* Accent buckets */
-  --a-accent-bucket-0: light-dark(var(--a-accent-15-tint), var(--a-accent-85-shade));
-  --a-accent-bucket-1: light-dark(var(--a-accent-30-tint), var(--a-accent-70-shade));
-  --a-accent-bucket-2: var(--a-accent-strong);
-  --a-accent-bucket-3: light-dark(var(--a-accent-65-tint), var(--a-accent-35-shade));
-  --a-accent-bucket-4: light-dark(var(--a-accent-80-tint), var(--a-accent-20-shade));
-
-  /* Success buckets */
-  --a-success-bucket-0: light-dark(var(--a-success-15-tint), var(--a-success-85-shade));
-  --a-success-bucket-1: light-dark(var(--a-success-30-tint), var(--a-success-70-shade));
-  --a-success-bucket-2: var(--a-success-strong);
-  --a-success-bucket-3: light-dark(var(--a-success-65-tint), var(--a-success-35-shade));
-  --a-success-bucket-4: light-dark(var(--a-success-80-tint), var(--a-success-20-shade));
-
-  /* Warning buckets */
-  --a-warning-bucket-0: light-dark(var(--a-warning-15-tint), var(--a-warning-85-shade));
-  --a-warning-bucket-1: light-dark(var(--a-warning-30-tint), var(--a-warning-70-shade));
-  --a-warning-bucket-2: var(--a-warning-strong);
-  --a-warning-bucket-3: light-dark(var(--a-warning-65-tint), var(--a-warning-35-shade));
-  --a-warning-bucket-4: light-dark(var(--a-warning-80-tint), var(--a-warning-20-shade));
-
-  /* Danger buckets */
-  --a-danger-bucket-0: light-dark(var(--a-danger-15-tint), var(--a-danger-85-shade));
-  --a-danger-bucket-1: light-dark(var(--a-danger-30-tint), var(--a-danger-70-shade));
-  --a-danger-bucket-2: var(--a-danger-strong);
-  --a-danger-bucket-3: light-dark(var(--a-danger-65-tint), var(--a-danger-35-shade));
-  --a-danger-bucket-4: light-dark(var(--a-danger-80-tint), var(--a-danger-20-shade));
-
-  /* Info buckets */
-  --a-info-bucket-0: light-dark(var(--a-info-15-tint), var(--a-info-85-shade));
-  --a-info-bucket-1: light-dark(var(--a-info-30-tint), var(--a-info-70-shade));
-  --a-info-bucket-2: var(--a-info-strong);
-  --a-info-bucket-3: light-dark(var(--a-info-65-tint), var(--a-info-35-shade));
-  --a-info-bucket-4: light-dark(var(--a-info-80-tint), var(--a-info-20-shade));
-
-  /* ══════════════════════════════════════════════════════════════
-     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);
-
-  /* ══════════════════════════════════════════════════════════════
-     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))
-  );
-
-  /* ══════════════════════════════════════════════════════════════
-     SCRIMS — Role aliases. Map onto the 7-step adaptive scrim-0..6
-     scale in scrims.css. Per-family semantic tiers (weak / default /
-     strong / peak) live in surfaces.css.
-     ══════════════════════════════════════════════════════════════ */
-
-  --a-scrim-weak:    var(--a-neutral-1-shade-scrim);  /* 20% — hover wash */
-  --a-scrim-toast:   var(--a-neutral-2-shade-scrim);  /* 30% — toast veil */
-  --a-scrim-default: var(--a-neutral-3-shade-scrim);  /* 40% — generic overlay */
-  --a-scrim-dialog:  var(--a-neutral-4-shade-scrim);  /* 50% — modal backdrop */
-  --a-scrim-strong:  var(--a-neutral-6-shade-scrim);  /* 70% — heaviest veil */
-
-  /* ══════════════════════════════════════════════════════════════
-     STATUS COMPAT — Legacy status shortcuts used by existing
-     components (button, chart, pipeline-status, timeline). Override
-     the L2 "default" shade to match -strong so the pre-reorg visual
-     behavior is preserved. Components should migrate to the L3
-     matrix (--a-danger-bg, --a-success-fg, etc) over time.
-     ══════════════════════════════════════════════════════════════ */
-
-  --a-danger:     var(--a-danger-strong);
-  --a-danger-fg:  var(--a-danger-text-strong);
-  --a-success:    var(--a-success-strong);
-  --a-success-fg: var(--a-success-text-strong);
-}
+/* adia:barrel/color — split into semantics/ by concern (v0.6.48, ADR-0035).
+   Public path (directly linked + referenced by ADR-0002 / token-contract).
+   Import order reproduces the original source order EXACTLY — aliases.css
+   (status-compat) MUST stay last so its --a-danger/--a-success overrides win. */
+
+@import "./semantics/core.css";
+@import "./semantics/buckets.css";
+@import "./semantics/features.css";
+@import "./semantics/data-viz.css";
+@import "./semantics/aliases.css";

package/styles/components.css

@@ -74,6 +74,7 @@
 @import "../components/qr-code/qr-code.css";
 @import "../components/pagination/pagination.css";
 @import "../components/code/code.css";
+@import "../components/preview/preview.css";
 @import "../components/list/list.css";
 @import "../components/list-window/list-window.css";
 @import "../components/menu/menu.css";