@adia-ai/web-components 0.8.45 → 0.8.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/components/card/card.css +12 -23
  3. package/components/card/card.yaml +11 -0
  4. package/components/chart/chart.a2ui.json +16 -1
  5. package/components/chart/chart.class.js +611 -41
  6. package/components/chart/chart.css +174 -0
  7. package/components/chart/chart.d.ts +5 -1
  8. package/components/chart/chart.yaml +45 -1
  9. package/components/field/field.css +24 -2
  10. package/components/index.js +1 -0
  11. package/components/input/input.css +7 -0
  12. package/components/nav/nav.css +7 -3
  13. package/components/nav-group/nav-group.css +38 -41
  14. package/components/nav-item/nav-item.css +11 -5
  15. package/components/preview/preview.class.js +12 -2
  16. package/components/table/table.a2ui.json +19 -4
  17. package/components/table/table.class.js +163 -12
  18. package/components/table/table.d.ts +9 -3
  19. package/components/table/table.yaml +109 -8
  20. package/components/table-footer/table-footer.a2ui.json +150 -0
  21. package/components/table-footer/table-footer.class.js +391 -0
  22. package/components/table-footer/table-footer.css +64 -0
  23. package/components/table-footer/table-footer.d.ts +39 -0
  24. package/components/table-footer/table-footer.examples.md +46 -0
  25. package/components/table-footer/table-footer.js +17 -0
  26. package/components/table-footer/table-footer.yaml +219 -0
  27. package/components/table-toolbar/table-toolbar.a2ui.json +10 -0
  28. package/components/table-toolbar/table-toolbar.class.js +70 -7
  29. package/components/table-toolbar/table-toolbar.css +100 -3
  30. package/components/table-toolbar/table-toolbar.d.ts +2 -0
  31. package/components/table-toolbar/table-toolbar.examples.md +41 -41
  32. package/components/table-toolbar/table-toolbar.yaml +31 -6
  33. package/core/anchor.js +21 -1
  34. package/custom-elements.json +145 -4
  35. package/dist/host.min.css +1 -1
  36. package/dist/host.sheet.js +1 -1
  37. package/dist/theme-provider.min.js +2 -2
  38. package/dist/web-components.min.css +1 -1
  39. package/dist/web-components.min.js +87 -87
  40. package/dist/web-components.sheet.js +1 -1
  41. package/package.json +1 -1
  42. package/patterns/chart-in-card/chart-in-card.examples.html +36 -9
  43. package/patterns/new-enrollments/new-enrollments.examples.html +140 -0
  44. package/patterns/new-enrollments/new-enrollments.html +54 -0
  45. package/patterns/table-in-card/table-in-card.examples.html +168 -0
  46. package/patterns/table-in-card/table-in-card.examples.js +139 -0
  47. package/patterns/table-in-card/table-in-card.html +86 -0
  48. package/styles/colors/material-static.css +276 -234
  49. package/styles/components.css +1 -0
@@ -12,16 +12,34 @@
12
12
  `--a-brand-*` staying computed/AdiaUI-only, contract Gap §2),
13
13
  ~700 static OKLCH literals, `light-dark()` per role.
14
14
 
15
- TRADEOFF, ACCEPTED EXPLICITLY (operator confirmed, 2026-07-14):
16
- AdiaUI's 8-theme live-retheming system (themes.css ocean, forest,
17
- sunset, lavender, rose, slate, midnight) worked by overriding the
18
- `@property` hue/chroma knobs these static values now replace for
19
- the 7 semantic families + neutral. Those theme overrides become
20
- dead code for color (still functional for --a-brand-hue, --a-radius-k,
21
- --a-density, --a-shadow-intensity, which stay parametric — see
22
- parameters.css/primitives-brand.css, untouched). Only `[theme="default"]`'s
23
- color values still apply, and only because they're what this file
24
- already bakes in as the sole palette.
15
+ TRADEOFF AS OF 2026-07-14 (operator confirmed that day) — STALE, SEE
16
+ CORRECTION BELOW (gh#1852): at the time this header was written,
17
+ AdiaUI's then-8-theme live-retheming system (themes.css ocean,
18
+ forest, sunset, lavender, rose, slate, midnight) worked by overriding
19
+ the `@property` hue/chroma knobs these static values replaced, so
20
+ those theme overrides were genuinely dead for color that day.
21
+
22
+ CORRECTION (gh#1852, 2026-08-22): themes.css was rewritten since —
23
+ 12 themes now (atlas/signal/terrarium/ledger/arcade/meridian/solstice/
24
+ glacier/ember/botanica/vector/velour), overriding the raw
25
+ `--md-sys-color-{neutral,primary,secondary,tertiary}-{NN}` ramp stops
26
+ THIS FILE ALSO DECLARES, directly — not the retired `@property` knobs.
27
+ That is NOT dead code: `@layer reset, tokens, ..., context, overrides`
28
+ (host.css) puts `context` (where [theme="x"] rules live) after
29
+ `tokens` (this file's :root block) in the cascade-layer order, and
30
+ layer order always wins over selector specificity — so a themed
31
+ ancestor's raw-stop override wins, and every semantic role above that
32
+ reads `var(--md-sys-color-{family}-NNN)` re-resolves through it at
33
+ each descendant, by ordinary CSS custom-property inheritance (not
34
+ fixed to its :root declaration site). Verified two ways: the cascade
35
+ mechanics above, and empirically (Playwright, file:// harness) —
36
+ `--md-sys-color-primary-600` measured `oklch(0.5493 0.1051 226.08)`
37
+ at :root vs `oklch(0.5493 0.0946 216.96)` under `[theme="atlas"]`,
38
+ the atlas-rotated hue, not the default. info/success/warning/danger
39
+ are correctly left unthemed (deliberate — status meaning stays
40
+ constant across themes, themes.css's own header). Only
41
+ `--a-brand-hue`/`-radius-k`/`-density`/`-shadow-intensity` were ever
42
+ the OTHER stated-live knobs; that part of the original claim stands.
25
43
 
26
44
  NOT touched by this replacement: `--a-brand-*` (no adia.css palette
27
45
  to source from), `--a-link*`/`--a-focus-*`/`--a-data-*` (no direct
@@ -71,41 +89,58 @@
71
89
  --md-sys-color-neutral-500-900: oklch(0.598 0.0316 225.06 / 90%);
72
90
  --md-sys-color-neutral-500-950: oklch(0.598 0.0316 225.06 / 95%);
73
91
  /* Neutral — semantic roles */
74
- --md-sys-color-neutral: light-dark(var(--md-sys-color-neutral-600), var(--md-sys-color-neutral-600));
92
+ /* gh#1852: `neutral`/-hover/-active and the on-neutral* text roles below were
93
+ wrapped in light-dark() with two IDENTICAL legs — a no-op that read as an
94
+ unfinished mode split. Investigated per role, not blanket: this solid tone
95
+ is a fill meant to render the SAME regardless of scheme (a swatch/badge/
96
+ chip identity, unlike -dim/-bright/-low/-high directly below and
97
+ on-neutral-container above, which DO diverge because they sit on the
98
+ mode-adaptive surface). Its paired on-neutral* text roles must then also
99
+ stay flat — the text sits on that same fixed-tone fill either way. Dropped
100
+ the pointless light-dark() wrapper; kept the plain var(). Same rationale
101
+ repeats per palette family below (primary/secondary/tertiary/info/
102
+ success/warning/danger) — not re-derived per family, the fill-identity
103
+ argument is the family-agnostic mechanism. */
104
+ --md-sys-color-neutral: var(--md-sys-color-neutral-600);
75
105
  --md-sys-color-neutral-dim: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-700));
76
106
  --md-sys-color-neutral-bright: light-dark(var(--md-sys-color-neutral-350), var(--md-sys-color-neutral-400));
77
107
  --md-sys-color-neutral-low: light-dark(var(--md-sys-color-neutral-350), var(--md-sys-color-neutral-700));
78
108
  --md-sys-color-neutral-high: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-400));
79
- --md-sys-color-neutral-hover: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-650));
80
- --md-sys-color-neutral-active: light-dark(var(--md-sys-color-neutral-700), var(--md-sys-color-neutral-700));
81
- --md-sys-color-neutral-disabled: light-dark(var(--md-sys-color-neutral-500-600), var(--md-sys-color-neutral-500-600));
82
- --md-sys-color-neutral-on-neutral: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
83
- --md-sys-color-neutral-on-neutral-variant: light-dark(var(--md-sys-color-neutral-200), var(--md-sys-color-neutral-200));
109
+ --md-sys-color-neutral-hover: var(--md-sys-color-neutral-650);
110
+ --md-sys-color-neutral-active: var(--md-sys-color-neutral-700);
111
+ /* gh#1852: -disabled / outline-* / container-* / scrim-* families below (this one and
112
+ every palette's) resolve through the `-500-NNN` ALPHA primitives (same 500
113
+ stop, varying opacity) — alpha composites differently over the light vs.
114
+ dark surface underneath it automatically, so an identical light-dark() leg
115
+ was never doing anything; dropped it in favor of the plain var(). */
116
+ --md-sys-color-neutral-disabled: var(--md-sys-color-neutral-500-600);
117
+ --md-sys-color-neutral-on-neutral: var(--md-sys-color-neutral-050);
118
+ --md-sys-color-neutral-on-neutral-variant: var(--md-sys-color-neutral-200);
84
119
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
85
120
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
86
121
  composited on the page bg); dark leg = the 200 stop, on-neutral-variant's own
