@adia-ai/web-components 0.7.27 → 0.8.0

package/styles/colors/semantics/core.css

@@ -1,9 +1,43 @@
 /* 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. */
+
+   INTERNAL as of the Material adoption (2026-07-14,
+   .claude/docs/specs/material-color-bridge-contract.md — "replace the
+   computational layer" phase): these `--a-*` tokens are now a thin
+   ALIAS layer over the static `--md-sys-color-*` export
+   (colors/material-static.css, copied verbatim from the
+   nonoun-color-tokens-adia reference file and loaded earlier in
+   colors/index.css) — not the computed OKLCH engine they used to be.
+   Every family block below (CANVAS + PRIMARY/SECONDARY/TERTIARY/INFO/
+   SUCCESS/WARNING/DANGER) reads `var(--md-sys-color-*)` directly
+   instead of the old `--a-{fam}-{NN}` computed primitives. `--a-*`
+   stays fully functional as a consumption surface — this is
+   "re-source the alias", not "delete the old name". Consume
+   `--md-sys-color-*` directly in new code; every real component/app/
+   site CSS file was already swept onto it
+   (`scripts/refactor/adopt-material-tokens.mjs`). The `--a-accent-*`
+   back-compat block was removed in Phase 5 (2026-07-14) once its own
+   stated removal condition — zero remaining real consumers — was met.
+
+   Accepted tradeoff (operator-confirmed 2026-07-14): the 8-theme
+   live-retheming system in `styles/themes.css` degrades to 1 theme —
+   `--md-sys-color-*`'s values are static OKLCH literals, not
+   calc()-computed from `--a-{family}-hue/-c-min/-c-max`, so a
+   `[theme="ocean"]` override of those parametric knobs no longer
+   reaches anything downstream. Only `--a-brand-*` (no Material
+   equivalent, stays computed) and the non-color theme knobs
+   (`--a-radius-k`, `--a-density`, `--a-shadow-intensity`) still
+   respond to a theme attribute. The raw fine/coarse `--a-{fam}-{NN}`
+   primitive ramps (primitives-*.css) are untouched and still function
+   — only unused by this semantic layer now, kept for the swatch
+   display page (colors.examples.html) and for `--a-brand-*`, which
+   still sources from them.
+
+   Was: "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, [theme], theme-provider {
 
@@ -11,136 +45,152 @@
      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);
