@astryxdesign/theme-stone 0.7.5-canary.577e8ca → 0.7.5-canary.5b691cd

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 (8) hide show
  1. package/dist/source.js +46 -24
  2. package/dist/source.mjs +46 -24
  3. package/dist/stone.js +93 -46
  4. package/dist/stoneTheme.d.ts.map +1 -1
  5. package/dist/theme.css +100 -43
  6. package/package.json +3 -3
  7. package/src/stoneTheme.test.ts +60 -2
  8. package/src/stoneTheme.ts +46 -21
package/dist/source.js CHANGED
@@ -118,13 +118,16 @@ var lightDark = (light, dark) => `light-dark(${light}, ${dark})`;
118
118
  var withAlpha = (color, alpha) => `${color}${alpha}`;
119
119
  var INPUT_STATUS_VARS = {
120
120
  "status:success": {
121
- "--color-success": lightDark(green.light[55], green.dark[70])
121
+ "--color-border-success": lightDark(green.light[55], green.dark[70]),
122
+ "--color-icon-success": lightDark(green.light[55], green.dark[70])
122
123
  },
123
124
  "status:warning": {
124
- "--color-warning": lightDark(yellow.light[55], yellow.dark[70])
125
+ "--color-border-warning": lightDark(yellow.light[55], yellow.dark[70]),
126
+ "--color-icon-warning": lightDark(yellow.light[55], yellow.dark[70])
125
127
  },
126
128
  "status:error": {
127
- "--color-error": lightDark(red.light[60], red.dark[70])
129
+ "--color-border-error": lightDark(red.light[60], red.dark[70]),
130
+ "--color-icon-error": lightDark(red.light[60], red.dark[70])
128
131
  }
129
132
  };
