@dialpad/dialtone 7.10.3 → 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 (18) hide show
  1. package/lib/build/less/components/button.less +113 -89
  2. package/lib/build/less/components/chip.less +0 -1
  3. package/lib/build/less/components/forms.less +24 -31
  4. package/lib/build/less/components/input.less +68 -30
  5. package/lib/build/less/components/modal.less +40 -24
  6. package/lib/build/less/components/popover.less +54 -47
  7. package/lib/build/less/components/selects.less +71 -83
  8. package/lib/build/less/components/tooltip.less +10 -3
  9. package/lib/build/less/dialtone-reset.less +1 -1
  10. package/lib/build/less/themes/default.less +0 -3
  11. package/lib/build/less/utilities/colors.less +1 -1
  12. package/lib/build/less/utilities/effects.less +3 -0
  13. package/lib/build/less/variables/colors.less +12 -12
  14. package/lib/build/less/variables/sizes.less +21 -38
  15. package/lib/build/less/variables/visual-styles.less +2 -0
  16. package/lib/dist/css/dialtone.css +771 -621
  17. package/lib/dist/css/dialtone.min.css +1 -1
  18. package/package.json +28 -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;
@@ -1373,7 +1435,6 @@ body {
1373
1435
  .d-chip__label--sm .d-avatar {
1374
1436
  --avatar-size-shape: calc(var(--size-500) + var(--size-300));
1375
1437
  margin-right: var(--space-300);
1376
- margin-left: calc(var(--space-300) + var(--space-200));
1377
1438
  }
1378
1439
  .d-chip__close--sm {
1379
1440
  padding: var(--space-200);
@@ -1397,180 +1458,257 @@ fieldset {
1397
1458
  align-items: baseline;
1398
1459
  justify-content: space-between;
1399
1460
  box-sizing: border-box;
1400
- margin-bottom: calc(var(--space-300) + var(--space-200));
1401
- color: currentColor;
1402
- font-weight: 700;
1461
+ margin-bottom: var(--space-300);
1462
+ color: var(--fc-secondary);
1463
+ font-weight: var(--fw-semibold);
1403
1464
  font-size: var(--fs-200);
1404
1465
  font-family: inherit;
1405
- line-height: var(--lh4);
1466
+ line-height: var(--lh-300);
1406
1467
  word-break: break-word;
1407
1468
  overflow-wrap: break-word;
1408
- cursor: pointer;
1409
1469
  }
1410
1470
  legend .d-label {
1411
1471
  cursor: default;
1412
1472
  }
1413
1473
  .d-label--xs {
1414
1474
  font-size: var(--fs-100);
1415
- line-height: var(--lh4);
1416
1475
  }
1417
1476
  .d-label--sm {
1418
1477
  font-size: var(--fs-200);
1419
- line-height: var(--lh2);
1420
1478
  }
1421
1479
  .d-label--lg {
1422
1480
  font-size: var(--fs-200);
1423
- line-height: var(--lh2);
1424
1481
  }
1425
1482
  .d-label--xl {
1426
1483
  font-size: var(--fs-300);
1427
- line-height: var(--lh4);
1428
1484
  }
1429
1485
  .d-description {
1430
1486
  display: flex;
1431
1487
  box-sizing: border-box;
1432
- margin-bottom: calc(var(--space-300) + var(--space-200));
1433
- color: var(--black-600);
1488
+ color: var(--fc-tertiary);
1434
1489
  font-size: var(--fs-100);
1435
1490
  font-family: inherit;
1436
- line-height: var(--lh4);
1491
+ line-height: var(--lh-400);
1437
1492
  fill: currentColor;
1438
1493
  }
1439
1494
  .d-label + .d-description {
1440
- 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);
1441
1497
  }
1442
1498
  .d-description--lg {
1443
1499
  font-size: var(--fs-200);
1444
- line-height: var(--lh6);
1445
1500
  }
1446
1501
  .d-description--xl {
1447
1502
  font-size: var(--fs-200);
1448
- line-height: var(--lh6);
1449
1503
  }
1450
1504
  .d-validation-message {
1451
- --validation--fc: var(--fc-tertiary);
1452
- display: inline-flex;
1505
+ --validation-color-text: var(--fc-tertiary);
1506
+ display: flex;
1453
1507
  gap: var(--space-300);
1454
1508
  align-items: flex-start;
1455
- margin-top: calc(var(--space-300) + var(--space-200));
1456
- color: var(--validation--fc);
1457
- font-weight: inherit;
1509
+ margin-top: var(--space-400);
1510
+ color: var(--validation-color-text);
1511
+ font-weight: var(--fw-medium);
1458
1512
  font-size: var(--fs-100);
1459
1513
  font-family: inherit;
1460
- line-height: var(--lh4);
1514
+ line-height: var(--lh-300);
1461
1515
  }
1462
1516
  .d-validation-message::before {
1463
- width: var(--size-500);
1464
- min-width: var(--size-500);
1517
+ display: block;
1518
+ width: calc(var(--size-500) + var(--size-200));
1465
1519
  height: var(--size-500);
1466
1520
  content: '';
1467
1521
  }
1468
1522
  .d-validation-message--warning {
1469
- --validation--fc: var(--fc-warning);
1523
+ --validation-color-text: var(--fc-warning);
1470
1524
  }
1471
1525
  .d-validation-message--warning::before {
1472
- 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==');
1473
1527
  background-repeat: no-repeat;
1474
1528
  }
1475
1529
  .d-validation-message--error {
1476
- --validation--fc: var(--fc-error);
1530
+ --validation-color-text: var(--fc-error);
1477
1531
  }
1478
1532
  .d-validation-message--error::before {
1479
- 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=');
1480
1534
  background-repeat: no-repeat;
1481
1535
  }
1482
1536
  .d-validation-message--success {
1483
- --validation--fc: var(--fc-success);
1537
+ --validation-color-text: var(--fc-success);
1484
1538
  }
1485
1539
  .d-validation-message--success::before {
1486
- 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=');
1487
1541
  background-repeat: no-repeat;
1488
1542
  }
1489
1543
  .d-input,
1544
+ .d-input--md,
1490
1545
  .d-textarea,
1546
+ .d-textarea--md,
1547
+ .d-input__wrapper--md,
1491
1548
  .d-input__wrapper {
1492
1549
  --input-color-border-focus: var(--purple-400);
1493
- --input-color-border: var(--black-600);
1494
- --input-color-background: var(--white);
1495
- --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);
1496
1560
  position: relative;
1497
1561
  display: inline-flex;
1498
1562
  flex: 1 0%;
1499
1563
  box-sizing: border-box;
1500
1564
  width: 100%;
1501
1565
  min-width: 0;
1502
- padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
1566
+ padding: var(--input-padding-y) var(--input-padding-x);
1503
1567
  color: var(--input-color-text);
1504
1568
  font-weight: inherit;
1505
- font-size: var(--fs-200);
1569
+ font-size: var(--input-font-size);
1506
1570
  font-family: inherit;
1507
- line-height: var(--lh4);
1571
+ line-height: var(--input-line-height);
1508
1572
  background-color: var(--input-color-background);
1509
- border: 1px solid var(--input-color-border);
1510
- border-radius: var(--base--corner-radius);
1573
+ border: var(--input-border-width) solid var(--input-color-border);
1574
+ border-radius: var(--input-border-radius);
1511
1575
  outline: none;
1512
1576
  box-shadow: none;
1513
1577
  transition-timing-function: var(--ttf-in-out);
1514
1578
  transition-duration: 100ms;
1515
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);
1516
1590
  }
1517
1591
  .d-input::placeholder,
1592
+ .d-input--md::placeholder,
1518
1593
  .d-textarea::placeholder,
1594
+ .d-textarea--md::placeholder,
1595
+ .d-input__wrapper--md::placeholder,
1519
1596
  .d-input__wrapper::placeholder {
1520
1597
  color: var(--fc-placeholder);
1521
1598
  }
1522
1599
  .d-input::-ms-clear,
1600
+ .d-input--md::-ms-clear,
1523
1601
  .d-textarea::-ms-clear,
1602
+ .d-textarea--md::-ms-clear,
1603
+ .d-input__wrapper--md::-ms-clear,
1524
1604
  .d-input__wrapper::-ms-clear {
1525
1605
  display: none;
1526
1606
  }
1527
1607
  .d-input:focus,
1608
+ .d-input--md:focus,
1528
1609
  .d-textarea:focus,
1610
+ .d-textarea--md:focus,
1611
+ .d-input__wrapper--md:focus,
1529
1612
  .d-input__wrapper:focus,
1530
1613
  .d-input:focus-within,
1614
+ .d-input--md:focus-within,
1531
1615
  .d-textarea:focus-within,
1616
+ .d-textarea--md:focus-within,
1617
+ .d-input__wrapper--md:focus-within,
1532
1618
  .d-input__wrapper:focus-within {
1533
1619
  --input-color-border: var(--input-color-border-focus);
1534
1620
  outline: 0;
1535
1621
  box-shadow: var(--bs-focus-ring) !important;
1536
1622
  }
1537
1623
  .d-input[disabled],
1624
+ .d-input--md[disabled],
1538
1625
  .d-textarea[disabled],
1626
+ .d-textarea--md[disabled],
1627
+ .d-input__wrapper--md[disabled],
1539
1628
  .d-input__wrapper[disabled],
1540
1629
  .d-input[read-only],
1630
+ .d-input--md[read-only],
1541
1631
  .d-textarea[read-only],
1632
+ .d-textarea--md[read-only],
1633
+ .d-input__wrapper--md[read-only],
1542
1634
  .d-input__wrapper[read-only] {
1543
- --input-color-border: var(--black-400) !important;
1544
- --input-color-background: var(--black-300);
1635
+ --input-color-border: transparent !important;
1636
+ --input-color-background: var(--input-color-background-disabled);
1545
1637
  --input-color-text: var(--fc-disabled);
1546
1638
  }