87
122
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
88
123
  --md-sys-color-neutral-on-neutral-container: light-dark(var(--md-sys-color-neutral-950), var(--md-sys-color-neutral-200));
89
- --md-sys-color-neutral-on-neutral-hover: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
90
- --md-sys-color-neutral-on-neutral-active: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
91
- --md-sys-color-neutral-on-neutral-disabled: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
124
+ --md-sys-color-neutral-on-neutral-hover: var(--md-sys-color-neutral-050);
125
+ --md-sys-color-neutral-on-neutral-active: var(--md-sys-color-neutral-050);
126
+ --md-sys-color-neutral-on-neutral-disabled: var(--md-sys-color-neutral-500-400);
92
127
  --md-sys-color-neutral-on-surface: light-dark(var(--md-sys-color-neutral-950), var(--md-sys-color-neutral-050));
93
128
  --md-sys-color-neutral-on-surface-variant: light-dark(var(--md-sys-color-neutral-750), var(--md-sys-color-neutral-250));
94
129
  --md-sys-color-neutral-on-surface-hover: light-dark(var(--md-sys-color-neutral-950), var(--md-sys-color-neutral-050));
95
130
  --md-sys-color-neutral-on-surface-active: light-dark(var(--md-sys-color-neutral-950), var(--md-sys-color-neutral-050));
96
- --md-sys-color-neutral-on-surface-disabled: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
131
+ --md-sys-color-neutral-on-surface-disabled: var(--md-sys-color-neutral-500-400);
97
132
  --md-sys-color-neutral-placeholder: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-350));
98
- --md-sys-color-neutral-outline: light-dark(var(--md-sys-color-neutral-500-600), var(--md-sys-color-neutral-500-600));
99
- --md-sys-color-neutral-outline-variant: light-dark(var(--md-sys-color-neutral-500-300), var(--md-sys-color-neutral-500-300));
100
- --md-sys-color-neutral-outline-hover: light-dark(var(--md-sys-color-neutral-500-700), var(--md-sys-color-neutral-500-700));
101
- --md-sys-color-neutral-outline-active: light-dark(var(--md-sys-color-neutral-500-800), var(--md-sys-color-neutral-500-800));
102
- --md-sys-color-neutral-outline-disabled: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
103
- --md-sys-color-neutral-container: light-dark(var(--md-sys-color-neutral-500-200), var(--md-sys-color-neutral-500-200));
104
- --md-sys-color-neutral-container-low: light-dark(var(--md-sys-color-neutral-500-100), var(--md-sys-color-neutral-500-100));
105
- --md-sys-color-neutral-container-high: light-dark(var(--md-sys-color-neutral-500-300), var(--md-sys-color-neutral-500-300));
106
- --md-sys-color-neutral-container-hover: light-dark(var(--md-sys-color-neutral-500-300), var(--md-sys-color-neutral-500-300));
107
- --md-sys-color-neutral-container-active: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
108
- --md-sys-color-neutral-container-disabled: light-dark(var(--md-sys-color-neutral-500-100), var(--md-sys-color-neutral-500-100));
133
+ --md-sys-color-neutral-outline: var(--md-sys-color-neutral-500-600);
134
+ --md-sys-color-neutral-outline-variant: var(--md-sys-color-neutral-500-300);
135
+ --md-sys-color-neutral-outline-hover: var(--md-sys-color-neutral-500-700);
136
+ --md-sys-color-neutral-outline-active: var(--md-sys-color-neutral-500-800);
137
+ --md-sys-color-neutral-outline-disabled: var(--md-sys-color-neutral-500-400);
138
+ --md-sys-color-neutral-container: var(--md-sys-color-neutral-500-200);
139
+ --md-sys-color-neutral-container-low: var(--md-sys-color-neutral-500-100);
140
+ --md-sys-color-neutral-container-high: var(--md-sys-color-neutral-500-300);
141
+ --md-sys-color-neutral-container-hover: var(--md-sys-color-neutral-500-300);
142
+ --md-sys-color-neutral-container-active: var(--md-sys-color-neutral-500-400);
143
+ --md-sys-color-neutral-container-disabled: var(--md-sys-color-neutral-500-100);
109
144
  --md-sys-color-neutral-inverse-surface: light-dark(var(--md-sys-color-neutral-900), var(--md-sys-color-neutral-100));
110
145
  --md-sys-color-neutral-inverse-on-surface: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-950));
111
146
  --md-sys-color-neutral-background: light-dark(var(--md-sys-color-neutral-100), var(--md-sys-color-neutral-900));
@@ -122,13 +157,13 @@
122
157
  --md-sys-color-neutral-surface-high: light-dark(var(--md-sys-color-neutral-150), var(--md-sys-color-neutral-850));
123
158
  --md-sys-color-neutral-surface-higher: light-dark(var(--md-sys-color-neutral-175), var(--md-sys-color-neutral-825));
124
159
  --md-sys-color-neutral-surface-highest: light-dark(var(--md-sys-color-neutral-200), var(--md-sys-color-neutral-800));
125
- --md-sys-color-neutral-scrim-weakest: light-dark(var(--md-sys-color-neutral-500-050), var(--md-sys-color-neutral-500-050));
126
- --md-sys-color-neutral-scrim-weaker: light-dark(var(--md-sys-color-neutral-500-100), var(--md-sys-color-neutral-500-100));
127
- --md-sys-color-neutral-scrim-weak: light-dark(var(--md-sys-color-neutral-500-200), var(--md-sys-color-neutral-500-200));
128
- --md-sys-color-neutral-scrim: light-dark(var(--md-sys-color-neutral-500-300), var(--md-sys-color-neutral-500-300));
129
- --md-sys-color-neutral-scrim-strong: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
130
- --md-sys-color-neutral-scrim-stronger: light-dark(var(--md-sys-color-neutral-500-500), var(--md-sys-color-neutral-500-500));
131
- --md-sys-color-neutral-scrim-strongest: light-dark(var(--md-sys-color-neutral-500-600), var(--md-sys-color-neutral-500-600));
160
+ --md-sys-color-neutral-scrim-weakest: var(--md-sys-color-neutral-500-050);
161
+ --md-sys-color-neutral-scrim-weaker: var(--md-sys-color-neutral-500-100);
162
+ --md-sys-color-neutral-scrim-weak: var(--md-sys-color-neutral-500-200);
163
+ --md-sys-color-neutral-scrim: var(--md-sys-color-neutral-500-300);
164
+ --md-sys-color-neutral-scrim-strong: var(--md-sys-color-neutral-500-400);
165
+ --md-sys-color-neutral-scrim-stronger: var(--md-sys-color-neutral-500-500);
166
+ --md-sys-color-neutral-scrim-strongest: var(--md-sys-color-neutral-500-600);
132
167
 
133
168
  /* Primary — flat mode-independent primitives */
134
169
  --md-sys-color-primary-100: oklch(0.9609 0.006 223.46);
@@ -168,41 +203,42 @@
168
203
  --md-sys-color-primary-500-900: oklch(0.6498 0.1222 224.12 / 90%);
169
204
  --md-sys-color-primary-500-950: oklch(0.6498 0.1222 224.12 / 95%);
170
205
  /* Primary — semantic roles */
171
- --md-sys-color-primary: light-dark(var(--md-sys-color-primary-600), var(--md-sys-color-primary-600));
206
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
207
+ --md-sys-color-primary: var(--md-sys-color-primary-600);
172
208
  --md-sys-color-primary-dim: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-700));
173
209
  --md-sys-color-primary-bright: light-dark(var(--md-sys-color-primary-350), var(--md-sys-color-primary-400));
174
210
  --md-sys-color-primary-low: light-dark(var(--md-sys-color-primary-350), var(--md-sys-color-primary-700));
175
211
  --md-sys-color-primary-high: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-400));
176
- --md-sys-color-primary-hover: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-650));
177
- --md-sys-color-primary-active: light-dark(var(--md-sys-color-primary-700), var(--md-sys-color-primary-700));
178
- --md-sys-color-primary-disabled: light-dark(var(--md-sys-color-primary-500-600), var(--md-sys-color-primary-500-600));
179
- --md-sys-color-primary-on-primary: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
180
- --md-sys-color-primary-on-primary-variant: light-dark(var(--md-sys-color-primary-200), var(--md-sys-color-primary-200));
212
+ --md-sys-color-primary-hover: var(--md-sys-color-primary-650);
213
+ --md-sys-color-primary-active: var(--md-sys-color-primary-700);
214
+ --md-sys-color-primary-disabled: var(--md-sys-color-primary-500-600);
215
+ --md-sys-color-primary-on-primary: var(--md-sys-color-primary-050);
216
+ --md-sys-color-primary-on-primary-variant: var(--md-sys-color-primary-200);
181
217
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
182
218
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
183
219
  composited on the page bg); dark leg = the 200 stop, on-primary-variant's own
184
220
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
185
221
  --md-sys-color-primary-on-primary-container: light-dark(var(--md-sys-color-primary-950), var(--md-sys-color-primary-200));
186
- --md-sys-color-primary-on-primary-hover: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
187
- --md-sys-color-primary-on-primary-active: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
188
- --md-sys-color-primary-on-primary-disabled: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
222
+ --md-sys-color-primary-on-primary-hover: var(--md-sys-color-primary-050);
223
+ --md-sys-color-primary-on-primary-active: var(--md-sys-color-primary-050);
224
+ --md-sys-color-primary-on-primary-disabled: var(--md-sys-color-primary-500-400);
189
225
  --md-sys-color-primary-on-surface: light-dark(var(--md-sys-color-primary-950), var(--md-sys-color-primary-050));
