@agentero/design-system 0.5.0 → 0.6.0
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.
- package/mcp/manifests/components.html +428 -2
- package/mcp/manifests/components.json +1 -1
- package/package.json +6 -1
- package/src/toast/icons.d.ts +36 -0
- package/src/toast/icons.js +45 -0
- package/src/toast/index.d.ts +2 -0
- package/src/toast/index.js +2 -0
- package/src/toast/toast.d.ts +324 -0
- package/src/toast/toast.js +163 -0
- package/theme/base.css +146 -8
package/theme/base.css
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
--color-neutrals-900: #242424;
|
|
75
75
|
--color-neutrals-1000: #000000;
|
|
76
76
|
|
|
77
|
-
/* Slate Scale
|
|
77
|
+
/* Slate Scale */
|
|
78
78
|
--color-slate-050: #f7f8fa;
|
|
79
79
|
--color-slate-100: #ebedf2;
|
|
80
80
|
--color-slate-200: #cfd2db;
|
|
@@ -217,10 +217,17 @@
|
|
|
217
217
|
--color-bg-default-base-tertiary: var(--color-slate-100);
|
|
218
218
|
--color-bg-default-base-tertiary-hover: var(--color-slate-300);
|
|
219
219
|
|
|
220
|
-
--color-bg-default-
|
|
221
|
-
--color-bg-default-
|
|
222
|
-
--color-bg-default-
|
|
223
|
-
--color-bg-default-
|
|
220
|
+
--color-bg-default-base-inverse-primary: var(--color-neutrals-1000);
|
|
221
|
+
--color-bg-default-base-inverse-primary-hover: var(--color-slate-800);
|
|
222
|
+
--color-bg-default-base-inverse-secondary: var(--color-slate-800);
|
|
223
|
+
--color-bg-default-base-inverse-secondary-hover: var(--color-slate-600);
|
|
224
|
+
--color-bg-default-base-inverse-tertiary: var(--color-slate-700);
|
|
225
|
+
--color-bg-default-base-inverse-tertiary-hover: var(--color-slate-500);
|
|
226
|
+
|
|
227
|
+
--color-bg-default-neutral-primary: var(--color-neutrals-000);
|
|
228
|
+
--color-bg-default-neutral-primary-hover: var(--color-neutrals-050);
|
|
229
|
+
--color-bg-default-neutral-secondary: var(--color-neutrals-050);
|
|
230
|
+
--color-bg-default-neutral-secondary-hover: var(--color-neutrals-100);
|
|
224
231
|
--color-bg-default-neutral-tertiary: var(--color-neutrals-200);
|
|
225
232
|
--color-bg-default-neutral-tertiary-hover: var(--color-neutrals-300);
|
|
226
233
|
|
|
@@ -252,7 +259,35 @@
|
|
|
252
259
|
--color-bg-default-warning-tertiary: var(--color-warning-050);
|
|
253
260
|
--color-bg-default-warning-tertiary-hover: var(--color-warning-100);
|
|
254
261
|
|
|
255
|
-
--color-bg-default-
|
|
262
|
+
--color-bg-default-info-primary: var(--color-blue-600);
|
|
263
|
+
--color-bg-default-info-primary-hover: var(--color-blue-700);
|
|
264
|
+
--color-bg-default-info-secondary: var(--color-blue-200);
|
|
265
|
+
--color-bg-default-info-secondary-hover: var(--color-blue-300);
|
|
266
|
+
--color-bg-default-info-tertiary: var(--color-blue-050);
|
|
267
|
+
--color-bg-default-info-tertiary-hover: var(--color-blue-100);
|
|
268
|
+
|
|
269
|
+
--color-bg-default-creative-primary: var(--color-purple-500);
|
|
270
|
+
--color-bg-default-creative-primary-hover: var(--color-purple-600);
|
|
271
|
+
--color-bg-default-creative-secondary: var(--color-purple-200);
|
|
272
|
+
--color-bg-default-creative-secondary-hover: var(--color-purple-300);
|
|
273
|
+
--color-bg-default-creative-tertiary: var(--color-purple-050);
|
|
274
|
+
--color-bg-default-creative-tertiary-hover: var(--color-purple-100);
|
|
275
|
+
|
|
276
|
+
--color-bg-default-dynamic-primary: var(--color-orange-500);
|
|
277
|
+
--color-bg-default-dynamic-primary-hover: var(--color-orange-600);
|
|
278
|
+
--color-bg-default-dynamic-secondary: var(--color-orange-200);
|
|
279
|
+
--color-bg-default-dynamic-secondary-hover: var(--color-orange-300);
|
|
280
|
+
--color-bg-default-dynamic-tertiary: var(--color-orange-050);
|
|
281
|
+
--color-bg-default-dynamic-tertiary-hover: var(--color-orange-100);
|
|
282
|
+
|
|
283
|
+
--color-bg-default-playful-primary: var(--color-pink-500);
|
|
284
|
+
--color-bg-default-playful-primary-hover: var(--color-pink-600);
|
|
285
|
+
--color-bg-default-playful-secondary: var(--color-pink-200);
|
|
286
|
+
--color-bg-default-playful-secondary-hover: var(--color-pink-300);
|
|
287
|
+
--color-bg-default-playful-tertiary: var(--color-pink-050);
|
|
288
|
+
--color-bg-default-playful-tertiary-hover: var(--color-pink-100);
|
|
289
|
+
|
|
290
|
+
--color-bg-default-disable-primary: var(--color-slate-050);
|
|
256
291
|
|
|
257
292
|
/* Input Backgrounds */
|
|
258
293
|
--color-bg-input-normal: var(--color-neutrals-000);
|
|
@@ -287,6 +322,9 @@
|
|
|
287
322
|
--color-bg-button-ghost-destructive-hover: var(--color-danger-050);
|
|
288
323
|
--color-bg-button-ghost-destructive-disable: var(--color-neutrals-000);
|
|
289
324
|
|
|
325
|
+
--color-bg-button-brand-enable: var(--color-brand-600);
|
|
326
|
+
--color-bg-button-brand-hover: var(--color-brand-700);
|
|
327
|
+
|
|
290
328
|
/* Border Tokens */
|
|
291
329
|
--color-border-input-default: var(--color-slate-200);
|
|
292
330
|
--color-border-input-hover: var(--color-slate-400);
|
|
@@ -305,7 +343,9 @@
|
|
|
305
343
|
--color-border-default-base-primary: var(--color-slate-100);
|
|
306
344
|
--color-border-default-base-secondary: var(--color-slate-200);
|
|
307
345
|
--color-border-default-base-tertiary: var(--color-slate-300);
|
|
346
|
+
--color-border-default-base-inverse-primary: var(--color-slate-800);
|
|
308
347
|
--color-border-default-base-inverse-secondary: var(--color-slate-700);
|
|
348
|
+
--color-border-default-base-inverse-tertiary: var(--color-slate-600);
|
|
309
349
|
|
|
310
350
|
--color-border-default-neutral-primary: var(--color-neutrals-100);
|
|
311
351
|
--color-border-default-neutral-secondary: var(--color-neutrals-200);
|
|
@@ -327,6 +367,22 @@
|
|
|
327
367
|
--color-border-default-warning-secondary: var(--color-warning-600);
|
|
328
368
|
--color-border-default-warning-tertiary: var(--color-warning-500);
|
|
329
369
|
|
|
370
|
+
--color-border-default-info-primary: var(--color-blue-700);
|
|
371
|
+
--color-border-default-info-secondary: var(--color-blue-600);
|
|
372
|
+
--color-border-default-info-tertiary: var(--color-blue-500);
|
|
373
|
+
|
|
374
|
+
--color-border-default-creative-primary: var(--color-purple-600);
|
|
375
|
+
--color-border-default-creative-secondary: var(--color-purple-600);
|
|
376
|
+
--color-border-default-creative-tertiary: var(--color-purple-500);
|
|
377
|
+
|
|
378
|
+
--color-border-default-dynamic-primary: var(--color-orange-600);
|
|
379
|
+
--color-border-default-dynamic-secondary: var(--color-orange-600);
|
|
380
|
+
--color-border-default-dynamic-tertiary: var(--color-orange-500);
|
|
381
|
+
|
|
382
|
+
--color-border-default-playful-primary: var(--color-pink-600);
|
|
383
|
+
--color-border-default-playful-secondary: var(--color-pink-600);
|
|
384
|
+
--color-border-default-playful-tertiary: var(--color-pink-500);
|
|
385
|
+
|
|
330
386
|
--color-border-default-disable-primary: var(--color-slate-100);
|
|
331
387
|
|
|
332
388
|
/* Text Tokens */
|
|
@@ -357,10 +413,14 @@
|
|
|
357
413
|
|
|
358
414
|
--color-text-button-link-enable: var(--color-slate-800);
|
|
359
415
|
--color-text-button-link-disable: var(--color-slate-300);
|
|
416
|
+
--color-text-button-link-color-enable: var(--color-brand-600);
|
|
417
|
+
--color-text-button-link-color-hover: var(--color-brand-700);
|
|
360
418
|
--color-text-button-link-destructive-enable: var(--color-danger-500);
|
|
361
419
|
--color-text-button-link-destructive-hover: var(--color-danger-600);
|
|
362
420
|
--color-text-button-link-destructive-disable: var(--color-danger-200);
|
|
363
421
|
|
|
422
|
+
--color-text-button-brand-enable: var(--color-neutrals-000);
|
|
423
|
+
|
|
364
424
|
--color-text-default-base-primary: var(--color-slate-900);
|
|
365
425
|
--color-text-default-base-secondary: var(--color-slate-700);
|
|
366
426
|
--color-text-default-base-tertiary: var(--color-slate-500);
|
|
@@ -368,6 +428,7 @@
|
|
|
368
428
|
--color-text-default-base-on-base-primary: var(--color-slate-800);
|
|
369
429
|
--color-text-default-base-on-base-secondary: var(--color-slate-700);
|
|
370
430
|
--color-text-default-base-on-base-tertiary: var(--color-slate-800);
|
|
431
|
+
--color-text-default-base-on-base-inverse-primary: var(--color-neutrals-000);
|
|
371
432
|
|
|
372
433
|
--color-text-default-neutral-primary: var(--color-neutrals-1000);
|
|
373
434
|
--color-text-default-neutral-secondary: var(--color-neutrals-700);
|
|
@@ -404,6 +465,34 @@
|
|
|
404
465
|
--color-text-default-warning-on-warning-secondary: var(--color-warning-800);
|
|
405
466
|
--color-text-default-warning-on-warning-tertiary: var(--color-warning-800);
|
|
406
467
|
|
|
468
|
+
--color-text-default-info-primary: var(--color-blue-500);
|
|
469
|
+
--color-text-default-info-secondary: var(--color-blue-700);
|
|
470
|
+
--color-text-default-info-tertiary: var(--color-blue-800);
|
|
471
|
+
--color-text-default-info-on-info-primary: var(--color-neutrals-000);
|
|
472
|
+
--color-text-default-info-on-info-secondary: var(--color-blue-800);
|
|
473
|
+
--color-text-default-info-on-info-tertiary: var(--color-blue-800);
|
|
474
|
+
|
|
475
|
+
--color-text-default-creative-primary: var(--color-purple-500);
|
|
476
|
+
--color-text-default-creative-secondary: var(--color-purple-700);
|
|
477
|
+
--color-text-default-creative-tertiary: var(--color-purple-800);
|
|
478
|
+
--color-text-default-creative-on-warning-primary: var(--color-purple-800);
|
|
479
|
+
--color-text-default-creative-on-warning-secondary: var(--color-purple-800);
|
|
480
|
+
--color-text-default-creative-on-warning-tertiary: var(--color-purple-800);
|
|
481
|
+
|
|
482
|
+
--color-text-default-dynamic-primary: var(--color-orange-500);
|
|
483
|
+
--color-text-default-dynamic-secondary: var(--color-orange-700);
|
|
484
|
+
--color-text-default-dynamic-tertiary: var(--color-orange-800);
|
|
485
|
+
--color-text-default-dynamic-on-warning-primary: var(--color-orange-800);
|
|
486
|
+
--color-text-default-dynamic-on-warning-secondary: var(--color-orange-800);
|
|
487
|
+
--color-text-default-dynamic-on-warning-tertiary: var(--color-orange-800);
|
|
488
|
+
|
|
489
|
+
--color-text-default-playful-primary: var(--color-pink-500);
|
|
490
|
+
--color-text-default-playful-secondary: var(--color-pink-700);
|
|
491
|
+
--color-text-default-playful-tertiary: var(--color-pink-800);
|
|
492
|
+
--color-text-default-playful-on-warning-primary: var(--color-pink-800);
|
|
493
|
+
--color-text-default-playful-on-warning-secondary: var(--color-pink-800);
|
|
494
|
+
--color-text-default-playful-on-warning-tertiary: var(--color-pink-800);
|
|
495
|
+
|
|
407
496
|
--color-text-default-disable-primary: var(--color-slate-200);
|
|
408
497
|
--color-text-default-disable-on-disable-primary: var(--color-slate-200);
|
|
409
498
|
|
|
@@ -433,16 +522,22 @@
|
|
|
433
522
|
|
|
434
523
|
--color-icon-button-link-enable: var(--color-slate-800);
|
|
435
524
|
--color-icon-button-link-disable: var(--color-slate-300);
|
|
525
|
+
--color-icon-button-link-color-enable: var(--color-brand-600);
|
|
526
|
+
--color-icon-button-link-color-hover: var(--color-brand-700);
|
|
436
527
|
--color-icon-button-link-destructive-enable: var(--color-danger-500);
|
|
437
528
|
--color-icon-button-link-destructive-hover: var(--color-danger-600);
|
|
438
529
|
--color-icon-button-link-destructive-disable: var(--color-danger-200);
|
|
439
530
|
|
|
531
|
+
--color-icon-button-brand-enable: var(--color-neutrals-000);
|
|
532
|
+
|
|
440
533
|
--color-icon-default-base-primary: var(--color-slate-900);
|
|
441
534
|
--color-icon-default-base-secondary: var(--color-slate-700);
|
|
442
535
|
--color-icon-default-base-tertiary: var(--color-slate-500);
|
|
536
|
+
--color-icon-default-base-inverse-primary: var(--color-neutrals-000);
|
|
443
537
|
--color-icon-default-base-on-base-primary: var(--color-slate-800);
|
|
444
538
|
--color-icon-default-base-on-base-secondary: var(--color-slate-700);
|
|
445
539
|
--color-icon-default-base-on-base-tertiary: var(--color-slate-800);
|
|
540
|
+
--color-icon-default-base-on-base-inverse-primary: var(--color-neutrals-000);
|
|
446
541
|
|
|
447
542
|
--color-icon-default-neutral-primary: var(--color-neutrals-1000);
|
|
448
543
|
--color-icon-default-neutral-secondary: var(--color-neutrals-700);
|
|
@@ -480,6 +575,32 @@
|
|
|
480
575
|
--color-icon-default-warning-on-warning-tertiary: var(--color-warning-800);
|
|
481
576
|
|
|
482
577
|
--color-icon-default-info-primary: var(--color-blue-500);
|
|
578
|
+
--color-icon-default-info-secondary: var(--color-blue-700);
|
|
579
|
+
--color-icon-default-info-tertiary: var(--color-blue-800);
|
|
580
|
+
--color-icon-default-info-on-warning-primary: var(--color-neutrals-000);
|
|
581
|
+
--color-icon-default-info-on-warning-secondary: var(--color-blue-800);
|
|
582
|
+
--color-icon-default-info-on-warning-tertiary: var(--color-blue-800);
|
|
583
|
+
|
|
584
|
+
--color-icon-default-creative-primary: var(--color-purple-500);
|
|
585
|
+
--color-icon-default-creative-secondary: var(--color-purple-700);
|
|
586
|
+
--color-icon-default-creative-tertiary: var(--color-purple-800);
|
|
587
|
+
--color-icon-default-creative-on-warning-primary: var(--color-purple-800);
|
|
588
|
+
--color-icon-default-creative-on-warning-secondary: var(--color-purple-800);
|
|
589
|
+
--color-icon-default-creative-on-warning-tertiary: var(--color-purple-800);
|
|
590
|
+
|
|
591
|
+
--color-icon-default-dynamic-primary: var(--color-orange-500);
|
|
592
|
+
--color-icon-default-dynamic-secondary: var(--color-orange-700);
|
|
593
|
+
--color-icon-default-dynamic-tertiary: var(--color-orange-800);
|
|
594
|
+
--color-icon-default-dynamic-on-warning-primary: var(--color-orange-800);
|
|
595
|
+
--color-icon-default-dynamic-on-warning-secondary: var(--color-orange-800);
|
|
596
|
+
--color-icon-default-dynamic-on-warning-tertiary: var(--color-orange-800);
|
|
597
|
+
|
|
598
|
+
--color-icon-default-playful-primary: var(--color-pink-500);
|
|
599
|
+
--color-icon-default-playful-secondary: var(--color-pink-700);
|
|
600
|
+
--color-icon-default-playful-tertiary: var(--color-pink-800);
|
|
601
|
+
--color-icon-default-playful-on-warning-primary: var(--color-pink-800);
|
|
602
|
+
--color-icon-default-playful-on-warning-secondary: var(--color-pink-800);
|
|
603
|
+
--color-icon-default-playful-on-warning-tertiary: var(--color-pink-800);
|
|
483
604
|
|
|
484
605
|
--color-icon-default-disable-primary: var(--color-slate-200);
|
|
485
606
|
--color-icon-default-disable-on-disable-primary: var(--color-slate-200);
|
|
@@ -506,7 +627,7 @@
|
|
|
506
627
|
--color-text-alert-primary-info: var(--color-blue-800);
|
|
507
628
|
--color-text-alert-primary-creative: var(--color-purple-800);
|
|
508
629
|
--color-text-alert-primary-dynamic: var(--color-orange-800);
|
|
509
|
-
--color-text-alert-primary-playful: var(--color-pink-
|
|
630
|
+
--color-text-alert-primary-playful: var(--color-pink-700);
|
|
510
631
|
|
|
511
632
|
/* Alert Text - Ghost */
|
|
512
633
|
--color-text-alert-ghost-neutral: var(--color-slate-800);
|
|
@@ -526,7 +647,7 @@
|
|
|
526
647
|
--color-icon-alert-primary-info: var(--color-blue-800);
|
|
527
648
|
--color-icon-alert-primary-creative: var(--color-purple-800);
|
|
528
649
|
--color-icon-alert-primary-dynamic: var(--color-orange-800);
|
|
529
|
-
--color-icon-alert-primary-playful: var(--color-pink-
|
|
650
|
+
--color-icon-alert-primary-playful: var(--color-pink-700);
|
|
530
651
|
|
|
531
652
|
/* Alert Icon - Ghost */
|
|
532
653
|
--color-icon-alert-ghost-neutral: var(--color-slate-800);
|
|
@@ -538,6 +659,21 @@
|
|
|
538
659
|
--color-icon-alert-ghost-dynamic: var(--color-orange-700);
|
|
539
660
|
--color-icon-alert-ghost-playful: var(--color-pink-600);
|
|
540
661
|
|
|
662
|
+
/* ========================================
|
|
663
|
+
* TOAST
|
|
664
|
+
* ======================================== */
|
|
665
|
+
|
|
666
|
+
/* Rail — colored left strip painted on expanded-layout toasts */
|
|
667
|
+
--color-rail-neutral: var(--color-neutrals-200);
|
|
668
|
+
--color-rail-success: var(--color-positive-500);
|
|
669
|
+
--color-rail-danger: var(--color-danger-500);
|
|
670
|
+
--color-rail-warning: var(--color-warning-500);
|
|
671
|
+
--color-rail-info: var(--color-blue-600);
|
|
672
|
+
|
|
673
|
+
/* Focus Ring */
|
|
674
|
+
--color-focus-ring-button-primary: var(--color-slate-800);
|
|
675
|
+
--color-focus-ring-button-destructive: var(--color-danger-500);
|
|
676
|
+
|
|
541
677
|
/* ========================================
|
|
542
678
|
* STATUS BALL
|
|
543
679
|
* ======================================== */
|
|
@@ -554,6 +690,8 @@
|
|
|
554
690
|
|
|
555
691
|
/* Focus Ring */
|
|
556
692
|
--color-focus-ring-button-primary: var(--color-slate-800);
|
|
693
|
+
--color-focus-ring-button-brand: var(--color-slate-800);
|
|
694
|
+
--color-focus-ring-button-positive: var(--color-positive-500);
|
|
557
695
|
--color-focus-ring-button-destructive: var(--color-danger-500);
|
|
558
696
|
|
|
559
697
|
/* ========================================
|