1547
1639
  .d-input[disabled]:focus,
1640
+ .d-input--md[disabled]:focus,
1548
1641
  .d-textarea[disabled]:focus,
1642
+ .d-textarea--md[disabled]:focus,
1643
+ .d-input__wrapper--md[disabled]:focus,
1549
1644
  .d-input__wrapper[disabled]:focus,
1550
1645
  .d-input[read-only]:focus,
1646
+ .d-input--md[read-only]:focus,
1551
1647
  .d-textarea[read-only]:focus,
1648
+ .d-textarea--md[read-only]:focus,
1649
+ .d-input__wrapper--md[read-only]:focus,
1552
1650
  .d-input__wrapper[read-only]:focus,
1553
1651
  .d-input[disabled]:focus-within,
1652
+ .d-input--md[disabled]:focus-within,
1554
1653
  .d-textarea[disabled]:focus-within,
1654
+ .d-textarea--md[disabled]:focus-within,
1655
+ .d-input__wrapper--md[disabled]:focus-within,
1555
1656
  .d-input__wrapper[disabled]:focus-within,
1556
1657
  .d-input[read-only]:focus-within,
1658
+ .d-input--md[read-only]:focus-within,
1557
1659
  .d-textarea[read-only]:focus-within,
1660
+ .d-textarea--md[read-only]:focus-within,
1661
+ .d-input__wrapper--md[read-only]:focus-within,
1558
1662
  .d-input__wrapper[read-only]:focus-within {
1559
1663
  box-shadow: none !important;
1560
1664
  }
1561
1665
  .d-input[disabled]::placeholder,
1666
+ .d-input--md[disabled]::placeholder,
1562
1667
  .d-textarea[disabled]::placeholder,
1668
+ .d-textarea--md[disabled]::placeholder,
1669
+ .d-input__wrapper--md[disabled]::placeholder,
1563
1670
  .d-input__wrapper[disabled]::placeholder,
1564
1671
  .d-input[read-only]::placeholder,
1672
+ .d-input--md[read-only]::placeholder,
1565
1673
  .d-textarea[read-only]::placeholder,
1674
+ .d-textarea--md[read-only]::placeholder,
1675
+ .d-input__wrapper--md[read-only]::placeholder,
1566
1676
  .d-input__wrapper[read-only]::placeholder {
1567
1677
  color: var(--fc-placeholder);
1568
1678
  }
1569
1679
  .d-input[disabled],
1680
+ .d-input--md[disabled],
1570
1681
  .d-textarea[disabled],
1682
+ .d-textarea--md[disabled],
1683
+ .d-input__wrapper--md[disabled],
1571
1684
  .d-input__wrapper[disabled] {
1572
1685
  cursor: not-allowed;
1573
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
+ }
1574
1712
  .d-input__wrapper {
1575
1713
  padding: 0;
1576
1714
  }
@@ -1583,8 +1721,8 @@ legend .d-label {
1583
1721
  .d-input__wrapper .d-input,
1584
1722
  .d-input__wrapper .d-textarea {
1585
1723
  flex: 1;
1724
+ background-color: transparent;
1586
1725
  border: none;
1587
- border-radius: var(--base--corner-radius);
1588
1726
  }
1589
1727
  .d-input__wrapper .d-input:focus,
1590
1728
  .d-input__wrapper .d-textarea:focus {
@@ -1601,39 +1739,39 @@ legend .d-label {
1601
1739
  padding-left: calc(var(--space-300) + var(--space-200));
1602
1740
  }
1603
1741
  .d-input.d-input--xs {
1604
- padding-top: var(--space-100 / 2);
1605
- padding-bottom: calc(var(--space-400) + var(--space-100));
1606
- 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);
1607
1746
  }
1608
1747
  .d-input.d-input--xs .d-btn__icon {
1609
1748
  width: 1.4rem;
1610
1749
  height: 1.4rem;
1611
1750
  }
1612
1751
  .d-input.d-input--sm {
1613
- --padding-y: calc(var(--space-300) + var(--space-200));
1614
- padding-top: var(--padding-y);
1615
- padding-bottom: var(--padding-y);
1616
- 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);
1617
1755
  }
1618
1756
  .d-input.d-input--sm .d-btn__icon {
1619
1757
  width: 1.6rem;
1620
1758
  height: 1.6rem;
1621
1759
  }
1622
1760
  .d-input.d-input--lg {
1623
- --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
1624
- padding-top: var(--padding-y);
1625
- padding-bottom: var(--padding-y);
1626
- 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);
1627
1765
  }
1628
1766
  .d-input.d-input--lg .d-btn__icon {
1629
1767
  width: 2rem;
1630
1768
  height: 2rem;
1631
1769
  }
1632
1770
  .d-input.d-input--xl {
1633
- --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
1634
- padding-top: var(--padding-y);
1635
- padding-bottom: var(--padding-y);
1636
- 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);
1637
1775
  }