190
226
  --md-sys-color-primary-on-surface-variant: light-dark(var(--md-sys-color-primary-750), var(--md-sys-color-primary-250));
191
227
  --md-sys-color-primary-on-surface-hover: light-dark(var(--md-sys-color-primary-950), var(--md-sys-color-primary-050));
192
228
  --md-sys-color-primary-on-surface-active: light-dark(var(--md-sys-color-primary-950), var(--md-sys-color-primary-050));
193
- --md-sys-color-primary-on-surface-disabled: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
229
+ --md-sys-color-primary-on-surface-disabled: var(--md-sys-color-primary-500-400);
194
230
  --md-sys-color-primary-placeholder: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-350));
195
- --md-sys-color-primary-outline: light-dark(var(--md-sys-color-primary-500-600), var(--md-sys-color-primary-500-600));
196
- --md-sys-color-primary-outline-variant: light-dark(var(--md-sys-color-primary-500-300), var(--md-sys-color-primary-500-300));
197
- --md-sys-color-primary-outline-hover: light-dark(var(--md-sys-color-primary-500-700), var(--md-sys-color-primary-500-700));
198
- --md-sys-color-primary-outline-active: light-dark(var(--md-sys-color-primary-500-800), var(--md-sys-color-primary-500-800));
199
- --md-sys-color-primary-outline-disabled: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
200
- --md-sys-color-primary-container: light-dark(var(--md-sys-color-primary-500-200), var(--md-sys-color-primary-500-200));
201
- --md-sys-color-primary-container-low: light-dark(var(--md-sys-color-primary-500-100), var(--md-sys-color-primary-500-100));
202
- --md-sys-color-primary-container-high: light-dark(var(--md-sys-color-primary-500-300), var(--md-sys-color-primary-500-300));
203
- --md-sys-color-primary-container-hover: light-dark(var(--md-sys-color-primary-500-300), var(--md-sys-color-primary-500-300));
204
- --md-sys-color-primary-container-active: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
205
- --md-sys-color-primary-container-disabled: light-dark(var(--md-sys-color-primary-500-100), var(--md-sys-color-primary-500-100));
231
+ --md-sys-color-primary-outline: var(--md-sys-color-primary-500-600);
232
+ --md-sys-color-primary-outline-variant: var(--md-sys-color-primary-500-300);
233
+ --md-sys-color-primary-outline-hover: var(--md-sys-color-primary-500-700);
234
+ --md-sys-color-primary-outline-active: var(--md-sys-color-primary-500-800);
235
+ --md-sys-color-primary-outline-disabled: var(--md-sys-color-primary-500-400);
236
+ --md-sys-color-primary-container: var(--md-sys-color-primary-500-200);
237
+ --md-sys-color-primary-container-low: var(--md-sys-color-primary-500-100);
238
+ --md-sys-color-primary-container-high: var(--md-sys-color-primary-500-300);
239
+ --md-sys-color-primary-container-hover: var(--md-sys-color-primary-500-300);
240
+ --md-sys-color-primary-container-active: var(--md-sys-color-primary-500-400);
241
+ --md-sys-color-primary-container-disabled: var(--md-sys-color-primary-500-100);
206
242
  --md-sys-color-primary-inverse-surface: light-dark(var(--md-sys-color-primary-900), var(--md-sys-color-primary-100));
207
243
  --md-sys-color-primary-inverse-on-surface: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-950));
208
244
  --md-sys-color-primary-background: light-dark(var(--md-sys-color-primary-100), var(--md-sys-color-primary-900));
@@ -219,13 +255,13 @@
219
255
  --md-sys-color-primary-surface-high: light-dark(var(--md-sys-color-primary-150), var(--md-sys-color-primary-850));
220
256
  --md-sys-color-primary-surface-higher: light-dark(var(--md-sys-color-primary-175), var(--md-sys-color-primary-825));
221
257
  --md-sys-color-primary-surface-highest: light-dark(var(--md-sys-color-primary-200), var(--md-sys-color-primary-800));
222
- --md-sys-color-primary-scrim-weakest: light-dark(var(--md-sys-color-primary-500-050), var(--md-sys-color-primary-500-050));
223
- --md-sys-color-primary-scrim-weaker: light-dark(var(--md-sys-color-primary-500-100), var(--md-sys-color-primary-500-100));
224
- --md-sys-color-primary-scrim-weak: light-dark(var(--md-sys-color-primary-500-200), var(--md-sys-color-primary-500-200));
225
- --md-sys-color-primary-scrim: light-dark(var(--md-sys-color-primary-500-300), var(--md-sys-color-primary-500-300));
226
- --md-sys-color-primary-scrim-strong: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
227
- --md-sys-color-primary-scrim-stronger: light-dark(var(--md-sys-color-primary-500-500), var(--md-sys-color-primary-500-500));
228
- --md-sys-color-primary-scrim-strongest: light-dark(var(--md-sys-color-primary-500-600), var(--md-sys-color-primary-500-600));
258
+ --md-sys-color-primary-scrim-weakest: var(--md-sys-color-primary-500-050);
259
+ --md-sys-color-primary-scrim-weaker: var(--md-sys-color-primary-500-100);
260
+ --md-sys-color-primary-scrim-weak: var(--md-sys-color-primary-500-200);
261
+ --md-sys-color-primary-scrim: var(--md-sys-color-primary-500-300);
262
+ --md-sys-color-primary-scrim-strong: var(--md-sys-color-primary-500-400);
263
+ --md-sys-color-primary-scrim-stronger: var(--md-sys-color-primary-500-500);
264
+ --md-sys-color-primary-scrim-strongest: var(--md-sys-color-primary-500-600);
229
265
 
230
266
  /* Secondary — flat mode-independent primitives */
231
267
  --md-sys-color-secondary-100: oklch(0.9626 0.0021 197.12);
@@ -265,41 +301,42 @@
265
301
  --md-sys-color-secondary-500-900: oklch(0.6683 0.0985 204.61 / 90%);
266
302
  --md-sys-color-secondary-500-950: oklch(0.6683 0.0985 204.61 / 95%);
267
303
  /* Secondary — semantic roles */
268
- --md-sys-color-secondary: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-650));
304
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
305
+ --md-sys-color-secondary: var(--md-sys-color-secondary-650);
269
306
  --md-sys-color-secondary-dim: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-700));
270
307
  --md-sys-color-secondary-bright: light-dark(var(--md-sys-color-secondary-350), var(--md-sys-color-secondary-400));
271
308
  --md-sys-color-secondary-low: light-dark(var(--md-sys-color-secondary-350), var(--md-sys-color-secondary-700));
272
309
  --md-sys-color-secondary-high: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-400));
273
- --md-sys-color-secondary-hover: light-dark(var(--md-sys-color-secondary-700), var(--md-sys-color-secondary-700));
274
- --md-sys-color-secondary-active: light-dark(var(--md-sys-color-secondary-750), var(--md-sys-color-secondary-750));
275
- --md-sys-color-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-600), var(--md-sys-color-secondary-500-600));
276
- --md-sys-color-secondary-on-secondary: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
277
- --md-sys-color-secondary-on-secondary-variant: light-dark(var(--md-sys-color-secondary-200), var(--md-sys-color-secondary-200));
310
+ --md-sys-color-secondary-hover: var(--md-sys-color-secondary-700);
311
+ --md-sys-color-secondary-active: var(--md-sys-color-secondary-750);
312
+ --md-sys-color-secondary-disabled: var(--md-sys-color-secondary-500-600);
313
+ --md-sys-color-secondary-on-secondary: var(--md-sys-color-secondary-050);
314
+ --md-sys-color-secondary-on-secondary-variant: var(--md-sys-color-secondary-200);
278
315
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
279
316
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
280
317
  composited on the page bg); dark leg = the 200 stop, on-secondary-variant's own
281
318
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
282
319
  --md-sys-color-secondary-on-secondary-container: light-dark(var(--md-sys-color-secondary-950), var(--md-sys-color-secondary-200));
283
- --md-sys-color-secondary-on-secondary-hover: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
284
- --md-sys-color-secondary-on-secondary-active: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
285
- --md-sys-color-secondary-on-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
320
+ --md-sys-color-secondary-on-secondary-hover: var(--md-sys-color-secondary-050);
321
+ --md-sys-color-secondary-on-secondary-active: var(--md-sys-color-secondary-050);
322
+ --md-sys-color-secondary-on-secondary-disabled: var(--md-sys-color-secondary-500-400);
286
323
  --md-sys-color-secondary-on-surface: light-dark(var(--md-sys-color-secondary-950), var(--md-sys-color-secondary-050));
287
324
  --md-sys-color-secondary-on-surface-variant: light-dark(var(--md-sys-color-secondary-750), var(--md-sys-color-secondary-250));
288
325
  --md-sys-color-secondary-on-surface-hover: light-dark(var(--md-sys-color-secondary-950), var(--md-sys-color-secondary-050));
289
326
  --md-sys-color-secondary-on-surface-active: light-dark(var(--md-sys-color-secondary-950), var(--md-sys-color-secondary-050));
290
- --md-sys-color-secondary-on-surface-disabled: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
327
+ --md-sys-color-secondary-on-surface-disabled: var(--md-sys-color-secondary-500-400);
291
328
  --md-sys-color-secondary-placeholder: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-350));
