@dialpad/dialtone 7.11.2 → 7.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +8 -2
  2. package/lib/build/less/components/badge.less +6 -5
  3. package/lib/build/less/components/banner.less +32 -26
  4. package/lib/build/less/components/breadcrumbs.less +2 -2
  5. package/lib/build/less/components/button.less +80 -71
  6. package/lib/build/less/components/card.less +1 -1
  7. package/lib/build/less/components/chip.less +1 -1
  8. package/lib/build/less/components/forms.less +2 -1
  9. package/lib/build/less/components/input.less +11 -35
  10. package/lib/build/less/components/link.less +11 -30
  11. package/lib/build/less/components/modal.less +7 -26
  12. package/lib/build/less/components/notice.less +47 -26
  13. package/lib/build/less/components/radio-checkbox.less +14 -41
  14. package/lib/build/less/components/selects.less +7 -26
  15. package/lib/build/less/components/table.less +11 -11
  16. package/lib/build/less/components/tabs.less +15 -13
  17. package/lib/build/less/components/toast.less +41 -43
  18. package/lib/build/less/components/toggle.less +5 -2
  19. package/lib/build/less/components/tooltip.less +2 -2
  20. package/lib/build/less/dialtone-globals.less +2 -2
  21. package/lib/build/less/dialtone-reset.less +9 -0
  22. package/lib/build/less/themes/default.less +10 -10
  23. package/lib/build/less/utilities/colors.less +34 -8
  24. package/lib/build/less/utilities/interactivity.less +3 -3
  25. package/lib/build/less/variables/colors.less +70 -39
  26. package/lib/build/less/variables/visual-styles.less +2 -15
  27. package/lib/dist/css/dialtone.css +636 -698
  28. package/lib/dist/css/dialtone.min.css +1 -1
  29. package/package.json +2 -2
