@acorex/styles 19.10.0-next.0 → 19.10.0-next.1

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/index.css CHANGED
@@ -357,12 +357,14 @@ Make elements with the HTML hidden attribute stay hidden by default.
357
357
 
358
358
  :root {
359
359
  --ax-overlay-full-width: 93;
360
+ --ax-color-white: 255, 255, 255;
361
+ --ax-color-black: 0, 0, 0;
360
362
  }
361
363
 
362
364
  html,
363
365
  body {
364
- background-color: rgba(var(--ax-sys-body-bg-color));
365
- color: rgba(var(--ax-sys-body-text-color));
366
+ background-color: rgba(var(--ax-color-background-default));
367
+ color: rgba(var(--ax-color-text-default));
366
368
  }
367
369
 
368
370
  .ax-action-list.ax-action-list-horizontal {
@@ -398,7 +400,7 @@ body {
398
400
  }
399
401
  .ax-action-list ax-divider {
400
402
  display: block;
401
- background-color: rgba(var(--ax-sys-border-color));
403
+ background-color: rgba(var(--ax-color-border-default));
402
404
  }
403
405
  .ax-action-list .ax-action-item {
404
406
  display: flex;
@@ -440,23 +442,22 @@ body {
440
442
  gap: 0.5rem;
441
443
  }
442
444
  .ax-action-list .ax-action-item ax-suffix ax-text {
443
- color: rgba(var(--ax-sys-body-text-color));
445
+ color: rgba(var(--ax-color-text-default));
444
446
  opacity: 0.5;
445
447
  font-weight: lighter;
446
448
  padding-inline: 0.5rem;
447
449
  }
448
450
 
449
- .ax-action-sheet-panel {
450
- --ax-comp-action-sheet-border-radius-size: var(--ax-sys-border-radius);
451
+ .ax-actionsheet-panel {
451
452
  overflow: hidden;
452
- border-top-left-radius: var(--ax-comp-action-sheet-border-radius-size);
453
- border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
454
- background-color: rgba(var(--ax-sys-color-surface-lowest));
453
+ border-top-left-radius: var(--ax-rounded-border-default);
454
+ border-top-right-radius: var(--ax-rounded-border-default);
455
+ background-color: rgba(var(--ax-color-surface));
455
456
  --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
456
457
  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
457
458
  box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
458
459
  animation: 1s both ax-fadeInUp;
459
- animation-duration: var(--ax-sys-transition-duration);
460
+ animation-duration: 250ms;
460
461
  }
461
462
  @keyframes ax-fadeInUp {
462
463
  from {
@@ -473,15 +474,15 @@ body {
473
474
  appearance: none;
474
475
  border-radius: 0.25rem;
475
476
  border-width: 1px;
476
- border-color: rgba(var(--ax-sys-color-input-surface-border));
477
- background-color: rgba(var(--ax-sys-color-input-surface));
477
+ border-color: rgba(var(--ax-color-input-border));
478
+ background-color: rgba(var(--ax-color-input-surface));
478
479
  vertical-align: middle;
479
480
  outline: 2px solid transparent;
480
481
  outline-offset: 2px;
481
482
  }
482
483
  .ax-checkbox:checked, .ax-checkbox:indeterminate {
483
- border-color: rgba(var(--ax-sys-color-primary-500)) !important;
484
- background-color: rgba(var(--ax-sys-color-primary-500)) !important;
484
+ border-color: rgba(var(--ax-color-primary-500)) !important;
485
+ background-color: rgba(var(--ax-color-primary-500)) !important;
485
486
  background-size: contain;
486
487
  background-repeat: no-repeat;
487
488
  }
@@ -492,13 +493,1585 @@ body {
492
493
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
493
494
  }
494
495
  .ax-checkbox:focus-visible, .ax-checkbox:focus {
495
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
496
+ box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)), 0px 0px 0px 4px rgba(var(--ax-color-primary-500));
496
497
  }
497
498
  .ax-checkbox:disabled {
498
499
  cursor: not-allowed;
499
500
  opacity: 0.5;
500
501
  }
501
502
 
503
+ .ax-el-primary-solid {
504
+ background-color: rgba(var(--ax-color-primary-500));
505
+ color: rgba(var(--ax-color-primary-fore));
506
+ border-color: rgba(var(--ax-color-primary-500));
507
+ }
508
+ .ax-el-primary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
509
+ background-color: rgba(var(--ax-color-primary-600));
510
+ }
511
+ .ax-el-primary-solid.ax-state-selected {
512
+ background-color: rgba(var(--ax-color-primary-700));
513
+ }
514
+ .ax-el-primary-solid .ax-ripple {
515
+ background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
516
+ }
517
+ .ax-el-primary-solid ax-loading-spinner .ax-loader {
518
+ border-color: rgba(var(--ax-color-primary-fore));
519
+ border-bottom-color: transparent;
520
+ }
521
+ .ax-el-primary-solid:is(.ax-el-primary-solid:focus-visible, .ax-el-primary-solid.ax-state-focus) {
522
+ outline-color: rgba(var(--ax-color-primary-500));
523
+ }
524
+ .ax-el-primary-solid > button:is(.ax-el-primary-solid > button:focus-visible, .ax-el-primary-solid > button.ax-state-focus) {
525
+ outline-color: rgba(var(--ax-color-primary-500));
526
+ }
527
+ .ax-el-primary-solid.ax-dropdown-button-marker {
528
+ border-inline-start-color: rgba(var(--ax-color-primary-600));
529
+ }
530
+
531
+ .ax-el-primary-twotone {
532
+ background-color: rgba(var(--ax-color-primary-100));
533
+ color: rgba(var(--ax-color-primary-fore-tint));
534
+ border-color: rgba(var(--ax-color-primary-100));
535
+ }
536
+ .ax-el-primary-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
537
+ background-color: rgba(var(--ax-color-primary-200));
538
+ }
539
+ .ax-el-primary-twotone.ax-state-selected {
540
+ background-color: rgba(var(--ax-color-primary-300));
541
+ }
542
+ .ax-el-primary-twotone .ax-ripple {
543
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
544
+ }
545
+ .ax-el-primary-twotone ax-loading-spinner .ax-loader {
546
+ border-color: rgba(var(--ax-color-primary-fore-tint));
547
+ border-bottom-color: transparent;
548
+ }
549
+ .ax-el-primary-twotone:is(.ax-el-primary-twotone:focus-visible, .ax-el-primary-twotone.ax-state-focus) {
550
+ outline-color: rgba(var(--ax-color-primary-500));
551
+ }
552
+ .ax-el-primary-twotone > button:is(.ax-el-primary-twotone > button:focus-visible, .ax-el-primary-twotone > button.ax-state-focus) {
553
+ outline-color: rgba(var(--ax-color-primary-500));
554
+ }
555
+ .ax-el-primary-twotone.ax-dropdown-button-marker {
556
+ border-inline-start-color: rgba(var(--ax-color-primary-50));
557
+ }
558
+
559
+ .ax-el-primary-outline {
560
+ background-color: transparent;
561
+ color: rgba(var(--ax-color-primary-500));
562
+ border-color: rgba(var(--ax-color-primary-500));
563
+ border-width: 1px;
564
+ }
565
+ .ax-el-primary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
566
+ color: rgba(var(--ax-color-primary-700));
567
+ border-color: rgba(var(--ax-color-primary-700));
568
+ }
569
+ .ax-el-primary-outline.ax-state-selected {
570
+ border-color: rgba(var(--ax-color-primary-500));
571
+ color: rgba(var(--ax-color-primary-fore));
572
+ background-color: rgba(var(--ax-color-primary-500));
573
+ }
574
+ .ax-el-primary-outline .ax-ripple {
575
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
576
+ }
577
+ .ax-el-primary-outline ax-loading-spinner .ax-loader {
578
+ border-color: rgba(var(--ax-color-primary-500));
579
+ border-bottom-color: transparent;
580
+ }
581
+ .ax-el-primary-outline:is(.ax-el-primary-outline:focus-visible, .ax-el-primary-outline.ax-state-focus) {
582
+ outline-offset: -2px;
583
+ outline-color: rgba(var(--ax-color-primary-500));
584
+ color: rgba(var(--ax-color-primary-fore-tint));
585
+ }
586
+ .ax-el-primary-outline > button:is(.ax-el-primary-outline > button:focus-visible, .ax-el-primary-outline > button.ax-state-focus) {
587
+ outline-offset: -2px;
588
+ outline-color: rgba(var(--ax-color-primary-500));
589
+ color: rgba(var(--ax-color-primary-fore-tint));
590
+ }
591
+ .ax-el-primary-outline.ax-dropdown-button-marker {
592
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
593
+ }
594
+
595
+ .ax-el-primary-blank {
596
+ color: rgba(var(--ax-color-primary-500));
597
+ }
598
+ .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
599
+ background-color: rgba(var(--ax-color-primary-100));
600
+ color: rgba(var(--ax-color-primary-fore-tint));
601
+ }
602
+ .ax-el-primary-blank.ax-state-selected {
603
+ background-color: rgba(var(--ax-color-primary-700));
604
+ color: rgba(var(--ax-color-primary-fore));
605
+ }
606
+ .ax-el-primary-blank .ax-ripple {
607
+ background-color: rgba(var(--ax-color-primary-500), 0.3);
608
+ }
609
+ .ax-el-primary-blank ax-loading-spinner .ax-loader {
610
+ border-color: rgba(var(--ax-color-primary-500));
611
+ border-bottom-color: transparent;
612
+ }
613
+ .ax-el-primary-blank:is(.ax-el-primary-blank:focus-visible, .ax-el-primary-blank.ax-state-focus) {
614
+ outline-color: rgba(var(--ax-color-primary-300));
615
+ outline-offset: 0;
616
+ }
617
+ .ax-el-primary-blank > button:is(.ax-el-primary-blank > button:focus-visible, .ax-el-primary-blank > button.ax-state-focus) {
618
+ outline-color: rgba(var(--ax-color-primary-300));
619
+ outline-offset: 0;
620
+ }
621
+ .ax-el-primary-blank.ax-dropdown-button-marker {
622
+ border-inline-start-color: transparent;
623
+ }
624
+
625
+ .ax-el-primary-link {
626
+ color: rgba(var(--ax-color-primary-500));
627
+ }
628
+ .ax-el-primary-link.ax-el-interactive:hover:not(.ax-state-disabled) {
629
+ color: rgba(var(--ax-color-primary-700));
630
+ }
631
+ .ax-el-primary-link.ax-state-selected {
632
+ background-color: rgba(var(--ax-color-primary-700));
633
+ color: rgba(var(--ax-color-primary-fore));
634
+ }
635
+ .ax-el-primary-link .ax-ripple {
636
+ background-color: rgba(var(--ax-color-primary-500), 0.3);
637
+ }
638
+ .ax-el-primary-link ax-loading-spinner .ax-loader {
639
+ border-color: rgba(var(--ax-color-primary-500));
640
+ border-bottom-color: transparent;
641
+ }
642
+ .ax-el-primary-link:is(.ax-el-primary-link:focus-visible, .ax-el-primary-link.ax-state-focus) {
643
+ outline-color: rgba(var(--ax-color-primary-300));
644
+ outline-offset: 0;
645
+ }
646
+ .ax-el-primary-link > button:is(.ax-el-primary-link > button:focus-visible, .ax-el-primary-link > button.ax-state-focus) {
647
+ outline-color: rgba(var(--ax-color-primary-300));
648
+ outline-offset: 0;
649
+ }
650
+ .ax-el-primary-link.ax-dropdown-button-marker {
651
+ border-inline-start-color: transparent;
652
+ }
653
+
654
+ .ax-el-success-solid {
655
+ background-color: rgba(var(--ax-color-success-500));
656
+ color: rgba(var(--ax-color-success-fore));
657
+ border-color: rgba(var(--ax-color-success-500));
658
+ }
659
+ .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
660
+ background-color: rgba(var(--ax-color-success-600));
661
+ }
662
+ .ax-el-success-solid.ax-state-selected {
663
+ background-color: rgba(var(--ax-color-success-700));
664
+ }
665
+ .ax-el-success-solid .ax-ripple {
666
+ background-color: rgba(var(--ax-color-success-300), 0.3) !important;
667
+ }
668
+ .ax-el-success-solid ax-loading-spinner .ax-loader {
669
+ border-color: rgba(var(--ax-color-success-fore));
670
+ border-bottom-color: transparent;
671
+ }
672
+ .ax-el-success-solid:is(.ax-el-success-solid:focus-visible, .ax-el-success-solid.ax-state-focus) {
673
+ outline-color: rgba(var(--ax-color-success-500));
674
+ }
675
+ .ax-el-success-solid > button:is(.ax-el-success-solid > button:focus-visible, .ax-el-success-solid > button.ax-state-focus) {
676
+ outline-color: rgba(var(--ax-color-success-500));
677
+ }
678
+ .ax-el-success-solid.ax-dropdown-button-marker {
679
+ border-inline-start-color: rgba(var(--ax-color-success-600));
680
+ }
681
+
682
+ .ax-el-success-twotone {
683
+ background-color: rgba(var(--ax-color-success-100));
684
+ color: rgba(var(--ax-color-success-fore-tint));
685
+ border-color: rgba(var(--ax-color-success-100));
686
+ }
687
+ .ax-el-success-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
688
+ background-color: rgba(var(--ax-color-success-200));
689
+ }
690
+ .ax-el-success-twotone.ax-state-selected {
691
+ background-color: rgba(var(--ax-color-success-300));
692
+ }
693
+ .ax-el-success-twotone .ax-ripple {
694
+ background-color: rgba(var(--ax-color-success-500), 0.3) !important;
695
+ }
696
+ .ax-el-success-twotone ax-loading-spinner .ax-loader {
697
+ border-color: rgba(var(--ax-color-success-fore-tint));
698
+ border-bottom-color: transparent;
699
+ }
700
+ .ax-el-success-twotone:is(.ax-el-success-twotone:focus-visible, .ax-el-success-twotone.ax-state-focus) {
701
+ outline-color: rgba(var(--ax-color-success-500));
702
+ }
703
+ .ax-el-success-twotone > button:is(.ax-el-success-twotone > button:focus-visible, .ax-el-success-twotone > button.ax-state-focus) {
704
+ outline-color: rgba(var(--ax-color-success-500));
705
+ }
706
+ .ax-el-success-twotone.ax-dropdown-button-marker {
707
+ border-inline-start-color: rgba(var(--ax-color-success-50));
708
+ }
709
+
710
+ .ax-el-success-outline {
711
+ background-color: transparent;
712
+ color: rgba(var(--ax-color-success-500));
713
+ border-color: rgba(var(--ax-color-success-500));
714
+ border-width: 1px;
715
+ }
716
+ .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
717
+ color: rgba(var(--ax-color-success-700));
718
+ border-color: rgba(var(--ax-color-success-700));
719
+ }
720
+ .ax-el-success-outline.ax-state-selected {
721
+ border-color: rgba(var(--ax-color-success-500));
722
+ color: rgba(var(--ax-color-success-fore));
723
+ background-color: rgba(var(--ax-color-success-500));
724
+ }
725
+ .ax-el-success-outline .ax-ripple {
726
+ background-color: rgba(var(--ax-color-success-500), 0.3) !important;
727
+ }
728
+ .ax-el-success-outline ax-loading-spinner .ax-loader {
729
+ border-color: rgba(var(--ax-color-success-500));
730
+ border-bottom-color: transparent;
731
+ }
732
+ .ax-el-success-outline:is(.ax-el-success-outline:focus-visible, .ax-el-success-outline.ax-state-focus) {
733
+ outline-offset: -2px;
734
+ outline-color: rgba(var(--ax-color-success-500));
735
+ color: rgba(var(--ax-color-success-fore-tint));
736
+ }
737
+ .ax-el-success-outline > button:is(.ax-el-success-outline > button:focus-visible, .ax-el-success-outline > button.ax-state-focus) {
738
+ outline-offset: -2px;
739
+ outline-color: rgba(var(--ax-color-success-500));
740
+ color: rgba(var(--ax-color-success-fore-tint));
741
+ }
742
+ .ax-el-success-outline.ax-dropdown-button-marker {
743
+ border-inline-start-color: rgba(var(--ax-color-success-500));
744
+ }
745
+
746
+ .ax-el-success-blank {
747
+ color: rgba(var(--ax-color-success-500));
748
+ }
749
+ .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
750
+ background-color: rgba(var(--ax-color-success-100));
751
+ color: rgba(var(--ax-color-success-fore-tint));
752
+ }
753
+ .ax-el-success-blank.ax-state-selected {
754
+ background-color: rgba(var(--ax-color-success-700));
755
+ color: rgba(var(--ax-color-success-fore));
756
+ }
757
+ .ax-el-success-blank .ax-ripple {
758
+ background-color: rgba(var(--ax-color-success-500), 0.3);
759
+ }
760
+ .ax-el-success-blank ax-loading-spinner .ax-loader {
761
+ border-color: rgba(var(--ax-color-success-500));
762
+ border-bottom-color: transparent;
763
+ }
764
+ .ax-el-success-blank:is(.ax-el-success-blank:focus-visible, .ax-el-success-blank.ax-state-focus) {
765
+ outline-color: rgba(var(--ax-color-success-300));
766
+ outline-offset: 0;
767
+ }
768
+ .ax-el-success-blank > button:is(.ax-el-success-blank > button:focus-visible, .ax-el-success-blank > button.ax-state-focus) {
769
+ outline-color: rgba(var(--ax-color-success-300));
770
+ outline-offset: 0;
771
+ }
772
+ .ax-el-success-blank.ax-dropdown-button-marker {
773
+ border-inline-start-color: transparent;
774
+ }
775
+
776
+ .ax-el-success-link {
777
+ color: rgba(var(--ax-color-success-500));
778
+ }
779
+ .ax-el-success-link.ax-el-interactive:hover:not(.ax-state-disabled) {
780
+ color: rgba(var(--ax-color-success-700));
781
+ }
782
+ .ax-el-success-link.ax-state-selected {
783
+ background-color: rgba(var(--ax-color-success-700));
784
+ color: rgba(var(--ax-color-success-fore));
785
+ }
786
+ .ax-el-success-link .ax-ripple {
787
+ background-color: rgba(var(--ax-color-success-500), 0.3);
788
+ }
789
+ .ax-el-success-link ax-loading-spinner .ax-loader {
790
+ border-color: rgba(var(--ax-color-success-500));
791
+ border-bottom-color: transparent;
792
+ }
793
+ .ax-el-success-link:is(.ax-el-success-link:focus-visible, .ax-el-success-link.ax-state-focus) {
794
+ outline-color: rgba(var(--ax-color-success-300));
795
+ outline-offset: 0;
796
+ }
797
+ .ax-el-success-link > button:is(.ax-el-success-link > button:focus-visible, .ax-el-success-link > button.ax-state-focus) {
798
+ outline-color: rgba(var(--ax-color-success-300));
799
+ outline-offset: 0;
800
+ }
801
+ .ax-el-success-link.ax-dropdown-button-marker {
802
+ border-inline-start-color: transparent;
803
+ }
804
+
805
+ .ax-el-warning-solid {
806
+ background-color: rgba(var(--ax-color-warning-500));
807
+ color: rgba(var(--ax-color-warning-fore));
808
+ border-color: rgba(var(--ax-color-warning-500));
809
+ }
810
+ .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
811
+ background-color: rgba(var(--ax-color-warning-600));
812
+ }
813
+ .ax-el-warning-solid.ax-state-selected {
814
+ background-color: rgba(var(--ax-color-warning-700));
815
+ }
816
+ .ax-el-warning-solid .ax-ripple {
817
+ background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
818
+ }
819
+ .ax-el-warning-solid ax-loading-spinner .ax-loader {
820
+ border-color: rgba(var(--ax-color-warning-fore));
821
+ border-bottom-color: transparent;
822
+ }
823
+ .ax-el-warning-solid:is(.ax-el-warning-solid:focus-visible, .ax-el-warning-solid.ax-state-focus) {
824
+ outline-color: rgba(var(--ax-color-warning-500));
825
+ }
826
+ .ax-el-warning-solid > button:is(.ax-el-warning-solid > button:focus-visible, .ax-el-warning-solid > button.ax-state-focus) {
827
+ outline-color: rgba(var(--ax-color-warning-500));
828
+ }
829
+ .ax-el-warning-solid.ax-dropdown-button-marker {
830
+ border-inline-start-color: rgba(var(--ax-color-warning-600));
831
+ }
832
+
833
+ .ax-el-warning-twotone {
834
+ background-color: rgba(var(--ax-color-warning-100));
835
+ color: rgba(var(--ax-color-warning-fore-tint));
836
+ border-color: rgba(var(--ax-color-warning-100));
837
+ }
838
+ .ax-el-warning-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
839
+ background-color: rgba(var(--ax-color-warning-200));
840
+ }
841
+ .ax-el-warning-twotone.ax-state-selected {
842
+ background-color: rgba(var(--ax-color-warning-300));
843
+ }
844
+ .ax-el-warning-twotone .ax-ripple {
845
+ background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
846
+ }
847
+ .ax-el-warning-twotone ax-loading-spinner .ax-loader {
848
+ border-color: rgba(var(--ax-color-warning-fore-tint));
849
+ border-bottom-color: transparent;
850
+ }
851
+ .ax-el-warning-twotone:is(.ax-el-warning-twotone:focus-visible, .ax-el-warning-twotone.ax-state-focus) {
852
+ outline-color: rgba(var(--ax-color-warning-500));
853
+ }
854
+ .ax-el-warning-twotone > button:is(.ax-el-warning-twotone > button:focus-visible, .ax-el-warning-twotone > button.ax-state-focus) {
855
+ outline-color: rgba(var(--ax-color-warning-500));
856
+ }
857
+ .ax-el-warning-twotone.ax-dropdown-button-marker {
858
+ border-inline-start-color: rgba(var(--ax-color-warning-50));
859
+ }
860
+
861
+ .ax-el-warning-outline {
862
+ background-color: transparent;
863
+ color: rgba(var(--ax-color-warning-500));
864
+ border-color: rgba(var(--ax-color-warning-500));
865
+ border-width: 1px;
866
+ }
867
+ .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
868
+ color: rgba(var(--ax-color-warning-700));
869
+ border-color: rgba(var(--ax-color-warning-700));
870
+ }
871
+ .ax-el-warning-outline.ax-state-selected {
872
+ border-color: rgba(var(--ax-color-warning-500));
873
+ color: rgba(var(--ax-color-warning-fore));
874
+ background-color: rgba(var(--ax-color-warning-500));
875
+ }
876
+ .ax-el-warning-outline .ax-ripple {
877
+ background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
878
+ }
879
+ .ax-el-warning-outline ax-loading-spinner .ax-loader {
880
+ border-color: rgba(var(--ax-color-warning-500));
881
+ border-bottom-color: transparent;
882
+ }
883
+ .ax-el-warning-outline:is(.ax-el-warning-outline:focus-visible, .ax-el-warning-outline.ax-state-focus) {
884
+ outline-offset: -2px;
885
+ outline-color: rgba(var(--ax-color-warning-500));
886
+ color: rgba(var(--ax-color-warning-fore-tint));
887
+ }
888
+ .ax-el-warning-outline > button:is(.ax-el-warning-outline > button:focus-visible, .ax-el-warning-outline > button.ax-state-focus) {
889
+ outline-offset: -2px;
890
+ outline-color: rgba(var(--ax-color-warning-500));
891
+ color: rgba(var(--ax-color-warning-fore-tint));
892
+ }
893
+ .ax-el-warning-outline.ax-dropdown-button-marker {
894
+ border-inline-start-color: rgba(var(--ax-color-warning-500));
895
+ }
896
+
897
+ .ax-el-warning-blank {
898
+ color: rgba(var(--ax-color-warning-500));
899
+ }
900
+ .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
901
+ background-color: rgba(var(--ax-color-warning-100));
902
+ color: rgba(var(--ax-color-warning-fore-tint));
903
+ }
904
+ .ax-el-warning-blank.ax-state-selected {
905
+ background-color: rgba(var(--ax-color-warning-700));
906
+ color: rgba(var(--ax-color-warning-fore));
907
+ }
908
+ .ax-el-warning-blank .ax-ripple {
909
+ background-color: rgba(var(--ax-color-warning-500), 0.3);
910
+ }
911
+ .ax-el-warning-blank ax-loading-spinner .ax-loader {
912
+ border-color: rgba(var(--ax-color-warning-500));
913
+ border-bottom-color: transparent;
914
+ }
915
+ .ax-el-warning-blank:is(.ax-el-warning-blank:focus-visible, .ax-el-warning-blank.ax-state-focus) {
916
+ outline-color: rgba(var(--ax-color-warning-300));
917
+ outline-offset: 0;
918
+ }
919
+ .ax-el-warning-blank > button:is(.ax-el-warning-blank > button:focus-visible, .ax-el-warning-blank > button.ax-state-focus) {
920
+ outline-color: rgba(var(--ax-color-warning-300));
921
+ outline-offset: 0;
922
+ }
923
+ .ax-el-warning-blank.ax-dropdown-button-marker {
924
+ border-inline-start-color: transparent;
925
+ }
926
+
927
+ .ax-el-warning-link {
928
+ color: rgba(var(--ax-color-warning-500));
929
+ }
930
+ .ax-el-warning-link.ax-el-interactive:hover:not(.ax-state-disabled) {
931
+ color: rgba(var(--ax-color-warning-700));
932
+ }
933
+ .ax-el-warning-link.ax-state-selected {
934
+ background-color: rgba(var(--ax-color-warning-700));
935
+ color: rgba(var(--ax-color-warning-fore));
936
+ }
937
+ .ax-el-warning-link .ax-ripple {
938
+ background-color: rgba(var(--ax-color-warning-500), 0.3);
939
+ }
940
+ .ax-el-warning-link ax-loading-spinner .ax-loader {
941
+ border-color: rgba(var(--ax-color-warning-500));
942
+ border-bottom-color: transparent;
943
+ }
944
+ .ax-el-warning-link:is(.ax-el-warning-link:focus-visible, .ax-el-warning-link.ax-state-focus) {
945
+ outline-color: rgba(var(--ax-color-warning-300));
946
+ outline-offset: 0;
947
+ }
948
+ .ax-el-warning-link > button:is(.ax-el-warning-link > button:focus-visible, .ax-el-warning-link > button.ax-state-focus) {
949
+ outline-color: rgba(var(--ax-color-warning-300));
950
+ outline-offset: 0;
951
+ }
952
+ .ax-el-warning-link.ax-dropdown-button-marker {
953
+ border-inline-start-color: transparent;
954
+ }
955
+
956
+ .ax-el-danger-solid {
957
+ background-color: rgba(var(--ax-color-danger-500));
958
+ color: rgba(var(--ax-color-danger-fore));
959
+ border-color: rgba(var(--ax-color-danger-500));
960
+ }
961
+ .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
962
+ background-color: rgba(var(--ax-color-danger-600));
963
+ }
964
+ .ax-el-danger-solid.ax-state-selected {
965
+ background-color: rgba(var(--ax-color-danger-700));
966
+ }
967
+ .ax-el-danger-solid .ax-ripple {
968
+ background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
969
+ }
970
+ .ax-el-danger-solid ax-loading-spinner .ax-loader {
971
+ border-color: rgba(var(--ax-color-danger-fore));
972
+ border-bottom-color: transparent;
973
+ }
974
+ .ax-el-danger-solid:is(.ax-el-danger-solid:focus-visible, .ax-el-danger-solid.ax-state-focus) {
975
+ outline-color: rgba(var(--ax-color-danger-500));
976
+ }
977
+ .ax-el-danger-solid > button:is(.ax-el-danger-solid > button:focus-visible, .ax-el-danger-solid > button.ax-state-focus) {
978
+ outline-color: rgba(var(--ax-color-danger-500));
979
+ }
980
+ .ax-el-danger-solid.ax-dropdown-button-marker {
981
+ border-inline-start-color: rgba(var(--ax-color-danger-600));
982
+ }
983
+
984
+ .ax-el-danger-twotone {
985
+ background-color: rgba(var(--ax-color-danger-100));
986
+ color: rgba(var(--ax-color-danger-fore-tint));
987
+ border-color: rgba(var(--ax-color-danger-100));
988
+ }
989
+ .ax-el-danger-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
990
+ background-color: rgba(var(--ax-color-danger-200));
991
+ }
992
+ .ax-el-danger-twotone.ax-state-selected {
993
+ background-color: rgba(var(--ax-color-danger-300));
994
+ }
995
+ .ax-el-danger-twotone .ax-ripple {
996
+ background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
997
+ }
998
+ .ax-el-danger-twotone ax-loading-spinner .ax-loader {
999
+ border-color: rgba(var(--ax-color-danger-fore-tint));
1000
+ border-bottom-color: transparent;
1001
+ }
1002
+ .ax-el-danger-twotone:is(.ax-el-danger-twotone:focus-visible, .ax-el-danger-twotone.ax-state-focus) {
1003
+ outline-color: rgba(var(--ax-color-danger-500));
1004
+ }
1005
+ .ax-el-danger-twotone > button:is(.ax-el-danger-twotone > button:focus-visible, .ax-el-danger-twotone > button.ax-state-focus) {
1006
+ outline-color: rgba(var(--ax-color-danger-500));
1007
+ }
1008
+ .ax-el-danger-twotone.ax-dropdown-button-marker {
1009
+ border-inline-start-color: rgba(var(--ax-color-danger-50));
1010
+ }
1011
+
1012
+ .ax-el-danger-outline {
1013
+ background-color: transparent;
1014
+ color: rgba(var(--ax-color-danger-500));
1015
+ border-color: rgba(var(--ax-color-danger-500));
1016
+ border-width: 1px;
1017
+ }
1018
+ .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1019
+ color: rgba(var(--ax-color-danger-700));
1020
+ border-color: rgba(var(--ax-color-danger-700));
1021
+ }
1022
+ .ax-el-danger-outline.ax-state-selected {
1023
+ border-color: rgba(var(--ax-color-danger-500));
1024
+ color: rgba(var(--ax-color-danger-fore));
1025
+ background-color: rgba(var(--ax-color-danger-500));
1026
+ }
1027
+ .ax-el-danger-outline .ax-ripple {
1028
+ background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
1029
+ }
1030
+ .ax-el-danger-outline ax-loading-spinner .ax-loader {
1031
+ border-color: rgba(var(--ax-color-danger-500));
1032
+ border-bottom-color: transparent;
1033
+ }
1034
+ .ax-el-danger-outline:is(.ax-el-danger-outline:focus-visible, .ax-el-danger-outline.ax-state-focus) {
1035
+ outline-offset: -2px;
1036
+ outline-color: rgba(var(--ax-color-danger-500));
1037
+ color: rgba(var(--ax-color-danger-fore-tint));
1038
+ }
1039
+ .ax-el-danger-outline > button:is(.ax-el-danger-outline > button:focus-visible, .ax-el-danger-outline > button.ax-state-focus) {
1040
+ outline-offset: -2px;
1041
+ outline-color: rgba(var(--ax-color-danger-500));
1042
+ color: rgba(var(--ax-color-danger-fore-tint));
1043
+ }
1044
+ .ax-el-danger-outline.ax-dropdown-button-marker {
1045
+ border-inline-start-color: rgba(var(--ax-color-danger-500));
1046
+ }
1047
+
1048
+ .ax-el-danger-blank {
1049
+ color: rgba(var(--ax-color-danger-500));
1050
+ }
1051
+ .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1052
+ background-color: rgba(var(--ax-color-danger-100));
1053
+ color: rgba(var(--ax-color-danger-fore-tint));
1054
+ }
1055
+ .ax-el-danger-blank.ax-state-selected {
1056
+ background-color: rgba(var(--ax-color-danger-700));
1057
+ color: rgba(var(--ax-color-danger-fore));
1058
+ }
1059
+ .ax-el-danger-blank .ax-ripple {
1060
+ background-color: rgba(var(--ax-color-danger-500), 0.3);
1061
+ }
1062
+ .ax-el-danger-blank ax-loading-spinner .ax-loader {
1063
+ border-color: rgba(var(--ax-color-danger-500));
1064
+ border-bottom-color: transparent;
1065
+ }
1066
+ .ax-el-danger-blank:is(.ax-el-danger-blank:focus-visible, .ax-el-danger-blank.ax-state-focus) {
1067
+ outline-color: rgba(var(--ax-color-danger-300));
1068
+ outline-offset: 0;
1069
+ }
1070
+ .ax-el-danger-blank > button:is(.ax-el-danger-blank > button:focus-visible, .ax-el-danger-blank > button.ax-state-focus) {
1071
+ outline-color: rgba(var(--ax-color-danger-300));
1072
+ outline-offset: 0;
1073
+ }
1074
+ .ax-el-danger-blank.ax-dropdown-button-marker {
1075
+ border-inline-start-color: transparent;
1076
+ }
1077
+
1078
+ .ax-el-danger-link {
1079
+ color: rgba(var(--ax-color-danger-500));
1080
+ }
1081
+ .ax-el-danger-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1082
+ color: rgba(var(--ax-color-danger-700));
1083
+ }
1084
+ .ax-el-danger-link.ax-state-selected {
1085
+ background-color: rgba(var(--ax-color-danger-700));
1086
+ color: rgba(var(--ax-color-danger-fore));
1087
+ }
1088
+ .ax-el-danger-link .ax-ripple {
1089
+ background-color: rgba(var(--ax-color-danger-500), 0.3);
1090
+ }
1091
+ .ax-el-danger-link ax-loading-spinner .ax-loader {
1092
+ border-color: rgba(var(--ax-color-danger-500));
1093
+ border-bottom-color: transparent;
1094
+ }
1095
+ .ax-el-danger-link:is(.ax-el-danger-link:focus-visible, .ax-el-danger-link.ax-state-focus) {
1096
+ outline-color: rgba(var(--ax-color-danger-300));
1097
+ outline-offset: 0;
1098
+ }
1099
+ .ax-el-danger-link > button:is(.ax-el-danger-link > button:focus-visible, .ax-el-danger-link > button.ax-state-focus) {
1100
+ outline-color: rgba(var(--ax-color-danger-300));
1101
+ outline-offset: 0;
1102
+ }
1103
+ .ax-el-danger-link.ax-dropdown-button-marker {
1104
+ border-inline-start-color: transparent;
1105
+ }
1106
+
1107
+ .ax-el-neutral-solid {
1108
+ background-color: rgba(var(--ax-color-neutral-500));
1109
+ color: rgba(var(--ax-color-neutral-fore));
1110
+ border-color: rgba(var(--ax-color-neutral-500));
1111
+ }
1112
+ .ax-el-neutral-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1113
+ background-color: rgba(var(--ax-color-neutral-600));
1114
+ }
1115
+ .ax-el-neutral-solid.ax-state-selected {
1116
+ background-color: rgba(var(--ax-color-neutral-700));
1117
+ }
1118
+ .ax-el-neutral-solid .ax-ripple {
1119
+ background-color: rgba(var(--ax-color-neutral-300), 0.3) !important;
1120
+ }
1121
+ .ax-el-neutral-solid ax-loading-spinner .ax-loader {
1122
+ border-color: rgba(var(--ax-color-neutral-fore));
1123
+ border-bottom-color: transparent;
1124
+ }
1125
+ .ax-el-neutral-solid:is(.ax-el-neutral-solid:focus-visible, .ax-el-neutral-solid.ax-state-focus) {
1126
+ outline-color: rgba(var(--ax-color-neutral-500));
1127
+ }
1128
+ .ax-el-neutral-solid > button:is(.ax-el-neutral-solid > button:focus-visible, .ax-el-neutral-solid > button.ax-state-focus) {
1129
+ outline-color: rgba(var(--ax-color-neutral-500));
1130
+ }
1131
+ .ax-el-neutral-solid.ax-dropdown-button-marker {
1132
+ border-inline-start-color: rgba(var(--ax-color-neutral-600));
1133
+ }
1134
+
1135
+ .ax-el-neutral-twotone {
1136
+ background-color: rgba(var(--ax-color-neutral-100));
1137
+ color: rgba(var(--ax-color-neutral-fore-tint));
1138
+ border-color: rgba(var(--ax-color-neutral-100));
1139
+ }
1140
+ .ax-el-neutral-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
1141
+ background-color: rgba(var(--ax-color-neutral-200));
1142
+ }
1143
+ .ax-el-neutral-twotone.ax-state-selected {
1144
+ background-color: rgba(var(--ax-color-neutral-300));
1145
+ }
1146
+ .ax-el-neutral-twotone .ax-ripple {
1147
+ background-color: rgba(var(--ax-color-neutral-500), 0.3) !important;
1148
+ }
1149
+ .ax-el-neutral-twotone ax-loading-spinner .ax-loader {
1150
+ border-color: rgba(var(--ax-color-neutral-fore-tint));
1151
+ border-bottom-color: transparent;
1152
+ }
1153
+ .ax-el-neutral-twotone:is(.ax-el-neutral-twotone:focus-visible, .ax-el-neutral-twotone.ax-state-focus) {
1154
+ outline-color: rgba(var(--ax-color-neutral-500));
1155
+ }
1156
+ .ax-el-neutral-twotone > button:is(.ax-el-neutral-twotone > button:focus-visible, .ax-el-neutral-twotone > button.ax-state-focus) {
1157
+ outline-color: rgba(var(--ax-color-neutral-500));
1158
+ }
1159
+ .ax-el-neutral-twotone.ax-dropdown-button-marker {
1160
+ border-inline-start-color: rgba(var(--ax-color-neutral-50));
1161
+ }
1162
+
1163
+ .ax-el-neutral-outline {
1164
+ background-color: transparent;
1165
+ color: rgba(var(--ax-color-neutral-500));
1166
+ border-color: rgba(var(--ax-color-neutral-500));
1167
+ border-width: 1px;
1168
+ }
1169
+ .ax-el-neutral-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1170
+ color: rgba(var(--ax-color-neutral-700));
1171
+ border-color: rgba(var(--ax-color-neutral-700));
1172
+ }
1173
+ .ax-el-neutral-outline.ax-state-selected {
1174
+ border-color: rgba(var(--ax-color-neutral-500));
1175
+ color: rgba(var(--ax-color-neutral-fore));
1176
+ background-color: rgba(var(--ax-color-neutral-500));
1177
+ }
1178
+ .ax-el-neutral-outline .ax-ripple {
1179
+ background-color: rgba(var(--ax-color-neutral-500), 0.3) !important;
1180
+ }
1181
+ .ax-el-neutral-outline ax-loading-spinner .ax-loader {
1182
+ border-color: rgba(var(--ax-color-neutral-500));
1183
+ border-bottom-color: transparent;
1184
+ }
1185
+ .ax-el-neutral-outline:is(.ax-el-neutral-outline:focus-visible, .ax-el-neutral-outline.ax-state-focus) {
1186
+ outline-offset: -2px;
1187
+ outline-color: rgba(var(--ax-color-neutral-500));
1188
+ color: rgba(var(--ax-color-neutral-fore-tint));
1189
+ }
1190
+ .ax-el-neutral-outline > button:is(.ax-el-neutral-outline > button:focus-visible, .ax-el-neutral-outline > button.ax-state-focus) {
1191
+ outline-offset: -2px;
1192
+ outline-color: rgba(var(--ax-color-neutral-500));
1193
+ color: rgba(var(--ax-color-neutral-fore-tint));
1194
+ }
1195
+ .ax-el-neutral-outline.ax-dropdown-button-marker {
1196
+ border-inline-start-color: rgba(var(--ax-color-neutral-500));
1197
+ }
1198
+
1199
+ .ax-el-neutral-blank {
1200
+ color: rgba(var(--ax-color-neutral-500));
1201
+ }
1202
+ .ax-el-neutral-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1203
+ background-color: rgba(var(--ax-color-neutral-100));
1204
+ color: rgba(var(--ax-color-neutral-fore-tint));
1205
+ }
1206
+ .ax-el-neutral-blank.ax-state-selected {
1207
+ background-color: rgba(var(--ax-color-neutral-700));
1208
+ color: rgba(var(--ax-color-neutral-fore));
1209
+ }
1210
+ .ax-el-neutral-blank .ax-ripple {
1211
+ background-color: rgba(var(--ax-color-neutral-500), 0.3);
1212
+ }
1213
+ .ax-el-neutral-blank ax-loading-spinner .ax-loader {
1214
+ border-color: rgba(var(--ax-color-neutral-500));
1215
+ border-bottom-color: transparent;
1216
+ }
1217
+ .ax-el-neutral-blank:is(.ax-el-neutral-blank:focus-visible, .ax-el-neutral-blank.ax-state-focus) {
1218
+ outline-color: rgba(var(--ax-color-neutral-300));
1219
+ outline-offset: 0;
1220
+ }
1221
+ .ax-el-neutral-blank > button:is(.ax-el-neutral-blank > button:focus-visible, .ax-el-neutral-blank > button.ax-state-focus) {
1222
+ outline-color: rgba(var(--ax-color-neutral-300));
1223
+ outline-offset: 0;
1224
+ }
1225
+ .ax-el-neutral-blank.ax-dropdown-button-marker {
1226
+ border-inline-start-color: transparent;
1227
+ }
1228
+
1229
+ .ax-el-neutral-link {
1230
+ color: rgba(var(--ax-color-neutral-500));
1231
+ }
1232
+ .ax-el-neutral-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1233
+ color: rgba(var(--ax-color-neutral-700));
1234
+ }
1235
+ .ax-el-neutral-link.ax-state-selected {
1236
+ background-color: rgba(var(--ax-color-neutral-700));
1237
+ color: rgba(var(--ax-color-neutral-fore));
1238
+ }
1239
+ .ax-el-neutral-link .ax-ripple {
1240
+ background-color: rgba(var(--ax-color-neutral-500), 0.3);
1241
+ }
1242
+ .ax-el-neutral-link ax-loading-spinner .ax-loader {
1243
+ border-color: rgba(var(--ax-color-neutral-500));
1244
+ border-bottom-color: transparent;
1245
+ }
1246
+ .ax-el-neutral-link:is(.ax-el-neutral-link:focus-visible, .ax-el-neutral-link.ax-state-focus) {
1247
+ outline-color: rgba(var(--ax-color-neutral-300));
1248
+ outline-offset: 0;
1249
+ }
1250
+ .ax-el-neutral-link > button:is(.ax-el-neutral-link > button:focus-visible, .ax-el-neutral-link > button.ax-state-focus) {
1251
+ outline-color: rgba(var(--ax-color-neutral-300));
1252
+ outline-offset: 0;
1253
+ }
1254
+ .ax-el-neutral-link.ax-dropdown-button-marker {
1255
+ border-inline-start-color: transparent;
1256
+ }
1257
+
1258
+ .ax-el-ghost-solid {
1259
+ border-width: 1px;
1260
+ border-color: rgba(var(--ax-color-input-border));
1261
+ background-color: rgba(var(--ax-color-ghost));
1262
+ color: rgba(var(--ax-color-ghost-fore));
1263
+ }
1264
+ .ax-el-ghost-solid.ax-el-interactive:hover:not(.ax-el-ghost-solid.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-solid.ax-el-interactive:hover.ax-state-disabled) {
1265
+ background-color: rgba(var(--ax-color-ghost), 0.9);
1266
+ }
1267
+ .ax-el-ghost-solid.ax-el-interactive:active:not(.ax-el-ghost-solid.ax-el-interactive:active.ax-state-selected, .ax-el-ghost-solid.ax-el-interactive:active.ax-state-disabled) {
1268
+ background-color: rgba(var(--ax-color-ghost), 0.8);
1269
+ }
1270
+ .ax-el-ghost-solid.ax-state-selected {
1271
+ background-color: rgba(var(--ax-color-ghost-fore), 0.125);
1272
+ color: rgba(var(--ax-color-ghost-fore));
1273
+ border-style: none;
1274
+ }
1275
+ .ax-el-ghost-solid .ax-ripple {
1276
+ background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1277
+ }
1278
+ .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1279
+ border-color: rgba(var(--ax-color-ghost-fore));
1280
+ border-bottom-color: transparent;
1281
+ }
1282
+ .ax-el-ghost-solid.ax-dropdown-button-marker {
1283
+ border-inline-start-color: rgba(var(--ax-color-input-border));
1284
+ }
1285
+
1286
+ .ax-el-ghost-outline {
1287
+ border-width: 1px;
1288
+ border-color: rgba(var(--ax-color-input-border));
1289
+ background-color: transparent;
1290
+ color: rgba(var(--ax-color-ghost-fore));
1291
+ }
1292
+ .ax-el-ghost-outline.ax-el-interactive:hover:not(.ax-el-ghost-outline.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-outline.ax-el-interactive:hover.ax-state-disabled) {
1293
+ border-color: rgba(var(--ax-color-ghost-fore), 0.4);
1294
+ }
1295
+ .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
1296
+ border-inline-start-color: rgba(var(--ax-color-ghost-fore), 0.4);
1297
+ }
1298
+ .ax-el-ghost-outline.ax-state-selected {
1299
+ background-color: rgba(var(--ax-color-ghost-fore), 0.125);
1300
+ color: rgba(var(--ax-color-ghost-fore));
1301
+ border-style: none;
1302
+ }
1303
+ .ax-el-ghost-outline .ax-ripple {
1304
+ background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1305
+ }
1306
+ .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1307
+ border-color: rgba(var(--ax-color-ghost-fore));
1308
+ border-bottom-color: transparent;
1309
+ }
1310
+ .ax-el-ghost-outline.ax-dropdown-button-marker {
1311
+ border-inline-start-color: rgba(var(--ax-color-input-border));
1312
+ }
1313
+
1314
+ .ax-el-ghost-blank {
1315
+ border-style: none;
1316
+ background-color: transparent;
1317
+ color: rgba(var(--ax-color-ghost-fore));
1318
+ }
1319
+ .ax-el-ghost-blank.ax-state-selected {
1320
+ background-color: rgba(var(--ax-color-ghost-fore), 0.125);
1321
+ color: rgba(var(--ax-color-ghost-fore));
1322
+ border-style: none;
1323
+ }
1324
+ .ax-el-ghost-blank.ax-el-interactive:hover:not(.ax-el-ghost-blank.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-blank.ax-el-interactive:hover.ax-state-disabled) {
1325
+ background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1326
+ border-color: rgba(var(--ax-color-ghost-fore), 0.05);
1327
+ }
1328
+ .ax-el-ghost-blank.ax-el-interactive:active:not(.ax-el-ghost-blank.ax-el-interactive:active.ax-state-selected, .ax-el-ghost-blank.ax-el-interactive:active.ax-state-disabled) {
1329
+ background-color: rgba(var(--ax-color-ghost-fore), 0.1);
1330
+ border-color: rgba(var(--ax-color-ghost-fore), 0.1);
1331
+ color: rgba(var(--ax-color-ghost-fore));
1332
+ }
1333
+ .ax-el-ghost-blank .ax-ripple {
1334
+ background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1335
+ }
1336
+ .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1337
+ border-color: rgba(var(--ax-color-ghost-fore));
1338
+ border-bottom-color: transparent;
1339
+ }
1340
+ .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1341
+ border-color: rgba(var(--ax-color-ghost-fore), 0.2);
1342
+ }
1343
+ .ax-el-ghost-blank.ax-dropdown-button-marker {
1344
+ border-inline-start-color: rgba(var(--ax-color-input-border));
1345
+ }
1346
+
1347
+ .ax-el-ghost-twotone {
1348
+ border-color: transparent;
1349
+ background-color: rgba(var(--ax-color-ghost-fore), 0.1);
1350
+ color: rgba(var(--ax-color-ghost-fore));
1351
+ }
1352
+ .ax-el-ghost-twotone.ax-el-interactive:hover:not(.ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-disabled) {
1353
+ background-color: rgba(var(--ax-color-ghost-fore), 0.15);
1354
+ }
1355
+ .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
1356
+ background-color: rgba(var(--ax-color-ghost-fore), 0.15);
1357
+ }
1358
+ .ax-el-ghost-twotone.ax-el-interactive:active:not(.ax-el-ghost-twotone.ax-el-interactive:active.ax-state-selected, .ax-el-ghost-twotone.ax-el-interactive:active.ax-state-disabled) {
1359
+ background-color: rgba(var(--ax-color-ghost-fore), 0.25);
1360
+ }
1361
+ .ax-el-ghost-twotone.ax-state-selected {
1362
+ background-color: rgba(var(--ax-color-ghost-fore), 0.25);
1363
+ color: rgba(var(--ax-color-ghost-fore));
1364
+ border-style: none;
1365
+ }
1366
+ .ax-el-ghost-twotone .ax-ripple {
1367
+ background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1368
+ }
1369
+ .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1370
+ border-color: rgba(var(--ax-color-ghost-fore));
1371
+ border-bottom-color: transparent;
1372
+ }
1373
+ .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1374
+ outline-color: rgba(var(--ax-color-primary-500));
1375
+ }
1376
+ .ax-el-ghost-twotone.ax-dropdown-button-marker {
1377
+ border-inline-start-color: rgba(var(--ax-color-input-border));
1378
+ }
1379
+
1380
+ .ax-el-ghost-link {
1381
+ border-style: none;
1382
+ background-color: transparent;
1383
+ color: rgba(var(--ax-color-ghost-fore), 0.8);
1384
+ }
1385
+ .ax-el-ghost-link.ax-state-selected {
1386
+ text-decoration: underline;
1387
+ }
1388
+ .ax-el-ghost-link .ax-ripple {
1389
+ background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1390
+ }
1391
+ .ax-el-ghost-link ax-loading-spinner .ax-loader {
1392
+ border-color: rgba(var(--ax-color-ghost-fore));
1393
+ border-bottom-color: transparent;
1394
+ }
1395
+ .ax-el-ghost-link > button:is(.ax-el-ghost-link > button:focus-visible, .ax-el-ghost-link > button.ax-state-focus) {
1396
+ outline-color: rgba(var(--ax-color-primary-500));
1397
+ }
1398
+ .ax-el-ghost-link.ax-dropdown-button-marker {
1399
+ border-inline-start-color: rgba(var(--ax-color-input-border));
1400
+ }
1401
+
1402
+ .ax-dark .ax-el-primary-solid {
1403
+ background-color: rgba(var(--ax-color-primary-200));
1404
+ color: rgba(var(--ax-color-primary-fore-tint));
1405
+ border-color: rgba(var(--ax-color-primary-200));
1406
+ }
1407
+ .ax-dark .ax-el-primary-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1408
+ color: rgba(var(--ax-color-primary-800));
1409
+ }
1410
+ .ax-dark .ax-el-primary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1411
+ background-color: rgba(var(--ax-color-primary-300));
1412
+ color: rgba(var(--ax-color-primary-fore-tint));
1413
+ }
1414
+ .ax-dark .ax-el-primary-solid.ax-state-selected {
1415
+ background-color: rgba(var(--ax-color-primary-400));
1416
+ }
1417
+ .ax-dark .ax-el-primary-solid .ax-ripple {
1418
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1419
+ }
1420
+ .ax-dark .ax-el-primary-solid ax-loading-spinner .ax-loader {
1421
+ border-color: rgba(var(--ax-color-primary-fore-tint));
1422
+ border-bottom-color: transparent;
1423
+ }
1424
+ .ax-dark .ax-el-primary-solid > button:is(.ax-dark .ax-el-primary-solid > button:focus-visible, .ax-dark .ax-el-primary-solid > button.ax-state-focus) {
1425
+ outline-color: rgba(var(--ax-color-primary-200));
1426
+ }
1427
+ .ax-dark .ax-el-primary-solid.ax-dropdown-button-marker {
1428
+ border-inline-start-color: rgba(var(--ax-color-primary-900));
1429
+ }
1430
+ .ax-dark .ax-el-primary-twotone {
1431
+ background-color: rgba(var(--ax-color-primary-200));
1432
+ color: rgba(var(--ax-color-primary-fore-tint));
1433
+ border-color: rgba(var(--ax-color-primary-200));
1434
+ }
1435
+ .ax-dark .ax-el-primary-twotone .ax-action-item-suffix ax-text {
1436
+ color: rgba(var(--ax-color-primary-800));
1437
+ }
1438
+ .ax-dark .ax-el-primary-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1439
+ background-color: rgba(var(--ax-color-primary-300));
1440
+ }
1441
+ .ax-dark .ax-el-primary-twotone.ax-state-selected {
1442
+ background-color: rgba(var(--ax-color-primary-400));
1443
+ }
1444
+ .ax-dark .ax-el-primary-twotone .ax-ripple {
1445
+ background-color: rgba(var(--ax-color-primary-500), 0.3);
1446
+ }
1447
+ .ax-dark .ax-el-primary-twotone ax-loading-spinner .ax-loader {
1448
+ border-color: rgba(var(--ax-color-primary-fore-tint));
1449
+ border-bottom-color: transparent;
1450
+ }
1451
+ .ax-dark .ax-el-primary-twotone.ax-dropdown-button-marker {
1452
+ border-inline-start-color: rgba(var(--ax-color-primary-950));
1453
+ }
1454
+ .ax-dark .ax-el-primary-outline {
1455
+ border-color: rgba(var(--ax-color-primary-200));
1456
+ color: rgba(var(--ax-color-primary-200));
1457
+ }
1458
+ .ax-dark .ax-el-primary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1459
+ border-color: rgba(var(--ax-color-primary-300));
1460
+ color: rgba(var(--ax-color-primary-300));
1461
+ background-color: transparent;
1462
+ }
1463
+ .ax-dark .ax-el-primary-outline.ax-state-selected {
1464
+ border-color: rgba(var(--ax-color-primary-300));
1465
+ color: rgba(var(--ax-color-primary-300));
1466
+ }
1467
+ .ax-dark .ax-el-primary-outline .ax-ripple {
1468
+ border-color: rgba(var(--ax-color-primary-500), 0.3);
1469
+ }
1470
+ .ax-dark .ax-el-primary-outline ax-loading-spinner .ax-loader {
1471
+ border-color: rgba(var(--ax-color-primary-fore-tint));
1472
+ border-bottom-color: transparent;
1473
+ }
1474
+ .ax-dark .ax-el-primary-outline > button:is(.ax-dark .ax-el-primary-outline > button:focus-visible, .ax-dark .ax-el-primary-outline > button.ax-state-focus) {
1475
+ border-color: rgba(var(--ax-color-primary-300));
1476
+ color: rgba(var(--ax-color-primary-300));
1477
+ }
1478
+ .ax-dark .ax-el-primary-blank {
1479
+ color: rgba(var(--ax-color-primary-300));
1480
+ background-color: transparent;
1481
+ }
1482
+ .ax-dark .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1483
+ background-color: rgba(var(--ax-color-primary-200));
1484
+ color: rgba(var(--ax-color-primary-fore-tint));
1485
+ }
1486
+ .ax-dark .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1487
+ color: rgba(var(--ax-color-primary-800));
1488
+ }
1489
+ .ax-dark .ax-el-primary-blank.ax-state-selected {
1490
+ background-color: rgba(var(--ax-color-primary-500));
1491
+ color: rgba(var(--ax-color-primary-fore));
1492
+ }
1493
+ .ax-dark .ax-el-primary-blank .ax-ripple {
1494
+ background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
1495
+ }
1496
+ .ax-dark .ax-el-primary-blank ax-loading-spinner .ax-loader {
1497
+ border-color: rgba(var(--ax-color-primary-fore-tint));
1498
+ border-bottom-color: transparent;
1499
+ }
1500
+ .ax-dark .ax-el-primary-link {
1501
+ color: rgba(var(--ax-color-primary-300));
1502
+ background-color: transparent;
1503
+ }
1504
+ .ax-dark .ax-el-primary-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1505
+ color: rgba(var(--ax-color-primary-400));
1506
+ }
1507
+ .ax-dark .ax-el-primary-link.ax-state-selected {
1508
+ background-color: rgba(var(--ax-color-primary-500));
1509
+ color: rgba(var(--ax-color-primary-fore));
1510
+ }
1511
+ .ax-dark .ax-el-primary-link .ax-ripple {
1512
+ background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
1513
+ }
1514
+ .ax-dark .ax-el-primary-link ax-loading-spinner .ax-loader {
1515
+ border-color: rgba(var(--ax-color-primary-fore-tint));
1516
+ border-bottom-color: transparent;
1517
+ }
1518
+ .ax-dark .ax-el-success-solid {
1519
+ background-color: rgba(var(--ax-color-success-200));
1520
+ color: rgba(var(--ax-color-success-fore-tint));
1521
+ border-color: rgba(var(--ax-color-success-200));
1522
+ }
1523
+ .ax-dark .ax-el-success-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1524
+ color: rgba(var(--ax-color-success-800));
1525
+ }
1526
+ .ax-dark .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1527
+ background-color: rgba(var(--ax-color-success-300));
1528
+ color: rgba(var(--ax-color-success-fore-tint));
1529
+ }
1530
+ .ax-dark .ax-el-success-solid.ax-state-selected {
1531
+ background-color: rgba(var(--ax-color-success-400));
1532
+ }
1533
+ .ax-dark .ax-el-success-solid .ax-ripple {
1534
+ background-color: rgba(var(--ax-color-success-500), 0.3) !important;
1535
+ }
1536
+ .ax-dark .ax-el-success-solid ax-loading-spinner .ax-loader {
1537
+ border-color: rgba(var(--ax-color-success-fore-tint));
1538
+ border-bottom-color: transparent;
1539
+ }
1540
+ .ax-dark .ax-el-success-solid > button:is(.ax-dark .ax-el-success-solid > button:focus-visible, .ax-dark .ax-el-success-solid > button.ax-state-focus) {
1541
+ outline-color: rgba(var(--ax-color-primary-200));
1542
+ }
1543
+ .ax-dark .ax-el-success-solid.ax-dropdown-button-marker {
1544
+ border-inline-start-color: rgba(var(--ax-color-success-900));
1545
+ }
1546
+ .ax-dark .ax-el-success-twotone {
1547
+ background-color: rgba(var(--ax-color-success-200));
1548
+ color: rgba(var(--ax-color-success-fore-tint));
1549
+ border-color: rgba(var(--ax-color-success-200));
1550
+ }
1551
+ .ax-dark .ax-el-success-twotone .ax-action-item-suffix ax-text {
1552
+ color: rgba(var(--ax-color-success-800));
1553
+ }
1554
+ .ax-dark .ax-el-success-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1555
+ background-color: rgba(var(--ax-color-success-300));
1556
+ }
1557
+ .ax-dark .ax-el-success-twotone.ax-state-selected {
1558
+ background-color: rgba(var(--ax-color-success-400));
1559
+ }
1560
+ .ax-dark .ax-el-success-twotone .ax-ripple {
1561
+ background-color: rgba(var(--ax-color-success-500), 0.3);
1562
+ }
1563
+ .ax-dark .ax-el-success-twotone ax-loading-spinner .ax-loader {
1564
+ border-color: rgba(var(--ax-color-success-fore-tint));
1565
+ border-bottom-color: transparent;
1566
+ }
1567
+ .ax-dark .ax-el-success-twotone.ax-dropdown-button-marker {
1568
+ border-inline-start-color: rgba(var(--ax-color-success-950));
1569
+ }
1570
+ .ax-dark .ax-el-success-outline {
1571
+ border-color: rgba(var(--ax-color-success-200));
1572
+ color: rgba(var(--ax-color-success-200));
1573
+ }
1574
+ .ax-dark .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1575
+ border-color: rgba(var(--ax-color-success-300));
1576
+ color: rgba(var(--ax-color-success-300));
1577
+ background-color: transparent;
1578
+ }
1579
+ .ax-dark .ax-el-success-outline.ax-state-selected {
1580
+ border-color: rgba(var(--ax-color-success-300));
1581
+ color: rgba(var(--ax-color-success-300));
1582
+ }
1583
+ .ax-dark .ax-el-success-outline .ax-ripple {
1584
+ border-color: rgba(var(--ax-color-success-500), 0.3);
1585
+ }
1586
+ .ax-dark .ax-el-success-outline ax-loading-spinner .ax-loader {
1587
+ border-color: rgba(var(--ax-color-success-fore-tint));
1588
+ border-bottom-color: transparent;
1589
+ }
1590
+ .ax-dark .ax-el-success-outline > button:is(.ax-dark .ax-el-success-outline > button:focus-visible, .ax-dark .ax-el-success-outline > button.ax-state-focus) {
1591
+ border-color: rgba(var(--ax-color-success-300));
1592
+ color: rgba(var(--ax-color-success-300));
1593
+ }
1594
+ .ax-dark .ax-el-success-blank {
1595
+ color: rgba(var(--ax-color-success-300));
1596
+ background-color: transparent;
1597
+ }
1598
+ .ax-dark .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1599
+ background-color: rgba(var(--ax-color-success-200));
1600
+ color: rgba(var(--ax-color-success-fore-tint));
1601
+ }
1602
+ .ax-dark .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1603
+ color: rgba(var(--ax-color-success-800));
1604
+ }
1605
+ .ax-dark .ax-el-success-blank.ax-state-selected {
1606
+ background-color: rgba(var(--ax-color-success-500));
1607
+ color: rgba(var(--ax-color-success-fore));
1608
+ }
1609
+ .ax-dark .ax-el-success-blank .ax-ripple {
1610
+ background-color: rgba(var(--ax-color-success-300), 0.3) !important;
1611
+ }
1612
+ .ax-dark .ax-el-success-blank ax-loading-spinner .ax-loader {
1613
+ border-color: rgba(var(--ax-color-success-fore-tint));
1614
+ border-bottom-color: transparent;
1615
+ }
1616
+ .ax-dark .ax-el-success-link {
1617
+ color: rgba(var(--ax-color-success-300));
1618
+ background-color: transparent;
1619
+ }
1620
+ .ax-dark .ax-el-success-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1621
+ color: rgba(var(--ax-color-success-400));
1622
+ }
1623
+ .ax-dark .ax-el-success-link.ax-state-selected {
1624
+ background-color: rgba(var(--ax-color-success-500));
1625
+ color: rgba(var(--ax-color-success-fore));
1626
+ }
1627
+ .ax-dark .ax-el-success-link .ax-ripple {
1628
+ background-color: rgba(var(--ax-color-success-300), 0.3) !important;
1629
+ }
1630
+ .ax-dark .ax-el-success-link ax-loading-spinner .ax-loader {
1631
+ border-color: rgba(var(--ax-color-success-fore-tint));
1632
+ border-bottom-color: transparent;
1633
+ }
1634
+ .ax-dark .ax-el-warning-solid {
1635
+ background-color: rgba(var(--ax-color-warning-200));
1636
+ color: rgba(var(--ax-color-warning-fore-tint));
1637
+ border-color: rgba(var(--ax-color-warning-200));
1638
+ }
1639
+ .ax-dark .ax-el-warning-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1640
+ color: rgba(var(--ax-color-warning-800));
1641
+ }
1642
+ .ax-dark .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1643
+ background-color: rgba(var(--ax-color-warning-300));
1644
+ color: rgba(var(--ax-color-warning-fore-tint));
1645
+ }
1646
+ .ax-dark .ax-el-warning-solid.ax-state-selected {
1647
+ background-color: rgba(var(--ax-color-warning-400));
1648
+ }
1649
+ .ax-dark .ax-el-warning-solid .ax-ripple {
1650
+ background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
1651
+ }
1652
+ .ax-dark .ax-el-warning-solid ax-loading-spinner .ax-loader {
1653
+ border-color: rgba(var(--ax-color-warning-fore-tint));
1654
+ border-bottom-color: transparent;
1655
+ }
1656
+ .ax-dark .ax-el-warning-solid > button:is(.ax-dark .ax-el-warning-solid > button:focus-visible, .ax-dark .ax-el-warning-solid > button.ax-state-focus) {
1657
+ outline-color: rgba(var(--ax-color-primary-200));
1658
+ }
1659
+ .ax-dark .ax-el-warning-solid.ax-dropdown-button-marker {
1660
+ border-inline-start-color: rgba(var(--ax-color-warning-900));
1661
+ }
1662
+ .ax-dark .ax-el-warning-twotone {
1663
+ background-color: rgba(var(--ax-color-warning-200));
1664
+ color: rgba(var(--ax-color-warning-fore-tint));
1665
+ border-color: rgba(var(--ax-color-warning-200));
1666
+ }
1667
+ .ax-dark .ax-el-warning-twotone .ax-action-item-suffix ax-text {
1668
+ color: rgba(var(--ax-color-warning-800));
1669
+ }
1670
+ .ax-dark .ax-el-warning-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1671
+ background-color: rgba(var(--ax-color-warning-300));
1672
+ }
1673
+ .ax-dark .ax-el-warning-twotone.ax-state-selected {
1674
+ background-color: rgba(var(--ax-color-warning-400));
1675
+ }
1676
+ .ax-dark .ax-el-warning-twotone .ax-ripple {
1677
+ background-color: rgba(var(--ax-color-warning-500), 0.3);
1678
+ }
1679
+ .ax-dark .ax-el-warning-twotone ax-loading-spinner .ax-loader {
1680
+ border-color: rgba(var(--ax-color-warning-fore-tint));
1681
+ border-bottom-color: transparent;
1682
+ }
1683
+ .ax-dark .ax-el-warning-twotone.ax-dropdown-button-marker {
1684
+ border-inline-start-color: rgba(var(--ax-color-warning-950));
1685
+ }
1686
+ .ax-dark .ax-el-warning-outline {
1687
+ border-color: rgba(var(--ax-color-warning-200));
1688
+ color: rgba(var(--ax-color-warning-200));
1689
+ }
1690
+ .ax-dark .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1691
+ border-color: rgba(var(--ax-color-warning-300));
1692
+ color: rgba(var(--ax-color-warning-300));
1693
+ background-color: transparent;
1694
+ }
1695
+ .ax-dark .ax-el-warning-outline.ax-state-selected {
1696
+ border-color: rgba(var(--ax-color-warning-300));
1697
+ color: rgba(var(--ax-color-warning-300));
1698
+ }
1699
+ .ax-dark .ax-el-warning-outline .ax-ripple {
1700
+ border-color: rgba(var(--ax-color-warning-500), 0.3);
1701
+ }
1702
+ .ax-dark .ax-el-warning-outline ax-loading-spinner .ax-loader {
1703
+ border-color: rgba(var(--ax-color-warning-fore-tint));
1704
+ border-bottom-color: transparent;
1705
+ }
1706
+ .ax-dark .ax-el-warning-outline > button:is(.ax-dark .ax-el-warning-outline > button:focus-visible, .ax-dark .ax-el-warning-outline > button.ax-state-focus) {
1707
+ border-color: rgba(var(--ax-color-warning-300));
1708
+ color: rgba(var(--ax-color-warning-300));
1709
+ }
1710
+ .ax-dark .ax-el-warning-blank {
1711
+ color: rgba(var(--ax-color-warning-300));
1712
+ background-color: transparent;
1713
+ }
1714
+ .ax-dark .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1715
+ background-color: rgba(var(--ax-color-warning-200));
1716
+ color: rgba(var(--ax-color-warning-fore-tint));
1717
+ }
1718
+ .ax-dark .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1719
+ color: rgba(var(--ax-color-warning-800));
1720
+ }
1721
+ .ax-dark .ax-el-warning-blank.ax-state-selected {
1722
+ background-color: rgba(var(--ax-color-warning-500));
1723
+ color: rgba(var(--ax-color-warning-fore));
1724
+ }
1725
+ .ax-dark .ax-el-warning-blank .ax-ripple {
1726
+ background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
1727
+ }
1728
+ .ax-dark .ax-el-warning-blank ax-loading-spinner .ax-loader {
1729
+ border-color: rgba(var(--ax-color-warning-fore-tint));
1730
+ border-bottom-color: transparent;
1731
+ }
1732
+ .ax-dark .ax-el-warning-link {
1733
+ color: rgba(var(--ax-color-warning-300));
1734
+ background-color: transparent;
1735
+ }
1736
+ .ax-dark .ax-el-warning-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1737
+ color: rgba(var(--ax-color-warning-400));
1738
+ }
1739
+ .ax-dark .ax-el-warning-link.ax-state-selected {
1740
+ background-color: rgba(var(--ax-color-warning-500));
1741
+ color: rgba(var(--ax-color-warning-fore));
1742
+ }
1743
+ .ax-dark .ax-el-warning-link .ax-ripple {
1744
+ background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
1745
+ }
1746
+ .ax-dark .ax-el-warning-link ax-loading-spinner .ax-loader {
1747
+ border-color: rgba(var(--ax-color-warning-fore-tint));
1748
+ border-bottom-color: transparent;
1749
+ }
1750
+ .ax-dark .ax-el-danger-solid {
1751
+ background-color: rgba(var(--ax-color-danger-200));
1752
+ color: rgba(var(--ax-color-danger-fore-tint));
1753
+ border-color: rgba(var(--ax-color-danger-200));
1754
+ }
1755
+ .ax-dark .ax-el-danger-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1756
+ color: rgba(var(--ax-color-danger-800));
1757
+ }
1758
+ .ax-dark .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1759
+ background-color: rgba(var(--ax-color-danger-300));
1760
+ color: rgba(var(--ax-color-danger-fore-tint));
1761
+ }
1762
+ .ax-dark .ax-el-danger-solid.ax-state-selected {
1763
+ background-color: rgba(var(--ax-color-danger-400));
1764
+ }
1765
+ .ax-dark .ax-el-danger-solid .ax-ripple {
1766
+ background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
1767
+ }
1768
+ .ax-dark .ax-el-danger-solid ax-loading-spinner .ax-loader {
1769
+ border-color: rgba(var(--ax-color-danger-fore-tint));
1770
+ border-bottom-color: transparent;
1771
+ }
1772
+ .ax-dark .ax-el-danger-solid > button:is(.ax-dark .ax-el-danger-solid > button:focus-visible, .ax-dark .ax-el-danger-solid > button.ax-state-focus) {
1773
+ outline-color: rgba(var(--ax-color-primary-200));
1774
+ }
1775
+ .ax-dark .ax-el-danger-solid.ax-dropdown-button-marker {
1776
+ border-inline-start-color: rgba(var(--ax-color-danger-900));
1777
+ }
1778
+ .ax-dark .ax-el-danger-twotone {
1779
+ background-color: rgba(var(--ax-color-danger-200));
1780
+ color: rgba(var(--ax-color-danger-fore-tint));
1781
+ border-color: rgba(var(--ax-color-danger-200));
1782
+ }
1783
+ .ax-dark .ax-el-danger-twotone .ax-action-item-suffix ax-text {
1784
+ color: rgba(var(--ax-color-danger-800));
1785
+ }
1786
+ .ax-dark .ax-el-danger-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1787
+ background-color: rgba(var(--ax-color-danger-300));
1788
+ }
1789
+ .ax-dark .ax-el-danger-twotone.ax-state-selected {
1790
+ background-color: rgba(var(--ax-color-danger-400));
1791
+ }
1792
+ .ax-dark .ax-el-danger-twotone .ax-ripple {
1793
+ background-color: rgba(var(--ax-color-danger-500), 0.3);
1794
+ }
1795
+ .ax-dark .ax-el-danger-twotone ax-loading-spinner .ax-loader {
1796
+ border-color: rgba(var(--ax-color-danger-fore-tint));
1797
+ border-bottom-color: transparent;
1798
+ }
1799
+ .ax-dark .ax-el-danger-twotone.ax-dropdown-button-marker {
1800
+ border-inline-start-color: rgba(var(--ax-color-danger-950));
1801
+ }
1802
+ .ax-dark .ax-el-danger-outline {
1803
+ border-color: rgba(var(--ax-color-danger-200));
1804
+ color: rgba(var(--ax-color-danger-200));
1805
+ }
1806
+ .ax-dark .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1807
+ border-color: rgba(var(--ax-color-danger-300));
1808
+ color: rgba(var(--ax-color-danger-300));
1809
+ background-color: transparent;
1810
+ }
1811
+ .ax-dark .ax-el-danger-outline.ax-state-selected {
1812
+ border-color: rgba(var(--ax-color-danger-300));
1813
+ color: rgba(var(--ax-color-danger-300));
1814
+ }
1815
+ .ax-dark .ax-el-danger-outline .ax-ripple {
1816
+ border-color: rgba(var(--ax-color-danger-500), 0.3);
1817
+ }
1818
+ .ax-dark .ax-el-danger-outline ax-loading-spinner .ax-loader {
1819
+ border-color: rgba(var(--ax-color-danger-fore-tint));
1820
+ border-bottom-color: transparent;
1821
+ }
1822
+ .ax-dark .ax-el-danger-outline > button:is(.ax-dark .ax-el-danger-outline > button:focus-visible, .ax-dark .ax-el-danger-outline > button.ax-state-focus) {
1823
+ border-color: rgba(var(--ax-color-danger-300));
1824
+ color: rgba(var(--ax-color-danger-300));
1825
+ }
1826
+ .ax-dark .ax-el-danger-blank {
1827
+ color: rgba(var(--ax-color-danger-300));
1828
+ background-color: transparent;
1829
+ }
1830
+ .ax-dark .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1831
+ background-color: rgba(var(--ax-color-danger-200));
1832
+ color: rgba(var(--ax-color-danger-fore-tint));
1833
+ }
1834
+ .ax-dark .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1835
+ color: rgba(var(--ax-color-danger-800));
1836
+ }
1837
+ .ax-dark .ax-el-danger-blank.ax-state-selected {
1838
+ background-color: rgba(var(--ax-color-danger-500));
1839
+ color: rgba(var(--ax-color-danger-fore));
1840
+ }
1841
+ .ax-dark .ax-el-danger-blank .ax-ripple {
1842
+ background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
1843
+ }
1844
+ .ax-dark .ax-el-danger-blank ax-loading-spinner .ax-loader {
1845
+ border-color: rgba(var(--ax-color-danger-fore-tint));
1846
+ border-bottom-color: transparent;
1847
+ }
1848
+ .ax-dark .ax-el-danger-link {
1849
+ color: rgba(var(--ax-color-danger-300));
1850
+ background-color: transparent;
1851
+ }
1852
+ .ax-dark .ax-el-danger-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1853
+ color: rgba(var(--ax-color-danger-400));
1854
+ }
1855
+ .ax-dark .ax-el-danger-link.ax-state-selected {
1856
+ background-color: rgba(var(--ax-color-danger-500));
1857
+ color: rgba(var(--ax-color-danger-fore));
1858
+ }
1859
+ .ax-dark .ax-el-danger-link .ax-ripple {
1860
+ background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
1861
+ }
1862
+ .ax-dark .ax-el-danger-link ax-loading-spinner .ax-loader {
1863
+ border-color: rgba(var(--ax-color-danger-fore-tint));
1864
+ border-bottom-color: transparent;
1865
+ }
1866
+ .ax-dark .ax-el-neutral-solid {
1867
+ background-color: rgba(var(--ax-color-neutral-200));
1868
+ color: rgba(var(--ax-color-neutral-fore-tint));
1869
+ border-color: rgba(var(--ax-color-neutral-200));
1870
+ }
1871
+ .ax-dark .ax-el-neutral-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1872
+ color: rgba(var(--ax-color-neutral-800));
1873
+ }
1874
+ .ax-dark .ax-el-neutral-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1875
+ background-color: rgba(var(--ax-color-neutral-300));
1876
+ color: rgba(var(--ax-color-neutral-fore-tint));
1877
+ }
1878
+ .ax-dark .ax-el-neutral-solid.ax-state-selected {
1879
+ background-color: rgba(var(--ax-color-neutral-400));
1880
+ }
1881
+ .ax-dark .ax-el-neutral-solid .ax-ripple {
1882
+ background-color: rgba(var(--ax-color-neutral-500), 0.3) !important;
1883
+ }
1884
+ .ax-dark .ax-el-neutral-solid ax-loading-spinner .ax-loader {
1885
+ border-color: rgba(var(--ax-color-neutral-fore-tint));
1886
+ border-bottom-color: transparent;
1887
+ }
1888
+ .ax-dark .ax-el-neutral-solid > button:is(.ax-dark .ax-el-neutral-solid > button:focus-visible, .ax-dark .ax-el-neutral-solid > button.ax-state-focus) {
1889
+ outline-color: rgba(var(--ax-color-primary-200));
1890
+ }
1891
+ .ax-dark .ax-el-neutral-solid.ax-dropdown-button-marker {
1892
+ border-inline-start-color: rgba(var(--ax-color-neutral-900));
1893
+ }
1894
+ .ax-dark .ax-el-neutral-twotone {
1895
+ background-color: rgba(var(--ax-color-neutral-200));
1896
+ color: rgba(var(--ax-color-neutral-fore-tint));
1897
+ border-color: rgba(var(--ax-color-neutral-200));
1898
+ }
1899
+ .ax-dark .ax-el-neutral-twotone .ax-action-item-suffix ax-text {
1900
+ color: rgba(var(--ax-color-neutral-800));
1901
+ }
1902
+ .ax-dark .ax-el-neutral-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1903
+ background-color: rgba(var(--ax-color-neutral-300));
1904
+ }
1905
+ .ax-dark .ax-el-neutral-twotone.ax-state-selected {
1906
+ background-color: rgba(var(--ax-color-neutral-400));
1907
+ }
1908
+ .ax-dark .ax-el-neutral-twotone .ax-ripple {
1909
+ background-color: rgba(var(--ax-color-neutral-500), 0.3);
1910
+ }
1911
+ .ax-dark .ax-el-neutral-twotone ax-loading-spinner .ax-loader {
1912
+ border-color: rgba(var(--ax-color-neutral-fore-tint));
1913
+ border-bottom-color: transparent;
1914
+ }
1915
+ .ax-dark .ax-el-neutral-twotone.ax-dropdown-button-marker {
1916
+ border-inline-start-color: rgba(var(--ax-color-neutral-950));
1917
+ }
1918
+ .ax-dark .ax-el-neutral-outline {
1919
+ border-color: rgba(var(--ax-color-neutral-200));
1920
+ color: rgba(var(--ax-color-neutral-200));
1921
+ }
1922
+ .ax-dark .ax-el-neutral-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1923
+ border-color: rgba(var(--ax-color-neutral-300));
1924
+ color: rgba(var(--ax-color-neutral-300));
1925
+ background-color: transparent;
1926
+ }
1927
+ .ax-dark .ax-el-neutral-outline.ax-state-selected {
1928
+ border-color: rgba(var(--ax-color-neutral-300));
1929
+ color: rgba(var(--ax-color-neutral-300));
1930
+ }
1931
+ .ax-dark .ax-el-neutral-outline .ax-ripple {
1932
+ border-color: rgba(var(--ax-color-neutral-500), 0.3);
1933
+ }
1934
+ .ax-dark .ax-el-neutral-outline ax-loading-spinner .ax-loader {
1935
+ border-color: rgba(var(--ax-color-neutral-fore-tint));
1936
+ border-bottom-color: transparent;
1937
+ }
1938
+ .ax-dark .ax-el-neutral-outline > button:is(.ax-dark .ax-el-neutral-outline > button:focus-visible, .ax-dark .ax-el-neutral-outline > button.ax-state-focus) {
1939
+ border-color: rgba(var(--ax-color-neutral-300));
1940
+ color: rgba(var(--ax-color-neutral-300));
1941
+ }
1942
+ .ax-dark .ax-el-neutral-blank {
1943
+ color: rgba(var(--ax-color-neutral-300));
1944
+ background-color: transparent;
1945
+ }
1946
+ .ax-dark .ax-el-neutral-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1947
+ background-color: rgba(var(--ax-color-neutral-200));
1948
+ color: rgba(var(--ax-color-neutral-fore-tint));
1949
+ }
1950
+ .ax-dark .ax-el-neutral-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1951
+ color: rgba(var(--ax-color-neutral-800));
1952
+ }
1953
+ .ax-dark .ax-el-neutral-blank.ax-state-selected {
1954
+ background-color: rgba(var(--ax-color-neutral-500));
1955
+ color: rgba(var(--ax-color-neutral-fore));
1956
+ }
1957
+ .ax-dark .ax-el-neutral-blank .ax-ripple {
1958
+ background-color: rgba(var(--ax-color-neutral-300), 0.3) !important;
1959
+ }
1960
+ .ax-dark .ax-el-neutral-blank ax-loading-spinner .ax-loader {
1961
+ border-color: rgba(var(--ax-color-neutral-fore-tint));
1962
+ border-bottom-color: transparent;
1963
+ }
1964
+ .ax-dark .ax-el-neutral-link {
1965
+ color: rgba(var(--ax-color-neutral-300));
1966
+ background-color: transparent;
1967
+ }
1968
+ .ax-dark .ax-el-neutral-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1969
+ color: rgba(var(--ax-color-neutral-400));
1970
+ }
1971
+ .ax-dark .ax-el-neutral-link.ax-state-selected {
1972
+ background-color: rgba(var(--ax-color-neutral-500));
1973
+ color: rgba(var(--ax-color-neutral-fore));
1974
+ }
1975
+ .ax-dark .ax-el-neutral-link .ax-ripple {
1976
+ background-color: rgba(var(--ax-color-neutral-300), 0.3) !important;
1977
+ }
1978
+ .ax-dark .ax-el-neutral-link ax-loading-spinner .ax-loader {
1979
+ border-color: rgba(var(--ax-color-neutral-fore-tint));
1980
+ border-bottom-color: transparent;
1981
+ }
1982
+ .ax-dark .ax-el-ghost-solid {
1983
+ border-color: rgba(var(--ax-color-ghost), 0.5);
1984
+ background-color: rgba(var(--ax-color-ghost), 0.5);
1985
+ }
1986
+ .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-solid.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover.ax-state-disabled) {
1987
+ background-color: rgba(var(--ax-color-ghost), 0.75);
1988
+ border-color: rgba(var(--ax-color-ghost), 0.75);
1989
+ color: rgba(var(--ax-color-ghost-fore));
1990
+ }
1991
+ .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover + .ax-dropdown-button-marker {
1992
+ border-color: rgba(var(--ax-color-ghost), 0.75);
1993
+ background-color: rgba(var(--ax-color-ghost), 0.75);
1994
+ color: rgba(var(--ax-color-ghost-fore));
1995
+ }
1996
+ .ax-dark .ax-el-ghost-solid.ax-el-interactive:active:not(.ax-dark .ax-el-ghost-solid.ax-el-interactive:active.ax-state-selected, .ax-dark .ax-el-ghost-solid.ax-el-interactive:active.ax-state-disabled) {
1997
+ border-color: rgba(var(--ax-color-ghost));
1998
+ background-color: rgba(var(--ax-color-ghost));
1999
+ color: rgba(var(--ax-color-ghost-fore));
2000
+ }
2001
+ .ax-dark .ax-el-ghost-solid.ax-state-selected {
2002
+ border-color: rgba(var(--ax-color-ghost));
2003
+ background-color: rgba(var(--ax-color-ghost));
2004
+ color: rgba(var(--ax-color-ghost-fore));
2005
+ }
2006
+ .ax-dark .ax-el-ghost-solid .ax-ripple {
2007
+ background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2008
+ }
2009
+ .ax-dark .ax-el-ghost-outline {
2010
+ border-color: rgba(var(--ax-color-ghost-fore), 0.5);
2011
+ }
2012
+ .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-outline.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover.ax-state-disabled) {
2013
+ border-color: rgba(var(--ax-color-ghost-fore), 0.75);
2014
+ }
2015
+ .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
2016
+ border-color: rgba(var(--ax-color-ghost-fore), 0.75);
2017
+ }
2018
+ .ax-dark .ax-el-ghost-outline.ax-state-selected {
2019
+ border-color: rgba(var(--ax-color-ghost-fore));
2020
+ background-color: rgba(var(--ax-color-ghost));
2021
+ color: rgba(var(--ax-color-ghost-fore));
2022
+ }
2023
+ .ax-dark .ax-el-ghost-outline .ax-ripple {
2024
+ background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2025
+ }
2026
+ .ax-dark .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2027
+ border-color: rgba(var(--ax-color-ghost-fore));
2028
+ border-bottom-color: transparent;
2029
+ }
2030
+ .ax-dark .ax-el-ghost-blank.ax-state-selected {
2031
+ background-color: rgba(var(--ax-color-ghost));
2032
+ color: rgba(var(--ax-color-ghost-fore));
2033
+ }
2034
+ .ax-dark .ax-el-ghost-blank.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-blank.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-blank.ax-el-interactive:hover.ax-state-disabled) {
2035
+ background-color: rgba(var(--ax-color-ghost), 0.5);
2036
+ }
2037
+ .ax-dark .ax-el-ghost-blank.ax-el-interactive:active:not(.ax-dark .ax-el-ghost-blank.ax-el-interactive:active.ax-state-selected, .ax-dark .ax-el-ghost-blank.ax-el-interactive:active.ax-state-disabled) {
2038
+ background-color: rgba(var(--ax-color-ghost));
2039
+ }
2040
+ .ax-dark .ax-el-ghost-blank .ax-ripple {
2041
+ background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2042
+ }
2043
+ .ax-dark .ax-el-ghost-blank > button:is(.ax-dark .ax-el-ghost-blank > button:focus-visible, .ax-dark .ax-el-ghost-blank > button.ax-state-focus) {
2044
+ outline-color: rgba(var(--ax-color-ghost-fore));
2045
+ }
2046
+ .ax-dark .ax-el-ghost-twotone {
2047
+ background-color: rgba(var(--ax-color-ghost), 0.3);
2048
+ }
2049
+ .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-disabled) {
2050
+ background-color: rgba(var(--ax-color-ghost), 0.5);
2051
+ }
2052
+ .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
2053
+ background-color: rgba(var(--ax-color-ghost), 0.5);
2054
+ }
2055
+ .ax-dark .ax-el-ghost-twotone.ax-el-interactive:active:not(.ax-dark .ax-el-ghost-twotone.ax-el-interactive:active.ax-state-selected, .ax-dark .ax-el-ghost-twotone.ax-el-interactive:active.ax-state-disabled) {
2056
+ background-color: rgba(var(--ax-color-ghost), 0.8);
2057
+ }
2058
+ .ax-dark .ax-el-ghost-twotone.ax-state-selected {
2059
+ background-color: rgba(var(--ax-color-ghost), 0.8);
2060
+ color: rgba(var(--ax-color-ghost-fore));
2061
+ }
2062
+ .ax-dark .ax-el-ghost-twotone .ax-ripple {
2063
+ background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2064
+ }
2065
+ .ax-dark .ax-el-ghost-twotone > button:is(.ax-dark .ax-el-ghost-twotone > button:focus-visible, .ax-dark .ax-el-ghost-twotone > button.ax-state-focus) {
2066
+ outline-color: rgba(var(--ax-color-ghost-fore));
2067
+ }
2068
+ .ax-dark .ax-el-ghost-link .ax-ripple {
2069
+ background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2070
+ }
2071
+ .ax-dark .ax-el-ghost-link > button:is(.ax-dark .ax-el-ghost-link > button:focus-visible, .ax-dark .ax-el-ghost-link > button.ax-state-focus) {
2072
+ outline-color: rgba(var(--ax-color-ghost-fore));
2073
+ }
2074
+
502
2075
  .ax-drop-down {
503
2076
  display: contents;
504
2077
  }
