astryx-dracula 0.3.1 → 0.4.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.
Files changed (34) hide show
  1. package/USAGE.md +25 -0
  2. package/astryx-dracula.d.ts +2 -2
  3. package/astryx-dracula.js +384 -3
  4. package/astryx-dracula.variants.d.ts +2 -14
  5. package/icons.mjs +125 -0
  6. package/package.json +16 -8
  7. package/shared/revenue-chart.tsx +63 -7
  8. package/shared/settings-data.ts +43 -1
  9. package/shared/settings-rows.tsx +81 -30
  10. package/templates/ai-chat-landing.tsx +17 -9
  11. package/templates/ai-chat.tsx +2 -2
  12. package/templates/centered-hero.tsx +2 -2
  13. package/templates/contact-form.tsx +11 -10
  14. package/templates/dashboard.tsx +7 -3
  15. package/templates/detail-page.tsx +11 -4
  16. package/templates/documentation-design.tsx +43 -29
  17. package/templates/documentation-technical.tsx +11 -9
  18. package/templates/file-explorer.tsx +82 -70
  19. package/templates/form-two-column.tsx +1 -1
  20. package/templates/ide.tsx +6 -6
  21. package/templates/incident-console.tsx +27 -4
  22. package/templates/login-card.tsx +8 -5
  23. package/templates/login-split.tsx +21 -12
  24. package/templates/login-sso.tsx +57 -41
  25. package/templates/login.tsx +23 -20
  26. package/templates/payment-form.tsx +39 -45
  27. package/templates/product-detail.tsx +4 -6
  28. package/templates/product-tour.tsx +2 -2
  29. package/templates/settings-dialog.tsx +84 -87
  30. package/templates/settings-sidebar.tsx +92 -80
  31. package/templates/table-grouped.tsx +126 -29
  32. package/templates/table.tsx +21 -2
  33. package/templates/tech-report.tsx +1 -1
  34. package/theme.css +211 -119
package/theme.css CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: astryx-theme.ts
4
4
  * Command: astryx theme build astryx-theme.ts --out theme.css
5
- * CLI: @astryxdesign/cli@0.3.0
6
- * Core: @astryxdesign/core@0.3.0
5
+ * CLI: @astryxdesign/cli@0.6.3
6
+ * Core: @astryxdesign/core@0.6.3
7
7
  */
8
8
 
9
9
  @layer reset {
@@ -14,60 +14,60 @@
14
14
  }
15
15
 
16
16
  :where(h1) {
17
- font-size: var(--font-size-2xl);
18
- font-weight: var(--font-weight-normal);
19
- line-height: 1.3333;
17
+ font-size: var(--text-heading-1-size);
18
+ font-weight: var(--text-heading-1-weight);
19
+ line-height: var(--text-heading-1-leading);
20
20
  }
21
21
 
22
22
  :where(h2) {
23
- font-size: var(--font-size-xl);
24
- font-weight: var(--font-weight-normal);
25
- line-height: 1.4;
23
+ font-size: var(--text-heading-2-size);
24
+ font-weight: var(--text-heading-2-weight);
25
+ line-height: var(--text-heading-2-leading);
26
26
  }
27
27
 
28
28
  :where(h3) {
29
- font-size: var(--font-size-lg);
30
- font-weight: var(--font-weight-normal);
31
- line-height: 1.4118;
29
+ font-size: var(--text-heading-3-size);
30
+ font-weight: var(--text-heading-3-weight);
31
+ line-height: var(--text-heading-3-leading);
32
32
  }
33
33
 
34
34
  :where(h4) {
35
- font-size: var(--font-size-base);
36
- font-weight: var(--font-weight-normal);
37
- line-height: 1.4286;
35
+ font-size: var(--text-heading-4-size);
36
+ font-weight: var(--text-heading-4-weight);
37
+ line-height: var(--text-heading-4-leading);
38
38
  }
39
39
 
40
40
  :where(h5) {
41
- font-size: var(--font-size-sm);
42
- font-weight: var(--font-weight-normal);
43
- line-height: 1.6667;
41
+ font-size: var(--text-heading-5-size);
42
+ font-weight: var(--text-heading-5-weight);
43
+ line-height: var(--text-heading-5-leading);
44
44
  }
45
45
 
