@dialpad/dialtone 7.10.4 → 7.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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 +54 -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 +771 -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,19 @@ 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
+ border-radius: var(--popover-border-radius);
2516
+ box-shadow: var(--popover-shadow);
2357
2517
  }
2358
2518
  .d-popover__dialog,
2359
2519
  .d-popover__dialog *,
@@ -2367,7 +2527,8 @@ legend .d-label {
2367
2527
  .d-popover__content {
2368
2528
  overflow: auto;
2369
2529
  }
2370
- .d-popover__header-footer-base {
2530
+ .d-popover__header,
2531
+ .d-popover__footer {
2371
2532
  display: flex;
2372
2533
  align-items: center;
2373
2534
  justify-content: flex-end;
@@ -2380,30 +2541,10 @@ legend .d-label {
2380
2541
  font-size: var(--fs-200);
2381
2542
  }
2382
2543
  .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);
2544
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
2394
2545
  }
2395
2546
  .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);
2547
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
2407
2548
  }
2408
2549
  .d-checkbox,
2409
2550
  .d-radio {
@@ -2676,123 +2817,65 @@ legend .d-label {
2676
2817
  }
2677
2818
  .d-select {
2678
2819
  --select-color-border: var(--black-500);
2679
- --select-color-background: var(--white);
2680
- --select-color-text: var(--black-800);
2820
+ --select-notch-position-right: calc(var(--size-300) * 2);
2681
2821
  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);
2822
+ width: stretch;
2690
2823
  }
2691
- .d-select::before,
2692
2824
  .d-select::after {
2825
+ --select-arrow-size: calc(var(--size-300) * 3.5);
2693
2826
  position: absolute;
2694
- right: 0.75em;
2827
+ top: 50%;
2828
+ right: var(--select-notch-position-right);
2695
2829
  z-index: var(--zi-selected);
2696
- border-color: var(--black-900) transparent;
2697
- border-style: solid;
2698
- border-width: 0.25em;
2830
+ width: var(--select-arrow-size);
2831
+ height: var(--select-arrow-size);
2832
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE0NiA3LjE0NmEuNS41IDAgMCAxIC43MDggMEw2IDkuMjkzbDIuMTQ2LTIuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTIuNSAyLjVhLjUuNSAwIDAgMS0uNzA4IDBsLTIuNS0yLjVhLjUuNSAwIDAgMSAwLS43MDhabTIuNS01LjVhLjUuNSAwIDAgMSAuNzA4IDBsMi41IDIuNWEuNS41IDAgMSAxLS43MDguNzA4TDYgMi43MDcgMy44NTQgNC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhsMi41LTIuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
2833
+ background-repeat: no-repeat;
2834
+ background-size: 100%;
2835
+ transform: translateY(-50%);
2699
2836
  content: '';
2700
2837
  pointer-events: none;
2701
2838
  }
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
2839
  .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;
2840
+ --select-color-border: var(--input-color-border);
2841
+ --select-notch-padding-right: calc(var(--space-300) * 6);
2771
2842
  --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);
2843
+ --input-color-border: hsla(var(--black-900-hsl) / 9%);
2844
+ --input-color-background: hsla(var(--black-900-hsl) / 3%);
2845
+ --input-color-background-disabled: hsla(var(--black-900-hsl) / 12%);
2846
+ --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
2847
+ --input-border-radius: var(--size-400);
2848
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
2849
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2850
+ --input-color-text: var(--fc-secondary);
2851
+ --input-font-size: var(--fs-200);
2852
+ --input-line-height: var(--lh-200);
2775
2853
  position: relative;
2776
2854
  display: inline-flex;
2777
2855
  flex: 1 0%;
2778
2856
  box-sizing: border-box;
2779
2857
  width: 100%;
2780
2858
  min-width: 0;
2781
- padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
2859
+ padding: var(--input-padding-y) var(--input-padding-x);
2782
2860
  color: var(--input-color-text);
2783
2861
  font-weight: inherit;
2784
- font-size: var(--fs-200);
2862
+ font-size: var(--input-font-size);
2785
2863
  font-family: inherit;
2786
- line-height: var(--lh4);
2864
+ line-height: var(--input-line-height);
2787
2865
  background-color: var(--input-color-background);
2788
- border: 1px solid var(--input-color-border);
2789
- border-radius: var(--base--corner-radius);
2866
+ border: var(--input-border-width) solid var(--input-color-border);
2867
+ border-radius: var(--input-border-radius);
2790
2868
  outline: none;
2791
2869
  box-shadow: none;
2792
2870
  transition-timing-function: var(--ttf-in-out);
2793
2871
  transition-duration: 100ms;
2794
2872
  transition-property: border, box-shadow, background-color;
2795
- --select-color-border: var(--black-600);
2873
+ appearance: none;
2874
+ padding-right: var(--select-notch-padding-right);
2875
+ }
2876
+ .bg-test .d-select__input {
2877
+ --input-color-border: var(--black-300);
2878
+ --input-color-background: var(--black-100);
2796
2879
  }