292
- --md-sys-color-secondary-outline: light-dark(var(--md-sys-color-secondary-500-600), var(--md-sys-color-secondary-500-600));
293
- --md-sys-color-secondary-outline-variant: light-dark(var(--md-sys-color-secondary-500-300), var(--md-sys-color-secondary-500-300));
294
- --md-sys-color-secondary-outline-hover: light-dark(var(--md-sys-color-secondary-500-700), var(--md-sys-color-secondary-500-700));
295
- --md-sys-color-secondary-outline-active: light-dark(var(--md-sys-color-secondary-500-800), var(--md-sys-color-secondary-500-800));
296
- --md-sys-color-secondary-outline-disabled: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
297
- --md-sys-color-secondary-container: light-dark(var(--md-sys-color-secondary-500-200), var(--md-sys-color-secondary-500-200));
298
- --md-sys-color-secondary-container-low: light-dark(var(--md-sys-color-secondary-500-100), var(--md-sys-color-secondary-500-100));
299
- --md-sys-color-secondary-container-high: light-dark(var(--md-sys-color-secondary-500-300), var(--md-sys-color-secondary-500-300));
300
- --md-sys-color-secondary-container-hover: light-dark(var(--md-sys-color-secondary-500-300), var(--md-sys-color-secondary-500-300));
301
- --md-sys-color-secondary-container-active: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
302
- --md-sys-color-secondary-container-disabled: light-dark(var(--md-sys-color-secondary-500-100), var(--md-sys-color-secondary-500-100));
329
+ --md-sys-color-secondary-outline: var(--md-sys-color-secondary-500-600);
330
+ --md-sys-color-secondary-outline-variant: var(--md-sys-color-secondary-500-300);
331
+ --md-sys-color-secondary-outline-hover: var(--md-sys-color-secondary-500-700);
332
+ --md-sys-color-secondary-outline-active: var(--md-sys-color-secondary-500-800);
333
+ --md-sys-color-secondary-outline-disabled: var(--md-sys-color-secondary-500-400);
334
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-500-200);
335
+ --md-sys-color-secondary-container-low: var(--md-sys-color-secondary-500-100);
336
+ --md-sys-color-secondary-container-high: var(--md-sys-color-secondary-500-300);
337
+ --md-sys-color-secondary-container-hover: var(--md-sys-color-secondary-500-300);
338
+ --md-sys-color-secondary-container-active: var(--md-sys-color-secondary-500-400);
339
+ --md-sys-color-secondary-container-disabled: var(--md-sys-color-secondary-500-100);
303
340
  --md-sys-color-secondary-inverse-surface: light-dark(var(--md-sys-color-secondary-900), var(--md-sys-color-secondary-100));
304
341
  --md-sys-color-secondary-inverse-on-surface: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-950));
305
342
  --md-sys-color-secondary-background: light-dark(var(--md-sys-color-secondary-100), var(--md-sys-color-secondary-900));
@@ -316,13 +353,13 @@
316
353
  --md-sys-color-secondary-surface-high: light-dark(var(--md-sys-color-secondary-150), var(--md-sys-color-secondary-850));
317
354
  --md-sys-color-secondary-surface-higher: light-dark(var(--md-sys-color-secondary-175), var(--md-sys-color-secondary-825));
318
355
  --md-sys-color-secondary-surface-highest: light-dark(var(--md-sys-color-secondary-200), var(--md-sys-color-secondary-800));
319
- --md-sys-color-secondary-scrim-weakest: light-dark(var(--md-sys-color-secondary-500-050), var(--md-sys-color-secondary-500-050));
320
- --md-sys-color-secondary-scrim-weaker: light-dark(var(--md-sys-color-secondary-500-100), var(--md-sys-color-secondary-500-100));
321
- --md-sys-color-secondary-scrim-weak: light-dark(var(--md-sys-color-secondary-500-200), var(--md-sys-color-secondary-500-200));
322
- --md-sys-color-secondary-scrim: light-dark(var(--md-sys-color-secondary-500-300), var(--md-sys-color-secondary-500-300));
323
- --md-sys-color-secondary-scrim-strong: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
324
- --md-sys-color-secondary-scrim-stronger: light-dark(var(--md-sys-color-secondary-500-500), var(--md-sys-color-secondary-500-500));
325
- --md-sys-color-secondary-scrim-strongest: light-dark(var(--md-sys-color-secondary-500-600), var(--md-sys-color-secondary-500-600));
356
+ --md-sys-color-secondary-scrim-weakest: var(--md-sys-color-secondary-500-050);
357
+ --md-sys-color-secondary-scrim-weaker: var(--md-sys-color-secondary-500-100);
358
+ --md-sys-color-secondary-scrim-weak: var(--md-sys-color-secondary-500-200);
359
+ --md-sys-color-secondary-scrim: var(--md-sys-color-secondary-500-300);
360
+ --md-sys-color-secondary-scrim-strong: var(--md-sys-color-secondary-500-400);
361
+ --md-sys-color-secondary-scrim-stronger: var(--md-sys-color-secondary-500-500);
362
+ --md-sys-color-secondary-scrim-strongest: var(--md-sys-color-secondary-500-600);
326
363
 
327
364
  /* Tertiary — flat mode-independent primitives */
328
365
  --md-sys-color-tertiary-100: oklch(0.9549 0.0029 264.54);
@@ -362,41 +399,42 @@
362
399
  --md-sys-color-tertiary-500-900: oklch(0.5993 0.2006 285.17 / 90%);
363
400
  --md-sys-color-tertiary-500-950: oklch(0.5993 0.2006 285.17 / 95%);
364
401
  /* Tertiary — semantic roles */
365
- --md-sys-color-tertiary: light-dark(var(--md-sys-color-tertiary-600), var(--md-sys-color-tertiary-600));
402
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
403
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-600);
366
404
  --md-sys-color-tertiary-dim: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-700));
367
405
  --md-sys-color-tertiary-bright: light-dark(var(--md-sys-color-tertiary-350), var(--md-sys-color-tertiary-400));
368
406
  --md-sys-color-tertiary-low: light-dark(var(--md-sys-color-tertiary-350), var(--md-sys-color-tertiary-700));
369
407
  --md-sys-color-tertiary-high: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-400));
370
- --md-sys-color-tertiary-hover: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-650));
371
- --md-sys-color-tertiary-active: light-dark(var(--md-sys-color-tertiary-700), var(--md-sys-color-tertiary-700));
372
- --md-sys-color-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-600), var(--md-sys-color-tertiary-500-600));
373
- --md-sys-color-tertiary-on-tertiary: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
374
- --md-sys-color-tertiary-on-tertiary-variant: light-dark(var(--md-sys-color-tertiary-200), var(--md-sys-color-tertiary-200));
408
+ --md-sys-color-tertiary-hover: var(--md-sys-color-tertiary-650);
409
+ --md-sys-color-tertiary-active: var(--md-sys-color-tertiary-700);
410
+ --md-sys-color-tertiary-disabled: var(--md-sys-color-tertiary-500-600);
411
+ --md-sys-color-tertiary-on-tertiary: var(--md-sys-color-tertiary-050);
412
+ --md-sys-color-tertiary-on-tertiary-variant: var(--md-sys-color-tertiary-200);
375
413
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
376
414
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
377
415
  composited on the page bg); dark leg = the 200 stop, on-tertiary-variant's own
378
416
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
379
417
  --md-sys-color-tertiary-on-tertiary-container: light-dark(var(--md-sys-color-tertiary-950), var(--md-sys-color-tertiary-200));
380
- --md-sys-color-tertiary-on-tertiary-hover: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
381
- --md-sys-color-tertiary-on-tertiary-active: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
382
- --md-sys-color-tertiary-on-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
418
+ --md-sys-color-tertiary-on-tertiary-hover: var(--md-sys-color-tertiary-050);
419
+ --md-sys-color-tertiary-on-tertiary-active: var(--md-sys-color-tertiary-050);
420
+ --md-sys-color-tertiary-on-tertiary-disabled: var(--md-sys-color-tertiary-500-400);
383
421
  --md-sys-color-tertiary-on-surface: light-dark(var(--md-sys-color-tertiary-950), var(--md-sys-color-tertiary-050));
384
422
  --md-sys-color-tertiary-on-surface-variant: light-dark(var(--md-sys-color-tertiary-750), var(--md-sys-color-tertiary-250));
385
423
  --md-sys-color-tertiary-on-surface-hover: light-dark(var(--md-sys-color-tertiary-950), var(--md-sys-color-tertiary-050));
386
424
  --md-sys-color-tertiary-on-surface-active: light-dark(var(--md-sys-color-tertiary-950), var(--md-sys-color-tertiary-050));
387
- --md-sys-color-tertiary-on-surface-disabled: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
425
+ --md-sys-color-tertiary-on-surface-disabled: var(--md-sys-color-tertiary-500-400);
388
426
  --md-sys-color-tertiary-placeholder: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-350));