46
46
  :where(h6) {
47
- font-size: var(--font-size-xs);
48
- font-weight: var(--font-weight-normal);
49
- line-height: 1.6;
47
+ font-size: var(--text-heading-6-size);
48
+ font-weight: var(--text-heading-6-weight);
49
+ line-height: var(--text-heading-6-leading);
50
50
  }
51
51
 
52
52
  :where(p) {
53
53
  font-family: var(--font-family-body);
54
- font-size: var(--font-size-base);
55
- font-weight: var(--font-weight-normal);
56
- line-height: 1.4286;
54
+ font-size: var(--text-body-size);
55
+ font-weight: var(--text-body-weight);
56
+ line-height: var(--text-body-leading);
57
57
  color: var(--color-text-primary);
58
58
  }
59
59
 
60
60
  :where(small) {
61
- font-size: var(--font-size-sm);
62
- font-weight: var(--font-weight-normal);
63
- line-height: 1.6667;
61
+ font-size: var(--text-supporting-size);
62
+ font-weight: var(--text-supporting-weight);
63
+ line-height: var(--text-supporting-leading);
64
64
  color: var(--color-text-secondary);
65
65
  }
66
66
 
67
67
  :where(code, pre) {
68
68
  font-family: var(--font-family-code);
69
- font-size: var(--font-size-base);
70
- line-height: 1.4286;
69
+ font-size: var(--text-code-size);
70
+ line-height: var(--text-code-leading);
71
71
  }
72
72
 
73
73
  :where(hr) {
@@ -77,6 +77,67 @@
77
77
  }
78
78
  }
79
79
 