+  /* L2 — family tokens (re-sourced from --md-sys-color-neutral-*
+     static export, 2026-07-14 — see file header) */
+  --a-canvas-strong:   var(--md-sys-color-neutral-surface-high);
+  --a-canvas:          var(--md-sys-color-neutral-surface);
+  --a-canvas-subtle:   var(--md-sys-color-neutral-surface-dim);
+  --a-canvas-muted:    var(--md-sys-color-neutral-surface-dimmer);
+  --a-canvas-hover:    var(--md-sys-color-neutral-hover);
+  --a-canvas-active:   var(--md-sys-color-neutral-active);
+  --a-canvas-selected: var(--md-sys-color-neutral-container-active);
+
+  /* Text on neutral surfaces — Material's on-surface family has 3 tiers
+     (on-surface / on-surface-variant / on-surface-disabled), compressing
+     the old 4-step hierarchy (strong/default/subtle/muted/disabled):
+     strong + default both collapse to on-surface; subtle + muted both
+     collapse to on-surface-variant. Visual hierarchy leans more on
+     font-weight + size where the old finer steps used to carry it. */
+  --a-canvas-text-strong:   var(--md-sys-color-neutral-on-surface);
+  --a-canvas-text:          var(--md-sys-color-neutral-on-surface);
+  --a-canvas-text-subtle:   var(--md-sys-color-neutral-on-surface-variant);
+  --a-canvas-text-muted:    var(--md-sys-color-neutral-on-surface-variant);
+  --a-canvas-text-disabled: var(--md-sys-color-neutral-on-surface-disabled);
+  --a-canvas-text-inverse:  var(--md-sys-color-neutral-inverse-on-surface);
+
+  /* Inverse surface — Material ships this role directly now (was a
+     mechanical light-dark() swap of neutral-0 before). */
+  --a-canvas-surface-inverse: var(--md-sys-color-neutral-inverse-surface);
+
+  /* Luminance-direction surfaces (always darken relative to canvas background) */
+  --a-canvas-well:    var(--md-sys-color-neutral-surface-low);   /* sunken panels, code blocks */
+  --a-canvas-inset:   var(--md-sys-color-neutral-background);    /* recessed inputs, wells */
+  --a-canvas-pressed: var(--md-sys-color-neutral-surface-high);  /* pressed/active button states */
+  /* well-strong: for a chip/inline surface that must read as its OWN
+     distinct object (not just a subtly-sunken panel) — e.g. inline code.
+     `-container` is the nearest static role carrying that same "own
+     object" contrast intent. */
+  --a-canvas-well-strong: var(--md-sys-color-neutral-container);
+
+  /* Borders on neutral surfaces */
+  --a-canvas-border-subtle: var(--md-sys-color-neutral-outline-variant);
+  --a-canvas-border:        var(--md-sys-color-neutral-outline);
+  --a-canvas-border-strong: var(--md-sys-color-neutral-outline-active);
 
   /* 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:              var(--md-sys-color-neutral-background);
+  --a-bg-scrim:        var(--md-sys-color-neutral-scrim-weakest);
+  --a-bg-subtle:       var(--md-sys-color-neutral-surface);
+  --a-bg-muted:        var(--md-sys-color-neutral-container);
+  --a-bg-strong:       var(--md-sys-color-neutral-surface-high);
+  --a-bg-hover:        var(--md-sys-color-neutral-hover);
+  --a-bg-active:       var(--md-sys-color-neutral-active);
+  --a-bg-selected:     var(--md-sys-color-neutral-container-active);
+  --a-bg-disabled:     var(--md-sys-color-neutral-container-disabled);
   --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);
+  --a-fg:            var(--md-sys-color-neutral-on-surface);
+  --a-fg-subtle:     var(--md-sys-color-neutral-on-surface-variant);
+  --a-fg-muted:      var(--md-sys-color-neutral-on-surface-variant);
+  --a-fg-strong:     var(--md-sys-color-neutral-on-surface);
+  --a-fg-hover:      var(--md-sys-color-neutral-on-surface-hover);
   /* 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);
+  --a-fg-selected:   var(--md-sys-color-neutral-on-surface-active);
+  --a-fg-disabled:   var(--md-sys-color-neutral-on-surface-disabled);
+  --a-fg-inverse:    var(--md-sys-color-neutral-inverse-on-surface);
+
+  --a-border:          var(--md-sys-color-neutral-outline);
+  --a-border-subtle:   var(--md-sys-color-neutral-outline-variant);
+  --a-border-strong:   var(--md-sys-color-neutral-outline-active);
+  --a-border-hover:    var(--md-sys-color-neutral-outline-hover);
   /* 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-*)
+     PRIMARY — Interactive, links, focus (renamed from `accent`,
+     2026-07-14 — consolidates with the L3 CTA role names below, which
+     already used `primary`, and matches Material's single `primary`
+     family. See .claude/docs/specs/material-color-bridge-contract.md.
+     The `--a-accent-*` back-compat block that used to live further
+     down this file was removed in Phase 5 — see the file header. )
      ══════════════════════════════════════════════════════════════ */
 