2797
2880
  .d-select__input::placeholder {
2798
2881
  color: var(--fc-placeholder);
@@ -2808,8 +2891,8 @@ legend .d-label {
2808
2891
  }
2809
2892
  .d-select__input[disabled],
2810
2893
  .d-select__input[read-only] {
2811
- --input-color-border: var(--black-400) !important;
2812
- --input-color-background: var(--black-300);
2894
+ --input-color-border: transparent !important;
2895
+ --input-color-background: var(--input-color-background-disabled);
2813
2896
  --input-color-text: var(--fc-disabled);
2814
2897
  }
2815
2898
  .d-select__input[disabled]:focus,
@@ -2825,14 +2908,27 @@ legend .d-label {
2825
2908
  .d-select__input[disabled] {
2826
2909
  cursor: not-allowed;
2827
2910
  }
2911
+ .d-select__input::-moz-focus-inner {
2912
+ outline: none !important;
2913
+ }
2914
+ .d-select__input:-moz-focusring {
2915
+ color: transparent;
2916
+ text-shadow: 0 0 0 var(--black-900);
2917
+ }
2918
+ .d-select__input::-ms-expand {
2919
+ display: none;
2920
+ }
2828
2921
  .d-select__input:focus {
2829
2922
  --select-color-border: var(--purple-400);
2830
2923
  box-shadow: var(--bs-focus-ring);
2831
2924
  }
2832
- .d-select__input:disabled {
2925
+ .d-select__input[disabled],
2926
+ .d-select__input[read-only] {
2833
2927
  color: var(--fc-disabled);
2834
- background: var(--black-300);
2835
- border: 1px solid var(--black-400);
2928
+ background: var(--input-color-background-disabled);
2929
+ border-color: transparent;
2930
+ border-style: solid;
2931
+ border-width: var(--input-border-width);
2836
2932
  }
2837
2933
  .d-select__input::-moz-focus-inner {
2838
2934
  outline: none !important;
@@ -2844,30 +2940,79 @@ legend .d-label {
2844
2940
  .d-select__input::-ms-expand {
2845
2941
  display: none;
2846
2942
  }
2943
+ .d-select--xs .d-select__input {
2944
+ --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
2945
+ --input-padding-x: calc(var(--space-400) - var(--input-border-width));
2946
+ --input-font-size: var(--fs-100);
2947
+ --input-border-radius: var(--size-300);
2948
+ }
2949
+ .d-select--xs .d-select__input .d-btn__icon {
2950
+ width: 1.4rem;
2951
+ height: 1.4rem;
2952
+ }
2953
+ .d-select--sm .d-select__input {
2954
+ --input-padding-y: calc(var(--space-400) - var(--input-border-width));
2955
+ --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2956
+ --input-font-size: var(--fs-100);
2957
+ }
2958
+ .d-select--sm .d-select__input .d-btn__icon {
2959
+ width: 1.6rem;
2960
+ height: 1.6rem;
2961
+ }
2962
+ .d-select--lg .d-select__input {
2963
+ --input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
2964
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
2965
+ --input-font-size: var(--fs-300);
2966
+ --input-border-radius: calc(var(--size-300) * 3);
2967
+ --select-notch-padding-right: calc(var(--space-300) * 9);
2968
+ }
2969
+ .d-select--lg .d-select__input .d-btn__icon {
2970
+ width: 2rem;
2971
+ height: 2rem;
2972
+ }
2973
+ .d-select--lg::after {
2974
+ --select-arrow-size: calc(var(--size-300) * 4.5);
2975
+ --select-notch-position-right: calc(var(--size-300) * 3);
2976
+ }
2977
+ .d-select--xl .d-select__input {
2978
+ --input-padding-y: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
2979
+ --input-padding-x: calc(var(--space-500) - var(--input-border-width));
2980
+ --input-font-size: var(--fs-400);
2981
+ --input-border-radius: var(--size-500);
2982
+ --select-notch-padding-right: calc(var(--space-300) * 9);
2983
+ }
2984
+ .d-select--xl .d-select__input .d-btn__icon {
2985
+ width: 2.4rem;
2986
+ height: 2.4rem;
2987
+ }
2988
+ .d-select--xl::after {
2989
+ --select-arrow-size: calc(var(--size-300) * 4.5);
2990
+ --select-notch-position-right: calc(var(--size-300) * 3);
2991
+ }
2847
2992
  .d-select__input--success {
2848
- --select-color-border: var(--success-color);
2993
+ --input-color-border: var(--success-color);
2849
2994
  }
2850
2995
  .d-select__input--success:focus {
2851
- --select-color-border: var(--success-color);
2996
+ --input-color-border: var(--success-color);
2852
2997
  box-shadow: var(--bs-focus-ring-success) !important;
2853
2998
  }
2854
2999
  .d-select__input--error {
2855
- --select-color-border: var(--error-color);
3000
+ --input-color-border: var(--error-color);
2856
3001
  }
2857
3002
  .d-select__input--error:focus {
2858
- --select-color-border: var(--error-color);
3003
+ --input-color-border: var(--error-color);
2859
3004
  box-shadow: var(--bs-focus-ring-error) !important;
2860
3005
  }
2861
3006
  .d-select__input--warning {
2862
- --select-color-border: var(--warning-color);
3007
+ --input-color-border: var(--gold-400);
2863
3008
  }
2864
3009
  .d-select__input--warning:focus {
2865
- --select-color-border: var(--warning-color);
3010
+ --input-color-border: var(--warning-color);
2866
3011
  box-shadow: var(--bs-focus-ring-warning) !important;
2867
3012
  }
2868
3013
  .d-select--disabled::before,
2869
3014
  .d-select--disabled::after {
2870
- border-color: var(--black-500) transparent;
3015
+ opacity: 0.33;
2871
3016
  }
2872
3017
  .skeleton-placeholder {
2873
3018
  display: flex;
@@ -3073,15 +3218,22 @@ legend .d-label {
3073
3218
  .d-tooltip {
3074
3219
  --tooltip-color-background: var(--black-800);
3075
3220
  --tooltip-color-text: var(--white);
3221
+ --tooltip-font-weight: var(--fw-medium);
3222
+ --tooltip-line-height: var(--lh-300);
3223
+ --tooltip-padding-y: var(--space-400);
3224
+ --tooltip-padding-x: calc(var(--space-300) * 3);
3225
+ --tooltip-border-radius: var(--size-300);
3076
3226
  z-index: var(--zi-tooltip);
3077
3227
  max-width: calc(var(--size-300) * 54);
3078
- padding: var(--space-400);
3228
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
3079
3229
  color: var(--tooltip-color-text);
3230
+ font-weight: var(--tooltip-font-weight);
3080
3231
  font-size: var(--fs-100);
3081
- line-height: var(--lh-300);
3232
+ line-height: var(--tooltip-line-height);
3233
+ letter-spacing: calc(var(--size-100) * 0.25);
3082
3234
  text-align: center;
3083
3235
  background-color: var(--tooltip-color-background);
3084
- border-radius: var(--size-300);
3236
+ border-radius: var(--tooltip-border-radius);
3085
3237
  }
3086
3238
  .d-tooltip::after {
3087
3239
  position: absolute;
@@ -10198,27 +10350,10 @@ body.theme-dark .d\:d-divide-red-500 > * + * {
10198
10350
  body.theme-dark .d\:d-bgc-red-500 {
10199
10351
  --bgo: 100%;
10200
10352
  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 {
10353
+ }
10354
+ .d-fc-red-400,
10355
+ .h\:d-fc-red-400:hover,
10356
+ .f\:d-fc-red-400:focus {
10222
10357
  --fco: 100%;
10223
10358
  color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--fco)) !important;
10224
10359
  }
@@ -10316,7 +10451,24 @@ body.theme-dark .d\:d-bgc-red-400 {
10316
10451
  }
10317
10452
  .d-fc-red-300,
10318
10453
  .h\:d-fc-red-300:hover,
10319
- .f\:d-fc-red-300:focus {
10454
+ .f\:d-fc-red-300:focus,
10455
+ .d-fc-error,
10456
+ .h\:d-fc-error:hover,
10457
+ .f\:d-fc-error:focus,
10458
+ .f\:d-fc-error:focus-within,
10459
+ .fv\:d-fc-error.focus-visible.js-focus-visible,
10460
+ .js-focus-visible .fv\:d-fc-error.focus-visible {
10461
+ --fco: 100%;
10462
+ color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10463
+ }
10464
+ .d-fc-red-300,
10465
+ .h\:d-fc-red-300:hover,
10466
+ .f\:d-fc-red-300:focus,
10467
+ .d-fc-error,
10468
+ .h\:d-fc-error:hover,
10469
+ .f\:d-fc-error:focus,
10470
+ .f\:d-fc-error:focus-within,
10471
+ .fv\:d-fc-error:focus-visible {
10320
10472
  --fco: 100%;
10321
10473
  color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10322
10474
  }
@@ -14550,12 +14702,18 @@ body.theme-dark .d\:d-bgg-to-0 {
14550
14702
  .d-td200 {
14551
14703
  transition-duration: var(--td200) !important;
14552
14704
  }
14705
+ .d-td300 {
14706
+ transition-duration: var(--td300) !important;
14707
+ }
14553
14708
  .d-ttf-in-out {
14554
14709
  transition-timing-function: var(--ttf-in-out) !important;
14555
14710
  }
14556
14711
  .d-ttf-out {
14557
14712
  transition-timing-function: var(--ttf-out) !important;
14558
14713
  }
14714
+ .ttf-out-quint {
14715
+ transition-timing-function: var(--ttf-out-quint) !important;
14716
+ }
14559
14717
  .d-tp-all {
14560
14718
  transition-property: all !important;
14561
14719
  }
@@ -14589,6 +14747,9 @@ body.theme-dark .d\:d-bgg-to-0 {
14589
14747
  .d-t-delay200 {
14590
14748
  transition-delay: var(--td200) !important;
14591
14749
  }
14750
+ .d-t-delay300 {
14751
+ transition-delay: var(--td300) !important;
14752
+ }
14592
14753
  .d-ac-center {
14593
14754
  align-content: center !important;
14594
14755
  }
@@ -20239,18 +20400,18 @@ body {
20239
20400
  --red-200-hsl: var(--red-200-h) var(--red-200-s) var(--red-200-l);
20240
20401
  --red-200: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--alpha, 100%));
20241
20402
  --red-300-h: 0;
20242
- --red-300-s: 100%;
20243
- --red-300-l: 59.01960784%;
20403
+ --red-300-s: 88.8%;
20404
+ --red-300-l: 49.01960784%;
20244
20405
  --red-300-hsl: var(--red-300-h) var(--red-300-s) var(--red-300-l);
20245
20406
  --red-300: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--alpha, 100%));
20246
20407
  --red-400-h: 0;
20247
- --red-400-s: 81.21546961%;
20248
- --red-400-l: 35.49019608%;
20408
+ --red-400-s: 88.65979381%;
20409
+ --red-400-l: 38.03921569%;
20249
20410
  --red-400-hsl: var(--red-400-h) var(--red-400-s) var(--red-400-l);
20250
20411
  --red-400: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--alpha, 100%));
20251
20412
  --red-500-h: 0;
20252
- --red-500-s: 100%;
20253
- --red-500-l: 16.47058824%;
20413
+ --red-500-s: 89.58333333%;
20414
+ --red-500-l: 18.82352941%;
20254
20415
  --red-500-hsl: var(--red-500-h) var(--red-500-s) var(--red-500-l);
20255
20416
  --red-500: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--alpha, 100%));
20256
20417
  --blue-100-h: 210;
@@ -20303,18 +20464,18 @@ body {
20303
20464
  --tan-500-l: 7.05882353%;
20304
20465
  --tan-500-hsl: var(--tan-500-h) var(--tan-500-s) var(--tan-500-l);
20305
20466
  --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);
20467
+ --error-color: var(--red-300);
20468
+ --error-color-hsl: var(--red-300-hsl);
20469
+ --error-color-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
20309
20470
  --warning-color: var(--fc-warning);
20310
- --warning-color-hsl: var(--yellow-500-hsl);
20471
+ --warning-color-hsl: var(--gold-500-hsl);
20311
20472
  --warning-color-hover: var(--fc-warning-hover);
20312
20473
  --success-color: var(--fc-success);
20313
20474
  --success-color-hsl: var(--green-500-hsl);
20314
20475
  --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);
20476
+ --muted-color: var(--black-700);
20477
+ --muted-color-hsl: var(--black-700-hsl);
20478
+ --muted-color-hover: var(--black-700);
20318
20479
  --inverted-color: var(--fc-primary-inverted);
20319
20480
  --inverted-color-hsl: var(--black-100-hsl);
20320
20481
  --inverted-color-hover: var(--black-200);
@@ -20366,11 +20527,13 @@ body {
20366
20527
  --bs-focus-ring-inverted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
20367
20528
  --ttf-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
20368
20529
  --ttf-out: cubic-bezier(0.23, 1, 0.32, 1);
20530
+ --ttf-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
20369
20531
  --td0: 0s;
20370
20532
  --td50: 50ms;
20371
20533
  --td100: 100ms;
20372
20534
  --td150: 150ms;
20373
20535
  --td200: 200ms;
20536
+ --td300: 300ms;
20374
20537
  --bgg-pattern-blob-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQmxvYiBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fYmxvYkRhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xIDBhMSAxIDAgMDAtMSAxdjIuM2ExIDEgMCAwMDEgMWg0LjAyYy0uMDEzLjA2NS0uMDIuMTMyLS4wMi4ydjIuM0gxYTEgMSAwIDAwLTEgMXYyLjNhMSAxIDAgMDAxIDFoNC4wMmMtLjAxMy4wNjUtLjAyLjEzMi0uMDIuMnYyLjNIMWExIDEgMCAwMC0xIDF2Mi4zYTEgMSAwIDAwMSAxaDQuMDJjLS4wMTMuMDY1LS4wMi4xMzItLjAyLjJWMjBoOHYtMS45YTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4ydi0yLjNoNGExIDEgMCAwMDEtMXYtMi4zYTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4yVjcuOGg0YTEgMSAwIDAwMS0xVjQuNWExIDEgMCAwMC0xLTFINy45OGMuMDEzLS4wNjUuMDItLjEzMi4wMi0uMnYtMmg0YTEgMSAwIDAwMS0xVjBIMXoiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
20375
20538
  --bgg-pattern-chevrons-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ2hldnJvbnMgRGFyayIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2NoZXZyb25zRGFyayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTExLjAyNyAxLjMyNEMxMS42IDEuMTM0IDExLjk4OS42MDIgMTIgMEgwdjFsNiAyIDUuMDI3LTEuNjc2ek0wIDN2M2w2IDIgNS4wMjctMS42NzZhMS40MjMgMS40MjMgMCAxMC0uOS0yLjdMNiA1IDAgM3pNMCA4djNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTAgMCA4ek0wIDEzdjNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTVsLTYtMnpNMCAxOHYyaDEydi0uMDI2YzAtLjk3MS0uOTUyLTEuNjU3LTEuODczLTEuMzVMNiAyMGwtNi0yeiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
20376
20539
  --bgg-pattern-crosses-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NlcyBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fY3Jvc3Nlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMWExIDEgMCAwMC0xLTFIMHYyaDN2M0gwdjJoM3YzSDB2MmgzdjNIMHYyaDN2M2gydi0zaDJ2M2gydi0zaDJhMSAxIDAgMTAwLTJIOXYtM2gyYTEgMSAwIDEwMC0ySDlWN2gyYTEgMSAwIDEwMC0ySDlWMmgyYTEgMSAwIDAwMS0xek03IDJINXYzaDJWMnptMCA1SDV2M2gyVjd6bTAgNUg1djNoMnYtM3oiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
@@ -20473,9 +20636,9 @@ body {
20473
20636
  --fc-muted: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--alpha, 50%));
20474
20637
  --fc-placeholder: var(--black-500);
20475
20638
  --fc-disabled: var(--black-500);
20476
- --fc-error: var(--red-400);
20639
+ --fc-error: var(--red-300);
20477
20640
  --fc-success: #00671d;
20478
- --fc-warning: #683e00;
20641
+ --fc-warning: var(--gold-500);
20479
20642
  --fc-warning-hover: var(--black-900);
20480
20643
  --base--text-color: var(--fc-primary);
20481
20644
  --base--background-color: var(--white);
@@ -20499,10 +20662,6 @@ body {
20499
20662
  --focus-ring-error: hsla(var(--error-color-hsl) / 75%);
20500
20663
  --focus-ring-muted: var(--focus-ring);
20501
20664
  --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
20665
  --primary-color-h: var(--purple-400-h);
20507
20666
  --primary-color-s: var(--purple-400-s);
20508
20667
  --primary-color-l: var(--purple-400-l);
@@ -20720,18 +20879,18 @@ body.theme-dark {
20720
20879
  --green-500-hsl: var(--green-500-h) var(--green-500-s) var(--green-500-l);
20721
20880
  --green-500: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(--alpha, 100%));
20722
20881
  --red-100-h: 0;
20723
- --red-100-s: 100%;
20724
- --red-100-l: 16.47058824%;
20882
+ --red-100-s: 89.58333333%;
20883
+ --red-100-l: 18.82352941%;
20725
20884
  --red-100-hsl: var(--red-100-h) var(--red-100-s) var(--red-100-l);
20726
20885
  --red-100: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--alpha, 100%));
20727
20886
  --red-200-h: 0;
20728
- --red-200-s: 81.21546961%;
20729
- --red-200-l: 35.49019608%;
20887
+ --red-200-s: 88.65979381%;
20888
+ --red-200-l: 38.03921569%;
20730
20889
  --red-200-hsl: var(--red-200-h) var(--red-200-s) var(--red-200-l);
20731
20890
  --red-200: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--alpha, 100%));