389
- --md-sys-color-tertiary-outline: light-dark(var(--md-sys-color-tertiary-500-600), var(--md-sys-color-tertiary-500-600));
390
- --md-sys-color-tertiary-outline-variant: light-dark(var(--md-sys-color-tertiary-500-300), var(--md-sys-color-tertiary-500-300));
391
- --md-sys-color-tertiary-outline-hover: light-dark(var(--md-sys-color-tertiary-500-700), var(--md-sys-color-tertiary-500-700));
392
- --md-sys-color-tertiary-outline-active: light-dark(var(--md-sys-color-tertiary-500-800), var(--md-sys-color-tertiary-500-800));
393
- --md-sys-color-tertiary-outline-disabled: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
394
- --md-sys-color-tertiary-container: light-dark(var(--md-sys-color-tertiary-500-200), var(--md-sys-color-tertiary-500-200));
395
- --md-sys-color-tertiary-container-low: light-dark(var(--md-sys-color-tertiary-500-100), var(--md-sys-color-tertiary-500-100));
396
- --md-sys-color-tertiary-container-high: light-dark(var(--md-sys-color-tertiary-500-300), var(--md-sys-color-tertiary-500-300));
397
- --md-sys-color-tertiary-container-hover: light-dark(var(--md-sys-color-tertiary-500-300), var(--md-sys-color-tertiary-500-300));
398
- --md-sys-color-tertiary-container-active: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
399
- --md-sys-color-tertiary-container-disabled: light-dark(var(--md-sys-color-tertiary-500-100), var(--md-sys-color-tertiary-500-100));
427
+ --md-sys-color-tertiary-outline: var(--md-sys-color-tertiary-500-600);
428
+ --md-sys-color-tertiary-outline-variant: var(--md-sys-color-tertiary-500-300);
429
+ --md-sys-color-tertiary-outline-hover: var(--md-sys-color-tertiary-500-700);
430
+ --md-sys-color-tertiary-outline-active: var(--md-sys-color-tertiary-500-800);
431
+ --md-sys-color-tertiary-outline-disabled: var(--md-sys-color-tertiary-500-400);
432
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-500-200);
433
+ --md-sys-color-tertiary-container-low: var(--md-sys-color-tertiary-500-100);
434
+ --md-sys-color-tertiary-container-high: var(--md-sys-color-tertiary-500-300);
435
+ --md-sys-color-tertiary-container-hover: var(--md-sys-color-tertiary-500-300);
436
+ --md-sys-color-tertiary-container-active: var(--md-sys-color-tertiary-500-400);
437
+ --md-sys-color-tertiary-container-disabled: var(--md-sys-color-tertiary-500-100);
400
438
  --md-sys-color-tertiary-inverse-surface: light-dark(var(--md-sys-color-tertiary-900), var(--md-sys-color-tertiary-100));
401
439
  --md-sys-color-tertiary-inverse-on-surface: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-950));
402
440
  --md-sys-color-tertiary-background: light-dark(var(--md-sys-color-tertiary-100), var(--md-sys-color-tertiary-900));
@@ -413,13 +451,13 @@
413
451
  --md-sys-color-tertiary-surface-high: light-dark(var(--md-sys-color-tertiary-150), var(--md-sys-color-tertiary-850));
414
452
  --md-sys-color-tertiary-surface-higher: light-dark(var(--md-sys-color-tertiary-175), var(--md-sys-color-tertiary-825));
415
453
  --md-sys-color-tertiary-surface-highest: light-dark(var(--md-sys-color-tertiary-200), var(--md-sys-color-tertiary-800));
416
- --md-sys-color-tertiary-scrim-weakest: light-dark(var(--md-sys-color-tertiary-500-050), var(--md-sys-color-tertiary-500-050));
417
- --md-sys-color-tertiary-scrim-weaker: light-dark(var(--md-sys-color-tertiary-500-100), var(--md-sys-color-tertiary-500-100));
418
- --md-sys-color-tertiary-scrim-weak: light-dark(var(--md-sys-color-tertiary-500-200), var(--md-sys-color-tertiary-500-200));
419
- --md-sys-color-tertiary-scrim: light-dark(var(--md-sys-color-tertiary-500-300), var(--md-sys-color-tertiary-500-300));
420
- --md-sys-color-tertiary-scrim-strong: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
421
- --md-sys-color-tertiary-scrim-stronger: light-dark(var(--md-sys-color-tertiary-500-500), var(--md-sys-color-tertiary-500-500));
422
- --md-sys-color-tertiary-scrim-strongest: light-dark(var(--md-sys-color-tertiary-500-600), var(--md-sys-color-tertiary-500-600));
454
+ --md-sys-color-tertiary-scrim-weakest: var(--md-sys-color-tertiary-500-050);
455
+ --md-sys-color-tertiary-scrim-weaker: var(--md-sys-color-tertiary-500-100);
456
+ --md-sys-color-tertiary-scrim-weak: var(--md-sys-color-tertiary-500-200);
457
+ --md-sys-color-tertiary-scrim: var(--md-sys-color-tertiary-500-300);
458
+ --md-sys-color-tertiary-scrim-strong: var(--md-sys-color-tertiary-500-400);
459
+ --md-sys-color-tertiary-scrim-stronger: var(--md-sys-color-tertiary-500-500);
460
+ --md-sys-color-tertiary-scrim-strongest: var(--md-sys-color-tertiary-500-600);
423
461
 
424
462
  /* Info — flat mode-independent primitives */
425
463
  --md-sys-color-info-100: oklch(0.9549 0.0029 264.54);
@@ -459,41 +497,42 @@
459
497
  --md-sys-color-info-500-900: oklch(0.5984 0.1736 265.15 / 90%);
460
498
  --md-sys-color-info-500-950: oklch(0.5984 0.1736 265.15 / 95%);
461
499
  /* Info — semantic roles */
462
- --md-sys-color-info: light-dark(var(--md-sys-color-info-600), var(--md-sys-color-info-600));
500
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
501
+ --md-sys-color-info: var(--md-sys-color-info-600);
463
502
  --md-sys-color-info-dim: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-700));
464
503
  --md-sys-color-info-bright: light-dark(var(--md-sys-color-info-350), var(--md-sys-color-info-400));
465
504
  --md-sys-color-info-low: light-dark(var(--md-sys-color-info-350), var(--md-sys-color-info-700));
466
505
  --md-sys-color-info-high: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-400));
467
- --md-sys-color-info-hover: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-650));
468
- --md-sys-color-info-active: light-dark(var(--md-sys-color-info-700), var(--md-sys-color-info-700));
469
- --md-sys-color-info-disabled: light-dark(var(--md-sys-color-info-500-600), var(--md-sys-color-info-500-600));
470
- --md-sys-color-info-on-info: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
471
- --md-sys-color-info-on-info-variant: light-dark(var(--md-sys-color-info-200), var(--md-sys-color-info-200));
506
+ --md-sys-color-info-hover: var(--md-sys-color-info-650);
507
+ --md-sys-color-info-active: var(--md-sys-color-info-700);
508
+ --md-sys-color-info-disabled: var(--md-sys-color-info-500-600);
509
+ --md-sys-color-info-on-info: var(--md-sys-color-info-050);
510
+ --md-sys-color-info-on-info-variant: var(--md-sys-color-info-200);
472
511
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
473
512
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
474
513
  composited on the page bg); dark leg = the 200 stop, on-info-variant's own
475
514
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
476
515
  --md-sys-color-info-on-info-container: light-dark(var(--md-sys-color-info-950), var(--md-sys-color-info-200));
477
- --md-sys-color-info-on-info-hover: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
478
- --md-sys-color-info-on-info-active: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
479
- --md-sys-color-info-on-info-disabled: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
516
+ --md-sys-color-info-on-info-hover: var(--md-sys-color-info-050);
517
+ --md-sys-color-info-on-info-active: var(--md-sys-color-info-050);
518
+ --md-sys-color-info-on-info-disabled: var(--md-sys-color-info-500-400);
480
519
  --md-sys-color-info-on-surface: light-dark(var(--md-sys-color-info-950), var(--md-sys-color-info-050));
481
520
  --md-sys-color-info-on-surface-variant: light-dark(var(--md-sys-color-info-750), var(--md-sys-color-info-250));
482
521
  --md-sys-color-info-on-surface-hover: light-dark(var(--md-sys-color-info-950), var(--md-sys-color-info-050));
483
522
  --md-sys-color-info-on-surface-active: light-dark(var(--md-sys-color-info-950), var(--md-sys-color-info-050));
484
- --md-sys-color-info-on-surface-disabled: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
523
+ --md-sys-color-info-on-surface-disabled: var(--md-sys-color-info-500-400);
485
524
  --md-sys-color-info-placeholder: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-350));
486
- --md-sys-color-info-outline: light-dark(var(--md-sys-color-info-500-600), var(--md-sys-color-info-500-600));
487
- --md-sys-color-info-outline-variant: light-dark(var(--md-sys-color-info-500-300), var(--md-sys-color-info-500-300));
488
- --md-sys-color-info-outline-hover: light-dark(var(--md-sys-color-info-500-700), var(--md-sys-color-info-500-700));
489
- --md-sys-color-info-outline-active: light-dark(var(--md-sys-color-info-500-800), var(--md-sys-color-info-500-800));
490
- --md-sys-color-info-outline-disabled: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
491
- --md-sys-color-info-container: light-dark(var(--md-sys-color-info-500-200), var(--md-sys-color-info-500-200));
492
- --md-sys-color-info-container-low: light-dark(var(--md-sys-color-info-500-100), var(--md-sys-color-info-500-100));
493
- --md-sys-color-info-container-high: light-dark(var(--md-sys-color-info-500-300), var(--md-sys-color-info-500-300));
494
- --md-sys-color-info-container-hover: light-dark(var(--md-sys-color-info-500-300), var(--md-sys-color-info-500-300));
495
- --md-sys-color-info-container-active: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
496
- --md-sys-color-info-container-disabled: light-dark(var(--md-sys-color-info-500-100), var(--md-sys-color-info-500-100));
525
+ --md-sys-color-info-outline: var(--md-sys-color-info-500-600);
526
+ --md-sys-color-info-outline-variant: var(--md-sys-color-info-500-300);
527
+ --md-sys-color-info-outline-hover: var(--md-sys-color-info-500-700);
528
+ --md-sys-color-info-outline-active: var(--md-sys-color-info-500-800);
529
+ --md-sys-color-info-outline-disabled: var(--md-sys-color-info-500-400);
530
+ --md-sys-color-info-container: var(--md-sys-color-info-500-200);
531
+ --md-sys-color-info-container-low: var(--md-sys-color-info-500-100);
532
+ --md-sys-color-info-container-high: var(--md-sys-color-info-500-300);
533
+ --md-sys-color-info-container-hover: var(--md-sys-color-info-500-300);
534
+ --md-sys-color-info-container-active: var(--md-sys-color-info-500-400);
535
+ --md-sys-color-info-container-disabled: var(--md-sys-color-info-500-100);
497
536
  --md-sys-color-info-inverse-surface: light-dark(var(--md-sys-color-info-900), var(--md-sys-color-info-100));