-  /* L2 — family tokens */
-  --a-accent-strong:   var(--a-accent-60);
-  --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);
-  --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. */
+  /* L2 — family tokens (re-sourced from --md-sys-color-primary-* static
+     export, 2026-07-14 — see file header) */
+  --a-primary-strong:   var(--md-sys-color-primary-active);
+  --a-primary:          var(--md-sys-color-primary);
+  --a-primary-subtle:   var(--md-sys-color-primary-container-high);
+  --a-primary-muted:    var(--md-sys-color-primary-container);
+  --a-primary-hover:    var(--md-sys-color-primary-hover);
+  --a-primary-active:   var(--md-sys-color-primary-active);
+  --a-primary-selected: var(--md-sys-color-primary);
+
+  /* Link family — Material's static export has no dedicated "link" role,
+     so this reuses the primary interactive triad directly: link = the
+     bare accent, link-hover = its hover state, link-visited = its active
+     state (reads as "already-visited, deeper" without a bespoke ramp). */
+  --a-link:         var(--md-sys-color-primary);
+  --a-link-hover:   var(--md-sys-color-primary-hover);
+  --a-link-visited: var(--md-sys-color-primary-active);
+
+  /* Primary text on primary solid bg — needs light text on dark-ish primary */
+  --a-primary-text-strong:   var(--md-sys-color-primary-on-primary);
+  --a-primary-text:          var(--md-sys-color-primary-on-surface);
+  --a-primary-text-subtle:   var(--md-sys-color-primary-on-surface-variant);
+  --a-primary-text-disabled: var(--md-sys-color-primary-on-surface-disabled);
+
+  --a-primary-border-subtle: var(--md-sys-color-primary-outline-variant);
+  --a-primary-border:        var(--md-sys-color-primary-outline);
+  --a-primary-border-strong: var(--md-sys-color-primary-outline-active);
+
+  /* L3 — CTA role matrix (filled buttons, checked controls). Sources
+     the renamed L2 family directly — no `accent` intermediate. The
+     `--a-accent-bg`/`-fg`/`-border*` L3 aliases that used to sit
+     parallel to this (for "primary-hued but not obviously the CTA")
+     are retired: Material's own role model expresses that need via
+     role choice — `-muted`/`-border` (soft/tinted) vs. this filled
+     `-bg`/`-fg` — not a second family name. */
+  --a-primary-bg:           var(--a-primary);
+  --a-primary-bg-hover:     var(--a-primary-hover);
+  --a-primary-bg-active:    var(--a-primary-active);
+
+  --a-primary-fg:           var(--a-primary-text-strong);
+  --a-primary-fg-hover:     var(--a-primary-text-strong);
+
+  --a-primary-border-hover: var(--a-primary-border-strong);
+  --a-primary-container-disabled: var(--md-sys-color-primary-container-disabled);
+
+  /* `--a-accent-*` back-compat block REMOVED (2026-07-14, Phase 5): its
+     own stated removal condition — `grep -rn '\-\-a-accent-'` (excluding
+     this block) returns zero hits — is now met. The last 2 real
+     consumers (qa/gap-analysis/styles.css, .claude/docs/qa/component-
+     isolation.html — both QA tooling, not product code) were swept to
+     `--a-primary` directly. See
+     .claude/docs/specs/material-color-bridge-contract.md. */
+
+  /* Legacy shorthand `--a-primary`/`--a-primary-hover` ("keep until all
+     components migrate to --a-primary-bg/-hover") is no longer a
+     separate declaration: the renamed L2 family base above (line ~97,
+     100) already IS `--a-primary`/`--a-primary-hover` — both were
+     always value-identical to `--a-primary-bg`/`-bg-hover` (accent-50/
+     accent-40 transitively), so redeclaring them here would be a
+     same-name duplicate, last-wins, pure redundancy. Nothing for any
+     consumer changes: `var(--a-primary)` / `var(--a-primary-hover)`
+     resolve to the exact same value they always did. */
 
   /* ══════════════════════════════════════════════════════════════
      BRAND — Non-interactive identity color
@@ -178,23 +228,24 @@
      INFO
      ══════════════════════════════════════════════════════════════ */
 
