@forgerock/login-widget 1.2.0-beta.1 → 1.2.0-beta.3

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 (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/index.cjs +429 -155
  3. package/index.cjs.map +1 -1
  4. package/index.js +429 -155
  5. package/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/widget.css +294 -147
package/widget.css CHANGED
@@ -676,16 +676,18 @@ outline: 2px solid transparent;
676
676
  outline-offset: 2px;
677
677
  }
678
678
  .tw_focusable-element {
679
- outline-color: rgba(126, 34, 206, 0.30000000000000004);
679
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.7);
680
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.30000000000000004));
680
681
  outline-offset: 0;
681
682
  outline-style: solid;
682
683
  outline-width: 0;
683
684
  transition: background-color ease-in-out 0.15s, outline-color ease-in-out 0.2s, outline-offset ease-in-out 0.1s;
684
685
  }
685
686
  .tw_focusable-element:focus {
687
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.1);
686
688
  outline-offset: 0;
687
689
  outline-width: 3px;
688
- outline-color: rgba(126, 34, 206, 0.9);
690
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.9));
689
691
  }
690
692
  .tw_focusable-element:active {
691
693
  outline-offset: 2px;
@@ -695,66 +697,85 @@ outline-width: 4px;
695
697
  margin-bottom: 1rem;
696
698
  }
697
699
  .tw_primary-header {
698
- color: #334155;
699
- font-size: 2rem;
700
+ --color: hsl(var(--tw-colors-header-dark-hs),var(--tw-colors-header-dark-l));
701
+ --font-size: var(--tw-font-size-2xl-type);
702
+ color: var(--color, #334155);
703
+ font-size: var(--font-size, 2rem);
700
704
  font-weight: 300;
701
705
  margin-bottom: 1rem;
702
706
  text-align: center;
703
707
  }
704
708
  .tw_secondary-header {
709
+ --font-size: var(--tw-font-size-lg-type);
705
710
  font-weight: 500;
706
- font-size: 1.25rem;
711
+ font-size: var(--font-size, 1.25rem);
707
712
  margin-bottom: 1rem;
708
713
  }
709
714
  }
710
715
  @layer fr-widget.components {
711
716
  .tw_alert {
712
- background-color: #f1f5f9;
713
- border-color: hsl(210, 40%, 86.5%);
717
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
718
+ --border-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 10%));
719
+ --font-size: var(--tw-font-size-base-type);
720
+ background-color: var(--bg-color, #f1f5f9);
721
+ border-color: var(--border-color, hsl(210, 40%, 86.5%));
714
722
  border-radius: 0.25rem;
715
723
  border-width: 1px;
716
724
  color: #000;
717
- font-size: 0.9375rem;
725
+ font-size: var(--font-size, 0.9375rem);
718
726
  margin-bottom: 1.5rem;
719
727
  padding: 1rem;
720
728
  }
721
729
  .tw_alert:focus {
730
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.1);
722
731
  border-radius: 0.25rem;
723
- outline-color: rgba(126, 34, 206, 0.9);
732
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.9));
724
733
  outline-offset: 2px;
725
734
  outline-style: solid;
726
735
  outline-width: 3px;
727
736
  }