package/lib/dist/css/dialtone.css CHANGED
@@ -308,6 +308,17 @@ template {
308
308
  [hidden] {
309
309
  display: none !important;
310
310
  }
311
+ /**
312
+ * Default focus ring
313
+ */
314
+ .focus-visible.js-focus-visible, .js-focus-visible .focus-visible {
315
+ outline: 0;
316
+ box-shadow: var(--bs-focus-ring);
317
+ }
318
+ :focus-visible {
319
+ outline: 0;
320
+ box-shadow: var(--bs-focus-ring);
321
+ }
311
322
  body {
312
323
  --su0: 0;
313
324
  --su1: 0.1rem;
@@ -529,7 +540,7 @@ body {
529
540
  --badge-color-background: var(--black-200);
530
541
  --badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
531
542
  --badge-radius: var(--size-300);
532
- --badge-line-height: var(--size-500);
543
+ --badge-line-height: calc(var(--size-500) + var(--size-200));
533
544
  --badge-font-size: var(--fs-100);
534
545
  --badge-font-weight: var(--fw-semibold);
535
546
  --badge-gap: var(--space-300);
@@ -558,18 +569,19 @@ body {
558
569
  --badge-radius: var(--br-pill);
559
570
  --badge-padding-x: calc(var(--space-400) - var(--space-100));
560
571
  --badge-padding-y: var(--space-300);
572
+ --badge-line-height: var(--size-500);
561
573
  }
562
574
  .d-badge--info {
563
- --badge-color-background: var(--blue-100);
575
+ --badge-color-background: var(--bgc-info);
564
576
  }
565
577
  .d-badge--success {
566
- --badge-color-background: var(--green-100);
578
+ --badge-color-background: var(--bgc-success);
567
579
  }
568
580
  .d-badge--warning {
569
- --badge-color-background: var(--gold-100);
581
+ --badge-color-background: var(--bgc-warning);
570
582
  }
571
583
  .d-badge--critical {
572
- --badge-color-background: var(--red-100);
584
+ --badge-color-background: var(--bgc-critical);
573
585
  }
574
586
  .d-badge--bulletin {
575
587
  --badge-color-text: var(--white);
@@ -588,8 +600,14 @@ body {
588
600
  display: flex;
589
601
  }
590
602
  .d-banner {
591
- --banner--bgc: var(--black-100);
592
- --banner--fc: var(--fc-primary);
603
+ --banner-color-background: var(--bgc-secondary);
604
+ --banner-color-text: var(--fc-primary);
605
+ --notice-color-icon: var(--toast-color-text);
606
+ --banner-color-border: 1px solid hsla(var(--black-900-hsl) / 10%);
607
+ --banner-font-size: var(--fs-200);
608
+ --banner-line-height: var(--lh-200);
609
+ --banner-dialog-padding-y: var(--space-400);
610
+ --banner-dialog-padding-x: var(--space-500);
593
611
  position: fixed;
594
612
  top: 0;
595
613
  right: 0;
@@ -599,10 +617,10 @@ body {
599
617
  box-sizing: border-box;
600
618
  width: 100%;
601
619
  min-height: calc(var(--size-300) * 12);
602
- color: var(--banner--fc);
603
- font-size: var(--fs-200);
604
- line-height: var(--lh6);
605
- background-color: var(--banner--bgc);
620
+ color: var(--banner-color-text);
621
+ font-size: var(--banner-font-size);
622
+ line-height: var(--banner-line-height);
623
+ background-color: var(--banner-color-background);
606
624
  border-radius: 0;
607
625
  box-shadow: none;
608
626
  }
@@ -630,48 +648,47 @@ body {
630
648
  max-width: 128rem;
631
649
  min-height: 100%;
632
650
  margin: 0 auto;
633
- padding: var(--space-400);
651
+ padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
652
+ border-bottom: var(--banner-color-border);
634
653
  }
635
654
  .d-banner__dialog .d-notice__content {
636
655
  flex-direction: row;
637
- align-items: center;
638
- }
639
- .d-banner__dialog .d-notice__content > * + * {
640
- margin-left: 0.4rem !important;
656
+ gap: var(--space-300);
657
+ align-items: baseline;
641
658
  }
642
659
  .d-banner.d-banner--important {
643
- --banner--bgc: var(--black-800);
644
- --banner--fc: var(--black-100);
660
+ --banner-color-background: var(--bgc-contrast);
661
+ --banner-color-text: var(--black-100);
662
+ --notice-color-icon: var(--black-100);
663
+ --banner-color-border: transparent;
645
664
  }
646
665
  .d-banner--error {
647
- --banner--bgc: var(--red-100);
648
- --banner--fc: var(--red-500);
666
+ --banner-color-background: var(--bgc-critical);
649
667
  }
650
668
  .d-banner--error.d-banner--important {
651
- --banner--bgc: var(--red-300);
652
- --banner--fc: var(--white);
669
+ --banner-color-background: var(--red-400);
670
+ --banner-color-text: var(--fc-primary-inverted);
653
671
  }
654
672
  .d-banner--info {
655
- --banner--bgc: var(--purple-100);
673
+ --banner-color-background: var(--bgc-info);
656
674
  }
657
675
  .d-banner--info.d-banner--important {
658
- --banner--bgc: var(--purple-400);
659
- --banner--fc: var(--white);
676
+ --banner-color-background: var(--blue-400);
677
+ --banner-color-text: var(--fc-primary-inverted);
660
678
  }
661
679
  .d-banner--success {
662
- --banner--bgc: var(--green-100);
663
- --banner--fc: var(--green-500);
680
+ --banner-color-background: var(--bgc-success);
664
681
  }
665
682
  .d-banner--success.d-banner--important {
666
- --banner--bgc: var(--green-200);
667
- --banner--fc: var(--green-500);
683
+ --banner-color-background: var(--green-400);
684
+ --banner-color-text: var(--fc-primary-inverted);
668
685
  }
669
686
  .d-banner--warning {
670
- --banner--bgc: var(--gold-100);
687
+ --banner-color-background: var(--bgc-warning);
671
688
  }
672
689
  .d-banner--warning.d-banner--important {
673
- --banner--bgc: var(--gold-200);
674
- --banner--fc: var(--fc-primary);
690
+ --banner-color-background: var(--gold-200);
691
+ --banner-color-text: var(--fc-primary);
675
692
  }
676
693
  .d-breadcrumbs > ol {
677
694
  display: flex;
@@ -706,10 +723,10 @@ body {
706
723
  cursor: default;
707
724
  }
708
725
  .d-breadcrumbs.d-breadcrumbs--inverted .d-breadcrumbs__item:not(:last-of-type)::before {
709
- color: var(--inverted-color);
726
+ color: var(--fc-primary-inverted);
710
727
  }
711
728
  .d-breadcrumbs.d-breadcrumbs--inverted .d-breadcrumbs__item--selected .d-link:hover {
712
- color: var(--inverted-color);
729
+ color: var(--fc-primary-inverted);
713
730
  }
714
731
  .d-btn,
715
732
  .d-btn--md {
@@ -767,17 +784,17 @@ body {
767
784
  user-select: none;
768
785
  fill: currentColor;
769
786
  }
770
- .d-btn:hover,
771
- .d-btn--md:hover {
787
+ .d-btn:hover:not([disabled]),
788
+ .d-btn--md:hover:not([disabled]) {
772
789
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
773
790
  --button-color-background: hsla(var(--purple-400-hsl) / 4%);
774
791
  }
775
- .d-btn:active,
776
- .d-btn--md:active,
777
- .d-btn.d-btn--active,
778
- .d-btn--md.d-btn--active,
779
- .d-btn.d-btn--active:active,
780
- .d-btn--md.d-btn--active:active {
792
+ .d-btn:active:not([disabled]),
793
+ .d-btn--md:active:not([disabled]),
794
+ .d-btn.d-btn--active:not([disabled]),
795
+ .d-btn--md.d-btn--active:not([disabled]),
796
+ .d-btn.d-btn--active:active:not([disabled]),
797
+ .d-btn--md.d-btn--active:active:not([disabled]) {
781
798
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
782
799
  --button-color-background: hsla(var(--purple-400-hsl) / 14%);
783
800
  }
@@ -795,9 +812,9 @@ body {
795
812
  }
796
813
  .d-btn[disabled],
797
814
  .d-btn--md[disabled] {
798
- --button-color-border: transparent;
799
- --button-color-text: var(--fc-disabled);
800
- --button-color-background: var(--black-300);
815
+ --button-color-border: transparent !important;
816
+ --button-color-text: var(--fc-disabled) !important;
817
+ --button-color-background: var(--black-300) !important;
801
818
  cursor: not-allowed;
802
819
  transition: none;
803
820
  }
@@ -880,24 +897,17 @@ body {
880
897
  --button-padding-y: var(--button-padding-y-md);
881
898
  --button-color-text: var(--black-800);
882
899
  --button-border-radius: var(--br-circle);
883
- transition-duration: 150ms;
884
900
  }
885
- .d-btn--circle:hover {
901
+ .d-btn--circle:hover:not([disabled]) {
886
902
  --button-color-text: var(--muted-color-hover);
887
903
  --button-color-background: hsla(var(--black-800-hsl) / 3%);
888
904
  }
889
- .d-btn--circle:active,
890
- .d-btn--circle.d-btn--active,
891
- .d-btn--circle.d-btn--active:active {
892
- --button-color-text: var(--muted-color-hover);
905
+ .d-btn--circle:active:not([disabled]),
906
+ .d-btn--circle.d-btn--active:not([disabled]),
907
+ .d-btn--circle.d-btn--active:active:not([disabled]) {
908
+ --button-color-text: var(--fc-secondary);
893
909
  --button-color-background: hsla(var(--black-800-hsl) / 9%);
894
910
  }
895
- .d-btn--circle.focus-visible.js-focus-visible, .js-focus-visible .d-btn--circle.focus-visible {
896
- box-shadow: var(--bs-focus-ring-circle);
897
- }
898
- .d-btn--circle:focus-visible {
899
- box-shadow: var(--bs-focus-ring-circle);
900
- }
901
911
  .d-btn--circle .d-btn__icon {
902
912
  margin: unset;
903
913
  }
@@ -934,71 +944,59 @@ body {
934
944
  --button-color-text: var(--white);
935
945
  --button-color-background: var(--purple-400);
936
946
  }
937
- .d-btn--primary:hover {
947
+ .d-btn--primary:hover:not([disabled]) {
938
948
  --button-color-text: var(--white);
939
949
  --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 6%));
940
950
  }
941
- .d-btn--primary:active,
942
- .d-btn--primary.d-btn--active,
943
- .d-btn--primary.d-btn--active:active {
951
+ .d-btn--primary:active:not([disabled]),
952
+ .d-btn--primary.d-btn--active:not([disabled]),
953
+ .d-btn--primary.d-btn--active:active:not([disabled]) {
944
954
  --button-color-text: var(--white);
945
955
  --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 12%));
946
956
  }
947
957
  .d-btn--muted {
948
- --button-color-text: var(--muted-color);
958
+ --button-color-text: var(--fc-secondary);
949
959
  }
950
- .d-btn--muted:hover {
951
- --button-color-text: var(--muted-color-hover);
960
+ .d-btn--muted:hover:not([disabled]) {
961
+ --button-color-text: var(--fc-secondary);
952
962
  --button-color-background: hsla(var(--black-800-hsl) / 5%);
953
963
  }
954
- .d-btn--muted:active,
955
- .d-btn--muted.d-btn--active,
956
- .d-btn--muted.d-btn--active:active {
957
- --button-color-text: var(--muted-color-hover);
964
+ .d-btn--muted:active:not([disabled]),
965
+ .d-btn--muted.d-btn--active:not([disabled]),
966
+ .d-btn--muted.d-btn--active:active:not([disabled]) {
967
+ --button-color-text: var(--fc-secondary);
958
968
  --button-color-background: hsla(var(--black-800-hsl) / 10%);
959
969
  }
960
- .d-btn--muted.focus-visible.js-focus-visible, .js-focus-visible .d-btn--muted.focus-visible {
961
- box-shadow: var(--bs-focus-ring-muted);
962
- }
963
- .d-btn--muted:focus-visible {
964
- box-shadow: var(--bs-focus-ring-muted);
965
- }
966
970
  .d-btn--muted.d-btn--outlined {
967
971
  --button-color-border: var(--black-600);
968
972
  }
969
973
  .d-btn--danger {
970
- --button-color-text: var(--error-color);
971
- }
972
- .d-btn--danger:hover {
973
- --button-color-text: var(--error-color-hover);
974
- --button-color-background: hsla(var(--error-color-hsl) / 3%);
975
- }
976
- .d-btn--danger:active,
977
- .d-btn--danger.d-btn--active,
978
- .d-btn--danger.d-btn--active:active {
979
- --button-color-text: var(--error-color-hover);
980
- --button-color-background: hsla(var(--error-color-hsl) / 9%);
974
+ --button-color-text: var(--red-300);
981
975
  }
982
- .d-btn--danger.focus-visible.js-focus-visible, .js-focus-visible .d-btn--danger.focus-visible {
983
- box-shadow: var(--bs-focus-ring-error);
976
+ .d-btn--danger:hover:not([disabled]) {
977
+ --button-color-text: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
978
+ --button-color-background: hsla(var(--red-300-hsl) / 0.03);
984
979
  }
985
- .d-btn--danger:focus-visible {
986
- box-shadow: var(--bs-focus-ring-error);
980
+ .d-btn--danger:active:not([disabled]),
981
+ .d-btn--danger.d-btn--active:not([disabled]),
982
+ .d-btn--danger.d-btn--active:active:not([disabled]) {
983
+ --button-color-text: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
984
+ --button-color-background: hsla(var(--red-300-hsl) / 0.09);
987
985
  }
988
986
  .d-btn--danger.d-btn--outlined {
989
- --button-color-border: var(--error-color);
987
+ --button-color-border: var(--red-300);
990
988
  }
991
989
  .d-btn--danger.d-btn--primary {
992
990
  --button-color-text: var(--white);
993
- --button-color-background: var(--error-color);
991
+ --button-color-background: var(--red-300);
994
992
  }
995
- .d-btn--danger.d-btn--primary:hover {
993
+ .d-btn--danger.d-btn--primary:hover:not([disabled]) {
996
994
  --button-color-text: var(--white);
997
995
  --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 4%));
998
996
  }
999
- .d-btn--danger.d-btn--primary:active,
1000
- .d-btn--danger.d-btn--primary.d-btn--active,
1001
- .d-btn--danger.d-btn--primary.d-btn--active:active {
997
+ .d-btn--danger.d-btn--primary:active:not([disabled]),
998
+ .d-btn--danger.d-btn--primary.d-btn--active:not([disabled]),
999
+ .d-btn--danger.d-btn--primary.d-btn--active:active:not([disabled]) {
1002
1000
  --button-color-text: var(--white);
1003
1001
  --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
1004
1002
  }
@@ -1006,22 +1004,16 @@ body {
1006
1004
  --button-color-text: var(--white);
1007
1005
  --button-color-background: transparent;
1008
1006
  }
1009
- .d-btn--inverted:hover {
1007
+ .d-btn--inverted:hover:not([disabled]) {
1010
1008
  --button-color-text: var(--white);
1011
1009
  --button-color-background: hsla(var(--white-hsl) / 15%);
1012
1010
  }
1013
- .d-btn--inverted:active,
1014
- .d-btn--inverted.d-btn--active,
1015
- .d-btn--inverted.d-btn--active:active {
1011
+ .d-btn--inverted:active:not([disabled]),
1012
+ .d-btn--inverted.d-btn--active:not([disabled]),
1013
+ .d-btn--inverted.d-btn--active:active:not([disabled]) {
1016
1014
  --button-color-text: var(--white);
1017
1015
  --button-color-background: hsla(var(--white-hsl) / 30%);
1018
1016
  }
1019
- .d-btn--inverted.focus-visible.js-focus-visible, .js-focus-visible .d-btn--inverted.focus-visible {
1020
- box-shadow: var(--bs-focus-ring-inverted);
1021
- }
1022
- .d-btn--inverted:focus-visible {
1023
- box-shadow: var(--bs-focus-ring-inverted);
1024
- }
1025
1017
  .d-btn--inverted.d-btn--outlined {
1026
1018
  --button-color-border: var(--white);
1027
1019
  }
@@ -1029,19 +1021,43 @@ body {
1029
1021
  --button-color-text: var(--purple-400);
1030
1022
  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
1031
1023
  }
1032
- .d-btn--inverted.d-btn--primary:hover {
1024
+ .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
1033
1025
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1034
1026
  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
1035
1027
  }
1036
- .d-btn--inverted.d-btn--primary:active,
1037
- .d-btn--inverted.d-btn--primary.d-btn--active,
1038
- .d-btn--inverted.d-btn--primary.d-btn--active:active {
1028
+ .d-btn--inverted.d-btn--primary:active:not([disabled]),
1029
+ .d-btn--inverted.d-btn--primary.d-btn--active:not([disabled]),
1030
+ .d-btn--inverted.d-btn--primary.d-btn--active:active:not([disabled]) {
1039
1031
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1040
1032
  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
1041
1033
  }
1034
+ .d-btn--icon-only {
1035
+ --button-padding-x: var(--button-padding-y-md);
1036
+ --button-padding-y: var(--button-padding-y-md);
1037
+ }
1042
1038
  .d-btn--icon-only .d-btn__icon {
1043
1039
  margin: unset;
1044
1040
  }
1041
+ .d-btn--icon-only.d-btn--xs {
1042
+ --button-padding-y: var(--button-padding-y-xs);
1043
+ --button-padding-x: var(--button-padding-y-xs);
1044
+ }
1045
+ .d-btn--icon-only.d-btn--sm {
1046
+ --button-padding-y: var(--button-padding-y-sm);
1047
+ --button-padding-x: var(--button-padding-y-sm);
1048
+ }
1049
+ .d-btn--icon-only.d-btn--md {
1050
+ --button-padding-x: var(--button-padding-y-md);
1051
+ --button-padding-y: var(--button-padding-y-md);
1052
+ }
1053
+ .d-btn--icon-only.d-btn--lg {
1054
+ --button-padding-x: calc(var(--button-padding-y-lg) + var(--space-100));
1055
+ --button-padding-y: calc(var(--button-padding-y-lg) + var(--space-100));
1056
+ }
1057
+ .d-btn--icon-only.d-btn--xl {
1058
+ --button-padding-x: calc(var(--button-padding-y-xl) + var(--space-300));
1059
+ --button-padding-y: calc(var(--button-padding-y-xl) + var(--space-300));
1060
+ }
1045
1061
  .d-btn--loading {
1046
1062
  pointer-events: none;
1047
1063
  }
@@ -1061,9 +1077,9 @@ body {
1061
1077
  content: '';
1062
1078
  }
1063
1079
  .d-btn--disabled {
1064
- --button-color-text: var(--fc-disabled);
1065
- --button-color-background: var(--black-300);
1066
- --button-color-border: transparent;
1080
+ --button-color-text: var(--fc-disabled) !important;
1081
+ --button-color-background: var(--black-300) !important;
1082
+ --button-color-border: transparent !important;
1067
1083
  cursor: not-allowed;
1068
1084
  transition: none;
1069
1085
  pointer-events: none;
@@ -1073,8 +1089,8 @@ body {
1073
1089
  --button-color-background: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
1074
1090
  display: flex;
1075
1091
  }
1076
- .d-btn--brand:hover,
1077
- .d-btn--brand:active {
1092
+ .d-btn--brand:hover:not([disabled]),
1093
+ .d-btn--brand:active:not([disabled]) {
1078
1094
  --button-color-text: hsla(var(--white-hsl) / 90%);
1079
1095
  --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
1080
1096
  }
@@ -1084,7 +1100,7 @@ body {
1084
1100
  .d-btn--brand:focus-visible {
1085
1101
  box-shadow: 0 0 0 var(--space-100) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) / 90%);
1086
1102
  }
1087
- .d-btn--brand:active {
1103
+ .d-btn--brand:active:not([disabled]) {
1088
1104
  --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
1089
1105
  }
1090
1106
  .d-btn--brand .d-btn__icon {
@@ -1131,7 +1147,7 @@ body {
1131
1147
  display: flex;
1132
1148
  flex-direction: column;
1133
1149
  justify-content: center;
1134
- background: var(--white);
1150
+ background: var(--bgc-primary);
1135
1151
  border-radius: var(--size-300);
1136
1152
  box-shadow: var(--bs-card);
1137
1153
  }
@@ -1211,14 +1227,14 @@ body {
1211
1227
  .d-chip__label:is([role='link']).focus-visible.js-focus-visible,
1212
1228
  .js-focus-visible .d-chip__label:is([role='link']).focus-visible {
1213
1229
  outline: none;
1214
- box-shadow: var(--bs-focus-ring-muted);
1230
+ box-shadow: var(--bs-focus-ring);
1215
1231
  }
1216
1232
  .d-chip__label:is(a):focus-visible,
1217
1233
  .d-chip__label:is(button):focus-visible,
1218
1234
  .d-chip__label:is([role='button']):focus-visible,
1219
1235
  .d-chip__label:is([role='link']):focus-visible {
1220
1236
  outline: none;
1221
- box-shadow: var(--bs-focus-ring-muted);
1237
+ box-shadow: var(--bs-focus-ring);
1222
1238
  }
1223
1239
  .d-chip__label .d-avatar {
1224
1240
  --avatar-size-shape: calc(var(--size-600) - var(--space-400));
@@ -1285,19 +1301,18 @@ body {
1285
1301
  --button-padding-y: var(--button-padding-y-md);
1286
1302
  --button-color-text: var(--black-800);
1287
1303
  --button-border-radius: var(--br-circle);
1288
- transition-duration: 150ms;
1289
1304
  position: absolute;
1290
1305
  right: var(--space-200);
1291
1306
  padding: calc(var(--space-200) + var(--space-100));
1292
1307
  border-width: 0;
1293
1308
  }
1294
- .d-chip__close:hover {
1309
+ .d-chip__close:hover:not([disabled]) {
1295
1310
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1296
1311
  --button-color-background: hsla(var(--purple-400-hsl) / 4%);
1297
1312
  }
1298
- .d-chip__close:active,
1299
- .d-chip__close.d-btn--active,
1300
- .d-chip__close.d-btn--active:active {
1313
+ .d-chip__close:active:not([disabled]),
1314
+ .d-chip__close.d-btn--active:not([disabled]),
1315
+ .d-chip__close.d-btn--active:active:not([disabled]) {
1301
1316
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1302
1317
  --button-color-background: hsla(var(--purple-400-hsl) / 14%);
1303
1318
  }
@@ -1310,9 +1325,9 @@ body {
1310
1325
  box-shadow: var(--bs-focus-ring);
1311
1326
  }
1312
1327
  .d-chip__close[disabled] {
1313
- --button-color-border: transparent;
1314
- --button-color-text: var(--fc-disabled);
1315
- --button-color-background: var(--black-300);
1328
+ --button-color-border: transparent !important;
1329
+ --button-color-text: var(--fc-disabled) !important;
1330
+ --button-color-background: var(--black-300) !important;
1316
1331
  cursor: not-allowed;
1317
1332
  transition: none;
1318
1333
  }
@@ -1320,22 +1335,16 @@ body {
1320
1335
  width: 1.6rem;
1321
1336
  height: 1.6rem;
1322
1337
  }
1323
- .d-chip__close:hover {
1338
+ .d-chip__close:hover:not([disabled]) {
1324
1339
  --button-color-text: var(--muted-color-hover);
1325
1340
  --button-color-background: hsla(var(--black-800-hsl) / 3%);
1326
1341
  }
1327
- .d-chip__close:active,
1328
- .d-chip__close.d-btn--active,
1329
- .d-chip__close.d-btn--active:active {
1330
- --button-color-text: var(--muted-color-hover);
1342
+ .d-chip__close:active:not([disabled]),
1343
+ .d-chip__close.d-btn--active:not([disabled]),
1344
+ .d-chip__close.d-btn--active:active:not([disabled]) {
1345
+ --button-color-text: var(--fc-secondary);
1331
1346
  --button-color-background: hsla(var(--black-800-hsl) / 9%);
1332
1347
  }
1333
- .d-chip__close.focus-visible.js-focus-visible, .js-focus-visible .d-chip__close.focus-visible {
1334
- box-shadow: var(--bs-focus-ring-circle);
1335
- }
1336
- .d-chip__close:focus-visible {
1337
- box-shadow: var(--bs-focus-ring-circle);
1338
- }
1339
1348
  .d-chip__close .d-btn__icon {
1340
1349
  margin: unset;
1341
1350
  }
@@ -1449,6 +1458,7 @@ body {
1449
1458
  }
1450
1459
  fieldset {
1451
1460
  min-width: 0;
1461
+ margin: 0;
1452
1462
  padding: 0;
1453
1463
  border: none;
1454
1464
  }
@@ -1527,7 +1537,7 @@ legend .d-label {
1527
1537
  background-repeat: no-repeat;
1528
1538
  }
1529
1539
  .d-validation-message--error {
1530
- --validation-color-text: var(--fc-error);
1540
+ --validation-color-text: var(--fc-critical);
1531
1541
  }
1532
1542
  .d-validation-message--error::before {
1533
1543
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');
@@ -1546,15 +1556,14 @@ legend .d-label {
1546
1556
  .d-textarea--md,
1547
1557
  .d-input__wrapper--md,
1548
1558
  .d-input__wrapper {
1549
- --input-color-border-focus: var(--purple-400);
1550
- --input-color-border: hsla(var(--black-900-hsl) / 9%);
1551
- --input-color-background: hsla(var(--black-900-hsl) / 3%);
1552
- --input-color-background-disabled: hsla(var(--black-900-hsl) / 12%);
1559
+ --input-color-border: hsla(var(--black-900-hsl) / 0.09);
1560
+ --input-color-background: hsla(var(--black-900-hsl) / 0.03);
1561
+ --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
1562
+ --input-color-text: var(--fc-secondary);
1553
1563
  --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
1554
1564
  --input-border-radius: var(--size-400);
1555
1565
  --input-padding-y: calc(var(--space-400) - var(--input-border-width));
1556
1566
  --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
1557
- --input-color-text: var(--fc-secondary);
1558
1567
  --input-font-size: var(--fs-200);
1559
1568
  --input-line-height: var(--lh-200);
1560
1569
  position: relative;
@@ -1576,18 +1585,9 @@ legend .d-label {
1576
1585
  box-shadow: none;
1577
1586
  transition-timing-function: var(--ttf-in-out);
1578
1587
  transition-duration: 100ms;
1579
- transition-property: border, box-shadow, background-color;
1588
+ transition-property: box-shadow, background-color;
1580
1589
  appearance: none;
1581
1590
  }
1582
- .bg-test .d-input,
1583
- .bg-test .d-input--md,
1584
- .bg-test .d-textarea,
1585
- .bg-test .d-textarea--md,
1586
- .bg-test .d-input__wrapper--md,
1587
- .bg-test .d-input__wrapper {
1588
- --input-color-border: var(--black-300);
1589
- --input-color-background: var(--black-100);
1590
- }
1591
1591
  .d-input::placeholder,
1592
1592
  .d-input--md::placeholder,
1593
1593
  .d-textarea::placeholder,
@@ -1616,9 +1616,9 @@ legend .d-label {
1616
1616
  .d-textarea--md:focus-within,
1617
1617
  .d-input__wrapper--md:focus-within,
1618
1618
  .d-input__wrapper:focus-within {
1619
- --input-color-border: var(--input-color-border-focus);
1620
- outline: 0;
1621
- box-shadow: var(--bs-focus-ring) !important;
1619
+ --input-color-background: hsla(var(--black-900-hsl) / 0.01);
1620
+ --input-color-border: var(--color-focus-ring) !important;
1621
+ box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
1622
1622
  }
1623
1623
  .d-input[disabled],
1624
1624
  .d-input--md[disabled],
@@ -1829,35 +1829,14 @@ legend .d-label {
1829
1829
  .d-input--warning,
1830
1830
  .d-textarea--warning {
1831
1831
  --input-color-border: var(--gold-400) !important;
1832
- --input-color-border-focus: var(--warning-color);
1833
- }
1834
- .d-input--warning:focus,
1835
- .d-textarea--warning:focus,
1836
- .d-input--warning:focus-within,
1837
- .d-textarea--warning:focus-within {
1838
- box-shadow: var(--bs-focus-ring-warning) !important;
1839
1832
  }
1840
1833
  .d-input--error,
1841
1834
  .d-textarea--error {
1842
- --input-color-border: var(--error-color) !important;
1843
- --input-color-border-focus: var(--error-color);
1844
- }
1845
- .d-input--error:focus,
1846
- .d-textarea--error:focus,
1847
- .d-input--error:focus-within,
1848
- .d-textarea--error:focus-within {
1849
- box-shadow: var(--bs-focus-ring-error) !important;
1835
+ --input-color-border: var(--red-300) !important;
1850
1836
  }
1851
1837
  .d-input--success,
1852
1838
  .d-textarea--success {
1853
- --input-color-border: var(--success-color) !important;
1854
- --input-color-border-focus: var(--success-color);
1855
- }
1856
- .d-input--success:focus,
1857
- .d-textarea--success:focus,
1858
- .d-input--success:focus-within,
1859
- .d-textarea--success:focus-within {
1860
- box-shadow: var(--bs-focus-ring-success) !important;
1839
+ --input-color-border: var(--green-400) !important;
1861
1840
  }
1862
1841
  .d-input-icon {
1863
1842
  --input-icon-size: var(--size-500);
@@ -1909,7 +1888,9 @@ legend .d-label {
1909
1888
  text-decoration: underline;
1910
1889
  background-color: transparent;
1911
1890
  border: 0;
1912
- transition: all var(--td25) var(--ttf-in-out);
1891
+ transition-timing-function: var(--ttf-out-quint);
1892
+ transition-duration: var(--td300);
1893
+ transition-property: background-color, border, box-shadow;
1913
1894
  -webkit-appearance: none;
1914
1895
  -moz-appearance: none;
1915
1896
  appearance: none;
@@ -1921,14 +1902,12 @@ legend .d-label {
1921
1902
  cursor: pointer;
1922
1903
  }
1923
1904
  .d-link.focus-visible.js-focus-visible, .js-focus-visible .d-link.focus-visible {
1924
- border-radius: var(--br4);
1925
1905
  outline: none;
1926
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
1906
+ box-shadow: var(--bs-focus-ring);
1927
1907
  }
1928
1908
  .d-link:focus-visible {
1929
- border-radius: var(--br4);
1930
1909
  outline: none;
1931
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
1910
+ box-shadow: var(--bs-focus-ring);
1932
1911
  }
1933
1912
  .d-link--warning {
1934
1913
  color: var(--fc-warning);
@@ -1936,47 +1915,23 @@ legend .d-label {
1936
1915
  .d-link--warning:hover {
1937
1916
  color: var(--fc-warning-hover);
1938
1917
  }
1939
- .d-link--warning.focus-visible.js-focus-visible, .js-focus-visible .d-link--warning.focus-visible {
1940
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
1941
- }
1942
- .d-link--warning:focus-visible {
1943
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
1944
- }
1945
1918
  .d-link--danger {
1946
- color: var(--fc-error);
1919
+ color: var(--fc-critical);
1947
1920
  }
1948
1921
  .d-link--danger:hover {
1949
- color: var(--error-color-hover);
1950
- }
1951
- .d-link--danger.focus-visible.js-focus-visible, .js-focus-visible .d-link--danger.focus-visible {
1952
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
1953
- }
1954
- .d-link--danger:focus-visible {
1955
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
1922
+ color: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
1956
1923
  }
1957
1924
  .d-link--success {
1958
1925
  color: var(--fc-success);
1959
1926
  }
1960
1927
  .d-link--success:hover {
1961
- color: var(--success-color-hover);
1962
- }
1963
- .d-link--success.focus-visible.js-focus-visible, .js-focus-visible .d-link--success.focus-visible {
1964
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
1965
- }
1966
- .d-link--success:focus-visible {
1967
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
1928
+ color: var(--green-500);
1968
1929
  }
1969
1930
  .d-link--muted {
1970
- color: var(--muted-color);
1931
+ color: var(--fc-secondary);
1971
1932
  }
1972
1933
  .d-link--muted:hover {
1973
- color: var(--muted-color-hover);
1974
- }
1975
- .d-link--muted.focus-visible.js-focus-visible, .js-focus-visible .d-link--muted.focus-visible {
1976
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
1977
- }
1978
- .d-link--muted:focus-visible {
1979
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
1934
+ color: var(--fc-primary);
1980
1935
  }
1981
1936
  .d-link[disabled],
1982
1937
  .d-link--disabled {
@@ -1993,16 +1948,10 @@ legend .d-label {
1993
1948
  box-shadow: none;
1994
1949
  }
1995
1950
  .d-link--inverted {
1996
- color: var(--inverted-color);
1951
+ color: var(--fc-primary-inverted);
1997
1952
  }
1998
1953
  .d-link--inverted:hover {
1999
- color: var(--inverted-color-hover);
2000
- }
2001
- .d-link--inverted.focus-visible.js-focus-visible, .js-focus-visible .d-link--inverted.focus-visible {
2002
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
2003
- }
2004
- .d-link--inverted:focus-visible {
2005
- box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
1954
+ color: var(--fc-secondary-inverted);
2006
1955
  }
2007
1956
  .d-link--inverted-disabled {
2008
1957
  color: var(--black-500);
@@ -2049,13 +1998,13 @@ legend .d-label {
2049
1998
  background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
2050
1999
  }
2051
2000
  .d-modal {
2052
- --modal-color-background: hsla(var(--black-900-hsl) / 60%);
2001
+ --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
2053
2002
  --modal-dialog-padding: var(--space-600);
2054
- --modal-dialog-color-background: var(--white);
2003
+ --modal-dialog-color-background: var(--bgc-primary);
2055
2004
  --modal-dialog-color-text: var(--fc-tertiary);
2056
2005
  --modal-header-color-text: var(--fc-secondary);
2057
- --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
2058
- --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
2006
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
2007
+ --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
2059
2008
  position: fixed;
2060
2009
  top: 0;
2061
2010
  right: 0;
@@ -2067,30 +2016,14 @@ legend .d-label {
2067
2016
  align-items: center;
2068
2017
  justify-content: center;
2069
2018
  padding: var(--space-600);
2070
- background-color: var(--modal-color-background);
2019
+ background-color: var(--modal-backdrop-color-background);
2071
2020
  backface-visibility: hidden;
2072
2021
  visibility: hidden;
2073
2022
  opacity: 0;
2074
2023
  will-change: visibility, z-index, opacity;
2075
2024
  }
2076
2025
  .d-modal--transparent {
2077
- --modal-color-background: hsla(var(--black-900-hsl) / 85%);
2078
- position: fixed;
2079
- top: 0;
2080
- right: 0;
2081
- bottom: 0;
2082
- left: 0;
2083
- z-index: var(--zi-hide);
2084
- display: flex;
2085
- flex-direction: column;
2086
- align-items: center;
2087
- justify-content: center;
2088
- padding: var(--space-600);
2089
- background-color: var(--d-bgc-transparent);
2090
- backface-visibility: hidden;
2091
- visibility: hidden;
2092
- opacity: 0;
2093
- will-change: visibility, z-index, opacity;
2026
+ --modal-backdrop-color-background: var(--d-bgc-transparent);
2094
2027
  }
2095
2028
  .d-modal__dialog {
2096
2029
  position: relative;
@@ -2151,7 +2084,7 @@ legend .d-label {
2151
2084
  .d-modal__banner {
2152
2085
  --modal-banner-padding-y: var(--space-500);
2153
2086
  --modal-banner-padding-x: var(--space-600);
2154
- --modal-banner-color-background: var(--gold-100);
2087
+ --modal-banner-color-background: var(--bgc-warning);
2155
2088
  position: relative;
2156
2089
  box-sizing: border-box;
2157
2090
  width: 100%;
@@ -2268,27 +2201,33 @@ legend .d-label {
2268
2201
  position: absolute;
2269
2202
  top: var(--size-600);
2270
2203
  left: 50%;
2204
+ display: flex;
2205
+ flex-direction: column;
2206
+ gap: var(--space-500);
2271
2207
  transform: translateX(-50%);
2272
2208
  }
2273
- .d-toast-wrapper > * + * {
2274
- margin-top: 0.8rem !important;
2275
- }
2276
2209
  .d-toast {
2277
- --toast-color-background: var(--black-100);
2210
+ --toast-color-background: var(--bgc-secondary);
2278
2211
  --toast-color-text: var(--fc-primary);
2212
+ --notice-color-icon: var(--toast-color-text);
2213
+ --toast-color-shadow: hsla(var(--black-900-hsl) / 15%);
2214
+ --toast-padding: var(--space-500);
2215
+ --toast-border-radius: var(--size-400);
2216
+ --toast-box-shadow: 0 0 0 var(--size-100) var(--toast-color-shadow) inset, var(--bs-md);
2217
+ --toast-font-size: var(--fs-200);
2218
+ --toast-line-height: var(--lh-300);
2279
2219
  z-index: var(--zi-notification);
2280
2220
  box-sizing: border-box;
2281
2221
  width: 100%;
2282
2222
  max-width: calc(var(--size-300) * 157);
2283
- margin-bottom: var(--space-400);
2284
- padding: calc(var(--space-300) * 3);
2223
+ padding: var(--toast-padding);
2285
2224
  color: var(--toast-color-text);
2286
- font-size: var(--fs-200);
2287
- line-height: var(--lh6);
2225
+ font-size: var(--toast-font-size);
2226
+ line-height: var(--toast-line-height);
2288
2227
  word-break: normal;
2289
2228
  background-color: var(--toast-color-background);
2290
- border-radius: var(--br4);
2291
- box-shadow: var(--bs-md) !important;
2229
+ border-radius: var(--toast-border-radius);
2230
+ box-shadow: var(--toast-box-shadow);
2292
2231
  }
2293
2232
  .d-toast > a {
2294
2233
  word-break: break-all;
@@ -2313,35 +2252,33 @@ legend .d-label {
2313
2252
  margin-left: var(--space-600);
2314
2253
  }
2315
2254
  .d-toast.d-toast--important {
2316
- --toast-color-background: var(--black-800);
2255
+ --toast-color-background: var(--bgc-contrast);
2317
2256
  --toast-color-text: var(--black-100);
2257
+ --notice-color-icon: var(--toast-color-text);
2318
2258
  }
2319
2259
  .d-toast--error {
2320
- --toast-color-background: var(--red-100);
2321
- --toast-color-text: var(--red-500);
2260
+ --toast-color-background: var(--bgc-critical);
2322
2261
  }
2323
2262
  .d-toast--error.d-toast--important {
2324
- --toast-color-background: var(--red-300);
2325
- --toast-color-text: var(--white);
2263
+ --toast-color-background: var(--red-400);
2264
+ --toast-color-text: var(--fc-primary-inverted);
2326
2265
  }
2327
2266
  .d-toast--info {
2328
- --toast-color-background: var(--purple-100);
2329
- --toast-color-text: var(--fc-primary);
2267
+ --toast-color-background: var(--bgc-info);
2330
2268
  }
2331
2269
  .d-toast--info.d-toast--important {
2332
- --toast-color-background: var(--purple-400);
2333
- --toast-color-text: var(--white);
2270
+ --toast-color-background: var(--blue-400);
2271
+ --toast-color-text: var(--fc-primary-inverted);
2334
2272
  }
2335
2273
  .d-toast--success {
2336
- --toast-color-background: var(--green-100);
2337
- --toast-color-text: var(--green-500);
2274
+ --toast-color-background: var(--bgc-success);
2338
2275
  }
2339
2276
  .d-toast--success.d-toast--important {
2340
- --toast-color-background: var(--green-200);
2341
- --toast-color-text: var(--green-500);
2277
+ --toast-color-background: var(--green-400);
2278
+ --toast-color-text: var(--fc-primary-inverted);
2342
2279
  }
2343
2280
  .d-toast--warning {
2344
- --toast-color-background: var(--gold-100);
2281
+ --toast-color-background: var(--bgc-warning);
2345
2282
  }
2346
2283
  .d-toast--warning.d-toast--important {
2347
2284
  --toast-color-background: var(--gold-200);
@@ -2349,17 +2286,18 @@ legend .d-label {
2349
2286
  }
2350
2287
  .d-toast--chat .d-notice__icon,
2351
2288
  .d-toast--chat .d-toast__meta {
2352
- color: var(--black-600);
2289
+ color: var(--fc-tertiary);
2353
2290
  }
2354
2291
  .d-toast--chat .d-toast__meta {
2355
2292
  font-size: var(--fs-100);
2356
2293
  }
2357
2294
  .d-toast--chat.d-toast--important .d-notice__icon,
2358
2295
  .d-toast--chat.d-toast--important .d-toast__meta {
2359
- color: var(--black-100);
2296
+ color: var(--fc-secondary-inverted);
2360
2297
  }
2361
2298
  .d-toast--organizer,
2362
2299
  .d-toast--viewing {
2300
+ --toast-border-radius: var(--size-200);
2363
2301
  border-top: var(--size-300) solid var(--magenta-300);
2364
2302
  }
2365
2303
  .d-toast--organizer .d-notice__icon,
@@ -2369,34 +2307,30 @@ legend .d-label {
2369
2307
  .d-toast--chat,
2370
2308
  .d-toast--organizer,
2371
2309
  .d-toast--viewing {
2372
- --toast-color-background: var(--white);
2373
- }
2374
- .d-toast--chat .d-notice__icon,
2375
- .d-toast--organizer .d-notice__icon,
2376
- .d-toast--viewing .d-notice__icon {
2377
- align-self: flex-start;
2378
- }
2379
- .d-toast--chat .d-notice__message,
2380
- .d-toast--organizer .d-notice__message,
2381
- .d-toast--viewing .d-notice__message {
2382
- display: flex;
2383
- flex-direction: column;
2384
- justify-content: center;
2310
+ --toast-color-background: var(--bgc-secondary);
2385
2311
  }
2386
2312
  .d-notice {
2387
- --notice-color-background: var(--black-100);
2313
+ --notice-color-background: var(--bgc-secondary);
2388
2314
  --notice-color-text: var(--fc-primary);
2315
+ --notice-color-icon: var(--notice-color-text);
2316
+ --notice-color-shadow: hsla(var(--black-900-hsl) / 0.06);
2317
+ --notice-padding: var(--space-500);
2318
+ --notice-font-size: var(--fs-200);
2319
+ --notice-line-height: var(--lh-300);
2320
+ --notice-border-radius: var(--size-400);
2321
+ --notice-box-shadow: 0 0 0 var(--size-100) var(--notice-color-shadow) inset;
2389
2322
  display: flex;
2390
2323
  align-items: center;
2391
2324
  box-sizing: border-box;
2392
2325
  width: 100%;
2393
2326
  max-width: calc(var(--size-300) * 157);
2394
- padding: calc(var(--space-300) * 3);
2327
+ padding: var(--notice-padding);
2395
2328
  color: var(--notice-color-text);
2396
- font-size: var(--fs-200);
2397
- line-height: var(--lh6);
2329
+ font-size: var(--notice-font-size);
2330
+ line-height: var(--notice-line-height);
2398
2331
  background-color: var(--notice-color-background);
2399
- border-radius: var(--br4);
2332
+ border-radius: var(--notice-border-radius);
2333
+ box-shadow: var(--notice-box-shadow);
2400
2334
  }
2401
2335
  .d-toast .d-notice {
2402
2336
  max-width: calc(var(--size-300) * 116);
@@ -2412,30 +2346,36 @@ legend .d-label {
2412
2346
  .d-notice__actions {
2413
2347
  display: flex;
2414
2348
  flex: 0 auto;
2349
+ gap: var(--space-400);
2415
2350
  align-items: center;
2416
2351
  }
2417
- .d-notice__actions > * + * {
2418
- margin-left: 0.8rem !important;
2419
- }
2420
2352
  .d-notice__icon {
2421
2353
  display: flex;
2422
2354
  flex: 0 auto;
2355
+ margin-right: calc(var(--space-300) * 3);
2356
+ color: var(--notice-color-icon);
2357
+ }
2358
+ .d-banner .d-notice__icon {
2423
2359
  margin-right: var(--space-400);
2424
- color: inherit;
2425
2360
  }
2426
2361
  .d-notice__title {
2427
2362
  font-weight: var(--fw-bold);
2428
2363
  font-size: inherit;
2429
2364
  }
2365
+ .d-notice__title:not([hidden]) + .d-notice__message {
2366
+ font-size: var(--fs-100);
2367
+ }
2430
2368
  .d-notice.d-notice--important {
2431
- --notice-color-background: var(--black-800);
2369
+ --notice-color-background: var(--bgc-contrast);
2432
2370
  --notice-color-text: var(--black-100);
2371
+ --notice-color-shadow: transparent;
2372
+ --notice-color-icon: var(--fc-primary-inverted);
2433
2373
  }
2434
2374
  .d-notice--error,
2435
2375
  .d-banner--error,
2436
2376
  .d-toast--error {
2437
- --notice-color-background: var(--red-100);
2438
- --notice-color-text: var(--red-500);
2377
+ --notice-color-background: var(--bgc-critical);
2378
+ --notice-color-icon: var(--red-400);
2439
2379
  }
2440
2380
  .d-notice--error.d-notice--important,
2441
2381
  .d-banner--error.d-notice--important,
@@ -2446,13 +2386,14 @@ legend .d-label {
2446
2386
  .d-notice--error.d-toast--important,
2447
2387
  .d-banner--error.d-toast--important,
2448
2388
  .d-toast--error.d-toast--important {
2449
- --notice-color-background: var(--red-300);
2450
- --notice-color-text: var(--white);
2389
+ --notice-color-background: var(--red-400);
2390
+ --notice-color-text: var(--fc-primary-inverted);
2451
2391
  }
2452
2392
  .d-notice--info,
2453
2393
  .d-banner--info,
2454
2394
  .d-toast--info {
2455
- --notice-color-background: var(--purple-100);
2395
+ --notice-color-background: var(--bgc-info);
2396
+ --notice-color-icon: var(--blue-500);
2456
2397
  }
2457
2398
  .d-notice--info.d-notice--important,
2458
2399
  .d-banner--info.d-notice--important,
@@ -2463,14 +2404,14 @@ legend .d-label {
2463
2404
  .d-notice--info.d-toast--important,
2464
2405
  .d-banner--info.d-toast--important,
2465
2406
  .d-toast--info.d-toast--important {
2466
- --notice-color-background: var(--purple-400);
2467
- --notice-color-text: var(--white);
2407
+ --notice-color-background: var(--blue-400);
2408
+ --notice-color-text: var(--fc-primary-inverted);
2468
2409
  }
2469
2410
  .d-notice--success,
2470
2411
  .d-banner--success,
2471
2412
  .d-toast--success {
2472
- --notice-color-background: var(--green-100);
2473
- --notice-color-text: var(--green-500);
2413
+ --notice-color-background: var(--bgc-success);
2414
+ --notice-color-icon: var(--green-400);
2474
2415
  }
2475
2416
  .d-notice--success.d-notice--important,
2476
2417
  .d-banner--success.d-notice--important,
@@ -2481,13 +2422,14 @@ legend .d-label {
2481
2422
  .d-notice--success.d-toast--important,
2482
2423
  .d-banner--success.d-toast--important,
2483
2424
  .d-toast--success.d-toast--important {
2484
- --notice-color-background: var(--green-200);
2485
- --notice-color-text: var(--green-500);
2425
+ --notice-color-background: var(--green-400);
2426
+ --notice-color-text: var(--fc-primary-inverted);
2486
2427
  }
2487
2428
  .d-notice--warning,
2488
2429
  .d-banner--warning,
2489
2430
  .d-toast--warning {
2490
- --notice-color-background: var(--gold-100);
2431
+ --notice-color-background: var(--bgc-warning);
2432
+ --notice-color-icon: var(--gold-400);
2491
2433
  }
2492
2434
  .d-notice--warning.d-notice--important,
2493
2435
  .d-banner--warning.d-notice--important,
@@ -2500,6 +2442,7 @@ legend .d-label {
2500
2442
  .d-toast--warning.d-toast--important {
2501
2443
  --notice-color-background: var(--gold-200);
2502
2444
  --notice-color-text: var(--fc-primary);
2445
+ --notice-color-icon: var(--notice-color-text);
2503
2446
  }
2504
2447
  body {
2505
2448
  --popover-color-background: var(--black-100);
@@ -2555,6 +2498,9 @@ body {
2555
2498
  --check-radio-color-background: var(--white);
2556
2499
  flex: 0 auto;
2557
2500
  align-self: flex-start;
2501
+ transition-timing-function: var(--ttf-out-quint);
2502
+ transition-duration: var(--td300);
2503
+ transition-property: box-shadow;
2558
2504
  }
2559
2505
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2560
2506
  .d-checkbox,
@@ -2576,22 +2522,10 @@ body {
2576
2522
  .d-radio::-ms-check {
2577
2523
  display: none;
2578
2524
  }
2579
- .d-checkbox.focus-visible.js-focus-visible,
2580
- .js-focus-visible .d-checkbox.focus-visible,
2581
- .d-radio.focus-visible.js-focus-visible,
2582
- .js-focus-visible .d-radio.focus-visible,
2583
- .d-checkbox:checked.focus-visible.js-focus-visible,
2584
- .js-focus-visible .d-checkbox:checked.focus-visible,
2585
- .d-radio:checked.focus-visible.js-focus-visible,
2586
- .js-focus-visible .d-radio:checked.focus-visible {
2587
- --check-radio-color-border: var(--check-radio-color);
2588
- outline: 0;
2589
- box-shadow: var(--bs-focus-ring);
2590
- }
2591
- .d-checkbox:focus-visible,
2592
- .d-radio:focus-visible,
2593
- .d-checkbox:checked:focus-visible,
2594
- .d-radio:checked:focus-visible {
2525
+ .d-checkbox:focus,
2526
+ .d-radio:focus,
2527
+ .d-checkbox:checked:focus,
2528
+ .d-radio:checked:focus {
2595
2529
  --check-radio-color-border: var(--check-radio-color);
2596
2530
  outline: 0;
2597
2531
  box-shadow: var(--bs-focus-ring);
@@ -2656,17 +2590,17 @@ body {
2656
2590
  background-repeat: no-repeat;
2657
2591
  background-position: center center;
2658
2592
  background-size: contain;
2659
- border-radius: var(--br2);
2593
+ border-radius: var(--size-300);
2660
2594
  }
2661
2595
  .d-checkbox.focus-visible.js-focus-visible,
2662
2596
  .js-focus-visible .d-checkbox.focus-visible,
2663
2597
  .d-checkbox:checked.focus-visible.js-focus-visible,
2664
2598
  .js-focus-visible .d-checkbox:checked.focus-visible {
2665
- border-radius: var(--br2);
2599
+ box-shadow: var(--bs-focus-ring);
2666
2600
  }
2667
2601
  .d-checkbox:focus-visible,
2668
2602
  .d-checkbox:checked:focus-visible {
2669
- border-radius: var(--br2);
2603
+ box-shadow: var(--bs-focus-ring);
2670
2604
  }
2671
2605
  .d-checkbox:checked {
2672
2606
  --check-radio-color-background: var(--check-radio-color);
@@ -2703,47 +2637,17 @@ body {
2703
2637
  }
2704
2638
  }
2705
2639
  .d-checkbox--warning {
2706
- --check-radio-color: var(--warning-color);
2640
+ --check-radio-color: var(--gold-500);
2707
2641
  --check-radio-color-border: var(--check-radio-color);
2708
2642
  }
2709
- .d-checkbox--warning.focus-visible.js-focus-visible,
2710
- .js-focus-visible .d-checkbox--warning.focus-visible,
2711
- .d-checkbox--warning:checked.focus-visible.js-focus-visible,
2712
- .js-focus-visible .d-checkbox--warning:checked.focus-visible {
2713
- box-shadow: var(--bs-focus-ring-warning);
2714
- }
2715
- .d-checkbox--warning:focus-visible,
2716
- .d-checkbox--warning:checked:focus-visible {
2717
- box-shadow: var(--bs-focus-ring-warning);
2718
- }
2719
2643
  .d-checkbox--error {
2720
- --check-radio-color: var(--error-color);
2644
+ --check-radio-color: var(--red-300);
2721
2645
  --check-radio-color-border: var(--check-radio-color);
2722
2646
  }
2723
- .d-checkbox--error.focus-visible.js-focus-visible,
2724
- .js-focus-visible .d-checkbox--error.focus-visible,
2725
- .d-checkbox--error:checked.focus-visible.js-focus-visible,
2726
- .js-focus-visible .d-checkbox--error:checked.focus-visible {
2727
- box-shadow: var(--bs-focus-ring-error);
2728
- }
2729
- .d-checkbox--error:focus-visible,
2730
- .d-checkbox--error:checked:focus-visible {
2731
- box-shadow: var(--bs-focus-ring-error);
2732
- }
2733
2647
  .d-checkbox--success {
2734
- --check-radio-color: var(--success-color);
2648
+ --check-radio-color: var(--green-400);
2735
2649
  --check-radio-color-border: var(--check-radio-color);
2736
2650
  }
2737
- .d-checkbox--success.focus-visible.js-focus-visible,
2738
- .js-focus-visible .d-checkbox--success.focus-visible,
2739
- .d-checkbox--success:checked.focus-visible.js-focus-visible,
2740
- .js-focus-visible .d-checkbox--success:checked.focus-visible {
2741
- box-shadow: var(--bs-focus-ring-success);
2742
- }
2743
- .d-checkbox--success:focus-visible,
2744
- .d-checkbox--success:checked:focus-visible {
2745
- box-shadow: var(--bs-focus-ring-success);
2746
- }
2747
2651
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2748
2652
  .d-radio {
2749
2653
  border-radius: var(--br-circle);
@@ -2776,47 +2680,17 @@ body {
2776
2680
  }
2777
2681
  }
2778
2682
  .d-radio--warning {
2779
- --check-radio-color: var(--warning-color);
2683
+ --check-radio-color: var(--gold-500);
2780
2684
  --check-radio-color-border: var(--check-radio-color);
2781
2685
  }
2782
- .d-radio--warning.focus-visible.js-focus-visible,
2783
- .js-focus-visible .d-radio--warning.focus-visible,
2784
- .d-radio--warning:checked.focus-visible.js-focus-visible,
2785
- .js-focus-visible .d-radio--warning:checked.focus-visible {
2786
- box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--space-200) var(--white);
2787
- }
2788
- .d-radio--warning:focus-visible,
2789
- .d-radio--warning:checked:focus-visible {
2790
- box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--space-200) var(--white);
2791
- }
2792
2686
  .d-radio--error {
2793
- --check-radio-color: var(--error-color);
2687
+ --check-radio-color: var(--red-300);
2794
2688
  --check-radio-color-border: var(--check-radio-color);
2795
2689
  }
2796
- .d-radio--error.focus-visible.js-focus-visible,
2797
- .js-focus-visible .d-radio--error.focus-visible,
2798
- .d-radio--error:checked.focus-visible.js-focus-visible,
2799
- .js-focus-visible .d-radio--error:checked.focus-visible {
2800
- box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--space-200) var(--white);
2801
- }
2802
- .d-radio--error:focus-visible,
2803
- .d-radio--error:checked:focus-visible {
2804
- box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--space-200) var(--white);
2805
- }
2806
2690
  .d-radio--success {
2807
- --check-radio-color: var(--success-color);
2691
+ --check-radio-color: var(--green-400);
2808
2692
  --check-radio-color-border: var(--check-radio-color);
2809
2693
  }
2810
- .d-radio--success.focus-visible.js-focus-visible,
2811
- .js-focus-visible .d-radio--success.focus-visible,
2812
- .d-radio--success:checked.focus-visible.js-focus-visible,
2813
- .js-focus-visible .d-radio--success:checked.focus-visible {
2814
- box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--space-200) var(--white);
2815
- }
2816
- .d-radio--success:focus-visible,
2817
- .d-radio--success:checked:focus-visible {
2818
- box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--space-200) var(--white);
2819
- }
2820
2694
  .d-select {
2821
2695
  --select-color-border: var(--black-500);
2822
2696
  --select-notch-position-right: calc(var(--size-300) * 2);
@@ -2841,15 +2715,14 @@ body {
2841
2715
  .d-select__input {
2842
2716
  --select-color-border: var(--input-color-border);
2843
2717
  --select-notch-padding-right: calc(var(--space-300) * 6);
2844
- --input-color-border-focus: var(--purple-400);
2845
- --input-color-border: hsla(var(--black-900-hsl) / 9%);
2846
- --input-color-background: hsla(var(--black-900-hsl) / 3%);
2847
- --input-color-background-disabled: hsla(var(--black-900-hsl) / 12%);
2718
+ --input-color-border: hsla(var(--black-900-hsl) / 0.09);
2719
+ --input-color-background: hsla(var(--black-900-hsl) / 0.03);
2720
+ --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
2721
+ --input-color-text: var(--fc-secondary);
2848
2722
  --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
2849
2723
  --input-border-radius: var(--size-400);
2850
2724
  --input-padding-y: calc(var(--space-400) - var(--input-border-width));
2851
2725
  --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2852
- --input-color-text: var(--fc-secondary);
2853
2726
  --input-font-size: var(--fs-200);
2854
2727
  --input-line-height: var(--lh-200);
2855
2728
  position: relative;
@@ -2871,14 +2744,10 @@ body {
2871
2744
  box-shadow: none;
2872
2745
  transition-timing-function: var(--ttf-in-out);
2873
2746
  transition-duration: 100ms;
2874
- transition-property: border, box-shadow, background-color;
2747
+ transition-property: box-shadow, background-color;
2875
2748
  appearance: none;
2876
2749
  padding-right: var(--select-notch-padding-right);
2877
2750
  }
2878
- .bg-test .d-select__input {
2879
- --input-color-border: var(--black-300);
2880
- --input-color-background: var(--black-100);
2881
- }
2882
2751
  .d-select__input::placeholder {
2883
2752
  color: var(--fc-placeholder);
2884
2753
  }
@@ -2887,9 +2756,9 @@ body {
2887
2756
  }
2888
2757
  .d-select__input:focus,
2889
2758
  .d-select__input:focus-within {
2890
- --input-color-border: var(--input-color-border-focus);
2891
- outline: 0;
2892
- box-shadow: var(--bs-focus-ring) !important;
2759
+ --input-color-background: hsla(var(--black-900-hsl) / 0.01);
2760
+ --input-color-border: var(--color-focus-ring) !important;
2761
+ box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
2893
2762
  }
2894
2763
  .d-select__input[disabled],
2895
2764
  .d-select__input[read-only] {
@@ -2921,8 +2790,7 @@ body {
2921
2790
  display: none;
2922
2791
  }
2923
2792
  .d-select__input:focus {
2924
- --select-color-border: var(--purple-400);
2925
- box-shadow: var(--bs-focus-ring);
2793
+ --input-color-background: hsla(var(--black-900-hsl) / 0.03);
2926
2794
  }
2927
2795
  .d-select__input[disabled],
2928
2796
  .d-select__input[read-only] {
@@ -2992,26 +2860,14 @@ body {
2992
2860
  --select-notch-position-right: calc(var(--size-300) * 3);
2993
2861
  }
2994
2862
  .d-select__input--success {
2995
- --input-color-border: var(--success-color);
2996
- }
2997
- .d-select__input--success:focus {
2998
- --input-color-border: var(--success-color);
2999
- box-shadow: var(--bs-focus-ring-success) !important;
2863
+ --input-color-border: var(--green-400);
3000
2864
  }
3001
2865
  .d-select__input--error {
3002
- --input-color-border: var(--error-color);
3003
- }
3004
- .d-select__input--error:focus {
3005
- --input-color-border: var(--error-color);
3006
- box-shadow: var(--bs-focus-ring-error) !important;
2866
+ --input-color-border: var(--red-300);
3007
2867
  }
3008
2868
  .d-select__input--warning {
3009
2869
  --input-color-border: var(--gold-400);
3010
2870
  }
3011
- .d-select__input--warning:focus {
3012
- --input-color-border: var(--warning-color);
3013
- box-shadow: var(--bs-focus-ring-warning) !important;
3014
- }
3015
2871
  .d-select--disabled::before,
3016
2872
  .d-select--disabled::after {
3017
2873
  opacity: 0.33;
@@ -3043,9 +2899,9 @@ body {
3043
2899
  }
3044
2900
  }
3045
2901
  .d-table {
3046
- --table-color-th: var(--black-700);
3047
- --table-color-td: var(--black-600);
3048
- --table-color-border: var(--black-400);
2902
+ --table-color-border: var(--black-300);
2903
+ --table-th-color-text: var(--fc-secondary);
2904
+ --table-td-color-text: var(--fc-tertiary);
3049
2905
  display: table;
3050
2906
  box-sizing: border-box;
3051
2907
  width: 100%;
@@ -3058,7 +2914,7 @@ body {
3058
2914
  }
3059
2915
  .d-table .d-table__caption {
3060
2916
  margin-bottom: var(--space-400);
3061
- color: var(--table-color-th);
2917
+ color: var(--table-th-color-text);
3062
2918
  font-weight: var(--fw-bold);
3063
2919
  font-size: var(--fs-200);
3064
2920
  text-align: unset !important;
@@ -3071,11 +2927,11 @@ body {
3071
2927
  text-transform: uppercase;
3072
2928
  }
3073
2929
  .d-table th {
3074
- color: var(--table-color-th);
2930
+ color: var(--table-th-color-text);
3075
2931
  font-weight: var(--fw-bold);
3076
2932
  }
3077
2933
  .d-table td {
3078
- color: var(--table-color-td);
2934
+ color: var(--table-td-color-text);
3079
2935
  }
3080
2936
  .d-table th,
3081
2937
  .d-table td {
@@ -3092,15 +2948,15 @@ body {
3092
2948
  border-bottom-width: 0;
3093
2949
  }
3094
2950
  .d-table--inverted {
3095
- --table-color-th: var(--black-200);
3096
- --table-color-td: var(--black-400);
3097
- --table-color-border: var(--black-200);
2951
+ --table-th-color-text: var(--fc-secondary-inverted);
2952
+ --table-td-color-text: var(--black-400);
2953
+ --table-color-border: var(--black-500);
3098
2954
  }
3099
2955
  .d-table--striped tr:nth-child(even) {
3100
- background-color: hsl(var(--black-400-h), var(--black-400-s), var(--black-400-l), 0.1);
2956
+ background-color: hsla(var(--bgc-bold-hsl) / 0.1);
3101
2957
  }
3102
2958
  .d-table--striped.d-table--inverted tr:nth-child(even) {
3103
- background-color: hsl(var(--black-300-h), var(--black-300-s), var(--black-300-l), 0.1);
2959
+ background-color: hsla(var(--bgc-primary-hsl) / 0.08);
3104
2960
  }
3105
2961
  .d-tablist {
3106
2962
  position: relative;
@@ -3109,6 +2965,9 @@ body {
3109
2965
  color: var(--fc-tertiary);
3110
2966
  font-size: var(--fs-200);
3111
2967
  }
2968
+ .d-tablist:focus {
2969
+ outline: 0;
2970
+ }
3112
2971
  .d-tablist:not(.d-tablist--no-border)::after {
3113
2972
  position: absolute;
3114
2973
  right: 0;
@@ -3120,9 +2979,8 @@ body {
3120
2979
  content: '';
3121
2980
  }
3122
2981
  .d-tab {
3123
- --tab-color-background: hsla(var(--white-hsl) / 0%);
2982
+ --tab-color-background: hsla(var(--white-hsl) / 0);
3124
2983
  --tab-color-text: inherit;
3125
- --tab-color-shadow: var(--focus-ring);
3126
2984
  position: relative;
3127
2985
  display: inline-flex;
3128
2986
  align-items: center;
@@ -3137,9 +2995,9 @@ body {
3137
2995
  border: 0;
3138
2996
  border-radius: var(--size-300) var(--size-300) 0 0;
3139
2997
  cursor: pointer;
3140
- transition-timing-function: var(--ttf-in-out);
3141
- transition-duration: var(--td50);
3142
- transition-property: background-color, color;
2998
+ transition-timing-function: var(--ttf-out-quint);
2999
+ transition-duration: var(--td300);
3000
+ transition-property: background-color, border, color, box-shadow;
3143
3001
  fill: currentColor;
3144
3002
  }
3145
3003
  .d-tab:first-of-type {
@@ -3159,11 +3017,11 @@ body {
3159
3017
  }
3160
3018
  .d-tab.focus-visible.js-focus-visible, .js-focus-visible .d-tab.focus-visible {
3161
3019
  outline: none;
3162
- box-shadow: 0 0 0 var(--size-200) var(--tab-color-shadow);
3020
+ box-shadow: var(--bs-focus-ring-inset);
3163
3021
  }
3164
3022
  .d-tab:focus-visible {
3165
3023
  outline: none;
3166
- box-shadow: 0 0 0 var(--size-200) var(--tab-color-shadow);
3024
+ box-shadow: var(--bs-focus-ring-inset);
3167
3025
  }
3168
3026
  .d-tab:hover {
3169
3027
  --tab-color-background: var(--black-100);
@@ -3179,7 +3037,7 @@ body {
3179
3037
  z-index: var(--zi-selected);
3180
3038
  }
3181
3039
  .d-tab--selected:hover {
3182
- --tab-color-background: hsla(var(--purple-400-hsl) / 10%);
3040
+ --tab-color-background: hsla(var(--purple-400-hsl) / 0.1);
3183
3041
  --tab-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
3184
3042
  }
3185
3043
  .d-tab--selected::after,
@@ -3187,20 +3045,19 @@ body {
3187
3045
  --tab-color-background: var(--purple-400);
3188
3046
  }
3189
3047
  .d-tablist--inverted {
3190
- --tab-color-text: var(--white);
3048
+ --tab-color-text: var(--fc-primary-inverted);
3191
3049
  }
3192
3050
  .d-tablist--inverted::after {
3193
- background-color: hsla(var(--purple-600-hsl) / 50%);
3051
+ background-color: hsla(var(--purple-600-hsl) / 0.5);
3194
3052
  }
3195
3053
  .d-tablist--inverted .d-tab {
3196
- --tab-color-text: var(--white);
3054
+ --tab-color-text: var(--fc-secondary-inverted);
3197
3055
  }
3198
3056
  .d-tablist--inverted .d-tab:hover {
3199
- --tab-color-background: hsla(var(--white-hsl) / 10%);
3057
+ --tab-color-background: hsla(var(--white-hsl) / 0.1);
3200
3058
  }
3201
3059
  .d-tablist--inverted .d-tab--selected {
3202
- --tab-color-text: var(--white);
3203
- --tab-color-shadow: var(--white);
3060
+ --tab-color-text: var(--fc-primary-inverted);
3204
3061
  }
3205
3062
  .d-tablist--inverted .d-tab--selected::after {
3206
3063
  --tab-color-background: currentColor;
@@ -3219,7 +3076,7 @@ body {
3219
3076
  }
3220
3077
  .d-tooltip {
3221
3078
  --tooltip-color-background: var(--black-800);
3222
- --tooltip-color-text: var(--white);
3079
+ --tooltip-color-text: var(--fc-primary-inverted);
3223
3080
  --tooltip-font-weight: var(--fw-medium);
3224
3081
  --tooltip-line-height: var(--lh-300);
3225
3082
  --tooltip-padding-y: var(--space-400);
@@ -3244,7 +3101,7 @@ body {
3244
3101
  }
3245
3102
  .d-tooltip--inverted {
3246
3103
  --tooltip-color-background: var(--black-200);
3247
- --tooltip-color-text: var(--black-700);
3104
+ --tooltip-color-text: var(--fc-secondary);
3248
3105
  }
3249
3106
  .d-tooltip--hide,
3250
3107
  .d-tooltip--hover .d-tooltip {
@@ -3408,8 +3265,8 @@ body {
3408
3265
  bottom: var(--space-400);
3409
3266
  }
3410
3267
  .d-toggle {
3411
- --toggle-transition-timing-function: var(--ttf-in-out);
3412
- --toggle-transition-speed: var(--td200);
3268
+ --toggle-transition-timing-function: var(--ttf-out-quint);
3269
+ --toggle-transition-speed: var(--td300);
3413
3270
  --toggle-color-background: var(--black-400);
3414
3271
  --toggle-size-height: calc(var(--size-300) * 6);
3415
3272
  --toggle-size-width: calc(var(--size-300) * 12);
@@ -3426,6 +3283,9 @@ body {
3426
3283
  border: var(--size-100) solid var(--toggle-color-background);
3427
3284
  border-radius: var(--toggle-size-width);
3428
3285
  cursor: pointer;
3286
+ transition-timing-function: var(--ttf-out-quint);
3287
+ transition-duration: var(--td300);
3288
+ transition-property: background-color, border, color, box-shadow;
3429
3289
  }
3430
3290
  .d-toggle__inner {
3431
3291
  position: absolute;
@@ -7199,7 +7059,24 @@ body.theme-dark .d\:d-divide-black-600 > * + * {
7199
7059
  }
7200
7060
  .d-bgc-black-600,
7201
7061
  .h\:d-bgc-black-600:hover,
7202
- .f\:d-bgc-black-600:focus {
7062
+ .f\:d-bgc-black-600:focus,
7063
+ .d-bgc-strong,
7064
+ .h\:d-bgc-strong:hover,
7065
+ .f\:d-bgc-strong:focus,
7066
+ .f\:d-bgc-strong:focus-within,
7067
+ .fv\:d-bgc-strong.focus-visible.js-focus-visible,
7068
+ .js-focus-visible .fv\:d-bgc-strong.focus-visible {
7069
+ --bgo: 100%;
7070
+ background-color: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(--bgo)) !important;
7071
+ }
7072
+ .d-bgc-black-600,
7073
+ .h\:d-bgc-black-600:hover,
7074
+ .f\:d-bgc-black-600:focus,
7075
+ .d-bgc-strong,
7076
+ .h\:d-bgc-strong:hover,
7077
+ .f\:d-bgc-strong:focus,
7078
+ .f\:d-bgc-strong:focus-within,
7079
+ .fv\:d-bgc-strong:focus-visible {
7203
7080
  --bgo: 100%;
7204
7081
  background-color: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(--bgo)) !important;
7205
7082
  }
@@ -7549,7 +7426,24 @@ body.theme-dark .d\:d-divide-black-300 > * + * {
7549
7426
  }
7550
7427
  .d-bgc-black-300,
7551
7428
  .h\:d-bgc-black-300:hover,
7552
- .f\:d-bgc-black-300:focus {
7429
+ .f\:d-bgc-black-300:focus,
7430
+ .d-bgc-bold,
7431
+ .h\:d-bgc-bold:hover,
7432
+ .f\:d-bgc-bold:focus,
7433
+ .f\:d-bgc-bold:focus-within,
7434
+ .fv\:d-bgc-bold.focus-visible.js-focus-visible,
7435
+ .js-focus-visible .fv\:d-bgc-bold.focus-visible {
7436
+ --bgo: 100%;
7437
+ background-color: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / var(--bgo)) !important;
7438
+ }
7439
+ .d-bgc-black-300,
7440
+ .h\:d-bgc-black-300:hover,
7441
+ .f\:d-bgc-black-300:focus,
7442
+ .d-bgc-bold,
7443
+ .h\:d-bgc-bold:hover,
7444
+ .f\:d-bgc-bold:focus,
7445
+ .f\:d-bgc-bold:focus-within,
7446
+ .fv\:d-bgc-bold:focus-visible {
7553
7447
  --bgo: 100%;
7554
7448
  background-color: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / var(--bgo)) !important;
7555
7449
  }
@@ -7647,7 +7541,24 @@ body.theme-dark .d\:d-divide-black-200 > * + * {
7647
7541
  }
7648
7542
  .d-bgc-black-200,
7649
7543
  .h\:d-bgc-black-200:hover,
7650
- .f\:d-bgc-black-200:focus {
7544
+ .f\:d-bgc-black-200:focus,
7545
+ .d-bgc-moderate,
7546
+ .h\:d-bgc-moderate:hover,
7547
+ .f\:d-bgc-moderate:focus,
7548
+ .f\:d-bgc-moderate:focus-within,
7549
+ .fv\:d-bgc-moderate.focus-visible.js-focus-visible,
7550
+ .js-focus-visible .fv\:d-bgc-moderate.focus-visible {
7551
+ --bgo: 100%;
7552
+ background-color: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / var(--bgo)) !important;
7553
+ }
7554
+ .d-bgc-black-200,
7555
+ .h\:d-bgc-black-200:hover,
7556
+ .f\:d-bgc-black-200:focus,
7557
+ .d-bgc-moderate,
7558
+ .h\:d-bgc-moderate:hover,
7559
+ .f\:d-bgc-moderate:focus,
7560
+ .f\:d-bgc-moderate:focus-within,
7561
+ .fv\:d-bgc-moderate:focus-visible {
7651
7562
  --bgo: 100%;
7652
7563
  background-color: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / var(--bgo)) !important;
7653
7564
  }
@@ -7762,7 +7673,24 @@ body.theme-dark .d\:d-divide-black-100 > * + * {
7762
7673
  }
7763
7674
  .d-bgc-black-100,
7764
7675
  .h\:d-bgc-black-100:hover,
7765
- .f\:d-bgc-black-100:focus {
7676
+ .f\:d-bgc-black-100:focus,
7677
+ .d-bgc-secondary,
7678
+ .h\:d-bgc-secondary:hover,
7679
+ .f\:d-bgc-secondary:focus,
7680
+ .f\:d-bgc-secondary:focus-within,
7681
+ .fv\:d-bgc-secondary.focus-visible.js-focus-visible,
7682
+ .js-focus-visible .fv\:d-bgc-secondary.focus-visible {
7683
+ --bgo: 100%;
7684
+ background-color: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / var(--bgo)) !important;
7685
+ }
7686
+ .d-bgc-black-100,
7687
+ .h\:d-bgc-black-100:hover,
7688
+ .f\:d-bgc-black-100:focus,
7689
+ .d-bgc-secondary,
7690
+ .h\:d-bgc-secondary:hover,
7691
+ .f\:d-bgc-secondary:focus,
7692
+ .f\:d-bgc-secondary:focus-within,
7693
+ .fv\:d-bgc-secondary:focus-visible {
7766
7694
  --bgo: 100%;
7767
7695
  background-color: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / var(--bgo)) !important;
7768
7696
  }
@@ -9652,7 +9580,24 @@ body.theme-dark .d\:d-bgc-gold-600 {
9652
9580
  }
9653
9581
  .d-fc-gold-500,
9654
9582
  .h\:d-fc-gold-500:hover,
9655
- .f\:d-fc-gold-500:focus {
9583
+ .f\:d-fc-gold-500:focus,
9584
+ .d-fc-warning,
9585
+ .h\:d-fc-warning:hover,
9586
+ .f\:d-fc-warning:focus,
9587
+ .f\:d-fc-warning:focus-within,
9588
+ .fv\:d-fc-warning.focus-visible.js-focus-visible,
9589
+ .js-focus-visible .fv\:d-fc-warning.focus-visible {
9590
+ --fco: 100%;
9591
+ color: hsla(var(--gold-500-h) var(--gold-500-s) var(--gold-500-l) / var(--fco)) !important;
9592
+ }
9593
+ .d-fc-gold-500,
9594
+ .h\:d-fc-gold-500:hover,
9595
+ .f\:d-fc-gold-500:focus,
9596
+ .d-fc-warning,
9597
+ .h\:d-fc-warning:hover,
9598
+ .f\:d-fc-warning:focus,
9599
+ .f\:d-fc-warning:focus-within,
9600
+ .fv\:d-fc-warning:focus-visible {
9656
9601
  --fco: 100%;
9657
9602
  color: hsla(var(--gold-500-h) var(--gold-500-s) var(--gold-500-l) / var(--fco)) !important;
9658
9603
  }
@@ -9918,24 +9863,7 @@ body.theme-dark .d\:d-divide-gold-300 > * + * {
9918
9863
  }
9919
9864
  .d-bgc-gold-300,
9920
9865
  .h\:d-bgc-gold-300:hover,
9921
- .f\:d-bgc-gold-300:focus,
9922
- .d-bgc-warning,
9923
- .h\:d-bgc-warning:hover,
9924
- .f\:d-bgc-warning:focus,
9925
- .f\:d-bgc-warning:focus-within,
9926
- .fv\:d-bgc-warning.focus-visible.js-focus-visible,
9927
- .js-focus-visible .fv\:d-bgc-warning.focus-visible {
9928
- --bgo: 100%;
9929
- background-color: hsla(var(--gold-300-h) var(--gold-300-s) var(--gold-300-l) / var(--bgo)) !important;
9930
- }
9931
- .d-bgc-gold-300,
9932
- .h\:d-bgc-gold-300:hover,
9933
- .f\:d-bgc-gold-300:focus,
9934
- .d-bgc-warning,
9935
- .h\:d-bgc-warning:hover,
9936
- .f\:d-bgc-warning:focus,
9937
- .f\:d-bgc-warning:focus-within,
9938
- .fv\:d-bgc-warning:focus-visible {
9866
+ .f\:d-bgc-gold-300:focus {
9939
9867
  --bgo: 100%;
9940
9868
  background-color: hsla(var(--gold-300-h) var(--gold-300-s) var(--gold-300-l) / var(--bgo)) !important;
9941
9869
  }
@@ -10131,7 +10059,24 @@ body.theme-dark .d\:d-divide-gold-100 > * + * {
10131
10059
  }
10132
10060
  .d-bgc-gold-100,
10133
10061
  .h\:d-bgc-gold-100:hover,
10134
- .f\:d-bgc-gold-100:focus {
10062
+ .f\:d-bgc-gold-100:focus,
10063
+ .d-bgc-warning,
10064
+ .h\:d-bgc-warning:hover,
10065
+ .f\:d-bgc-warning:focus,
10066
+ .f\:d-bgc-warning:focus-within,
10067
+ .fv\:d-bgc-warning.focus-visible.js-focus-visible,
10068
+ .js-focus-visible .fv\:d-bgc-warning.focus-visible {
10069
+ --bgo: 100%;
10070
+ background-color: hsla(var(--gold-100-h) var(--gold-100-s) var(--gold-100-l) / var(--bgo)) !important;
10071
+ }
10072
+ .d-bgc-gold-100,
10073
+ .h\:d-bgc-gold-100:hover,
10074
+ .f\:d-bgc-gold-100:focus,
10075
+ .d-bgc-warning,
10076
+ .h\:d-bgc-warning:hover,
10077
+ .f\:d-bgc-warning:focus,
10078
+ .f\:d-bgc-warning:focus-within,
10079
+ .fv\:d-bgc-warning:focus-visible {
10135
10080
  --bgo: 100%;
10136
10081
  background-color: hsla(var(--gold-100-h) var(--gold-100-s) var(--gold-100-l) / var(--bgo)) !important;
10137
10082
  }
@@ -10459,7 +10404,13 @@ body.theme-dark .d\:d-bgc-red-400 {
10459
10404
  .f\:d-fc-error:focus,
10460
10405
  .f\:d-fc-error:focus-within,
10461
10406
  .fv\:d-fc-error.focus-visible.js-focus-visible,
10462
- .js-focus-visible .fv\:d-fc-error.focus-visible {
10407
+ .js-focus-visible .fv\:d-fc-error.focus-visible,
10408
+ .d-fc-critical,
10409
+ .h\:d-fc-critical:hover,
10410
+ .f\:d-fc-critical:focus,
10411
+ .f\:d-fc-critical:focus-within,
10412
+ .fv\:d-fc-critical.focus-visible.js-focus-visible,
10413
+ .js-focus-visible .fv\:d-fc-critical.focus-visible {
10463
10414
  --fco: 100%;
10464
10415
  color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10465
10416
  }
@@ -10470,7 +10421,12 @@ body.theme-dark .d\:d-bgc-red-400 {
10470
10421
  .h\:d-fc-error:hover,
10471
10422
  .f\:d-fc-error:focus,
10472
10423
  .f\:d-fc-error:focus-within,
10473
- .fv\:d-fc-error:focus-visible {
10424
+ .fv\:d-fc-error:focus-visible,
10425
+ .d-fc-critical,
10426
+ .h\:d-fc-critical:hover,
10427
+ .f\:d-fc-critical:focus,
10428
+ .f\:d-fc-critical:focus-within,
10429
+ .fv\:d-fc-critical:focus-visible {
10474
10430
  --fco: 100%;
10475
10431
  color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10476
10432
  }
@@ -10540,35 +10496,7 @@ body.theme-dark .d\:d-divide-red-300 > * + * {
10540
10496
  }
10541
10497
  .d-bgc-red-300,
10542
10498
  .h\:d-bgc-red-300:hover,
10543
- .f\:d-bgc-red-300:focus,
10544
- .d-bgc-error,
10545
- .d-bgc-danger,
10546
- .h\:d-bgc-error:hover,
10547
- .f\:d-bgc-error:focus,
10548
- .f\:d-bgc-error:focus-within,
10549
- .fv\:d-bgc-error.focus-visible.js-focus-visible,
10550
- .js-focus-visible .fv\:d-bgc-error.focus-visible,
10551
- .h\:d-bgc-danger:hover,
10552
- .f\:d-bgc-danger:focus,
10553
- .f\:d-bgc-danger:focus-within,
10554
- .fv\:d-bgc-danger.focus-visible.js-focus-visible,
10555
- .js-focus-visible .fv\:d-bgc-danger.focus-visible {
10556
- --bgo: 100%;
10557
- background-color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--bgo)) !important;
10558
- }
10559
- .d-bgc-red-300,
10560
- .h\:d-bgc-red-300:hover,
10561
- .f\:d-bgc-red-300:focus,
10562
- .d-bgc-error,
10563
- .d-bgc-danger,
10564
- .h\:d-bgc-error:hover,
10565
- .f\:d-bgc-error:focus,
10566
- .f\:d-bgc-error:focus-within,
10567
- .fv\:d-bgc-error:focus-visible,
10568
- .h\:d-bgc-danger:hover,
10569
- .f\:d-bgc-danger:focus,
10570
- .f\:d-bgc-danger:focus-within,
10571
- .fv\:d-bgc-danger:focus-visible {
10499
+ .f\:d-bgc-red-300:focus {
10572
10500
  --bgo: 100%;
10573
10501
  background-color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--bgo)) !important;
10574
10502
  }
@@ -10764,7 +10692,37 @@ body.theme-dark .d\:d-divide-red-100 > * + * {
10764
10692
  }
10765
10693
  .d-bgc-red-100,
10766
10694
  .h\:d-bgc-red-100:hover,
10767
- .f\:d-bgc-red-100:focus {
10695
+ .f\:d-bgc-red-100:focus,
10696
+ .d-bgc-critical,
10697
+ .d-bgc-error,
10698
+ .d-bgc-danger,
10699
+ .h\:d-bgc-error:hover,
10700
+ .f\:d-bgc-error:focus,
10701
+ .f\:d-bgc-error:focus-within,
10702
+ .fv\:d-bgc-error.focus-visible.js-focus-visible,
10703
+ .js-focus-visible .fv\:d-bgc-error.focus-visible,
10704
+ .h\:d-bgc-danger:hover,
10705
+ .f\:d-bgc-danger:focus,
10706
+ .f\:d-bgc-danger:focus-within,
10707
+ .fv\:d-bgc-danger.focus-visible.js-focus-visible,
10708
+ .js-focus-visible .fv\:d-bgc-danger.focus-visible {
10709
+ --bgo: 100%;
10710
+ background-color: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--bgo)) !important;
10711
+ }
10712
+ .d-bgc-red-100,
10713
+ .h\:d-bgc-red-100:hover,
10714
+ .f\:d-bgc-red-100:focus,
10715
+ .d-bgc-critical,
10716
+ .d-bgc-error,
10717
+ .d-bgc-danger,
10718
+ .h\:d-bgc-error:hover,
10719
+ .f\:d-bgc-error:focus,
10720
+ .f\:d-bgc-error:focus-within,
10721
+ .fv\:d-bgc-error:focus-visible,
10722
+ .h\:d-bgc-danger:hover,
10723
+ .f\:d-bgc-danger:focus,
10724
+ .f\:d-bgc-danger:focus-within,
10725
+ .fv\:d-bgc-danger:focus-visible {
10768
10726
  --bgo: 100%;
10769
10727
  background-color: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--bgo)) !important;
10770
10728
  }
@@ -10988,7 +10946,24 @@ body.theme-dark .d\:d-bgc-green-500 {
10988
10946
  }
10989
10947
  .d-fc-green-400,
10990
10948
  .h\:d-fc-green-400:hover,
10991
- .f\:d-fc-green-400:focus {
10949
+ .f\:d-fc-green-400:focus,
10950
+ .d-fc-success,
10951
+ .h\:d-fc-success:hover,
10952
+ .f\:d-fc-success:focus,
10953
+ .f\:d-fc-success:focus-within,
10954
+ .fv\:d-fc-success.focus-visible.js-focus-visible,
10955
+ .js-focus-visible .fv\:d-fc-success.focus-visible {
10956
+ --fco: 100%;
10957
+ color: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--fco)) !important;
10958
+ }
10959
+ .d-fc-green-400,
10960
+ .h\:d-fc-green-400:hover,
10961
+ .f\:d-fc-green-400:focus,
10962
+ .d-fc-success,
10963
+ .h\:d-fc-success:hover,
10964
+ .f\:d-fc-success:focus,
10965
+ .f\:d-fc-success:focus-within,
10966
+ .fv\:d-fc-success:focus-visible {
10992
10967
  --fco: 100%;
10993
10968
  color: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--fco)) !important;
10994
10969
  }
@@ -11058,24 +11033,7 @@ body.theme-dark .d\:d-divide-green-400 > * + * {
11058
11033
  }
11059
11034
  .d-bgc-green-400,
11060
11035
  .h\:d-bgc-green-400:hover,
11061
- .f\:d-bgc-green-400:focus,
11062
- .d-bgc-success,
11063
- .h\:d-bgc-success:hover,
11064
- .f\:d-bgc-success:focus,
11065
- .f\:d-bgc-success:focus-within,
11066
- .fv\:d-bgc-success.focus-visible.js-focus-visible,
11067
- .js-focus-visible .fv\:d-bgc-success.focus-visible {
11068
- --bgo: 100%;
11069
- background-color: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--bgo)) !important;
11070
- }
11071
- .d-bgc-green-400,
11072
- .h\:d-bgc-green-400:hover,
11073
- .f\:d-bgc-green-400:focus,
11074
- .d-bgc-success,
11075
- .h\:d-bgc-success:hover,
11076
- .f\:d-bgc-success:focus,
11077
- .f\:d-bgc-success:focus-within,
11078
- .fv\:d-bgc-success:focus-visible {
11036
+ .f\:d-bgc-green-400:focus {
11079
11037
  --bgo: 100%;
11080
11038
  background-color: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--bgo)) !important;
11081
11039
  }
@@ -11369,7 +11327,24 @@ body.theme-dark .d\:d-divide-green-100 > * + * {
11369
11327
  }
11370
11328
  .d-bgc-green-100,
11371
11329
  .h\:d-bgc-green-100:hover,
11372
- .f\:d-bgc-green-100:focus {
11330
+ .f\:d-bgc-green-100:focus,
11331
+ .d-bgc-success,
11332
+ .h\:d-bgc-success:hover,
11333
+ .f\:d-bgc-success:focus,
11334
+ .f\:d-bgc-success:focus-within,
11335
+ .fv\:d-bgc-success.focus-visible.js-focus-visible,
11336
+ .js-focus-visible .fv\:d-bgc-success.focus-visible {
11337
+ --bgo: 100%;
11338
+ background-color: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / var(--bgo)) !important;
11339
+ }
11340
+ .d-bgc-green-100,
11341
+ .h\:d-bgc-green-100:hover,
11342
+ .f\:d-bgc-green-100:focus,
11343
+ .d-bgc-success,
11344
+ .h\:d-bgc-success:hover,
11345
+ .f\:d-bgc-success:focus,
11346
+ .f\:d-bgc-success:focus-within,
11347
+ .fv\:d-bgc-success:focus-visible {
11373
11348
  --bgo: 100%;
11374
11349
  background-color: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / var(--bgo)) !important;
11375
11350
  }
@@ -11957,7 +11932,24 @@ body.theme-dark .d\:d-divide-blue-100 > * + * {
11957
11932
  }
11958
11933
  .d-bgc-blue-100,
11959
11934
  .h\:d-bgc-blue-100:hover,
11960
- .f\:d-bgc-blue-100:focus {
11935
+ .f\:d-bgc-blue-100:focus,
11936
+ .d-bgc-info,
11937
+ .h\:d-bgc-info:hover,
11938
+ .f\:d-bgc-info:focus,
11939
+ .f\:d-bgc-info:focus-within,
11940
+ .fv\:d-bgc-info.focus-visible.js-focus-visible,
11941
+ .js-focus-visible .fv\:d-bgc-info.focus-visible {
11942
+ --bgo: 100%;
11943
+ background-color: hsla(var(--blue-100-h) var(--blue-100-s) var(--blue-100-l) / var(--bgo)) !important;
11944
+ }
11945
+ .d-bgc-blue-100,
11946
+ .h\:d-bgc-blue-100:hover,
11947
+ .f\:d-bgc-blue-100:focus,
11948
+ .d-bgc-info,
11949
+ .h\:d-bgc-info:hover,
11950
+ .f\:d-bgc-info:focus,
11951
+ .f\:d-bgc-info:focus-within,
11952
+ .fv\:d-bgc-info:focus-visible {
11961
11953
  --bgo: 100%;
11962
11954
  background-color: hsla(var(--blue-100-h) var(--blue-100-s) var(--blue-100-l) / var(--bgo)) !important;
11963
11955
  }
@@ -12643,7 +12635,24 @@ body.theme-dark .d\:d-divide-white > * + * {
12643
12635
  }
12644
12636
  .d-bgc-white,
12645
12637
  .h\:d-bgc-white:hover,
12646
- .f\:d-bgc-white:focus {
12638
+ .f\:d-bgc-white:focus,
12639
+ .d-bgc-primary,
12640
+ .h\:d-bgc-primary:hover,
12641
+ .f\:d-bgc-primary:focus,
12642
+ .f\:d-bgc-primary:focus-within,
12643
+ .fv\:d-bgc-primary.focus-visible.js-focus-visible,
12644
+ .js-focus-visible .fv\:d-bgc-primary.focus-visible {
12645
+ --bgo: 100%;
12646
+ background-color: hsla(var(--white-h) var(--white-s) var(--white-l) / var(--bgo)) !important;
12647
+ }
12648
+ .d-bgc-white,
12649
+ .h\:d-bgc-white:hover,
12650
+ .f\:d-bgc-white:focus,
12651
+ .d-bgc-primary,
12652
+ .h\:d-bgc-primary:hover,
12653
+ .f\:d-bgc-primary:focus,
12654
+ .f\:d-bgc-primary:focus-within,
12655
+ .fv\:d-bgc-primary:focus-visible {
12647
12656
  --bgo: 100%;
12648
12657
  background-color: hsla(var(--white-h) var(--white-s) var(--white-l) / var(--bgo)) !important;
12649
12658
  }
@@ -12856,7 +12865,24 @@ body.theme-dark .d\:d-divide-black-800 > * + * {
12856
12865
  }
12857
12866
  .d-bgc-black-800,
12858
12867
  .h\:d-bgc-black-800:hover,
12859
- .f\:d-bgc-black-800:focus {
12868
+ .f\:d-bgc-black-800:focus,
12869
+ .d-bgc-contrast,
12870
+ .h\:d-bgc-contrast:hover,
12871
+ .f\:d-bgc-contrast:focus,
12872
+ .f\:d-bgc-contrast:focus-within,
12873
+ .fv\:d-bgc-contrast.focus-visible.js-focus-visible,
12874
+ .js-focus-visible .fv\:d-bgc-contrast.focus-visible {
12875
+ --bgo: 100%;
12876
+ background-color: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--bgo)) !important;
12877
+ }
12878
+ .d-bgc-black-800,
12879
+ .h\:d-bgc-black-800:hover,
12880
+ .f\:d-bgc-black-800:focus,
12881
+ .d-bgc-contrast,
12882
+ .h\:d-bgc-contrast:hover,
12883
+ .f\:d-bgc-contrast:focus,
12884
+ .f\:d-bgc-contrast:focus-within,
12885
+ .fv\:d-bgc-contrast:focus-visible {
12860
12886
  --bgo: 100%;
12861
12887
  background-color: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--bgo)) !important;
12862
12888
  }
@@ -13015,42 +13041,6 @@ body.theme-dark .d\:d-bgc-black-700 {
13015
13041
  .fv\:d-fc-muted:focus-visible {
13016
13042
  --fco: 50%;
13017
13043
  }
13018
- .d-fc-success {
13019
- color: var(--fc-success);
13020
- }
13021
- .h\:d-fc-success:hover {
13022
- color: var(--fc-success);
13023
- }
13024
- .f\:d-fc-success:focus {
13025
- color: var(--fc-success);
13026
- }
13027
- .f\:d-fc-success:focus-within {
13028
- color: var(--fc-success);
13029
- }
13030
- .fv\:d-fc-success.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-fc-success.focus-visible {
13031
- color: var(--fc-success);
13032
- }
13033
- .fv\:d-fc-success:focus-visible {
13034
- color: var(--fc-success);
13035
- }
13036
- .d-fc-warning {
13037
- color: var(--fc-warning);
13038
- }
13039
- .h\:d-fc-warning:hover {
13040
- color: var(--fc-warning);
13041
- }
13042
- .f\:d-fc-warning:focus {
13043
- color: var(--fc-warning);
13044
- }
13045
- .f\:d-fc-warning:focus-within {
13046
- color: var(--fc-warning);
13047
- }
13048
- .fv\:d-fc-warning.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-fc-warning.focus-visible {
13049
- color: var(--fc-warning);
13050
- }
13051
- .fv\:d-fc-warning:focus-visible {
13052
- color: var(--fc-warning);
13053
- }
13054
13044
  .d-fc-current {
13055
13045
  color: currentColor !important;
13056
13046
  }
@@ -16153,10 +16143,13 @@ body.theme-dark .d\:d-bgg-to-0 {
16153
16143
  cursor: none !important;
16154
16144
  }
16155
16145
  .d-ol-focusring {
16156
- outline: solid var(--size-300) var(--focus-ring) !important;
16146
+ box-shadow: var(--bs-focus-ring) !important;
16147
+ }
16148
+ .d-ol-focusring-inset {
16149
+ box-shadow: var(--bs-focus-ring-inset) !important;
16157
16150
  }
16158
16151
  .d-ol-none {
16159
- outline: 0 !important;
16152
+ box-shadow: none !important;
16160
16153
  }
16161
16154
  .d-pe-auto {
16162
16155
  pointer-events: auto !important;
@@ -20142,11 +20135,11 @@ body {
20142
20135
  font-size: 10px;
20143
20136
  }
20144
20137
  body {
20145
- color: var(--base--text-color);
20138
+ color: var(--base-color-text);
20146
20139
  font-size: var(--base--font-size);
20147
20140
  font-family: var(--base--font-family);
20148
20141
  line-height: var(--base--line-height);
20149
- background-color: var(--base--background-color);
20142
+ background-color: var(--base-color-background);
20150
20143
  -webkit-text-size-adjust: 100%;
20151
20144
  }
20152
20145
  .d-svg {
@@ -20466,21 +20459,6 @@ body {
20466
20459
  --tan-500-l: 7.05882353%;
20467
20460
  --tan-500-hsl: var(--tan-500-h) var(--tan-500-s) var(--tan-500-l);
20468
20461
  --tan-500: hsla(var(--tan-500-h) var(--tan-500-s) var(--tan-500-l) / var(--alpha, 100%));
20469
- --error-color: var(--red-300);
20470
- --error-color-hsl: var(--red-300-hsl);
20471
- --error-color-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
20472
- --warning-color: var(--fc-warning);
20473
- --warning-color-hsl: var(--gold-500-hsl);
20474
- --warning-color-hover: var(--fc-warning-hover);
20475
- --success-color: var(--fc-success);
20476
- --success-color-hsl: var(--green-500-hsl);
20477
- --success-color-hover: var(--green-500);
20478
- --muted-color: var(--black-700);
20479
- --muted-color-hsl: var(--black-700-hsl);
20480
- --muted-color-hover: var(--black-700);
20481
- --inverted-color: var(--fc-primary-inverted);
20482
- --inverted-color-hsl: var(--black-100-hsl);
20483
- --inverted-color-hover: var(--black-200);
20484
20462
  --size0: 0;
20485
20463
  --size1: 0.1rem;
20486
20464
  --size2: 0.2rem;
@@ -20520,13 +20498,8 @@ body {
20520
20498
  --bs-lg: 0 var(--size-200) calc(var(--size-300) * 3) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 30%);
20521
20499
  --bs-xl: 0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 30%);
20522
20500
  --bs-card: 0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 8%), 0 var(--size-200) var(--size-300) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 4%), 0 var(--size-100) var(--size-200) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 3%);
20523
- --bs-focus-ring: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring);
20524
- --bs-focus-ring-error: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-error);
20525
- --bs-focus-ring-success: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-success);
20526
- --bs-focus-ring-warning: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-warning);
20527
- --bs-focus-ring-circle: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--black-400);
20528
- --bs-focus-ring-muted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--black-500);
20529
- --bs-focus-ring-inverted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
20501
+ --bs-focus-ring: 0 0 0 var(--size-100) var(--white), 0 0 0 var(--size-300) var(--color-focus-ring);
20502
+ --bs-focus-ring-inset: 0 0 0 calc(var(--size-200) + var(--size-100)) var(--color-focus-ring) inset;
20530
20503
  --ttf-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
20531
20504
  --ttf-out: cubic-bezier(0.23, 1, 0.32, 1);
20532
20505
  --ttf-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
@@ -20631,19 +20604,52 @@ body {
20631
20604
  --ls-content: '\1F44D';
20632
20605
  --fo: 100%;
20633
20606
  --fc-primary: var(--black-900);
20634
- --fc-primary-inverted: var(--black-100);
20607
+ --fc-primary-hsl: var(--black-900-hsl);
20608
+ --fc-primary-inverted: var(--white);
20609
+ --fc-primary-inverted-hsl: var(--white-hsl);
20635
20610
  --fc-secondary: var(--black-700);
20636
- --fc-secondary-inverted: var(--black-300);
20611
+ --fc-secondary-hsl: var(--black-700-hsl);
20612
+ --fc-secondary-inverted: var(--black-200);
20613
+ --fc-secondary-inverted-hsl: var(--black-200-hsl);
20637
20614
  --fc-tertiary: var(--black-600);
20638
- --fc-muted: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--alpha, 50%));
20615
+ --fc-tertiary-hsl: var(--black-600-hsl);
20616
+ --fc-muted: hsla(var(--black-800-hsl) / var(--alpha, 50%));
20639
20617
  --fc-placeholder: var(--black-500);
20618
+ --fc-placeholder-hsl: var(--black-500-hsl);
20640
20619
  --fc-disabled: var(--black-500);
20641
- --fc-error: var(--red-300);
20642
- --fc-success: #00671d;
20620
+ --fc-disabled-hsl: var(--black-500-hsl);
20621
+ --fc-critical: var(--red-300);
20622
+ --fc-critical-hsl: var(--red-300-hsl);
20623
+ --fc-error: var(--fc-critical);
20624
+ --fc-error-hsl: var(--fc-critical-hsl);
20625
+ --fc-success: var(--green-400);
20626
+ --fc-success-hsl: var(--green-400-hsl);
20643
20627
  --fc-warning: var(--gold-500);
20628
+ --fc-warning-hsl: var(--gold-500-hsl);
20644
20629
  --fc-warning-hover: var(--black-900);
20645
- --base--text-color: var(--fc-primary);
20646
- --base--background-color: var(--white);
20630
+ --fc-warning-hover-hsl: var(--black-900-hsl);
20631
+ --base-color-text: var(--fc-primary);
20632
+ --base-color-background: var(--bgc-primary);
20633
+ --bgc-critical: var(--red-100);
20634
+ --bgc-critical-hsl: var(--red-100-hsl);
20635
+ --bgc-info: var(--blue-100);
20636
+ --bgc-info-hsl: var(--blue-100-hsl);
20637
+ --bgc-warning: var(--gold-100);
20638
+ --bgc-warning-hsl: var(--gold-100-hsl);
20639
+ --bgc-success: var(--green-100);
20640
+ --bgc-success-hsl: var(--green-100-hsl);
20641
+ --bgc-primary: var(--white);
20642
+ --bgc-primary-hsl: var(--white-hsl);
20643
+ --bgc-secondary: var(--black-100);
20644
+ --bgc-secondary-hsl: var(--black-100-hsl);
20645
+ --bgc-moderate: var(--black-200);
20646
+ --bgc-moderate-hsl: var(--black-200-hsl);
20647
+ --bgc-bold: var(--black-300);
20648
+ --bgc-bold-hsl: var(--black-300-hsl);
20649
+ --bgc-strong: var(--black-600);
20650
+ --bgc-strong-hsl: var(--black-600-hsl);
20651
+ --bgc-contrast: var(--black-800);
20652
+ --bgc-contrast-hsl: var(--black-800-hsl);
20647
20653
  --zi-hide: -1;
20648
20654
  --zi-base: 0;
20649
20655
  --zi-base1: 1;
@@ -20658,12 +20664,8 @@ body {
20658
20664
  --zi-modal: 600;
20659
20665
  --zi-modal-element: 650;
20660
20666
  --zi-notification: 700;
20661
- --focus-ring: hsla(var(--primary-color-hsl) / 75%);
20662
- --focus-ring-success: hsla(var(--success-color-hsl) / 75%);
20663
- --focus-ring-warning: hsla(var(--warning-color-hsl) / 75%);
20664
- --focus-ring-error: hsla(var(--error-color-hsl) / 75%);
20665
- --focus-ring-muted: var(--focus-ring);
20666
- --focus-ring-inverted: hsla(var(--inverted-color-hsl) / 50%);
20667
+ --color-focus-ring: hsla(var(--blue-300-hsl) / 1);
20668
+ --focus-ring: var(--color-focus-ring);
20667
20669
  --primary-color-h: var(--purple-400-h);
20668
20670
  --primary-color-s: var(--purple-400-s);
20669
20671
  --primary-color-l: var(--purple-400-l);
@@ -20681,14 +20683,14 @@ body {
20681
20683
  --base--corner-radius: 0.25em;
20682
20684
  --theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
20683
20685
  --theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20684
- --theme-topbar-color-background: #f9f9f9;
20686
+ --theme-topbar-color-background: var(--black-100);
20685
20687
  --theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
20686
20688
  --theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20687
- --theme-sidebar-color-background: #f9f9f9;
20689
+ --theme-sidebar-color-background: var(--black-100);
20688
20690
  --theme-sidebar-row-color-background-hover: var(--purple-100);
20689
20691
  --theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
20690
20692
  --theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20691
- --theme-sidebar-active-row-color-background: #e9e9e9;
20693
+ --theme-sidebar-active-row-color-background: var(--black-200);
20692
20694
  --theme-presence-color-background-available: var(--green-400);
20693
20695
  --theme-presence-color-background-busy-unavailable: var(--red-300);
20694
20696
  --theme-presence-color-background-busy: var(--gold-300);
@@ -20905,7 +20907,7 @@ body.theme-dark {
20905
20907
  --red-500-l: 94.90196078%;
20906
20908
  --red-500-hsl: var(--red-500-h) var(--red-500-s) var(--red-500-l);
20907
20909
  --red-500: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--alpha, 100%));
20908
- --base--background-color: var(--black-200);
20910
+ --base-color-background: var(--black-200);
20909
20911
  }
20910
20912
  @media (max-width: 480px) {
20911
20913
  .sm\:d-description {
@@ -21267,13 +21269,13 @@ body.theme-dark {
21267
21269
  display: unset !important;
21268
21270
  }
21269
21271
  .sm\:d-modal {
21270
- --modal-color-background: hsla(var(--black-900-hsl) / 60%);
21272
+ --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
21271
21273
  --modal-dialog-padding: var(--space-600);
21272
- --modal-dialog-color-background: var(--white);
21274
+ --modal-dialog-color-background: var(--bgc-primary);
21273
21275
  --modal-dialog-color-text: var(--fc-tertiary);
21274
21276
  --modal-header-color-text: var(--fc-secondary);
21275
- --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
21276
- --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
21277
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
21278
+ --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
21277
21279
  position: fixed;
21278
21280
  top: 0;
21279
21281
  right: 0;
@@ -21285,30 +21287,14 @@ body.theme-dark {
21285
21287
  align-items: center;
21286
21288
  justify-content: center;
21287
21289
  padding: var(--space-600);
21288
- background-color: var(--modal-color-background);
21290
+ background-color: var(--modal-backdrop-color-background);
21289
21291
  backface-visibility: hidden;
21290
21292
  visibility: hidden;
21291
21293
  opacity: 0;
21292
21294
  will-change: visibility, z-index, opacity;
21293
21295
  }
21294
21296
  .sm\:d-modal--transparent {
21295
- --modal-color-background: hsla(var(--black-900-hsl) / 85%);
21296
- position: fixed;
21297
- top: 0;
21298
- right: 0;
21299
- bottom: 0;
21300
- left: 0;
21301
- z-index: var(--zi-hide);
21302
- display: flex;
21303
- flex-direction: column;
21304
- align-items: center;
21305
- justify-content: center;
21306
- padding: var(--space-600);
21307
- background-color: var(--d-bgc-transparent);
21308
- backface-visibility: hidden;
21309
- visibility: hidden;
21310
- opacity: 0;
21311
- will-change: visibility, z-index, opacity;
21297
+ --modal-backdrop-color-background: var(--d-bgc-transparent);
21312
21298
  }
21313
21299
  .sm\:d-modal__dialog {
21314
21300
  position: relative;
@@ -21369,7 +21355,7 @@ body.theme-dark {
21369
21355
  .sm\:d-modal__banner {
21370
21356
  --modal-banner-padding-y: var(--space-500);
21371
21357
  --modal-banner-padding-x: var(--space-600);
21372
- --modal-banner-color-background: var(--gold-100);
21358
+ --modal-banner-color-background: var(--bgc-warning);
21373
21359
  position: relative;
21374
21360
  box-sizing: border-box;
21375
21361
  width: 100%;
@@ -23572,13 +23558,13 @@ body.theme-dark {
23572
23558
  display: unset !important;
23573
23559
  }
23574
23560
  .md\:d-modal {
23575
- --modal-color-background: hsla(var(--black-900-hsl) / 60%);
23561
+ --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
23576
23562
  --modal-dialog-padding: var(--space-600);
23577
- --modal-dialog-color-background: var(--white);
23563
+ --modal-dialog-color-background: var(--bgc-primary);
23578
23564
  --modal-dialog-color-text: var(--fc-tertiary);
23579
23565
  --modal-header-color-text: var(--fc-secondary);
23580
- --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
23581
- --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
23566
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
23567
+ --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
23582
23568
  position: fixed;
23583
23569
  top: 0;
23584
23570
  right: 0;
@@ -23590,30 +23576,14 @@ body.theme-dark {
23590
23576
  align-items: center;
23591
23577
  justify-content: center;
23592
23578
  padding: var(--space-600);
23593
- background-color: var(--modal-color-background);
23579
+ background-color: var(--modal-backdrop-color-background);
23594
23580
  backface-visibility: hidden;
23595
23581
  visibility: hidden;
23596
23582
  opacity: 0;
23597
23583
  will-change: visibility, z-index, opacity;
23598
23584
  }
23599
23585
  .md\:d-modal--transparent {
23600
- --modal-color-background: hsla(var(--black-900-hsl) / 85%);
23601
- position: fixed;
23602
- top: 0;
23603
- right: 0;
23604
- bottom: 0;
23605
- left: 0;
23606
- z-index: var(--zi-hide);
23607
- display: flex;
23608
- flex-direction: column;
23609
- align-items: center;
23610
- justify-content: center;
23611
- padding: var(--space-600);
23612
- background-color: var(--d-bgc-transparent);
23613
- backface-visibility: hidden;
23614
- visibility: hidden;
23615
- opacity: 0;
23616
- will-change: visibility, z-index, opacity;
23586
+ --modal-backdrop-color-background: var(--d-bgc-transparent);
23617
23587
  }
23618
23588
  .md\:d-modal__dialog {
23619
23589
  position: relative;
@@ -23674,7 +23644,7 @@ body.theme-dark {
23674
23644
  .md\:d-modal__banner {
23675
23645
  --modal-banner-padding-y: var(--space-500);
23676
23646
  --modal-banner-padding-x: var(--space-600);
23677
- --modal-banner-color-background: var(--gold-100);
23647
+ --modal-banner-color-background: var(--bgc-warning);
23678
23648
  position: relative;
23679
23649
  box-sizing: border-box;
23680
23650
  width: 100%;
@@ -25877,13 +25847,13 @@ body.theme-dark {
25877
25847
  display: unset !important;
25878
25848
  }
25879
25849
  .lg\:d-modal {
25880
- --modal-color-background: hsla(var(--black-900-hsl) / 60%);
25850
+ --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
25881
25851
  --modal-dialog-padding: var(--space-600);
25882
- --modal-dialog-color-background: var(--white);
25852
+ --modal-dialog-color-background: var(--bgc-primary);
25883
25853
  --modal-dialog-color-text: var(--fc-tertiary);
25884
25854
  --modal-header-color-text: var(--fc-secondary);
25885
- --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
25886
- --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
25855
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
25856
+ --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
25887
25857
  position: fixed;
25888
25858
  top: 0;
25889
25859
  right: 0;
@@ -25895,30 +25865,14 @@ body.theme-dark {
25895
25865
  align-items: center;
25896
25866
  justify-content: center;
25897
25867
  padding: var(--space-600);
25898
- background-color: var(--modal-color-background);
25868
+ background-color: var(--modal-backdrop-color-background);
25899
25869
  backface-visibility: hidden;
25900
25870
  visibility: hidden;
25901
25871
  opacity: 0;
25902
25872
  will-change: visibility, z-index, opacity;
25903
25873
  }
25904
25874
  .lg\:d-modal--transparent {
25905
- --modal-color-background: hsla(var(--black-900-hsl) / 85%);
25906
- position: fixed;
25907
- top: 0;
25908
- right: 0;
25909
- bottom: 0;
25910
- left: 0;
25911
- z-index: var(--zi-hide);
25912
- display: flex;
25913
- flex-direction: column;
25914
- align-items: center;
25915
- justify-content: center;
25916
- padding: var(--space-600);
25917
- background-color: var(--d-bgc-transparent);
25918
- backface-visibility: hidden;
25919
- visibility: hidden;
25920
- opacity: 0;
25921
- will-change: visibility, z-index, opacity;
25875
+ --modal-backdrop-color-background: var(--d-bgc-transparent);
25922
25876
  }
25923
25877
  .lg\:d-modal__dialog {
25924
25878
  position: relative;
@@ -25979,7 +25933,7 @@ body.theme-dark {
25979
25933
  .lg\:d-modal__banner {
25980
25934
  --modal-banner-padding-y: var(--space-500);
25981
25935
  --modal-banner-padding-x: var(--space-600);
25982
- --modal-banner-color-background: var(--gold-100);
25936
+ --modal-banner-color-background: var(--bgc-warning);
25983
25937
  position: relative;
25984
25938
  box-sizing: border-box;
25985
25939
  width: 100%;
@@ -28182,13 +28136,13 @@ body.theme-dark {
28182
28136
  display: unset !important;
28183
28137
  }
28184
28138
  .xl\:d-modal {
28185
- --modal-color-background: hsla(var(--black-900-hsl) / 60%);
28139
+ --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
28186
28140
  --modal-dialog-padding: var(--space-600);
28187
- --modal-dialog-color-background: var(--white);
28141
+ --modal-dialog-color-background: var(--bgc-primary);
28188
28142
  --modal-dialog-color-text: var(--fc-tertiary);
28189
28143
  --modal-header-color-text: var(--fc-secondary);
28190
- --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
28191
- --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
28144
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
28145
+ --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
28192
28146
  position: fixed;
28193
28147
  top: 0;
28194
28148
  right: 0;
@@ -28200,30 +28154,14 @@ body.theme-dark {
28200
28154
  align-items: center;
28201
28155
  justify-content: center;
28202
28156
  padding: var(--space-600);
28203
- background-color: var(--modal-color-background);
28157
+ background-color: var(--modal-backdrop-color-background);
28204
28158
  backface-visibility: hidden;
28205
28159
  visibility: hidden;
28206
28160
  opacity: 0;
28207
28161
  will-change: visibility, z-index, opacity;
28208
28162
  }
28209
28163
  .xl\:d-modal--transparent {
28210
- --modal-color-background: hsla(var(--black-900-hsl) / 85%);
28211
- position: fixed;
28212
- top: 0;
28213
- right: 0;
28214
- bottom: 0;
28215
- left: 0;
28216
- z-index: var(--zi-hide);
28217
- display: flex;
28218
- flex-direction: column;
28219
- align-items: center;
28220
- justify-content: center;
28221
- padding: var(--space-600);
28222
- background-color: var(--d-bgc-transparent);
28223
- backface-visibility: hidden;
28224
- visibility: hidden;
28225
- opacity: 0;
28226
- will-change: visibility, z-index, opacity;
28164
+ --modal-backdrop-color-background: var(--d-bgc-transparent);
28227
28165
  }
28228
28166
  .xl\:d-modal__dialog {
28229
28167
  position: relative;
@@ -28284,7 +28222,7 @@ body.theme-dark {
28284
28222
  .xl\:d-modal__banner {
28285
28223
  --modal-banner-padding-y: var(--space-500);
28286
28224
  --modal-banner-padding-x: var(--space-600);
28287
- --modal-banner-color-background: var(--gold-100);
28225
+ --modal-banner-color-background: var(--bgc-warning);
28288
28226
  position: relative;
28289
28227
  box-sizing: border-box;
28290
28228
  width: 100%;