-  /* L2 — family tokens */
-  --a-info-strong:   var(--a-info-60);
-  --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);
+  /* L2 — family tokens (re-sourced from --md-sys-color-info-* static
+     export, 2026-07-14 — see file header) */
+  --a-info-strong:   var(--md-sys-color-info-active);
+  --a-info:          var(--md-sys-color-info);
+  --a-info-subtle:   var(--md-sys-color-info-container-high);
+  --a-info-muted:    var(--md-sys-color-info-container);
+  --a-info-hover:    var(--md-sys-color-info-hover);
+  --a-info-active:   var(--md-sys-color-info-active);
+  --a-info-selected: var(--md-sys-color-info);
+
+  --a-info-text-strong:   var(--md-sys-color-info-on-info);
+  --a-info-text:          var(--md-sys-color-info-on-surface);
+  --a-info-text-subtle:   var(--md-sys-color-info-on-surface-variant);
+  --a-info-text-disabled: var(--md-sys-color-info-on-surface-disabled);
+
+  --a-info-border-subtle: var(--md-sys-color-info-outline-variant);
+  --a-info-border:        var(--md-sys-color-info-outline);
+  --a-info-border-strong: var(--md-sys-color-info-outline-active);
 
   /* L3 — Info surface role matrix */
   --a-info-bg:           var(--a-info);
@@ -205,28 +256,30 @@
 
   /* L3 border state matrix — rest state is --a-info-border (L2 above). */
   --a-info-border-hover:    var(--a-info-border-strong);
+  --a-info-container-disabled: var(--md-sys-color-info-container-disabled);
 
   /* ══════════════════════════════════════════════════════════════
      SUCCESS
      ══════════════════════════════════════════════════════════════ */
 
-  /* L2 — family tokens */
-  --a-success-strong:   var(--a-success-60);
-  --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);
+  /* L2 — family tokens (re-sourced from --md-sys-color-success-* static
+     export, 2026-07-14 — see file header) */
+  --a-success-strong:   var(--md-sys-color-success-active);
+  --a-success:          var(--md-sys-color-success);
+  --a-success-subtle:   var(--md-sys-color-success-container-high);
+  --a-success-muted:    var(--md-sys-color-success-container);
+  --a-success-hover:    var(--md-sys-color-success-hover);
+  --a-success-active:   var(--md-sys-color-success-active);
+  --a-success-selected: var(--md-sys-color-success);
+
+  --a-success-text-strong:   var(--md-sys-color-success-on-success);
+  --a-success-text:          var(--md-sys-color-success-on-surface);
+  --a-success-text-subtle:   var(--md-sys-color-success-on-surface-variant);
+  --a-success-text-disabled: var(--md-sys-color-success-on-surface-disabled);
+
+  --a-success-border-subtle: var(--md-sys-color-success-outline-variant);
+  --a-success-border:        var(--md-sys-color-success-outline);
+  --a-success-border-strong: var(--md-sys-color-success-outline-active);
 
   /* L3 — Success surface role matrix */
   --a-success-bg:           var(--a-success);
@@ -237,40 +290,40 @@
 
   /* L3 border state matrix — rest state is --a-success-border (L2 above). */
   --a-success-border-hover:    var(--a-success-border-strong);
+  --a-success-container-disabled: var(--md-sys-color-success-container-disabled);
 
   /* ══════════════════════════════════════════════════════════════
      WARNING
      ══════════════════════════════════════════════════════════════ */
 