@@ -523,12 +2096,12 @@ body {
523
2096
  height: fit-content;
524
2097
  overflow: hidden;
525
2098
  border-width: 1px;
526
- border-color: rgba(var(--ax-sys-border-color));
527
- background-color: rgba(var(--ax-sys-color-surface-lowest));
2099
+ border-color: rgba(var(--ax-color-border-default));
2100
+ background-color: rgba(var(--ax-color-surface));
528
2101
  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
529
2102
  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
530
2103
  box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
531
- border-radius: var(--ax-sys-border-radius);
2104
+ border-radius: var(--ax-rounded-border-default);
532
2105
  }
533
2106
  @media (min-width: 320px) and (max-width: 640px) {
534
2107
  .ax-overlay-pane {
@@ -537,7 +2110,7 @@ body {
537
2110
  }
538
2111
  .ax-overlay-pane ax-header,
539
2112
  .ax-overlay-pane ax-footer {
540
- background-color: rgba(var(--ax-sys-color-surface));
2113
+ background-color: rgba(var(--ax-color-surface));
541
2114
  padding: 0.75rem;
542
2115
  }
543
2116
  .ax-overlay-pane.ax-overlay-center {
@@ -549,9 +2122,9 @@ body {
549
2122
  height: auto;
550
2123
  max-height: 85vh;
551
2124
  width: 100%;
552
- background-color: rgba(var(--ax-sys-color-surface));
553
- border-top-left-radius: var(--ax-sys-border-radius);
554
- border-top-right-radius: var(--ax-sys-border-radius);
2125
+ background-color: rgba(var(--ax-color-surface));
2126
+ border-top-left-radius: var(--ax-rounded-border-default);
2127
+ border-top-right-radius: var(--ax-rounded-border-default);
555
2128
  }
556
2129
  .ax-overlay-pane.ax-overlay-actionsheet.ax-full {
557
2130
  height: 95vh;
@@ -562,27 +2135,292 @@ body {
562
2135
  height: 100vh;
563
2136
  }
564
2137
 
2138
+ :root {
2139
+ --ax-editor-font-size: 1rem;
2140
+ --ax-editor-space-size: 1rem;
2141
+ }
2142
+
2143
+ .ax-dark .ax-editor-container.ax-look-fill:focus-within {
2144
+ box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-200));
2145
+ }
2146
+ .ax-dark .ax-editor-container.ax-look-fill.ax-state-error {
2147
+ background-color: rgba(var(--ax-color-danger-200));
2148
+ color: rgba(var(--ax-color-danger-fore));
2149
+ }
2150
+ .ax-dark .ax-editor-container.ax-look-fill.ax-state-error:focus-within {
2151
+ box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-200));
2152
+ }
2153
+ .ax-dark .ax-editor-container.ax-look-fill.ax-state-error .ax-input::placeholder {
2154
+ color: rgba(var(--ax-color-danger-200));
2155
+ }
2156
+ .ax-dark .ax-editor-container.ax-look-flat:focus-within {
2157
+ border-color: rgba(var(--ax-color-primary-200));
2158
+ }
2159
+ .ax-dark .ax-editor-container.ax-look-flat.ax-state-error {
2160
+ border-color: rgba(var(--ax-color-danger-200));
2161
+ }
2162
+ .ax-dark .ax-editor-container.ax-look-flat.ax-state-error .ax-input::placeholder {
2163
+ color: rgba(var(--ax-color-danger-200));
2164
+ }
2165
+ .ax-dark .ax-editor-container.ax-look-solid:focus-within, .ax-dark .ax-editor-container.ax-look-outline:focus-within {
2166
+ box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-200));
2167
+ border-color: rgba(var(--ax-color-primary-200));
2168
+ }
2169
+ .ax-dark .ax-editor-container.ax-look-solid.ax-state-error, .ax-dark .ax-editor-container.ax-look-outline.ax-state-error {
2170
+ border-color: rgba(var(--ax-color-danger-200));
2171
+ }
2172
+ .ax-dark .ax-editor-container.ax-look-solid.ax-state-error:focus-within, .ax-dark .ax-editor-container.ax-look-outline.ax-state-error:focus-within {
2173
+ box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-200));
2174
+ border-color: rgba(var(--ax-color-danger-200));
2175
+ }
2176
+ .ax-dark .ax-editor-container.ax-look-solid.ax-state-error .ax-input::placeholder, .ax-dark .ax-editor-container.ax-look-outline.ax-state-error .ax-input::placeholder {
2177
+ color: rgba(var(--ax-color-danger-200));
2178
+ }
2179
+
2180
+ .ax-editor-container {
2181
+ display: flex;
2182
+ height: var(--ax-size-default);
2183
+ width: 100%;
2184
+ align-items: center;
2185
+ overflow: hidden;
2186
+ font-size: 0.875rem;
2187
+ line-height: 1;
2188
+ color: rgba(var(--ax-color-input-surface-fore));
2189
+ }
2190
+ .ax-editor-container .ax-editor-container {
2191
+ border-radius: 0 !important;
2192
+ border: 0px !important;
2193
+ height: 100% !important;
2194
+ }
2195
+ .ax-editor-container .ax-editor-container:focus-within {
2196
+ box-shadow: none !important;
2197
+ }
2198
+ .ax-editor-container .ax-editor-container:focus {
2199
+ box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
2200
+ }
2201
+ .ax-editor-container.ax-state-disabled {
2202
+ opacity: 0.5;
2203
+ cursor: not-allowed;
2204
+ }
2205
+ .ax-editor-container.ax-look-solid, .ax-editor-container.ax-look-outline {
2206
+ border-radius: var(--ax-rounded-border-default);
2207
+ border-width: 1px;
2208
+ border-color: rgba(var(--ax-color-input-border));
2209
+ background-color: rgba(var(--ax-color-input-surface));
2210
+ }
2211
+ .ax-editor-container.ax-look-solid:focus-within, .ax-editor-container.ax-look-outline:focus-within {
2212
+ box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
2213
+ border-color: rgba(var(--ax-color-primary-500));
2214
+ }
2215
+ .ax-editor-container.ax-look-solid.ax-state-error, .ax-editor-container.ax-look-outline.ax-state-error {
2216
+ border-color: rgba(var(--ax-color-danger-500));
2217
+ }
2218
+ .ax-editor-container.ax-look-solid.ax-state-error:focus-within, .ax-editor-container.ax-look-outline.ax-state-error:focus-within {
2219
+ box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-500));
2220
+ border-color: rgba(var(--ax-color-danger-500));
2221
+ }
2222
+ .ax-editor-container.ax-look-solid.ax-state-error .ax-input::placeholder, .ax-editor-container.ax-look-outline.ax-state-error .ax-input::placeholder {
2223
+ color: rgba(var(--ax-color-danger-500));
2224
+ }
2225
+ .ax-editor-container.ax-look-flat {
2226
+ border-radius: 0px;
2227
+ border-bottom-width: 1px;
2228
+ border-color: rgba(var(--ax-color-input-border));
2229
+ }
2230
+ .ax-editor-container.ax-look-flat:focus-within {
2231
+ border-color: rgba(var(--ax-color-primary-500));
2232
+ }
2233
+ .ax-editor-container.ax-look-flat.ax-state-error {
2234
+ border-color: rgba(var(--ax-color-danger-500));
2235
+ }
2236
+ .ax-editor-container.ax-look-flat.ax-state-error .ax-input::placeholder {
2237
+ color: rgba(var(--ax-color-danger-500));
2238
+ }
2239
+ .ax-editor-container.ax-look-outline {
2240
+ background-color: transparent !important;
2241
+ }
2242
+ .ax-editor-container.ax-look-fill {
2243
+ border-radius: var(--ax-rounded-border-default);
2244
+ background-color: rgba(var(--ax-color-on-surface));
2245
+ }
2246
+ .ax-editor-container.ax-look-fill:focus-within {
2247
+ box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-500));
2248
+ }
2249
+ .ax-editor-container.ax-look-fill.ax-state-error {
2250
+ background-color: rgba(var(--ax-color-danger-50));
2251
+ color: rgba(var(--ax-color-danger-fore-tint));
2252
+ }
2253
+ .ax-editor-container.ax-look-fill.ax-state-error:focus-within {
2254
+ box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-500));
2255
+ }
2256
+ .ax-editor-container.ax-look-fill.ax-state-error .ax-input::placeholder {
2257
+ color: rgba(var(--ax-color-danger-500));
2258
+ }
2259
+ .ax-editor-container .ax-editor-input {
2260
+ height: 100%;
2261
+ flex: 1 1 0%;
2262
+ }
2263
+ .ax-editor-container .ax-editor-input .ax-input {
2264
+ height: 100%;
2265
+ }
2266
+ .ax-editor-container .ax-input {
2267
+ padding: 0 calc(var(--ax-editor-font-size) - 4px);
2268
+ font-size: var(--ax-editor-font-size);
2269
+ line-height: var(--ax-editor-font-size);
2270
+ cursor: inherit;
2271
+ }
2272
+ .ax-editor-container .ax-input::placeholder {
2273
+ font-size: inherit;
2274
+ font-weight: 400;
2275
+ color: rgb(var(--ax-color-input-surface-fore), 0.5);
2276
+ }
2277
+ .ax-editor-container .ax-input:focus, .ax-editor-container .ax-input:focus-visible, .ax-editor-container .ax-input:focus-within {
2278
+ outline: none;
2279
+ }
2280
+ .ax-editor-container.ax-xs .ax-input {
2281
+ padding: 0 calc(var(--ax-editor-space-size) - 8px);
2282
+ font-size: calc(var(--ax-editor-font-size) - 4px);
2283
+ line-height: 1rem;
2284
+ }
2285
+ .ax-editor-container.ax-sm .ax-input {
2286
+ padding: 0 calc(var(--ax-editor-space-size) - 4px);
2287
+ font-size: calc(var(--ax-editor-font-size) - 2px);
2288
+ line-height: calc(var(--ax-editor-font-size) - 2px);
2289
+ }
2290
+ .ax-editor-container.ax-md .ax-input {
2291
+ padding: 0 calc(var(--ax-editor-space-size) - 4px);
2292
+ font-size: var(--ax-editor-font-size);
2293
+ line-height: var(--ax-editor-font-size);
2294
+ }
2295
+ .ax-editor-container.ax-lg .ax-input {
2296
+ padding: 0 var(--ax-editor-space-size);
2297
+ font-size: calc(var(--ax-editor-font-size) + 2px);
2298
+ line-height: calc(var(--ax-editor-font-size) + 2px);
2299
+ }
2300
+ .ax-editor-container.ax-xl .ax-input {
2301
+ padding: 0 var(--ax-editor-space-size);
2302
+ font-size: calc(var(--ax-editor-font-size) + 4px);
2303
+ line-height: calc(var(--ax-editor-font-size) + 4px);
2304
+ }
2305
+ .ax-editor-container .ax-editor-control {
2306
+ display: flex;
2307
+ height: 100%;
2308
+ align-items: center;
2309
+ justify-content: center;
2310
+ padding-inline-start: 0.5rem;
2311
+ font-size: 1.125rem;
2312
+ line-height: 1.75rem;
2313
+ color: rgba(var(--ax-color-input-surface-fore));
2314
+ }
2315
+ .ax-editor-container.ax-button-icon {
2316
+ padding: 0 0.5rem;
2317
+ }
2318
+ .ax-editor-container .ax-input,
2319
+ .ax-editor-container .ax-text-area {
2320
+ text-align: inherit;
2321
+ font-family: inherit;
2322
+ font-size: inherit;
2323
+ line-height: inherit;
2324
+ height: 100%;
2325
+ width: 100%;
2326
+ flex: 1 1 0%;
2327
+ background-color: transparent;
2328
+ font-weight: 400;
2329
+ }
2330
+ .ax-editor-container .ax-input:focus,
2331
+ .ax-editor-container .ax-text-area:focus {
2332
+ box-shadow: none;
2333
+ }
2334
+ .ax-editor-container .ax-text-area {
2335
+ padding: 0.625rem;
2336
+ }
2337
+ .ax-editor-container > ax-prefix *,
2338
+ .ax-editor-container > ax-prefix .ax-button,
2339
+ .ax-editor-container > ax-prefix ax-title {
2340
+ border-end-start-radius: 0.25rem;
2341
+ border-start-start-radius: 0.25rem;
2342
+ }
2343
+ .ax-editor-container > ax-prefix ax-icon {
2344
+ padding-left: 0.75rem;
2345
+ padding-right: 0.75rem;
2346
+ }
2347
+ .ax-editor-container > ax-suffix *,
2348
+ .ax-editor-container > ax-suffix .ax-button,
2349
+ .ax-editor-container > ax-suffix ax-title {
2350
+ border-end-end-radius: 0.25rem;
2351
+ border-start-end-radius: 0.25rem;
2352
+ }
2353
+ .ax-editor-container > ax-prefix, .ax-editor-container > ax-suffix {
2354
+ height: 100%;
2355
+ }
2356
+ .ax-editor-container > ax-prefix + .ax-input, .ax-editor-container > ax-suffix + .ax-input {
2357
+ padding-left: 0.375rem !important;
2358
+ padding-right: 0.375rem !important;
2359
+ }
2360
+ .ax-editor-container > ax-prefix *, .ax-editor-container > ax-suffix * {
2361
+ display: flex;
2362
+ height: 100%;
2363
+ align-items: center;
2364
+ justify-content: center;
2365
+ border-radius: 0px;
2366
+ }
2367
+ .ax-editor-container > ax-prefix ax-title, .ax-editor-container > ax-suffix ax-title {
2368
+ padding-left: 1rem;
2369
+ padding-right: 1rem;
2370
+ }
2371
+ .ax-editor-container > ax-prefix > ax-text, .ax-editor-container > ax-suffix > ax-text {
2372
+ display: flex;
2373
+ align-items: center;
2374
+ justify-content: center;
2375
+ background-color: transparent;
2376
+ padding-left: 0.5rem;
2377
+ padding-right: 0.5rem;
2378
+ font-size: 0.875rem;
2379
+ line-height: 1.25rem;
2380
+ }
2381
+ .ax-editor-container .ax-button {
2382
+ height: 100% !important;
2383
+ border-radius: 0px !important;
2384
+ }
2385
+ .ax-editor-container .ax-button.ax-button-icon {
2386
+ height: 100%;
2387
+ width: var(--ax-size-default);
2388
+ }
2389
+
2390
+ .ax-ripple {
2391
+ transform: scale(0);
2392
+ animation: ripple 500ms linear;
2393
+ position: absolute;
2394
+ border-radius: 9999rem !important;
2395
+ }
2396
+ @keyframes ripple {
2397
+ to {
2398
+ transform: scale(4);
2399
+ opacity: 0;
2400
+ }
2401
+ }
2402
+
565
2403
  .ax-general-button {
566
2404
  display: inline-flex;
567
- height: var(--ax-sys-size-base);
2405
+ height: var(--ax-size-default);
568
2406
  cursor: pointer;
569
2407
  align-items: center;
570
2408
  justify-content: center;
571
- border-radius: var(--ax-sys-border-radius);
2409
+ border-radius: var(--ax-rounded-border-default);
572
2410
  padding-left: 1rem;
573
2411
  padding-right: 1rem;
574
2412
  font-size: 0.875rem;
575
2413
  line-height: 1.25rem;
576
- color: rgb(var(--ax-sys-color-input-surface-text), 0.75);
2414
+ color: rgb(var(--ax-color-input-surface-fore), 0.75);
577
2415
  }