1638
1776
  .d-input.d-input--xl .d-btn__icon {
1639
1777
  width: 2.4rem;
@@ -1642,11 +1780,14 @@ legend .d-label {
1642
1780
  .d-textarea {
1643
1781
  min-height: calc(var(--size-300) * 20);
1644
1782
  vertical-align: top;
1783
+ border-bottom-right-radius: var(--size-300);
1784
+ resize: vertical;
1645
1785
  }
1646
1786
  .d-textarea--xs {
1647
- padding-top: var(--space-100 / 2);
1648
- padding-bottom: calc(var(--space-400) + var(--space-100));
1649
- 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);
1650
1791
  min-height: calc(var(--size-300) * 10);
1651
1792
  }
1652
1793
  .d-textarea--xs .d-btn__icon {
@@ -1654,10 +1795,9 @@ legend .d-label {
1654
1795
  height: 1.4rem;
1655
1796
  }
1656
1797
  .d-textarea--sm {
1657
- --padding-y: calc(var(--space-300) + var(--space-200));
1658
- padding-top: var(--padding-y);
1659
- padding-bottom: var(--padding-y);
1660
- 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);
1661
1801
  min-height: calc(var(--size-300) * 12);
1662
1802
  }
1663
1803
  .d-textarea--sm .d-btn__icon {
@@ -1665,10 +1805,10 @@ legend .d-label {
1665
1805
  height: 1.6rem;
1666
1806
  }
1667
1807
  .d-textarea--lg {
1668
- --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
1669
- padding-top: var(--padding-y);
1670
- padding-bottom: var(--padding-y);
1671
- 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);
1672
1812
  min-height: calc(var(--size-300) * 23);
1673
1813
  }
1674
1814
  .d-textarea--lg .d-btn__icon {
@@ -1676,10 +1816,10 @@ legend .d-label {
1676
1816
  height: 2rem;
1677
1817
  }
1678
1818
  .d-textarea--xl {
1679
- --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
1680
- padding-top: var(--padding-y);
1681
- padding-bottom: var(--padding-y);
1682
- 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);
1683
1823
  min-height: calc(var(--size-300) * 25);
1684
1824
  }
1685
1825
  .d-textarea--xl .d-btn__icon {
@@ -1688,7 +1828,7 @@ legend .d-label {
1688
1828
  }
1689
1829
  .d-input--warning,
1690
1830
  .d-textarea--warning {
1691
- --input-color-border: var(--warning-color) !important;
1831
+ --input-color-border: var(--gold-400) !important;
1692
1832
  --input-color-border-focus: var(--warning-color);
1693
1833
  }
1694
1834
  .d-input--warning:focus,
@@ -1721,37 +1861,37 @@ legend .d-label {
1721
1861
  }
1722
1862
  .d-input-icon {
1723
1863
  --input-icon-size: var(--size-500);
1864
+ --input-icon-container-height: var(--size-600);
1724
1865
  z-index: var(--zi-base1);
1725
1866
  display: inline-flex;
1726
1867
  align-items: center;
1727
- height: calc(var(--size-300) * 9);
1868
+ height: var(--input-icon-container-height);
1728
1869
  margin: 0;
1729
- line-height: 0;
1730
1870
  }
1731
1871
  .d-input-icon svg {
1732
1872
  width: var(--input-icon-size);
1733
1873
  height: var(--input-icon-size);
1734
1874
  }
1735
1875
  .d-input-icon.d-input--xs {
1736
- height: calc(var(--size-600) - var(--size-300));
1876
+ --input-icon-container-height: calc(var(--size-600) - var(--size-300));
1737
1877
  }
1738
1878
  .d-input-icon--xs {
1739
1879
  --input-icon-size: 1.2rem;
1740
1880
  }
1741
1881
  .d-input-icon.d-input--sm {
1742
- height: var(--size-600);
1882
+ --input-icon-container-height: var(--size-600);
1743
1883
  }
1744
1884
  .d-input-icon--sm {
1745
1885
  --input-icon-size: 1.4rem;
1746
1886
  }
1747
1887
  .d-input-icon.d-input--lg {
1748
- height: calc(var(--size-300) * 12);
1888
+ --input-icon-container-height: calc(var(--size-300) * 10);
1749
1889
  }
1750
1890
  .d-input-icon--lg {
1751
1891
  --input-icon-size: 2rem;
1752
1892
  }
1753
1893
  .d-input-icon.d-input--xl {
1754
- height: calc(var(--size-300) * 14);
1894
+ --input-icon-container-height: calc(var(--size-300) * 14);
1755
1895
  }
1756
1896
  .d-input-icon--xl {
1757
1897
  --input-icon-size: 2.4rem;
@@ -1910,9 +2050,12 @@ legend .d-label {
1910
2050
  }
1911
2051
  .d-modal {
1912
2052
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
2053
+ --modal-dialog-padding: var(--space-600);
1913
2054
  --modal-dialog-color-background: var(--white);
1914
2055
  --modal-dialog-color-text: var(--fc-tertiary);
1915
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);
1916
2059
  position: fixed;
1917
2060
  top: 0;
1918
2061
  right: 0;
@@ -1952,16 +2095,20 @@ legend .d-label {
1952
2095
  .d-modal__dialog {
1953
2096
  position: relative;
1954
2097
  z-index: var(--zi-hide);
2098
+ display: flex;
2099
+ flex-direction: column;
2100
+ gap: var(--space-500);
1955
2101
  width: 100%;
1956
2102
  max-width: calc(var(--size-300) * 157);
1957
2103
  max-height: 100%;
2104
+ padding: var(--modal-dialog-padding);
1958
2105
  overflow-y: auto;
1959
2106
  color: var(--modal-dialog-color-text);
1960
2107
  font-size: var(--fs-200);
1961
- line-height: var(--lh8);
2108
+ line-height: var(--lh-400);
1962
2109
  background-color: var(--modal-dialog-color-background);
1963
- border-radius: var(--br8);
1964
- box-shadow: var(--bs-card);
2110
+ border-radius: var(--size-500);
2111
+ box-shadow: var(--modal-dialog-shadow);
1965
2112
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
1966
2113
  backface-visibility: hidden;
1967
2114
  visibility: hidden;
@@ -1981,51 +2128,58 @@ legend .d-label {
1981
2128
  --modal-footer-padding: calc(var(--space-300) * 6);
1982
2129
  display: flex;
1983
2130
  flex-direction: row-reverse;
2131
+ gap: var(--space-400);
1984
2132
  align-items: center;
1985
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
1986
- }
1987
- .d-modal__footer > :not(:first-child) {
1988
- margin-right: var(--space-300);
1989
- }
1990
- .d-modal__footer > :not(:last-child) {
1991
- margin-left: var(--space-300);
1992
2133
  }
1993
2134
  .d-modal__header {
1994
2135
  --modal-header-padding: calc(var(--space-300) * 6);
1995
2136
  margin: 0 !important;
1996
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
1997
2137
  color: var(--modal-header-color-text);
1998
- font-weight: var(--fw-bold);
1999
- font-size: var(--fs-300);
2000
- line-height: var(--lh4);
2138
+ font-weight: var(--fw-medium);
2139
+ font-size: var(--fs-400);
2140
+ line-height: var(--lh-100);
2001
2141
  }
2002
2142
  .d-modal__content {
2003
2143
  max-width: 75ch;
2004
- margin: calc(var(--space-300) * 3) 0;
2005
- padding: var(--space-300) calc(var(--space-300) * 6);
2006
2144
  }
2007
2145
  .d-modal__close {
2008
2146
  position: absolute;
2009
- top: var(--space-400);
2010
- right: var(--space-400);
2147
+ top: var(--space-500);
2148
+ right: var(--space-500);
2011
2149
  margin: 0 !important;
2012
2150
  }
2013
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);
2014
2155
  position: relative;
2015
2156
  box-sizing: border-box;
2016
2157
  width: 100%;
2017
2158
  max-width: calc(var(--size-300) * 157);
2018
- 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);
2019
2161
  font-size: var(--fs-200);
2020
- line-height: var(--lh4);
2021
- background-color: var(--gold-100);
2022
- 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: '';
2023
2176
  }
2024
2177
  .d-modal__banner:not(.d-d-none) + .d-modal__dialog {
2025
2178
  border-top-left-radius: 0;
2026
2179
  border-top-right-radius: 0;
2027
2180
  }
2028
2181
  .d-modal--full {
2182
+ --modal-dialog-padding: 0;
2029
2183
  padding: 0;
2030
2184
  overflow: hidden scroll;
2031
2185
  transform: unset !important;
@@ -2347,14 +2501,19 @@ legend .d-label {
2347
2501
  --notice-color-background: var(--gold-200);
2348
2502
  --notice-color-text: var(--fc-primary);
2349
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
+ }
2350
2511
  .d-popover__dialog {
2351
2512
  display: grid;
2352
- grid-template-rows: auto 1fr;
2513
+ grid-template-rows: 1fr;
2353
2514
  overflow: auto;
2354
- background-color: var(--white);
2355
- border-color: var(--black-400);
2356
- border-radius: var(--br8);
2357
- box-shadow: var(--bs-card);
2515
+ border-radius: var(--popover-border-radius);
2516
+ box-shadow: var(--popover-shadow);
2358
2517
  }
2359
2518
  .d-popover__dialog,
2360
2519
  .d-popover__dialog *,
@@ -2368,7 +2527,8 @@ legend .d-label {
2368
2527
  .d-popover__content {
2369
2528
  overflow: auto;
2370
2529
  }
2371
- .d-popover__header-footer-base {
2530
+ .d-popover__header,
2531
+ .d-popover__footer {
2372
2532
  display: flex;
2373
2533
  align-items: center;
2374
2534
  justify-content: flex-end;
@@ -2381,30 +2541,10 @@ legend .d-label {
2381
2541
  font-size: var(--fs-200);
2382
2542
  }
2383
2543
  .d-popover__header {
2384
- display: flex;
2385
- align-items: center;
2386
- justify-content: flex-end;
2387
- width: 100%;
2388
- min-height: var(--size48);
2389
- padding-top: calc(var(--space-300) + var(--space-200));
2390
- padding-bottom: calc(var(--space-300) + var(--space-200));
2391
- overflow: auto;
2392
- font-weight: var(--fw-semibold);
2393
- font-size: var(--fs-200);
2394
- border-bottom: var(--size-100) solid var(--black-300);
2544
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
2395
2545
  }
2396
2546
  .d-popover__footer {
2397
- display: flex;
2398
- align-items: center;
2399
- justify-content: flex-end;
2400
- width: 100%;
2401
- min-height: var(--size48);
2402
- padding-top: calc(var(--space-300) + var(--space-200));
2403
- padding-bottom: calc(var(--space-300) + var(--space-200));
2404
- overflow: auto;
2405
- font-weight: var(--fw-semibold);
2406
- font-size: var(--fs-200);
2407
- border-top: var(--size-100) solid var(--black-300);
2547
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
2408
2548
  }
2409
2549
  .d-checkbox,
2410
2550
  .d-radio {
@@ -2677,123 +2817,65 @@ legend .d-label {
2677
2817
  }
2678
2818
  .d-select {
2679
2819
  --select-color-border: var(--black-500);
2680
- --select-color-background: var(--white);
2681
- --select-color-text: var(--black-800);
2820
+ --select-notch-position-right: calc(var(--size-300) * 2);
2682
2821
  position: relative;
2683
- display: inline-flex;
2684
- box-sizing: border-box;
2685
- width: 100%;
2686
- width: -webkit-fill-available;
2687
- font-weight: inherit;
2688
- font-size: var(--fs-200);
2689
- font-family: inherit;
2690
- line-height: var(--lh-200);
2822
+ width: stretch;
2691
2823
  }
2692
- .d-select::before,
2693
2824
  .d-select::after {
2825
+ --select-arrow-size: calc(var(--size-300) * 3.5);
2694
2826
  position: absolute;
2695
- right: 0.75em;
2827
+ top: 50%;
2828
+ right: var(--select-notch-position-right);
2696
2829
  z-index: var(--zi-selected);
2697
- border-color: var(--black-900) transparent;
2698
- border-style: solid;
2699
- 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%);
2700
2836
  content: '';
2701
2837
  pointer-events: none;
2702
2838
  }
2703
- .d-select::before {
2704
- top: calc(50% - 0.25em);
2705
- border-top-width: 0;
2706
- }
2707
- .d-select::after {
2708
- top: calc(50% + 0.125em);
2709
- border-bottom-width: 0;
2710
- }
2711
- .d-select--xs {
2712
- font-size: var(--fs-200);
2713
- }
2714
- .d-select--xs .d-select__input {
2715
- padding-top: var(--space-100 / 2);
2716
- padding-bottom: calc(var(--space-400) + var(--space-100));
2717
- font-size: var(--fs-100);
2718
- }
2719
- .d-select--xs .d-select__input .d-btn__icon {
2720
- width: 1.4rem;
2721
- height: 1.4rem;
2722
- }
2723
- .d-select--sm {
2724
- font-size: var(--fs-200);
2725
- }
2726
- .d-select--sm .d-select__input {
2727
- --padding-y: calc(var(--space-300) + var(--space-200));
2728
- padding-top: var(--padding-y);
2729
- padding-bottom: var(--padding-y);
2730
- font-size: var(--fs-200);
2731
- }
2732
- .d-select--sm .d-select__input .d-btn__icon {
2733
- width: 1.6rem;
2734
- height: 1.6rem;
2735
- }
2736
- .d-select--lg {
2737
- font-size: var(--fs-300);
2738
- }
2739
- .d-select--lg .d-select__input {
2740
- --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
2741
- padding-top: var(--padding-y);
2742
- padding-bottom: var(--padding-y);
2743
- font-size: var(--fs-300);
2744
- }
2745
- .d-select--lg .d-select__input .d-btn__icon {
2746
- width: 2rem;
2747
- height: 2rem;
2748
- }
2749
- .d-select--xl {
2750
- font-size: var(--fs-300);
2751
- }
2752
- .d-select--xl .d-select__input {
2753
- --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
2754
- padding-top: var(--padding-y);
2755
- padding-bottom: var(--padding-y);
2756
- font-size: var(--fs-300);
2757
- }
2758
- .d-select--xl .d-select__input .d-btn__icon {
2759
- width: 2.4rem;
2760
- height: 2.4rem;
2761
- }
2762
2839
  .d-select__input {
2763
- --select-input-padding: calc(var(--space-400) - var(--space-100)) 2em calc(var(--space-400) - var(--space-100)) var(--space-400);
2764
- height: 100%;
2765
- padding: var(--select-input-padding) !important;
2766
- color: var(--select-color-text);
2767
- background-color: var(--select-color-background);
2768
- border-color: var(--select-color-border);
2769
- -webkit-appearance: none;
2770
- -moz-appearance: none;
2771
- appearance: none;
2840
+ --select-color-border: var(--input-color-border);
2841
+ --select-notch-padding-right: calc(var(--space-300) * 6);
2772
2842
  --input-color-border-focus: var(--purple-400);
2773
- --input-color-border: var(--black-600);
2774
- --input-color-background: var(--white);
2775
- --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);
2776
2853
  position: relative;
2777
2854
  display: inline-flex;
2778
2855
  flex: 1 0%;
2779
2856
  box-sizing: border-box;
2780
2857
  width: 100%;
2781
2858
  min-width: 0;
2782
- padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
2859
+ padding: var(--input-padding-y) var(--input-padding-x);
2783
2860
  color: var(--input-color-text);
2784
2861
  font-weight: inherit;
2785
- font-size: var(--fs-200);
2862
+ font-size: var(--input-font-size);
2786
2863
  font-family: inherit;
2787
- line-height: var(--lh4);
2864
+ line-height: var(--input-line-height);
2788
2865
  background-color: var(--input-color-background);
2789
- border: 1px solid var(--input-color-border);
2790
- border-radius: var(--base--corner-radius);
2866
+ border: var(--input-border-width) solid var(--input-color-border);
2867
+ border-radius: var(--input-border-radius);
2791
2868
  outline: none;
2792
2869
  box-shadow: none;
2793
2870
  transition-timing-function: var(--ttf-in-out);
2794
2871
  transition-duration: 100ms;
2795
2872
  transition-property: border, box-shadow, background-color;
2796
- --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);
2797
2879
  }
2798
2880
  .d-select__input::placeholder {
2799
2881
  color: var(--fc-placeholder);
@@ -2809,8 +2891,8 @@ legend .d-label {
2809
2891
  }
2810
2892
  .d-select__input[disabled],
2811
2893
  .d-select__input[read-only] {
2812
- --input-color-border: var(--black-400) !important;
2813
- --input-color-background: var(--black-300);
2894
+ --input-color-border: transparent !important;
2895
+ --input-color-background: var(--input-color-background-disabled);
2814
2896
  --input-color-text: var(--fc-disabled);
2815
2897
  }
2816
2898
  .d-select__input[disabled]:focus,
@@ -2826,14 +2908,27 @@ legend .d-label {
2826
2908
  .d-select__input[disabled] {
2827
2909
  cursor: not-allowed;
2828
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
+ }
2829
2921
  .d-select__input:focus {
2830
2922
  --select-color-border: var(--purple-400);
2831
2923
  box-shadow: var(--bs-focus-ring);
2832
2924
  }
2833
- .d-select__input:disabled {
2925
+ .d-select__input[disabled],
2926
+ .d-select__input[read-only] {
2834
2927
  color: var(--fc-disabled);
2835
- background: var(--black-300);
2836
- 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);
2837
2932
  }
2838
2933
  .d-select__input::-moz-focus-inner {
2839
2934
  outline: none !important;
@@ -2845,30 +2940,79 @@ legend .d-label {
2845
2940
  .d-select__input::-ms-expand {
2846
2941
  display: none;
2847
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
+ }
2848
2992
  .d-select__input--success {
2849
- --select-color-border: var(--success-color);
2993
+ --input-color-border: var(--success-color);
2850
2994
  }
2851
2995
  .d-select__input--success:focus {
2852
- --select-color-border: var(--success-color);
2996
+ --input-color-border: var(--success-color);
2853
2997
  box-shadow: var(--bs-focus-ring-success) !important;
2854
2998
  }
2855
2999
  .d-select__input--error {
2856
- --select-color-border: var(--error-color);
3000
+ --input-color-border: var(--error-color);
2857
3001
  }
2858
3002
  .d-select__input--error:focus {
2859
- --select-color-border: var(--error-color);
3003
+ --input-color-border: var(--error-color);
2860
3004
  box-shadow: var(--bs-focus-ring-error) !important;
2861
3005
  }
2862
3006
  .d-select__input--warning {
2863
- --select-color-border: var(--warning-color);
3007
+ --input-color-border: var(--gold-400);
2864
3008
  }
2865
3009
  .d-select__input--warning:focus {
2866
- --select-color-border: var(--warning-color);
3010
+ --input-color-border: var(--warning-color);
2867
3011
  box-shadow: var(--bs-focus-ring-warning) !important;
2868
3012
  }
2869
3013
  .d-select--disabled::before,
2870
3014
  .d-select--disabled::after {
2871
- border-color: var(--black-500) transparent;
3015
+ opacity: 0.33;
2872
3016
  }
2873
3017
  .skeleton-placeholder {
2874
3018
  display: flex;
@@ -3074,15 +3218,22 @@ legend .d-label {
3074
3218
  .d-tooltip {
3075
3219
  --tooltip-color-background: var(--black-800);
3076
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);
3077
3226
  z-index: var(--zi-tooltip);
3078
3227
  max-width: calc(var(--size-300) * 54);
3079
- padding: var(--space-400);
3228
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
3080
3229
  color: var(--tooltip-color-text);
3230
+ font-weight: var(--tooltip-font-weight);
3081
3231
  font-size: var(--fs-100);
3082
- line-height: var(--lh-300);
3232
+ line-height: var(--tooltip-line-height);
3233
+ letter-spacing: calc(var(--size-100) * 0.25);
3083
3234
  text-align: center;
3084
3235
  background-color: var(--tooltip-color-background);
3085
- border-radius: var(--size-300);
3236
+ border-radius: var(--tooltip-border-radius);
3086
3237
  }
3087
3238
  .d-tooltip::after {
3088
3239
  position: absolute;
@@ -10199,27 +10350,10 @@ body.theme-dark .d\:d-divide-red-500 > * + * {
10199
10350
  body.theme-dark .d\:d-bgc-red-500 {
10200
10351
  --bgo: 100%;
10201
10352
  background-color: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--bgo)) !important;
10202
- }
10203
- .d-fc-red-400,
10204
- .h\:d-fc-red-400:hover,
10205
- .f\:d-fc-red-400:focus,
10206
- .d-fc-error,
10207
- .h\:d-fc-error:hover,
10208
- .f\:d-fc-error:focus,
10209
- .f\:d-fc-error:focus-within,
10210
- .fv\:d-fc-error.focus-visible.js-focus-visible,
10211
- .js-focus-visible .fv\:d-fc-error.focus-visible {
10212
- --fco: 100%;
10213
- color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--fco)) !important;
10214
- }
10215
- .d-fc-red-400,
10216
- .h\:d-fc-red-400:hover,
10217
- .f\:d-fc-red-400:focus,
10218
- .d-fc-error,
10219
- .h\:d-fc-error:hover,
10220
- .f\:d-fc-error:focus,
10221
- .f\:d-fc-error:focus-within,
10222
- .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 {
10223
10357
  --fco: 100%;
10224
10358
  color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--fco)) !important;
10225
10359
  }
@@ -10317,7 +10451,24 @@ body.theme-dark .d\:d-bgc-red-400 {
10317
10451
  }
10318
10452
  .d-fc-red-300,
10319
10453
  .h\:d-fc-red-300:hover,
10320
- .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 {
10321
10472
  --fco: 100%;
10322
10473
  color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
10323
10474
  }
@@ -14551,12 +14702,18 @@ body.theme-dark .d\:d-bgg-to-0 {
14551
14702
  .d-td200 {
14552
14703
  transition-duration: var(--td200) !important;
14553
14704
  }
14705
+ .d-td300 {
14706
+ transition-duration: var(--td300) !important;
14707
+ }
14554
14708
  .d-ttf-in-out {
14555
14709
  transition-timing-function: var(--ttf-in-out) !important;
14556
14710
  }
14557
14711
  .d-ttf-out {
14558
14712
  transition-timing-function: var(--ttf-out) !important;
14559
14713
  }
14714
+ .ttf-out-quint {
14715
+ transition-timing-function: var(--ttf-out-quint) !important;
14716
+ }
14560
14717
  .d-tp-all {
14561
14718
  transition-property: all !important;
14562
14719
  }
@@ -14590,6 +14747,9 @@ body.theme-dark .d\:d-bgg-to-0 {
14590
14747
  .d-t-delay200 {
14591
14748
  transition-delay: var(--td200) !important;
14592
14749
  }
14750
+ .d-t-delay300 {
14751
+ transition-delay: var(--td300) !important;
14752
+ }
14593
14753
  .d-ac-center {
14594
14754
  align-content: center !important;
14595
14755
  }
@@ -20240,18 +20400,18 @@ body {
20240
20400
  --red-200-hsl: var(--red-200-h) var(--red-200-s) var(--red-200-l);
20241
20401
  --red-200: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--alpha, 100%));
20242
20402
  --red-300-h: 0;
20243
- --red-300-s: 100%;
20244
- --red-300-l: 59.01960784%;
20403
+ --red-300-s: 88.8%;
20404
+ --red-300-l: 49.01960784%;
20245
20405
  --red-300-hsl: var(--red-300-h) var(--red-300-s) var(--red-300-l);
20246
20406
  --red-300: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--alpha, 100%));
20247
20407
  --red-400-h: 0;
20248
- --red-400-s: 81.21546961%;
20249
- --red-400-l: 35.49019608%;
20408
+ --red-400-s: 88.65979381%;
20409
+ --red-400-l: 38.03921569%;
20250
20410
  --red-400-hsl: var(--red-400-h) var(--red-400-s) var(--red-400-l);
20251
20411
  --red-400: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--alpha, 100%));
20252
20412
  --red-500-h: 0;
20253
- --red-500-s: 100%;
20254
- --red-500-l: 16.47058824%;
20413
+ --red-500-s: 89.58333333%;
20414
+ --red-500-l: 18.82352941%;
20255
20415
  --red-500-hsl: var(--red-500-h) var(--red-500-s) var(--red-500-l);
20256
20416
  --red-500: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--alpha, 100%));