20732
20891
  --red-300-h: 0;
20733
- --red-300-s: 100%;
20734
- --red-300-l: 59.01960784%;
20892
+ --red-300-s: 88.8%;
20893
+ --red-300-l: 49.01960784%;
20735
20894
  --red-300-hsl: var(--red-300-h) var(--red-300-s) var(--red-300-l);
20736
20895
  --red-300: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--alpha, 100%));
20737
20896
  --red-400-h: 0;
@@ -20750,23 +20909,21 @@ body.theme-dark {
20750
20909
  .sm\:d-description {
20751
20910
  display: flex;
20752
20911
  box-sizing: border-box;
20753
- margin-bottom: calc(var(--space-300) + var(--space-200));
20754
- color: var(--black-600);
20912
+ color: var(--fc-tertiary);
20755
20913
  font-size: var(--fs-100);
20756
20914
  font-family: inherit;
20757
- line-height: var(--lh4);
20915
+ line-height: var(--lh-400);
20758
20916
  fill: currentColor;
20759
20917
  }
20760
20918
  .sm\:d-label + .d-description {
20761
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
20919
+ margin-top: calc(var(--space-300) * -1);
20920
+ margin-bottom: var(--space-300);
20762
20921
  }
20763
20922
  .sm\:d-description--lg {
20764
20923
  font-size: var(--fs-200);
20765
- line-height: var(--lh6);
20766
20924
  }
20767
20925
  .sm\:d-description--xl {
20768
20926
  font-size: var(--fs-200);
20769
- line-height: var(--lh6);
20770
20927
  }
20771
20928
  .sm\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
20772
20929
  border-top-left-radius: 0;
@@ -21109,9 +21266,12 @@ body.theme-dark {
21109
21266
  }
21110
21267
  .sm\:d-modal {
21111
21268
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
21269
+ --modal-dialog-padding: var(--space-600);
21112
21270
  --modal-dialog-color-background: var(--white);
21113
21271
  --modal-dialog-color-text: var(--fc-tertiary);
21114
21272
  --modal-header-color-text: var(--fc-secondary);
21273
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
21274
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
21115
21275
  position: fixed;
21116
21276
  top: 0;
21117
21277
  right: 0;
@@ -21151,16 +21311,20 @@ body.theme-dark {
21151
21311
  .sm\:d-modal__dialog {
21152
21312
  position: relative;
21153
21313
  z-index: var(--zi-hide);
21314
+ display: flex;
21315
+ flex-direction: column;
21316
+ gap: var(--space-500);
21154
21317
  width: 100%;
21155
21318
  max-width: calc(var(--size-300) * 157);
21156
21319
  max-height: 100%;
21320
+ padding: var(--modal-dialog-padding);
21157
21321
  overflow-y: auto;
21158
21322
  color: var(--modal-dialog-color-text);
21159
21323
  font-size: var(--fs-200);
21160
- line-height: var(--lh8);
21324
+ line-height: var(--lh-400);
21161
21325
  background-color: var(--modal-dialog-color-background);
21162
- border-radius: var(--br8);
21163
- box-shadow: var(--bs-card);
21326
+ border-radius: var(--size-500);
21327
+ box-shadow: var(--modal-dialog-shadow);
21164
21328
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
21165
21329
  backface-visibility: hidden;
21166
21330
  visibility: hidden;
@@ -21180,51 +21344,58 @@ body.theme-dark {
21180
21344
  --modal-footer-padding: calc(var(--space-300) * 6);
21181
21345
  display: flex;
21182
21346
  flex-direction: row-reverse;
21347
+ gap: var(--space-400);
21183
21348
  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
21349
  }
21192
21350
  .sm\:d-modal__header {
21193
21351
  --modal-header-padding: calc(var(--space-300) * 6);
21194
21352
  margin: 0 !important;
21195
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
21196
21353
  color: var(--modal-header-color-text);
21197
- font-weight: var(--fw-bold);
21198
- font-size: var(--fs-300);
21199
- line-height: var(--lh4);
21354
+ font-weight: var(--fw-medium);
21355
+ font-size: var(--fs-400);
21356
+ line-height: var(--lh-100);
21200
21357
  }
21201
21358
  .sm\:d-modal__content {
21202
21359
  max-width: 75ch;
21203
- margin: calc(var(--space-300) * 3) 0;
21204
- padding: var(--space-300) calc(var(--space-300) * 6);
21205
21360
  }
21206
21361
  .sm\:d-modal__close {
21207
21362
  position: absolute;
21208
- top: var(--space-400);
21209
- right: var(--space-400);
21363
+ top: var(--space-500);
21364
+ right: var(--space-500);
21210
21365
  margin: 0 !important;
21211
21366
  }
21212
21367
  .sm\:d-modal__banner {
21368
+ --modal-banner-padding-y: var(--space-500);
21369
+ --modal-banner-padding-x: var(--space-600);
21370
+ --modal-banner-color-background: var(--gold-100);
21213
21371
  position: relative;
21214
21372
  box-sizing: border-box;
21215
21373
  width: 100%;
21216
21374
  max-width: calc(var(--size-300) * 157);
21217
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
21375
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
21376
+ color: var(--fc-primary);
21218
21377
  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;
21378
+ line-height: var(--lh-300);
21379
+ background-color: var(--modal-banner-color-background);
21380
+ border-radius: var(--size-500) var(--size-500) 0 0;
21381
+ box-shadow: var(--modal-dialog-shadow);
21382
+ }
21383
+ .sm\:d-modal__banner::before {
21384
+ position: absolute;
21385
+ right: 0;
21386
+ bottom: 0;
21387
+ left: 0;
21388
+ z-index: var(--zi-modal-element);
21389
+ height: var(--modal-banner-padding-y);
21390
+ background-color: var(--modal-banner-color-background);
21391
+ content: '';
21222
21392
  }
21223
21393
  .sm\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
21224
21394
  border-top-left-radius: 0;
21225
21395
  border-top-right-radius: 0;
21226
21396
  }
21227
21397
  .sm\:d-modal--full {
21398
+ --modal-dialog-padding: 0;
21228
21399
  padding: 0;
21229
21400
  overflow: hidden scroll;
21230
21401
  transform: unset !important;
@@ -22157,14 +22328,19 @@ body.theme-dark {
22157
22328
  .sm\:d-t0 {
22158
22329
  top: 0 !important;
22159
22330
  }
22331
+ .sm\:d-popover {
22332
+ --popover-color-background: var(--black-100);
22333
+ --popover-border-width: var(--size-100);
22334
+ --popover-border-radius: var(--size-400);
22335
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
22336
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
22337
+ }
22160
22338
  .sm\:d-popover__dialog {
22161
22339
  display: grid;
22162
- grid-template-rows: auto 1fr;
22340
+ grid-template-rows: 1fr;
22163
22341
  overflow: auto;
22164
- background-color: var(--white);
22165
- border-color: var(--black-400);
22166
- border-radius: var(--br8);
22167
- box-shadow: var(--bs-card);
22342
+ border-radius: var(--popover-border-radius);
22343
+ box-shadow: var(--popover-shadow);
22168
22344
  }
22169
22345
  .sm\:d-popover__dialog,
22170
22346
  .d-popover__dialog *,
@@ -22178,7 +22354,8 @@ body.theme-dark {
22178
22354
  .sm\:d-popover__content {
22179
22355
  overflow: auto;
22180
22356
  }
22181
- .sm\:d-popover__header-footer-base {
22357
+ .sm\:d-popover__header,
22358
+ .d-popover__footer {
22182
22359
  display: flex;
22183
22360
  align-items: center;
22184
22361
  justify-content: flex-end;
@@ -22191,30 +22368,10 @@ body.theme-dark {
22191
22368
  font-size: var(--fs-200);
22192
22369
  }
22193
22370
  .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);
22371
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
22205
22372
  }
22206
22373
  .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);
22374
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
22218
22375
  }
22219
22376
  .sm\:d-presence {
22220
22377
  --presence-color-border-base: var(--black-100);
@@ -23063,23 +23220,21 @@ body.theme-dark {
23063
23220
  .md\:d-description {
23064
23221
  display: flex;
23065
23222
  box-sizing: border-box;
23066
- margin-bottom: calc(var(--space-300) + var(--space-200));
23067
- color: var(--black-600);
23223
+ color: var(--fc-tertiary);
23068
23224
  font-size: var(--fs-100);
23069
23225
  font-family: inherit;
23070
- line-height: var(--lh4);
23226
+ line-height: var(--lh-400);
23071
23227
  fill: currentColor;
23072
23228
  }
23073
23229
  .md\:d-label + .d-description {
23074
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
23230
+ margin-top: calc(var(--space-300) * -1);
23231
+ margin-bottom: var(--space-300);
23075
23232
  }
23076
23233
  .md\:d-description--lg {
23077
23234
  font-size: var(--fs-200);
23078
- line-height: var(--lh6);
23079
23235
  }
23080
23236
  .md\:d-description--xl {
23081
23237
  font-size: var(--fs-200);
23082
- line-height: var(--lh6);
23083
23238
  }
23084
23239
  .md\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
23085
23240
  border-top-left-radius: 0;
@@ -23422,9 +23577,12 @@ body.theme-dark {
23422
23577
  }
23423
23578
  .md\:d-modal {
23424
23579
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
23580
+ --modal-dialog-padding: var(--space-600);
23425
23581
  --modal-dialog-color-background: var(--white);
23426
23582
  --modal-dialog-color-text: var(--fc-tertiary);
23427
23583
  --modal-header-color-text: var(--fc-secondary);
23584
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
23585
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
23428
23586
  position: fixed;
23429
23587
  top: 0;
23430
23588
  right: 0;
@@ -23464,16 +23622,20 @@ body.theme-dark {
23464
23622
  .md\:d-modal__dialog {
23465
23623
  position: relative;
23466
23624
  z-index: var(--zi-hide);
23625
+ display: flex;
23626
+ flex-direction: column;
23627
+ gap: var(--space-500);
23467
23628
  width: 100%;
23468
23629
  max-width: calc(var(--size-300) * 157);
23469
23630
  max-height: 100%;
23631
+ padding: var(--modal-dialog-padding);
23470
23632
  overflow-y: auto;
23471
23633
  color: var(--modal-dialog-color-text);
23472
23634
  font-size: var(--fs-200);
23473
- line-height: var(--lh8);
23635
+ line-height: var(--lh-400);
23474
23636
  background-color: var(--modal-dialog-color-background);
23475
- border-radius: var(--br8);
23476
- box-shadow: var(--bs-card);
23637
+ border-radius: var(--size-500);
23638
+ box-shadow: var(--modal-dialog-shadow);
23477
23639
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
23478
23640
  backface-visibility: hidden;
23479
23641
  visibility: hidden;
@@ -23493,51 +23655,58 @@ body.theme-dark {
23493
23655
  --modal-footer-padding: calc(var(--space-300) * 6);
23494
23656
  display: flex;
23495
23657
  flex-direction: row-reverse;
23658
+ gap: var(--space-400);
23496
23659
  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
23660
  }
23505
23661
  .md\:d-modal__header {
23506
23662
  --modal-header-padding: calc(var(--space-300) * 6);
23507
23663
  margin: 0 !important;
23508
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
23509
23664
  color: var(--modal-header-color-text);
23510
- font-weight: var(--fw-bold);
23511
- font-size: var(--fs-300);
23512
- line-height: var(--lh4);
23665
+ font-weight: var(--fw-medium);
23666
+ font-size: var(--fs-400);
23667
+ line-height: var(--lh-100);
23513
23668
  }
23514
23669
  .md\:d-modal__content {
23515
23670
  max-width: 75ch;
23516
- margin: calc(var(--space-300) * 3) 0;
23517
- padding: var(--space-300) calc(var(--space-300) * 6);
23518
23671
  }
23519
23672
  .md\:d-modal__close {
23520
23673
  position: absolute;
23521
- top: var(--space-400);
23522
- right: var(--space-400);
23674
+ top: var(--space-500);
23675
+ right: var(--space-500);
23523
23676
  margin: 0 !important;
23524
23677
  }
23525
23678
  .md\:d-modal__banner {
23679
+ --modal-banner-padding-y: var(--space-500);
23680
+ --modal-banner-padding-x: var(--space-600);
23681
+ --modal-banner-color-background: var(--gold-100);
23526
23682
  position: relative;
23527
23683
  box-sizing: border-box;
23528
23684
  width: 100%;
23529
23685
  max-width: calc(var(--size-300) * 157);
23530
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
23686
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
23687
+ color: var(--fc-primary);
23531
23688
  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;
23689
+ line-height: var(--lh-300);
23690
+ background-color: var(--modal-banner-color-background);
23691
+ border-radius: var(--size-500) var(--size-500) 0 0;
23692
+ box-shadow: var(--modal-dialog-shadow);
23693
+ }
23694
+ .md\:d-modal__banner::before {
23695
+ position: absolute;
23696
+ right: 0;
23697
+ bottom: 0;
23698
+ left: 0;
23699
+ z-index: var(--zi-modal-element);
23700
+ height: var(--modal-banner-padding-y);
23701
+ background-color: var(--modal-banner-color-background);
23702
+ content: '';
23535
23703
  }
23536
23704
  .md\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
23537
23705
  border-top-left-radius: 0;
23538
23706
  border-top-right-radius: 0;
23539
23707
  }
23540
23708
  .md\:d-modal--full {
23709
+ --modal-dialog-padding: 0;
23541
23710
  padding: 0;
23542
23711
  overflow: hidden scroll;
23543
23712
  transform: unset !important;
@@ -24470,14 +24639,19 @@ body.theme-dark {
24470
24639
  .md\:d-t0 {
24471
24640
  top: 0 !important;
24472
24641
  }
24642
+ .md\:d-popover {
24643
+ --popover-color-background: var(--black-100);
24644
+ --popover-border-width: var(--size-100);
24645
+ --popover-border-radius: var(--size-400);
24646
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
24647
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
24648
+ }
24473
24649
  .md\:d-popover__dialog {
24474
24650
  display: grid;
24475
- grid-template-rows: auto 1fr;
24651
+ grid-template-rows: 1fr;
24476
24652
  overflow: auto;
24477
- background-color: var(--white);
24478
- border-color: var(--black-400);
24479
- border-radius: var(--br8);
24480
- box-shadow: var(--bs-card);
24653
+ border-radius: var(--popover-border-radius);
24654
+ box-shadow: var(--popover-shadow);
24481
24655
  }
24482
24656
  .md\:d-popover__dialog,
24483
24657
  .d-popover__dialog *,
@@ -24491,7 +24665,8 @@ body.theme-dark {
24491
24665
  .md\:d-popover__content {
24492
24666
  overflow: auto;
24493
24667
  }
24494
- .md\:d-popover__header-footer-base {
24668
+ .md\:d-popover__header,
24669
+ .d-popover__footer {
24495
24670
  display: flex;
24496
24671
  align-items: center;
24497
24672
  justify-content: flex-end;
@@ -24504,30 +24679,10 @@ body.theme-dark {
24504
24679
  font-size: var(--fs-200);
24505
24680
  }
24506
24681
  .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);
24682
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
24518
24683
  }
24519
24684
  .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);
24685
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
24531
24686
  }
24532
24687
  .md\:d-presence {
24533
24688
  --presence-color-border-base: var(--black-100);
@@ -25376,23 +25531,21 @@ body.theme-dark {
25376
25531
  .lg\:d-description {
25377
25532
  display: flex;
25378
25533
  box-sizing: border-box;
25379
- margin-bottom: calc(var(--space-300) + var(--space-200));
25380
- color: var(--black-600);
25534
+ color: var(--fc-tertiary);
25381
25535
  font-size: var(--fs-100);
25382
25536
  font-family: inherit;
25383
- line-height: var(--lh4);
25537
+ line-height: var(--lh-400);
25384
25538
  fill: currentColor;
25385
25539
  }
25386
25540
  .lg\:d-label + .d-description {
25387
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
25541
+ margin-top: calc(var(--space-300) * -1);
25542
+ margin-bottom: var(--space-300);
25388
25543
  }
25389
25544
  .lg\:d-description--lg {
25390
25545
  font-size: var(--fs-200);
25391
- line-height: var(--lh6);
25392
25546
  }
25393
25547
  .lg\:d-description--xl {
25394
25548
  font-size: var(--fs-200);
25395
- line-height: var(--lh6);
25396
25549
  }
25397
25550
  .lg\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
25398
25551
  border-top-left-radius: 0;
@@ -25735,9 +25888,12 @@ body.theme-dark {
25735
25888
  }
25736
25889
  .lg\:d-modal {
25737
25890
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
25891
+ --modal-dialog-padding: var(--space-600);
25738
25892
  --modal-dialog-color-background: var(--white);
25739
25893
  --modal-dialog-color-text: var(--fc-tertiary);
25740
25894
  --modal-header-color-text: var(--fc-secondary);
25895
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
25896
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
25741
25897
  position: fixed;
25742
25898
  top: 0;
25743
25899
  right: 0;
@@ -25777,16 +25933,20 @@ body.theme-dark {
25777
25933
  .lg\:d-modal__dialog {
25778
25934
  position: relative;
25779
25935
  z-index: var(--zi-hide);
25936
+ display: flex;
25937
+ flex-direction: column;
25938
+ gap: var(--space-500);
25780
25939
  width: 100%;
25781
25940
  max-width: calc(var(--size-300) * 157);
25782
25941
  max-height: 100%;
25942
+ padding: var(--modal-dialog-padding);
25783
25943
  overflow-y: auto;
25784
25944
  color: var(--modal-dialog-color-text);
25785
25945
  font-size: var(--fs-200);
25786
- line-height: var(--lh8);
25946
+ line-height: var(--lh-400);
25787
25947
  background-color: var(--modal-dialog-color-background);
25788
- border-radius: var(--br8);
25789
- box-shadow: var(--bs-card);
25948
+ border-radius: var(--size-500);
25949
+ box-shadow: var(--modal-dialog-shadow);
25790
25950
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
25791
25951
  backface-visibility: hidden;
25792
25952
  visibility: hidden;
@@ -25806,51 +25966,58 @@ body.theme-dark {
25806
25966
  --modal-footer-padding: calc(var(--space-300) * 6);
25807
25967
  display: flex;
25808
25968
  flex-direction: row-reverse;
25969
+ gap: var(--space-400);
25809
25970
  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
25971
  }
25818
25972
  .lg\:d-modal__header {
25819
25973
  --modal-header-padding: calc(var(--space-300) * 6);
25820
25974
  margin: 0 !important;
25821
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
25822
25975
  color: var(--modal-header-color-text);
25823
- font-weight: var(--fw-bold);
25824
- font-size: var(--fs-300);
25825
- line-height: var(--lh4);
25976
+ font-weight: var(--fw-medium);
25977
+ font-size: var(--fs-400);
25978
+ line-height: var(--lh-100);
25826
25979
  }
25827
25980
  .lg\:d-modal__content {
25828
25981
  max-width: 75ch;
25829
- margin: calc(var(--space-300) * 3) 0;
25830
- padding: var(--space-300) calc(var(--space-300) * 6);
25831
25982
  }
25832
25983
  .lg\:d-modal__close {
25833
25984
  position: absolute;
25834
- top: var(--space-400);
25835
- right: var(--space-400);
25985
+ top: var(--space-500);
25986
+ right: var(--space-500);
25836
25987
  margin: 0 !important;
25837
25988
  }
25838
25989
  .lg\:d-modal__banner {
25990
+ --modal-banner-padding-y: var(--space-500);
25991
+ --modal-banner-padding-x: var(--space-600);
25992
+ --modal-banner-color-background: var(--gold-100);
25839
25993
  position: relative;
25840
25994
  box-sizing: border-box;
25841
25995
  width: 100%;
25842
25996
  max-width: calc(var(--size-300) * 157);
25843
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
25997
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
25998
+ color: var(--fc-primary);
25844
25999
  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;
26000
+ line-height: var(--lh-300);
26001
+ background-color: var(--modal-banner-color-background);
26002
+ border-radius: var(--size-500) var(--size-500) 0 0;
26003
+ box-shadow: var(--modal-dialog-shadow);
26004
+ }
26005
+ .lg\:d-modal__banner::before {
26006
+ position: absolute;
26007
+ right: 0;
26008
+ bottom: 0;
26009
+ left: 0;
26010
+ z-index: var(--zi-modal-element);
26011
+ height: var(--modal-banner-padding-y);
26012
+ background-color: var(--modal-banner-color-background);
26013
+ content: '';
25848
26014
  }
25849
26015
  .lg\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
25850
26016
  border-top-left-radius: 0;
25851
26017
  border-top-right-radius: 0;
25852
26018
  }
25853
26019
  .lg\:d-modal--full {
26020
+ --modal-dialog-padding: 0;
25854
26021
  padding: 0;
25855
26022
  overflow: hidden scroll;
25856
26023
  transform: unset !important;
@@ -26783,14 +26950,19 @@ body.theme-dark {
26783
26950
  .lg\:d-t0 {
26784
26951
  top: 0 !important;
26785
26952
  }
26953
+ .lg\:d-popover {
26954
+ --popover-color-background: var(--black-100);
26955
+ --popover-border-width: var(--size-100);
26956
+ --popover-border-radius: var(--size-400);
26957
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
26958
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
26959
+ }
26786
26960
  .lg\:d-popover__dialog {
26787
26961
  display: grid;
26788
- grid-template-rows: auto 1fr;
26962
+ grid-template-rows: 1fr;
26789
26963
  overflow: auto;
26790
- background-color: var(--white);
26791
- border-color: var(--black-400);
26792
- border-radius: var(--br8);
26793
- box-shadow: var(--bs-card);
26964
+ border-radius: var(--popover-border-radius);
26965
+ box-shadow: var(--popover-shadow);
26794
26966
  }
26795
26967
  .lg\:d-popover__dialog,
26796
26968
  .d-popover__dialog *,
@@ -26804,7 +26976,8 @@ body.theme-dark {
26804
26976
  .lg\:d-popover__content {
26805
26977
  overflow: auto;
26806
26978
  }
26807
- .lg\:d-popover__header-footer-base {
26979
+ .lg\:d-popover__header,
26980
+ .d-popover__footer {
26808
26981
  display: flex;
26809
26982
  align-items: center;
26810
26983
  justify-content: flex-end;
@@ -26817,30 +26990,10 @@ body.theme-dark {
26817
26990
  font-size: var(--fs-200);
26818
26991
  }
26819
26992
  .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);
26993
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
26831
26994
  }
26832
26995
  .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);
26996
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
26844
26997
  }
26845
26998
  .lg\:d-presence {
26846
26999
  --presence-color-border-base: var(--black-100);
@@ -27689,23 +27842,21 @@ body.theme-dark {
27689
27842
  .xl\:d-description {
27690
27843
  display: flex;
27691
27844
  box-sizing: border-box;
27692
- margin-bottom: calc(var(--space-300) + var(--space-200));
27693
- color: var(--black-600);
27845
+ color: var(--fc-tertiary);
27694
27846
  font-size: var(--fs-100);
27695
27847
  font-family: inherit;
27696
- line-height: var(--lh4);
27848
+ line-height: var(--lh-400);
27697
27849
  fill: currentColor;
27698
27850
  }
27699
27851
  .xl\:d-label + .d-description {
27700
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
27852
+ margin-top: calc(var(--space-300) * -1);
27853
+ margin-bottom: var(--space-300);
27701
27854
  }
27702
27855
  .xl\:d-description--lg {
27703
27856
  font-size: var(--fs-200);
27704
- line-height: var(--lh6);
27705
27857
  }
27706
27858
  .xl\:d-description--xl {
27707
27859
  font-size: var(--fs-200);
27708
- line-height: var(--lh6);
27709
27860
  }
27710
27861
  .xl\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
27711
27862
  border-top-left-radius: 0;
@@ -28048,9 +28199,12 @@ body.theme-dark {
28048
28199
  }
28049
28200
  .xl\:d-modal {
28050
28201
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
28202
+ --modal-dialog-padding: var(--space-600);
28051
28203
  --modal-dialog-color-background: var(--white);
28052
28204
  --modal-dialog-color-text: var(--fc-tertiary);
28053
28205
  --modal-header-color-text: var(--fc-secondary);
28206
+ --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 10%);
28207
+ --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
28054
28208
  position: fixed;
28055
28209
  top: 0;
28056
28210
  right: 0;
@@ -28090,16 +28244,20 @@ body.theme-dark {
28090
28244
  .xl\:d-modal__dialog {
28091
28245
  position: relative;
28092
28246
  z-index: var(--zi-hide);
28247
+ display: flex;
28248
+ flex-direction: column;
28249
+ gap: var(--space-500);
28093
28250
  width: 100%;
28094
28251
  max-width: calc(var(--size-300) * 157);
28095
28252
  max-height: 100%;
28253
+ padding: var(--modal-dialog-padding);
28096
28254
  overflow-y: auto;
28097
28255
  color: var(--modal-dialog-color-text);
28098
28256
  font-size: var(--fs-200);
28099
- line-height: var(--lh8);
28257
+ line-height: var(--lh-400);
28100
28258
  background-color: var(--modal-dialog-color-background);
28101
- border-radius: var(--br8);
28102
- box-shadow: var(--bs-card);
28259
+ border-radius: var(--size-500);
28260
+ box-shadow: var(--modal-dialog-shadow);
28103
28261
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
28104
28262
  backface-visibility: hidden;
28105
28263
  visibility: hidden;
@@ -28119,51 +28277,58 @@ body.theme-dark {
28119
28277
  --modal-footer-padding: calc(var(--space-300) * 6);
28120
28278
  display: flex;
28121
28279
  flex-direction: row-reverse;
28280
+ gap: var(--space-400);
28122
28281
  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
28282
  }
28131
28283
  .xl\:d-modal__header {
28132
28284
  --modal-header-padding: calc(var(--space-300) * 6);
28133
28285
  margin: 0 !important;
28134
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
28135
28286
  color: var(--modal-header-color-text);
28136
- font-weight: var(--fw-bold);
28137
- font-size: var(--fs-300);
28138
- line-height: var(--lh4);
28287
+ font-weight: var(--fw-medium);
28288
+ font-size: var(--fs-400);
28289
+ line-height: var(--lh-100);
28139
28290
  }
28140
28291
  .xl\:d-modal__content {
28141
28292
  max-width: 75ch;
28142
- margin: calc(var(--space-300) * 3) 0;
28143
- padding: var(--space-300) calc(var(--space-300) * 6);
28144
28293
  }
28145
28294
  .xl\:d-modal__close {
28146
28295
  position: absolute;
28147
- top: var(--space-400);
28148
- right: var(--space-400);
28296
+ top: var(--space-500);
28297
+ right: var(--space-500);
28149
28298
  margin: 0 !important;
28150
28299
  }
28151
28300
  .xl\:d-modal__banner {
28301
+ --modal-banner-padding-y: var(--space-500);
28302
+ --modal-banner-padding-x: var(--space-600);
28303
+ --modal-banner-color-background: var(--gold-100);
28152
28304
  position: relative;
28153
28305
  box-sizing: border-box;
28154
28306
  width: 100%;
28155
28307
  max-width: calc(var(--size-300) * 157);
28156
- padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
28308
+ padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x);
28309
+ color: var(--fc-primary);
28157
28310
  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;
28311
+ line-height: var(--lh-300);
28312
+ background-color: var(--modal-banner-color-background);
28313
+ border-radius: var(--size-500) var(--size-500) 0 0;
28314
+ box-shadow: var(--modal-dialog-shadow);
28315
+ }
28316
+ .xl\:d-modal__banner::before {
28317
+ position: absolute;
28318
+ right: 0;
28319
+ bottom: 0;
28320
+ left: 0;
28321
+ z-index: var(--zi-modal-element);
28322
+ height: var(--modal-banner-padding-y);
28323
+ background-color: var(--modal-banner-color-background);
28324
+ content: '';
28161
28325
  }
28162
28326
  .xl\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
28163
28327
  border-top-left-radius: 0;
28164
28328
  border-top-right-radius: 0;
28165
28329
  }
28166
28330
  .xl\:d-modal--full {
28331
+ --modal-dialog-padding: 0;
28167
28332
  padding: 0;
28168
28333
  overflow: hidden scroll;
28169
28334
  transform: unset !important;
@@ -29096,14 +29261,19 @@ body.theme-dark {
29096
29261
  .xl\:d-t0 {
29097
29262
  top: 0 !important;
29098
29263
  }
29264
+ .xl\:d-popover {
29265
+ --popover-color-background: var(--black-100);
29266
+ --popover-border-width: var(--size-100);
29267
+ --popover-border-radius: var(--size-400);
29268
+ --popover-color-shadow: hsla(var(--black-900-hsl) / 10%);
29269
+ --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
29270
+ }
29099
29271
  .xl\:d-popover__dialog {
29100
29272
  display: grid;
29101
- grid-template-rows: auto 1fr;
29273
+ grid-template-rows: 1fr;
29102
29274
  overflow: auto;
29103
- background-color: var(--white);
29104
- border-color: var(--black-400);
29105
- border-radius: var(--br8);
29106
- box-shadow: var(--bs-card);
29275
+ border-radius: var(--popover-border-radius);
29276
+ box-shadow: var(--popover-shadow);
29107
29277
  }
29108
29278
  .xl\:d-popover__dialog,
29109
29279
  .d-popover__dialog *,
@@ -29117,7 +29287,8 @@ body.theme-dark {
29117
29287
  .xl\:d-popover__content {
29118
29288
  overflow: auto;
29119
29289
  }
29120
- .xl\:d-popover__header-footer-base {
29290
+ .xl\:d-popover__header,
29291
+ .d-popover__footer {
29121
29292
  display: flex;
29122
29293
  align-items: center;
29123
29294
  justify-content: flex-end;
@@ -29130,30 +29301,10 @@ body.theme-dark {
29130
29301
  font-size: var(--fs-200);
29131
29302
  }
29132
29303
  .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);
29304
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
29144
29305
  }
29145
29306
  .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);
29307
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
29157
29308
  }
29158
29309
  .xl\:d-presence {
29159
29310
  --presence-color-border-base: var(--black-100);