578
2416
  .ax-general-button:hover:not(.ax-general-button:hover:disabled, .ax-state-disabled) {
579
- color: rgba(var(--ax-sys-color-primary-500), var(--tw-text-opacity));
2417
+ color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
580
2418
  }
581
2419
  .ax-general-button:focus:not(.ax-general-button:focus:disabled, .ax-state-disabled, .ax-general-button:focus-visible:disabled), .ax-general-button:focus-visible:not(.ax-general-button:focus:disabled, .ax-state-disabled, .ax-general-button:focus-visible:disabled) {
582
- color: rgba(var(--ax-sys-color-primary-700), var(--tw-text-opacity));
2420
+ color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
583
2421
  }
584
2422
  .ax-general-button:active:not(.ax-general-button:active:disabled, .ax-state-disabled) {
585
- color: rgba(var(--ax-sys-color-primary-300), var(--tw-text-opacity));
2423
+ color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
586
2424
  }
587
2425
  .ax-general-button.ax-button-icon {
588
2426
  padding-left: 0.5rem;
@@ -593,7 +2431,7 @@ body {
593
2431
  display: flex;
594
2432
  }
595
2433
  .ax-general-button.ax-button-rounded {
596
- border-radius: var(--ax-sys-border-radius);
2434
+ border-radius: var(--ax-rounded-border-default);
597
2435
  }
598
2436
  .ax-general-button:disabled, .ax-general-button.ax-state-disabled {
599
2437
  cursor: not-allowed;
@@ -602,28 +2440,38 @@ body {
602
2440
 
603
2441
  .ax-clear-button {
604
2442
  display: inline-flex;
605
- height: var(--ax-sys-size-base);
2443
+ height: var(--ax-size-default);
606
2444
  align-items: center;
607
2445
  justify-content: center;
608
2446
  margin-left: 0.25rem;
609
2447
  margin-right: 0.25rem;
610
2448
  font-size: 1rem;
611
2449
  line-height: 1.5rem;
612
- color: rgb(var(--ax-sys-body-text-color), 0.75);
2450
+ line-height: 1;
2451
+ color: rgb(var(--ax-color-text-default), 0.75);
613
2452
  }
614
2453
  .ax-clear-button > button {
615
2454
  display: flex;
616
2455
  }
617
2456
  .ax-clear-button:hover:not(.ax-clear-button:hover:disabled, .ax-state-disabled) {
618
- color: rgb(var(--ax-sys-body-text-color), 0.5);
2457
+ color: rgb(var(--ax-color-text-default), 0.5);
619
2458
  }
620
2459
  .ax-clear-button:focus:not(.ax-clear-button:focus:disabled, .ax-state-disabled, .ax-clear-button:focus-visible:disabled), .ax-clear-button:focus-visible:not(.ax-clear-button:focus:disabled, .ax-state-disabled, .ax-clear-button:focus-visible:disabled) {
621
- color: rgb(var(--ax-sys-body-text-color));
2460
+ color: rgb(var(--ax-color-text-default));
2461
+ }
2462
+
2463
+ .ax-input {
2464
+ font-size: inherit;
2465
+ padding: 0px;
2466
+ outline-width: 0px;
2467
+ }
2468
+ .ax-input:focus {
2469
+ outline-color: transparent;
622
2470
  }
623
2471
 
624
2472
  .ax-dark .ax-list-item.ax-state-selected {
625
- background-color: rgba(var(--ax-sys-color-primary-800)) !important;
626
- color: rgba(var(--ax-sys-color-on-primary)) !important;
2473
+ background-color: rgba(var(--ax-color-primary-800)) !important;
2474
+ color: rgba(var(--ax-color-primary-fore)) !important;
627
2475
  }
628
2476
 
629
2477
  .ax-list {
@@ -631,7 +2479,7 @@ body {
631
2479
  height: 100%;
632
2480
  flex-direction: column;
633
2481
  overflow: hidden;
634
- background-color: rgba(var(--ax-sys-color-surface));
2482
+ background-color: rgba(var(--ax-color-surface));
635
2483
  font-size: 0.875rem;
636
2484
  line-height: 1.25rem;
637
2485
  }
@@ -645,12 +2493,12 @@ body {
645
2493
  display: flex;
646
2494
  align-items: center;
647
2495
  justify-content: space-between;
648
- border-color: rgba(var(--ax-sys-border-color), var(--tw-border-opacity));
2496
+ border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
649
2497
  background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
650
2498
  }
651
2499
  .ax-list ax-header {
652
2500
  border-bottom-width: 1px;
653
- border-color: rgba(var(--ax-sys-border-color), var(--tw-border-opacity));
2501
+ border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
654
2502
  padding: 1rem;
655
2503
  font-size: 1rem;
656
2504
  line-height: 1.5rem;
@@ -711,12 +2559,12 @@ body {
711
2559
  }
712
2560
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group .ax-list-item {
713
2561
  margin-bottom: 0.25rem;
714
- border-radius: var(--ax-sys-border-radius);
2562
+ border-radius: var(--ax-rounded-border-default);
715
2563
  }
716
2564
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item {
717
2565
  position: relative;
718
2566
  display: flex;
719
- height: var(--ax-sys-size-base);
2567
+ height: var(--ax-size-default);
720
2568
  user-select: none;
721
2569
  align-items: center;
722
2570
  justify-content: space-between;
@@ -733,18 +2581,18 @@ body {
733
2581
  margin-inline-start: 0.5rem;
734
2582
  }
735
2583
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected {
736
- background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
737
- color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
2584
+ background-color: rgba(var(--ax-color-primary-500), var(--tw-bg-opacity)) !important;
2585
+ color: rgba(var(--ax-color-primary-fore), var(--tw-text-opacity)) !important;
738
2586
  }
739
2587
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-disabled {
740
2588
  cursor: not-allowed;
741
2589
  opacity: 0.5;
742
2590
  }
743
2591
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible, .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:hover {
744
- background-color: rgba(var(--ax-sys-color-surface-high));
2592
+ background-color: rgba(var(--ax-color-on-surface));
745
2593
  }
746
2594
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus {
747
- background-color: rgba(var(--ax-sys-color-surface-high));
2595
+ background-color: rgba(var(--ax-color-on-surface));
748
2596
  }
749
2597
  .ax-list .ax-content.ax-list-items-container .ax-list-loading-container {
750
2598
  display: flex;
@@ -768,15 +2616,15 @@ body {
768
2616
  appearance: none;
769
2617
  border-radius: 9999px;
770
2618
  border-width: 1px;
771
- border-color: rgba(var(--ax-sys-color-input-surface-border));
772
- background-color: rgba(var(--ax-sys-color-input-surface));
2619
+ border-color: rgba(var(--ax-color-input-border));
2620
+ background-color: rgba(var(--ax-color-input-surface));
773
2621
  vertical-align: middle;
774
2622
  outline: 2px solid transparent;
775
2623
  outline-offset: 2px;
776
2624
  }
777
2625
  .ax-radio:checked {
778
- border-color: rgba(var(--ax-sys-color-primary-500)) !important;
779
- background-color: rgba(var(--ax-sys-color-primary-500)) !important;
2626
+ border-color: rgba(var(--ax-color-primary-500)) !important;
2627
+ background-color: rgba(var(--ax-color-primary-500)) !important;
780
2628
  background-size: contain;
781
2629
  background-repeat: no-repeat;
782
2630
  }
@@ -784,7 +2632,7 @@ body {
784
2632
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
785
2633
  }
786
2634
  .ax-radio:focus-visible, .ax-radio:focus {
787
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
2635
+ box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)), 0px 0px 0px 4px rgba(var(--ax-color-primary-500));
788
2636
  }
789
2637
  .ax-radio:disabled {
790
2638
  cursor: not-allowed;
@@ -792,7 +2640,7 @@ body {
792
2640
  }
793
2641
 
794
2642
  .ax-dark .ax-table thead {
795
- background-color: rgba(var(--ax-sys-color-surface-high));
2643
+ background-color: rgba(var(--ax-color-on-surface));
796
2644
  }
797
2645
 
798
2646
  .ax-table {
@@ -800,15 +2648,15 @@ body {
800
2648
  border-collapse: collapse;
801
2649
  border-spacing: 0;
802
2650
  overflow: hidden;
803
- border-radius: var(--ax-sys-border-radius);
2651
+ border-radius: var(--ax-rounded-border-default);
804
2652
  border-width: 1px;
805
- border-color: rgba(var(--ax-sys-border-color));
2653
+ border-color: rgba(var(--ax-color-border-default));
806
2654
  font-size: 0.875rem;
807
2655
  line-height: 1.25rem;
808
2656
  }
809
2657
  .ax-table td {
810
2658
  border-bottom-width: 1px;
811
- border-color: rgba(var(--ax-sys-border-color));
2659
+ border-color: rgba(var(--ax-color-border-default));
812
2660
  padding-left: 1rem;
813
2661
  padding-right: 1rem;
814
2662
  padding-top: 0.75rem;
@@ -816,8 +2664,8 @@ body {
816
2664
  }
817
2665
  .ax-table thead {
818
2666
  border-bottom-width: 1px;
819
- border-color: rgba(var(--ax-sys-border-color));
820
- background-color: rgba(var(--ax-sys-color-surface-high));
2667
+ border-color: rgba(var(--ax-color-border-default));
2668
+ background-color: rgba(var(--ax-color-on-surface));
821
2669
  }
822
2670
  .ax-table thead th {
823
2671
  padding-left: 1rem;
@@ -829,7 +2677,7 @@ body {
829
2677
  text-transform: uppercase;
830
2678
  }
831
2679
  .ax-table.ax-table-alternate tbody tr:nth-child(even) {
832
- background-color: rgba(var(--ax-sys-color-surface-high));
2680
+ background-color: rgba(var(--ax-color-on-surface));
833
2681
  }
834
2682
  .ax-table.ax-table-bordered thead th {
835
2683
  border-top-width: 0px !important;
@@ -843,7 +2691,7 @@ body {
843
2691
  .ax-table.ax-table-bordered td,
844
2692
  .ax-table.ax-table-bordered th {
845
2693
  border-width: 1px;
846
- border-color: rgba(var(--ax-sys-border-color));
2694
+ border-color: rgba(var(--ax-color-border-default));
847
2695
  }
848
2696
  .ax-table.ax-table-bordered td:first-child,
849
2697
  .ax-table.ax-table-bordered th:first-child {
@@ -885,7 +2733,7 @@ body {
885
2733
  }
886
2734
  .ax-table.ax-table-responsive tr {
887
2735
  border-width: 1px;
888
- border-color: rgba(var(--ax-sys-border-color));
2736
+ border-color: rgba(var(--ax-color-border-default));
889
2737
  }
890
2738
  .ax-table.ax-table-responsive tr,
891
2739
  .ax-table.ax-table-responsive tbody {
@@ -905,9 +2753,9 @@ body {
905
2753
  }
906
2754
 
907
2755
  .ax-fieldset {
908
- border-radius: var(--ax-sys-border-radius);
2756
+ border-radius: var(--ax-rounded-border-default);
909
2757
  border-width: 1px;
910
- border-color: rgba(var(--ax-sys-color-input-surface-border));
2758
+ border-color: rgba(var(--ax-color-input-border));
911
2759
  padding: 0.75rem;
912
2760
  }
913
2761
  .ax-fieldset legend {
@@ -918,10 +2766,10 @@ body {
918
2766
  }
919
2767
 
920
2768
  .ax-card {
921
- border-radius: var(--ax-sys-border-radius);
2769
+ border-radius: var(--ax-rounded-border-default);
922
2770
  border-width: 1px;
923
- border-color: rgba(var(--ax-sys-color-input-surface-border));
924
- background-color: rgba(var(--ax-sys-color-surface));
2771
+ border-color: rgba(var(--ax-color-input-border));
2772
+ background-color: rgba(var(--ax-color-surface));
925
2773
  }
926
2774
 
927
2775
  .ax-drop-zone > input {
@@ -947,10 +2795,10 @@ body {
947
2795
  align-items: center;
948
2796
  justify-content: center;
949
2797
  gap: 0.5rem;
950
- background-color: rgba(var(--ax-sys-color-primary-200), 0.75);
2798
+ background-color: rgba(var(--ax-color-primary-200), 0.75);
951
2799
  font-size: 0.875rem;
952
2800
  line-height: 1.25rem;
953
- color: rgba(var(--ax-sys-color-on-primary-tint));
2801
+ color: rgba(var(--ax-color-primary-fore-tint));
954
2802
  outline-style: dashed;
955
2803
  outline-offset: -4px;
956
2804
  transition-property: all;
@@ -964,25 +2812,32 @@ body {
964
2812
  }
965
2813
 
966
2814
  .ax-dark .ax-uploader-overlay-state {
967
- background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
968
- color: rgba(var(--ax-sys-color-on-primary));
969
- outline-color: rgba(var(--ax-sys-color-on-primary));
2815
+ background-color: rgba(var(--ax-color-primary-800), 0.75);
2816
+ color: rgba(var(--ax-color-primary-fore));
2817
+ outline-color: rgba(var(--ax-color-primary-fore));
970
2818
  }
971
2819
 
972
- .ax-ripple {
973
- transform: scale(0);
974
- animation: ripple 500ms linear;
975
- position: absolute;
976
- border-radius: 9999rem !important;
2820
+ .ax-xs {
2821
+ --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
977
2822
  }
978
- @keyframes ripple {
979
- to {
980
- transform: scale(4);
981
- opacity: 0;
982
- }
2823
+
2824
+ .ax-sm {
2825
+ --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
2826
+ }
2827
+
2828
+ .ax-md {
2829
+ --ax-size-default: var(--ax-size-base);
2830
+ }
2831
+
2832
+ .ax-lg {
2833
+ --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
2834
+ }
2835
+
2836
+ .ax-xl {
2837
+ --ax-size-default: calc(var(--ax-size-base) + 1rem);
983
2838
  }
984
2839
 
985
2840
  .ax-placeholder {
986
- color: rgba(var(--ax-sys-color-input-surface-placeholder));
987
- font-size: calc(var(--ax-comp-editor-font-size) * 0.875);
2841
+ color: rgba(var(--ax-color-input-surface-fore), 0.5);
2842
+ font-weight: 500;
988
2843
  }