@astryxdesign/theme-neutral 0.7.5-canary.d4f09c2 → 0.7.5-canary.d6004fd

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 (10) hide show
  1. package/dist/neutral.js +18 -119
  2. package/dist/neutralPaletteRefs.generated.d.ts +3 -3
  3. package/dist/neutralTheme.d.ts.map +1 -1
  4. package/dist/source.js +26 -114
  5. package/dist/source.mjs +26 -114
  6. package/dist/theme.css +24 -123
  7. package/package.json +3 -3
  8. package/src/neutralPaletteRefs.generated.ts +4 -4
  9. package/src/neutralTheme.test.ts +129 -95
  10. package/src/neutralTheme.ts +24 -119
package/dist/neutral.js CHANGED
@@ -124,13 +124,24 @@ export const neutralTheme = {
124
124
  "--color-on-success": "light-dark(#ffffff, #111111)",
125
125
  "--color-on-error": "light-dark(#ffffff, #111111)",
126
126
  "--color-on-warning": "#111111",
127
+ "--color-info": "light-dark(#0074e2, #6d9cfe)",
128
+ "--color-info-muted": "light-dark(#b9d7ff, #88bcff3D)",
129
+ "--color-on-info": "light-dark(#ffffff, #111111)",
130
+ "--color-text-info": "light-dark(#0067ce, #a1caff)",
131
+ "--color-text-success": "light-dark(#2f7d33, #90ca90)",
132
+ "--color-text-warning": "light-dark(#836700, #eec448)",
133
+ "--color-text-error": "light-dark(#c0262c, #ffaea7)",
134
+ "--color-on-info-muted": "light-dark(#003978, #a1caff)",
135
+ "--color-on-success-muted": "light-dark(#00490b, #90ca90)",
136
+ "--color-on-warning-muted": "light-dark(#4b3900, #eec448)",
137
+ "--color-on-error-muted": "light-dark(#76000c, #ffaea7)",
127
138
  "--color-icon-accent": "light-dark(#1b1b1b, #f1f1f1)",
128
139
  "--color-icon-primary": "light-dark(#000000, #ffffff)",
129
140
  "--color-icon-secondary": "light-dark(#6a6a6a, #9e9e9e)",
130
141
  "--color-icon-disabled": "light-dark(#919191, #525252)",
131
- "--color-success": "light-dark(#00490b, #a4d6a3)",
132
- "--color-error": "light-dark(#76000c, #ffc4be)",
133
- "--color-warning": "light-dark(#4b3900, #f8d36a)",
142
+ "--color-success": "light-dark(#198100, #64af4c)",
143
+ "--color-warning": "#ffce2f",
144
+ "--color-error": "light-dark(#c9303a, #ff705d)",
134
145
  "--color-success-muted": "light-dark(#bce0bb, #90ca903D)",
135
146
  "--color-error-muted": "light-dark(#ffc4be, #ff98903D)",
136
147
  "--color-warning-muted": "light-dark(#fae19e, #e2b6233D)",
@@ -138,7 +149,7 @@ export const neutralTheme = {
138
149
  "--color-border-emphasized": "light-dark(#d4d4d4, #525252)",
139
150
  "--color-skeleton": "light-dark(#f1f1f1, #525252)",
140
151
  "--color-shadow": "light-dark(#0000001A, #0000004D)",
141
- "--color-tint-hover": "light-dark(black, white)",
152
+ "--color-tint-hover": "light-dark(#000000, #ffffff)",
142
153
  "--color-background-red": "light-dark(#ffc4be, #5b2b28)",
143
154
  "--color-border-red": "light-dark(#ffaea7, #fa6762)",
144
155
  "--color-icon-red": "light-dark(#76000c, #ff9890)",
@@ -195,28 +206,10 @@ export const neutralTheme = {
195
206
  "--shadow-inset-error": "inset 0px 0px 0px 2px #de47454D"
196
207
  },
197
208
  localTokens: {
198
- "--astryx-theme-neutral-color-status-fill-accent": "light-dark(#0074e2, #6d9cfe)",
199
- "--astryx-theme-neutral-color-status-fill-success": "light-dark(#198100, #64af4c)",
200
- "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
201
- "--astryx-theme-neutral-color-status-fill-error": "light-dark(#c9303a, #ff705d)",
202
- "--astryx-theme-neutral-color-status-muted-accent": "light-dark(#b9d7ff, #88bcff3D)",
203
- "--astryx-theme-neutral-color-on-tint-neutral": "light-dark(#fafafa4D, #0a0a0a4D)",
204
- "--astryx-theme-neutral-color-on-tint-overlay-hover": "light-dark(#fafafa1A, #0a0a0a1A)",
205
- "--astryx-theme-neutral-color-on-tint-overlay-pressed": "light-dark(#fafafa33, #0a0a0a33)",
206
- "--astryx-theme-neutral-color-destructive-overlay-hover": "light-dark(#ff7f770D, #ee736c0D)",
207
- "--astryx-theme-neutral-color-destructive-overlay-pressed": "light-dark(#ff7f771A, #ee736c1A)"
209
+ "--astryx-theme-neutral-color-status-fill-accent": "light-dark(#0074e2, #6d9cfe)"
208
210
  },
209
211
  __localTokenOwners: {
210
- "--astryx-theme-neutral-color-status-fill-accent": "neutral",
211
- "--astryx-theme-neutral-color-status-fill-success": "neutral",
212
- "--astryx-theme-neutral-color-status-fill-warning": "neutral",
213
- "--astryx-theme-neutral-color-status-fill-error": "neutral",
214
- "--astryx-theme-neutral-color-status-muted-accent": "neutral",
215
- "--astryx-theme-neutral-color-on-tint-neutral": "neutral",
216
- "--astryx-theme-neutral-color-on-tint-overlay-hover": "neutral",
217
- "--astryx-theme-neutral-color-on-tint-overlay-pressed": "neutral",
218
- "--astryx-theme-neutral-color-destructive-overlay-hover": "neutral",
219
- "--astryx-theme-neutral-color-destructive-overlay-pressed": "neutral"
212
+ "--astryx-theme-neutral-color-status-fill-accent": "neutral"
220
213
  },
221
214
  __localTokenLineage: ["neutral"],
222
215
  components: {
@@ -318,32 +311,14 @@ export const neutralTheme = {
318
311
  "button": {
319
312
  "variant:destructive": {
320
313
  "backgroundColor": "var(--color-error-muted)",
321
- "color": "var(--color-error)",
322
- "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
323
- "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)"
314
+ "color": "var(--color-on-error-muted)"
324
315
  }
325
316
  },
326
317
  "badge": {
327
- "variant:info": {
328
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-accent)",
329
- "color": "var(--color-on-accent)"
330
- },
331
318
  "variant:neutral": {
332
319
  "backgroundColor": "var(--color-background-gray)",
333
320
  "color": "var(--color-text-gray)"
334
321
  },
335
- "variant:success": {
336
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)",
337
- "color": "var(--color-on-success)"
338
- },
339
- "variant:warning": {
340
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-warning)",
341
- "color": "var(--color-on-warning)"
342
- },
343
- "variant:error": {
344
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)",
345
- "color": "var(--color-on-error)"
346
- },
347
322
  "variant:red": {
348
323
  "backgroundColor": "var(--color-background-red)",
349
324
  "color": "var(--color-text-red)"
@@ -385,28 +360,6 @@ export const neutralTheme = {
385
360
  "color": "var(--color-text-gray)"
386
361
  }
387
362
  },
388
- "status-dot": {
389
- "variant:success": {
390
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)"
391
- },
392
- "variant:warning": {
393
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-warning)"
394
- },
395
- "variant:error": {
396
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)"
397
- },
398
- "variant:accent": {
399
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-accent)"
400
- }
401
- },
402
- "avatar-status-dot": {
403
- "variant:success": {
404
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)"
405
- },
406
- "variant:error": {
407
- "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)"
408
- }
409
- },
410
363
  "segmented-control": {
411
364
  "base": {
412
365
  "padding": "var(--spacing-1)"
@@ -426,48 +379,6 @@ export const neutralTheme = {
426
379
  "boxShadow": "none"
427
380
  }
428
381
  },
429
- "banner": {
430
- "base": {
431
- "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
432
- "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
433
- "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)"
434
- },
435
- "status:info": {
436
- "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
437
- "--color-text-primary": "var(--color-text-blue)",
438
- "--color-text-secondary": "var(--color-text-blue)",
439
- "--color-accent": "var(--color-text-blue)"
440
- },
441
- "status:success": {
442
- "--color-text-primary": "var(--color-text-green)",
443
- "--color-text-secondary": "var(--color-text-green)",
444
- "--color-success": "var(--color-text-green)"
445
- },
446
- "status:warning": {
447
- "--color-text-primary": "var(--color-text-yellow)",
448
- "--color-text-secondary": "var(--color-text-yellow)",
449
- "--color-warning": "var(--color-text-yellow)"
450
- },
451
- "status:error": {
452
- "--color-text-primary": "var(--color-text-red)",
453
- "--color-text-secondary": "var(--color-text-red)",
454
- "--color-error": "var(--color-text-red)"
455
- }
456
- },
457
- "step-indicator": {
458
- "status:accent": {
459
- "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)"
460
- },
461
- "status:success": {
462
- "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)"
463
- },
464
- "status:warning": {
465
- "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)"
466
- },
467
- "status:error": {
468
- "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)"
469
- }
470
- },
471
382
  "switch": {
472
383
  "base": {
473
384
  "--color-background-gray": "var(--color-border-emphasized)"
@@ -476,18 +387,6 @@ export const neutralTheme = {
476
387
  "progress-bar": {
477
388
  "base": {
478
389
  "--color-background-muted": "var(--color-border-emphasized)"
479
- },
480
- "variant:accent": {
481
- "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)"
482
- },
483
- "variant:success": {
484
- "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)"
485
- },
486
- "variant:warning": {
487
- "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)"
488
- },
489
- "variant:error": {
490
- "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)"
491
390
  }
492
391
  },
493
392
  "card": {
package/dist/neutralPaletteRefs.generated.d.ts CHANGED
@@ -73,6 +73,7 @@ export declare const neutralPaletteRefs: {
73
73
  readonly light: {
74
74
  readonly 25: "#003978";
75
75
  readonly 30: "#00458c";
76
+ readonly 45: "#0067ce";
76
77
  readonly 50: "#0074e2";
77
78
  readonly 80: "#a1caff";
78
79
  readonly 85: "#b9d7ff";
@@ -88,24 +89,23 @@ export declare const neutralPaletteRefs: {
88
89
  readonly light: {
89
90
  readonly 25: "#76000c";
90
91
  readonly 30: "#8a0011";
92
+ readonly 45: "#c0262c";
91
93
  readonly 55: "#de4745";
92
94
  readonly 65: "#fa6762";
93
- readonly 70: "#ff7f77";
94
95
  readonly 80: "#ffaea7";
95
96
  readonly 85: "#ffc4be";
96
97
  };
97
98
  readonly dark: {
98
99
  readonly 25: "#5b2b28";
99
- readonly 65: "#ee736c";
100
100
  readonly 75: "#ff9890";
101
101
  readonly 80: "#ffaea7";
102
- readonly 85: "#ffc4be";
103
102
  };
104
103
  };
105
104
  readonly yellow: {
106
105
  readonly light: {
107
106
  readonly 25: "#4b3900";
108
107
  readonly 30: "#584400";
108
+ readonly 45: "#836700";
109
109
  readonly 65: "#c29900";
110
110
  readonly 75: "#e2b623";
111
111
  readonly 80: "#eec448";
package/dist/neutralTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAqEA,eAAO,MAAM,YAAY,yDAuZvB,CAAC"}
1
+ {"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,YAAY,yDAoVvB,CAAC"}
package/dist/source.js CHANGED
@@ -87,15 +87,15 @@ var neutralPaletteRefs = {
87
87
  dark: { 25: "#503424", 65: "#df843f", 80: "#ffb37e" }
88
88
  },
89
89
  blue: {
90
- light: { 25: "#003978", 30: "#00458c", 50: "#0074e2", 80: "#a1caff", 85: "#b9d7ff" },
90
+ light: { 25: "#003978", 30: "#00458c", 45: "#0067ce", 50: "#0074e2", 80: "#a1caff", 85: "#b9d7ff" },
91
91
  dark: { 25: "#253c5a", 65: "#5aa0f8", 75: "#88bcff", 80: "#a1caff" }
92
92
  },
93
93
  red: {
94
- light: { 25: "#76000c", 30: "#8a0011", 55: "#de4745", 65: "#fa6762", 70: "#ff7f77", 80: "#ffaea7", 85: "#ffc4be" },
95
- dark: { 25: "#5b2b28", 65: "#ee736c", 75: "#ff9890", 80: "#ffaea7", 85: "#ffc4be" }
94
+ light: { 25: "#76000c", 30: "#8a0011", 45: "#c0262c", 55: "#de4745", 65: "#fa6762", 80: "#ffaea7", 85: "#ffc4be" },
95
+ dark: { 25: "#5b2b28", 75: "#ff9890", 80: "#ffaea7" }
96
96
  },
97
97
  yellow: {
98
- light: { 25: "#4b3900", 30: "#584400", 65: "#c29900", 75: "#e2b623", 80: "#eec448", 85: "#f8d36a" },
98
+ light: { 25: "#4b3900", 30: "#584400", 45: "#836700", 65: "#c29900", 75: "#e2b623", 80: "#eec448", 85: "#f8d36a" },
99
99
  dark: { 25: "#453a1c", 80: "#e3c36c", 90: "#fae19e" }
100
100
  },
101
101
  teal: {
@@ -135,37 +135,10 @@ var neutralSyntax = (0, import_theme.defineSyntaxTheme)({
135
135
  }
136
136
  });
137
137
  var neutralLocalTokens = {
138
- "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"],
139
- "--astryx-theme-neutral-color-status-fill-success": ["#198100", "#64af4c"],
140
- "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
141
- "--astryx-theme-neutral-color-status-fill-error": ["#c9303a", "#ff705d"],
142
- "--astryx-theme-neutral-color-status-muted-accent": [
143
- blue.light[85],
144
- withAlpha(blue.dark[75], "3D")
145
- ],
146
- "--astryx-theme-neutral-color-on-tint-neutral": ["#fafafa4D", "#0a0a0a4D"],
147
- "--astryx-theme-neutral-color-on-tint-overlay-hover": [
148
- "#fafafa1A",
149
- "#0a0a0a1A"
150
- ],
151
- "--astryx-theme-neutral-color-on-tint-overlay-pressed": [
152
- "#fafafa33",
153
- "#0a0a0a33"
154
- ],
155
- "--astryx-theme-neutral-color-destructive-overlay-hover": [
156
- withAlpha(red.light[70], "0D"),
157
- withAlpha(red.dark[65], "0D")
158
- ],
159
- "--astryx-theme-neutral-color-destructive-overlay-pressed": [
160
- withAlpha(red.light[70], "1A"),
161
- withAlpha(red.dark[65], "1A")
162
- ]
163
- };
164
- var statusFill = {
165
- accent: "var(--astryx-theme-neutral-color-status-fill-accent)",
166
- success: "var(--astryx-theme-neutral-color-status-fill-success)",
167
- warning: "var(--astryx-theme-neutral-color-status-fill-warning)",
168
- error: "var(--astryx-theme-neutral-color-status-fill-error)"
138
+ // Deprecated: kept with its released name, meaning, and value for Neutral
139
+ // extensions (theme:neutral DEC-1); Neutral itself paints status through the
140
+ // portable --color-* roles and no longer reads it.
141
+ "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"]
169
142
  };
170
143
  var neutralTheme = (0, import_theme.defineTheme)({
171
144
  name: "neutral",
@@ -242,14 +215,27 @@ var neutralTheme = (0, import_theme.defineTheme)({
242
215
  "--color-on-success": [neutral.light[100], neutral.dark[5]],
243
216
  "--color-on-error": [neutral.light[100], neutral.dark[5]],
244
217
  "--color-on-warning": neutral.light[5],
218
+ "--color-info": ["#0074e2", "#6d9cfe"],
219
+ "--color-info-muted": [blue.light[85], withAlpha(blue.dark[75], "3D")],
220
+ "--color-on-info": [neutral.light[100], neutral.dark[5]],
221
+ "--color-text-info": [blue.light[45], blue.dark[80]],
222
+ "--color-text-success": [green.light[45], green.light[75]],
223
+ "--color-text-warning": [yellow.light[45], yellow.light[80]],
224
+ "--color-text-error": [red.light[45], red.dark[80]],
225
+ "--color-on-info-muted": [blue.light[25], blue.dark[80]],
226
+ "--color-on-success-muted": [green.light[25], green.light[75]],
227
+ "--color-on-warning-muted": [yellow.light[25], yellow.light[80]],
228
+ "--color-on-error-muted": [red.light[25], red.dark[80]],
245
229
  // Icon
246
230
  "--color-icon-accent": [neutral.light[10], neutral.dark[95]],
247
231
  "--color-icon-primary": [neutral.light[0], neutral.dark[100]],
248
232
  "--color-icon-secondary": [neutral.light[45], neutral.dark[65]],
249
233
  "--color-icon-disabled": [neutral.light[60], neutral.dark[35]],
250
- "--color-success": [green.light[25], green.light[80]],
251
- "--color-error": [red.light[25], red.dark[85]],
252
- "--color-warning": [yellow.light[25], yellow.light[85]],
234
+ // Strong status fills (architecture:theme-tokens INV11): Neutral's
235
+ // reviewed status-fill colours, with --color-on-<status> above.
236
+ "--color-success": ["#198100", "#64af4c"],
237
+ "--color-warning": "#ffce2f",
238
+ "--color-error": ["#c9303a", "#ff705d"],
253
239
  "--color-success-muted": [green.dark[85], withAlpha(green.light[75], "3D")],
254
240
  "--color-error-muted": [red.light[85], withAlpha(red.dark[75], "3D")],
255
241
  "--color-warning-muted": [
@@ -267,7 +253,7 @@ var neutralTheme = (0, import_theme.defineTheme)({
267
253
  withAlpha(neutral.light[0], "1A"),
268
254
  withAlpha(neutral.dark[0], "4D")
269
255
  ],
270
- "--color-tint-hover": ["black", "white"],
256
+ "--color-tint-hover": [neutral.light[0], neutral.dark[100]],
271
257
  "--color-background-red": [red.light[85], red.dark[25]],
272
258
  "--color-border-red": [red.light[80], red.light[65]],
273
259
  "--color-icon-red": [red.light[25], red.dark[75]],
@@ -351,32 +337,14 @@ var neutralTheme = (0, import_theme.defineTheme)({
351
337
  button: {
352
338
  "variant:destructive": {
353
339
  backgroundColor: "var(--color-error-muted)",
354
- color: "var(--color-error)",
355
- "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
356
- "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)"
340
+ color: "var(--color-on-error-muted)"
357
341
  }
358
342
  },
359
343
  badge: {
360
- "variant:info": {
361
- backgroundColor: statusFill.accent,
362
- color: "var(--color-on-accent)"
363
- },
364
344
  "variant:neutral": {
365
345
  backgroundColor: "var(--color-background-gray)",
366
346
  color: "var(--color-text-gray)"
367
347
  },
368
- "variant:success": {
369
- backgroundColor: statusFill.success,
370
- color: "var(--color-on-success)"
371
- },
372
- "variant:warning": {
373
- backgroundColor: statusFill.warning,
374
- color: "var(--color-on-warning)"
375
- },
376
- "variant:error": {
377
- backgroundColor: statusFill.error,
378
- color: "var(--color-on-error)"
379
- },
380
348
  "variant:red": {
381
349
  backgroundColor: "var(--color-background-red)",
382
350
  color: "var(--color-text-red)"
@@ -418,16 +386,6 @@ var neutralTheme = (0, import_theme.defineTheme)({
418
386
  color: "var(--color-text-gray)"
419
387
  }
420
388
  },
421
- "status-dot": {
422
- "variant:success": { backgroundColor: statusFill.success },
423
- "variant:warning": { backgroundColor: statusFill.warning },
424
- "variant:error": { backgroundColor: statusFill.error },
425
- "variant:accent": { backgroundColor: statusFill.accent }
426
- },
427
- "avatar-status-dot": {
428
- "variant:success": { backgroundColor: statusFill.success },
429
- "variant:error": { backgroundColor: statusFill.error }
430
- },
431
389
  // Give the Neutral segmented control a roomier inset without changing its
432
390
  // outside height. The selected item stays flat against the tinted track.
433
391
  "segmented-control": {
@@ -449,40 +407,6 @@ var neutralTheme = (0, import_theme.defineTheme)({
449
407
  boxShadow: "none"
450
408
  }
451
409
  },
452
- banner: {
453
- base: {
454
- "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
455
- "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
456
- "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)"
457
- },
458
- "status:info": {
459
- "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
460
- "--color-text-primary": "var(--color-text-blue)",
461
- "--color-text-secondary": "var(--color-text-blue)",
462
- "--color-accent": "var(--color-text-blue)"
463
- },
464
- "status:success": {
465
- "--color-text-primary": "var(--color-text-green)",
466
- "--color-text-secondary": "var(--color-text-green)",
467
- "--color-success": "var(--color-text-green)"
468
- },
469
- "status:warning": {
470
- "--color-text-primary": "var(--color-text-yellow)",
471
- "--color-text-secondary": "var(--color-text-yellow)",
472
- "--color-warning": "var(--color-text-yellow)"
473
- },
474
- "status:error": {
475
- "--color-text-primary": "var(--color-text-red)",
476
- "--color-text-secondary": "var(--color-text-red)",
477
- "--color-error": "var(--color-text-red)"
478
- }
479
- },
480
- "step-indicator": {
481
- "status:accent": { "--color-accent": statusFill.accent },
482
- "status:success": { "--color-success": statusFill.success },
483
- "status:warning": { "--color-warning": statusFill.warning },
484
- "status:error": { "--color-error": statusFill.error }
485
- },
486
410
  switch: {
487
411
  base: {
488
412
  "--color-background-gray": "var(--color-border-emphasized)"
@@ -491,18 +415,6 @@ var neutralTheme = (0, import_theme.defineTheme)({
491
415
  "progress-bar": {
492
416
  base: {
493
417
  "--color-background-muted": "var(--color-border-emphasized)"
494
- },
495
- "variant:accent": {
496
- "--color-accent": statusFill.accent
497
- },
498
- "variant:success": {
499
- "--color-success": statusFill.success
500
- },
501
- "variant:warning": {
502
- "--color-warning": statusFill.warning
503
- },
504
- "variant:error": {
505
- "--color-error": statusFill.error
506
418
  }
507
419
  },
508
420
  card: {
package/dist/source.mjs CHANGED
@@ -92,15 +92,15 @@ var neutralPaletteRefs = {
92
92
  dark: { 25: "#503424", 65: "#df843f", 80: "#ffb37e" }
93
93
  },
94
94
  blue: {
95
- light: { 25: "#003978", 30: "#00458c", 50: "#0074e2", 80: "#a1caff", 85: "#b9d7ff" },
95
+ light: { 25: "#003978", 30: "#00458c", 45: "#0067ce", 50: "#0074e2", 80: "#a1caff", 85: "#b9d7ff" },
96
96
  dark: { 25: "#253c5a", 65: "#5aa0f8", 75: "#88bcff", 80: "#a1caff" }
97
97
  },
98
98
  red: {
99
- light: { 25: "#76000c", 30: "#8a0011", 55: "#de4745", 65: "#fa6762", 70: "#ff7f77", 80: "#ffaea7", 85: "#ffc4be" },
100
- dark: { 25: "#5b2b28", 65: "#ee736c", 75: "#ff9890", 80: "#ffaea7", 85: "#ffc4be" }
99
+ light: { 25: "#76000c", 30: "#8a0011", 45: "#c0262c", 55: "#de4745", 65: "#fa6762", 80: "#ffaea7", 85: "#ffc4be" },
100
+ dark: { 25: "#5b2b28", 75: "#ff9890", 80: "#ffaea7" }
101
101
  },
102
102
  yellow: {
103
- light: { 25: "#4b3900", 30: "#584400", 65: "#c29900", 75: "#e2b623", 80: "#eec448", 85: "#f8d36a" },
103
+ light: { 25: "#4b3900", 30: "#584400", 45: "#836700", 65: "#c29900", 75: "#e2b623", 80: "#eec448", 85: "#f8d36a" },
104
104
  dark: { 25: "#453a1c", 80: "#e3c36c", 90: "#fae19e" }
105
105
  },
106
106
  teal: {
@@ -140,37 +140,10 @@ var neutralSyntax = defineSyntaxTheme({
140
140
  }
141
141
  });
142
142
  var neutralLocalTokens = {
143
- "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"],
144
- "--astryx-theme-neutral-color-status-fill-success": ["#198100", "#64af4c"],
145
- "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
146
- "--astryx-theme-neutral-color-status-fill-error": ["#c9303a", "#ff705d"],
147
- "--astryx-theme-neutral-color-status-muted-accent": [
148
- blue.light[85],
149
- withAlpha(blue.dark[75], "3D")
150
- ],
151
- "--astryx-theme-neutral-color-on-tint-neutral": ["#fafafa4D", "#0a0a0a4D"],
152
- "--astryx-theme-neutral-color-on-tint-overlay-hover": [
153
- "#fafafa1A",
154
- "#0a0a0a1A"
155
- ],
156
- "--astryx-theme-neutral-color-on-tint-overlay-pressed": [
157
- "#fafafa33",
158
- "#0a0a0a33"
159
- ],
160
- "--astryx-theme-neutral-color-destructive-overlay-hover": [
161
- withAlpha(red.light[70], "0D"),
162
- withAlpha(red.dark[65], "0D")
163
- ],
164
- "--astryx-theme-neutral-color-destructive-overlay-pressed": [
165
- withAlpha(red.light[70], "1A"),
166
- withAlpha(red.dark[65], "1A")
167
- ]
168
- };
169
- var statusFill = {
170
- accent: "var(--astryx-theme-neutral-color-status-fill-accent)",
171
- success: "var(--astryx-theme-neutral-color-status-fill-success)",
172
- warning: "var(--astryx-theme-neutral-color-status-fill-warning)",
173
- error: "var(--astryx-theme-neutral-color-status-fill-error)"
143
+ // Deprecated: kept with its released name, meaning, and value for Neutral
144
+ // extensions (theme:neutral DEC-1); Neutral itself paints status through the
145
+ // portable --color-* roles and no longer reads it.
146
+ "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"]
174
147
  };
175
148
  var neutralTheme = defineTheme({
176
149
  name: "neutral",
@@ -247,14 +220,27 @@ var neutralTheme = defineTheme({
247
220
  "--color-on-success": [neutral.light[100], neutral.dark[5]],
248
221
  "--color-on-error": [neutral.light[100], neutral.dark[5]],
249
222
  "--color-on-warning": neutral.light[5],
223
+ "--color-info": ["#0074e2", "#6d9cfe"],
224
+ "--color-info-muted": [blue.light[85], withAlpha(blue.dark[75], "3D")],
225
+ "--color-on-info": [neutral.light[100], neutral.dark[5]],
226
+ "--color-text-info": [blue.light[45], blue.dark[80]],
227
+ "--color-text-success": [green.light[45], green.light[75]],
228
+ "--color-text-warning": [yellow.light[45], yellow.light[80]],
229
+ "--color-text-error": [red.light[45], red.dark[80]],
230
+ "--color-on-info-muted": [blue.light[25], blue.dark[80]],
231
+ "--color-on-success-muted": [green.light[25], green.light[75]],
232
+ "--color-on-warning-muted": [yellow.light[25], yellow.light[80]],
233
+ "--color-on-error-muted": [red.light[25], red.dark[80]],
250
234
  // Icon
251
235
  "--color-icon-accent": [neutral.light[10], neutral.dark[95]],
252
236
  "--color-icon-primary": [neutral.light[0], neutral.dark[100]],
253
237
  "--color-icon-secondary": [neutral.light[45], neutral.dark[65]],
254
238
  "--color-icon-disabled": [neutral.light[60], neutral.dark[35]],
255
- "--color-success": [green.light[25], green.light[80]],
256
- "--color-error": [red.light[25], red.dark[85]],
257
- "--color-warning": [yellow.light[25], yellow.light[85]],
239
+ // Strong status fills (architecture:theme-tokens INV11): Neutral's
240
+ // reviewed status-fill colours, with --color-on-<status> above.
241
+ "--color-success": ["#198100", "#64af4c"],
242
+ "--color-warning": "#ffce2f",
243
+ "--color-error": ["#c9303a", "#ff705d"],
258
244
  "--color-success-muted": [green.dark[85], withAlpha(green.light[75], "3D")],
259
245
  "--color-error-muted": [red.light[85], withAlpha(red.dark[75], "3D")],
260
246
  "--color-warning-muted": [
@@ -272,7 +258,7 @@ var neutralTheme = defineTheme({
272
258
  withAlpha(neutral.light[0], "1A"),
273
259
  withAlpha(neutral.dark[0], "4D")
274
260
  ],
275
- "--color-tint-hover": ["black", "white"],
261
+ "--color-tint-hover": [neutral.light[0], neutral.dark[100]],
276
262
  "--color-background-red": [red.light[85], red.dark[25]],
277
263
  "--color-border-red": [red.light[80], red.light[65]],
278
264
  "--color-icon-red": [red.light[25], red.dark[75]],
@@ -356,32 +342,14 @@ var neutralTheme = defineTheme({
356
342
  button: {
357
343
  "variant:destructive": {
358
344
  backgroundColor: "var(--color-error-muted)",
359
- color: "var(--color-error)",
360
- "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
361
- "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)"
345
+ color: "var(--color-on-error-muted)"
362
346
  }
363
347
  },
364
348
  badge: {
365
- "variant:info": {
366
- backgroundColor: statusFill.accent,
367
- color: "var(--color-on-accent)"
368
- },
369
349
  "variant:neutral": {
370
350
  backgroundColor: "var(--color-background-gray)",
371
351
  color: "var(--color-text-gray)"
372
352
  },
373
- "variant:success": {
374
- backgroundColor: statusFill.success,
375
- color: "var(--color-on-success)"
376
- },
377
- "variant:warning": {
378
- backgroundColor: statusFill.warning,
379
- color: "var(--color-on-warning)"
380
- },
381
- "variant:error": {
382
- backgroundColor: statusFill.error,
383
- color: "var(--color-on-error)"
384
- },
385
353
  "variant:red": {
386
354
  backgroundColor: "var(--color-background-red)",
387
355
  color: "var(--color-text-red)"
@@ -423,16 +391,6 @@ var neutralTheme = defineTheme({
423
391
  color: "var(--color-text-gray)"
424
392
  }
425
393
  },
426
- "status-dot": {
427
- "variant:success": { backgroundColor: statusFill.success },
428
- "variant:warning": { backgroundColor: statusFill.warning },
429
- "variant:error": { backgroundColor: statusFill.error },
430
- "variant:accent": { backgroundColor: statusFill.accent }
431
- },
432
- "avatar-status-dot": {
433
- "variant:success": { backgroundColor: statusFill.success },
434
- "variant:error": { backgroundColor: statusFill.error }
435
- },
436
394
  // Give the Neutral segmented control a roomier inset without changing its
437
395
  // outside height. The selected item stays flat against the tinted track.
438
396
  "segmented-control": {
@@ -454,40 +412,6 @@ var neutralTheme = defineTheme({
454
412
  boxShadow: "none"
455
413
  }
456
414
  },
457
- banner: {
458
- base: {
459
- "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
460
- "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
461
- "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)"
462
- },
463
- "status:info": {
464
- "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
465
- "--color-text-primary": "var(--color-text-blue)",
466
- "--color-text-secondary": "var(--color-text-blue)",
467
- "--color-accent": "var(--color-text-blue)"
468
- },
469
- "status:success": {
470
- "--color-text-primary": "var(--color-text-green)",
471
- "--color-text-secondary": "var(--color-text-green)",
472
- "--color-success": "var(--color-text-green)"
473
- },
474
- "status:warning": {
475
- "--color-text-primary": "var(--color-text-yellow)",
476
- "--color-text-secondary": "var(--color-text-yellow)",
477
- "--color-warning": "var(--color-text-yellow)"
478
- },
479
- "status:error": {
480
- "--color-text-primary": "var(--color-text-red)",
481
- "--color-text-secondary": "var(--color-text-red)",
482
- "--color-error": "var(--color-text-red)"
483
- }
484
- },
485
- "step-indicator": {
486
- "status:accent": { "--color-accent": statusFill.accent },
487
- "status:success": { "--color-success": statusFill.success },
488
- "status:warning": { "--color-warning": statusFill.warning },
489
- "status:error": { "--color-error": statusFill.error }
490
- },
491
415
  switch: {
492
416
  base: {
493
417
  "--color-background-gray": "var(--color-border-emphasized)"
@@ -496,18 +420,6 @@ var neutralTheme = defineTheme({
496
420
  "progress-bar": {
497
421
  base: {
498
422
  "--color-background-muted": "var(--color-border-emphasized)"
499
- },
500
- "variant:accent": {
501
- "--color-accent": statusFill.accent
502
- },
503
- "variant:success": {
504
- "--color-success": statusFill.success
505
- },
506
- "variant:warning": {
507
- "--color-warning": statusFill.warning
508
- },
509
- "variant:error": {
510
- "--color-error": statusFill.error
511
423
  }
512
424
  },
513
425
  card: {