498
537
  --md-sys-color-info-inverse-on-surface: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-950));
499
538
  --md-sys-color-info-background: light-dark(var(--md-sys-color-info-100), var(--md-sys-color-info-900));
@@ -510,13 +549,13 @@
510
549
  --md-sys-color-info-surface-high: light-dark(var(--md-sys-color-info-150), var(--md-sys-color-info-850));
511
550
  --md-sys-color-info-surface-higher: light-dark(var(--md-sys-color-info-175), var(--md-sys-color-info-825));
512
551
  --md-sys-color-info-surface-highest: light-dark(var(--md-sys-color-info-200), var(--md-sys-color-info-800));
513
- --md-sys-color-info-scrim-weakest: light-dark(var(--md-sys-color-info-500-050), var(--md-sys-color-info-500-050));
514
- --md-sys-color-info-scrim-weaker: light-dark(var(--md-sys-color-info-500-100), var(--md-sys-color-info-500-100));
515
- --md-sys-color-info-scrim-weak: light-dark(var(--md-sys-color-info-500-200), var(--md-sys-color-info-500-200));
516
- --md-sys-color-info-scrim: light-dark(var(--md-sys-color-info-500-300), var(--md-sys-color-info-500-300));
517
- --md-sys-color-info-scrim-strong: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
518
- --md-sys-color-info-scrim-stronger: light-dark(var(--md-sys-color-info-500-500), var(--md-sys-color-info-500-500));
519
- --md-sys-color-info-scrim-strongest: light-dark(var(--md-sys-color-info-500-600), var(--md-sys-color-info-500-600));
552
+ --md-sys-color-info-scrim-weakest: var(--md-sys-color-info-500-050);
553
+ --md-sys-color-info-scrim-weaker: var(--md-sys-color-info-500-100);
554
+ --md-sys-color-info-scrim-weak: var(--md-sys-color-info-500-200);
555
+ --md-sys-color-info-scrim: var(--md-sys-color-info-500-300);
556
+ --md-sys-color-info-scrim-strong: var(--md-sys-color-info-500-400);
557
+ --md-sys-color-info-scrim-stronger: var(--md-sys-color-info-500-500);
558
+ --md-sys-color-info-scrim-strongest: var(--md-sys-color-info-500-600);
520
559
 
521
560
  /* Success — flat mode-independent primitives */
522
561
  --md-sys-color-success-100: oklch(0.9561 0.0034 145.55);
@@ -556,41 +595,42 @@
556
595
  --md-sys-color-success-500-900: oklch(0.5987 0.1161 150.34 / 90%);
557
596
  --md-sys-color-success-500-950: oklch(0.5987 0.1161 150.34 / 95%);
558
597
  /* Success — semantic roles */
559
- --md-sys-color-success: light-dark(var(--md-sys-color-success-600), var(--md-sys-color-success-600));
598
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
599
+ --md-sys-color-success: var(--md-sys-color-success-600);
560
600
  --md-sys-color-success-dim: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-700));
561
601
  --md-sys-color-success-bright: light-dark(var(--md-sys-color-success-350), var(--md-sys-color-success-400));
562
602
  --md-sys-color-success-low: light-dark(var(--md-sys-color-success-350), var(--md-sys-color-success-700));
563
603
  --md-sys-color-success-high: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-400));
564
- --md-sys-color-success-hover: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-650));
565
- --md-sys-color-success-active: light-dark(var(--md-sys-color-success-700), var(--md-sys-color-success-700));
566
- --md-sys-color-success-disabled: light-dark(var(--md-sys-color-success-500-600), var(--md-sys-color-success-500-600));
567
- --md-sys-color-success-on-success: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
568
- --md-sys-color-success-on-success-variant: light-dark(var(--md-sys-color-success-200), var(--md-sys-color-success-200));
604
+ --md-sys-color-success-hover: var(--md-sys-color-success-650);
605
+ --md-sys-color-success-active: var(--md-sys-color-success-700);
606
+ --md-sys-color-success-disabled: var(--md-sys-color-success-500-600);
607
+ --md-sys-color-success-on-success: var(--md-sys-color-success-050);
608
+ --md-sys-color-success-on-success-variant: var(--md-sys-color-success-200);
569
609
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
570
610
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
571
611
  composited on the page bg); dark leg = the 200 stop, on-success-variant's own
572
612
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
573
613
  --md-sys-color-success-on-success-container: light-dark(var(--md-sys-color-success-950), var(--md-sys-color-success-200));
574
- --md-sys-color-success-on-success-hover: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
575
- --md-sys-color-success-on-success-active: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
576
- --md-sys-color-success-on-success-disabled: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
614
+ --md-sys-color-success-on-success-hover: var(--md-sys-color-success-050);
615
+ --md-sys-color-success-on-success-active: var(--md-sys-color-success-050);
616
+ --md-sys-color-success-on-success-disabled: var(--md-sys-color-success-500-400);
577
617
  --md-sys-color-success-on-surface: light-dark(var(--md-sys-color-success-950), var(--md-sys-color-success-050));
578
618
  --md-sys-color-success-on-surface-variant: light-dark(var(--md-sys-color-success-750), var(--md-sys-color-success-250));
579
619
  --md-sys-color-success-on-surface-hover: light-dark(var(--md-sys-color-success-950), var(--md-sys-color-success-050));
580
620
  --md-sys-color-success-on-surface-active: light-dark(var(--md-sys-color-success-950), var(--md-sys-color-success-050));
581
- --md-sys-color-success-on-surface-disabled: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
621
+ --md-sys-color-success-on-surface-disabled: var(--md-sys-color-success-500-400);
582
622
  --md-sys-color-success-placeholder: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-350));
583
- --md-sys-color-success-outline: light-dark(var(--md-sys-color-success-500-600), var(--md-sys-color-success-500-600));
584
- --md-sys-color-success-outline-variant: light-dark(var(--md-sys-color-success-500-300), var(--md-sys-color-success-500-300));
585
- --md-sys-color-success-outline-hover: light-dark(var(--md-sys-color-success-500-700), var(--md-sys-color-success-500-700));
586
- --md-sys-color-success-outline-active: light-dark(var(--md-sys-color-success-500-800), var(--md-sys-color-success-500-800));
587
- --md-sys-color-success-outline-disabled: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
588
- --md-sys-color-success-container: light-dark(var(--md-sys-color-success-500-200), var(--md-sys-color-success-500-200));
589
- --md-sys-color-success-container-low: light-dark(var(--md-sys-color-success-500-100), var(--md-sys-color-success-500-100));
590
- --md-sys-color-success-container-high: light-dark(var(--md-sys-color-success-500-300), var(--md-sys-color-success-500-300));
591
- --md-sys-color-success-container-hover: light-dark(var(--md-sys-color-success-500-300), var(--md-sys-color-success-500-300));
592
- --md-sys-color-success-container-active: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
593
- --md-sys-color-success-container-disabled: light-dark(var(--md-sys-color-success-500-100), var(--md-sys-color-success-500-100));
623
+ --md-sys-color-success-outline: var(--md-sys-color-success-500-600);
624
+ --md-sys-color-success-outline-variant: var(--md-sys-color-success-500-300);
625
+ --md-sys-color-success-outline-hover: var(--md-sys-color-success-500-700);
626
+ --md-sys-color-success-outline-active: var(--md-sys-color-success-500-800);
627
+ --md-sys-color-success-outline-disabled: var(--md-sys-color-success-500-400);
628
+ --md-sys-color-success-container: var(--md-sys-color-success-500-200);
629
+ --md-sys-color-success-container-low: var(--md-sys-color-success-500-100);
630
+ --md-sys-color-success-container-high: var(--md-sys-color-success-500-300);
631
+ --md-sys-color-success-container-hover: var(--md-sys-color-success-500-300);
632
+ --md-sys-color-success-container-active: var(--md-sys-color-success-500-400);
633
+ --md-sys-color-success-container-disabled: var(--md-sys-color-success-500-100);
594
634
  --md-sys-color-success-inverse-surface: light-dark(var(--md-sys-color-success-900), var(--md-sys-color-success-100));
595
635
  --md-sys-color-success-inverse-on-surface: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-950));
596
636
  --md-sys-color-success-background: light-dark(var(--md-sys-color-success-100), var(--md-sys-color-success-900));
@@ -607,13 +647,13 @@
607
647
  --md-sys-color-success-surface-high: light-dark(var(--md-sys-color-success-150), var(--md-sys-color-success-850));
608
648
  --md-sys-color-success-surface-higher: light-dark(var(--md-sys-color-success-175), var(--md-sys-color-success-825));
609
649
  --md-sys-color-success-surface-highest: light-dark(var(--md-sys-color-success-200), var(--md-sys-color-success-800));
