@dialpad/dialtone 7.10.4 → 7.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/lib/build/less/components/button.less +113 -89
  2. package/lib/build/less/components/forms.less +24 -31
  3. package/lib/build/less/components/input.less +68 -30
  4. package/lib/build/less/components/modal.less +40 -24
  5. package/lib/build/less/components/popover.less +55 -47
  6. package/lib/build/less/components/selects.less +71 -83
  7. package/lib/build/less/components/tooltip.less +10 -3
  8. package/lib/build/less/dialtone-reset.less +1 -1
  9. package/lib/build/less/themes/default.less +0 -3
  10. package/lib/build/less/utilities/colors.less +1 -1
  11. package/lib/build/less/utilities/effects.less +3 -0
  12. package/lib/build/less/variables/colors.less +12 -12
  13. package/lib/build/less/variables/sizes.less +21 -38
  14. package/lib/build/less/variables/visual-styles.less +2 -0
  15. package/lib/dist/css/dialtone.css +776 -620
  16. package/lib/dist/css/dialtone.min.css +1 -1
  17. package/package.json +27 -27
package/lib/dist/css/dialtone.css CHANGED
@@ -306,7 +306,7 @@ template {
306
306
  * Add the correct display in IE 10.
307
307
  */
308
308
  [hidden] {
309
- display: none;
309
+ display: none !important;
310
310
  }
311
311
  body {
312
312
  --su0: 0;
@@ -406,6 +406,16 @@ body {
406
406
  --size-700: calc(0.8rem * 8);
407
407
  --size-800: calc(0.8rem * 16);
408
408
  }
409
+ body {
410
+ --size-100: calc(0.8rem / 8);
411
+ --size-200: calc(0.8rem / 4);
412
+ --size-300: calc(0.8rem / 2);
413
+ --size-400: 0.8rem;
414
+ --size-500: calc(0.8rem * 2);
415
+ --size-600: calc(0.8rem * 4);
416
+ --size-700: calc(0.8rem * 8);
417
+ --size-800: calc(0.8rem * 16);
418
+ }
409
419
  body {
410
420
  --size-100-16: calc(1.6rem / 8);
411
421
  --size-200-16: calc(1.6rem / 4);
@@ -701,93 +711,140 @@ body {
701
711
  .d-breadcrumbs.d-breadcrumbs--inverted .d-breadcrumbs__item--selected .d-link:hover {
702
712
  color: var(--inverted-color);
703
713
  }
704
- .d-btn {
714
+ .d-btn,
715
+ .d-btn--md {
705
716
  --button-color-text: var(--purple-400);
706
717
  --button-color-background: transparent;
707
718
  --button-color-border: transparent;
708
- --button-radius: var(--size-300);
719
+ --button-gap: calc(var(--button-padding-x) / 2);
720
+ --button-border-radius: var(--size-400);
721
+ --button-border-width: var(--size-100);
722
+ --button-font-size: var(--fs-200);
723
+ --button-font-weight: var(--fw-medium);
724
+ --button-line-height-xs: var(--lh-200);
725
+ --button-line-height-sm: var(--lh-200);
726
+ --button-line-height-md: var(--lh-200);
727
+ --button-line-height-lg: var(--lh-200);
728
+ --button-line-height-xl: var(--lh-200);
729
+ --button-line-height: var(--button-line-height-md);
730
+ --button-padding-y-xs: calc(calc(var(--space-400) - var(--space-100)) - var(--button-border-width));
731
+ --button-padding-x-xs: calc(var(--space-400) - var(--button-border-width));
732
+ --button-padding-y-sm: calc(var(--space-400) - var(--button-border-width));
733
+ --button-padding-x-sm: calc((var(--space-500) - var(--space-300)) - var(--button-border-width));
734
+ --button-padding-y-md: calc(var(--space-400) - var(--button-border-width));
735
+ --button-padding-x-md: calc((var(--space-500) - var(--space-300)) - var(--button-border-width));
736
+ --button-padding-y-lg: calc((var(--space-400) + var(--space-200)) - var(--button-border-width));
737
+ --button-padding-x-lg: calc(var(--space-500) - var(--button-border-width));
738
+ --button-padding-y-xl: calc((var(--space-500) - var(--space-300)) - var(--button-border-width));
739
+ --button-padding-x-xl: calc(var(--space-500) - var(--button-border-width));
740
+ --button-padding-y: var(--button-padding-y-md);
741
+ --button-padding-x: var(--button-padding-x-md);
709
742
  position: relative;
710
743
  display: inline-flex;
744
+ gap: var(--button-gap);
711
745
  align-items: center;
712
746
  justify-content: center;
713
747
  box-sizing: border-box;
714
- padding: calc(var(--space-400) - var(--space-100));
748
+ padding: var(--button-padding-y) var(--button-padding-x);
715
749
  color: var(--button-color-text);
716
- font-size: var(--fs-200);
750
+ font-weight: var(--button-font-weight);
751
+ font-size: var(--button-font-size);
717
752
  font-family: inherit;
718
- line-height: var(--lh4);
753
+ line-height: var(--button-line-height);
719
754
  text-transform: inherit;
720
755
  text-decoration: none;
721
756
  vertical-align: middle;
722
757
  background-color: var(--button-color-background);
723
- border: var(--size-100) solid var(--button-color-border);
724
- border-radius: var(--button-radius);
758
+ border-color: var(--button-color-border);
759
+ border-style: solid;
760
+ border-width: var(--button-border-width);
761
+ border-radius: var(--button-border-radius);
725
762
  box-shadow: var(--button--bs);
726
763
  cursor: pointer;
727
- transition-timing-function: var(--ttf-in-out);
728
- transition-duration: 75ms;
764
+ transition-timing-function: var(--ttf-out-quint);
765
+ transition-duration: var(--td300);
729
766
  transition-property: background-color, border, box-shadow;
730
767
  user-select: none;
731
768
  fill: currentColor;
732
769
  }
733
- .d-btn:hover {
770
+ .d-btn:hover,
771
+ .d-btn--md:hover {
734
772
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
735
- --button-color-background: hsla(var(--purple-400-hsl) / 3%);
773
+ --button-color-background: hsla(var(--purple-400-hsl) / 4%);
736
774
  }
737
775
  .d-btn:active,
776
+ .d-btn--md:active,
738
777
  .d-btn.d-btn--active,
739
- .d-btn.d-btn--active:active {
778
+ .d-btn--md.d-btn--active,
779
+ .d-btn.d-btn--active:active,
780
+ .d-btn--md.d-btn--active:active {
740
781
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
741
- --button-color-background: hsla(var(--purple-400-hsl) / 9%);
782
+ --button-color-background: hsla(var(--purple-400-hsl) / 14%);
742
783
  }
743
- .d-btn.focus-visible.js-focus-visible, .js-focus-visible .d-btn.focus-visible {
784
+ .d-btn.focus-visible.js-focus-visible,
785
+ .js-focus-visible .d-btn.focus-visible,
786
+ .d-btn--md.focus-visible.js-focus-visible,
787
+ .js-focus-visible .d-btn--md.focus-visible {
744
788
  outline: none;
745
789
  box-shadow: var(--bs-focus-ring);
746
790
  }
747
- .d-btn:focus-visible {
791
+ .d-btn:focus-visible,
792
+ .d-btn--md:focus-visible {
748
793
  outline: none;
749
794
  box-shadow: var(--bs-focus-ring);
750
795
  }
751
- .d-btn[disabled] {
752
- color: var(--fc-disabled);
753
- background-color: var(--black-300);
754
- border-color: transparent;
796
+ .d-btn[disabled],
797
+ .d-btn--md[disabled] {
798
+ --button-color-border: transparent;
799
+ --button-color-text: var(--fc-disabled);
800
+ --button-color-background: var(--black-300);
755
801
  cursor: not-allowed;
756
802
  transition: none;
757
803
  }
758
- .d-btn .d-btn__icon .d-svg {
804
+ .d-btn .d-btn__icon .d-svg,
805
+ .d-btn--md .d-btn__icon .d-svg {
759
806
  width: 1.6rem;
760
807
  height: 1.6rem;
761
808
  }
762
809
  .d-btn--xs {
763
- padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100));
764
- font-size: var(--fs-100);
810
+ --button-padding-y: var(--button-padding-y-xs);
811
+ --button-padding-x: var(--button-padding-x-xs);
812
+ --button-font-size: var(--fs-100);
813
+ --button-line-height: var(--button-line-height-xs);
814
+ --button-border-radius: var(--size-300);
765
815
  }
766
816
  .d-btn--xs .d-btn__icon .d-svg {
767
817
  width: 1.2rem;
768
818
  height: 1.2rem;
769
819
  }
770
820
  .d-btn--sm {
771
- padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100));
772
- font-size: var(--fs-200);
773
- line-height: var(--lh6);
821
+ --button-padding-y: var(--button-padding-y-sm);
822
+ --button-padding-x: var(--button-padding-x-sm);
823
+ --button-font-size: var(--fs-100);
824
+ --button-line-height: var(--button-line-height-sm);
774
825
  }
775
826
  .d-btn--sm .d-btn__icon .d-svg {
776
827
  width: 1.4rem;
777
828
  height: 1.4rem;
778
829
  }
779
830
  .d-btn--lg {
780
- padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100));
781
- font-size: var(--fs-300);
831
+ --button-padding-y: var(--button-padding-y-lg);
832
+ --button-padding-x: var(--button-padding-x-lg);
833
+ --button-font-size: var(--fs-300);
834
+ --button-line-height: var(--button-line-height-lg);
835
+ --button-border-radius: calc(var(--size-300) * 3);
782
836
  }
783
837
  .d-btn--lg .d-btn__icon .d-svg {
784
838
  width: 2rem;
785
839
  height: 2rem;
786
840
  }
787
841
  .d-btn--xl {
788
- padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100));
789
- font-size: var(--fs-300);
790
- line-height: var(--lh8);
842
+ --button-padding-y: var(--button-padding-y-xl);
843
+ --button-padding-x: var(--button-padding-x-xl);
844
+ --button-font-size: var(--fs-400);
845
+ --button-font-weight: var(--fw-normal);
846
+ --button-line-height: var(--button-line-height-xl);
847
+ --button-border-radius: var(--size-500);
791
848
  }
792
849
  .d-btn--xl .d-btn__icon .d-svg {
793
850
  width: 2.4rem;
@@ -803,17 +860,6 @@ body {
803
860
  }
804
861
  .d-btn__icon {
805
862
  display: flex;
806
- line-height: 0;
807
- }
808
- .d-btn__icon--left,
809
- .d-btn__icon--right {
810
- margin-top: calc(var(--space-300) * -1);
811
- margin-bottom: calc(var(--space-300) * -1);
812
- }
813
- .d-btn__icon--top,
814
- .d-btn__icon--bottom {
815
- margin-right: calc(var(--space-300) * -1);
816
- margin-left: calc(var(--space-300) * -1);
817
863
  }
818
864
  .d-btn__icon--left,
819
865
  .d-btn__icon--top {
@@ -829,26 +875,11 @@ body {
829
875
  .d-btn__icon--right:not(:only-child) {
830
876
  margin-right: calc(var(--space-200) * -1);
831
877
  }
832
- .d-btn__icon--left ~ .d-btn__label,
833
- .d-btn__label ~ .d-btn__icon--right {
834
- margin-left: var(--space-300);
835
- }
836
- .d-btn__icon--right ~ .d-btn__label,
837
- .d-btn__label ~ .d-btn__icon--left {
838
- margin-right: var(--space-300);
839
- }
840
- .d-btn__icon--top ~ .d-btn__label,
841
- .d-btn__label ~ .d-btn__icon--bottom {
842
- margin-top: var(--space-300);
843
- }
844
- .d-btn__icon--bottom ~ .d-btn__label,
845
- .d-btn__label ~ .d-btn__icon--top {
846
- margin-bottom: var(--space-300);
847
- }
848
878
  .d-btn--circle {
879
+ --button-padding-x: var(--button-padding-y-md);
880
+ --button-padding-y: var(--button-padding-y-md);
849
881
  --button-color-text: var(--black-800);
850
- --button-radius: var(--br-circle);
851
- padding: calc(var(--space-400) + var(--space-100));
882
+ --button-border-radius: var(--br-circle);
852
883
  transition-duration: 150ms;
853
884
  }
854
885
  .d-btn--circle:hover {
@@ -874,23 +905,27 @@ body {
874
905
  display: none;
875
906
  }
876
907
  .d-btn--circle.d-btn--outlined {
877
- --button-color-border: var(--black-700);
908
+ --button-color-border: var(--black-600);
878
909
  }
879
910
  .d-btn--circle.d-btn--xs {
880
- padding: calc(var(--space-400) - var(--space-100));
881
- --button-radius: var(--br-circle);
911
+ --button-padding-y: var(--button-padding-y-xs);
912
+ --button-padding-x: var(--button-padding-y-xs);
882
913
  }
883
914
  .d-btn--circle.d-btn--sm {
884
- padding: var(--space-400);
885
- --button-radius: var(--br-circle);
915
+ --button-padding-y: var(--button-padding-y-sm);
916
+ --button-padding-x: var(--button-padding-y-sm);
917
+ }
918
+ .d-btn--circle.d-btn--md {
919
+ --button-padding-x: var(--button-padding-y-md);
920
+ --button-padding-y: var(--button-padding-y-md);
886
921
  }
887
922
  .d-btn--circle.d-btn--lg {
888
- padding: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
889
- --button-radius: var(--br-circle);
923
+ --button-padding-x: calc(var(--button-padding-y-lg) + var(--space-100));
924
+ --button-padding-y: calc(var(--button-padding-y-lg) + var(--space-100));
890
925
  }
891
926
  .d-btn--circle.d-btn--xl {
892
- padding: calc(var(--space-500) - var(--space-100));
893
- --button-radius: var(--br-circle);
927
+ --button-padding-x: calc(var(--button-padding-y-xl) + var(--space-300));
928
+ --button-padding-y: calc(var(--button-padding-y-xl) + var(--space-300));
894
929
  }
895
930
  .d-btn--outlined {
896
931
  --button-color-border: var(--purple-400);
@@ -901,26 +936,26 @@ body {
901
936
  }
902
937
  .d-btn--primary:hover {
903
938
  --button-color-text: var(--white);
904
- --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 5%));
939
+ --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 6%));
905
940
  }
906
941
  .d-btn--primary:active,
907
942
  .d-btn--primary.d-btn--active,
908
943
  .d-btn--primary.d-btn--active:active {
909
944
  --button-color-text: var(--white);
910
- --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 10%));
945
+ --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 12%));
911
946
  }
912
947
  .d-btn--muted {
913
948
  --button-color-text: var(--muted-color);
914
949
  }