-  /* L2 — family tokens */
-  --a-warning-strong:   var(--a-warning-60);
-  --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. */
+  /* L2 — family tokens (re-sourced from --md-sys-color-warning-* static
+     export, 2026-07-14 — see file header) */
+  --a-warning-strong:   var(--md-sys-color-warning-active);
+  --a-warning:          var(--md-sys-color-warning);
+  --a-warning-subtle:   var(--md-sys-color-warning-container-high);
+  --a-warning-muted:    var(--md-sys-color-warning-container);
+  --a-warning-hover:    var(--md-sys-color-warning-hover);
+  --a-warning-active:   var(--md-sys-color-warning-active);
+  --a-warning-selected: var(--md-sys-color-warning);
+
+  /* NOTE (2026-07-14): the old dark-text-on-light-warning override
+     (this file used to force `-text-strong` dark in both schemes,
+     because warning's yellow is light-colored) no longer applies —
+     `--md-sys-color-warning-on-warning` is the static export's own
+     role and, per Material's fixed-light-on-color rule, resolves
+     light in both schemes like every other family's on-color. This is
+     the reference file's own accepted design law, not a bug in this
+     mapping — verify visually if a warning chip reads low-contrast. */
+  --a-warning-text-strong:   var(--md-sys-color-warning-on-warning);
+  --a-warning-text:          var(--md-sys-color-warning-on-surface);
+  --a-warning-text-subtle:   var(--md-sys-color-warning-on-surface-variant);
+  --a-warning-text-disabled: var(--md-sys-color-warning-on-surface-disabled);
+
+  --a-warning-border-subtle: var(--md-sys-color-warning-outline-variant);
+  --a-warning-border:        var(--md-sys-color-warning-outline);
+  --a-warning-border-strong: var(--md-sys-color-warning-outline-active);
+
+  /* L3 — Warning surface role matrix */
   --a-warning-bg:           var(--a-warning);
   --a-warning-bg-hover:     var(--a-warning-hover);
 
@@ -279,30 +332,30 @@
 
   /* L3 border state matrix — rest state is --a-warning-border (L2 above). */
   --a-warning-border-hover:    var(--a-warning-border-strong);
+  --a-warning-container-disabled: var(--md-sys-color-warning-container-disabled);
 
   /* ══════════════════════════════════════════════════════════════
      DANGER
      ══════════════════════════════════════════════════════════════ */
 
-  /* L2 — family tokens */
-  --a-danger-strong:   var(--a-danger-60);
-  --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);
+  /* L2 — family tokens (re-sourced from --md-sys-color-danger-* static
+     export, 2026-07-14 — see file header) */
+  --a-danger-strong:   var(--md-sys-color-danger-active);
+  --a-danger:          var(--md-sys-color-danger);
+  --a-danger-subtle:   var(--md-sys-color-danger-container-high);
+  --a-danger-muted:    var(--md-sys-color-danger-container);
+  --a-danger-hover:    var(--md-sys-color-danger-hover);
+  --a-danger-active:   var(--md-sys-color-danger-active);
+  --a-danger-selected: var(--md-sys-color-danger);
+
+  --a-danger-text-strong:   var(--md-sys-color-danger-on-danger);
+  --a-danger-text:          var(--md-sys-color-danger-on-surface);
+  --a-danger-text-subtle:   var(--md-sys-color-danger-on-surface-variant);
+  --a-danger-text-disabled: var(--md-sys-color-danger-on-surface-disabled);
+
+  --a-danger-border-subtle: var(--md-sys-color-danger-outline-variant);
+  --a-danger-border:        var(--md-sys-color-danger-outline);
+  --a-danger-border-strong: var(--md-sys-color-danger-outline-active);
 
   /* L3 — Danger surface role matrix */
   --a-danger-bg:           var(--a-danger);
@@ -313,5 +366,73 @@
 
   /* L3 border state matrix — rest state is --a-danger-border (L2 above). */
   --a-danger-border-hover:    var(--a-danger-border-strong);