20257
20417
  --blue-100-h: 210;
@@ -20304,18 +20464,18 @@ body {
20304
20464
  --tan-500-l: 7.05882353%;
20305
20465
  --tan-500-hsl: var(--tan-500-h) var(--tan-500-s) var(--tan-500-l);
20306
20466
  --tan-500: hsla(var(--tan-500-h) var(--tan-500-s) var(--tan-500-l) / var(--alpha, 100%));
20307
- --error-color: var(--red-400);
20308
- --error-color-hsl: var(--red-400-hsl);
20309
- --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%));
20310
20470
  --warning-color: var(--fc-warning);
20311
- --warning-color-hsl: var(--yellow-500-hsl);
20471
+ --warning-color-hsl: var(--gold-500-hsl);
20312
20472
  --warning-color-hover: var(--fc-warning-hover);
20313
20473
  --success-color: var(--fc-success);
20314
20474
  --success-color-hsl: var(--green-500-hsl);
20315
20475
  --success-color-hover: var(--green-500);
20316
- --muted-color: var(--black-800);
20317
- --muted-color-hsl: var(--black-800-hsl);
20318
- --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);
20319
20479
  --inverted-color: var(--fc-primary-inverted);
20320
20480
  --inverted-color-hsl: var(--black-100-hsl);