915
950
  .d-btn--muted:hover {
916
951
  --button-color-text: var(--muted-color-hover);
917
- --button-color-background: hsla(var(--black-800-hsl) / 3%);
952
+ --button-color-background: hsla(var(--black-800-hsl) / 5%);
918
953
  }
919
954
  .d-btn--muted:active,
920
955
  .d-btn--muted.d-btn--active,
921
956
  .d-btn--muted.d-btn--active:active {
922
957
  --button-color-text: var(--muted-color-hover);
923
- --button-color-background: hsla(var(--black-800-hsl) / 9%);
958
+ --button-color-background: hsla(var(--black-800-hsl) / 10%);
924
959
  }
925
960
  .d-btn--muted.focus-visible.js-focus-visible, .js-focus-visible .d-btn--muted.focus-visible {
926
961
  box-shadow: var(--bs-focus-ring-muted);
@@ -936,13 +971,13 @@ body {
936
971
  }
937
972
  .d-btn--danger:hover {
938
973
  --button-color-text: var(--error-color-hover);
939
- --button-color-background: hsla(var(--error-color-hsl) / 6%);
974
+ --button-color-background: hsla(var(--error-color-hsl) / 3%);
940
975
  }
941
976
  .d-btn--danger:active,
942
977
  .d-btn--danger.d-btn--active,
943
978
  .d-btn--danger.d-btn--active:active {
944
979
  --button-color-text: var(--error-color-hover);
945
- --button-color-background: hsla(var(--error-color-hsl) / 20%);
980
+ --button-color-background: hsla(var(--error-color-hsl) / 9%);
946
981
  }
947
982
  .d-btn--danger.focus-visible.js-focus-visible, .js-focus-visible .d-btn--danger.focus-visible {
948
983
  box-shadow: var(--bs-focus-ring-error);
@@ -959,13 +994,13 @@ body {
959
994
  }
960
995
  .d-btn--danger.d-btn--primary:hover {
961
996
  --button-color-text: var(--white);
962
- --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 40%);
997
+ --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 4%));
963
998
  }
964
999
  .d-btn--danger.d-btn--primary:active,
965
1000
  .d-btn--danger.d-btn--primary.d-btn--active,
966
1001
  .d-btn--danger.d-btn--primary.d-btn--active:active {
967
1002
  --button-color-text: var(--white);
968
- --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 27%);
1003
+ --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
969
1004
  }
970
1005
  .d-btn--inverted {
971
1006
  --button-color-text: var(--white);
@@ -1004,9 +1039,6 @@ body {
1004
1039
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1005
1040
  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
1006
1041
  }
1007
- .d-btn--icon-only {
1008
- padding: calc(var(--space-400) + var(--space-100));
1009
- }
1010
1042
  .d-btn--icon-only .d-btn__icon {
1011
1043
  margin: unset;
1012
1044
  }
@@ -1029,22 +1061,22 @@ body {
1029
1061
  content: '';
1030
1062
  }
1031
1063
  .d-btn--disabled {
1032
- color: var(--fc-disabled);
1033
- background-color: var(--black-300);
1034
- border-color: transparent;
1064
+ --button-color-text: var(--fc-disabled);
1065
+ --button-color-background: var(--black-300);
1066
+ --button-color-border: transparent;
1035
1067
  cursor: not-allowed;
1036
1068
  transition: none;
1037
1069
  pointer-events: none;
1038
1070
  }
1039
1071
  .d-btn--brand {
1072
+ --button-color-text: var(--white);
1073
+ --button-color-background: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
1040
1074
  display: flex;
1041
- color: var(--white);
1042
- background-color: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
1043
1075
  }
1044
1076
  .d-btn--brand:hover,
1045
1077
  .d-btn--brand:active {
1046
- color: hsla(var(--white-hsl) / 90%);
1047
- background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
1078
+ --button-color-text: hsla(var(--white-hsl) / 90%);
1079
+ --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
1048
1080
  }
1049
1081
  .d-btn--brand.focus-visible.js-focus-visible, .js-focus-visible .d-btn--brand.focus-visible {
1050
1082
  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%);
@@ -1053,7 +1085,7 @@ body {
1053
1085
  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%);
1054
1086
  }
1055
1087
  .d-btn--brand:active {
1056
- background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
1088
+ --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
1057
1089
  }