+  --a-danger-container-disabled: var(--md-sys-color-danger-container-disabled);
+
+  /* ══════════════════════════════════════════════════════════════
+     SECONDARY
+     ══════════════════════════════════════════════════════════════ */
+
+  /* L2 — family tokens (re-sourced from --md-sys-color-secondary-* static
+     export, 2026-07-14 — see file header) */
+  --a-secondary-strong:   var(--md-sys-color-secondary-active);
+  --a-secondary:          var(--md-sys-color-secondary);
+  --a-secondary-subtle:   var(--md-sys-color-secondary-container-high);
+  --a-secondary-muted:    var(--md-sys-color-secondary-container);
+  --a-secondary-hover:    var(--md-sys-color-secondary-hover);
+  --a-secondary-active:   var(--md-sys-color-secondary-active);
+  --a-secondary-selected: var(--md-sys-color-secondary);
+
+  --a-secondary-text-strong:   var(--md-sys-color-secondary-on-secondary);
+  --a-secondary-text:          var(--md-sys-color-secondary-on-surface);
+  --a-secondary-text-subtle:   var(--md-sys-color-secondary-on-surface-variant);
+  --a-secondary-text-disabled: var(--md-sys-color-secondary-on-surface-disabled);
+
+  --a-secondary-border-subtle: var(--md-sys-color-secondary-outline-variant);
+  --a-secondary-border:        var(--md-sys-color-secondary-outline);
+  --a-secondary-border-strong: var(--md-sys-color-secondary-outline-active);
+
+  /* L3 — Secondary surface role matrix */
+  --a-secondary-bg:           var(--a-secondary);
+  --a-secondary-bg-hover:     var(--a-secondary-hover);
+
+  --a-secondary-fg:           var(--a-secondary-text-strong);
+  --a-secondary-fg-hover:     var(--a-secondary-text-strong);
+
+  /* L3 border state matrix — rest state is --a-secondary-border (L2 above). */
+  --a-secondary-border-hover:    var(--a-secondary-border-strong);
+  --a-secondary-container-disabled: var(--md-sys-color-secondary-container-disabled);
+
+  /* ══════════════════════════════════════════════════════════════
+     TERTIARY
+     ══════════════════════════════════════════════════════════════ */
 
+  /* L2 — family tokens (re-sourced from --md-sys-color-tertiary-* static
+     export, 2026-07-14 — see file header) */
+  --a-tertiary-strong:   var(--md-sys-color-tertiary-active);
+  --a-tertiary:          var(--md-sys-color-tertiary);
+  --a-tertiary-subtle:   var(--md-sys-color-tertiary-container-high);
+  --a-tertiary-muted:    var(--md-sys-color-tertiary-container);
+  --a-tertiary-hover:    var(--md-sys-color-tertiary-hover);
+  --a-tertiary-active:   var(--md-sys-color-tertiary-active);
+  --a-tertiary-selected: var(--md-sys-color-tertiary);
+
+  --a-tertiary-text-strong:   var(--md-sys-color-tertiary-on-tertiary);
+  --a-tertiary-text:          var(--md-sys-color-tertiary-on-surface);
+  --a-tertiary-text-subtle:   var(--md-sys-color-tertiary-on-surface-variant);
+  --a-tertiary-text-disabled: var(--md-sys-color-tertiary-on-surface-disabled);
+
+  --a-tertiary-border-subtle: var(--md-sys-color-tertiary-outline-variant);
+  --a-tertiary-border:        var(--md-sys-color-tertiary-outline);
+  --a-tertiary-border-strong: var(--md-sys-color-tertiary-outline-active);
+
+  /* L3 — Tertiary surface role matrix */
+  --a-tertiary-bg:           var(--a-tertiary);
+  --a-tertiary-bg-hover:     var(--a-tertiary-hover);
+
+  --a-tertiary-fg:           var(--a-tertiary-text-strong);
+  --a-tertiary-fg-hover:     var(--a-tertiary-text-strong);
+
+  /* L3 border state matrix — rest state is --a-tertiary-border (L2 above). */
+  --a-tertiary-border-hover:    var(--a-tertiary-border-strong);
+  --a-tertiary-container-disabled: var(--md-sys-color-tertiary-container-disabled);
 }