@forgerock/login-widget 1.2.0-beta.2 → 1.2.0-beta.4

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