20321
20481
  --inverted-color-hover: var(--black-200);
@@ -20367,11 +20527,13 @@ body {
20367
20527
  --bs-focus-ring-inverted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
20368
20528
  --ttf-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
20369
20529
  --ttf-out: cubic-bezier(0.23, 1, 0.32, 1);
20530
+ --ttf-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
20370
20531
  --td0: 0s;
20371
20532
  --td50: 50ms;
20372
20533
  --td100: 100ms;
20373
20534
  --td150: 150ms;
20374
20535
  --td200: 200ms;
20536
+ --td300: 300ms;
20375
20537
  --bgg-pattern-blob-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQmxvYiBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fYmxvYkRhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xIDBhMSAxIDAgMDAtMSAxdjIuM2ExIDEgMCAwMDEgMWg0LjAyYy0uMDEzLjA2NS0uMDIuMTMyLS4wMi4ydjIuM0gxYTEgMSAwIDAwLTEgMXYyLjNhMSAxIDAgMDAxIDFoNC4wMmMtLjAxMy4wNjUtLjAyLjEzMi0uMDIuMnYyLjNIMWExIDEgMCAwMC0xIDF2Mi4zYTEgMSAwIDAwMSAxaDQuMDJjLS4wMTMuMDY1LS4wMi4xMzItLjAyLjJWMjBoOHYtMS45YTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4ydi0yLjNoNGExIDEgMCAwMDEtMXYtMi4zYTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4yVjcuOGg0YTEgMSAwIDAwMS0xVjQuNWExIDEgMCAwMC0xLTFINy45OGMuMDEzLS4wNjUuMDItLjEzMi4wMi0uMnYtMmg0YTEgMSAwIDAwMS0xVjBIMXoiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
20376
20538
  --bgg-pattern-chevrons-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ2hldnJvbnMgRGFyayIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2NoZXZyb25zRGFyayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTExLjAyNyAxLjMyNEMxMS42IDEuMTM0IDExLjk4OS42MDIgMTIgMEgwdjFsNiAyIDUuMDI3LTEuNjc2ek0wIDN2M2w2IDIgNS4wMjctMS42NzZhMS40MjMgMS40MjMgMCAxMC0uOS0yLjdMNiA1IDAgM3pNMCA4djNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTAgMCA4ek0wIDEzdjNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTVsLTYtMnpNMCAxOHYyaDEydi0uMDI2YzAtLjk3MS0uOTUyLTEuNjU3LTEuODczLTEuMzVMNiAyMGwtNi0yeiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
20377
20539
  --bgg-pattern-crosses-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NlcyBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fY3Jvc3Nlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMWExIDEgMCAwMC0xLTFIMHYyaDN2M0gwdjJoM3YzSDB2MmgzdjNIMHYyaDN2M2gydi0zaDJ2M2gydi0zaDJhMSAxIDAgMTAwLTJIOXYtM2gyYTEgMSAwIDEwMC0ySDlWN2gyYTEgMSAwIDEwMC0ySDlWMmgyYTEgMSAwIDAwMS0xek03IDJINXYzaDJWMnptMCA1SDV2M2gyVjd6bTAgNUg1djNoMnYtM3oiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
@@ -20474,9 +20636,9 @@ body {
20474
20636
  --fc-muted: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--alpha, 50%));
20475
20637
  --fc-placeholder: var(--black-500);
20476
20638
  --fc-disabled: var(--black-500);
20477
- --fc-error: var(--red-400);
20639
+ --fc-error: var(--red-300);
20478
20640
  --fc-success: #00671d;
20479
- --fc-warning: #683e00;
20641
+ --fc-warning: var(--gold-500);
20480
20642
  --fc-warning-hover: var(--black-900);
20481
20643
  --base--text-color: var(--fc-primary);
20482
20644
  --base--background-color: var(--white);
@@ -20500,10 +20662,6 @@ body {
20500
20662
  --focus-ring-error: hsla(var(--error-color-hsl) / 75%);
20501
20663
  --focus-ring-muted: var(--focus-ring);
20502
20664
  --focus-ring-inverted: hsla(var(--inverted-color-hsl) / 50%);
20503
- --input-button__padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
20504
- --input-button__text-size: var(--fs-200);
20505
- --input-button__line-height: var(--lh4);
20506
- --input-button__icon-size: 1.8rem;
20507
20665
  --primary-color-h: var(--purple-400-h);
20508
20666
  --primary-color-s: var(--purple-400-s);
20509
20667
  --primary-color-l: var(--purple-400-l);
@@ -20721,18 +20879,18 @@ body.theme-dark {
20721
20879
  --green-500-hsl: var(--green-500-h) var(--green-500-s) var(--green-500-l);
20722
20880
  --green-500: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(--alpha, 100%));
20723
20881
  --red-100-h: 0;
20724
- --red-100-s: 100%;
20725
- --red-100-l: 16.47058824%;
20882
+ --red-100-s: 89.58333333%;
20883
+ --red-100-l: 18.82352941%;
20726
20884
  --red-100-hsl: var(--red-100-h) var(--red-100-s) var(--red-100-l);
20727
20885
  --red-100: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--alpha, 100%));
20728
20886
  --red-200-h: 0;
20729
- --red-200-s: 81.21546961%;
20730
- --red-200-l: 35.49019608%;
20887
+ --red-200-s: 88.65979381%;
20888
+ --red-200-l: 38.03921569%;
20731
20889
  --red-200-hsl: var(--red-200-h) var(--red-200-s) var(--red-200-l);
20732
20890
  --red-200: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--alpha, 100%));
20733
20891
  --red-300-h: 0;
20734
- --red-300-s: 100%;
20735
- --red-300-l: 59.01960784%;
20892
+ --red-300-s: 88.8%;
20893
+ --red-300-l: 49.01960784%;
20736
20894
  --red-300-hsl: var(--red-300-h) var(--red-300-s) var(--red-300-l);
20737
20895
  --red-300: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--alpha, 100%));
20738
20896
  --red-400-h: 0;
@@ -20751,23 +20909,21 @@ body.theme-dark {
20751
20909
  .sm\:d-description {
20752
20910
  display: flex;
20753
20911
  box-sizing: border-box;
20754
- margin-bottom: calc(var(--space-300) + var(--space-200));
20755
- color: var(--black-600);
20912
+ color: var(--fc-tertiary);
20756
20913
  font-size: var(--fs-100);
20757
20914
  font-family: inherit;
20758
- line-height: var(--lh4);
20915
+ line-height: var(--lh-400);
20759
20916
  fill: currentColor;
20760
20917
  }
20761
20918
  .sm\:d-label + .d-description {
20762
- 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);
20763
20921
  }
20764
20922
  .sm\:d-description--lg {
20765
20923
  font-size: var(--fs-200);
20766
- line-height: var(--lh6);
20767
20924
  }
20768
20925
  .sm\:d-description--xl {
20769
20926
  font-size: var(--fs-200);
20770
- line-height: var(--lh6);
20771
20927
  }
20772
20928
  .sm\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
20773
20929
  border-top-left-radius: 0;
@@ -21110,9 +21266,12 @@ body.theme-dark {
21110
21266
  }
21111
21267
  .sm\:d-modal {
21112
21268
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
21269
+ --modal-dialog-padding: var(--space-600);
21113
21270
  --modal-dialog-color-background: var(--white);
21114
21271
  --modal-dialog-color-text: var(--fc-tertiary);
21115
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);
21116
21275
  position: fixed;
21117
21276
  top: 0;
21118
21277
  right: 0;