80
+ @layer astryx-base {
81
+ :root {
82
+ --color-data-categorical-blue: light-dark(#0171E3, #0171E3);
83
+ --color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
84
+ --color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
85
+ --color-data-categorical-green: light-dark(#0B991F, #0B991F);
86
+ --color-data-categorical-pink: light-dark(#F351C0, #F351C0);
87
+ --color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
88
+ --color-data-categorical-red: light-dark(#F5394F, #F5394F);
89
+ --color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
90
+ --color-data-categorical-brown: light-dark(#965E03, #965E03);
91
+ --color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
92
+ --color-data-neutral: light-dark(#8494A3, #8C939B);
93
+ --color-data-blue-5: light-dark(#02165E, #02165E);
94
+ --color-data-blue-4: light-dark(#004CBC, #004CBC);
95
+ --color-data-blue-3: light-dark(#2694FE, #2694FE);
96
+ --color-data-blue-2: light-dark(#78BEFF, #78BEFF);
97
+ --color-data-blue-1: light-dark(#DBECFF, #DBECFF);
98
+ --color-data-shamrock-5: light-dark(#0B603D, #0B603D);
99
+ --color-data-shamrock-4: light-dark(#138546, #138546);
100
+ --color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
101
+ --color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
102
+ --color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
103
+ --color-data-orange-5: light-dark(#A13F04, #A13F04);
104
+ --color-data-orange-4: light-dark(#D66100, #D66100);
105
+ --color-data-orange-3: light-dark(#FD9537, #FD9537);
106
+ --color-data-orange-2: light-dark(#FDB876, #FDB876);
107
+ --color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
108
+ --color-data-pink-5: light-dark(#8E1073, #8E1073);
109
+ --color-data-pink-4: light-dark(#D123A1, #D123A1);
110
+ --color-data-pink-3: light-dark(#F989D3, #F989D3);
111
+ --color-data-pink-2: light-dark(#FEADE3, #FEADE3);
112
+ --color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
113
+ --color-data-purple-5: light-dark(#3E0697, #3E0697);
114
+ --color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
115
+ --color-data-purple-3: light-dark(#9081FF, #9081FF);
116
+ --color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
117
+ --color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
118
+ --color-data-red-5: light-dark(#9D0519, #9D0519);
119
+ --color-data-red-4: light-dark(#D31130, #D31130);
120
+ --color-data-red-3: light-dark(#FB7D87, #FB7D87);
121
+ --color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
122
+ --color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
123
+ --color-data-teal-5: light-dark(#08767D, #08767D);
124
+ --color-data-teal-4: light-dark(#0C9293, #0C9293);
125
+ --color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
126
+ --color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
127
+ --color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
128
+ --color-data-yellow-5: light-dark(#8A5001, #8A5001);
129
+ --color-data-yellow-4: light-dark(#D69804, #D69804);
130
+ --color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
131
+ --color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
132
+ --color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
133
+ --color-data-gray-5: light-dark(#25363F, #333338);
134
+ --color-data-gray-4: light-dark(#5D6C7B, #666A72);
135
+ --color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
136
+ --color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
137
+ --color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
138
+ }
139
+ }
140
+
80
141
  @layer astryx-theme {
81
142
  :root { color-scheme: light dark; }
82
143
  html[data-theme="light"] { color-scheme: light; }
@@ -245,6 +306,8 @@
245
306
  --color-data-categorical-pink: light-dark(#FF79C6, #FF79C6);
246
307
  --color-data-categorical-cyan: light-dark(#8BE9FD, #8BE9FD);
247
308
  --color-data-categorical-red: light-dark(#FF5555, #FF5555);
309
+ --color-data-categorical-purple: light-dark(#BD93F9, #BD93F9);
310
+ --color-data-categorical-brown: light-dark(#FFB86C, #FFB86C);
248
311
  --color-data-categorical-teal: light-dark(#A4FFFF, #A4FFFF);
249
312
  --color-data-categorical-indigo: light-dark(#D6ACFF, #D6ACFF);
250
313
  --color-background-blue: light-dark(#6272A41A, #6272A41A);
@@ -362,118 +425,139 @@
362
425
  --color-tag-purple: light-dark(#BD93F9, #BD93F9);
363
426
  }
364
427
 
365
- .astryx-heading.level-1 {
428
+ :scope {
429
+ font-family: var(--font-family-body);
430
+ }
431
+
432
+ .astryx-heading[data-level="1"] {
366
433
  font-family: var(--font-family-heading);
367
434
  font-size: var(--text-heading-1-size);
368
435
  font-weight: var(--text-heading-1-weight);
369
436
  line-height: var(--text-heading-1-leading);
370
437
  }
371
438
 
372
- .astryx-heading.level-2 {
439
+ .astryx-heading[data-level="2"] {
373
440
  font-family: var(--font-family-heading);
374
441
  font-size: var(--text-heading-2-size);
375
442
  font-weight: var(--text-heading-2-weight);
376
443
  line-height: var(--text-heading-2-leading);
377
444
  }
378
445
 
379
- .astryx-heading.level-3 {
446
+ .astryx-heading[data-level="3"] {
380
447
  font-family: var(--font-family-heading);
381
448
  font-size: var(--text-heading-3-size);
382
449
  font-weight: var(--text-heading-3-weight);
383
450
  line-height: var(--text-heading-3-leading);
384
451
  }
385
452
 
386
- .astryx-heading.level-4 {
453
+ .astryx-heading[data-level="4"] {
387
454
  font-family: var(--font-family-heading);
388
455
  font-size: var(--text-heading-4-size);
389
456
  font-weight: var(--text-heading-4-weight);
390
457
  line-height: var(--text-heading-4-leading);
391
458
  }
392
459
 
393
- .astryx-heading.level-5 {
460
+ .astryx-heading[data-level="5"] {
394
461
  font-family: var(--font-family-heading);
395
462
  font-size: var(--text-heading-5-size);
396
463
  font-weight: var(--text-heading-5-weight);
397
464
  line-height: var(--text-heading-5-leading);
398
465
  }
399
466
 
400
- .astryx-heading.level-6 {
467
+ .astryx-heading[data-level="6"] {
401
468
  font-family: var(--font-family-heading);
402
469
  font-size: var(--text-heading-6-size);
403
470
  font-weight: var(--text-heading-6-weight);
404
471
  line-height: var(--text-heading-6-leading);
405
472
  }
406
473
 
407
- .astryx-text.body {
474
+ .astryx-heading[data-type="display-1"] {
475
+ font-family: var(--font-family-heading);
476
+ font-size: var(--text-display-1-size);
477
+ line-height: var(--text-display-1-leading);
478
+ }
479
+
480
+ .astryx-heading[data-type="display-2"] {
481
+ font-family: var(--font-family-heading);
482
+ font-size: var(--text-display-2-size);
483
+ line-height: var(--text-display-2-leading);
484
+ }
485
+
486
+ .astryx-heading[data-type="display-3"] {
487
+ font-family: var(--font-family-heading);
488
+ font-size: var(--text-display-3-size);
489
+ line-height: var(--text-display-3-leading);
490
+ }
491
+
492
+ .astryx-text[data-type="body"] {
408
493
  font-family: var(--font-family-body);
409
494
  font-size: var(--text-body-size);
410
495
  line-height: var(--text-body-leading);
411
496
  }
412
497
 
413
- .astryx-text.large {
498
+ .astryx-text[data-type="large"] {
414
499
  font-family: var(--font-family-body);
415
500
  font-size: var(--text-large-size);
416
501
  line-height: var(--text-large-leading);
417
502
  }
418
503
 
419
- .astryx-text.label {
504
+ .astryx-text[data-type="label"] {
420
505
  font-family: var(--font-family-body);
421
506
  font-size: var(--text-label-size);
422
507
  line-height: var(--text-label-leading);
423
508
  }
424
509
 
425
- .astryx-text.code {
510
+ .astryx-text[data-type="code"] {
426
511
  font-family: var(--font-family-code);
427
512
  font-size: var(--text-code-size);
428
513
  line-height: var(--text-code-leading);
429
514
  }
430
515
 
431
- .astryx-text.supporting {
516
+ .astryx-text[data-type="supporting"] {
432
517
  font-family: var(--font-family-body);
433
518
  font-size: var(--text-supporting-size);
434
519
  line-height: var(--text-supporting-leading);
435
520
  }
436
521
 
437
- .astryx-text.display-1 {
522
+ .astryx-text[data-type="display-1"] {
438
523
  font-family: var(--font-family-heading);
439
524
  font-size: var(--text-display-1-size);
440
525
  line-height: var(--text-display-1-leading);
441
526
  }
442
527
 
443
- .astryx-text.display-2 {
528
+ .astryx-text[data-type="display-2"] {
444
529
  font-family: var(--font-family-heading);
445
530
  font-size: var(--text-display-2-size);
446
531
  line-height: var(--text-display-2-leading);
447
532
  }
448
533
 
449
- .astryx-text.display-3 {
534
+ .astryx-text[data-type="display-3"] {
450
535
  font-family: var(--font-family-heading);
451
536
  font-size: var(--text-display-3-size);
452
537
  line-height: var(--text-display-3-leading);
453
538
  }
454
539
 
455
- .astryx-app-shell.wash {
540
+ .astryx-app-shell[data-variant="wash"] {
456
541
  background-color: var(--color-background-body);
457
542
  }
458
543
 
459
- .astryx-app-shell.elevated {
544
+ .astryx-app-shell[data-variant="elevated"] {
460
545
  background-color: var(--color-background-body);
461
546
  }
462
547
 
463
- .astryx-app-shell.surface {
548
+ .astryx-app-shell[data-variant="surface"] {
464
549
  background-color: var(--color-background-surface);
465
550
  }
466
551
 
467
- .astryx-app-shell.section {
552
+ .astryx-app-shell[data-variant="section"] {
468
553
  background-color: var(--color-background-surface);
469
554
  }
470
555
 
471
556
  .astryx-link {
472
557
  color: var(--color-text-accent);
473
- text-decoration: underline;
474
558
  }
475
559
 
476
- .astryx-link:hover {
560
+ .astryx-link:hover:where(:not(:disabled,[aria-disabled="true"])) {
477
561
  color: var(--color-text-highlight);
478
562
  }
479
563
 
@@ -498,159 +582,159 @@
498
582
  --_banner-radius: var(--border-radius);
499
583
  }
500
584
 
501
- .astryx-banner.info {
585
+ .astryx-banner[data-status="info"] {
502
586
  --color-accent-muted: var(--color-background-cyan);
503
587
  border-color: var(--color-info);
504
588
  }
505
589
 
506
- .astryx-banner.success {
590
+ .astryx-banner[data-status="success"] {
507
591
  --color-success-muted: var(--color-background-green);
508
592
  border-color: var(--color-success);
509
593
  }
510
594
 
511
- .astryx-banner.warning {
595
+ .astryx-banner[data-status="warning"] {
512
596
  --color-warning-muted: var(--color-background-yellow);
513
597
  border-color: var(--color-warning);
514
598
  }
515
599
 
516
- .astryx-banner.error {
600
+ .astryx-banner[data-status="error"] {
517
601
  --color-error-muted: var(--color-background-red);
518
602
  border-color: var(--color-error);
519
603
  }
520
604
 
521
- .astryx-statusdot.info {
605
+ .astryx-statusdot[data-variant="info"] {
522
606
  background-color: #8BE9FD;
523
607
  }
524
608
 
525
- .astryx-progressbar-fill.accent {
609
+ .astryx-progressbar-fill[data-variant="accent"] {
526
610
  background-color: #BD93F9;
527
611
  }
528
612
 
529
- .astryx-progressbar-fill.success {
613
+ .astryx-progressbar-fill[data-variant="success"] {
530
614
  background-color: #50FA7B;
531
615
  }
532
616
 
533
- .astryx-progressbar-fill.warning {
617
+ .astryx-progressbar-fill[data-variant="warning"] {
534
618
  background-color: #F1FA8C;
535
619
  }
536
620
 
537
- .astryx-progressbar-fill.error {
621
+ .astryx-progressbar-fill[data-variant="error"] {
538
622
  background-color: #FF5555;
539
623
  }
540
624
 
541
- .astryx-progressbar-fill.neutral {
625
+ .astryx-progressbar-fill[data-variant="neutral"] {
542
626
  background-color: var(--color-progress-value);
543
627
  }
544
628
 
545
- .astryx-progressbar-fill.disabled {
629
+ .astryx-progressbar-fill[data-variant="disabled"] {
546
630
  background-color: var(--color-progress-value);
547
631
  }
548
632
 
549
- .astryx-text-input.success {
633
+ .astryx-text-input[data-status="success"] {
550
634
  --color-success: #50FA7B;
551
635
  }
552
636
 
553
- .astryx-text-input.warning {
637
+ .astryx-text-input[data-status="warning"] {
554
638
  --color-warning: #F1FA8C;
555
639
  }
556
640
 
557
- .astryx-text-input.error {
641
+ .astryx-text-input[data-status="error"] {
558
642
  --color-error: #FF5555;
559
643
  }
560
644
 
561
- .astryx-textarea.success {
645
+ .astryx-textarea[data-status="success"] {
562
646
  --color-success: #50FA7B;
563
647
  }
564
648
 
565
- .astryx-textarea.warning {
649
+ .astryx-textarea[data-status="warning"] {
566
650
  --color-warning: #F1FA8C;
567
651
  }
568
652
 
569
- .astryx-textarea.error {
653
+ .astryx-textarea[data-status="error"] {
570
654
  --color-error: #FF5555;
571
655
  }
572
656
 
573
- .astryx-number-input.success {
657
+ .astryx-number-input[data-status="success"] {
574
658
  --color-success: #50FA7B;
575
659
  }
576
660
 
577
- .astryx-number-input.warning {
661
+ .astryx-number-input[data-status="warning"] {
578
662
  --color-warning: #F1FA8C;
579
663
  }
580
664
 
581
- .astryx-number-input.error {
665
+ .astryx-number-input[data-status="error"] {
582
666
  --color-error: #FF5555;
583
667
  }
584
668
 
585
- .astryx-date-input.success {
669
+ .astryx-date-input[data-status="success"] {
586
670
  --color-success: #50FA7B;
587
671
  }
588
672
 
589
- .astryx-date-input.warning {
673
+ .astryx-date-input[data-status="warning"] {
590
674
  --color-warning: #F1FA8C;
591
675
  }
592
676
 
593
- .astryx-date-input.error {
677
+ .astryx-date-input[data-status="error"] {
594
678
  --color-error: #FF5555;
595
679
  }
596
680
 
597
- .astryx-time-input.success {
681
+ .astryx-time-input[data-status="success"] {
598
682
  --color-success: #50FA7B;
599
683
  }
600
684
 
601
- .astryx-time-input.warning {
685
+ .astryx-time-input[data-status="warning"] {
602
686
  --color-warning: #F1FA8C;
603
687
  }
604
688
 
605
- .astryx-time-input.error {
689
+ .astryx-time-input[data-status="error"] {
606
690
  --color-error: #FF5555;
607
691
  }
608
692
 
609
- .astryx-selector.success {
693
+ .astryx-selector[data-status="success"] {
610
694
  --color-success: #50FA7B;
611
695
  }
612
696
 
613
- .astryx-selector.warning {
697
+ .astryx-selector[data-status="warning"] {
614
698
  --color-warning: #F1FA8C;
615
699
  }
616
700
 
617
- .astryx-selector.error {
701
+ .astryx-selector[data-status="error"] {
618
702
  --color-error: #FF5555;
619
703
  }
620
704
 
621
- .astryx-multi-selector.success {
705
+ .astryx-multi-selector[data-status="success"] {
622
706
  --color-success: #50FA7B;
623
707
  }
624
708
 
625
- .astryx-multi-selector.warning {
709
+ .astryx-multi-selector[data-status="warning"] {
626
710
  --color-warning: #F1FA8C;
627
711
  }
628
712
 
629
- .astryx-multi-selector.error {
713
+ .astryx-multi-selector[data-status="error"] {
630
714
  --color-error: #FF5555;
631
715
  }
632
716
 
633
- .astryx-typeahead.success {
717
+ .astryx-typeahead[data-status="success"] {
634
718
  --color-success: #50FA7B;
635
719
  }
636
720
 
637
- .astryx-typeahead.warning {
721
+ .astryx-typeahead[data-status="warning"] {
638
722
  --color-warning: #F1FA8C;
639
723
  }
640
724
 
641
- .astryx-typeahead.error {
725
+ .astryx-typeahead[data-status="error"] {
642
726
  --color-error: #FF5555;
643
727
  }
644
728
 
645
- .astryx-tokenizer.success {
729
+ .astryx-tokenizer[data-status="success"] {
646
730
  --color-success: #50FA7B;
647
731
  }
648
732
 
649
- .astryx-tokenizer.warning {
733
+ .astryx-tokenizer[data-status="warning"] {
650
734
  --color-warning: #F1FA8C;
651
735
  }
652
736
 
653
- .astryx-tokenizer.error {
737
+ .astryx-tokenizer[data-status="error"] {
654
738
  --color-error: #FF5555;
655
739
  }
656
740
 
@@ -658,25 +742,25 @@
658
742
  --color-background-gray: var(--color-skeleton);
659
743
  }
660
744
 
661
- .astryx-toast.info {
745
+ .astryx-toast[data-type="info"] {
662
746
  background-color: var(--color-background-inverted);
663
747
  color: var(--color-on-light);
664
748
  }
665
749
 
666
- .astryx-toast.error {
750
+ .astryx-toast[data-type="error"] {
667
751
  background-color: var(--color-background-error-inverted);
668
752
  color: var(--color-on-light);
669
753
  }
670
754
 
671
- .astryx-field-status.success {
755
+ .astryx-field-status[data-type="success"] {
672
756
  background-color: var(--color-background-green);
673
757
  }
674
758
 
675
- .astryx-field-status.warning {
759
+ .astryx-field-status[data-type="warning"] {
676
760
  background-color: var(--color-background-yellow);
677
761
  }
678
762
 
679
- .astryx-field-status.error {
763
+ .astryx-field-status[data-type="error"] {
680
764
  background-color: var(--color-background-red);
681
765
  }
682
766
 
@@ -690,65 +774,73 @@
690
774
  background-color: var(--color-background-popover);
691
775
  }
692
776
 
693
- .astryx-avatar-status-dot.success {
777
+ .astryx-avatar-status-dot[data-variant="success"] {
694
778
  color: var(--color-on-success);
695
779
  }
696
780
 
697
- .astryx-avatar-status-dot.error {
781
+ .astryx-avatar-status-dot[data-variant="error"] {
698
782
  color: var(--color-on-error);
699
783
  }
700
784
 
701
- .astryx-text.primary { color: var(--color-text-primary); }
785
+ .astryx-text[data-color="primary"] { color: var(--color-text-primary); }
786
+
787
+ .astryx-heading[data-color="primary"] { color: var(--color-text-primary); }
788
+
789
+ .astryx-link[data-color="primary"] { color: var(--color-text-primary); }
790
+
791
+ .astryx-text[data-color="secondary"] { color: var(--color-text-secondary); }
792
+
793
+ .astryx-heading[data-color="secondary"] { color: var(--color-text-secondary); }
702
794
 
703
- .astryx-heading.primary { color: var(--color-text-primary); }
795
+ .astryx-link[data-color="secondary"] { color: var(--color-text-secondary); }
704
796
 
705
- .astryx-link.primary { color: var(--color-text-primary); }
797
+ .astryx-text[data-color="disabled"] { color: var(--color-text-disabled); }
706
798
 
707
- .astryx-text.secondary { color: var(--color-text-secondary); }
799
+ .astryx-heading[data-color="disabled"] { color: var(--color-text-disabled); }
708
800
 
709
- .astryx-heading.secondary { color: var(--color-text-secondary); }
801
+ .astryx-link[data-color="disabled"] { color: var(--color-text-disabled); }
710
802
 
711
- .astryx-link.secondary { color: var(--color-text-secondary); }
803
+ .astryx-text[data-color="placeholder"] { color: var(--color-text-secondary); }
712
804
 
713
- .astryx-text.disabled { color: var(--color-text-disabled); }
805
+ .astryx-heading[data-color="placeholder"] { color: var(--color-text-secondary); }
714
806
 
715
- .astryx-heading.disabled { color: var(--color-text-disabled); }
807
+ .astryx-link[data-color="placeholder"] { color: var(--color-text-secondary); }
716
808
 
717
- .astryx-link.disabled { color: var(--color-text-disabled); }
809
+ .astryx-text[data-color="accent"] { color: var(--color-text-accent); }
718
810
 
719
- .astryx-text.placeholder { color: var(--color-text-secondary); }
811
+ .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }
720
812
 
721
- .astryx-heading.placeholder { color: var(--color-text-secondary); }
813
+ .astryx-link[data-color="accent"] { color: var(--color-text-accent); }
722
814
 
723
- .astryx-link.placeholder { color: var(--color-text-secondary); }
815
+ .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }
724
816
 
725
- .astryx-text.accent { color: var(--color-text-accent); }
817
+ .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }
726
818
 
727
- .astryx-heading.accent { color: var(--color-text-accent); }
819
+ .astryx-text[data-size="2xs"] { font-size: var(--font-size-2xs); }
728
820
 
729
- .astryx-link.accent { color: var(--color-text-accent); }
821
+ .astryx-text[data-size="xsm"] { font-size: var(--font-size-xs); }
730
822
 
731
- .astryx-text.size-4xs { font-size: var(--font-size-4xs); }
823
+ .astryx-text[data-size="sm"] { font-size: var(--font-size-sm); }
732
824
 
733
- .astryx-text.size-3xs { font-size: var(--font-size-3xs); }
825
+ .astryx-text[data-size="base"] { font-size: var(--font-size-base); }
734
826
 
735
- .astryx-text.size-2xs { font-size: var(--font-size-2xs); }
827
+ .astryx-text[data-size="lg"] { font-size: var(--font-size-lg); }
736
828
 
737
- .astryx-text.xsm { font-size: var(--font-size-xs); }
829
+ .astryx-text[data-size="xl"] { font-size: var(--font-size-xl); }
738
830
 
739
- .astryx-text.sm { font-size: var(--font-size-sm); }
831
+ .astryx-text[data-size="2xl"] { font-size: var(--font-size-2xl); }
740
832
 
741
- .astryx-text.base { font-size: var(--font-size-base); }
833
+ .astryx-text[data-size="3xl"] { font-size: var(--font-size-3xl); }
742
834
 
743
- .astryx-text.lg { font-size: var(--font-size-lg); }
835
+ .astryx-text[data-size="4xl"] { font-size: var(--font-size-4xl); }
744
836
 
745
- .astryx-text.xl { font-size: var(--font-size-xl); }
837
+ .astryx-heading[data-weight="normal"] { font-weight: var(--font-weight-normal); }
746
838
 
747
- .astryx-text.size-2xl { font-size: var(--font-size-2xl); }
839
+ .astryx-heading[data-weight="medium"] { font-weight: var(--font-weight-medium); }
748
840
 
749
- .astryx-text.size-3xl { font-size: var(--font-size-3xl); }
841
+ .astryx-heading[data-weight="semibold"] { font-weight: var(--font-weight-semibold); }
750
842
 
751
- .astryx-text.size-4xl { font-size: var(--font-size-4xl); }
843
+ .astryx-heading[data-weight="bold"] { font-weight: var(--font-weight-bold); }
752
844
  }
753
845
  }
754
846