728
737
  .tw_alert-error {
729
- background-color: #fecaca;
730
- border-color: #991b1b;
738
+ --bg-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
739
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
740
+ background-color: var(--bg-color, #fecaca);
741
+ border-color: var(--border-color, #991b1b);
731
742
  }
732
743
  .tw_alert-error svg {
733
- color: #991b1b;
744
+ --color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
745
+ color: var(--color, #991b1b);
734
746
  fill: currentColor;
735
747
  }
736
748
  .tw_alert-info {
737
- background-color: hsl(200.39999999999998, 97.8%, 69.3%);
738
- border-color: #027AB8;
749
+ --bg-color: hsl(var(--tw-colors-primary-light-hs), calc(var(--tw-colors-primary-light-l) + 90%));
750
+ --border-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
751
+ background-color: var(--bg-color, hsl(200.39999999999998, 97.8%, 69.3%));
752
+ border-color: var(--border-color, #027AB8);
739
753
  }
740
754
  .tw_alert-info svg {
741
- color: #334155;
755
+ --color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
756
+ color: var(--color, #334155);
742
757
  fill: currentColor;
743
758
  }
744
759
  .tw_alert-success {
745
- background-color: #bbf7d0;
746
- border-color: #166534;
760
+ --bg-color: hsl(var(--tw-colors-success-light-hs),var(--tw-colors-success-light-l));
761
+ --border-color: hsl(var(--tw-colors-success-dark-hs),var(--tw-colors-success-dark-l));
762
+ background-color: var(--alert-success-background-color, #bbf7d0);
763
+ border-color: var(--border-color, #166534);
747
764
  }
748
765
  .tw_alert-success svg {
749
- color: #166534;
766
+ --color: hsl(var(--tw-colors-success-dark-hs),var(--tw-colors-success-dark-l));
767
+ color: var(--color, #166534);
750
768
  fill: currentColor;
751
769
  }
752
770
  .tw_alert-warning {
753
- background-color: #fef08a;
754
- border-color: #854d0e;
771
+ --bg-color: hsl(var(--tw-colors-warning-light-hs),var(--tw-colors-warning-light-l));
772
+ --border-color: hsl(var(--tw-colors-warning-dark-hs),var(--tw-colors-warning-dark-l));
773
+ background-color: var(--bg-color, #fef08a);
774
+ border-color: var(--border-color, #854d0e);
755
775
  }
756
776
  .tw_alert-warning svg {
757
- color: #854d0e;
777
+ --color: hsl(var(--tw-colors-warning-dark-hs),var(tw-tw-colors-warning-dark-l));
778
+ color: var(--color, #854d0e);
758
779
  fill: currentColor;
759
780
  }
760
781
  .tw_button-base {
@@ -792,26 +813,32 @@ z-index: -1;
792
813
  opacity: 0.05;
793
814
  }
794
815
  .tw_button-primary {
795
- border-color: #334155;
796
- background-color: #334155;
816
+ --bg-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
817
+ --border-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
818
+ background-color: var(--bg-color, #334155);
819
+ border-color: var(--border-color, #334155);
797
820
  color: #fff;
798
821
  }
799
822
  .tw_button-primary:hover::before, .tw_button-primary:focus::before {
800
823
  opacity: 0.2;
801
824
  }
802
825
  .tw_button-outline {
803
- border-color: #374151;
826
+ --border-color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
827
+ border-color: var(--border-color, #374151);
804
828
  }
805
829
  .tw_button-secondary {
806
- border-color: #d1d5db;
807
- background-color: #d1d5db;
830
+ --bg-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
831
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
832
+ background-color: var(--bg-color, #d1d5db);
833
+ border-color: var(--border-color, #d1d5db);
808
834
  color: #000;
809
835
  }
810
836
  .tw_button-secondary:hover::before, .tw_button-secondary:focus::before {
811
837
  opacity: 0.1;
812
838
  }
813
839
  .tw_checkbox-input {
814
- accent-color: #334155;
840
+ --accent-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
841
+ accent-color: var(--accent-color, #334155);
815
842
  border-radius: 0.25rem;
816
843
  flex: 1;
817
844
  height: 1rem;
@@ -830,8 +857,9 @@ display: none;
830
857
  display: none;
831
858
  }
832
859
  .tw_checkbox-input[aria-invalid="true"] {
860
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) + 1%));
833
861
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(153, 27, 27)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
834
- background-color: hsl(210, 40%, 97%);
862
+ background-color: var(--bg-color, hsl(210, 40%, 97%));
835
863
  background-position: right 0.75rem center;
836
864
  background-size: 1rem 1rem;
837
865
  }
@@ -839,102 +867,133 @@ background-size: 1rem 1rem;
839
867
  display: block;
840
868
  }
841
869
  .tw_checkbox-input[aria-invalid="true"] ~ button {
842
- border-color: #991b1b;
870
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
871
+ border-color: var(--border-color, #991b1b);
843
872
  }
844
873
  .tw_checkbox-input.tw_checkbox-input[aria-invalid="true"] {
845
- outline-color: rgba(254, 202, 202, 0.19999999999999996);
874
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.8);
875
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.19999999999999996));
846
876
  }
847
877
  .tw_checkbox-input.tw_checkbox-input[aria-invalid="true"]:focus {
848
- outline-color: rgba(254, 202, 202, 0.5);
878
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.5);
879
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.5));
849
880
  }
850
881
  .tw_checkbox-input[aria-invalid="true"]:focus {
851
- background-color: hsl(210, 40%, 100%);
882
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) + 5%));
883
+ background-color: var(--bg-color, hsl(210, 40%, 100%));
852
884
  }
853
885
  .tw_form-base {}
854
886
  .tw_input-base {
855
- background-color: hsl(210, 40%, 94.2%);
887
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
888
+ --border: 1px solid hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
889
+ --font-size: var(--tw-font-size-base-type);
890
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
856
891
  border: 1px solid #9ca3af;
857
892
  border-radius: 0.25rem;
858
893
  color: #000;
859
- font-size: 0.9375rem;
894
+ font-size: var(--font-size, 0.9375rem);
860
895
  line-height: 1.5rem;
861
896
  padding: 0.75rem;
862
897
  }
863
898
  .tw_input-base:hover {
864
- background-color: #f1f5f9;
899
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
900
+ background-color: var(--bg-color, #f1f5f9);
865
901
  }
866
902
  .tw_input-base:focus {
867
- background-color: #f1f5f9;
903
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
904
+ background-color: var(--bg-color, #f1f5f9);
868
905
  }
869
906
  .tw_input-base[aria-invalid="true"] {
870
- border-color: #991b1b;
907
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
908
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
871
909
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(153, 27, 27)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
872
- background-color: hsl(210, 40%, 94.2%);
910
+ border-color: var(--border-color, #991b1b);
911
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
873
912
  background-position: right 0.75rem center;
874
913
  background-size: 1rem 1rem;
875
914
  }
876
915
  .tw_input-base[aria-invalid="true"] ~ button {
877
- border-color: #991b1b;
916
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
917
+ border-color: var(--border-color, #991b1b);
878
918
  }
879
919
  .tw_input-base.tw_input-base[aria-invalid="true"] {
880
- outline-color: rgba(254, 202, 202, 0.19999999999999996);
920
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.8);
921
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.19999999999999996));
881
922
  }
882
923
  .tw_input-base.tw_input-base[aria-invalid="true"]:focus {
883
- outline-color: rgba(153, 27, 27, 0.7);
884
- background-color: #f1f5f9;
924
+ --outline-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l), 0.3);
925
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
926
+ outline-color: var(--outline-color, rgba(153, 27, 27, 0.7));
927
+ background-color: var(--bg-color, #f1f5f9);
885
928
  }
886
929
  .tw_input-base[aria-invalid="true"]:hover {
887
- background-color: #f1f5f9;
930
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
931
+ background-color: var(--bg-color, #f1f5f9);
888
932
  }
889
933
  .tw_input-label {
890
- color: #374151;
891
- font-size: 0.9375rem;
934
+ --font-size: var(--tw-font-size-base-type);
935
+ --color: hsl(var(--tw-colors-label-dark-hs), var(--tw-colors-label-dark-l));
936
+ font-size: var(--font-size, 0.9375rem);
937
+ color: var(--color, #374151);
892
938
  }
893
939
  .tw_input-error-message {
894
- color: #991b1b;
895
- font-size: 0.875rem;
940
+ --color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
941
+ --font-size: var(--tw-font-size-sm-type);
942
+ color: var(--color, #991b1b);
943
+ font-size: var(--font-size, 0.875rem);
896
944
  margin: 0.25rem;
897
945
  width: 100%;
898
946
  }
899
947
  .tw_input-info-message {
900
- color: #374151;
901
- font-size: 0.875rem;
948
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
949
+ --font-size: var(--tw-font-size-sm-type);
950
+ color: var(--color, #374151);
951
+ font-size: var(--font-size, 0.875rem);
902
952
  margin: 0.25rem;
903
953
  width: 100%;
904
954
  }
905
955
  .tw_input-info-message.tw_isInvalid {
906
- color: #991b1b;
956
+ --color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
957
+ color: var(--color, #991b1b);
907
958
  }
908
959
  .tw_input-info-message_dark.tw_isInvalid {
909
- color: #fecaca;
960
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
961
+ color: var(--color, #fecaca);
910
962
  }
911
963
  .tw_link {
912
- color: #2563eb;
913
- font-size: 0.9375rem;
964
+ --color: hsl(var(--tw-colors-link-dark-hs),var(--tw-colors-link-dark-l));
965
+ --font-size: var(--tw-font-size-base-type);
966
+ color: var(--color, #2563eb);
967
+ font-size: var(--font-size, 0.9375rem);
914
968
  text-decoration: underline;
915
969
  }
916
970
  .tw_link:hover {
917
971
  text-decoration: none;
918
972
  }
919
973
  .tw_select-base {
974
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
975
+ --color: hsl(var(--tw-colors-label-dark-hs), var(--tw-colors-label-dark-l));
920
976
  -webkit-appearance: none;
921
977
  -moz-appearance: none;
922
978
  appearance: none;
923
979
  background: no-repeat right 0.75rem center url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(55, 65, 81)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
924
- background-color: hsl(210, 40%, 94.2%);
980
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
925
981
  background-size: 16px 12px;
926
- color: #374151;
982
+ color: var(--color, #374151);
927
983
  height: calc(3rem + 2px);
928
984
  }
929
985
  .tw_select-base:hover {
930
- background-color: hsl(210, 40%, 91.3%);
986
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 5%));
987
+ background-color: var(--bg-color, hsl(210, 40%, 91.3%));
931
988
  }
932
989
  .tw_select-base:focus {
933
- background-color: hsl(210, 40%, 91.3%);
990
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 5%));
991
+ background-color: var(--bg-color, hsl(210, 40%, 91.3%));
934
992
  }
935
993
  .tw_select-base[aria-invalid="true"] {
994
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
936
995
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(55, 65, 81)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(153, 27, 27)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
937
- background-color: hsl(210, 40%, 94.2%);
996
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
938
997
  background-position: right 0.75rem center, center right 2.25rem;
939
998
  background-size: 16px 12px, 1rem 1rem;
940
999
  }
@@ -944,7 +1003,8 @@ border: 0.25em solid;
944
1003
  border-right-color: transparent;
945
1004
  }
946
1005
  .tw_containing-box {
947
- background-color: #f1f5f9;
1006
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
1007
+ background-color: var(--bg-color, #f1f5f9);
948
1008
  border-color: #000;
949
1009
  border-radius: 0.25rem;
950
1010
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -973,13 +1033,15 @@ width: 0.35em;
973
1033
  will-change: height;
974
1034
  }
975
1035
  .tw_animated-check:before {
976
- border-color: #9ca3af;
1036
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1037
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.7);
1038
+ border-color: var(--border-color, #9ca3af);
977
1039
  border-radius: 0.25rem;
978
1040
  border-width: 1px;
979
1041
  content: "";
980
1042
  display: block;
981
1043
  height: 100%;
982
- outline-color: rgba(126, 34, 206, 0.30000000000000004);
1044
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.30000000000000004));
983
1045
  outline-offset: 0;
984
1046
  outline-style: solid;
985
1047
  outline-width: 0;
@@ -998,18 +1060,22 @@ animation: tw_check 100ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
998
1060
  content: "";
999
1061
  }
1000
1062
  .tw_checkbox-input_animated:checked + label > span:before {
1063
+ --border-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
1001
1064
  animation: tw_squish 200ms cubic-bezier(.4,.0,.23,1);
1002
- border-color: #334155;
1065
+ border-color: var(--border-color, #334155);
1003
1066
  border-width: 0.5em;
1004
1067
  }
1005
1068
  .tw_checkbox-input_animated:focus + label > span:before {
1006
- outline-color: rgba(126, 34, 206, 0.9);
1069
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.1);
1070
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.9));
1007
1071
  outline-offset: 1px;
1008
1072
  outline-width: 3px;
1009
1073
  }
1010
1074
  .tw_dialog-box {
1011
- background-color: #f1f5f9;
1012
- border: 1px solid #374151;
1075
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
1076
+ --border: 1px solid hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1077
+ background-color: var(--bg-color, #f1f5f9);
1078
+ border: var(--border, 1px solid #374151);
1013
1079
  bottom: 0;
1014
1080
  border-radius: 0.25rem;
1015
1081
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -1031,16 +1097,19 @@ will-change: top, opacity;
1031
1097
  animation: tw_slideUp 100ms ease-out forwards;
1032
1098
  }
1033
1099
  .tw_dialog-box_animate::backdrop {
1100
+ --bg-color: hsl(var(--tw-colors-body-light-hs),var(--tw-colors-body-light-l), 0.2);
1034
1101
  animation: tw_fadeIn 500ms ease forwards;
1035
- background-color: rgba(51, 65, 85, 0.8);
1102
+ background-color: var(--bg-color, rgba(51, 65, 85, 0.8));
1036
1103
  }
1037
1104
  .tw_dialog-body {
1038
1105
  margin: 2.5rem 1.5rem;
1039
1106
  }
1040
1107
  .tw_dialog-header {
1108
+ --border-bottom: 1px solid hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1109
+ --bg-color: hsl(var(--tw-colors-tertiary-light-hs),var(--tw-colors-tertiary-light-l));
1041
1110
  align-items: stretch;
1042
- background-color: #f1f5f9;
1043
- border-bottom: 1px solid #9ca3af;
1111
+ background-color: var(--bg-color, #f1f5f9);
1112
+ border-bottom: var(--border-bottom, 1px solid #9ca3af);
1044
1113
  border-top-left-radius: 0.25rem;
1045
1114
  border-top-right-radius: 0.25rem;
1046
1115
  display: flex;
@@ -1074,8 +1143,9 @@ animation: tw_slideDown 100ms ease-out forwards;
1074
1143
  display: block;
1075
1144
  }
1076
1145
  .tw_dialog-closing::backdrop {
1146
+ --bg-color: hsl(var(--tw-colors-body-light-hs),var(--tw-colors-body-light-l), 0.2);
1077
1147
  animation: tw_fadeOut 500ms ease-out forwards;
1078
- background-color: rgba(51, 65, 85, 0.8);
1148
+ background-color: var(--bg-color, rgba(51, 65, 85, 0.8));
1079
1149
  }
1080
1150
  .tw_dialog-x {
1081
1151
  border-radius: 0.25rem;
@@ -1143,7 +1213,8 @@ height: 24px;
1143
1213
  width: 24px;
1144
1214
  }
1145
1215
  .tw_animated-radio:after {
1146
- background-color: #334155;
1216
+ --bg-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
1217
+ background-color: var(--bg-color, #334155);
1147
1218
  border-radius: 9999px;
1148
1219
  height: 100%;
1149
1220
  left: 0;
@@ -1156,10 +1227,11 @@ width: 100%;
1156
1227
  will-change: transform;
1157
1228
  }
1158
1229
  .tw_animated-radio:before {
1230
+ --box-shadow: 0 0 0 1px hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1159
1231
  border-color: #fff;
1160
1232
  border-radius: 9999px;
1161
1233
  border-width: 2px;
1162
- box-shadow: 0 0 0 1px #9ca3af;
1234
+ box-shadow: var(--box-shadow, 0 0 0 1px #9ca3af);
1163
1235
  content: "";
1164
1236
  cursor: pointer;
1165
1237
  display: block;
@@ -1169,7 +1241,8 @@ transition: border-width 250ms cubic-bezier(.4,.0,.23,1), box-shadow ease-in-out
1169
1241
  width: 100%;
1170
1242
  }
1171
1243
  .tw_radio-input_animated:focus + label > span:before {
1172
- box-shadow: 0 0 0 4px rgba(126, 34, 206, 0.9) !important;
1244
+ --box-shadow: 0 0 0 4px hsl(var(--tw-colors-focus-default-hs), var(--tw-colors-focus-default-l), 0.1) !important;
1245
+ box-shadow: var(--box-shadow, 0 0 0 4px rgba(126, 34, 206, 0.9)) !important;
1173
1246
  }
1174
1247
  .tw_radio-input_animated:checked + label > span:after {
1175
1248
  animation: tw_radio 125ms 150ms cubic-bezier(.4,.0,.23,1) forwards;
@@ -1180,7 +1253,8 @@ animation: tw_squish 200ms cubic-bezier(.4,.0,.23,1);
1180
1253
  border-width: 0.5em;
1181
1254
  }
1182
1255
  .tw_button-apple {
1183
- border-color: #d1d5db;
1256
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1257
+ border-color: var(--border-color, #d1d5db);
1184
1258
  background-color: #000;
1185
1259
  color: #fff;
1186
1260
  }
@@ -1188,7 +1262,8 @@ color: #fff;
1188
1262
  opacity: 0.1;
1189
1263
  }
1190
1264
  .tw_button-facebook {
1191
- border-color: #d1d5db;
1265
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1266
+ border-color: var(--border-color, #d1d5db);
1192
1267
  background-color: #1877F2;
1193
1268
  color: #fff;
1194
1269
  }
@@ -1196,7 +1271,8 @@ color: #fff;
1196
1271
  opacity: 0.1;
1197
1272
  }
1198
1273
  .tw_button-google {
1199
- border-color: #d1d5db;
1274
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1275
+ border-color: var(--border-color, #d1d5db);
1200
1276
  background-color: #fff;
1201
1277
  color: #000;
1202
1278
  }
@@ -1204,7 +1280,8 @@ color: #000;
1204
1280
  opacity: 0.1;
1205
1281
  }
1206
1282
  .tw_input-policies {
1207
- font-size: 0.875rem;
1283
+ --font-size: var(--tw-font-size-sm-type);
1284
+ font-size: var(--font-size, 0.875rem);
1208
1285
  }
1209
1286
  .tw_input-policies p {
1210
1287
  font-weight: 700;
@@ -1214,8 +1291,9 @@ margin: 0.25rem;
1214
1291
  margin: 0.25rem;
1215
1292
  }
1216
1293
  .tw_kba-fieldset {
1294
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1295
+ border-color: var(--border-color, #9ca3af);
1217
1296
  position: relative;
1218
- border-color: #9ca3af;
1219
1297
  border-bottom-width: 0;
1220
1298
  border-top-width: 1px;
1221
1299
  border-top-style: dashed;
@@ -1232,7 +1310,8 @@ margin-top: 2.5rem;
1232
1310
  display: block;
1233
1311
  }
1234
1312
  .tw_kba-fieldset:first-of-type:after {
1235
- border-color: #9ca3af;
1313
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1314
+ border-color: var(--border-color, #9ca3af);
1236
1315
  border-top-width: 1px;
1237
1316
  content: "";
1238
1317
  display: block;
@@ -1242,7 +1321,8 @@ top: -0.1em;
1242
1321
  width: 45%;
1243
1322
  }
1244
1323
  .tw_kba-fieldset:first-of-type:before {
1245
- border-color: #9ca3af;
1324
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1325
+ border-color: var(--border-color, #9ca3af);
1246
1326
  border-top-width: 1px;
1247
1327
  content: "";
1248
1328
  display: block;
@@ -1266,14 +1346,15 @@ top: -0.75rem;
1266
1346
  width: 100%;
1267
1347
  }
1268
1348
  .tw_kba-lock-icon > svg {
1269
- color: #9ca3af;
1349
+ --color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1350
+ color: var(--color, #9ca3af);
1270
1351
  fill: currentcolor;
1271
1352
  top: -0.75rem;
1272
1353
  width: 3em;
1273
1354
  }
1274
1355
  .tw_password-button {
1275
- align-items: center;
1276
- background-color: hsl(210, 40%, 94.2%);
1356
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
1357
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
1277
1358
  border-left: 0 !important;
1278
1359
  border-top-left-radius: 0px !important;
1279
1360
  border-bottom-left-radius: 0px !important;
@@ -1282,66 +1363,85 @@ line-height: 1.5rem;
1282
1363
  padding: 0.25rem 0.75rem;
1283
1364
  text-align: center;
1284
1365
  vertical-align: middle;
1366
+ align-items: center;
1285
1367
  }
1286
1368
  .tw_password-icon {
1287
- color: #374151;
1369
+ --color: hsl(var(--tw-colors-secondary-dark-hs), var(--tw-colors-secondary-dark-l));
1370
+ color: var(--color, #374151);
1288
1371
  fill: currentcolor;
1289
1372
  }
1290
1373
  }
1291
1374
  @layer fr-widget.variants {
1292
1375
  :is(.tw_dark .dark\:tw_alert_dark) {
1293
- background-color: #1e293b;
1376
+ --bg-color: hsl(var(--tw-colors-background-dark-hs),var(--tw-colors-background-dark-l));
1377
+ background-color: var(--bg-color, #1e293b);
1294
1378
  border-color: #000;
1295
1379
  color: #fff;
1296
1380
  }
1297
1381
  :is(.tw_dark .dark\:tw_alert_dark):focus {
1298
- outline-color: hsla(272.1, 71.7%, 56.5%, 0.9);
1382
+ --outline-color: hsl(var(--tw-colors-focus-default-hs), calc(var(--tw-colors-focus-default-l) + 20%), 0.1);
1383
+ outline-color: var(--outline-color, hsla(272.1, 71.7%, 56.5%, 0.9));
1299
1384
  }
1300
1385
  :is(.tw_dark .dark\:tw_alert_dark) svg {
1301
1386
  color: #fff;
1302
1387
  fill: currentColor;
1303
1388
  }
1304
1389
  :is(.tw_dark .dark\:tw_alert-error_dark) {
1305
- background-color: #991b1b;
1306
- border-color: hsl(0, 70%, 28.2%);
1390
+ --bg-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
1391
+ --border-color: hsl(var(--tw-colors-error-dark-hs), calc(var(--tw-colors-error-dark-l) - 20%));
1392
+ background-color: var(--bg-color, #991b1b);
1393
+ border-color: var(--border-color, hsl(0, 70%, 28.2%));
1307
1394
  }
1308
1395
  :is(.tw_dark .dark\:tw_alert-error_dark) svg {
1309
- color: #fecaca;
1396
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1397
+ color: var(--color, #fecaca);
1310
1398
  fill: currentColor;
1311
1399
  }
1312
1400
  :is(.tw_dark .dark\:tw_alert-info_dark) {
1313
- background-color: hsl(200.39999999999998, 97.8%, 21.9%);
1314
- border-color: hsl(215.29999999999995, 25%, 21.3%);
1401
+ --bg-color: hsl(var(--tw-colors-primary-light-hs), calc(var(--tw-colors-primary-light-l) - 40%));
1402
+ --border-color: hsl(var(--tw-colors-primary-dark-hs), calc(var(--tw-colors-primary-dark-l) - 20%));
1403
+ background-color: var(--bg-color, hsl(200.39999999999998, 97.8%, 21.9%));
1404
+ border-color: var(--border-color, hsl(215.29999999999995, 25%, 21.3%));
1315
1405
  }
1316
1406
  :is(.tw_dark .dark\:tw_alert-info_dark) svg {
1317
- color: hsl(200.39999999999998, 97.8%, 69.3%);
1407
+ --color: hsl(var(--tw-colors-primary-light-hs), calc(var(--tw-colors-primary-light-l) + 90%));
1408
+ color: var(--color, hsl(200.39999999999998, 97.8%, 69.3%));
1318
1409
  fill: currentColor;
1319
1410
  }
1320
1411
  :is(.tw_dark .dark\:tw_alert-success_dark) {
1321
- background-color: #166534;
1322
- border-color: hsl(142.8, 64.2%, 19.3%);
1412
+ --bg-color: hsl(var(--tw-colors-success-dark-hs),var(--tw-colors-success-dark-l));
1413
+ --border-color: hsl(var(--tw-colors-success-dark-hs), calc(var(--tw-colors-success-dark-l) - 20%));
1414
+ background-color: var(--bg-color, #166534);
1415
+ border-color: var(--border-color, hsl(142.8, 64.2%, 19.3%));
1323
1416
  }
1324
1417
  :is(.tw_dark .dark\:tw_alert-success_dark) svg {
1325
- color: #bbf7d0;
1418
+ --color: hsl(var(--tw-colors-success-light-hs),var(--tw-colors-success-light-l));
1419
+ color: var(--color, #bbf7d0);
1326
1420
  fill: currentColor;
1327
1421
  }
1328
1422
  :is(.tw_dark .dark\:tw_alert-warning_dark) {
1329
- background-color: #854d0e;
1330
- border-color: hsl(31.80000000000001, 81%, 23.1%);
1423
+ --bg-color: hsl(var(--tw-colors-warning-dark-hs),var(--tw-colors-warning-dark-l));
1424
+ --border-color: hsl(var(--tw-colors-warning-dark-hs), calc(var(--tw-colors-warning-dark-l) - 20%));
1425
+ background-color: var(--bg-color, #854d0e);
1426
+ border-color: var(--border-color, hsl(31.80000000000001, 81%, 23.1%));
1331
1427
  }
1332
1428
  :is(.tw_dark .dark\:tw_alert-warning_dark) svg {
1333
- color: #fef08a;
1429
+ --color: hsl(var(--tw-colors-warning-light-hs),var(--tw-colors-warning-light-l));
1430
+ color: var(--color, #fef08a);
1334
1431
  fill: currentColor;
1335
1432
  }
1336
1433
  :is(.tw_dark .dark\:tw_button-primary_dark) {
1337
- border-color: #027AB8;
1338
- background-color: #027AB8;
1434
+ --bg-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1435
+ --border-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1436
+ background-color: var(--bg-color, #027AB8);
1437
+ border-color: var(--border-color, #027AB8);
1339
1438
  }
1340
1439
  :is(.tw_dark .dark\:tw_button-primary_dark):hover::before,:is(.tw_dark .dark\:tw_button-primary_dark):focus::before {
1341
1440
  opacity: 0.2;
1342
1441
  }
1343
1442
  :is(.tw_dark .dark\:tw_button-outline_dark) {
1344
- border-color: #d1d5db;
1443
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1444
+ border-color: var(--border-color, #d1d5db);
1345
1445
  color: #fff;
1346
1446
  }
1347
1447
  :is(.tw_dark .dark\:tw_button-outline_dark):hover::before,:is(.tw_dark .dark\:tw_button-outline_dark):focus::before {
@@ -1349,110 +1449,145 @@ opacity: 0.3;
1349
1449
  }
1350
1450
  :is(.tw_dark .dark\:tw_button-secondary_dark) {}
1351
1451
  :is(.tw_dark .dark\:tw_checkbox-input_dark) {
1352
- accent-color: #027AB8;
1452
+ --accent-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1453
+ accent-color: var(--accent-color, #027AB8);
1353
1454
  }
1354
1455
  :is(.tw_dark .dark\:tw_input-base_dark) {
1355
- background-color: rgba(15, 23, 42, 0.5);
1356
- border-color: #374151;
1456
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.5);
1457
+ --border-color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1458
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1459
+ border-color: var(--border-color, #374151);
1357
1460
  color: #fff;
1358
1461
  }
1359
1462
  :is(.tw_dark .dark\:tw_input-base_dark):focus {
1360
- background-color: rgba(15, 23, 42, 0.75);
1463
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1464
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1361
1465
  }
1362
1466
  :is(.tw_dark .dark\:tw_input-base_dark):hover {
1363
- background-color: rgba(15, 23, 42, 0.75);
1467
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1468
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1364
1469
  }
1365
1470
  :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"] {
1366
- border-color: #fecaca;
1471
+ --border-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1472
+ --bg-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l),0.5);
1473
+ border-color: var(--border-color, #fecaca);
1367
1474
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(254, 202, 202)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
1368
- background-color: rgba(15, 23, 42, 0.5);
1475
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1369
1476
  }
1370
1477
  :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"]:focus {
1371
- outline-color: rgba(254, 202, 202, 0.7) !important;
1372
- background-color: rgba(15, 23, 42, 0.75);
1478
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.3) !important;
1479
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1480
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.7)) !important;
1481
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1373
1482
  }
1374
1483
  :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"]:hover {
1375
- background-color: rgba(15, 23, 42, 0.75);
1484
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1485
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1376
1486
  }
1377
1487
  :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"] ~ button {
1378
- border-color: #fecaca;
1488
+ --border-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1489
+ border-color: var(--border-color, #fecaca);
1379
1490
  }
1380
1491
  :is(.tw_dark .dark\:tw_input-label_dark) {
1381
- color: #d1d5db;
1492
+ --color: hsl(var(--tw-colors-label-light-hs),var(--tw-colors-label-light-l));
1493
+ color: var(--color, #d1d5db);
1382
1494
  }
1383
1495
  :where(input:-webkit-autofill) + :is(.tw_dark .dark\:tw_input-label_dark) {
1384
- color: #374151;
1496
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1497
+ color: var(--color, #374151);
1385
1498
  }
1386
1499
  :where(input:autofill) + :is(.tw_dark .dark\:tw_input-label_dark) {
1387
- color: #374151;
1500
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1501
+ color: var(--color, #374151);
1388
1502
  }
1389
1503
  :is(.tw_dark .dark\:tw_input-error-message_dark) {
1390
- color: #fecaca;
1504
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1505
+ color: var(--color, #fecaca);
1391
1506
  }
1392
1507
  :is(.tw_dark .dark\:tw_input-info-message_dark) {
1393
- color: #d1d5db;
1508
+ --color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1509
+ color: var(--color, #d1d5db);
1394
1510
  }
1395
1511
  :is(.tw_dark .dark\:tw_input-info-message_dark).tw_isInvalid {
1396
- color: #fecaca;
1512
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1513
+ color: var(--color, #fecaca);
1397
1514
  }
1398
1515
  :is(.tw_dark .dark\:tw_link_dark) {
1399
- color: #60a5fa;
1516
+ --color: hsl(var(--tw-colors-link-light-hs),var(--tw-colors-link-light-l));
1517
+ color: var(--color, #60a5fa);
1400
1518
  }
1401
1519
  :is(.tw_dark .dark\:tw_select-base_dark) {
1520
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.5);
1521
+ --color: hsl(var(--tw-colors-label-light-hs), var(--tw-colors-label-light-l));
1402
1522
  background: no-repeat right 0.75rem center / 16px 12px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(209, 213, 219)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
1403
- background-color: rgba(15, 23, 42, 0.5);
1404
- color: #d1d5db;
1523
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1524
+ color: var(--color, #d1d5db);
1405
1525
  }
1406
1526
  :is(.tw_dark .dark\:tw_select-base_dark):hover {
1407
- background-color: rgba(15, 23, 42, 0.75);
1527
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.25);
1528
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1408
1529
  }
1409
1530
  :is(.tw_dark .dark\:tw_select-base_dark):focus {
1410
- background-color: rgba(15, 23, 42, 0.75);
1531
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.25);
1532
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1411
1533
  }
1412
1534
  :is(.tw_dark .dark\:tw_select-base_dark)[aria-invalid="true"] {
1535
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.5);
1413
1536
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(209, 213, 219)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(254, 202, 202)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
1414
- background-color: rgba(15, 23, 42, 0.5);
1537
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1415
1538
  background-position: right 0.75rem center, center right 2.25rem;
1416
1539
  background-size: 16px 12px, 1rem 1rem;
1417
1540
  }
1418
1541
  :is(.tw_dark .dark\:tw_containing-box_dark) {
1419
- background-color: #1e293b;
1542
+ --bg-color: hsl(var(--tw-colors-background-dark-hs),var(--tw-colors-background-dark-l));
1543
+ background-color: var(--bg-color, #1e293b);
1420
1544
  }
1421
1545
  :is(.tw_dark .dark\:tw_checkbox-input_animated_dark):checked + label > span:before {
1422
- border-color: #027AB8;
1546
+ --border-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1547
+ border-color: var(--border-color, #027AB8);
1423
1548
  }
1424
1549
  :is(.tw_dark .dark\:tw_dialog-box_dark) {
1425
- background-color: #1e293b;
1550
+ --bg-color: hsl(var(--tw-colors-background-dark-hs),var(--tw-colors-background-dark-l));
1551
+ background-color: var(--bg-color, #1e293b);
1426
1552
  border-color: #000;
1427
1553
  }
1428
1554
  :is(.tw_dark .dark\:tw_dialog-box_dark)::backdrop {
1429
- background-color: rgba(15, 23, 42, 0.8);
1555
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.2);
1556
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.8));
1430
1557
  }
1431
1558
  :is(.tw_dark .dark\:tw_dialog-header_dark) {
1432
- background-color: #1e293b;
1433
- border-bottom-color: #374151;
1559
+ --bg-color: hsl(var(--tw-colors-tertiary-dark-hs),var(--tw-colors-tertiary-dark-l));
1560
+ --border-bottom-color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1561
+ background-color: var(--bg-color, #1e293b);
1562
+ border-bottom-color: var(--border-bottom-color, #374151);
1434
1563
  }
1435
1564
  :is(.tw_dark .dark\:tw_dialog-logo_dark) {
1436
1565
  background-image: var(--logo-dark);
1437
1566
  }
1438
1567
  :is(.tw_dark .dark\:tw_input-floating_dark):-webkit-autofill + label {
1439
- color: #374151 !important;
1568
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l)) !important;
1569
+ color: var(--color, #374151) !important;
1440
1570
  }
1441
1571
  :is(.tw_dark .dark\:tw_input-floating_dark):autofill + label {
1442
- color: #374151 !important;
1572
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l)) !important;
1573
+ color: var(--color, #374151) !important;
1443
1574
  }
1444
1575
  :is(.tw_dark .dark\:tw_animated-radio_dark):before {
1445
- border-color: #d1d5db;
1576
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1577
+ border-color: var(--border-color, #d1d5db);
1446
1578
  box-shadow: none;
1447
1579
  }
1448
1580
  :is(.tw_dark .dark\:tw_animated-radio_dark):after {
1449
- background-color: #027AB8;
1581
+ --bg-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1582
+ background-color: var(--bg-color, #027AB8);
1450
1583
  }
1451
1584
  :is(.tw_dark .dark\:tw_radio-input_animated_dark):checked + label > span:before {
1452
- border-color: #d1d5db;
1585
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1586
+ border-color: var(--border-color, #d1d5db);
1453
1587
  }
1454
1588
  :is(.tw_dark .dark\:tw_button-apple_dark) {
1455
- border-color: #d1d5db;
1589
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1590
+ border-color: var(--border-color, #d1d5db);
1456
1591
  background-color: #fff;
1457
1592
  color: #000;
1458
1593
  }
@@ -1460,7 +1595,8 @@ color: #000;
1460
1595
  opacity: 0.1;
1461
1596
  }
1462
1597
  :is(.tw_dark .dark\:tw_button-facebook_dark) {
1463
- border-color: #d1d5db;
1598
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1599
+ border-color: var(--border-color, #d1d5db);
1464
1600
  background-color: #fff;
1465
1601
  color: #1877F2;
1466
1602
  }
@@ -1468,7 +1604,8 @@ color: #1877F2;
1468
1604
  opacity: 0.1;
1469
1605
  }
1470
1606
  :is(.tw_dark .dark\:tw_button-google_dark) {
1471
- border-color: #d1d5db;
1607
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1608
+ border-color: var(--border-color, #d1d5db);
1472
1609
  background-color: #fff;
1473
1610
  color: #000;
1474
1611
  }
@@ -1476,23 +1613,29 @@ color: #000;
1476
1613
  opacity: 0.1;
1477
1614
  }
1478
1615
  :is(.tw_dark .dark\:tw_kba-fieldset_dark) {
1479
- border-color: hsl(217.89999999999998, 10.6%, 48.7%);
1616
+ --border-color: hsl(var(--tw-colors-secondary-default-hs), calc(var(--tw-colors-secondary-default-l) - 25%));
1617
+ border-color: var(--border-color, hsl(217.89999999999998, 10.6%, 48.7%));
1480
1618
  }
1481
1619
  :is(.tw_dark .dark\:tw_kba-fieldset_dark):after {
1482
- border-color: hsl(217.89999999999998, 10.6%, 48.7%);
1620
+ --border-color: hsl(var(--tw-colors-secondary-default-hs), calc(var(--tw-colors-secondary-default-l) - 25%));
1621
+ border-color: var(--border-color, hsl(217.89999999999998, 10.6%, 48.7%));
1483
1622
  }
1484
1623
  :is(.tw_dark .dark\:tw_kba-fieldset_dark):before {
1485
- border-color: hsl(217.89999999999998, 10.6%, 48.7%);
1624
+ --border-color: hsl(var(--tw-colors-secondary-default-hs), calc(var(--tw-colors-secondary-default-l) - 25%));
1625
+ border-color: var(--border-color, hsl(217.89999999999998, 10.6%, 48.7%));
1486
1626
  }
1487
1627
  :is(.tw_dark .dark\:tw_kba-lock-icon_dark) > svg {
1488
- color: #d1d5db;
1628
+ --color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1629
+ color: var(--color, #d1d5db);
1489
1630
  fill: currentcolor;
1490
1631
  }
1491
1632
  :is(.tw_dark .dark\:tw_password-button_dark) {
1492
- background-color: rgba(15, 23, 42, 0.5);
1633
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.5);
1634
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1493
1635
  }
1494
1636
  :is(.tw_dark .dark\:tw_password-icon_dark) {
1495
- color: #d1d5db;
1637
+ --color: hsl(var(--tw-colors-secondary-light-hs), var(--tw-colors-secondary-light-l));
1638
+ color: var(--color, #d1d5db);
1496
1639
  }
1497
1640
  @media (min-width: 768px) {
1498
1641
  .md\:tw_containing-box_medium {
@@ -1549,16 +1692,20 @@ color: rgb(209 213 219 / var(--tw-text-opacity));
1549
1692
  color: rgb(255 255 255 / var(--tw-text-opacity));
1550
1693
  }
1551
1694
  :is(.tw_dark .dark\:tw_focusable-element_dark) {
1552
- outline-color: hsla(272.1, 71.7%, 56.5%, 0.30000000000000004);
1695
+ --outline-color: hsl(var(--tw-colors-focus-default-hs), calc(var(--tw-colors-focus-default-l) + 20%), 0.7);
1696
+ outline-color: var(--outline-color, hsla(272.1, 71.7%, 56.5%, 0.30000000000000004));
1553
1697
  }
1554
1698
  :is(.tw_dark .dark\:tw_focusable-element_dark):focus {
1555
- outline-color: hsla(272.1, 71.7%, 56.5%, 0.9);
1699
+ --outline-color: hsl(var(--tw-colors-focus-default-hs), calc(var(--tw-colors-focus-default-l) + 20%), 0.1);
1700
+ outline-color: var(--outline-color, hsla(272.1, 71.7%, 56.5%, 0.9));
1556
1701
  }
1557
1702
  :is(.tw_dark .dark\:tw_primary-header_dark) {
1558
- color: #d1d5db;
1703
+ --color: hsl(var(--tw-colors-header-light-hs),var(--tw-colors-header-light-l));
1704
+ color: var(--color, #d1d5db);
1559
1705
  }
1560
1706
  :is(.tw_dark .dark\:tw_secondary-header_dark) {
1561
- color: #d1d5db;
1707
+ --color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1708
+ color: var(--color, #d1d5db);
1562
1709
  }
1563
1710
  @media (min-width: 768px) {
1564
1711
  .md\:tw_h-36 {