1058
1090
  .d-btn--brand .d-btn__icon {
1059
1091
  align-items: center;
@@ -1086,13 +1118,13 @@ body {
1086
1118
  .d-btn-group {
1087
1119
  display: flex;
1088
1120
  }
1089
- .d-btn-group.d-btn-group--start {
1121
+ .d-btn-group--start {
1090
1122
  justify-content: start;
1091
1123
  }
1092
- .d-btn-group.d-btn-group--end {
1124
+ .d-btn-group--end {
1093
1125
  justify-content: end;
1094
1126
  }
1095
- .d-btn-group.d-btn-group--space-between {
1127
+ .d-btn-group--space-between {
1096
1128
  justify-content: space-between;
1097
1129
  }
1098
1130
  .d-card {
@@ -1200,33 +1232,59 @@ body {
1200
1232
  --button-color-text: var(--purple-400);
1201
1233
  --button-color-background: transparent;
1202
1234
  --button-color-border: transparent;
1203
- --button-radius: var(--size-300);
1235
+ --button-gap: calc(var(--button-padding-x) / 2);
1236
+ --button-border-radius: var(--size-400);
1237
+ --button-border-width: var(--size-100);
1238
+ --button-font-size: var(--fs-200);
1239
+ --button-font-weight: var(--fw-medium);
1240
+ --button-line-height-xs: var(--lh-200);
1241
+ --button-line-height-sm: var(--lh-200);
1242
+ --button-line-height-md: var(--lh-200);
1243
+ --button-line-height-lg: var(--lh-200);
1244
+ --button-line-height-xl: var(--lh-200);
1245
+ --button-line-height: var(--button-line-height-md);
1246
+ --button-padding-y-xs: calc(calc(var(--space-400) - var(--space-100)) - var(--button-border-width));
1247
+ --button-padding-x-xs: calc(var(--space-400) - var(--button-border-width));
1248
+ --button-padding-y-sm: calc(var(--space-400) - var(--button-border-width));
1249
+ --button-padding-x-sm: calc((var(--space-500) - var(--space-300)) - var(--button-border-width));
1250
+ --button-padding-y-md: calc(var(--space-400) - var(--button-border-width));
1251
+ --button-padding-x-md: calc((var(--space-500) - var(--space-300)) - var(--button-border-width));
1252
+ --button-padding-y-lg: calc((var(--space-400) + var(--space-200)) - var(--button-border-width));
1253
+ --button-padding-x-lg: calc(var(--space-500) - var(--button-border-width));
1254
+ --button-padding-y-xl: calc((var(--space-500) - var(--space-300)) - var(--button-border-width));
1255
+ --button-padding-x-xl: calc(var(--space-500) - var(--button-border-width));
1256
+ --button-padding-x: var(--button-padding-x-md);
1204
1257
  position: relative;
1205
1258
  display: inline-flex;
1259
+ gap: var(--button-gap);
1206
1260
  align-items: center;
1207
1261
  justify-content: center;
1208
1262
  box-sizing: border-box;
1209
- padding: calc(var(--space-400) - var(--space-100));
1263
+ padding: var(--button-padding-y) var(--button-padding-x);
1210
1264
  color: var(--button-color-text);
1211
- font-size: var(--fs-200);
1265
+ font-weight: var(--button-font-weight);
1266
+ font-size: var(--button-font-size);
1212
1267
  font-family: inherit;
1213
- line-height: var(--lh4);
1268
+ line-height: var(--button-line-height);
1214
1269
  text-transform: inherit;
1215
1270
  text-decoration: none;
1216
1271
  vertical-align: middle;
1217
1272
  background-color: var(--button-color-background);
1218
- border: var(--size-100) solid var(--button-color-border);
1219
- border-radius: var(--button-radius);
1273
+ border-color: var(--button-color-border);
1274
+ border-style: solid;
1275
+ border-width: var(--button-border-width);
1276
+ border-radius: var(--button-border-radius);
1220
1277
  box-shadow: var(--button--bs);
1221
1278
  cursor: pointer;
1222
- transition-timing-function: var(--ttf-in-out);
1223
- transition-duration: 75ms;
1279
+ transition-timing-function: var(--ttf-out-quint);
1280
+ transition-duration: var(--td300);
1224
1281
  transition-property: background-color, border, box-shadow;
1225
1282
  user-select: none;
1226
1283
  fill: currentColor;
1284
+ --button-padding-x: var(--button-padding-y-md);
1285
+ --button-padding-y: var(--button-padding-y-md);
1227
1286
  --button-color-text: var(--black-800);
1228
- --button-radius: var(--br-circle);
1229
- padding: calc(var(--space-400) + var(--space-100));
1287
+ --button-border-radius: var(--br-circle);
1230
1288
  transition-duration: 150ms;
1231
1289
  position: absolute;
1232
1290
  right: var(--space-200);
@@ -1235,13 +1293,13 @@ body {
1235
1293
  }
1236
1294
  .d-chip__close:hover {
1237
1295
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1238
- --button-color-background: hsla(var(--purple-400-hsl) / 3%);
1296
+ --button-color-background: hsla(var(--purple-400-hsl) / 4%);
1239
1297
  }
1240
1298
  .d-chip__close:active,
1241
1299
  .d-chip__close.d-btn--active,
1242
1300
  .d-chip__close.d-btn--active:active {
1243
1301
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1244
- --button-color-background: hsla(var(--purple-400-hsl) / 9%);
1302
+ --button-color-background: hsla(var(--purple-400-hsl) / 14%);
1245
1303
  }
1246
1304
  .d-chip__close.focus-visible.js-focus-visible, .js-focus-visible .d-chip__close.focus-visible {
1247
1305
  outline: none;
@@ -1252,9 +1310,9 @@ body {
1252
1310
  box-shadow: var(--bs-focus-ring);
1253
1311
  }
1254
1312
  .d-chip__close[disabled] {
1255
- color: var(--fc-disabled);
1256
- background-color: var(--black-300);
1257
- border-color: transparent;
1313
+ --button-color-border: transparent;
1314
+ --button-color-text: var(--fc-disabled);
1315
+ --button-color-background: var(--black-300);
1258
1316
  cursor: not-allowed;
1259
1317
  transition: none;
1260
1318
  }
@@ -1285,23 +1343,27 @@ body {
1285
1343
  display: none;
1286
1344
  }
1287
1345
  .d-chip__close.d-btn--outlined {
1288
- --button-color-border: var(--black-700);
1346
+ --button-color-border: var(--black-600);
1289
1347
  }
1290
1348
  .d-chip__close.d-btn--xs {
1291
- padding: calc(var(--space-400) - var(--space-100));
1292
- --button-radius: var(--br-circle);
1349
+ --button-padding-y: var(--button-padding-y-xs);
1350
+ --button-padding-x: var(--button-padding-y-xs);
1293
1351
  }
1294
1352
  .d-chip__close.d-btn--sm {
1295
- padding: var(--space-400);
1296
- --button-radius: var(--br-circle);
1353
+ --button-padding-y: var(--button-padding-y-sm);
1354
+ --button-padding-x: var(--button-padding-y-sm);
1355
+ }
1356
+ .d-chip__close.d-btn--md {
1357
+ --button-padding-x: var(--button-padding-y-md);
1358
+ --button-padding-y: var(--button-padding-y-md);
1297
1359
  }
1298
1360
  .d-chip__close.d-btn--lg {
1299
- padding: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
1300
- --button-radius: var(--br-circle);
1361
+ --button-padding-x: calc(var(--button-padding-y-lg) + var(--space-100));
1362
+ --button-padding-y: calc(var(--button-padding-y-lg) + var(--space-100));
1301
1363
  }
1302
1364
  .d-chip__close.d-btn--xl {
1303
- padding: calc(var(--space-500) - var(--space-100));
1304
- --button-radius: var(--br-circle);
1365
+ --button-padding-x: calc(var(--button-padding-y-xl) + var(--space-300));
1366
+ --button-padding-y: calc(var(--button-padding-y-xl) + var(--space-300));
1305
1367
  }
1306
1368
  .d-chip__close::before {
1307
1369
  position: absolute;
@@ -1396,180 +1458,257 @@ fieldset {
1396
1458
  align-items: baseline;
1397
1459
  justify-content: space-between;
1398
1460
  box-sizing: border-box;
1399
- margin-bottom: calc(var(--space-300) + var(--space-200));
1400
- color: currentColor;
1401
- font-weight: 700;
1461
+ margin-bottom: var(--space-300);
1462
+ color: var(--fc-secondary);
1463
+ font-weight: var(--fw-semibold);
1402
1464
  font-size: var(--fs-200);
1403
1465
  font-family: inherit;
1404
- line-height: var(--lh4);
1466
+ line-height: var(--lh-300);
1405
1467
  word-break: break-word;
1406
1468
  overflow-wrap: break-word;
1407
- cursor: pointer;
1408
1469
  }
1409
1470
  legend .d-label {
1410
1471
  cursor: default;
1411
1472
  }
1412
1473
  .d-label--xs {
1413
1474
  font-size: var(--fs-100);
1414
- line-height: var(--lh4);
1415
1475
  }
1416
1476
  .d-label--sm {
1417
1477
  font-size: var(--fs-200);
1418
- line-height: var(--lh2);
1419
1478
  }
1420
1479
  .d-label--lg {
1421
1480
  font-size: var(--fs-200);
1422
- line-height: var(--lh2);
1423
1481
  }
1424
1482
  .d-label--xl {
1425
1483
  font-size: var(--fs-300);
1426
- line-height: var(--lh4);
1427
1484
  }
1428
1485
  .d-description {
1429
1486
  display: flex;
1430
1487
  box-sizing: border-box;
1431
- margin-bottom: calc(var(--space-300) + var(--space-200));
1432
- color: var(--black-600);
1488
+ color: var(--fc-tertiary);
1433
1489
  font-size: var(--fs-100);
1434
1490
  font-family: inherit;
1435
- line-height: var(--lh4);
1491
+ line-height: var(--lh-400);
1436
1492
  fill: currentColor;
1437
1493
  }
1438
1494
  .d-label + .d-description {
1439
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
1495
+ margin-top: calc(var(--space-300) * -1);
1496
+ margin-bottom: var(--space-300);
1440
1497
  }
1441
1498
  .d-description--lg {
1442
1499
  font-size: var(--fs-200);
1443
- line-height: var(--lh6);
1444
1500
  }
1445
1501
  .d-description--xl {
1446
1502
  font-size: var(--fs-200);
1447
- line-height: var(--lh6);
1448
1503
  }
1449
1504
  .d-validation-message {
1450
- --validation--fc: var(--fc-tertiary);
1451
- display: inline-flex;
1505
+ --validation-color-text: var(--fc-tertiary);
1506
+ display: flex;
1452
1507
  gap: var(--space-300);
1453
1508
  align-items: flex-start;
1454
- margin-top: calc(var(--space-300) + var(--space-200));
1455
- color: var(--validation--fc);
1456
- font-weight: inherit;
1509
+ margin-top: var(--space-400);
1510
+ color: var(--validation-color-text);
1511
+ font-weight: var(--fw-medium);
1457
1512
  font-size: var(--fs-100);
1458
1513
  font-family: inherit;
1459
- line-height: var(--lh4);
1514
+ line-height: var(--lh-300);
1460
1515
  }
1461
1516
  .d-validation-message::before {
1462
- width: var(--size-500);
1463
- min-width: var(--size-500);
1517
+ display: block;
1518
+ width: calc(var(--size-500) + var(--size-200));
1464
1519
  height: var(--size-500);
1465
1520
  content: '';
1466
1521
  }
1467
1522
  .d-validation-message--warning {
1468
- --validation--fc: var(--fc-warning);
1523
+ --validation-color-text: var(--fc-warning);
1469
1524
  }
1470
1525
  .d-validation-message--warning::before {
1471
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='hsl(43 100% 33%)'/%3E%3C/svg%3E");
1526
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==');
1472
1527
  background-repeat: no-repeat;
1473
1528
  }
1474
1529
  .d-validation-message--error {
1475
- --validation--fc: var(--fc-error);
1530
+ --validation-color-text: var(--fc-error);
1476
1531
  }
1477
1532
  .d-validation-message--error::before {
1478
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='hsl(0 100% 29%)'/%3E%3C/svg%3E");
1533
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');
1479
1534
  background-repeat: no-repeat;
1480
1535
  }
1481
1536
  .d-validation-message--success {
1482
- --validation--fc: var(--fc-success);
1537
+ --validation-color-text: var(--fc-success);
1483
1538
  }
1484
1539
  .d-validation-message--success::before {
1485
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='hsl(115 94% 18%)'/%3E%3C/svg%3E");
1540
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');
1486
1541
  background-repeat: no-repeat;
1487
1542
  }
1488
1543
  .d-input,
1544
+ .d-input--md,
1489
1545
  .d-textarea,
1546
+ .d-textarea--md,
1547
+ .d-input__wrapper--md,
1490
1548
  .d-input__wrapper {
1491
1549
  --input-color-border-focus: var(--purple-400);
1492
- --input-color-border: var(--black-600);
1493
- --input-color-background: var(--white);
1494
- --input-color-text: var(--black-800);
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%);
1553
+ --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
1554
+ --input-border-radius: var(--size-400);
1555
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
1556
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
1557
+ --input-color-text: var(--fc-secondary);
1558
+ --input-font-size: var(--fs-200);
1559
+ --input-line-height: var(--lh-200);
1495
1560
  position: relative;
1496
1561
  display: inline-flex;
1497
1562
  flex: 1 0%;
1498
1563
  box-sizing: border-box;
1499
1564
  width: 100%;
1500
1565
  min-width: 0;
1501
- padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
1566
+ padding: var(--input-padding-y) var(--input-padding-x);
1502
1567
  color: var(--input-color-text);
1503
1568
  font-weight: inherit;
1504
- font-size: var(--fs-200);
1569
+ font-size: var(--input-font-size);
1505
1570
  font-family: inherit;
1506
- line-height: var(--lh4);
1571
+ line-height: var(--input-line-height);
1507
1572
  background-color: var(--input-color-background);
1508
- border: 1px solid var(--input-color-border);
1509
- border-radius: var(--base--corner-radius);
1573
+ border: var(--input-border-width) solid var(--input-color-border);
1574
+ border-radius: var(--input-border-radius);
1510
1575
  outline: none;
1511
1576
  box-shadow: none;
1512
1577
  transition-timing-function: var(--ttf-in-out);
1513
1578
  transition-duration: 100ms;
1514
1579
  transition-property: border, box-shadow, background-color;
1580
+ appearance: none;
1581
+ }
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);
1515
1590
  }
1516
1591
  .d-input::placeholder,
1592
+ .d-input--md::placeholder,
1517
1593
  .d-textarea::placeholder,
1594
+ .d-textarea--md::placeholder,
1595
+ .d-input__wrapper--md::placeholder,
1518
1596
  .d-input__wrapper::placeholder {
1519
1597
  color: var(--fc-placeholder);
1520
1598
  }
1521
1599
  .d-input::-ms-clear,
1600
+ .d-input--md::-ms-clear,
1522
1601
  .d-textarea::-ms-clear,
1602
+ .d-textarea--md::-ms-clear,
1603
+ .d-input__wrapper--md::-ms-clear,
1523
1604
  .d-input__wrapper::-ms-clear {
1524
1605
  display: none;
1525
1606
  }
1526
1607
  .d-input:focus,
1608
+ .d-input--md:focus,
1527
1609
  .d-textarea:focus,
1610
+ .d-textarea--md:focus,
1611
+ .d-input__wrapper--md:focus,
1528
1612
  .d-input__wrapper:focus,
1529
1613
  .d-input:focus-within,
1614
+ .d-input--md:focus-within,
1530
1615
  .d-textarea:focus-within,
1616
+ .d-textarea--md:focus-within,
1617
+ .d-input__wrapper--md:focus-within,
1531
1618
  .d-input__wrapper:focus-within {
1532
1619
  --input-color-border: var(--input-color-border-focus);
1533
1620
  outline: 0;
1534
1621
  box-shadow: var(--bs-focus-ring) !important;
1535
1622
  }
1536
1623
  .d-input[disabled],
1624
+ .d-input--md[disabled],
1537
1625
  .d-textarea[disabled],
1626
+ .d-textarea--md[disabled],
1627
+ .d-input__wrapper--md[disabled],
1538
1628
  .d-input__wrapper[disabled],
1539
1629
  .d-input[read-only],
1630
+ .d-input--md[read-only],
1540
1631
  .d-textarea[read-only],
1632
+ .d-textarea--md[read-only],
1633
+ .d-input__wrapper--md[read-only],
1541
1634
  .d-input__wrapper[read-only] {
1542
- --input-color-border: var(--black-400) !important;
1543
- --input-color-background: var(--black-300);
1635
+ --input-color-border: transparent !important;
1636
+ --input-color-background: var(--input-color-background-disabled);
1544
1637
  --input-color-text: var(--fc-disabled);
1545
1638
  }
1546
1639
  .d-input[disabled]:focus,
1640
+ .d-input--md[disabled]:focus,
1547
1641
  .d-textarea[disabled]:focus,
1642
+ .d-textarea--md[disabled]:focus,
1643
+ .d-input__wrapper--md[disabled]:focus,
1548
1644
  .d-input__wrapper[disabled]:focus,
1549
1645
  .d-input[read-only]:focus,
1646
+ .d-input--md[read-only]:focus,
1550
1647
  .d-textarea[read-only]:focus,
1648
+ .d-textarea--md[read-only]:focus,
1649
+ .d-input__wrapper--md[read-only]:focus,
1551
1650
  .d-input__wrapper[read-only]:focus,
1552
1651
  .d-input[disabled]:focus-within,
1652
+ .d-input--md[disabled]:focus-within,
1553
1653
  .d-textarea[disabled]:focus-within,
1654
+ .d-textarea--md[disabled]:focus-within,
1655
+ .d-input__wrapper--md[disabled]:focus-within,
1554
1656
  .d-input__wrapper[disabled]:focus-within,
1555
1657
  .d-input[read-only]:focus-within,
1658
+ .d-input--md[read-only]:focus-within,
1556
1659
  .d-textarea[read-only]:focus-within,
1660
+ .d-textarea--md[read-only]:focus-within,
1661
+ .d-input__wrapper--md[read-only]:focus-within,
1557
1662
  .d-input__wrapper[read-only]:focus-within {
1558
1663
  box-shadow: none !important;
1559
1664
  }
1560
1665
  .d-input[disabled]::placeholder,
1666
+ .d-input--md[disabled]::placeholder,
1561
1667
  .d-textarea[disabled]::placeholder,
1668
+ .d-textarea--md[disabled]::placeholder,
1669
+ .d-input__wrapper--md[disabled]::placeholder,
1562
1670
  .d-input__wrapper[disabled]::placeholder,
1563
1671
  .d-input[read-only]::placeholder,
1672
+ .d-input--md[read-only]::placeholder,
1564
1673
  .d-textarea[read-only]::placeholder,
1674
+ .d-textarea--md[read-only]::placeholder,
1675
+ .d-input__wrapper--md[read-only]::placeholder,
1565
1676
  .d-input__wrapper[read-only]::placeholder {
1566
1677
  color: var(--fc-placeholder);
1567
1678
  }
1568
1679
  .d-input[disabled],
1680
+ .d-input--md[disabled],
1569
1681
  .d-textarea[disabled],
1682
+ .d-textarea--md[disabled],
1683
+ .d-input__wrapper--md[disabled],
1570
1684
  .d-input__wrapper[disabled] {
1571
1685
  cursor: not-allowed;
1572
1686
  }
1687
+ .d-input::-moz-focus-inner,
1688
+ .d-input--md::-moz-focus-inner,
1689
+ .d-textarea::-moz-focus-inner,
1690
+ .d-textarea--md::-moz-focus-inner,
1691
+ .d-input__wrapper--md::-moz-focus-inner,
1692
+ .d-input__wrapper::-moz-focus-inner {
1693
+ outline: none !important;
1694
+ }
1695
+ .d-input:-moz-focusring,
1696
+ .d-input--md:-moz-focusring,
1697
+ .d-textarea:-moz-focusring,
1698
+ .d-textarea--md:-moz-focusring,
1699
+ .d-input__wrapper--md:-moz-focusring,
1700
+ .d-input__wrapper:-moz-focusring {
1701
+ color: transparent;
1702
+ text-shadow: 0 0 0 var(--black-900);
1703
+ }
1704
+ .d-input::-ms-expand,
1705
+ .d-input--md::-ms-expand,
1706
+ .d-textarea::-ms-expand,
1707
+ .d-textarea--md::-ms-expand,
1708
+ .d-input__wrapper--md::-ms-expand,
1709
+ .d-input__wrapper::-ms-expand {
1710
+ display: none;
1711
+ }
1573
1712
  .d-input__wrapper {
1574
1713
  padding: 0;
1575
1714
  }
@@ -1582,8 +1721,8 @@ legend .d-label {
1582
1721
  .d-input__wrapper .d-input,
1583
1722
  .d-input__wrapper .d-textarea {
1584
1723
  flex: 1;
1724
+ background-color: transparent;
1585
1725
  border: none;
1586
- border-radius: var(--base--corner-radius);
1587
1726
  }
1588
1727
  .d-input__wrapper .d-input:focus,
1589
1728
  .d-input__wrapper .d-textarea:focus {
@@ -1600,39 +1739,39 @@ legend .d-label {
1600
1739
  padding-left: calc(var(--space-300) + var(--space-200));
1601
1740
  }
1602
1741
  .d-input.d-input--xs {
1603
- padding-top: var(--space-100 / 2);
1604
- padding-bottom: calc(var(--space-400) + var(--space-100));
1605
- font-size: var(--fs-100);
1742
+ --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
1743
+ --input-padding-x: calc(var(--space-400) - var(--input-border-width));
1744
+ --input-font-size: var(--fs-100);
1745
+ --input-border-radius: var(--size-300);
1606
1746
  }
1607
1747
  .d-input.d-input--xs .d-btn__icon {
1608
1748
  width: 1.4rem;
1609
1749
  height: 1.4rem;
1610
1750
  }
1611
1751
  .d-input.d-input--sm {
1612
- --padding-y: calc(var(--space-300) + var(--space-200));
1613
- padding-top: var(--padding-y);
1614
- padding-bottom: var(--padding-y);
1615
- font-size: var(--fs-200);
1752
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
1753
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
1754
+ --input-font-size: var(--fs-100);
1616
1755
  }
1617
1756
  .d-input.d-input--sm .d-btn__icon {
1618
1757
  width: 1.6rem;
1619
1758
  height: 1.6rem;
1620
1759
  }
1621
1760
  .d-input.d-input--lg {
1622
- --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
1623
- padding-top: var(--padding-y);
1624
- padding-bottom: var(--padding-y);
1625
- font-size: var(--fs-300);
1761
+ --input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
1762
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
1763
+ --input-font-size: var(--fs-300);
1764
+ --input-border-radius: calc(var(--size-300) * 3);
1626
1765
  }
1627
1766
  .d-input.d-input--lg .d-btn__icon {
1628
1767
  width: 2rem;
1629
1768
  height: 2rem;
1630
1769
  }
1631
1770
  .d-input.d-input--xl {
1632
- --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
1633
- padding-top: var(--padding-y);
1634
- padding-bottom: var(--padding-y);
1635
- font-size: var(--fs-300);
1771
+ --input-padding-y: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
1772
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
1773
+ --input-font-size: var(--fs-400);
1774
+ --input-border-radius: var(--size-500);
1636
1775
  }
1637
1776
  .d-input.d-input--xl .d-btn__icon {
1638
1777
  width: 2.4rem;
@@ -1641,11 +1780,14 @@ legend .d-label {
1641
1780
  .d-textarea {
1642
1781
  min-height: calc(var(--size-300) * 20);
1643
1782
  vertical-align: top;
1783
+ border-bottom-right-radius: var(--size-300);
1784
+ resize: vertical;
1644
1785
  }
1645
1786
  .d-textarea--xs {
1646
- padding-top: var(--space-100 / 2);
1647
- padding-bottom: calc(var(--space-400) + var(--space-100));
1648
- font-size: var(--fs-100);
1787
+ --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
1788
+ --input-padding-x: calc(var(--space-400) - var(--input-border-width));
1789
+ --input-font-size: var(--fs-100);
1790
+ --input-border-radius: var(--size-300);
1649
1791
  min-height: calc(var(--size-300) * 10);
1650
1792
  }
1651
1793
  .d-textarea--xs .d-btn__icon {
@@ -1653,10 +1795,9 @@ legend .d-label {
1653
1795
  height: 1.4rem;
1654
1796
  }
1655
1797
  .d-textarea--sm {
1656
- --padding-y: calc(var(--space-300) + var(--space-200));
1657
- padding-top: var(--padding-y);
1658
- padding-bottom: var(--padding-y);
1659
- font-size: var(--fs-200);
1798
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
1799
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
1800
+ --input-font-size: var(--fs-100);
1660
1801
  min-height: calc(var(--size-300) * 12);
1661
1802
  }
1662
1803
  .d-textarea--sm .d-btn__icon {
@@ -1664,10 +1805,10 @@ legend .d-label {
1664
1805
  height: 1.6rem;
1665
1806
  }
1666
1807
  .d-textarea--lg {
1667
- --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
1668
- padding-top: var(--padding-y);
1669
- padding-bottom: var(--padding-y);
1670
- font-size: var(--fs-300);
1808
+ --input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
1809
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
1810
+ --input-font-size: var(--fs-300);
1811
+ --input-border-radius: calc(var(--size-300) * 3);
1671
1812
  min-height: calc(var(--size-300) * 23);
1672
1813
  }
1673
1814
  .d-textarea--lg .d-btn__icon {
@@ -1675,10 +1816,10 @@ legend .d-label {
1675
1816
  height: 2rem;
1676
1817
  }
1677
1818
  .d-textarea--xl {
1678
- --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
1679
- padding-top: var(--padding-y);
1680
- padding-bottom: var(--padding-y);
1681
- font-size: var(--fs-300);
1819
+ --input-padding-y: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
1820
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
1821
+ --input-font-size: var(--fs-400);
1822
+ --input-border-radius: var(--size-500);
1682
1823
  min-height: calc(var(--size-300) * 25);
1683
1824
  }
1684
1825
  .d-textarea--xl .d-btn__icon {
@@ -1687,7 +1828,7 @@ legend .d-label {
1687
1828
  }
1688
1829
  .d-input--warning,
1689
1830
  .d-textarea--warning {
1690
- --input-color-border: var(--warning-color) !important;
1831
+ --input-color-border: var(--gold-400) !important;
1691
1832
  --input-color-border-focus: var(--warning-color);
1692
1833
  }
1693
1834
  .d-input--warning:focus,
@@ -1720,37 +1861,37 @@ legend .d-label {
1720
1861
  }
1721
1862
  .d-input-icon {
1722
1863
  --input-icon-size: var(--size-500);
1864
+ --input-icon-container-height: var(--size-600);
1723
1865
  z-index: var(--zi-base1);
1724
1866
  display: inline-flex;
1725
1867
  align-items: center;
1726
- height: calc(var(--size-300) * 9);
1868
+ height: var(--input-icon-container-height);
1727
1869
  margin: 0;
1728
- line-height: 0;
1729
1870
  }
1730
1871
  .d-input-icon svg {
1731
1872
  width: var(--input-icon-size);
1732
1873
  height: var(--input-icon-size);
1733
1874
  }
1734
1875
  .d-input-icon.d-input--xs {
1735
- height: calc(var(--size-600) - var(--size-300));
1876
+ --input-icon-container-height: calc(var(--size-600) - var(--size-300));
1736
1877
  }
1737
1878
  .d-input-icon--xs {
1738
1879
  --input-icon-size: 1.2rem;
1739
1880
  }
1740
1881
  .d-input-icon.d-input--sm {
1741
- height: var(--size-600);
1882
+ --input-icon-container-height: var(--size-600);
1742
1883
  }
1743
1884
  .d-input-icon--sm {
1744
1885
  --input-icon-size: 1.4rem;
1745
1886
  }
1746
1887
  .d-input-icon.d-input--lg {
1747
- height: calc(var(--size-300) * 12);
1888
+ --input-icon-container-height: calc(var(--size-300) * 10);
1748
1889
  }
1749
1890
  .d-input-icon--lg {
1750
1891
  --input-icon-size: 2rem;
1751
1892
  }
1752
1893
  .d-input-icon.d-input--xl {
1753
- height: calc(var(--size-300) * 14);
1894
+ --input-icon-container-height: calc(var(--size-300) * 14);
1754
1895
  }
1755
1896
  .d-input-icon--xl {
1756
1897
  --input-icon-size: 2.4rem;
@@ -1909,9 +2050,12 @@ legend .d-label {
1909
2050
  }
1910
2051
  .d-modal {
1911
2052
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
2053
+ --modal-dialog-padding: var(--space-600);
1912
2054
  --modal-dialog-color-background: var(--white);
1913
2055
  --modal-dialog-color-text: var(--fc-tertiary);
1914
2056
  --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);
1915
2059
  position: fixed;
1916
2060
  top: 0;
1917
2061
  right: 0;
@@ -1951,16 +2095,20 @@ legend .d-label {
1951
2095
  .d-modal__dialog {
1952
2096
  position: relative;
1953
2097
  z-index: var(--zi-hide);
2098
+ display: flex;
2099
+ flex-direction: column;
2100
+ gap: var(--space-500);
1954
2101
  width: 100%;
1955
2102
  max-width: calc(var(--size-300) * 157);
1956
2103
  max-height: 100%;
2104
+ padding: var(--modal-dialog-padding);
1957
2105
  overflow-y: auto;
1958
2106
  color: var(--modal-dialog-color-text);
1959
2107
  font-size: var(--fs-200);
1960
- line-height: var(--lh8);
2108
+ line-height: var(--lh-400);
1961
2109
  background-color: var(--modal-dialog-color-background);
1962
- border-radius: var(--br8);
1963
- box-shadow: var(--bs-card);
2110
+ border-radius: var(--size-500);
2111
+ box-shadow: var(--modal-dialog-shadow);
1964
2112
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
1965
2113
  backface-visibility: hidden;
1966
2114
  visibility: hidden;
@@ -1980,51 +2128,58 @@ legend .d-label {
1980
2128
  --modal-footer-padding: calc(var(--space-300) * 6);
1981
2129
  display: flex;
1982
2130
  flex-direction: row-reverse;
2131
+ gap: var(--space-400);
1983
2132
  align-items: center;
1984
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
1985
- }
1986
- .d-modal__footer > :not(:first-child) {
1987
- margin-right: var(--space-300);
1988
- }
1989
- .d-modal__footer > :not(:last-child) {
1990
- margin-left: var(--space-300);
1991
2133
  }
1992
2134
  .d-modal__header {
1993
2135
  --modal-header-padding: calc(var(--space-300) * 6);
1994
2136
  margin: 0 !important;
1995
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
1996
2137
  color: var(--modal-header-color-text);
1997
- font-weight: var(--fw-bold);
1998
- font-size: var(--fs-300);
1999
- line-height: var(--lh4);
2138
+ font-weight: var(--fw-medium);
2139
+ font-size: var(--fs-400);
2140
+ line-height: var(--lh-100);
2000
2141
  }
2001
2142
  .d-modal__content {
2002
2143
  max-width: 75ch;
2003
- margin: calc(var(--space-300) * 3) 0;
2004
- padding: var(--space-300) calc(var(--space-300) * 6);
2005
2144
  }
2006
2145
  .d-modal__close {
2007
2146
  position: absolute;
2008
- top: var(--space-400);
2009
- right: var(--space-400);
2147
+ top: var(--space-500);
2148
+ right: var(--space-500);
2010
2149
  margin: 0 !important;
2011
2150
  }
2012
2151
  .d-modal__banner {
2152
+ --modal-banner-padding-y: var(--space-500);
2153
+ --modal-banner-padding-x: var(--space-600);
2154
+ --modal-banner-color-background: var(--gold-100);
2013
2155
  position: relative;
2014
2156
  box-sizing: border-box;
2015
2157
  width: 100%;
2016
2158
  max-width: calc(var(--size-300) * 157);
2017
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
2159
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
2160
+ color: var(--fc-primary);
2018
2161
  font-size: var(--fs-200);
2019
- line-height: var(--lh4);
2020
- background-color: var(--gold-100);
2021
- border-radius: var(--br8) var(--br8) 0 0;
2162
+ line-height: var(--lh-300);
2163
+ background-color: var(--modal-banner-color-background);
2164
+ border-radius: var(--size-500) var(--size-500) 0 0;
2165
+ box-shadow: var(--modal-dialog-shadow);
2166
+ }
2167
+ .d-modal__banner::before {
2168
+ position: absolute;
2169
+ right: 0;
2170
+ bottom: 0;
2171
+ left: 0;
2172
+ z-index: var(--zi-modal-element);
2173
+ height: var(--modal-banner-padding-y);
2174
+ background-color: var(--modal-banner-color-background);
2175
+ content: '';
2022
2176
  }
2023
2177
  .d-modal__banner:not(.d-d-none) + .d-modal__dialog {
2024
2178
  border-top-left-radius: 0;
2025
2179
  border-top-right-radius: 0;
2026
2180
  }
2027
2181
  .d-modal--full {
2182
+ --modal-dialog-padding: 0;
2028
2183
  padding: 0;
2029
2184
  overflow: hidden scroll;
2030
2185
  transform: unset !important;
@@ -2346,14 +2501,20 @@ legend .d-label {
2346
2501
  --notice-color-background: var(--gold-200);
2347
2502
  --notice-color-text: var(--fc-primary);
2348
2503
  }
2504
+ .d-popover {
2505
+ --popover-color-background: var(--black-100);
2506
+ --popover-border-width: var(--size-100);
2507
+ --popover-border-radius: var(--size-400);
2508
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
2509
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
2510
+ }
2349
2511
  .d-popover__dialog {
2350
2512
  display: grid;
2351
- grid-template-rows: auto 1fr;
2513
+ grid-template-rows: 1fr;
2352
2514
  overflow: auto;
2353
- background-color: var(--white);
2354
- border-color: var(--black-400);
2355
- border-radius: var(--br8);
2356
- box-shadow: var(--bs-card);
2515
+ background-color: var(--popover-color-background);
2516
+ border-radius: var(--popover-border-radius);
2517
+ box-shadow: var(--popover-shadow);
2357
2518
  }
2358
2519
  .d-popover__dialog,
2359
2520
  .d-popover__dialog *,
@@ -2367,7 +2528,8 @@ legend .d-label {
2367
2528
  .d-popover__content {
2368
2529
  overflow: auto;
2369
2530
  }
2370
- .d-popover__header-footer-base {
2531
+ .d-popover__header,
2532
+ .d-popover__footer {
2371
2533
  display: flex;
2372
2534
  align-items: center;
2373
2535
  justify-content: flex-end;
@@ -2380,30 +2542,10 @@ legend .d-label {
2380
2542
  font-size: var(--fs-200);
2381
2543
  }
2382
2544
  .d-popover__header {
2383
- display: flex;
2384
- align-items: center;
2385
- justify-content: flex-end;
2386
- width: 100%;
2387
- min-height: var(--size48);
2388
- padding-top: calc(var(--space-300) + var(--space-200));
2389
- padding-bottom: calc(var(--space-300) + var(--space-200));
2390
- overflow: auto;
2391
- font-weight: var(--fw-semibold);
2392
- font-size: var(--fs-200);
2393
- border-bottom: var(--size-100) solid var(--black-300);
2545
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
2394
2546
  }
2395
2547
  .d-popover__footer {
2396
- display: flex;
2397
- align-items: center;
2398
- justify-content: flex-end;
2399
- width: 100%;
2400
- min-height: var(--size48);
2401
- padding-top: calc(var(--space-300) + var(--space-200));
2402
- padding-bottom: calc(var(--space-300) + var(--space-200));
2403
- overflow: auto;
2404
- font-weight: var(--fw-semibold);
2405
- font-size: var(--fs-200);
2406
- border-top: var(--size-100) solid var(--black-300);
2548
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
2407
2549
  }
2408
2550
  .d-checkbox,
2409
2551
  .d-radio {
@@ -2676,123 +2818,65 @@ legend .d-label {
2676
2818
  }
2677
2819
  .d-select {
2678
2820
  --select-color-border: var(--black-500);
2679
- --select-color-background: var(--white);
2680
- --select-color-text: var(--black-800);
2821
+ --select-notch-position-right: calc(var(--size-300) * 2);
2681
2822
  position: relative;
2682
- display: inline-flex;
2683
- box-sizing: border-box;
2684
- width: 100%;
2685
- width: -webkit-fill-available;
2686
- font-weight: inherit;
2687
- font-size: var(--fs-200);
2688
- font-family: inherit;
2689
- line-height: var(--lh-200);
2823
+ width: stretch;
2690
2824
  }
2691
- .d-select::before,
2692
2825
  .d-select::after {
2826
+ --select-arrow-size: calc(var(--size-300) * 3.5);
2693
2827
  position: absolute;
2694
- right: 0.75em;
2828
+ top: 50%;
2829
+ right: var(--select-notch-position-right);
2695
2830
  z-index: var(--zi-selected);
2696
- border-color: var(--black-900) transparent;
2697
- border-style: solid;
2698
- border-width: 0.25em;
2831
+ width: var(--select-arrow-size);
2832
+ height: var(--select-arrow-size);
2833
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE0NiA3LjE0NmEuNS41IDAgMCAxIC43MDggMEw2IDkuMjkzbDIuMTQ2LTIuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTIuNSAyLjVhLjUuNSAwIDAgMS0uNzA4IDBsLTIuNS0yLjVhLjUuNSAwIDAgMSAwLS43MDhabTIuNS01LjVhLjUuNSAwIDAgMSAuNzA4IDBsMi41IDIuNWEuNS41IDAgMSAxLS43MDguNzA4TDYgMi43MDcgMy44NTQgNC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhsMi41LTIuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
2834
+ background-repeat: no-repeat;
2835
+ background-size: 100%;
2836
+ transform: translateY(-50%);
2699
2837
  content: '';
2700
2838
  pointer-events: none;
2701
2839
  }
2702
- .d-select::before {
2703
- top: calc(50% - 0.25em);
2704
- border-top-width: 0;
2705
- }
2706
- .d-select::after {
2707
- top: calc(50% + 0.125em);
2708
- border-bottom-width: 0;
2709
- }
2710
- .d-select--xs {
2711
- font-size: var(--fs-200);
2712
- }
2713
- .d-select--xs .d-select__input {
2714
- padding-top: var(--space-100 / 2);
2715
- padding-bottom: calc(var(--space-400) + var(--space-100));
2716
- font-size: var(--fs-100);
2717
- }
2718
- .d-select--xs .d-select__input .d-btn__icon {
2719
- width: 1.4rem;
2720
- height: 1.4rem;
2721
- }
2722
- .d-select--sm {
2723
- font-size: var(--fs-200);
2724
- }
2725
- .d-select--sm .d-select__input {
2726
- --padding-y: calc(var(--space-300) + var(--space-200));
2727
- padding-top: var(--padding-y);
2728
- padding-bottom: var(--padding-y);
2729
- font-size: var(--fs-200);
2730
- }
2731
- .d-select--sm .d-select__input .d-btn__icon {
2732
- width: 1.6rem;
2733
- height: 1.6rem;
2734
- }
2735
- .d-select--lg {
2736
- font-size: var(--fs-300);
2737
- }
2738
- .d-select--lg .d-select__input {
2739
- --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
2740
- padding-top: var(--padding-y);
2741
- padding-bottom: var(--padding-y);
2742
- font-size: var(--fs-300);
2743
- }
2744
- .d-select--lg .d-select__input .d-btn__icon {
2745
- width: 2rem;
2746
- height: 2rem;
2747
- }
2748
- .d-select--xl {
2749
- font-size: var(--fs-300);
2750
- }
2751
- .d-select--xl .d-select__input {
2752
- --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
2753
- padding-top: var(--padding-y);
2754
- padding-bottom: var(--padding-y);
2755
- font-size: var(--fs-300);
2756
- }
2757
- .d-select--xl .d-select__input .d-btn__icon {
2758
- width: 2.4rem;
2759
- height: 2.4rem;
2760
- }
2761
2840
  .d-select__input {
2762
- --select-input-padding: calc(var(--space-400) - var(--space-100)) 2em calc(var(--space-400) - var(--space-100)) var(--space-400);
2763
- height: 100%;
2764
- padding: var(--select-input-padding) !important;
2765
- color: var(--select-color-text);
2766
- background-color: var(--select-color-background);
2767
- border-color: var(--select-color-border);
2768
- -webkit-appearance: none;
2769
- -moz-appearance: none;
2770
- appearance: none;
2841
+ --select-color-border: var(--input-color-border);
2842
+ --select-notch-padding-right: calc(var(--space-300) * 6);
2771
2843
  --input-color-border-focus: var(--purple-400);
2772
- --input-color-border: var(--black-600);
2773
- --input-color-background: var(--white);
2774
- --input-color-text: var(--black-800);
2844
+ --input-color-border: hsla(var(--black-900-hsl) / 9%);
2845
+ --input-color-background: hsla(var(--black-900-hsl) / 3%);
2846
+ --input-color-background-disabled: hsla(var(--black-900-hsl) / 12%);
2847
+ --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
2848
+ --input-border-radius: var(--size-400);
2849
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
2850
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2851
+ --input-color-text: var(--fc-secondary);
2852
+ --input-font-size: var(--fs-200);
2853
+ --input-line-height: var(--lh-200);
2775
2854
  position: relative;
2776
2855
  display: inline-flex;
2777
2856
  flex: 1 0%;
2778
2857
  box-sizing: border-box;
2779
2858
  width: 100%;
2780
2859
  min-width: 0;
2781
- padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
2860
+ padding: var(--input-padding-y) var(--input-padding-x);
2782
2861
  color: var(--input-color-text);
2783
2862
  font-weight: inherit;
2784
- font-size: var(--fs-200);
2863
+ font-size: var(--input-font-size);
2785
2864
  font-family: inherit;
2786
- line-height: var(--lh4);
2865
+ line-height: var(--input-line-height);
2787
2866
  background-color: var(--input-color-background);
2788
- border: 1px solid var(--input-color-border);
2789
- border-radius: var(--base--corner-radius);
2867
+ border: var(--input-border-width) solid var(--input-color-border);
2868
+ border-radius: var(--input-border-radius);
2790
2869
  outline: none;
2791
2870
  box-shadow: none;
2792
2871
  transition-timing-function: var(--ttf-in-out);
2793
2872
  transition-duration: 100ms;
2794
2873
  transition-property: border, box-shadow, background-color;
2795
- --select-color-border: var(--black-600);
2874
+ appearance: none;
2875
+ padding-right: var(--select-notch-padding-right);
2876
+ }
2877
+ .bg-test .d-select__input {
2878
+ --input-color-border: var(--black-300);
2879
+ --input-color-background: var(--black-100);
2796
2880
  }
2797
2881
  .d-select__input::placeholder {
2798
2882
  color: var(--fc-placeholder);
@@ -2808,8 +2892,8 @@ legend .d-label {
2808
2892
  }
2809
2893
  .d-select__input[disabled],
2810
2894
  .d-select__input[read-only] {
2811
- --input-color-border: var(--black-400) !important;
2812
- --input-color-background: var(--black-300);
2895
+ --input-color-border: transparent !important;
2896
+ --input-color-background: var(--input-color-background-disabled);
2813
2897
  --input-color-text: var(--fc-disabled);
2814
2898
  }
2815
2899
  .d-select__input[disabled]:focus,
@@ -2825,14 +2909,27 @@ legend .d-label {
2825
2909
  .d-select__input[disabled] {
2826
2910
  cursor: not-allowed;
2827
2911
  }
2912
+ .d-select__input::-moz-focus-inner {
2913
+ outline: none !important;
2914
+ }
2915
+ .d-select__input:-moz-focusring {
2916
+ color: transparent;
2917
+ text-shadow: 0 0 0 var(--black-900);
2918
+ }
2919
+ .d-select__input::-ms-expand {
2920
+ display: none;
2921
+ }
2828
2922
  .d-select__input:focus {
2829
2923
  --select-color-border: var(--purple-400);
2830
2924
  box-shadow: var(--bs-focus-ring);
2831
2925
  }
2832
- .d-select__input:disabled {
2926
+ .d-select__input[disabled],
2927
+ .d-select__input[read-only] {
2833
2928
  color: var(--fc-disabled);
2834
- background: var(--black-300);
2835
- border: 1px solid var(--black-400);
2929
+ background: var(--input-color-background-disabled);
2930
+ border-color: transparent;
2931
+ border-style: solid;
2932
+ border-width: var(--input-border-width);
2836
2933
  }
2837
2934
  .d-select__input::-moz-focus-inner {
2838
2935
  outline: none !important;
@@ -2844,30 +2941,79 @@ legend .d-label {
2844
2941
  .d-select__input::-ms-expand {
2845
2942
  display: none;
2846
2943
  }
2944
+ .d-select--xs .d-select__input {
2945
+ --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
2946
+ --input-padding-x: calc(var(--space-400) - var(--input-border-width));
2947
+ --input-font-size: var(--fs-100);
2948
+ --input-border-radius: var(--size-300);
2949
+ }
2950
+ .d-select--xs .d-select__input .d-btn__icon {
2951
+ width: 1.4rem;
2952
+ height: 1.4rem;
2953
+ }
2954
+ .d-select--sm .d-select__input {
2955
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
2956
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2957
+ --input-font-size: var(--fs-100);
2958
+ }
2959
+ .d-select--sm .d-select__input .d-btn__icon {
2960
+ width: 1.6rem;
2961
+ height: 1.6rem;
2962
+ }
2963
+ .d-select--lg .d-select__input {
2964
+ --input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
2965
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
2966
+ --input-font-size: var(--fs-300);
2967
+ --input-border-radius: calc(var(--size-300) * 3);
2968
+ --select-notch-padding-right: calc(var(--space-300) * 9);
2969
+ }
2970
+ .d-select--lg .d-select__input .d-btn__icon {
2971
+ width: 2rem;
2972
+ height: 2rem;
2973
+ }
2974
+ .d-select--lg::after {
2975
+ --select-arrow-size: calc(var(--size-300) * 4.5);
2976
+ --select-notch-position-right: calc(var(--size-300) * 3);
2977
+ }
2978
+ .d-select--xl .d-select__input {
2979
+ --input-padding-y: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2980
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
2981
+ --input-font-size: var(--fs-400);
2982
+ --input-border-radius: var(--size-500);
2983
+ --select-notch-padding-right: calc(var(--space-300) * 9);
2984
+ }
2985
+ .d-select--xl .d-select__input .d-btn__icon {
2986
+ width: 2.4rem;
2987
+ height: 2.4rem;
2988
+ }
2989
+ .d-select--xl::after {
2990
+ --select-arrow-size: calc(var(--size-300) * 4.5);
2991
+ --select-notch-position-right: calc(var(--size-300) * 3);
2992
+ }
2847
2993
  .d-select__input--success {
2848
- --select-color-border: var(--success-color);
2994
+ --input-color-border: var(--success-color);
2849
2995
  }
2850
2996
  .d-select__input--success:focus {
2851
- --select-color-border: var(--success-color);
2997
+ --input-color-border: var(--success-color);
2852
2998
  box-shadow: var(--bs-focus-ring-success) !important;
2853
2999
  }
2854
3000
  .d-select__input--error {
2855
- --select-color-border: var(--error-color);
3001
+ --input-color-border: var(--error-color);
2856
3002
  }
2857
3003
  .d-select__input--error:focus {
2858
- --select-color-border: var(--error-color);
3004
+ --input-color-border: var(--error-color);
2859
3005
  box-shadow: var(--bs-focus-ring-error) !important;
2860
3006
  }
2861
3007
  .d-select__input--warning {
2862
- --select-color-border: var(--warning-color);
3008
+ --input-color-border: var(--gold-400);
2863
3009
  }
2864
3010
  .d-select__input--warning:focus {
2865
- --select-color-border: var(--warning-color);
3011
+ --input-color-border: var(--warning-color);
2866
3012
  box-shadow: var(--bs-focus-ring-warning) !important;
2867
3013
  }
2868
3014
  .d-select--disabled::before,
2869
3015
  .d-select--disabled::after {
2870
- border-color: var(--black-500) transparent;
3016
+ opacity: 0.33;
2871
3017
  }
2872
3018
  .skeleton-placeholder {
2873
3019
  display: flex;
@@ -3073,15 +3219,22 @@ legend .d-label {
3073
3219
  .d-tooltip {
3074
3220
  --tooltip-color-background: var(--black-800);
3075
3221
  --tooltip-color-text: var(--white);
3222
+ --tooltip-font-weight: var(--fw-medium);
3223
+ --tooltip-line-height: var(--lh-300);
3224
+ --tooltip-padding-y: var(--space-400);
3225
+ --tooltip-padding-x: calc(var(--space-300) * 3);
3226
+ --tooltip-border-radius: var(--size-300);
3076
3227
  z-index: var(--zi-tooltip);
3077
3228
  max-width: calc(var(--size-300) * 54);
3078
- padding: var(--space-400);
3229
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
3079
3230
  color: var(--tooltip-color-text);
3231
+ font-weight: var(--tooltip-font-weight);
3080
3232
  font-size: var(--fs-100);
3081
- line-height: var(--lh-300);
3233
+ line-height: var(--tooltip-line-height);
3234
+ letter-spacing: calc(var(--size-100) * 0.25);
3082
3235
  text-align: center;
3083
3236
  background-color: var(--tooltip-color-background);
3084
- border-radius: var(--size-300);
3237
+ border-radius: var(--tooltip-border-radius);
3085
3238
  }
3086
3239
  .d-tooltip::after {
3087
3240
  position: absolute;
@@ -10198,27 +10351,10 @@ body.theme-dark .d\:d-divide-red-500 > * + * {
10198
10351
  body.theme-dark .d\:d-bgc-red-500 {
10199
10352
  --bgo: 100%;
10200
10353
  background-color: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--bgo)) !important;
10201
- }
10202
- .d-fc-red-400,
10203
- .h\:d-fc-red-400:hover,
10204
- .f\:d-fc-red-400:focus,
10205
- .d-fc-error,
10206
- .h\:d-fc-error:hover,
10207
- .f\:d-fc-error:focus,
10208
- .f\:d-fc-error:focus-within,
10209
- .fv\:d-fc-error.focus-visible.js-focus-visible,
10210
- .js-focus-visible .fv\:d-fc-error.focus-visible {
10211
- --fco: 100%;
10212
- color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--fco)) !important;
10213
- }
10214
- .d-fc-red-400,
10215
- .h\:d-fc-red-400:hover,
10216
- .f\:d-fc-red-400:focus,
10217
- .d-fc-error,
10218
- .h\:d-fc-error:hover,
10219
- .f\:d-fc-error:focus,
10220
- .f\:d-fc-error:focus-within,
10221
- .fv\:d-fc-error:focus-visible {
10354
+ }
10355
+ .d-fc-red-400,
10356
+ .h\:d-fc-red-400:hover,
10357
+ .f\:d-fc-red-400:focus {
10222
10358
  --fco: 100%;
10223
10359
  color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--fco)) !important;
10224
10360
  }
@@ -10316,7 +10452,24 @@ body.theme-dark .d\:d-bgc-red-400 {
10316
10452
  }
10317
10453
  .d-fc-red-300,
10318
10454
  .h\:d-fc-red-300:hover,
10319
- .f\:d-fc-red-300:focus {
10455
+ .f\:d-fc-red-300:focus,
10456
+ .d-fc-error,
10457
+ .h\:d-fc-error:hover,
10458
+ .f\:d-fc-error:focus,
10459
+ .f\:d-fc-error:focus-within,
10460
+ .fv\:d-fc-error.focus-visible.js-focus-visible,
10461
+ .js-focus-visible .fv\:d-fc-error.focus-visible {
10462
+ --fco: 100%;
10463
+ color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10464
+ }
10465
+ .d-fc-red-300,
10466
+ .h\:d-fc-red-300:hover,
10467
+ .f\:d-fc-red-300:focus,
10468
+ .d-fc-error,
10469
+ .h\:d-fc-error:hover,
10470
+ .f\:d-fc-error:focus,
10471
+ .f\:d-fc-error:focus-within,
10472
+ .fv\:d-fc-error:focus-visible {
10320
10473
  --fco: 100%;
10321
10474
  color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10322
10475
  }
@@ -14550,12 +14703,18 @@ body.theme-dark .d\:d-bgg-to-0 {
14550
14703
  .d-td200 {
14551
14704
  transition-duration: var(--td200) !important;
14552
14705
  }
14706
+ .d-td300 {
14707
+ transition-duration: var(--td300) !important;
14708
+ }
14553
14709
  .d-ttf-in-out {
14554
14710
  transition-timing-function: var(--ttf-in-out) !important;
14555
14711
  }
14556
14712
  .d-ttf-out {
14557
14713
  transition-timing-function: var(--ttf-out) !important;
14558
14714
  }
14715
+ .ttf-out-quint {
14716
+ transition-timing-function: var(--ttf-out-quint) !important;
14717
+ }
14559
14718
  .d-tp-all {
14560
14719
  transition-property: all !important;
14561
14720
  }
@@ -14589,6 +14748,9 @@ body.theme-dark .d\:d-bgg-to-0 {
14589
14748
  .d-t-delay200 {
14590
14749
  transition-delay: var(--td200) !important;
14591
14750
  }
14751
+ .d-t-delay300 {
14752
+ transition-delay: var(--td300) !important;
14753
+ }
14592
14754
  .d-ac-center {
14593
14755
  align-content: center !important;
14594
14756
  }
@@ -20239,18 +20401,18 @@ body {
20239
20401
  --red-200-hsl: var(--red-200-h) var(--red-200-s) var(--red-200-l);
20240
20402
  --red-200: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--alpha, 100%));
20241
20403
  --red-300-h: 0;
20242
- --red-300-s: 100%;
20243
- --red-300-l: 59.01960784%;
20404
+ --red-300-s: 88.8%;
20405
+ --red-300-l: 49.01960784%;
20244
20406
  --red-300-hsl: var(--red-300-h) var(--red-300-s) var(--red-300-l);
20245
20407
  --red-300: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--alpha, 100%));
20246
20408
  --red-400-h: 0;
20247
- --red-400-s: 81.21546961%;
20248
- --red-400-l: 35.49019608%;
20409
+ --red-400-s: 88.65979381%;
20410
+ --red-400-l: 38.03921569%;
20249
20411
  --red-400-hsl: var(--red-400-h) var(--red-400-s) var(--red-400-l);
20250
20412
  --red-400: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--alpha, 100%));
20251
20413
  --red-500-h: 0;
20252
- --red-500-s: 100%;
20253
- --red-500-l: 16.47058824%;
20414
+ --red-500-s: 89.58333333%;
20415
+ --red-500-l: 18.82352941%;
20254
20416
  --red-500-hsl: var(--red-500-h) var(--red-500-s) var(--red-500-l);
20255
20417
  --red-500: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--alpha, 100%));
20256
20418
  --blue-100-h: 210;
@@ -20303,18 +20465,18 @@ body {
20303
20465
  --tan-500-l: 7.05882353%;
20304
20466
  --tan-500-hsl: var(--tan-500-h) var(--tan-500-s) var(--tan-500-l);
20305
20467
  --tan-500: hsla(var(--tan-500-h) var(--tan-500-s) var(--tan-500-l) / var(--alpha, 100%));
20306
- --error-color: var(--red-400);
20307
- --error-color-hsl: var(--red-400-hsl);
20308
- --error-color-hover: var(--red-500);
20468
+ --error-color: var(--red-300);
20469
+ --error-color-hsl: var(--red-300-hsl);
20470
+ --error-color-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
20309
20471
  --warning-color: var(--fc-warning);
20310
- --warning-color-hsl: var(--yellow-500-hsl);
20472
+ --warning-color-hsl: var(--gold-500-hsl);
20311
20473
  --warning-color-hover: var(--fc-warning-hover);
20312
20474
  --success-color: var(--fc-success);
20313
20475
  --success-color-hsl: var(--green-500-hsl);
20314
20476
  --success-color-hover: var(--green-500);
20315
- --muted-color: var(--black-800);
20316
- --muted-color-hsl: var(--black-800-hsl);
20317
- --muted-color-hover: var(--black-800);
20477
+ --muted-color: var(--black-700);
20478
+ --muted-color-hsl: var(--black-700-hsl);
20479
+ --muted-color-hover: var(--black-700);
20318
20480
  --inverted-color: var(--fc-primary-inverted);
20319
20481
  --inverted-color-hsl: var(--black-100-hsl);
20320
20482
  --inverted-color-hover: var(--black-200);
@@ -20366,11 +20528,13 @@ body {
20366
20528
  --bs-focus-ring-inverted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
20367
20529
  --ttf-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
20368
20530
  --ttf-out: cubic-bezier(0.23, 1, 0.32, 1);
20531
+ --ttf-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
20369
20532
  --td0: 0s;
20370
20533
  --td50: 50ms;
20371
20534
  --td100: 100ms;
20372
20535
  --td150: 150ms;
20373
20536
  --td200: 200ms;
20537
+ --td300: 300ms;
20374
20538
  --bgg-pattern-blob-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQmxvYiBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fYmxvYkRhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xIDBhMSAxIDAgMDAtMSAxdjIuM2ExIDEgMCAwMDEgMWg0LjAyYy0uMDEzLjA2NS0uMDIuMTMyLS4wMi4ydjIuM0gxYTEgMSAwIDAwLTEgMXYyLjNhMSAxIDAgMDAxIDFoNC4wMmMtLjAxMy4wNjUtLjAyLjEzMi0uMDIuMnYyLjNIMWExIDEgMCAwMC0xIDF2Mi4zYTEgMSAwIDAwMSAxaDQuMDJjLS4wMTMuMDY1LS4wMi4xMzItLjAyLjJWMjBoOHYtMS45YTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4ydi0yLjNoNGExIDEgMCAwMDEtMXYtMi4zYTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4yVjcuOGg0YTEgMSAwIDAwMS0xVjQuNWExIDEgMCAwMC0xLTFINy45OGMuMDEzLS4wNjUuMDItLjEzMi4wMi0uMnYtMmg0YTEgMSAwIDAwMS0xVjBIMXoiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
20375
20539
  --bgg-pattern-chevrons-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ2hldnJvbnMgRGFyayIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2NoZXZyb25zRGFyayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTExLjAyNyAxLjMyNEMxMS42IDEuMTM0IDExLjk4OS42MDIgMTIgMEgwdjFsNiAyIDUuMDI3LTEuNjc2ek0wIDN2M2w2IDIgNS4wMjctMS42NzZhMS40MjMgMS40MjMgMCAxMC0uOS0yLjdMNiA1IDAgM3pNMCA4djNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTAgMCA4ek0wIDEzdjNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTVsLTYtMnpNMCAxOHYyaDEydi0uMDI2YzAtLjk3MS0uOTUyLTEuNjU3LTEuODczLTEuMzVMNiAyMGwtNi0yeiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
20376
20540
  --bgg-pattern-crosses-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NlcyBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fY3Jvc3Nlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMWExIDEgMCAwMC0xLTFIMHYyaDN2M0gwdjJoM3YzSDB2MmgzdjNIMHYyaDN2M2gydi0zaDJ2M2gydi0zaDJhMSAxIDAgMTAwLTJIOXYtM2gyYTEgMSAwIDEwMC0ySDlWN2gyYTEgMSAwIDEwMC0ySDlWMmgyYTEgMSAwIDAwMS0xek03IDJINXYzaDJWMnptMCA1SDV2M2gyVjd6bTAgNUg1djNoMnYtM3oiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
@@ -20473,9 +20637,9 @@ body {
20473
20637
  --fc-muted: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--alpha, 50%));
20474
20638
  --fc-placeholder: var(--black-500);
20475
20639
  --fc-disabled: var(--black-500);
20476
- --fc-error: var(--red-400);
20640
+ --fc-error: var(--red-300);
20477
20641
  --fc-success: #00671d;
20478
- --fc-warning: #683e00;
20642
+ --fc-warning: var(--gold-500);
20479
20643
  --fc-warning-hover: var(--black-900);
20480
20644
  --base--text-color: var(--fc-primary);
20481
20645
  --base--background-color: var(--white);
@@ -20499,10 +20663,6 @@ body {
20499
20663
  --focus-ring-error: hsla(var(--error-color-hsl) / 75%);
20500
20664
  --focus-ring-muted: var(--focus-ring);
20501
20665
  --focus-ring-inverted: hsla(var(--inverted-color-hsl) / 50%);
20502
- --input-button__padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
20503
- --input-button__text-size: var(--fs-200);
20504
- --input-button__line-height: var(--lh4);
20505
- --input-button__icon-size: 1.8rem;
20506
20666
  --primary-color-h: var(--purple-400-h);
20507
20667
  --primary-color-s: var(--purple-400-s);
20508
20668
  --primary-color-l: var(--purple-400-l);
@@ -20720,18 +20880,18 @@ body.theme-dark {
20720
20880
  --green-500-hsl: var(--green-500-h) var(--green-500-s) var(--green-500-l);
20721
20881
  --green-500: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(--alpha, 100%));
20722
20882
  --red-100-h: 0;
20723
- --red-100-s: 100%;
20724
- --red-100-l: 16.47058824%;
20883
+ --red-100-s: 89.58333333%;
20884
+ --red-100-l: 18.82352941%;
20725
20885
  --red-100-hsl: var(--red-100-h) var(--red-100-s) var(--red-100-l);
20726
20886
  --red-100: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--alpha, 100%));
20727
20887
  --red-200-h: 0;
20728
- --red-200-s: 81.21546961%;
20729
- --red-200-l: 35.49019608%;
20888
+ --red-200-s: 88.65979381%;
20889
+ --red-200-l: 38.03921569%;
20730
20890
  --red-200-hsl: var(--red-200-h) var(--red-200-s) var(--red-200-l);
20731
20891
  --red-200: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--alpha, 100%));
20732
20892
  --red-300-h: 0;
20733
- --red-300-s: 100%;
20734
- --red-300-l: 59.01960784%;
20893
+ --red-300-s: 88.8%;
20894
+ --red-300-l: 49.01960784%;
20735
20895
  --red-300-hsl: var(--red-300-h) var(--red-300-s) var(--red-300-l);
20736
20896
  --red-300: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--alpha, 100%));
20737
20897
  --red-400-h: 0;
@@ -20750,23 +20910,21 @@ body.theme-dark {
20750
20910
  .sm\:d-description {
20751
20911
  display: flex;
20752
20912
  box-sizing: border-box;
20753
- margin-bottom: calc(var(--space-300) + var(--space-200));
20754
- color: var(--black-600);
20913
+ color: var(--fc-tertiary);
20755
20914
  font-size: var(--fs-100);
20756
20915
  font-family: inherit;
20757
- line-height: var(--lh4);
20916
+ line-height: var(--lh-400);
20758
20917
  fill: currentColor;
20759
20918
  }
20760
20919
  .sm\:d-label + .d-description {
20761
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
20920
+ margin-top: calc(var(--space-300) * -1);
20921
+ margin-bottom: var(--space-300);
20762
20922
  }
20763
20923
  .sm\:d-description--lg {
20764
20924
  font-size: var(--fs-200);
20765
- line-height: var(--lh6);
20766
20925
  }
20767
20926
  .sm\:d-description--xl {
20768
20927
  font-size: var(--fs-200);
20769
- line-height: var(--lh6);
20770
20928
  }
20771
20929
  .sm\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
20772
20930
  border-top-left-radius: 0;
@@ -21109,9 +21267,12 @@ body.theme-dark {
21109
21267
  }
21110
21268
  .sm\:d-modal {
21111
21269
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
21270
+ --modal-dialog-padding: var(--space-600);
21112
21271
  --modal-dialog-color-background: var(--white);
21113
21272
  --modal-dialog-color-text: var(--fc-tertiary);
21114
21273
  --modal-header-color-text: var(--fc-secondary);
21274
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
21275
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
21115
21276
  position: fixed;
21116
21277
  top: 0;
21117
21278
  right: 0;
@@ -21151,16 +21312,20 @@ body.theme-dark {
21151
21312
  .sm\:d-modal__dialog {
21152
21313
  position: relative;
21153
21314
  z-index: var(--zi-hide);
21315
+ display: flex;
21316
+ flex-direction: column;
21317
+ gap: var(--space-500);
21154
21318
  width: 100%;
21155
21319
  max-width: calc(var(--size-300) * 157);
21156
21320
  max-height: 100%;
21321
+ padding: var(--modal-dialog-padding);
21157
21322
  overflow-y: auto;
21158
21323
  color: var(--modal-dialog-color-text);
21159
21324
  font-size: var(--fs-200);
21160
- line-height: var(--lh8);
21325
+ line-height: var(--lh-400);
21161
21326
  background-color: var(--modal-dialog-color-background);
21162
- border-radius: var(--br8);
21163
- box-shadow: var(--bs-card);
21327
+ border-radius: var(--size-500);
21328
+ box-shadow: var(--modal-dialog-shadow);
21164
21329
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
21165
21330
  backface-visibility: hidden;
21166
21331
  visibility: hidden;
@@ -21180,51 +21345,58 @@ body.theme-dark {
21180
21345
  --modal-footer-padding: calc(var(--space-300) * 6);
21181
21346
  display: flex;
21182
21347
  flex-direction: row-reverse;
21348
+ gap: var(--space-400);
21183
21349
  align-items: center;
21184
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
21185
- }
21186
- .sm\:d-modal__footer > :not(:first-child) {
21187
- margin-right: var(--space-300);
21188
- }
21189
- .sm\:d-modal__footer > :not(:last-child) {
21190
- margin-left: var(--space-300);
21191
21350
  }
21192
21351
  .sm\:d-modal__header {
21193
21352
  --modal-header-padding: calc(var(--space-300) * 6);
21194
21353
  margin: 0 !important;
21195
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
21196
21354
  color: var(--modal-header-color-text);
21197
- font-weight: var(--fw-bold);
21198
- font-size: var(--fs-300);
21199
- line-height: var(--lh4);
21355
+ font-weight: var(--fw-medium);
21356
+ font-size: var(--fs-400);
21357
+ line-height: var(--lh-100);
21200
21358
  }
21201
21359
  .sm\:d-modal__content {
21202
21360
  max-width: 75ch;
21203
- margin: calc(var(--space-300) * 3) 0;
21204
- padding: var(--space-300) calc(var(--space-300) * 6);
21205
21361
  }
21206
21362
  .sm\:d-modal__close {
21207
21363
  position: absolute;
21208
- top: var(--space-400);
21209
- right: var(--space-400);
21364
+ top: var(--space-500);
21365
+ right: var(--space-500);
21210
21366
  margin: 0 !important;
21211
21367
  }
21212
21368
  .sm\:d-modal__banner {
21369
+ --modal-banner-padding-y: var(--space-500);
21370
+ --modal-banner-padding-x: var(--space-600);
21371
+ --modal-banner-color-background: var(--gold-100);
21213
21372
  position: relative;
21214
21373
  box-sizing: border-box;
21215
21374
  width: 100%;
21216
21375
  max-width: calc(var(--size-300) * 157);
21217
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
21376
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
21377
+ color: var(--fc-primary);
21218
21378
  font-size: var(--fs-200);
21219
- line-height: var(--lh4);
21220
- background-color: var(--gold-100);
21221
- border-radius: var(--br8) var(--br8) 0 0;
21379
+ line-height: var(--lh-300);
21380
+ background-color: var(--modal-banner-color-background);
21381
+ border-radius: var(--size-500) var(--size-500) 0 0;
21382
+ box-shadow: var(--modal-dialog-shadow);
21383
+ }
21384
+ .sm\:d-modal__banner::before {
21385
+ position: absolute;
21386
+ right: 0;
21387
+ bottom: 0;
21388
+ left: 0;
21389
+ z-index: var(--zi-modal-element);
21390
+ height: var(--modal-banner-padding-y);
21391
+ background-color: var(--modal-banner-color-background);
21392
+ content: '';
21222
21393
  }
21223
21394
  .sm\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
21224
21395
  border-top-left-radius: 0;
21225
21396
  border-top-right-radius: 0;
21226
21397
  }
21227
21398
  .sm\:d-modal--full {
21399
+ --modal-dialog-padding: 0;
21228
21400
  padding: 0;
21229
21401
  overflow: hidden scroll;
21230
21402
  transform: unset !important;
@@ -22157,14 +22329,20 @@ body.theme-dark {
22157
22329
  .sm\:d-t0 {
22158
22330
  top: 0 !important;
22159
22331
  }
22332
+ .sm\:d-popover {
22333
+ --popover-color-background: var(--black-100);
22334
+ --popover-border-width: var(--size-100);
22335
+ --popover-border-radius: var(--size-400);
22336
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
22337
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
22338
+ }
22160
22339
  .sm\:d-popover__dialog {
22161
22340
  display: grid;
22162
- grid-template-rows: auto 1fr;
22341
+ grid-template-rows: 1fr;
22163
22342
  overflow: auto;
22164
- background-color: var(--white);
22165
- border-color: var(--black-400);
22166
- border-radius: var(--br8);
22167
- box-shadow: var(--bs-card);
22343
+ background-color: var(--popover-color-background);
22344
+ border-radius: var(--popover-border-radius);
22345
+ box-shadow: var(--popover-shadow);
22168
22346
  }
22169
22347
  .sm\:d-popover__dialog,
22170
22348
  .d-popover__dialog *,
@@ -22178,7 +22356,8 @@ body.theme-dark {
22178
22356
  .sm\:d-popover__content {
22179
22357
  overflow: auto;
22180
22358
  }
22181
- .sm\:d-popover__header-footer-base {
22359
+ .sm\:d-popover__header,
22360
+ .d-popover__footer {
22182
22361
  display: flex;
22183
22362
  align-items: center;
22184
22363
  justify-content: flex-end;
@@ -22191,30 +22370,10 @@ body.theme-dark {
22191
22370
  font-size: var(--fs-200);
22192
22371
  }
22193
22372
  .sm\:d-popover__header {
22194
- display: flex;
22195
- align-items: center;
22196
- justify-content: flex-end;
22197
- width: 100%;
22198
- min-height: var(--size48);
22199
- padding-top: calc(var(--space-300) + var(--space-200));
22200
- padding-bottom: calc(var(--space-300) + var(--space-200));
22201
- overflow: auto;
22202
- font-weight: var(--fw-semibold);
22203
- font-size: var(--fs-200);
22204
- border-bottom: var(--size-100) solid var(--black-300);
22373
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
22205
22374
  }
22206
22375
  .sm\:d-popover__footer {
22207
- display: flex;
22208
- align-items: center;
22209
- justify-content: flex-end;
22210
- width: 100%;
22211
- min-height: var(--size48);
22212
- padding-top: calc(var(--space-300) + var(--space-200));
22213
- padding-bottom: calc(var(--space-300) + var(--space-200));
22214
- overflow: auto;
22215
- font-weight: var(--fw-semibold);
22216
- font-size: var(--fs-200);
22217
- border-top: var(--size-100) solid var(--black-300);
22376
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
22218
22377
  }
22219
22378
  .sm\:d-presence {
22220
22379
  --presence-color-border-base: var(--black-100);
@@ -23063,23 +23222,21 @@ body.theme-dark {
23063
23222
  .md\:d-description {
23064
23223
  display: flex;
23065
23224
  box-sizing: border-box;
23066
- margin-bottom: calc(var(--space-300) + var(--space-200));
23067
- color: var(--black-600);
23225
+ color: var(--fc-tertiary);
23068
23226
  font-size: var(--fs-100);
23069
23227
  font-family: inherit;
23070
- line-height: var(--lh4);
23228
+ line-height: var(--lh-400);
23071
23229
  fill: currentColor;
23072
23230
  }
23073
23231
  .md\:d-label + .d-description {
23074
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
23232
+ margin-top: calc(var(--space-300) * -1);
23233
+ margin-bottom: var(--space-300);
23075
23234
  }
23076
23235
  .md\:d-description--lg {
23077
23236
  font-size: var(--fs-200);
23078
- line-height: var(--lh6);
23079
23237
  }
23080
23238
  .md\:d-description--xl {
23081
23239
  font-size: var(--fs-200);
23082
- line-height: var(--lh6);
23083
23240
  }
23084
23241
  .md\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
23085
23242
  border-top-left-radius: 0;
@@ -23422,9 +23579,12 @@ body.theme-dark {
23422
23579
  }
23423
23580
  .md\:d-modal {
23424
23581
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
23582
+ --modal-dialog-padding: var(--space-600);
23425
23583
  --modal-dialog-color-background: var(--white);
23426
23584
  --modal-dialog-color-text: var(--fc-tertiary);
23427
23585
  --modal-header-color-text: var(--fc-secondary);
23586
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
23587
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
23428
23588
  position: fixed;
23429
23589
  top: 0;
23430
23590
  right: 0;
@@ -23464,16 +23624,20 @@ body.theme-dark {
23464
23624
  .md\:d-modal__dialog {
23465
23625
  position: relative;
23466
23626
  z-index: var(--zi-hide);
23627
+ display: flex;
23628
+ flex-direction: column;
23629
+ gap: var(--space-500);
23467
23630
  width: 100%;
23468
23631
  max-width: calc(var(--size-300) * 157);
23469
23632
  max-height: 100%;
23633
+ padding: var(--modal-dialog-padding);
23470
23634
  overflow-y: auto;
23471
23635
  color: var(--modal-dialog-color-text);
23472
23636
  font-size: var(--fs-200);
23473
- line-height: var(--lh8);
23637
+ line-height: var(--lh-400);
23474
23638
  background-color: var(--modal-dialog-color-background);
23475
- border-radius: var(--br8);
23476
- box-shadow: var(--bs-card);
23639
+ border-radius: var(--size-500);
23640
+ box-shadow: var(--modal-dialog-shadow);
23477
23641
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
23478
23642
  backface-visibility: hidden;
23479
23643
  visibility: hidden;
@@ -23493,51 +23657,58 @@ body.theme-dark {
23493
23657
  --modal-footer-padding: calc(var(--space-300) * 6);
23494
23658
  display: flex;
23495
23659
  flex-direction: row-reverse;
23660
+ gap: var(--space-400);
23496
23661
  align-items: center;
23497
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
23498
- }
23499
- .md\:d-modal__footer > :not(:first-child) {
23500
- margin-right: var(--space-300);
23501
- }
23502
- .md\:d-modal__footer > :not(:last-child) {
23503
- margin-left: var(--space-300);
23504
23662
  }
23505
23663
  .md\:d-modal__header {
23506
23664
  --modal-header-padding: calc(var(--space-300) * 6);
23507
23665
  margin: 0 !important;
23508
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
23509
23666
  color: var(--modal-header-color-text);
23510
- font-weight: var(--fw-bold);
23511
- font-size: var(--fs-300);
23512
- line-height: var(--lh4);
23667
+ font-weight: var(--fw-medium);
23668
+ font-size: var(--fs-400);
23669
+ line-height: var(--lh-100);
23513
23670
  }
23514
23671
  .md\:d-modal__content {
23515
23672
  max-width: 75ch;
23516
- margin: calc(var(--space-300) * 3) 0;
23517
- padding: var(--space-300) calc(var(--space-300) * 6);
23518
23673
  }
23519
23674
  .md\:d-modal__close {
23520
23675
  position: absolute;
23521
- top: var(--space-400);
23522
- right: var(--space-400);
23676
+ top: var(--space-500);
23677
+ right: var(--space-500);
23523
23678
  margin: 0 !important;
23524
23679
  }
23525
23680
  .md\:d-modal__banner {
23681
+ --modal-banner-padding-y: var(--space-500);
23682
+ --modal-banner-padding-x: var(--space-600);
23683
+ --modal-banner-color-background: var(--gold-100);
23526
23684
  position: relative;
23527
23685
  box-sizing: border-box;
23528
23686
  width: 100%;
23529
23687
  max-width: calc(var(--size-300) * 157);
23530
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
23688
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
23689
+ color: var(--fc-primary);
23531
23690
  font-size: var(--fs-200);
23532
- line-height: var(--lh4);
23533
- background-color: var(--gold-100);
23534
- border-radius: var(--br8) var(--br8) 0 0;
23691
+ line-height: var(--lh-300);
23692
+ background-color: var(--modal-banner-color-background);
23693
+ border-radius: var(--size-500) var(--size-500) 0 0;
23694
+ box-shadow: var(--modal-dialog-shadow);
23695
+ }
23696
+ .md\:d-modal__banner::before {
23697
+ position: absolute;
23698
+ right: 0;
23699
+ bottom: 0;
23700
+ left: 0;
23701
+ z-index: var(--zi-modal-element);
23702
+ height: var(--modal-banner-padding-y);
23703
+ background-color: var(--modal-banner-color-background);
23704
+ content: '';
23535
23705
  }
23536
23706
  .md\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
23537
23707
  border-top-left-radius: 0;
23538
23708
  border-top-right-radius: 0;
23539
23709
  }
23540
23710
  .md\:d-modal--full {
23711
+ --modal-dialog-padding: 0;
23541
23712
  padding: 0;
23542
23713
  overflow: hidden scroll;
23543
23714
  transform: unset !important;
@@ -24470,14 +24641,20 @@ body.theme-dark {
24470
24641
  .md\:d-t0 {
24471
24642
  top: 0 !important;
24472
24643
  }
24644
+ .md\:d-popover {
24645
+ --popover-color-background: var(--black-100);
24646
+ --popover-border-width: var(--size-100);
24647
+ --popover-border-radius: var(--size-400);
24648
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
24649
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
24650
+ }
24473
24651
  .md\:d-popover__dialog {
24474
24652
  display: grid;
24475
- grid-template-rows: auto 1fr;
24653
+ grid-template-rows: 1fr;
24476
24654
  overflow: auto;
24477
- background-color: var(--white);
24478
- border-color: var(--black-400);
24479
- border-radius: var(--br8);
24480
- box-shadow: var(--bs-card);
24655
+ background-color: var(--popover-color-background);
24656
+ border-radius: var(--popover-border-radius);
24657
+ box-shadow: var(--popover-shadow);
24481
24658
  }
24482
24659
  .md\:d-popover__dialog,
24483
24660
  .d-popover__dialog *,
@@ -24491,7 +24668,8 @@ body.theme-dark {
24491
24668
  .md\:d-popover__content {
24492
24669
  overflow: auto;
24493
24670
  }
24494
- .md\:d-popover__header-footer-base {
24671
+ .md\:d-popover__header,
24672
+ .d-popover__footer {
24495
24673
  display: flex;
24496
24674
  align-items: center;
24497
24675
  justify-content: flex-end;
@@ -24504,30 +24682,10 @@ body.theme-dark {
24504
24682
  font-size: var(--fs-200);
24505
24683
  }
24506
24684
  .md\:d-popover__header {
24507
- display: flex;
24508
- align-items: center;
24509
- justify-content: flex-end;
24510
- width: 100%;
24511
- min-height: var(--size48);
24512
- padding-top: calc(var(--space-300) + var(--space-200));
24513
- padding-bottom: calc(var(--space-300) + var(--space-200));
24514
- overflow: auto;
24515
- font-weight: var(--fw-semibold);
24516
- font-size: var(--fs-200);
24517
- border-bottom: var(--size-100) solid var(--black-300);
24685
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
24518
24686
  }
24519
24687
  .md\:d-popover__footer {
24520
- display: flex;
24521
- align-items: center;
24522
- justify-content: flex-end;
24523
- width: 100%;
24524
- min-height: var(--size48);
24525
- padding-top: calc(var(--space-300) + var(--space-200));
24526
- padding-bottom: calc(var(--space-300) + var(--space-200));
24527
- overflow: auto;
24528
- font-weight: var(--fw-semibold);
24529
- font-size: var(--fs-200);
24530
- border-top: var(--size-100) solid var(--black-300);
24688
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
24531
24689
  }
24532
24690
  .md\:d-presence {
24533
24691
  --presence-color-border-base: var(--black-100);
@@ -25376,23 +25534,21 @@ body.theme-dark {
25376
25534
  .lg\:d-description {
25377
25535
  display: flex;
25378
25536
  box-sizing: border-box;
25379
- margin-bottom: calc(var(--space-300) + var(--space-200));
25380
- color: var(--black-600);
25537
+ color: var(--fc-tertiary);
25381
25538
  font-size: var(--fs-100);
25382
25539
  font-family: inherit;
25383
- line-height: var(--lh4);
25540
+ line-height: var(--lh-400);
25384
25541
  fill: currentColor;
25385
25542
  }
25386
25543
  .lg\:d-label + .d-description {
25387
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
25544
+ margin-top: calc(var(--space-300) * -1);
25545
+ margin-bottom: var(--space-300);
25388
25546
  }
25389
25547
  .lg\:d-description--lg {
25390
25548
  font-size: var(--fs-200);
25391
- line-height: var(--lh6);
25392
25549
  }
25393
25550
  .lg\:d-description--xl {
25394
25551
  font-size: var(--fs-200);
25395
- line-height: var(--lh6);
25396
25552
  }
25397
25553
  .lg\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
25398
25554
  border-top-left-radius: 0;
@@ -25735,9 +25891,12 @@ body.theme-dark {
25735
25891
  }
25736
25892
  .lg\:d-modal {
25737
25893
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
25894
+ --modal-dialog-padding: var(--space-600);
25738
25895
  --modal-dialog-color-background: var(--white);
25739
25896
  --modal-dialog-color-text: var(--fc-tertiary);
25740
25897
  --modal-header-color-text: var(--fc-secondary);
25898
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
25899
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
25741
25900
  position: fixed;
25742
25901
  top: 0;
25743
25902
  right: 0;
@@ -25777,16 +25936,20 @@ body.theme-dark {
25777
25936
  .lg\:d-modal__dialog {
25778
25937
  position: relative;
25779
25938
  z-index: var(--zi-hide);
25939
+ display: flex;
25940
+ flex-direction: column;
25941
+ gap: var(--space-500);
25780
25942
  width: 100%;
25781
25943
  max-width: calc(var(--size-300) * 157);
25782
25944
  max-height: 100%;
25945
+ padding: var(--modal-dialog-padding);
25783
25946
  overflow-y: auto;
25784
25947
  color: var(--modal-dialog-color-text);
25785
25948
  font-size: var(--fs-200);
25786
- line-height: var(--lh8);
25949
+ line-height: var(--lh-400);
25787
25950
  background-color: var(--modal-dialog-color-background);
25788
- border-radius: var(--br8);
25789
- box-shadow: var(--bs-card);
25951
+ border-radius: var(--size-500);
25952
+ box-shadow: var(--modal-dialog-shadow);
25790
25953
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
25791
25954
  backface-visibility: hidden;
25792
25955
  visibility: hidden;
@@ -25806,51 +25969,58 @@ body.theme-dark {
25806
25969
  --modal-footer-padding: calc(var(--space-300) * 6);
25807
25970
  display: flex;
25808
25971
  flex-direction: row-reverse;
25972
+ gap: var(--space-400);
25809
25973
  align-items: center;
25810
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
25811
- }
25812
- .lg\:d-modal__footer > :not(:first-child) {
25813
- margin-right: var(--space-300);
25814
- }
25815
- .lg\:d-modal__footer > :not(:last-child) {
25816
- margin-left: var(--space-300);
25817
25974
  }
25818
25975
  .lg\:d-modal__header {
25819
25976
  --modal-header-padding: calc(var(--space-300) * 6);
25820
25977
  margin: 0 !important;
25821
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
25822
25978
  color: var(--modal-header-color-text);
25823
- font-weight: var(--fw-bold);
25824
- font-size: var(--fs-300);
25825
- line-height: var(--lh4);
25979
+ font-weight: var(--fw-medium);
25980
+ font-size: var(--fs-400);
25981
+ line-height: var(--lh-100);
25826
25982
  }
25827
25983
  .lg\:d-modal__content {
25828
25984
  max-width: 75ch;
25829
- margin: calc(var(--space-300) * 3) 0;
25830
- padding: var(--space-300) calc(var(--space-300) * 6);
25831
25985
  }
25832
25986
  .lg\:d-modal__close {
25833
25987
  position: absolute;
25834
- top: var(--space-400);
25835
- right: var(--space-400);
25988
+ top: var(--space-500);
25989
+ right: var(--space-500);
25836
25990
  margin: 0 !important;
25837
25991
  }
25838
25992
  .lg\:d-modal__banner {
25993
+ --modal-banner-padding-y: var(--space-500);
25994
+ --modal-banner-padding-x: var(--space-600);
25995
+ --modal-banner-color-background: var(--gold-100);
25839
25996
  position: relative;
25840
25997
  box-sizing: border-box;
25841
25998
  width: 100%;
25842
25999
  max-width: calc(var(--size-300) * 157);
25843
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
26000
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
26001
+ color: var(--fc-primary);
25844
26002
  font-size: var(--fs-200);
25845
- line-height: var(--lh4);
25846
- background-color: var(--gold-100);
25847
- border-radius: var(--br8) var(--br8) 0 0;
26003
+ line-height: var(--lh-300);
26004
+ background-color: var(--modal-banner-color-background);
26005
+ border-radius: var(--size-500) var(--size-500) 0 0;
26006
+ box-shadow: var(--modal-dialog-shadow);
26007
+ }
26008
+ .lg\:d-modal__banner::before {
26009
+ position: absolute;
26010
+ right: 0;
26011
+ bottom: 0;
26012
+ left: 0;
26013
+ z-index: var(--zi-modal-element);
26014
+ height: var(--modal-banner-padding-y);
26015
+ background-color: var(--modal-banner-color-background);
26016
+ content: '';
25848
26017
  }
25849
26018
  .lg\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
25850
26019
  border-top-left-radius: 0;
25851
26020
  border-top-right-radius: 0;
25852
26021
  }
25853
26022
  .lg\:d-modal--full {
26023
+ --modal-dialog-padding: 0;
25854
26024
  padding: 0;
25855
26025
  overflow: hidden scroll;
25856
26026
  transform: unset !important;
@@ -26783,14 +26953,20 @@ body.theme-dark {
26783
26953
  .lg\:d-t0 {
26784
26954
  top: 0 !important;
26785
26955
  }
26956
+ .lg\:d-popover {
26957
+ --popover-color-background: var(--black-100);
26958
+ --popover-border-width: var(--size-100);
26959
+ --popover-border-radius: var(--size-400);
26960
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
26961
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
26962
+ }
26786
26963
  .lg\:d-popover__dialog {
26787
26964
  display: grid;
26788
- grid-template-rows: auto 1fr;
26965
+ grid-template-rows: 1fr;
26789
26966
  overflow: auto;
26790
- background-color: var(--white);
26791
- border-color: var(--black-400);
26792
- border-radius: var(--br8);
26793
- box-shadow: var(--bs-card);
26967
+ background-color: var(--popover-color-background);
26968
+ border-radius: var(--popover-border-radius);
26969
+ box-shadow: var(--popover-shadow);
26794
26970
  }
26795
26971
  .lg\:d-popover__dialog,
26796
26972
  .d-popover__dialog *,
@@ -26804,7 +26980,8 @@ body.theme-dark {
26804
26980
  .lg\:d-popover__content {
26805
26981
  overflow: auto;
26806
26982
  }
26807
- .lg\:d-popover__header-footer-base {
26983
+ .lg\:d-popover__header,
26984
+ .d-popover__footer {
26808
26985
  display: flex;
26809
26986
  align-items: center;
26810
26987
  justify-content: flex-end;
@@ -26817,30 +26994,10 @@ body.theme-dark {
26817
26994
  font-size: var(--fs-200);
26818
26995
  }
26819
26996
  .lg\:d-popover__header {
26820
- display: flex;
26821
- align-items: center;
26822
- justify-content: flex-end;
26823
- width: 100%;
26824
- min-height: var(--size48);
26825
- padding-top: calc(var(--space-300) + var(--space-200));
26826
- padding-bottom: calc(var(--space-300) + var(--space-200));
26827
- overflow: auto;
26828
- font-weight: var(--fw-semibold);
26829
- font-size: var(--fs-200);
26830
- border-bottom: var(--size-100) solid var(--black-300);
26997
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
26831
26998
  }
26832
26999
  .lg\:d-popover__footer {
26833
- display: flex;
26834
- align-items: center;
26835
- justify-content: flex-end;
26836
- width: 100%;
26837
- min-height: var(--size48);
26838
- padding-top: calc(var(--space-300) + var(--space-200));
26839
- padding-bottom: calc(var(--space-300) + var(--space-200));
26840
- overflow: auto;
26841
- font-weight: var(--fw-semibold);
26842
- font-size: var(--fs-200);
26843
- border-top: var(--size-100) solid var(--black-300);
27000
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
26844
27001
  }
26845
27002
  .lg\:d-presence {
26846
27003
  --presence-color-border-base: var(--black-100);
@@ -27689,23 +27846,21 @@ body.theme-dark {
27689
27846
  .xl\:d-description {
27690
27847
  display: flex;
27691
27848
  box-sizing: border-box;
27692
- margin-bottom: calc(var(--space-300) + var(--space-200));
27693
- color: var(--black-600);
27849
+ color: var(--fc-tertiary);
27694
27850
  font-size: var(--fs-100);
27695
27851
  font-family: inherit;
27696
- line-height: var(--lh4);
27852
+ line-height: var(--lh-400);
27697
27853
  fill: currentColor;
27698
27854
  }
27699
27855
  .xl\:d-label + .d-description {
27700
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
27856
+ margin-top: calc(var(--space-300) * -1);
27857
+ margin-bottom: var(--space-300);
27701
27858
  }
27702
27859
  .xl\:d-description--lg {
27703
27860
  font-size: var(--fs-200);
27704
- line-height: var(--lh6);
27705
27861
  }
27706
27862
  .xl\:d-description--xl {
27707
27863
  font-size: var(--fs-200);
27708
- line-height: var(--lh6);
27709
27864
  }
27710
27865
  .xl\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
27711
27866
  border-top-left-radius: 0;
@@ -28048,9 +28203,12 @@ body.theme-dark {
28048
28203
  }
28049
28204
  .xl\:d-modal {
28050
28205
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
28206
+ --modal-dialog-padding: var(--space-600);
28051
28207
  --modal-dialog-color-background: var(--white);
28052
28208
  --modal-dialog-color-text: var(--fc-tertiary);
28053
28209
  --modal-header-color-text: var(--fc-secondary);
28210
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
28211
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
28054
28212
  position: fixed;
28055
28213
  top: 0;
28056
28214
  right: 0;
@@ -28090,16 +28248,20 @@ body.theme-dark {
28090
28248
  .xl\:d-modal__dialog {
28091
28249
  position: relative;
28092
28250
  z-index: var(--zi-hide);
28251
+ display: flex;
28252
+ flex-direction: column;
28253
+ gap: var(--space-500);
28093
28254
  width: 100%;
28094
28255
  max-width: calc(var(--size-300) * 157);
28095
28256
  max-height: 100%;
28257
+ padding: var(--modal-dialog-padding);
28096
28258
  overflow-y: auto;
28097
28259
  color: var(--modal-dialog-color-text);
28098
28260
  font-size: var(--fs-200);
28099
- line-height: var(--lh8);
28261
+ line-height: var(--lh-400);
28100
28262
  background-color: var(--modal-dialog-color-background);
28101
- border-radius: var(--br8);
28102
- box-shadow: var(--bs-card);
28263
+ border-radius: var(--size-500);
28264
+ box-shadow: var(--modal-dialog-shadow);
28103
28265
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
28104
28266
  backface-visibility: hidden;
28105
28267
  visibility: hidden;
@@ -28119,51 +28281,58 @@ body.theme-dark {
28119
28281
  --modal-footer-padding: calc(var(--space-300) * 6);
28120
28282
  display: flex;
28121
28283
  flex-direction: row-reverse;
28284
+ gap: var(--space-400);
28122
28285
  align-items: center;
28123
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
28124
- }
28125
- .xl\:d-modal__footer > :not(:first-child) {
28126
- margin-right: var(--space-300);
28127
- }
28128
- .xl\:d-modal__footer > :not(:last-child) {
28129
- margin-left: var(--space-300);
28130
28286
  }
28131
28287
  .xl\:d-modal__header {
28132
28288
  --modal-header-padding: calc(var(--space-300) * 6);
28133
28289
  margin: 0 !important;
28134
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
28135
28290
  color: var(--modal-header-color-text);
28136
- font-weight: var(--fw-bold);
28137
- font-size: var(--fs-300);
28138
- line-height: var(--lh4);
28291
+ font-weight: var(--fw-medium);
28292
+ font-size: var(--fs-400);
28293
+ line-height: var(--lh-100);
28139
28294
  }
28140
28295
  .xl\:d-modal__content {
28141
28296
  max-width: 75ch;
28142
- margin: calc(var(--space-300) * 3) 0;
28143
- padding: var(--space-300) calc(var(--space-300) * 6);
28144
28297
  }
28145
28298
  .xl\:d-modal__close {
28146
28299
  position: absolute;
28147
- top: var(--space-400);
28148
- right: var(--space-400);
28300
+ top: var(--space-500);
28301
+ right: var(--space-500);
28149
28302
  margin: 0 !important;
28150
28303
  }
28151
28304
  .xl\:d-modal__banner {
28305
+ --modal-banner-padding-y: var(--space-500);
28306
+ --modal-banner-padding-x: var(--space-600);
28307
+ --modal-banner-color-background: var(--gold-100);
28152
28308
  position: relative;
28153
28309
  box-sizing: border-box;
28154
28310
  width: 100%;
28155
28311
  max-width: calc(var(--size-300) * 157);
28156
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
28312
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
28313
+ color: var(--fc-primary);
28157
28314
  font-size: var(--fs-200);
28158
- line-height: var(--lh4);
28159
- background-color: var(--gold-100);
28160
- border-radius: var(--br8) var(--br8) 0 0;
28315
+ line-height: var(--lh-300);
28316
+ background-color: var(--modal-banner-color-background);
28317
+ border-radius: var(--size-500) var(--size-500) 0 0;
28318
+ box-shadow: var(--modal-dialog-shadow);
28319
+ }
28320
+ .xl\:d-modal__banner::before {
28321
+ position: absolute;
28322
+ right: 0;
28323
+ bottom: 0;
28324
+ left: 0;
28325
+ z-index: var(--zi-modal-element);
28326
+ height: var(--modal-banner-padding-y);
28327
+ background-color: var(--modal-banner-color-background);
28328
+ content: '';
28161
28329
  }
28162
28330
  .xl\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
28163
28331
  border-top-left-radius: 0;
28164
28332
  border-top-right-radius: 0;
28165
28333
  }
28166
28334
  .xl\:d-modal--full {
28335
+ --modal-dialog-padding: 0;
28167
28336
  padding: 0;
28168
28337
  overflow: hidden scroll;
28169
28338
  transform: unset !important;
@@ -29096,14 +29265,20 @@ body.theme-dark {
29096
29265
  .xl\:d-t0 {
29097
29266
  top: 0 !important;
29098
29267
  }
29268
+ .xl\:d-popover {
29269
+ --popover-color-background: var(--black-100);
29270
+ --popover-border-width: var(--size-100);
29271
+ --popover-border-radius: var(--size-400);
29272
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
29273
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
29274
+ }
29099
29275
  .xl\:d-popover__dialog {
29100
29276
  display: grid;
29101
- grid-template-rows: auto 1fr;
29277
+ grid-template-rows: 1fr;
29102
29278
  overflow: auto;
29103
- background-color: var(--white);
29104
- border-color: var(--black-400);
29105
- border-radius: var(--br8);
29106
- box-shadow: var(--bs-card);
29279
+ background-color: var(--popover-color-background);
29280
+ border-radius: var(--popover-border-radius);
29281
+ box-shadow: var(--popover-shadow);
29107
29282
  }
29108
29283
  .xl\:d-popover__dialog,
29109
29284
  .d-popover__dialog *,
@@ -29117,7 +29292,8 @@ body.theme-dark {
29117
29292
  .xl\:d-popover__content {
29118
29293
  overflow: auto;
29119
29294
  }
29120
- .xl\:d-popover__header-footer-base {
29295
+ .xl\:d-popover__header,
29296
+ .d-popover__footer {
29121
29297
  display: flex;
29122
29298
  align-items: center;
29123
29299
  justify-content: flex-end;
@@ -29130,30 +29306,10 @@ body.theme-dark {
29130
29306
  font-size: var(--fs-200);
29131
29307
  }
29132
29308
  .xl\:d-popover__header {
29133
- display: flex;
29134
- align-items: center;
29135
- justify-content: flex-end;
29136
- width: 100%;
29137
- min-height: var(--size48);
29138
- padding-top: calc(var(--space-300) + var(--space-200));
29139
- padding-bottom: calc(var(--space-300) + var(--space-200));
29140
- overflow: auto;
29141
- font-weight: var(--fw-semibold);
29142
- font-size: var(--fs-200);
29143
- border-bottom: var(--size-100) solid var(--black-300);
29309
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
29144
29310
  }
29145
29311
  .xl\:d-popover__footer {
29146
- display: flex;
29147
- align-items: center;
29148
- justify-content: flex-end;
29149
- width: 100%;
29150
- min-height: var(--size48);
29151
- padding-top: calc(var(--space-300) + var(--space-200));
29152
- padding-bottom: calc(var(--space-300) + var(--space-200));
29153
- overflow: auto;
29154
- font-weight: var(--fw-semibold);
29155
- font-size: var(--fs-200);
29156
- border-top: var(--size-100) solid var(--black-300);
29312
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
29157
29313
  }
29158
29314
  .xl\:d-presence {
29159
29315
  --presence-color-border-base: var(--black-100);