@@ -21152,16 +21311,20 @@ body.theme-dark {
21152
21311
  .sm\:d-modal__dialog {
21153
21312
  position: relative;
21154
21313
  z-index: var(--zi-hide);
21314
+ display: flex;
21315
+ flex-direction: column;
21316
+ gap: var(--space-500);
21155
21317
  width: 100%;
21156
21318
  max-width: calc(var(--size-300) * 157);
21157
21319
  max-height: 100%;
21320
+ padding: var(--modal-dialog-padding);
21158
21321
  overflow-y: auto;
21159
21322
  color: var(--modal-dialog-color-text);
21160
21323
  font-size: var(--fs-200);
21161
- line-height: var(--lh8);
21324
+ line-height: var(--lh-400);
21162
21325
  background-color: var(--modal-dialog-color-background);
21163
- border-radius: var(--br8);
21164
- box-shadow: var(--bs-card);
21326
+ border-radius: var(--size-500);
21327
+ box-shadow: var(--modal-dialog-shadow);
21165
21328
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
21166
21329
  backface-visibility: hidden;
21167
21330
  visibility: hidden;
@@ -21181,51 +21344,58 @@ body.theme-dark {
21181
21344
  --modal-footer-padding: calc(var(--space-300) * 6);
21182
21345
  display: flex;
21183
21346
  flex-direction: row-reverse;
21347
+ gap: var(--space-400);
21184
21348
  align-items: center;
21185
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
21186
- }
21187
- .sm\:d-modal__footer > :not(:first-child) {
21188
- margin-right: var(--space-300);
21189
- }
21190
- .sm\:d-modal__footer > :not(:last-child) {
21191
- margin-left: var(--space-300);
21192
21349
  }
21193
21350
  .sm\:d-modal__header {
21194
21351
  --modal-header-padding: calc(var(--space-300) * 6);
21195
21352
  margin: 0 !important;
21196
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
21197
21353
  color: var(--modal-header-color-text);
21198
- font-weight: var(--fw-bold);
21199
- font-size: var(--fs-300);
21200
- line-height: var(--lh4);
21354
+ font-weight: var(--fw-medium);
21355
+ font-size: var(--fs-400);
21356
+ line-height: var(--lh-100);
21201
21357
  }
21202
21358
  .sm\:d-modal__content {
21203
21359
  max-width: 75ch;
21204
- margin: calc(var(--space-300) * 3) 0;
21205
- padding: var(--space-300) calc(var(--space-300) * 6);
21206
21360
  }
21207
21361
  .sm\:d-modal__close {
21208
21362
  position: absolute;
21209
- top: var(--space-400);
21210
- right: var(--space-400);
21363
+ top: var(--space-500);
21364
+ right: var(--space-500);
21211
21365
  margin: 0 !important;
21212
21366
  }
21213
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);
21214
21371
  position: relative;
21215
21372
  box-sizing: border-box;
21216
21373
  width: 100%;
21217
21374
  max-width: calc(var(--size-300) * 157);
21218
- 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);
21219
21377
  font-size: var(--fs-200);
21220
- line-height: var(--lh4);
21221
- background-color: var(--gold-100);
21222
- 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: '';
21223
21392
  }
21224
21393
  .sm\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
21225
21394
  border-top-left-radius: 0;
21226
21395
  border-top-right-radius: 0;
21227
21396
  }