610
- --md-sys-color-success-scrim-weakest: light-dark(var(--md-sys-color-success-500-050), var(--md-sys-color-success-500-050));
611
- --md-sys-color-success-scrim-weaker: light-dark(var(--md-sys-color-success-500-100), var(--md-sys-color-success-500-100));
612
- --md-sys-color-success-scrim-weak: light-dark(var(--md-sys-color-success-500-200), var(--md-sys-color-success-500-200));
613
- --md-sys-color-success-scrim: light-dark(var(--md-sys-color-success-500-300), var(--md-sys-color-success-500-300));
614
- --md-sys-color-success-scrim-strong: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
615
- --md-sys-color-success-scrim-stronger: light-dark(var(--md-sys-color-success-500-500), var(--md-sys-color-success-500-500));
616
- --md-sys-color-success-scrim-strongest: light-dark(var(--md-sys-color-success-500-600), var(--md-sys-color-success-500-600));
650
+ --md-sys-color-success-scrim-weakest: var(--md-sys-color-success-500-050);
651
+ --md-sys-color-success-scrim-weaker: var(--md-sys-color-success-500-100);
652
+ --md-sys-color-success-scrim-weak: var(--md-sys-color-success-500-200);
653
+ --md-sys-color-success-scrim: var(--md-sys-color-success-500-300);
654
+ --md-sys-color-success-scrim-strong: var(--md-sys-color-success-500-400);
655
+ --md-sys-color-success-scrim-stronger: var(--md-sys-color-success-500-500);
656
+ --md-sys-color-success-scrim-strongest: var(--md-sys-color-success-500-600);
617
657
 
618
658
  /* Warning — flat mode-independent primitives */
619
659
  --md-sys-color-warning-100: oklch(0.9766 0.0017 67.8);
@@ -653,41 +693,42 @@
653
693
  --md-sys-color-warning-500-900: oklch(0.791 0.1581 75.1 / 90%);
654
694
  --md-sys-color-warning-500-950: oklch(0.791 0.1581 75.1 / 95%);
655
695
  /* Warning — semantic roles */
656
- --md-sys-color-warning: light-dark(var(--md-sys-color-warning-700), var(--md-sys-color-warning-700));
696
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
697
+ --md-sys-color-warning: var(--md-sys-color-warning-700);
657
698
  --md-sys-color-warning-dim: light-dark(var(--md-sys-color-warning-650), var(--md-sys-color-warning-700));
658
699
  --md-sys-color-warning-bright: light-dark(var(--md-sys-color-warning-350), var(--md-sys-color-warning-400));
659
700
  --md-sys-color-warning-low: light-dark(var(--md-sys-color-warning-350), var(--md-sys-color-warning-700));
660
701
  --md-sys-color-warning-high: light-dark(var(--md-sys-color-warning-650), var(--md-sys-color-warning-400));
661
- --md-sys-color-warning-hover: light-dark(var(--md-sys-color-warning-750), var(--md-sys-color-warning-750));
662
- --md-sys-color-warning-active: light-dark(var(--md-sys-color-warning-800), var(--md-sys-color-warning-800));
663
- --md-sys-color-warning-disabled: light-dark(var(--md-sys-color-warning-500-600), var(--md-sys-color-warning-500-600));
664
- --md-sys-color-warning-on-warning: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
665
- --md-sys-color-warning-on-warning-variant: light-dark(var(--md-sys-color-warning-200), var(--md-sys-color-warning-200));
702
+ --md-sys-color-warning-hover: var(--md-sys-color-warning-750);
703
+ --md-sys-color-warning-active: var(--md-sys-color-warning-800);
704
+ --md-sys-color-warning-disabled: var(--md-sys-color-warning-500-600);
705
+ --md-sys-color-warning-on-warning: var(--md-sys-color-warning-050);
706
+ --md-sys-color-warning-on-warning-variant: var(--md-sys-color-warning-200);
666
707
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
667
708
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
668
709
  composited on the page bg); dark leg = the 200 stop, on-warning-variant's own
669
710
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
670
711
  --md-sys-color-warning-on-warning-container: light-dark(var(--md-sys-color-warning-950), var(--md-sys-color-warning-200));
671
- --md-sys-color-warning-on-warning-hover: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
672
- --md-sys-color-warning-on-warning-active: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
673
- --md-sys-color-warning-on-warning-disabled: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
712
+ --md-sys-color-warning-on-warning-hover: var(--md-sys-color-warning-050);
713
+ --md-sys-color-warning-on-warning-active: var(--md-sys-color-warning-050);
714
+ --md-sys-color-warning-on-warning-disabled: var(--md-sys-color-warning-500-400);
674
715
  --md-sys-color-warning-on-surface: light-dark(var(--md-sys-color-warning-950), var(--md-sys-color-warning-050));
675
716
  --md-sys-color-warning-on-surface-variant: light-dark(var(--md-sys-color-warning-750), var(--md-sys-color-warning-250));
676
717
  --md-sys-color-warning-on-surface-hover: light-dark(var(--md-sys-color-warning-950), var(--md-sys-color-warning-050));
677
718
  --md-sys-color-warning-on-surface-active: light-dark(var(--md-sys-color-warning-950), var(--md-sys-color-warning-050));
678
- --md-sys-color-warning-on-surface-disabled: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
719
+ --md-sys-color-warning-on-surface-disabled: var(--md-sys-color-warning-500-400);
679
720
  --md-sys-color-warning-placeholder: light-dark(var(--md-sys-color-warning-650), var(--md-sys-color-warning-350));
680
- --md-sys-color-warning-outline: light-dark(var(--md-sys-color-warning-500-600), var(--md-sys-color-warning-500-600));
681
- --md-sys-color-warning-outline-variant: light-dark(var(--md-sys-color-warning-500-300), var(--md-sys-color-warning-500-300));
682
- --md-sys-color-warning-outline-hover: light-dark(var(--md-sys-color-warning-500-700), var(--md-sys-color-warning-500-700));
683
- --md-sys-color-warning-outline-active: light-dark(var(--md-sys-color-warning-500-800), var(--md-sys-color-warning-500-800));
684
- --md-sys-color-warning-outline-disabled: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
685
- --md-sys-color-warning-container: light-dark(var(--md-sys-color-warning-500-200), var(--md-sys-color-warning-500-200));
686
- --md-sys-color-warning-container-low: light-dark(var(--md-sys-color-warning-500-100), var(--md-sys-color-warning-500-100));
687
- --md-sys-color-warning-container-high: light-dark(var(--md-sys-color-warning-500-300), var(--md-sys-color-warning-500-300));
688
- --md-sys-color-warning-container-hover: light-dark(var(--md-sys-color-warning-500-300), var(--md-sys-color-warning-500-300));
689
- --md-sys-color-warning-container-active: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
690
- --md-sys-color-warning-container-disabled: light-dark(var(--md-sys-color-warning-500-100), var(--md-sys-color-warning-500-100));
721
+ --md-sys-color-warning-outline: var(--md-sys-color-warning-500-600);
722
+ --md-sys-color-warning-outline-variant: var(--md-sys-color-warning-500-300);
723
+ --md-sys-color-warning-outline-hover: var(--md-sys-color-warning-500-700);
724
+ --md-sys-color-warning-outline-active: var(--md-sys-color-warning-500-800);
725
+ --md-sys-color-warning-outline-disabled: var(--md-sys-color-warning-500-400);
726
+ --md-sys-color-warning-container: var(--md-sys-color-warning-500-200);
727
+ --md-sys-color-warning-container-low: var(--md-sys-color-warning-500-100);
728
+ --md-sys-color-warning-container-high: var(--md-sys-color-warning-500-300);
729
+ --md-sys-color-warning-container-hover: var(--md-sys-color-warning-500-300);
730
+ --md-sys-color-warning-container-active: var(--md-sys-color-warning-500-400);
731
+ --md-sys-color-warning-container-disabled: var(--md-sys-color-warning-500-100);
691
732
  --md-sys-color-warning-inverse-surface: light-dark(var(--md-sys-color-warning-900), var(--md-sys-color-warning-100));
692
733
  --md-sys-color-warning-inverse-on-surface: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-950));
693
734
  --md-sys-color-warning-background: light-dark(var(--md-sys-color-warning-100), var(--md-sys-color-warning-900));
@@ -704,13 +745,13 @@
704
745
  --md-sys-color-warning-surface-high: light-dark(var(--md-sys-color-warning-150), var(--md-sys-color-warning-850));
705
746
  --md-sys-color-warning-surface-higher: light-dark(var(--md-sys-color-warning-175), var(--md-sys-color-warning-825));
706
747
  --md-sys-color-warning-surface-highest: light-dark(var(--md-sys-color-warning-200), var(--md-sys-color-warning-800));
707
- --md-sys-color-warning-scrim-weakest: light-dark(var(--md-sys-color-warning-500-050), var(--md-sys-color-warning-500-050));
708
- --md-sys-color-warning-scrim-weaker: light-dark(var(--md-sys-color-warning-500-100), var(--md-sys-color-warning-500-100));
709
- --md-sys-color-warning-scrim-weak: light-dark(var(--md-sys-color-warning-500-200), var(--md-sys-color-warning-500-200));
710
- --md-sys-color-warning-scrim: light-dark(var(--md-sys-color-warning-500-300), var(--md-sys-color-warning-500-300));
711
- --md-sys-color-warning-scrim-strong: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
712
- --md-sys-color-warning-scrim-stronger: light-dark(var(--md-sys-color-warning-500-500), var(--md-sys-color-warning-500-500));
713
- --md-sys-color-warning-scrim-strongest: light-dark(var(--md-sys-color-warning-500-600), var(--md-sys-color-warning-500-600));
748
+ --md-sys-color-warning-scrim-weakest: var(--md-sys-color-warning-500-050);
749
+ --md-sys-color-warning-scrim-weaker: var(--md-sys-color-warning-500-100);
750
+ --md-sys-color-warning-scrim-weak: var(--md-sys-color-warning-500-200);
751
+ --md-sys-color-warning-scrim: var(--md-sys-color-warning-500-300);
752
+ --md-sys-color-warning-scrim-strong: var(--md-sys-color-warning-500-400);
753
+ --md-sys-color-warning-scrim-stronger: var(--md-sys-color-warning-500-500);
754
+ --md-sys-color-warning-scrim-strongest: var(--md-sys-color-warning-500-600);
714
755
 