130
133
  var stoneSyntax = (0, import_theme.defineSyntaxTheme)({
@@ -244,9 +247,20 @@ var stoneTheme = (0, import_theme.defineTheme)({
244
247
  "--color-on-dark": neutral.light[100],
245
248
  "--color-on-light": [neutral.light[15], neutral.dark[15]],
246
249
  "--color-on-accent": [neutral.light[100], neutral.dark[15]],
247
- "--color-on-success": [green.light[30], green.dark[90]],
248
- "--color-on-error": [red.light[30], red.dark[90]],
249
- "--color-on-warning": [yellow.light[30], yellow.dark[90]],
250
+ "--color-on-success": [neutral.light[100], neutral.dark[10]],
251
+ "--color-on-error": [neutral.light[100], neutral.dark[10]],
252
+ "--color-on-warning": [neutral.light[100], neutral.dark[10]],
253
+ "--color-info": [blue.light[40], blue.dark[70]],
254
+ "--color-info-muted": [blue.light[90], blue.dark[25]],
255
+ "--color-on-info": [neutral.light[100], neutral.dark[15]],
256
+ "--color-text-info": [blue.light[30], blue.dark[90]],
257
+ "--color-text-success": [green.light[30], green.dark[90]],
258
+ "--color-text-warning": [yellow.light[30], yellow.dark[90]],
259
+ "--color-text-error": [red.light[30], red.dark[90]],
260
+ "--color-on-info-muted": [blue.light[30], blue.dark[90]],
261
+ "--color-on-success-muted": [green.light[30], green.dark[25]],
262
+ "--color-on-warning-muted": [yellow.light[30], yellow.dark[25]],
263
+ "--color-on-error-muted": [red.light[30], red.dark[25]],
250
264
  // Icon
251
265
  "--color-icon-accent": [neutral.light[15], neutral.dark[95]],
252
266
  "--color-icon-primary": [neutral.light[15], neutral.dark[95]],
@@ -371,32 +385,23 @@ var stoneTheme = (0, import_theme.defineTheme)({
371
385
  color: "var(--color-text-red)"
372
386
  }
373
387
  },
374
- // Banner surface declarations live above the theme layer, so redirect the
375
- // semantic variables here instead of attempting a losing direct fill.
388
+ // Banner status surfaces and content use the matching categorical pair.
376
389
  banner: {
377
390
  "status:info": {
378
- "--color-accent-muted": "var(--color-background-blue)",
379
- "--color-text-primary": "var(--color-text-blue)",
380
- "--color-text-secondary": "var(--color-text-blue)",
381
- "--color-accent": "var(--color-text-blue)"
391
+ "--color-info-muted": "var(--color-background-blue)",
392
+ "--color-on-info-muted": "var(--color-text-blue)"
382
393
  },
383
394
  "status:success": {
384
395
  "--color-success-muted": "var(--color-background-green)",
385
- "--color-text-primary": "var(--color-text-green)",
386
- "--color-text-secondary": "var(--color-text-green)",
387
- "--color-success": "var(--color-text-green)"
396
+ "--color-on-success-muted": "var(--color-text-green)"
388
397
  },
389
398
  "status:warning": {
390
399
  "--color-warning-muted": "var(--color-background-yellow)",
391
- "--color-text-primary": "var(--color-text-yellow)",
392
- "--color-text-secondary": "var(--color-text-yellow)",
393
- "--color-warning": "var(--color-text-yellow)"
400
+ "--color-on-warning-muted": "var(--color-text-yellow)"
394
401
  },
395
402
  "status:error": {
396
403
  "--color-error-muted": "var(--color-background-red)",
397
- "--color-text-primary": "var(--color-text-red)",
398
- "--color-text-secondary": "var(--color-text-red)",
399
- "--color-error": "var(--color-text-red)"
404
+ "--color-on-error-muted": "var(--color-text-red)"
400
405
  }
401
406
  },
402
407
  // Progress fills use the same family as their matching status surface;
@@ -415,6 +420,20 @@ var stoneTheme = (0, import_theme.defineTheme)({
415
420
  backgroundColor: lightDark(red.light[90], red.dark[70])
416
421
  }
417
422
  },
423
+ "progress-bar-mark": {
424
+ "placement:fill+variant:accent": {
425
+ backgroundColor: "var(--color-on-light)"
426
+ },
427
+ "placement:fill+variant:success": {
428
+ backgroundColor: "var(--color-on-light)"
429
+ },
430
+ "placement:fill+variant:warning": {
431
+ backgroundColor: "var(--color-on-light)"
432
+ },
433
+ "placement:fill+variant:error": {
434
+ backgroundColor: "var(--color-on-light)"
435
+ }
436
+ },
418
437
  // The default muted track is too close to Stone's body surface.
419
438
  "progress-bar-track": {
420
439
  base: {
@@ -430,13 +449,16 @@ var stoneTheme = (0, import_theme.defineTheme)({
430
449
  // FieldStatus surfaces match the corresponding badge and banner family.
431
450
  "field-status": {
432
451
  "type:success": {
433
- backgroundColor: "var(--color-background-green)"
452
+ backgroundColor: "var(--color-background-green)",
453
+ color: "var(--color-text-green)"
434
454
  },
435
455
  "type:warning": {
436
- backgroundColor: "var(--color-background-yellow)"
456
+ backgroundColor: "var(--color-background-yellow)",
457
+ color: "var(--color-text-yellow)"
437
458
  },
438
459
  "type:error": {
439
- backgroundColor: "var(--color-background-red)"
460
+ backgroundColor: "var(--color-background-red)",
461
+ color: "var(--color-text-red)"
440
462
  }
441
463
  },
442
464
  // Every input status border and icon uses INPUT_STATUS_VARS above.
package/dist/source.mjs CHANGED
@@ -120,13 +120,16 @@ var lightDark = (light, dark) => `light-dark(${light}, ${dark})`;
120
120
  var withAlpha = (color, alpha) => `${color}${alpha}`;
121
121
  var INPUT_STATUS_VARS = {
122
122
  "status:success": {
123
- "--color-success": lightDark(green.light[55], green.dark[70])
123
+ "--color-border-success": lightDark(green.light[55], green.dark[70]),
124
+ "--color-icon-success": lightDark(green.light[55], green.dark[70])
124
125
  },
125
126
  "status:warning": {
126
- "--color-warning": lightDark(yellow.light[55], yellow.dark[70])
127
+ "--color-border-warning": lightDark(yellow.light[55], yellow.dark[70]),
128
+ "--color-icon-warning": lightDark(yellow.light[55], yellow.dark[70])
127
129
  },
128
130
  "status:error": {
129
- "--color-error": lightDark(red.light[60], red.dark[70])
131
+ "--color-border-error": lightDark(red.light[60], red.dark[70]),
132
+ "--color-icon-error": lightDark(red.light[60], red.dark[70])
130
133
  }
131
134
  };
132
135
  var stoneSyntax = defineSyntaxTheme({
@@ -246,9 +249,20 @@ var stoneTheme = defineTheme({
246
249
  "--color-on-dark": neutral.light[100],
247
250
  "--color-on-light": [neutral.light[15], neutral.dark[15]],
248
251
  "--color-on-accent": [neutral.light[100], neutral.dark[15]],
249
- "--color-on-success": [green.light[30], green.dark[90]],
250
- "--color-on-error": [red.light[30], red.dark[90]],
251
- "--color-on-warning": [yellow.light[30], yellow.dark[90]],
252
+ "--color-on-success": [neutral.light[100], neutral.dark[10]],
253
+ "--color-on-error": [neutral.light[100], neutral.dark[10]],
254
+ "--color-on-warning": [neutral.light[100], neutral.dark[10]],
255
+ "--color-info": [blue.light[40], blue.dark[70]],
256
+ "--color-info-muted": [blue.light[90], blue.dark[25]],
257
+ "--color-on-info": [neutral.light[100], neutral.dark[15]],
258
+ "--color-text-info": [blue.light[30], blue.dark[90]],
259
+ "--color-text-success": [green.light[30], green.dark[90]],
260
+ "--color-text-warning": [yellow.light[30], yellow.dark[90]],
261
+ "--color-text-error": [red.light[30], red.dark[90]],
262
+ "--color-on-info-muted": [blue.light[30], blue.dark[90]],
263
+ "--color-on-success-muted": [green.light[30], green.dark[25]],
264
+ "--color-on-warning-muted": [yellow.light[30], yellow.dark[25]],
265
+ "--color-on-error-muted": [red.light[30], red.dark[25]],
252
266
  // Icon
253
267
  "--color-icon-accent": [neutral.light[15], neutral.dark[95]],
254
268
  "--color-icon-primary": [neutral.light[15], neutral.dark[95]],
@@ -373,32 +387,23 @@ var stoneTheme = defineTheme({
373
387
  color: "var(--color-text-red)"
374
388
  }
375
389
  },
376
- // Banner surface declarations live above the theme layer, so redirect the
377
- // semantic variables here instead of attempting a losing direct fill.
390
+ // Banner status surfaces and content use the matching categorical pair.
378
391
  banner: {
379
392
  "status:info": {
380
- "--color-accent-muted": "var(--color-background-blue)",
381
- "--color-text-primary": "var(--color-text-blue)",
382
- "--color-text-secondary": "var(--color-text-blue)",
383
- "--color-accent": "var(--color-text-blue)"
393
+ "--color-info-muted": "var(--color-background-blue)",
394
+ "--color-on-info-muted": "var(--color-text-blue)"
384
395
  },
385
396
  "status:success": {
386
397
  "--color-success-muted": "var(--color-background-green)",
387
- "--color-text-primary": "var(--color-text-green)",
388
- "--color-text-secondary": "var(--color-text-green)",
389
- "--color-success": "var(--color-text-green)"
398
+ "--color-on-success-muted": "var(--color-text-green)"
390
399
  },
391
400
  "status:warning": {
392
401
  "--color-warning-muted": "var(--color-background-yellow)",
393
- "--color-text-primary": "var(--color-text-yellow)",
394
- "--color-text-secondary": "var(--color-text-yellow)",
395
- "--color-warning": "var(--color-text-yellow)"
402
+ "--color-on-warning-muted": "var(--color-text-yellow)"
396
403
  },
397
404
  "status:error": {
398
405
  "--color-error-muted": "var(--color-background-red)",
399
- "--color-text-primary": "var(--color-text-red)",
400
- "--color-text-secondary": "var(--color-text-red)",
401
- "--color-error": "var(--color-text-red)"
406
+ "--color-on-error-muted": "var(--color-text-red)"
402
407
  }
403
408
  },
404
409
  // Progress fills use the same family as their matching status surface;
@@ -417,6 +422,20 @@ var stoneTheme = defineTheme({
417
422
  backgroundColor: lightDark(red.light[90], red.dark[70])
418
423
  }
419
424
  },
425
+ "progress-bar-mark": {
426
+ "placement:fill+variant:accent": {
427
+ backgroundColor: "var(--color-on-light)"
428
+ },
429
+ "placement:fill+variant:success": {
430
+ backgroundColor: "var(--color-on-light)"
431
+ },
432
+ "placement:fill+variant:warning": {
433
+ backgroundColor: "var(--color-on-light)"
434
+ },
435
+ "placement:fill+variant:error": {
436
+ backgroundColor: "var(--color-on-light)"
437
+ }
438
+ },
420
439
  // The default muted track is too close to Stone's body surface.
421
440
  "progress-bar-track": {
422
441
  base: {
@@ -432,13 +451,16 @@ var stoneTheme = defineTheme({
432
451
  // FieldStatus surfaces match the corresponding badge and banner family.
433
452
  "field-status": {
434
453
  "type:success": {
435
- backgroundColor: "var(--color-background-green)"
454
+ backgroundColor: "var(--color-background-green)",
455
+ color: "var(--color-text-green)"
436
456
  },
437
457
  "type:warning": {
438
- backgroundColor: "var(--color-background-yellow)"
458
+ backgroundColor: "var(--color-background-yellow)",
459
+ color: "var(--color-text-yellow)"
439
460
  },
440
461
  "type:error": {
441
- backgroundColor: "var(--color-background-red)"
462
+ backgroundColor: "var(--color-background-red)",
463
+ color: "var(--color-text-red)"
442
464
  }
443
465
  },
444
466
  // Every input status border and icon uses INPUT_STATUS_VARS above.
package/dist/stone.js CHANGED
@@ -119,9 +119,20 @@ export const stoneTheme = {
119
119
  "--color-on-dark": "#ffffff",
120
120
  "--color-on-light": "light-dark(#25252a, #25252a)",
121
121
  "--color-on-accent": "light-dark(#ffffff, #25252a)",
122
- "--color-on-success": "light-dark(#354f31, #d5e9d2)",
123
- "--color-on-error": "light-dark(#603c37, #f7dbd7)",
124
- "--color-on-warning": "light-dark(#524818, #f1e1b9)",
122
+ "--color-on-success": "light-dark(#ffffff, #1b1b21)",
123
+ "--color-on-error": "light-dark(#ffffff, #1b1b21)",
124
+ "--color-on-warning": "light-dark(#ffffff, #1b1b21)",
125
+ "--color-info": "light-dark(#516074, #9aadc7)",
126
+ "--color-info-muted": "light-dark(#d3e4fc, #2c3c52)",
127
+ "--color-on-info": "light-dark(#ffffff, #25252a)",
128
+ "--color-text-info": "light-dark(#344861, #d5e4f8)",
129
+ "--color-text-success": "light-dark(#354f31, #d5e9d2)",
130
+ "--color-text-warning": "light-dark(#524818, #f1e1b9)",
131
+ "--color-text-error": "light-dark(#603c37, #f7dbd7)",
132
+ "--color-on-info-muted": "light-dark(#344861, #d5e4f8)",
133
+ "--color-on-success-muted": "light-dark(#354f31, #2f412c)",
134
+ "--color-on-warning-muted": "light-dark(#524818, #433b1b)",
135
+ "--color-on-error-muted": "light-dark(#603c37, #50332e)",
125
136
  "--color-icon-accent": "light-dark(#25252a, #f0f0f9)",
126
137
  "--color-icon-primary": "light-dark(#25252a, #f0f0f9)",
127
138
  "--color-icon-secondary": "light-dark(#848489, #9d9ea5)",
@@ -333,28 +344,20 @@ export const stoneTheme = {
333
344
  },
334
345
  "banner": {
335
346
  "status:info": {
336
- "--color-accent-muted": "var(--color-background-blue)",
337
- "--color-text-primary": "var(--color-text-blue)",
338
- "--color-text-secondary": "var(--color-text-blue)",
339
- "--color-accent": "var(--color-text-blue)"
347
+ "--color-info-muted": "var(--color-background-blue)",
348
+ "--color-on-info-muted": "var(--color-text-blue)"
340
349
  },
341
350
  "status:success": {
342
351
  "--color-success-muted": "var(--color-background-green)",
343
- "--color-text-primary": "var(--color-text-green)",
344
- "--color-text-secondary": "var(--color-text-green)",
345
- "--color-success": "var(--color-text-green)"
352
+ "--color-on-success-muted": "var(--color-text-green)"
346
353
  },
347
354
  "status:warning": {
348
355
  "--color-warning-muted": "var(--color-background-yellow)",
349
- "--color-text-primary": "var(--color-text-yellow)",
350
- "--color-text-secondary": "var(--color-text-yellow)",
351
- "--color-warning": "var(--color-text-yellow)"
356
+ "--color-on-warning-muted": "var(--color-text-yellow)"
352
357
  },
353
358
  "status:error": {
354
359
  "--color-error-muted": "var(--color-background-red)",
355
- "--color-text-primary": "var(--color-text-red)",
356
- "--color-text-secondary": "var(--color-text-red)",
357
- "--color-error": "var(--color-text-red)"
360
+ "--color-on-error-muted": "var(--color-text-red)"
358
361
  }
359
362
  },
360
363
  "progress-bar-fill": {
@@ -371,6 +374,20 @@ export const stoneTheme = {
371
374
  "backgroundColor": "light-dark(#fbdad4, #c6a29c)"
372
375
  }
373
376
  },
377
+ "progress-bar-mark": {
378
+ "placement:fill+variant:accent": {
379
+ "backgroundColor": "var(--color-on-light)"
380
+ },
381
+ "placement:fill+variant:success": {
382
+ "backgroundColor": "var(--color-on-light)"
383
+ },
384
+ "placement:fill+variant:warning": {
385
+ "backgroundColor": "var(--color-on-light)"
386
+ },
387
+ "placement:fill+variant:error": {
388
+ "backgroundColor": "var(--color-on-light)"
389
+ }
390
+ },
374
391
  "progress-bar-track": {
375
392
  "base": {
376
393
  "backgroundColor": "var(--color-skeleton)"
@@ -383,79 +400,100 @@ export const stoneTheme = {
383
400
  },
384
401
  "field-status": {
385
402
  "type:success": {
386
- "backgroundColor": "var(--color-background-green)"
403
+ "backgroundColor": "var(--color-background-green)",
404
+ "color": "var(--color-text-green)"
387
405
  },
388
406
  "type:warning": {
389
- "backgroundColor": "var(--color-background-yellow)"
407
+ "backgroundColor": "var(--color-background-yellow)",
408
+ "color": "var(--color-text-yellow)"
390
409
  },
391
410
  "type:error": {
392
- "backgroundColor": "var(--color-background-red)"
411
+ "backgroundColor": "var(--color-background-red)",
412
+ "color": "var(--color-text-red)"
393
413
  }
394
414
  },
395
415
  "text-input": {
396
416
  "status:success": {
397
- "--color-success": "light-dark(#609757, #90ba8a)"
417
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
418
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
398
419
  },
399
420
  "status:warning": {
400
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
421
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
422
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
401
423
  },
402
424
  "status:error": {
403
- "--color-error": "light-dark(#a98984, #c6a29c)"
425
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
426
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
404
427
  }
405
428
  },
406
429
  "text-area": {
407
430
  "status:success": {
408
- "--color-success": "light-dark(#609757, #90ba8a)"
431
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
432
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
409
433
  },
410
434
  "status:warning": {
411
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
435
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
436
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
412
437
  },
413
438
  "status:error": {
414
- "--color-error": "light-dark(#a98984, #c6a29c)"
439
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
440
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
415
441
  }
416
442
  },
417
443
  "number-input": {
418
444
  "status:success": {
419
- "--color-success": "light-dark(#609757, #90ba8a)"
445
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
446
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
420
447
  },
421
448
  "status:warning": {
422
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
449
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
450
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
423
451
  },
424
452
  "status:error": {
425
- "--color-error": "light-dark(#a98984, #c6a29c)"
453
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
454
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
426
455
  }
427
456
  },
428
457
  "date-input": {
429
458
  "status:success": {
430
- "--color-success": "light-dark(#609757, #90ba8a)"
459
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
460
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
431
461
  },
432
462
  "status:warning": {
433
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
463
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
464
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
434
465
  },
435
466
  "status:error": {
436
- "--color-error": "light-dark(#a98984, #c6a29c)"
467
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
468
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
437
469
  }
438
470
  },
439
471
  "time-input": {
440
472
  "status:success": {
441
- "--color-success": "light-dark(#609757, #90ba8a)"
473
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
474
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
442
475
  },
443
476
  "status:warning": {
444
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
477
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
478
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
445
479
  },
446
480
  "status:error": {
447
- "--color-error": "light-dark(#a98984, #c6a29c)"
481
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
482
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
448
483
  }
449
484
  },
450
485
  "selector": {
451
486
  "status:success": {
452
- "--color-success": "light-dark(#609757, #90ba8a)"
487
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
488
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
453
489
  },
454
490
  "status:warning": {
455
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
491
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
492
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
456
493
  },
457
494
  "status:error": {
458
- "--color-error": "light-dark(#a98984, #c6a29c)"
495
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
496
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
459
497
  },
460
498
  "variant:secondary": {
461
499
  ":not(.astryx-input-group *)": {
@@ -471,13 +509,16 @@ export const stoneTheme = {
471
509
  },
472
510
  "multi-selector": {
473
511
  "status:success": {
474
- "--color-success": "light-dark(#609757, #90ba8a)"
512
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
513
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
475
514
  },
476
515
  "status:warning": {
477
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
516
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
517
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
478
518
  },
479
519
  "status:error": {
480
- "--color-error": "light-dark(#a98984, #c6a29c)"
520
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
521
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
481
522
  },
482
523
  "variant:secondary": {
483
524
  ":not(.astryx-input-group *)": {
@@ -504,24 +545,30 @@ export const stoneTheme = {
504
545
  },
505
546
  "typeahead": {
506
547
  "status:success": {
507
- "--color-success": "light-dark(#609757, #90ba8a)"
548
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
549
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
508
550
  },
509
551
  "status:warning": {
510
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
552
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
553
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
511
554
  },
512
555
  "status:error": {
513
- "--color-error": "light-dark(#a98984, #c6a29c)"
556
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
557
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
514
558
  }
515
559
  },
516
560
  "tokenizer": {
517
561
  "status:success": {
518
- "--color-success": "light-dark(#609757, #90ba8a)"
562
+ "--color-border-success": "light-dark(#609757, #90ba8a)",
563
+ "--color-icon-success": "light-dark(#609757, #90ba8a)"
519
564
  },
520
565
  "status:warning": {
521
- "--color-warning": "light-dark(#a08c36, #c2af6e)"
566
+ "--color-border-warning": "light-dark(#a08c36, #c2af6e)",
567
+ "--color-icon-warning": "light-dark(#a08c36, #c2af6e)"
522
568
  },
523
569
  "status:error": {
524
- "--color-error": "light-dark(#a98984, #c6a29c)"
570
+ "--color-border-error": "light-dark(#a98984, #c6a29c)",
571
+ "--color-icon-error": "light-dark(#a98984, #c6a29c)"
525
572
  }
526
573
  },
527
574
  "card": {
package/dist/stoneTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"AAmHA,eAAO,MAAM,UAAU,yDAqUrB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhB,CAAC"}
1
+ {"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"AAsHA,eAAO,MAAM,UAAU,yDA2VrB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhB,CAAC"}
package/dist/theme.css CHANGED
@@ -187,9 +187,20 @@
187
187
  --color-on-dark: #ffffff;
188
188
  --color-on-light: light-dark(#25252a, #25252a);
189
189
  --color-on-accent: light-dark(#ffffff, #25252a);
190
- --color-on-success: light-dark(#354f31, #d5e9d2);
191
- --color-on-error: light-dark(#603c37, #f7dbd7);
192
- --color-on-warning: light-dark(#524818, #f1e1b9);
190
+ --color-on-success: light-dark(#ffffff, #1b1b21);
191
+ --color-on-error: light-dark(#ffffff, #1b1b21);
192
+ --color-on-warning: light-dark(#ffffff, #1b1b21);
193
+ --color-info: light-dark(#516074, #9aadc7);
194
+ --color-info-muted: light-dark(#d3e4fc, #2c3c52);
195
+ --color-on-info: light-dark(#ffffff, #25252a);
196
+ --color-text-info: light-dark(#344861, #d5e4f8);
197
+ --color-text-success: light-dark(#354f31, #d5e9d2);
198
+ --color-text-warning: light-dark(#524818, #f1e1b9);
199
+ --color-text-error: light-dark(#603c37, #f7dbd7);
200
+ --color-on-info-muted: light-dark(#344861, #d5e4f8);
201
+ --color-on-success-muted: light-dark(#354f31, #2f412c);
202
+ --color-on-warning-muted: light-dark(#524818, #433b1b);
203
+ --color-on-error-muted: light-dark(#603c37, #50332e);
193
204
  --color-icon-accent: light-dark(#25252a, #f0f0f9);
194
205
  --color-icon-primary: light-dark(#25252a, #f0f0f9);
195
206
  --color-icon-secondary: light-dark(#848489, #9d9ea5);
@@ -262,6 +273,14 @@
262
273
  --shadow-inset-success: inset 0 0 0 2px #84848930;
263
274
  --shadow-inset-warning: inset 0 0 0 2px #84848930;
264
275
  --shadow-inset-error: inset 0 0 0 2px #84848930;
276
+ --color-icon-info: var(--color-text-info);
277
+ --color-icon-success: var(--color-text-success);
278
+ --color-icon-warning: var(--color-text-warning);
279
+ --color-icon-error: var(--color-text-error);
280
+ --color-border-info: var(--color-text-info);
281
+ --color-border-success: var(--color-text-success);
282
+ --color-border-warning: var(--color-text-warning);
283
+ --color-border-error: var(--color-text-error);
265
284
  }
266
285
 
267
286
  :scope {
@@ -423,31 +442,23 @@
423
442
  }
424
443
 
425
444
  .astryx-banner[data-status="info"] {
426
- --color-accent-muted: var(--color-background-blue);
427
- --color-text-primary: var(--color-text-blue);
428
- --color-text-secondary: var(--color-text-blue);
429
- --color-accent: var(--color-text-blue);
445
+ --color-info-muted: var(--color-background-blue);
446
+ --color-on-info-muted: var(--color-text-blue);
430
447
  }
431
448
 
432
449
  .astryx-banner[data-status="success"] {
433
450
  --color-success-muted: var(--color-background-green);
434
- --color-text-primary: var(--color-text-green);
435
- --color-text-secondary: var(--color-text-green);
436
- --color-success: var(--color-text-green);
451
+ --color-on-success-muted: var(--color-text-green);
437
452
  }
438
453
 
439
454
  .astryx-banner[data-status="warning"] {
440
455
  --color-warning-muted: var(--color-background-yellow);
441
- --color-text-primary: var(--color-text-yellow);
442
- --color-text-secondary: var(--color-text-yellow);
443
- --color-warning: var(--color-text-yellow);
456
+ --color-on-warning-muted: var(--color-text-yellow);
444
457
  }
445
458
 
446
459
  .astryx-banner[data-status="error"] {
447
460
  --color-error-muted: var(--color-background-red);
448
- --color-text-primary: var(--color-text-red);
449
- --color-text-secondary: var(--color-text-red);
450
- --color-error: var(--color-text-red);
461
+ --color-on-error-muted: var(--color-text-red);
451
462
  }
452
463
 
453
464
  .astryx-progress-bar-fill[data-variant="accent"] {
@@ -466,6 +477,22 @@
466
477
  background-color: light-dark(#fbdad4, #c6a29c);
467
478
  }
468
479
 
480
+ .astryx-progress-bar-mark[data-placement="fill"][data-variant="accent"] {
481
+ background-color: var(--color-on-light);
482
+ }
483
+
484
+ .astryx-progress-bar-mark[data-placement="fill"][data-variant="success"] {
485
+ background-color: var(--color-on-light);
486
+ }
487
+
488
+ .astryx-progress-bar-mark[data-placement="fill"][data-variant="warning"] {
489
+ background-color: var(--color-on-light);
490
+ }
491
+
492
+ .astryx-progress-bar-mark[data-placement="fill"][data-variant="error"] {
493
+ background-color: var(--color-on-light);
494
+ }
495
+
469
496
  .astryx-progress-bar-track {
470
497
  background-color: var(--color-skeleton);
471
498
  }
@@ -476,86 +503,107 @@
476
503
 
477
504
  .astryx-field-status[data-type="success"] {
478
505
  background-color: var(--color-background-green);
506
+ color: var(--color-text-green);
479
507
  }
480
508
 
481
509
  .astryx-field-status[data-type="warning"] {
482
510
  background-color: var(--color-background-yellow);
511
+ color: var(--color-text-yellow);
483
512
  }
484
513
 
485
514
  .astryx-field-status[data-type="error"] {
486
515
  background-color: var(--color-background-red);
516
+ color: var(--color-text-red);
487
517
  }
488
518
 
489
519
  .astryx-text-input[data-status="success"] {
490
- --color-success: light-dark(#609757, #90ba8a);
520
+ --color-border-success: light-dark(#609757, #90ba8a);
521
+ --color-icon-success: light-dark(#609757, #90ba8a);
491
522
  }
492
523
 
493
524
  .astryx-text-input[data-status="warning"] {
494
- --color-warning: light-dark(#a08c36, #c2af6e);
525
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
526
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
495
527
  }
496
528
 
497
529
  .astryx-text-input[data-status="error"] {
498
- --color-error: light-dark(#a98984, #c6a29c);
530
+ --color-border-error: light-dark(#a98984, #c6a29c);
531
+ --color-icon-error: light-dark(#a98984, #c6a29c);
499
532
  }
500
533
 
501
534
  .astryx-text-area[data-status="success"] {
502
- --color-success: light-dark(#609757, #90ba8a);
535
+ --color-border-success: light-dark(#609757, #90ba8a);
536
+ --color-icon-success: light-dark(#609757, #90ba8a);
503
537
  }
504
538
 
505
539
  .astryx-text-area[data-status="warning"] {
506
- --color-warning: light-dark(#a08c36, #c2af6e);
540
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
541
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
507
542
  }
508
543
 
509
544
  .astryx-text-area[data-status="error"] {
510
- --color-error: light-dark(#a98984, #c6a29c);
545
+ --color-border-error: light-dark(#a98984, #c6a29c);
546
+ --color-icon-error: light-dark(#a98984, #c6a29c);
511
547
  }
512
548
 
513
549
  .astryx-number-input[data-status="success"] {
514
- --color-success: light-dark(#609757, #90ba8a);
550
+ --color-border-success: light-dark(#609757, #90ba8a);
551
+ --color-icon-success: light-dark(#609757, #90ba8a);
515
552
  }
516
553
 
517
554
  .astryx-number-input[data-status="warning"] {
518
- --color-warning: light-dark(#a08c36, #c2af6e);
555
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
556
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
519
557
  }
520
558
 
521
559
  .astryx-number-input[data-status="error"] {
522
- --color-error: light-dark(#a98984, #c6a29c);
560
+ --color-border-error: light-dark(#a98984, #c6a29c);
561
+ --color-icon-error: light-dark(#a98984, #c6a29c);
523
562
  }
524
563
 
525
564
  .astryx-date-input[data-status="success"] {
526
- --color-success: light-dark(#609757, #90ba8a);
565
+ --color-border-success: light-dark(#609757, #90ba8a);
566
+ --color-icon-success: light-dark(#609757, #90ba8a);
527
567
  }
528
568
 
529
569
  .astryx-date-input[data-status="warning"] {
530
- --color-warning: light-dark(#a08c36, #c2af6e);
570
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
571
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
531
572
  }
532
573
 
533
574
  .astryx-date-input[data-status="error"] {
534
- --color-error: light-dark(#a98984, #c6a29c);
575
+ --color-border-error: light-dark(#a98984, #c6a29c);
576
+ --color-icon-error: light-dark(#a98984, #c6a29c);
535
577
  }
536
578
 
537
579
  .astryx-time-input[data-status="success"] {
538
- --color-success: light-dark(#609757, #90ba8a);
580
+ --color-border-success: light-dark(#609757, #90ba8a);
581
+ --color-icon-success: light-dark(#609757, #90ba8a);
539
582
  }
540
583
 
541
584
  .astryx-time-input[data-status="warning"] {
542
- --color-warning: light-dark(#a08c36, #c2af6e);
585
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
586
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
543
587
  }
544
588
 
545
589
  .astryx-time-input[data-status="error"] {
546
- --color-error: light-dark(#a98984, #c6a29c);
590
+ --color-border-error: light-dark(#a98984, #c6a29c);
591
+ --color-icon-error: light-dark(#a98984, #c6a29c);
547
592
  }
548
593
 
549
594
  .astryx-selector[data-status="success"] {
550
- --color-success: light-dark(#609757, #90ba8a);
595
+ --color-border-success: light-dark(#609757, #90ba8a);
596
+ --color-icon-success: light-dark(#609757, #90ba8a);
551
597
  }
552
598
 
553
599
  .astryx-selector[data-status="warning"] {
554
- --color-warning: light-dark(#a08c36, #c2af6e);
600
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
601
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
555
602
  }
556
603
 
557
604
  .astryx-selector[data-status="error"] {
558
- --color-error: light-dark(#a98984, #c6a29c);
605
+ --color-border-error: light-dark(#a98984, #c6a29c);
606
+ --color-icon-error: light-dark(#a98984, #c6a29c);
559
607
  }
560
608
 
561
609
  .astryx-selector[data-variant="secondary"]:not(.astryx-input-group *) {
@@ -570,15 +618,18 @@
570
618
  }
571
619
 
572
620
  .astryx-multi-selector[data-status="success"] {
573
- --color-success: light-dark(#609757, #90ba8a);
621
+ --color-border-success: light-dark(#609757, #90ba8a);
622
+ --color-icon-success: light-dark(#609757, #90ba8a);
574
623
  }
575
624
 
576
625
  .astryx-multi-selector[data-status="warning"] {
577
- --color-warning: light-dark(#a08c36, #c2af6e);
626
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
627
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
578
628
  }
579
629
 
580
630
  .astryx-multi-selector[data-status="error"] {
581
- --color-error: light-dark(#a98984, #c6a29c);
631
+ --color-border-error: light-dark(#a98984, #c6a29c);
632
+ --color-icon-error: light-dark(#a98984, #c6a29c);
582
633
  }
583
634
 
584
635
  .astryx-multi-selector[data-variant="secondary"]:not(.astryx-input-group *) {
@@ -604,27 +655,33 @@
604
655
  }
605
656
 
606
657
  .astryx-typeahead[data-status="success"] {
607
- --color-success: light-dark(#609757, #90ba8a);
658
+ --color-border-success: light-dark(#609757, #90ba8a);
659
+ --color-icon-success: light-dark(#609757, #90ba8a);
608
660
  }
609
661
 
610
662
  .astryx-typeahead[data-status="warning"] {
611
- --color-warning: light-dark(#a08c36, #c2af6e);
663
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
664
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
612
665
  }
613
666
 
614
667
  .astryx-typeahead[data-status="error"] {
615
- --color-error: light-dark(#a98984, #c6a29c);
668
+ --color-border-error: light-dark(#a98984, #c6a29c);
669
+ --color-icon-error: light-dark(#a98984, #c6a29c);
616
670
  }
617
671
 
618
672
  .astryx-tokenizer[data-status="success"] {
619
- --color-success: light-dark(#609757, #90ba8a);
673
+ --color-border-success: light-dark(#609757, #90ba8a);
674
+ --color-icon-success: light-dark(#609757, #90ba8a);
620
675
  }
621
676
 
622
677
  .astryx-tokenizer[data-status="warning"] {
623
- --color-warning: light-dark(#a08c36, #c2af6e);
678
+ --color-border-warning: light-dark(#a08c36, #c2af6e);
679
+ --color-icon-warning: light-dark(#a08c36, #c2af6e);
624
680
  }
625
681
 
626
682
  .astryx-tokenizer[data-status="error"] {
627
- --color-error: light-dark(#a98984, #c6a29c);
683
+ --color-border-error: light-dark(#a98984, #c6a29c);
684
+ --color-icon-error: light-dark(#a98984, #c6a29c);
628
685
  }
629
686
 
630
687
  .astryx-card {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-stone",
3
- "version": "0.7.5-canary.577e8ca",
3
+ "version": "0.7.5-canary.5b691cd",
4
4
  "displayName": "Stone Theme",
5
5
  "private": false,
6
6
  "description": "Warm stone and slate, earthy and understated, with just enough character to feel handcrafted.",
@@ -58,11 +58,11 @@
58
58
  "lucide-react": "^1.18.0"
59
59
  },
60
60
  "peerDependencies": {
61
- "@astryxdesign/core": "0.7.5-canary.577e8ca",
61
+ "@astryxdesign/core": "0.7.5-canary.5b691cd",
62
62
  "react": ">=19"
63
63
  },
64
64
  "devDependencies": {
65
- "@astryxdesign/cli": "0.7.5-canary.577e8ca"
65
+ "@astryxdesign/cli": "0.7.5-canary.5b691cd"
66
66
  },
67
67
  "module": "./dist/source.mjs",
68
68
  "scripts": {
package/src/stoneTheme.test.ts CHANGED
@@ -60,6 +60,62 @@ describe('stone touch + narrow type pin', () => {
60
60
  });
61
61
  });
62
62
 
63
+ describe('stone input status roles', () => {
64
+ it('keeps soft per-input status rims and glyphs on the border and icon roles', () => {
65
+ const inputs = [
66
+ 'text-input',
67
+ 'text-area',
68
+ 'number-input',
69
+ 'date-input',
70
+ 'time-input',
71
+ 'selector',
72
+ 'multi-selector',
73
+ 'typeahead',
74
+ 'tokenizer',
75
+ ];
76
+
77
+ const {green, red, yellow} = stoneModePalettes;
78
+ for (const input of inputs) {
79
+ const component = stoneTheme.components![input];
80
+ expect(component['status:success']).toMatchObject({
81
+ '--color-border-success': `light-dark(${green.light[55]}, ${green.dark[70]})`,
82
+ '--color-icon-success': `light-dark(${green.light[55]}, ${green.dark[70]})`,
83
+ });
84
+ expect(component['status:warning']).toMatchObject({
85
+ '--color-border-warning': `light-dark(${yellow.light[55]}, ${yellow.dark[70]})`,
86
+ '--color-icon-warning': `light-dark(${yellow.light[55]}, ${yellow.dark[70]})`,
87
+ });
88
+ expect(component['status:error']).toMatchObject({
89
+ '--color-border-error': `light-dark(${red.light[60]}, ${red.dark[70]})`,
90
+ '--color-icon-error': `light-dark(${red.light[60]}, ${red.dark[70]})`,
91
+ });
92
+ }
93
+ });
94
+ });
95
+
96
+ describe('stone strong status contrast', () => {
97
+ it('pairs strong status fills with contrasting light and dark ink', () => {
98
+ for (const token of [
99
+ '--color-on-success',
100
+ '--color-on-warning',
101
+ '--color-on-error',
102
+ ] as const) {
103
+ expect(stoneTheme.tokens[token]).toBe(
104
+ `light-dark(${stoneModePalettes.neutral.light[100]}, ${stoneModePalettes.neutral.dark[10]})`,
105
+ );
106
+ }
107
+ });
108
+
109
+ it('uses dark ink for marks on Stone’s pale progress fills', () => {
110
+ const mark = stoneTheme.components!['progress-bar-mark'];
111
+ for (const variant of ['accent', 'success', 'warning', 'error']) {
112
+ expect(mark[`placement:fill+variant:${variant}`]).toMatchObject({
113
+ backgroundColor: 'var(--color-on-light)',
114
+ });
115
+ }
116
+ });
117
+ });
118
+
63
119
  describe('stone secondary ComplexSelector', () => {
64
120
  it('keeps the hover fill off a disabled trigger in either form', () => {
65
121
  expect(generateThemeCSS(stoneTheme).component).toMatch(
@@ -147,10 +203,12 @@ describe('stone palette mapping', () => {
147
203
  }
148
204
 
149
205
  expect(stoneTheme.components?.['text-input']?.['status:success']).toEqual({
150
- '--color-success': `light-dark(${green.light[55]}, ${green.dark[70]})`,
206
+ '--color-border-success': `light-dark(${green.light[55]}, ${green.dark[70]})`,
207
+ '--color-icon-success': `light-dark(${green.light[55]}, ${green.dark[70]})`,
151
208
  });
152
209
  expect(stoneTheme.components?.['text-input']?.['status:warning']).toEqual({
153
- '--color-warning': `light-dark(${yellow.light[55]}, ${yellow.dark[70]})`,
210
+ '--color-border-warning': `light-dark(${yellow.light[55]}, ${yellow.dark[70]})`,
211
+ '--color-icon-warning': `light-dark(${yellow.light[55]}, ${yellow.dark[70]})`,
154
212
  });
155
213
  });
156
214
  });
package/src/stoneTheme.ts CHANGED
@@ -26,13 +26,16 @@ const withAlpha = (color: string, alpha: string): string => `${color}${alpha}`;
26
26
  */
27
27
  const INPUT_STATUS_VARS = {
28
28
  'status:success': {
29
- '--color-success': lightDark(green.light[55], green.dark[70]),
29
+ '--color-border-success': lightDark(green.light[55], green.dark[70]),
30
+ '--color-icon-success': lightDark(green.light[55], green.dark[70]),
30
31
  },
31
32
  'status:warning': {
32
- '--color-warning': lightDark(yellow.light[55], yellow.dark[70]),
33
+ '--color-border-warning': lightDark(yellow.light[55], yellow.dark[70]),
34
+ '--color-icon-warning': lightDark(yellow.light[55], yellow.dark[70]),
33
35
  },
34
36
  'status:error': {
35
- '--color-error': lightDark(red.light[60], red.dark[70]),
37
+ '--color-border-error': lightDark(red.light[60], red.dark[70]),
38
+ '--color-icon-error': lightDark(red.light[60], red.dark[70]),
36
39
  },
37
40
  } as const;
38
41
 
@@ -188,9 +191,22 @@ export const stoneTheme = defineTheme({
188
191
  '--color-on-dark': neutral.light[100],
189
192
  '--color-on-light': [neutral.light[15], neutral.dark[15]],
190
193
  '--color-on-accent': [neutral.light[100], neutral.dark[15]],
191
- '--color-on-success': [green.light[30], green.dark[90]],
192
- '--color-on-error': [red.light[30], red.dark[90]],
193
- '--color-on-warning': [yellow.light[30], yellow.dark[90]],
194
+ '--color-on-success': [neutral.light[100], neutral.dark[10]],
195
+ '--color-on-error': [neutral.light[100], neutral.dark[10]],
196
+ '--color-on-warning': [neutral.light[100], neutral.dark[10]],
197
+
198
+ '--color-info': [blue.light[40], blue.dark[70]],
199
+ '--color-info-muted': [blue.light[90], blue.dark[25]],
200
+ '--color-on-info': [neutral.light[100], neutral.dark[15]],
201
+
202
+ '--color-text-info': [blue.light[30], blue.dark[90]],
203
+ '--color-text-success': [green.light[30], green.dark[90]],
204
+ '--color-text-warning': [yellow.light[30], yellow.dark[90]],
205
+ '--color-text-error': [red.light[30], red.dark[90]],
206
+ '--color-on-info-muted': [blue.light[30], blue.dark[90]],
207
+ '--color-on-success-muted': [green.light[30], green.dark[25]],
208
+ '--color-on-warning-muted': [yellow.light[30], yellow.dark[25]],
209
+ '--color-on-error-muted': [red.light[30], red.dark[25]],
194
210
 
195
211
  // Icon
196
212
  '--color-icon-accent': [neutral.light[15], neutral.dark[95]],
@@ -336,32 +352,23 @@ export const stoneTheme = defineTheme({
336
352
  },
337
353
  },
338
354
 
339
- // Banner surface declarations live above the theme layer, so redirect the
340
- // semantic variables here instead of attempting a losing direct fill.
355
+ // Banner status surfaces and content use the matching categorical pair.
341
356
  banner: {
342
357
  'status:info': {
343
- '--color-accent-muted': 'var(--color-background-blue)',
344
- '--color-text-primary': 'var(--color-text-blue)',
345
- '--color-text-secondary': 'var(--color-text-blue)',
346
- '--color-accent': 'var(--color-text-blue)',
358
+ '--color-info-muted': 'var(--color-background-blue)',
359
+ '--color-on-info-muted': 'var(--color-text-blue)',
347
360
  },
348
361
  'status:success': {
349
362
  '--color-success-muted': 'var(--color-background-green)',
350
- '--color-text-primary': 'var(--color-text-green)',
351
- '--color-text-secondary': 'var(--color-text-green)',
352
- '--color-success': 'var(--color-text-green)',
363
+ '--color-on-success-muted': 'var(--color-text-green)',
353
364
  },
354
365
  'status:warning': {
355
366
  '--color-warning-muted': 'var(--color-background-yellow)',
356
- '--color-text-primary': 'var(--color-text-yellow)',
357
- '--color-text-secondary': 'var(--color-text-yellow)',
358
- '--color-warning': 'var(--color-text-yellow)',
367
+ '--color-on-warning-muted': 'var(--color-text-yellow)',
359
368
  },
360
369
  'status:error': {
361
370
  '--color-error-muted': 'var(--color-background-red)',
362
- '--color-text-primary': 'var(--color-text-red)',
363
- '--color-text-secondary': 'var(--color-text-red)',
364
- '--color-error': 'var(--color-text-red)',
371
+ '--color-on-error-muted': 'var(--color-text-red)',
365
372
  },
366
373
  },
367
374
 
@@ -382,6 +389,21 @@ export const stoneTheme = defineTheme({
382
389
  },
383
390
  },
384
391
 
392
+ 'progress-bar-mark': {
393
+ 'placement:fill+variant:accent': {
394
+ backgroundColor: 'var(--color-on-light)',
395
+ },
396
+ 'placement:fill+variant:success': {
397
+ backgroundColor: 'var(--color-on-light)',
398
+ },
399
+ 'placement:fill+variant:warning': {
400
+ backgroundColor: 'var(--color-on-light)',
401
+ },
402
+ 'placement:fill+variant:error': {
403
+ backgroundColor: 'var(--color-on-light)',
404
+ },
405
+ },
406
+
385
407
  // The default muted track is too close to Stone's body surface.
386
408
  'progress-bar-track': {
387
409
  base: {
@@ -400,12 +422,15 @@ export const stoneTheme = defineTheme({
400
422
  'field-status': {
401
423
  'type:success': {
402
424
  backgroundColor: 'var(--color-background-green)',
425
+ color: 'var(--color-text-green)',
403
426
  },
404
427
  'type:warning': {
405
428
  backgroundColor: 'var(--color-background-yellow)',
429
+ color: 'var(--color-text-yellow)',
406
430
  },
407
431
  'type:error': {
408
432
  backgroundColor: 'var(--color-background-red)',
433
+ color: 'var(--color-text-red)',
409
434
  },
410
435
  },
411
436