21228
21397
  .sm\:d-modal--full {
21398
+ --modal-dialog-padding: 0;
21229
21399
  padding: 0;
21230
21400
  overflow: hidden scroll;
21231
21401
  transform: unset !important;
@@ -22158,14 +22328,19 @@ body.theme-dark {
22158
22328
  .sm\:d-t0 {
22159
22329
  top: 0 !important;
22160
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
+ }
22161
22338
  .sm\:d-popover__dialog {
22162
22339
  display: grid;
22163
- grid-template-rows: auto 1fr;
22340
+ grid-template-rows: 1fr;
22164
22341
  overflow: auto;
22165
- background-color: var(--white);
22166
- border-color: var(--black-400);
22167
- border-radius: var(--br8);
22168
- box-shadow: var(--bs-card);
22342
+ border-radius: var(--popover-border-radius);
22343
+ box-shadow: var(--popover-shadow);
22169
22344
  }
22170
22345
  .sm\:d-popover__dialog,
22171
22346
  .d-popover__dialog *,
@@ -22179,7 +22354,8 @@ body.theme-dark {
22179
22354
  .sm\:d-popover__content {
22180
22355
  overflow: auto;
22181
22356
  }
22182
- .sm\:d-popover__header-footer-base {
22357
+ .sm\:d-popover__header,
22358
+ .d-popover__footer {
22183
22359
  display: flex;
22184
22360
  align-items: center;
22185
22361
  justify-content: flex-end;
@@ -22192,30 +22368,10 @@ body.theme-dark {
22192
22368
  font-size: var(--fs-200);
22193
22369
  }
22194
22370
  .sm\:d-popover__header {
22195
- display: flex;
22196
- align-items: center;
22197
- justify-content: flex-end;
22198
- width: 100%;
22199
- min-height: var(--size48);
22200
- padding-top: calc(var(--space-300) + var(--space-200));
22201
- padding-bottom: calc(var(--space-300) + var(--space-200));
22202
- overflow: auto;
22203
- font-weight: var(--fw-semibold);
22204
- font-size: var(--fs-200);
22205
- border-bottom: var(--size-100) solid var(--black-300);
22371
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
22206
22372
  }
22207
22373
  .sm\:d-popover__footer {
22208
- display: flex;
22209
- align-items: center;
22210
- justify-content: flex-end;
22211
- width: 100%;
22212
- min-height: var(--size48);
22213
- padding-top: calc(var(--space-300) + var(--space-200));
22214
- padding-bottom: calc(var(--space-300) + var(--space-200));
22215
- overflow: auto;
22216
- font-weight: var(--fw-semibold);
22217
- font-size: var(--fs-200);
22218
- border-top: var(--size-100) solid var(--black-300);
22374
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
22219
22375
  }
22220
22376
  .sm\:d-presence {
22221
22377
  --presence-color-border-base: var(--black-100);
@@ -23064,23 +23220,21 @@ body.theme-dark {
23064
23220
  .md\:d-description {
23065
23221
  display: flex;
23066
23222
  box-sizing: border-box;
23067
- margin-bottom: calc(var(--space-300) + var(--space-200));
23068
- color: var(--black-600);
23223
+ color: var(--fc-tertiary);
23069
23224
  font-size: var(--fs-100);
23070
23225
  font-family: inherit;
23071
- line-height: var(--lh4);
23226
+ line-height: var(--lh-400);
23072
23227
  fill: currentColor;
23073
23228
  }
23074
23229
  .md\:d-label + .d-description {
23075
- 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);
23076
23232
  }
23077
23233
  .md\:d-description--lg {
23078
23234
  font-size: var(--fs-200);
23079
- line-height: var(--lh6);
23080
23235
  }
23081
23236
  .md\:d-description--xl {
23082
23237
  font-size: var(--fs-200);
23083
- line-height: var(--lh6);
23084
23238
  }
23085
23239
  .md\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
23086
23240
  border-top-left-radius: 0;
@@ -23423,9 +23577,12 @@ body.theme-dark {
23423
23577
  }
23424
23578
  .md\:d-modal {
23425
23579
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
23580
+ --modal-dialog-padding: var(--space-600);
23426
23581
  --modal-dialog-color-background: var(--white);
23427
23582
  --modal-dialog-color-text: var(--fc-tertiary);
23428
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);
23429
23586
  position: fixed;
23430
23587
  top: 0;
23431
23588
  right: 0;
@@ -23465,16 +23622,20 @@ body.theme-dark {
23465
23622
  .md\:d-modal__dialog {
23466
23623
  position: relative;
23467
23624
  z-index: var(--zi-hide);
23625
+ display: flex;
23626
+ flex-direction: column;
23627
+ gap: var(--space-500);
23468
23628
  width: 100%;
23469
23629
  max-width: calc(var(--size-300) * 157);
23470
23630
  max-height: 100%;
23631
+ padding: var(--modal-dialog-padding);
23471
23632
  overflow-y: auto;
23472
23633
  color: var(--modal-dialog-color-text);
23473
23634
  font-size: var(--fs-200);
23474
- line-height: var(--lh8);
23635
+ line-height: var(--lh-400);
23475
23636
  background-color: var(--modal-dialog-color-background);
23476
- border-radius: var(--br8);
23477
- box-shadow: var(--bs-card);
23637
+ border-radius: var(--size-500);
23638
+ box-shadow: var(--modal-dialog-shadow);
23478
23639
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
23479
23640
  backface-visibility: hidden;
23480
23641
  visibility: hidden;
@@ -23494,51 +23655,58 @@ body.theme-dark {
23494
23655
  --modal-footer-padding: calc(var(--space-300) * 6);
23495
23656
  display: flex;
23496
23657
  flex-direction: row-reverse;
23658
+ gap: var(--space-400);
23497
23659
  align-items: center;
23498
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
23499
- }
23500
- .md\:d-modal__footer > :not(:first-child) {
23501
- margin-right: var(--space-300);
23502
- }
23503
- .md\:d-modal__footer > :not(:last-child) {
23504
- margin-left: var(--space-300);
23505
23660
  }
23506
23661
  .md\:d-modal__header {
23507
23662
  --modal-header-padding: calc(var(--space-300) * 6);
23508
23663
  margin: 0 !important;
23509
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
23510
23664
  color: var(--modal-header-color-text);
23511
- font-weight: var(--fw-bold);
23512
- font-size: var(--fs-300);
23513
- line-height: var(--lh4);
23665
+ font-weight: var(--fw-medium);
23666
+ font-size: var(--fs-400);
23667
+ line-height: var(--lh-100);
23514
23668
  }
23515
23669
  .md\:d-modal__content {
23516
23670
  max-width: 75ch;
23517
- margin: calc(var(--space-300) * 3) 0;
23518
- padding: var(--space-300) calc(var(--space-300) * 6);
23519
23671
  }
23520
23672
  .md\:d-modal__close {
23521
23673
  position: absolute;
23522
- top: var(--space-400);
23523
- right: var(--space-400);
23674
+ top: var(--space-500);
23675
+ right: var(--space-500);
23524
23676
  margin: 0 !important;
23525
23677
  }
23526
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);
23527
23682
  position: relative;
23528
23683
  box-sizing: border-box;
23529
23684
  width: 100%;
23530
23685
  max-width: calc(var(--size-300) * 157);
23531
- 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);
23532
23688
  font-size: var(--fs-200);
23533
- line-height: var(--lh4);
23534
- background-color: var(--gold-100);
23535
- 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: '';
23536
23703
  }
23537
23704
  .md\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
23538
23705
  border-top-left-radius: 0;
23539
23706
  border-top-right-radius: 0;
23540
23707
  }
23541
23708
  .md\:d-modal--full {
23709
+ --modal-dialog-padding: 0;
23542
23710
  padding: 0;
23543
23711
  overflow: hidden scroll;
23544
23712
  transform: unset !important;
@@ -24471,14 +24639,19 @@ body.theme-dark {
24471
24639
  .md\:d-t0 {
24472
24640
  top: 0 !important;
24473
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
+ }
24474
24649
  .md\:d-popover__dialog {
24475
24650
  display: grid;
24476
- grid-template-rows: auto 1fr;
24651
+ grid-template-rows: 1fr;
24477
24652
  overflow: auto;
24478
- background-color: var(--white);
24479
- border-color: var(--black-400);
24480
- border-radius: var(--br8);
24481
- box-shadow: var(--bs-card);
24653
+ border-radius: var(--popover-border-radius);
24654
+ box-shadow: var(--popover-shadow);
24482
24655
  }
24483
24656
  .md\:d-popover__dialog,
24484
24657
  .d-popover__dialog *,
@@ -24492,7 +24665,8 @@ body.theme-dark {
24492
24665
  .md\:d-popover__content {
24493
24666
  overflow: auto;
24494
24667
  }
24495
- .md\:d-popover__header-footer-base {
24668
+ .md\:d-popover__header,
24669
+ .d-popover__footer {
24496
24670
  display: flex;
24497
24671
  align-items: center;
24498
24672
  justify-content: flex-end;
@@ -24505,30 +24679,10 @@ body.theme-dark {
24505
24679
  font-size: var(--fs-200);
24506
24680
  }
24507
24681
  .md\:d-popover__header {
24508
- display: flex;
24509
- align-items: center;
24510
- justify-content: flex-end;
24511
- width: 100%;
24512
- min-height: var(--size48);
24513
- padding-top: calc(var(--space-300) + var(--space-200));
24514
- padding-bottom: calc(var(--space-300) + var(--space-200));
24515
- overflow: auto;
24516
- font-weight: var(--fw-semibold);
24517
- font-size: var(--fs-200);
24518
- border-bottom: var(--size-100) solid var(--black-300);
24682
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
24519
24683
  }
24520
24684
  .md\:d-popover__footer {
24521
- display: flex;
24522
- align-items: center;
24523
- justify-content: flex-end;
24524
- width: 100%;
24525
- min-height: var(--size48);
24526
- padding-top: calc(var(--space-300) + var(--space-200));
24527
- padding-bottom: calc(var(--space-300) + var(--space-200));
24528
- overflow: auto;
24529
- font-weight: var(--fw-semibold);
24530
- font-size: var(--fs-200);
24531
- border-top: var(--size-100) solid var(--black-300);
24685
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
24532
24686
  }
24533
24687
  .md\:d-presence {
24534
24688
  --presence-color-border-base: var(--black-100);
@@ -25377,23 +25531,21 @@ body.theme-dark {
25377
25531
  .lg\:d-description {
25378
25532
  display: flex;
25379
25533
  box-sizing: border-box;
25380
- margin-bottom: calc(var(--space-300) + var(--space-200));
25381
- color: var(--black-600);
25534
+ color: var(--fc-tertiary);
25382
25535
  font-size: var(--fs-100);
25383
25536
  font-family: inherit;
25384
- line-height: var(--lh4);
25537
+ line-height: var(--lh-400);
25385
25538
  fill: currentColor;
25386
25539
  }
25387
25540
  .lg\:d-label + .d-description {
25388
- 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);
25389
25543
  }
25390
25544
  .lg\:d-description--lg {
25391
25545
  font-size: var(--fs-200);
25392
- line-height: var(--lh6);
25393
25546
  }
25394
25547
  .lg\:d-description--xl {
25395
25548
  font-size: var(--fs-200);
25396
- line-height: var(--lh6);
25397
25549
  }
25398
25550
  .lg\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
25399
25551
  border-top-left-radius: 0;
@@ -25736,9 +25888,12 @@ body.theme-dark {
25736
25888
  }
25737
25889
  .lg\:d-modal {
25738
25890
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
25891
+ --modal-dialog-padding: var(--space-600);
25739
25892
  --modal-dialog-color-background: var(--white);
25740
25893
  --modal-dialog-color-text: var(--fc-tertiary);
25741
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);
25742
25897
  position: fixed;
25743
25898
  top: 0;
25744
25899
  right: 0;
@@ -25778,16 +25933,20 @@ body.theme-dark {
25778
25933
  .lg\:d-modal__dialog {
25779
25934
  position: relative;
25780
25935
  z-index: var(--zi-hide);
25936
+ display: flex;
25937
+ flex-direction: column;
25938
+ gap: var(--space-500);
25781
25939
  width: 100%;
25782
25940
  max-width: calc(var(--size-300) * 157);
25783
25941
  max-height: 100%;
25942
+ padding: var(--modal-dialog-padding);
25784
25943
  overflow-y: auto;
25785
25944
  color: var(--modal-dialog-color-text);
25786
25945
  font-size: var(--fs-200);
25787
- line-height: var(--lh8);
25946
+ line-height: var(--lh-400);
25788
25947
  background-color: var(--modal-dialog-color-background);
25789
- border-radius: var(--br8);
25790
- box-shadow: var(--bs-card);
25948
+ border-radius: var(--size-500);
25949
+ box-shadow: var(--modal-dialog-shadow);
25791
25950
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
25792
25951
  backface-visibility: hidden;
25793
25952
  visibility: hidden;
@@ -25807,51 +25966,58 @@ body.theme-dark {
25807
25966
  --modal-footer-padding: calc(var(--space-300) * 6);
25808
25967
  display: flex;
25809
25968
  flex-direction: row-reverse;
25969
+ gap: var(--space-400);
25810
25970
  align-items: center;
25811
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
25812
- }
25813
- .lg\:d-modal__footer > :not(:first-child) {
25814
- margin-right: var(--space-300);
25815
- }
25816
- .lg\:d-modal__footer > :not(:last-child) {
25817
- margin-left: var(--space-300);
25818
25971
  }
25819
25972
  .lg\:d-modal__header {
25820
25973
  --modal-header-padding: calc(var(--space-300) * 6);
25821
25974
  margin: 0 !important;
25822
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
25823
25975
  color: var(--modal-header-color-text);
25824
- font-weight: var(--fw-bold);
25825
- font-size: var(--fs-300);
25826
- line-height: var(--lh4);
25976
+ font-weight: var(--fw-medium);
25977
+ font-size: var(--fs-400);
25978
+ line-height: var(--lh-100);
25827
25979
  }
25828
25980
  .lg\:d-modal__content {
25829
25981
  max-width: 75ch;
25830
- margin: calc(var(--space-300) * 3) 0;
25831
- padding: var(--space-300) calc(var(--space-300) * 6);
25832
25982
  }
25833
25983
  .lg\:d-modal__close {
25834
25984
  position: absolute;
25835
- top: var(--space-400);
25836
- right: var(--space-400);
25985
+ top: var(--space-500);
25986
+ right: var(--space-500);
25837
25987
  margin: 0 !important;
25838
25988
  }
25839
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);
25840
25993
  position: relative;
25841
25994
  box-sizing: border-box;
25842
25995
  width: 100%;
25843
25996
  max-width: calc(var(--size-300) * 157);
25844
- 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);
25845
25999
  font-size: var(--fs-200);
25846
- line-height: var(--lh4);
25847
- background-color: var(--gold-100);
25848
- 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: '';
25849
26014
  }
25850
26015
  .lg\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
25851
26016
  border-top-left-radius: 0;
25852
26017
  border-top-right-radius: 0;
25853
26018
  }
25854
26019
  .lg\:d-modal--full {
26020
+ --modal-dialog-padding: 0;
25855
26021
  padding: 0;
25856
26022
  overflow: hidden scroll;
25857
26023
  transform: unset !important;
@@ -26784,14 +26950,19 @@ body.theme-dark {
26784
26950
  .lg\:d-t0 {
26785
26951
  top: 0 !important;
26786
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
+ }
26787
26960
  .lg\:d-popover__dialog {
26788
26961
  display: grid;
26789
- grid-template-rows: auto 1fr;
26962
+ grid-template-rows: 1fr;
26790
26963
  overflow: auto;
26791
- background-color: var(--white);
26792
- border-color: var(--black-400);
26793
- border-radius: var(--br8);
26794
- box-shadow: var(--bs-card);
26964
+ border-radius: var(--popover-border-radius);
26965
+ box-shadow: var(--popover-shadow);
26795
26966
  }
26796
26967
  .lg\:d-popover__dialog,
26797
26968
  .d-popover__dialog *,
@@ -26805,7 +26976,8 @@ body.theme-dark {
26805
26976
  .lg\:d-popover__content {
26806
26977
  overflow: auto;
26807
26978
  }
26808
- .lg\:d-popover__header-footer-base {
26979
+ .lg\:d-popover__header,
26980
+ .d-popover__footer {
26809
26981
  display: flex;
26810
26982
  align-items: center;
26811
26983
  justify-content: flex-end;
@@ -26818,30 +26990,10 @@ body.theme-dark {
26818
26990
  font-size: var(--fs-200);
26819
26991
  }
26820
26992
  .lg\:d-popover__header {
26821
- display: flex;
26822
- align-items: center;
26823
- justify-content: flex-end;
26824
- width: 100%;
26825
- min-height: var(--size48);
26826
- padding-top: calc(var(--space-300) + var(--space-200));
26827
- padding-bottom: calc(var(--space-300) + var(--space-200));
26828
- overflow: auto;
26829
- font-weight: var(--fw-semibold);
26830
- font-size: var(--fs-200);
26831
- border-bottom: var(--size-100) solid var(--black-300);
26993
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
26832
26994
  }
26833
26995
  .lg\:d-popover__footer {
26834
- display: flex;
26835
- align-items: center;
26836
- justify-content: flex-end;
26837
- width: 100%;
26838
- min-height: var(--size48);
26839
- padding-top: calc(var(--space-300) + var(--space-200));
26840
- padding-bottom: calc(var(--space-300) + var(--space-200));
26841
- overflow: auto;
26842
- font-weight: var(--fw-semibold);
26843
- font-size: var(--fs-200);
26844
- border-top: var(--size-100) solid var(--black-300);
26996
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
26845
26997
  }
26846
26998
  .lg\:d-presence {
26847
26999
  --presence-color-border-base: var(--black-100);
@@ -27690,23 +27842,21 @@ body.theme-dark {
27690
27842
  .xl\:d-description {
27691
27843
  display: flex;
27692
27844
  box-sizing: border-box;
27693
- margin-bottom: calc(var(--space-300) + var(--space-200));
27694
- color: var(--black-600);
27845
+ color: var(--fc-tertiary);
27695
27846
  font-size: var(--fs-100);
27696
27847
  font-family: inherit;
27697
- line-height: var(--lh4);
27848
+ line-height: var(--lh-400);
27698
27849
  fill: currentColor;
27699
27850
  }
27700
27851
  .xl\:d-label + .d-description {
27701
- 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);
27702
27854
  }
27703
27855
  .xl\:d-description--lg {
27704
27856
  font-size: var(--fs-200);
27705
- line-height: var(--lh6);
27706
27857
  }
27707
27858
  .xl\:d-description--xl {
27708
27859
  font-size: var(--fs-200);
27709
- line-height: var(--lh6);
27710
27860
  }
27711
27861
  .xl\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
27712
27862
  border-top-left-radius: 0;
@@ -28049,9 +28199,12 @@ body.theme-dark {
28049
28199
  }
28050
28200
  .xl\:d-modal {
28051
28201
  --modal-color-background: hsla(var(--black-900-hsl) / 60%);
28202
+ --modal-dialog-padding: var(--space-600);
28052
28203
  --modal-dialog-color-background: var(--white);
28053
28204
  --modal-dialog-color-text: var(--fc-tertiary);
28054
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);
28055
28208
  position: fixed;
28056
28209
  top: 0;
28057
28210
  right: 0;
@@ -28091,16 +28244,20 @@ body.theme-dark {
28091
28244
  .xl\:d-modal__dialog {
28092
28245
  position: relative;
28093
28246
  z-index: var(--zi-hide);
28247
+ display: flex;
28248
+ flex-direction: column;
28249
+ gap: var(--space-500);
28094
28250
  width: 100%;
28095
28251
  max-width: calc(var(--size-300) * 157);
28096
28252
  max-height: 100%;
28253
+ padding: var(--modal-dialog-padding);
28097
28254
  overflow-y: auto;
28098
28255
  color: var(--modal-dialog-color-text);
28099
28256
  font-size: var(--fs-200);
28100
- line-height: var(--lh8);
28257
+ line-height: var(--lh-400);
28101
28258
  background-color: var(--modal-dialog-color-background);
28102
- border-radius: var(--br8);
28103
- box-shadow: var(--bs-card);
28259
+ border-radius: var(--size-500);
28260
+ box-shadow: var(--modal-dialog-shadow);
28104
28261
  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
28105
28262
  backface-visibility: hidden;
28106
28263
  visibility: hidden;
@@ -28120,51 +28277,58 @@ body.theme-dark {
28120
28277
  --modal-footer-padding: calc(var(--space-300) * 6);
28121
28278
  display: flex;
28122
28279
  flex-direction: row-reverse;
28280
+ gap: var(--space-400);
28123
28281
  align-items: center;
28124
- padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
28125
- }
28126
- .xl\:d-modal__footer > :not(:first-child) {
28127
- margin-right: var(--space-300);
28128
- }
28129
- .xl\:d-modal__footer > :not(:last-child) {
28130
- margin-left: var(--space-300);
28131
28282
  }
28132
28283
  .xl\:d-modal__header {
28133
28284
  --modal-header-padding: calc(var(--space-300) * 6);
28134
28285
  margin: 0 !important;
28135
- padding: var(--modal-header-padding) var(--modal-header-padding) 0;
28136
28286
  color: var(--modal-header-color-text);
28137
- font-weight: var(--fw-bold);
28138
- font-size: var(--fs-300);
28139
- line-height: var(--lh4);
28287
+ font-weight: var(--fw-medium);
28288
+ font-size: var(--fs-400);
28289
+ line-height: var(--lh-100);
28140
28290
  }
28141
28291
  .xl\:d-modal__content {
28142
28292
  max-width: 75ch;
28143
- margin: calc(var(--space-300) * 3) 0;
28144
- padding: var(--space-300) calc(var(--space-300) * 6);
28145
28293
  }
28146
28294
  .xl\:d-modal__close {
28147
28295
  position: absolute;
28148
- top: var(--space-400);
28149
- right: var(--space-400);
28296
+ top: var(--space-500);
28297
+ right: var(--space-500);
28150
28298
  margin: 0 !important;
28151
28299
  }
28152
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);
28153
28304
  position: relative;
28154
28305
  box-sizing: border-box;
28155
28306
  width: 100%;
28156
28307
  max-width: calc(var(--size-300) * 157);
28157
- 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);
28158
28310
  font-size: var(--fs-200);
28159
- line-height: var(--lh4);
28160
- background-color: var(--gold-100);
28161
- 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: '';
28162
28325
  }
28163
28326
  .xl\:d-modal__banner:not(.d-d-none) + .d-modal__dialog {
28164
28327
  border-top-left-radius: 0;
28165
28328
  border-top-right-radius: 0;
28166
28329
  }
28167
28330
  .xl\:d-modal--full {
28331
+ --modal-dialog-padding: 0;
28168
28332
  padding: 0;
28169
28333
  overflow: hidden scroll;
28170
28334
  transform: unset !important;
@@ -29097,14 +29261,19 @@ body.theme-dark {
29097
29261
  .xl\:d-t0 {
29098
29262
  top: 0 !important;
29099
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
+ }
29100
29271
  .xl\:d-popover__dialog {
29101
29272
  display: grid;
29102
- grid-template-rows: auto 1fr;
29273
+ grid-template-rows: 1fr;
29103
29274
  overflow: auto;
29104
- background-color: var(--white);
29105
- border-color: var(--black-400);
29106
- border-radius: var(--br8);
29107
- box-shadow: var(--bs-card);
29275
+ border-radius: var(--popover-border-radius);
29276
+ box-shadow: var(--popover-shadow);
29108
29277
  }
29109
29278
  .xl\:d-popover__dialog,
29110
29279
  .d-popover__dialog *,
@@ -29118,7 +29287,8 @@ body.theme-dark {
29118
29287
  .xl\:d-popover__content {
29119
29288
  overflow: auto;
29120
29289
  }
29121
- .xl\:d-popover__header-footer-base {
29290
+ .xl\:d-popover__header,
29291
+ .d-popover__footer {
29122
29292
  display: flex;
29123
29293
  align-items: center;
29124
29294
  justify-content: flex-end;
@@ -29131,30 +29301,10 @@ body.theme-dark {
29131
29301
  font-size: var(--fs-200);
29132
29302
  }
29133
29303
  .xl\:d-popover__header {
29134
- display: flex;
29135
- align-items: center;
29136
- justify-content: flex-end;
29137
- width: 100%;
29138
- min-height: var(--size48);
29139
- padding-top: calc(var(--space-300) + var(--space-200));
29140
- padding-bottom: calc(var(--space-300) + var(--space-200));
29141
- overflow: auto;
29142
- font-weight: var(--fw-semibold);
29143
- font-size: var(--fs-200);
29144
- border-bottom: var(--size-100) solid var(--black-300);
29304
+ border-bottom: var(--popover-border-width) solid var(--popover-color-border);
29145
29305
  }
29146
29306
  .xl\:d-popover__footer {
29147
- display: flex;
29148
- align-items: center;
29149
- justify-content: flex-end;
29150
- width: 100%;
29151
- min-height: var(--size48);
29152
- padding-top: calc(var(--space-300) + var(--space-200));
29153
- padding-bottom: calc(var(--space-300) + var(--space-200));
29154
- overflow: auto;
29155
- font-weight: var(--fw-semibold);
29156
- font-size: var(--fs-200);
29157
- border-top: var(--size-100) solid var(--black-300);
29307
+ border-top: var(--popover-border-width) solid var(--popover-color-border);
29158
29308
  }
29159
29309
  .xl\:d-presence {
29160
29310
  --presence-color-border-base: var(--black-100);