715
756
  /* Danger — flat mode-independent primitives */
716
757
  --md-sys-color-danger-100: oklch(0.9544 0.0032 17.21);
@@ -750,41 +791,42 @@
750
791
  --md-sys-color-danger-500-900: oklch(0.5992 0.1622 25.47 / 90%);
751
792
  --md-sys-color-danger-500-950: oklch(0.5992 0.1622 25.47 / 95%);
752
793
  /* Danger — semantic roles */
753
- --md-sys-color-danger: light-dark(var(--md-sys-color-danger-600), var(--md-sys-color-danger-600));
794
+ /* gh#1852: identical-leg light-dark() roles below (base/hover/active/on-* solid-fill and their alpha-family -disabled, outline-*, container-*, scrim-* siblings) dropped their pointless wrapper — see neutral's semantic-roles comment above for the per-class rationale (fixed fill-identity vs. alpha auto-compositing). */
795
+ --md-sys-color-danger: var(--md-sys-color-danger-600);
754
796
  --md-sys-color-danger-dim: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-700));
755
797
  --md-sys-color-danger-bright: light-dark(var(--md-sys-color-danger-350), var(--md-sys-color-danger-400));
756
798
  --md-sys-color-danger-low: light-dark(var(--md-sys-color-danger-350), var(--md-sys-color-danger-700));
757
799
  --md-sys-color-danger-high: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-400));
758
- --md-sys-color-danger-hover: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-650));
759
- --md-sys-color-danger-active: light-dark(var(--md-sys-color-danger-700), var(--md-sys-color-danger-700));
760
- --md-sys-color-danger-disabled: light-dark(var(--md-sys-color-danger-500-600), var(--md-sys-color-danger-500-600));
761
- --md-sys-color-danger-on-danger: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
762
- --md-sys-color-danger-on-danger-variant: light-dark(var(--md-sys-color-danger-200), var(--md-sys-color-danger-200));
800
+ --md-sys-color-danger-hover: var(--md-sys-color-danger-650);
801
+ --md-sys-color-danger-active: var(--md-sys-color-danger-700);
802
+ --md-sys-color-danger-disabled: var(--md-sys-color-danger-500-600);
803
+ --md-sys-color-danger-on-danger: var(--md-sys-color-danger-050);
804
+ --md-sys-color-danger-on-danger-variant: var(--md-sys-color-danger-200);
763
805
  /* tonal text (gh#434): dark in-family text on the translucent container fill.
764
806
  light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
765
807
  composited on the page bg); dark leg = the 200 stop, on-danger-variant's own
766
808
  dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
767
809
  --md-sys-color-danger-on-danger-container: light-dark(var(--md-sys-color-danger-950), var(--md-sys-color-danger-200));
768
- --md-sys-color-danger-on-danger-hover: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
769
- --md-sys-color-danger-on-danger-active: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
770
- --md-sys-color-danger-on-danger-disabled: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));
810
+ --md-sys-color-danger-on-danger-hover: var(--md-sys-color-danger-050);
811
+ --md-sys-color-danger-on-danger-active: var(--md-sys-color-danger-050);
812
+ --md-sys-color-danger-on-danger-disabled: var(--md-sys-color-danger-500-400);
771
813
  --md-sys-color-danger-on-surface: light-dark(var(--md-sys-color-danger-950), var(--md-sys-color-danger-050));
772
814
  --md-sys-color-danger-on-surface-variant: light-dark(var(--md-sys-color-danger-750), var(--md-sys-color-danger-250));
773
815
  --md-sys-color-danger-on-surface-hover: light-dark(var(--md-sys-color-danger-950), var(--md-sys-color-danger-050));
774
816
  --md-sys-color-danger-on-surface-active: light-dark(var(--md-sys-color-danger-950), var(--md-sys-color-danger-050));
775
- --md-sys-color-danger-on-surface-disabled: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));
817
+ --md-sys-color-danger-on-surface-disabled: var(--md-sys-color-danger-500-400);
776
818
  --md-sys-color-danger-placeholder: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-350));
777
- --md-sys-color-danger-outline: light-dark(var(--md-sys-color-danger-500-600), var(--md-sys-color-danger-500-600));
778
- --md-sys-color-danger-outline-variant: light-dark(var(--md-sys-color-danger-500-300), var(--md-sys-color-danger-500-300));
779
- --md-sys-color-danger-outline-hover: light-dark(var(--md-sys-color-danger-500-700), var(--md-sys-color-danger-500-700));
780
- --md-sys-color-danger-outline-active: light-dark(var(--md-sys-color-danger-500-800), var(--md-sys-color-danger-500-800));
781
- --md-sys-color-danger-outline-disabled: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));
782
- --md-sys-color-danger-container: light-dark(var(--md-sys-color-danger-500-200), var(--md-sys-color-danger-500-200));
783
- --md-sys-color-danger-container-low: light-dark(var(--md-sys-color-danger-500-100), var(--md-sys-color-danger-500-100));
784
- --md-sys-color-danger-container-high: light-dark(var(--md-sys-color-danger-500-300), var(--md-sys-color-danger-500-300));
785
- --md-sys-color-danger-container-hover: light-dark(var(--md-sys-color-danger-500-300), var(--md-sys-color-danger-500-300));
786
- --md-sys-color-danger-container-active: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));
787
- --md-sys-color-danger-container-disabled: light-dark(var(--md-sys-color-danger-500-100), var(--md-sys-color-danger-500-100));
819
+ --md-sys-color-danger-outline: var(--md-sys-color-danger-500-600);
820
+ --md-sys-color-danger-outline-variant: var(--md-sys-color-danger-500-300);
821
+ --md-sys-color-danger-outline-hover: var(--md-sys-color-danger-500-700);
822
+ --md-sys-color-danger-outline-active: var(--md-sys-color-danger-500-800);
823
+ --md-sys-color-danger-outline-disabled: var(--md-sys-color-danger-500-400);
824
+ --md-sys-color-danger-container: var(--md-sys-color-danger-500-200);
825
+ --md-sys-color-danger-container-low: var(--md-sys-color-danger-500-100);
826
+ --md-sys-color-danger-container-high: var(--md-sys-color-danger-500-300);
827
+ --md-sys-color-danger-container-hover: var(--md-sys-color-danger-500-300);
828
+ --md-sys-color-danger-container-active: var(--md-sys-color-danger-500-400);
829
+ --md-sys-color-danger-container-disabled: var(--md-sys-color-danger-500-100);
788
830
  --md-sys-color-danger-inverse-surface: light-dark(var(--md-sys-color-danger-900), var(--md-sys-color-danger-100));
789
831
  --md-sys-color-danger-inverse-on-surface: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-950));
790
832
  --md-sys-color-danger-background: light-dark(var(--md-sys-color-danger-100), var(--md-sys-color-danger-900));
@@ -801,11 +843,11 @@
801
843
  --md-sys-color-danger-surface-high: light-dark(var(--md-sys-color-danger-150), var(--md-sys-color-danger-850));
802
844
  --md-sys-color-danger-surface-higher: light-dark(var(--md-sys-color-danger-175), var(--md-sys-color-danger-825));
803
845
  --md-sys-color-danger-surface-highest: light-dark(var(--md-sys-color-danger-200), var(--md-sys-color-danger-800));
804
- --md-sys-color-danger-scrim-weakest: light-dark(var(--md-sys-color-danger-500-050), var(--md-sys-color-danger-500-050));
805
- --md-sys-color-danger-scrim-weaker: light-dark(var(--md-sys-color-danger-500-100), var(--md-sys-color-danger-500-100));
806
- --md-sys-color-danger-scrim-weak: light-dark(var(--md-sys-color-danger-500-200), var(--md-sys-color-danger-500-200));
807
- --md-sys-color-danger-scrim: light-dark(var(--md-sys-color-danger-500-300), var(--md-sys-color-danger-500-300));
808
- --md-sys-color-danger-scrim-strong: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));
809
- --md-sys-color-danger-scrim-stronger: light-dark(var(--md-sys-color-danger-500-500), var(--md-sys-color-danger-500-500));
810
- --md-sys-color-danger-scrim-strongest: light-dark(var(--md-sys-color-danger-500-600), var(--md-sys-color-danger-500-600));
846
+ --md-sys-color-danger-scrim-weakest: var(--md-sys-color-danger-500-050);
847
+ --md-sys-color-danger-scrim-weaker: var(--md-sys-color-danger-500-100);
848
+ --md-sys-color-danger-scrim-weak: var(--md-sys-color-danger-500-200);
849
+ --md-sys-color-danger-scrim: var(--md-sys-color-danger-500-300);
850
+ --md-sys-color-danger-scrim-strong: var(--md-sys-color-danger-500-400);
851
+ --md-sys-color-danger-scrim-stronger: var(--md-sys-color-danger-500-500);
852
+ --md-sys-color-danger-scrim-strongest: var(--md-sys-color-danger-500-600);
811
853
  }