cozy-sharing 4.0.4 → 4.1.2
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.
- package/CHANGELOG.md +42 -0
- package/dist/ShareButton.spec.js +1 -1
- package/dist/SharingBanner/components/PublicBanner.js +1 -1
- package/dist/SharingBanner/test/AppLike.js +1 -1
- package/dist/SharingDetailsModal.js +1 -0
- package/dist/components/ContactSuggestion.js +1 -0
- package/dist/components/Identity.js +1 -0
- package/dist/components/Recipient.js +2 -0
- package/dist/components/ShareAutosuggest.js +2 -1
- package/dist/components/ShareButton.js +2 -1
- package/dist/components/ShareByEmail.js +1 -0
- package/dist/components/ShareByLink.js +1 -0
- package/dist/components/ShareDialogCozyToCozy.js +1 -0
- package/dist/components/ShareRecipientsInput.js +1 -0
- package/dist/components/SharedBadge.js +1 -0
- package/dist/components/Sharesubmit.js +1 -1
- package/dist/components/Sharetypeselect.js +2 -1
- package/dist/components/WhoHasAccessLight.js +1 -0
- package/dist/stylesheet.css +1220 -235
- package/package.json +11 -11
- package/src/ShareButton.spec.jsx +1 -1
- package/src/SharingBanner/components/PublicBanner.jsx +1 -1
- package/src/SharingBanner/test/AppLike.jsx +1 -1
- package/src/components/ShareAutosuggest.jsx +1 -1
- package/src/components/ShareButton.jsx +1 -1
- package/src/components/Sharesubmit.jsx +1 -1
- package/src/components/Sharetypeselect.jsx +1 -1
- package/test/AppLike.jsx +1 -1
package/dist/stylesheet.css
CHANGED
|
@@ -775,10 +775,97 @@ html {
|
|
|
775
775
|
--zIndex-modal: 70;
|
|
776
776
|
--zindex-alert: 80;
|
|
777
777
|
}
|
|
778
|
+
:root {
|
|
779
|
+
--invertedBackgroundColor: #297ef2;
|
|
780
|
+
--invertedContrastTextColor: #fff;
|
|
781
|
+
}
|
|
782
|
+
.share__CozyTheme--inverted___2pLD2 {
|
|
783
|
+
--primaryTextColor: #fff;
|
|
784
|
+
--secondaryTextColor: rgba(255,255,255,0.64);
|
|
785
|
+
--disabledTextColor: rgba(255,255,255,0.4);
|
|
786
|
+
--hintTextColor: rgba(255,255,255,0.4);
|
|
787
|
+
--iconTextColor: #fff;
|
|
788
|
+
--actionColorActive: #fff;
|
|
789
|
+
--actionColorHover: rgba(255,255,255,0.08);
|
|
790
|
+
--actionColorSelected: rgba(255,255,255,0.16);
|
|
791
|
+
--actionColorDisabled: rgba(255,255,255,0.32);
|
|
792
|
+
--actionColorDisabledBackground: rgba(255,255,255,0.12);
|
|
793
|
+
--actionColorFocus: rgba(255,255,255,0.24);
|
|
794
|
+
--actionColorGhost: rgba(255,255,255,0.08);
|
|
795
|
+
--actionColorHoverGhost: rgba(255,255,255,0.16);
|
|
796
|
+
--dividerColor: rgba(255,255,255,0.16);
|
|
797
|
+
--borderMainColor: rgba(255,255,255,0.24);
|
|
798
|
+
--borderDisabledColor: rgba(255,255,255,0.12);
|
|
799
|
+
--borderGhostColor: rgba(255,255,255,0.48);
|
|
800
|
+
--borderGhostDisabledColor: rgba(255,255,255,0.24);
|
|
801
|
+
--paperBackgroundColor: #297ef2;
|
|
802
|
+
--defaultBackgroundColor: #579eff;
|
|
803
|
+
--primaryColorLight: #fff;
|
|
804
|
+
--primaryColor: #fff;
|
|
805
|
+
--primaryColorDark: #eaf3ff;
|
|
806
|
+
--primaryContrastTextColor: #297ef2;
|
|
807
|
+
--secondaryColorLight: #f8eefd;
|
|
808
|
+
--secondaryColor: #ecd7f7;
|
|
809
|
+
--secondaryColorDark: #deb8f0;
|
|
810
|
+
--secondaryContrastTextColor: rgba(29,33,42,0.9);
|
|
811
|
+
--errorColorLight: #ffecec;
|
|
812
|
+
--errorColor: #ffd3d3;
|
|
813
|
+
--errorColorDark: #ffb9b9;
|
|
814
|
+
--errorColorContrastText: rgba(29,33,42,0.9);
|
|
815
|
+
--errorBackground: #d31f1f;
|
|
816
|
+
--warningColorLight: #fff3dd;
|
|
817
|
+
--warningColor: #ffe4b5;
|
|
818
|
+
--warningColorDark: #ffd58b;
|
|
819
|
+
--warningColorContrastText: rgba(29,33,42,0.9);
|
|
820
|
+
--successColorLight: #e3ffe7;
|
|
821
|
+
--successColor: #c0f4c6;
|
|
822
|
+
--successColorDark: #97eca1;
|
|
823
|
+
--successColorContrastText: rgba(29,33,42,0.9);
|
|
824
|
+
--infoColorLight: #d4feff;
|
|
825
|
+
--infoColor: #affdff;
|
|
826
|
+
--infoColorDark: #86f5f7;
|
|
827
|
+
--infoColorContrastText: rgba(29,33,42,0.9);
|
|
828
|
+
/*
|
|
829
|
+
The CSS variables below are historic and we should strive not to
|
|
830
|
+
use them. Prefer to use directly semantic colors above.
|
|
831
|
+
*/
|
|
832
|
+
--iconColor: var(--secondaryTextColor);
|
|
833
|
+
--textIconColor: #fff;
|
|
834
|
+
--barIconColor: #fff;
|
|
835
|
+
--barIconColorDisabled: rgba(255,255,255,0.88);
|
|
836
|
+
--spinnerColor: #fff;
|
|
837
|
+
--linkColor: #fff;
|
|
838
|
+
--linkColorActive: #fff;
|
|
839
|
+
--linkTextDecoration: underline;
|
|
840
|
+
--regularButtonPrimaryColor: #fff;
|
|
841
|
+
--regularButtonSecondaryColor: #fff;
|
|
842
|
+
--regularButtonActiveColor: rgba(255,255,255,0.88);
|
|
843
|
+
--regularButtonConstrastColor: #297ef2;
|
|
844
|
+
--secondaryButtonPrimaryColor: #297ef2;
|
|
845
|
+
--secondaryButtonSecondaryColor: #fff;
|
|
846
|
+
--secondaryButtonActiveColor: rgba(255,255,255,0.24);
|
|
847
|
+
--secondaryButtonContrastColor: #fff;
|
|
848
|
+
--dividerColor2: rgba(255,255,255,0.16);
|
|
849
|
+
}
|
|
778
850
|
html {
|
|
779
851
|
/*
|
|
780
852
|
Grey
|
|
781
853
|
|
|
854
|
+
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
|
|
855
|
+
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
|
|
856
|
+
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
|
|
857
|
+
Stylus: grey200 - #eceff1, CSS: var(--grey200)
|
|
858
|
+
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
|
|
859
|
+
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
|
|
860
|
+
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
|
|
861
|
+
Stylus: grey600 - #7c8086, CSS: var(--grey600)
|
|
862
|
+
Stylus: grey700 - #5d6169, CSS: var(--grey700)
|
|
863
|
+
Stylus: grey800 - #3e424a, CSS: var(--grey800)
|
|
864
|
+
Stylus: grey900 - #1d212a, CSS: var(--grey900)
|
|
865
|
+
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
|
|
866
|
+
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
|
|
867
|
+
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
|
|
868
|
+
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
|
|
782
869
|
Stylus: white - #FFFFFF, CSS: var(--white)
|
|
783
870
|
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
|
|
784
871
|
Stylus: silver - #D6D8Da, CSS: var(--silver)
|
|
@@ -787,9 +874,23 @@ html {
|
|
|
787
874
|
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
|
|
788
875
|
Stylus: black - #000000, CSS: var(--black)
|
|
789
876
|
|
|
790
|
-
|
|
791
877
|
Styleguide Settings.colors.grey
|
|
792
878
|
*/
|
|
879
|
+
--grey0: #fff;
|
|
880
|
+
--grey50: #f9fafb;
|
|
881
|
+
--grey100: #f4f5f6;
|
|
882
|
+
--grey200: #eceff1;
|
|
883
|
+
--grey300: #dde0e3;
|
|
884
|
+
--grey400: #bfc3c7;
|
|
885
|
+
--grey500: #9da2a6;
|
|
886
|
+
--grey600: #7c8086;
|
|
887
|
+
--grey700: #5d6169;
|
|
888
|
+
--grey800: #3e424a;
|
|
889
|
+
--grey900: #1d212a;
|
|
890
|
+
--greyA100: #d3d6d8;
|
|
891
|
+
--greyA200: #a7abaf;
|
|
892
|
+
--greyA400: #2c3039;
|
|
893
|
+
--greyA700: #5d6169;
|
|
793
894
|
--white: #fff;
|
|
794
895
|
--paleGrey: #f5f6f7;
|
|
795
896
|
--silver: #d6d8da;
|
|
@@ -850,88 +951,184 @@ html {
|
|
|
850
951
|
html,
|
|
851
952
|
.share__CozyTheme--normal___qSFyr {
|
|
852
953
|
/*
|
|
853
|
-
Primary
|
|
954
|
+
Primary colors
|
|
854
955
|
|
|
956
|
+
Stylus: primaryColorLightest - #B3D3FF, CSS: var(--primaryColorLightest)
|
|
957
|
+
Stylus: primaryColorLight - #5C9DF5, CSS: var(--primaryColorLight)
|
|
855
958
|
Stylus: primaryColor - #297EF2, CSS: var(--primaryColor)
|
|
856
959
|
Stylus: primaryColorDark - #0B61D6, CSS: var(--primaryColorDark)
|
|
857
|
-
Stylus:
|
|
858
|
-
Stylus: primaryColorLightest - #9FC4FB, CSS: var(--primaryColorLightest)
|
|
859
|
-
Stylus: primaryContrastTextColor - #FFFFFF, CSS: var(--primaryContrastTextColor)
|
|
960
|
+
Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
|
|
860
961
|
|
|
861
962
|
Styleguide Settings.theme.primary
|
|
862
963
|
*/
|
|
964
|
+
--primaryColorLightest: #b3d3ff;
|
|
965
|
+
--primaryColorLight: #579eff;
|
|
863
966
|
--primaryColor: #297ef2;
|
|
864
|
-
--primaryColorDark: #
|
|
865
|
-
--
|
|
866
|
-
--primaryColorLightest: #9fc4fb;
|
|
967
|
+
--primaryColorDark: #0f5cc7;
|
|
968
|
+
--primaryContrastTextColor: #fff;
|
|
867
969
|
/*
|
|
868
|
-
Secondary
|
|
970
|
+
Secondary colors
|
|
869
971
|
|
|
870
|
-
Stylus:
|
|
871
|
-
Stylus:
|
|
872
|
-
Stylus:
|
|
873
|
-
Stylus:
|
|
972
|
+
Stylus: secondaryColorLightest - #FFD3D3, CSS: var(--secondaryColorLightest)
|
|
973
|
+
Stylus: secondaryColorLight - #F96B6B, CSS: var(--secondaryColorLight)
|
|
974
|
+
Stylus: secondaryColor - #EA3F3F, CSS: var(--secondaryColor)
|
|
975
|
+
Stylus: secondaryColorDark - #D31F1F, CSS: var(--secondaryColorDark)
|
|
976
|
+
Stylus: secondaryContrastTextColor - #FFF, CSS: var(--secondaryContrastTextColor)
|
|
874
977
|
|
|
875
978
|
Styleguide Settings.theme.secondary
|
|
876
979
|
*/
|
|
877
|
-
--
|
|
878
|
-
--
|
|
879
|
-
--
|
|
880
|
-
--
|
|
980
|
+
--secondaryColorLightest: #ffd3d3;
|
|
981
|
+
--secondaryColorLight: #f96b6b;
|
|
982
|
+
--secondaryColor: #ea3f3f;
|
|
983
|
+
--secondaryColorDark: #d31f1f;
|
|
984
|
+
--secondaryContrastTextColor: #fff;
|
|
881
985
|
/*
|
|
882
986
|
Background colors
|
|
883
987
|
|
|
884
|
-
Stylus: primaryBackgroundLight - #
|
|
988
|
+
Stylus: primaryBackgroundLight - #F7FAFF, CSS: var(--primaryBackgroundLight)
|
|
885
989
|
Stylus: paperBackgroundColor - #FFF, CSS: var(--paperBackgroundColor)
|
|
886
|
-
Stylus: defaultBackgroundColor - #
|
|
990
|
+
Stylus: defaultBackgroundColor - #F4F5F6, CSS: var(--defaultBackgroundColor)
|
|
887
991
|
|
|
888
992
|
Styleguide Settings.theme.background
|
|
889
993
|
*/
|
|
890
|
-
--primaryBackgroundLight: #
|
|
994
|
+
--primaryBackgroundLight: #f7faff;
|
|
891
995
|
--paperBackgroundColor: #fff;
|
|
892
|
-
--defaultBackgroundColor: #
|
|
996
|
+
--defaultBackgroundColor: #f4f5f6;
|
|
893
997
|
/*
|
|
894
998
|
Text colors
|
|
895
999
|
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
Stylus:
|
|
1000
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
1001
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
1002
|
+
|
|
1003
|
+
Stylus: primaryTextColor - #383B43, CSS: var(--primaryTextColor)
|
|
1004
|
+
Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
|
|
1005
|
+
Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
|
|
1006
|
+
Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
|
|
1007
|
+
Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
|
|
900
1008
|
|
|
901
1009
|
Styleguide Settings.theme.text
|
|
902
1010
|
*/
|
|
903
|
-
--primaryTextColor:
|
|
904
|
-
--secondaryTextColor:
|
|
905
|
-
--
|
|
906
|
-
--
|
|
1011
|
+
--primaryTextColor: rgba(29,33,42,0.9);
|
|
1012
|
+
--secondaryTextColor: rgba(29,33,42,0.48);
|
|
1013
|
+
--disabledTextColor: rgba(29,33,42,0.32);
|
|
1014
|
+
--hintTextColor: rgba(29,33,42,0.32);
|
|
1015
|
+
--iconTextColor: rgba(29,33,42,0.72);
|
|
1016
|
+
/*
|
|
1017
|
+
Action colors
|
|
1018
|
+
|
|
1019
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
1020
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
1021
|
+
|
|
1022
|
+
Stylus: actionColorActive - #8A8C90, CSS: var(--actionColorActive)
|
|
1023
|
+
Stylus: actionColorHover - #F7F7F7, CSS: var(--actionColorHover)
|
|
1024
|
+
Stylus: actionColorSelected - #EFEFF0, CSS: var(--actionColorSelected)
|
|
1025
|
+
Stylus: actionColorDisabled - #CFCFD1, CSS: var(--actionColorDisabled)
|
|
1026
|
+
Stylus: actionColorDisabledBackground - #E7E7E8, CSS: var(--actionColorDisabledBackground)
|
|
1027
|
+
Stylus: actionColorFocus - #E7E7E8, CSS: var(--actionColorFocus)
|
|
1028
|
+
Stylus: actionColorGhost - #EFEFF0, CSS: var(--actionColorGhost)
|
|
1029
|
+
Stylus: actionColorHoverGhost - #DFE0E0, CSS: var(--actionColorHoverGhost)
|
|
1030
|
+
|
|
1031
|
+
Styleguide Settings.theme.action
|
|
1032
|
+
*/
|
|
1033
|
+
--actionColorActive: rgba(29,33,42,0.56);
|
|
1034
|
+
--actionColorHover: rgba(29,33,42,0.04);
|
|
1035
|
+
--actionColorSelected: rgba(29,33,42,0.08);
|
|
1036
|
+
--actionColorDisabled: rgba(29,33,42,0.24);
|
|
1037
|
+
--actionColorDisabledBackground: rgba(29,33,42,0.12);
|
|
1038
|
+
--actionColorFocus: rgba(29,33,42,0.12);
|
|
1039
|
+
--actionColorGhost: rgba(29,33,42,0.08);
|
|
1040
|
+
--actionColorHoverGhost: rgba(29,33,42,0.16);
|
|
1041
|
+
/*
|
|
1042
|
+
Border colors
|
|
1043
|
+
|
|
1044
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
1045
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
1046
|
+
|
|
1047
|
+
Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
|
|
1048
|
+
Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
|
|
1049
|
+
Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
|
|
1050
|
+
Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
|
|
1051
|
+
|
|
1052
|
+
Styleguide Settings.theme.border
|
|
1053
|
+
*/
|
|
1054
|
+
--borderMainColor: rgba(29,33,42,0.16);
|
|
1055
|
+
--borderDisabledColor: rgba(29,33,42,0.08);
|
|
1056
|
+
--borderGhostColor: rgba(29,33,42,0.48);
|
|
1057
|
+
--borderGhostDisabledColor: rgba(29,33,42,0.16);
|
|
907
1058
|
/*
|
|
908
|
-
|
|
1059
|
+
Divider colors
|
|
909
1060
|
|
|
910
|
-
Be careful to use the semantic variable
|
|
911
|
-
|
|
1061
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
1062
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
912
1063
|
|
|
913
1064
|
Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
|
|
914
1065
|
|
|
915
|
-
Styleguide Settings.theme.
|
|
1066
|
+
Styleguide Settings.theme.divider
|
|
1067
|
+
*/
|
|
1068
|
+
--dividerColor: rgba(29,33,42,0.12);
|
|
1069
|
+
/*
|
|
1070
|
+
Success colors
|
|
1071
|
+
|
|
1072
|
+
Stylus: successColorLight - #38C949, CSS: var(--successColorLight)
|
|
1073
|
+
Stylus: successColor - #09AE1C, CSS: var(--successColor)
|
|
1074
|
+
Stylus: successColorDark - #018711, CSS: var(--successColorDark)
|
|
1075
|
+
Stylus: successColorContrastText - #FFF, CSS: var(--successColorContrastText)
|
|
1076
|
+
|
|
1077
|
+
Styleguide Settings.theme.success
|
|
1078
|
+
*/
|
|
1079
|
+
--successColorLight: #38c949;
|
|
1080
|
+
--successColor: #09ae1c;
|
|
1081
|
+
--successColorDark: #018711;
|
|
1082
|
+
--successColorContrastText: #fff;
|
|
1083
|
+
/*
|
|
1084
|
+
Warning colors
|
|
1085
|
+
|
|
1086
|
+
Stylus: warningColorLight - #EFA82F, CSS: var(--warningColorLight)
|
|
1087
|
+
Stylus: warningColor - #CB8100, CSS: var(--warningColor)
|
|
1088
|
+
Stylus: warningColorDark - #986100, CSS: var(--warningColorDark)
|
|
1089
|
+
Stylus: warningColorContrastText - #FFF, CSS: var(--warningColorContrastText)
|
|
1090
|
+
|
|
1091
|
+
Styleguide Settings.theme.warning
|
|
1092
|
+
*/
|
|
1093
|
+
--warningColorLight: #efa82d;
|
|
1094
|
+
--warningColor: #cb8100;
|
|
1095
|
+
--warningColorDark: #986100;
|
|
1096
|
+
--warningColorContrastText: #fff;
|
|
1097
|
+
/*
|
|
1098
|
+
Error colors
|
|
1099
|
+
|
|
1100
|
+
Stylus: errorColorLightest - #FFECEC, CSS: var(--errorColorLightest)
|
|
1101
|
+
Stylus: errorColorLight - #F96B6B, CSS: var(--errorColorLight)
|
|
1102
|
+
Stylus: errorColor - #EA3F3F, CSS: var(--errorColor)
|
|
1103
|
+
Stylus: errorColorDark - #D31F1F, CSS: var(--errorColorDark)
|
|
1104
|
+
Stylus: errorBackground - #FFECEC, CSS: var(--errorBackground)
|
|
1105
|
+
Stylus: errorColorContrastText - #FFF, CSS: var(--errorColorContrastText)
|
|
1106
|
+
|
|
1107
|
+
Styleguide Settings.theme.error
|
|
916
1108
|
*/
|
|
917
|
-
--
|
|
1109
|
+
--errorColorLightest: #ffecec;
|
|
1110
|
+
--errorColorLight: #f96b6b;
|
|
1111
|
+
--errorColor: #ea3f3f;
|
|
1112
|
+
--errorColorDark: #d31f1f;
|
|
1113
|
+
--errorBackground: #ffecec;
|
|
1114
|
+
--errorColorContrastText: #fff;
|
|
918
1115
|
/*
|
|
919
|
-
|
|
1116
|
+
Info colors
|
|
920
1117
|
|
|
921
|
-
Stylus:
|
|
922
|
-
Stylus:
|
|
923
|
-
Stylus:
|
|
924
|
-
Stylus:
|
|
1118
|
+
Stylus: infoColorLight - #0EC4C7, CSS: var(--infoColorLight)
|
|
1119
|
+
Stylus: infoColor - #009FA2, CSS: var(--infoColor)
|
|
1120
|
+
Stylus: infoColorDark - #007578, CSS: var(--infoColorDark)
|
|
1121
|
+
Stylus: infoColorContrastText - #FFF, CSS: var(--infoColorContrastText)
|
|
925
1122
|
|
|
926
|
-
Styleguide Settings.theme.
|
|
1123
|
+
Styleguide Settings.theme.info
|
|
1124
|
+
*/
|
|
1125
|
+
--infoColorLight: #0ec4c7;
|
|
1126
|
+
--infoColor: #009fa2;
|
|
1127
|
+
--infoColorDark: #007578;
|
|
1128
|
+
--infoColorContrastText: #fff;
|
|
1129
|
+
/*
|
|
1130
|
+
---------------------------------------------------------------------
|
|
927
1131
|
*/
|
|
928
|
-
--successColor: #35ce68;
|
|
929
|
-
--warningColor: #ff962f;
|
|
930
|
-
--errorColor: #f52d2d;
|
|
931
|
-
--errorColorDark: #a00808;
|
|
932
|
-
--errorColorLight: #fcbfbf;
|
|
933
|
-
--errorColorLightest: #fee6e6;
|
|
934
|
-
--errorBackground: #fff2f2;
|
|
935
1132
|
/*
|
|
936
1133
|
The CSS variables below are historic and we should strive not to
|
|
937
1134
|
use them. Prefer to use directly semantic colors above.
|
|
@@ -1692,10 +1889,97 @@ input[type=text] {
|
|
|
1692
1889
|
}
|
|
1693
1890
|
@media (pointer: coarse) {
|
|
1694
1891
|
}
|
|
1892
|
+
:root {
|
|
1893
|
+
--invertedBackgroundColor: #297ef2;
|
|
1894
|
+
--invertedContrastTextColor: #fff;
|
|
1895
|
+
}
|
|
1896
|
+
.recipient__CozyTheme--inverted___2anJa {
|
|
1897
|
+
--primaryTextColor: #fff;
|
|
1898
|
+
--secondaryTextColor: rgba(255,255,255,0.64);
|
|
1899
|
+
--disabledTextColor: rgba(255,255,255,0.4);
|
|
1900
|
+
--hintTextColor: rgba(255,255,255,0.4);
|
|
1901
|
+
--iconTextColor: #fff;
|
|
1902
|
+
--actionColorActive: #fff;
|
|
1903
|
+
--actionColorHover: rgba(255,255,255,0.08);
|
|
1904
|
+
--actionColorSelected: rgba(255,255,255,0.16);
|
|
1905
|
+
--actionColorDisabled: rgba(255,255,255,0.32);
|
|
1906
|
+
--actionColorDisabledBackground: rgba(255,255,255,0.12);
|
|
1907
|
+
--actionColorFocus: rgba(255,255,255,0.24);
|
|
1908
|
+
--actionColorGhost: rgba(255,255,255,0.08);
|
|
1909
|
+
--actionColorHoverGhost: rgba(255,255,255,0.16);
|
|
1910
|
+
--dividerColor: rgba(255,255,255,0.16);
|
|
1911
|
+
--borderMainColor: rgba(255,255,255,0.24);
|
|
1912
|
+
--borderDisabledColor: rgba(255,255,255,0.12);
|
|
1913
|
+
--borderGhostColor: rgba(255,255,255,0.48);
|
|
1914
|
+
--borderGhostDisabledColor: rgba(255,255,255,0.24);
|
|
1915
|
+
--paperBackgroundColor: #297ef2;
|
|
1916
|
+
--defaultBackgroundColor: #579eff;
|
|
1917
|
+
--primaryColorLight: #fff;
|
|
1918
|
+
--primaryColor: #fff;
|
|
1919
|
+
--primaryColorDark: #eaf3ff;
|
|
1920
|
+
--primaryContrastTextColor: #297ef2;
|
|
1921
|
+
--secondaryColorLight: #f8eefd;
|
|
1922
|
+
--secondaryColor: #ecd7f7;
|
|
1923
|
+
--secondaryColorDark: #deb8f0;
|
|
1924
|
+
--secondaryContrastTextColor: rgba(29,33,42,0.9);
|
|
1925
|
+
--errorColorLight: #ffecec;
|
|
1926
|
+
--errorColor: #ffd3d3;
|
|
1927
|
+
--errorColorDark: #ffb9b9;
|
|
1928
|
+
--errorColorContrastText: rgba(29,33,42,0.9);
|
|
1929
|
+
--errorBackground: #d31f1f;
|
|
1930
|
+
--warningColorLight: #fff3dd;
|
|
1931
|
+
--warningColor: #ffe4b5;
|
|
1932
|
+
--warningColorDark: #ffd58b;
|
|
1933
|
+
--warningColorContrastText: rgba(29,33,42,0.9);
|
|
1934
|
+
--successColorLight: #e3ffe7;
|
|
1935
|
+
--successColor: #c0f4c6;
|
|
1936
|
+
--successColorDark: #97eca1;
|
|
1937
|
+
--successColorContrastText: rgba(29,33,42,0.9);
|
|
1938
|
+
--infoColorLight: #d4feff;
|
|
1939
|
+
--infoColor: #affdff;
|
|
1940
|
+
--infoColorDark: #86f5f7;
|
|
1941
|
+
--infoColorContrastText: rgba(29,33,42,0.9);
|
|
1942
|
+
/*
|
|
1943
|
+
The CSS variables below are historic and we should strive not to
|
|
1944
|
+
use them. Prefer to use directly semantic colors above.
|
|
1945
|
+
*/
|
|
1946
|
+
--iconColor: var(--secondaryTextColor);
|
|
1947
|
+
--textIconColor: #fff;
|
|
1948
|
+
--barIconColor: #fff;
|
|
1949
|
+
--barIconColorDisabled: rgba(255,255,255,0.88);
|
|
1950
|
+
--spinnerColor: #fff;
|
|
1951
|
+
--linkColor: #fff;
|
|
1952
|
+
--linkColorActive: #fff;
|
|
1953
|
+
--linkTextDecoration: underline;
|
|
1954
|
+
--regularButtonPrimaryColor: #fff;
|
|
1955
|
+
--regularButtonSecondaryColor: #fff;
|
|
1956
|
+
--regularButtonActiveColor: rgba(255,255,255,0.88);
|
|
1957
|
+
--regularButtonConstrastColor: #297ef2;
|
|
1958
|
+
--secondaryButtonPrimaryColor: #297ef2;
|
|
1959
|
+
--secondaryButtonSecondaryColor: #fff;
|
|
1960
|
+
--secondaryButtonActiveColor: rgba(255,255,255,0.24);
|
|
1961
|
+
--secondaryButtonContrastColor: #fff;
|
|
1962
|
+
--dividerColor2: rgba(255,255,255,0.16);
|
|
1963
|
+
}
|
|
1695
1964
|
html {
|
|
1696
1965
|
/*
|
|
1697
1966
|
Grey
|
|
1698
1967
|
|
|
1968
|
+
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
|
|
1969
|
+
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
|
|
1970
|
+
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
|
|
1971
|
+
Stylus: grey200 - #eceff1, CSS: var(--grey200)
|
|
1972
|
+
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
|
|
1973
|
+
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
|
|
1974
|
+
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
|
|
1975
|
+
Stylus: grey600 - #7c8086, CSS: var(--grey600)
|
|
1976
|
+
Stylus: grey700 - #5d6169, CSS: var(--grey700)
|
|
1977
|
+
Stylus: grey800 - #3e424a, CSS: var(--grey800)
|
|
1978
|
+
Stylus: grey900 - #1d212a, CSS: var(--grey900)
|
|
1979
|
+
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
|
|
1980
|
+
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
|
|
1981
|
+
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
|
|
1982
|
+
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
|
|
1699
1983
|
Stylus: white - #FFFFFF, CSS: var(--white)
|
|
1700
1984
|
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
|
|
1701
1985
|
Stylus: silver - #D6D8Da, CSS: var(--silver)
|
|
@@ -1704,9 +1988,23 @@ html {
|
|
|
1704
1988
|
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
|
|
1705
1989
|
Stylus: black - #000000, CSS: var(--black)
|
|
1706
1990
|
|
|
1707
|
-
|
|
1708
1991
|
Styleguide Settings.colors.grey
|
|
1709
1992
|
*/
|
|
1993
|
+
--grey0: #fff;
|
|
1994
|
+
--grey50: #f9fafb;
|
|
1995
|
+
--grey100: #f4f5f6;
|
|
1996
|
+
--grey200: #eceff1;
|
|
1997
|
+
--grey300: #dde0e3;
|
|
1998
|
+
--grey400: #bfc3c7;
|
|
1999
|
+
--grey500: #9da2a6;
|
|
2000
|
+
--grey600: #7c8086;
|
|
2001
|
+
--grey700: #5d6169;
|
|
2002
|
+
--grey800: #3e424a;
|
|
2003
|
+
--grey900: #1d212a;
|
|
2004
|
+
--greyA100: #d3d6d8;
|
|
2005
|
+
--greyA200: #a7abaf;
|
|
2006
|
+
--greyA400: #2c3039;
|
|
2007
|
+
--greyA700: #5d6169;
|
|
1710
2008
|
--white: #fff;
|
|
1711
2009
|
--paleGrey: #f5f6f7;
|
|
1712
2010
|
--silver: #d6d8da;
|
|
@@ -1767,88 +2065,184 @@ html {
|
|
|
1767
2065
|
html,
|
|
1768
2066
|
.recipient__CozyTheme--normal___994FQ {
|
|
1769
2067
|
/*
|
|
1770
|
-
Primary
|
|
2068
|
+
Primary colors
|
|
1771
2069
|
|
|
2070
|
+
Stylus: primaryColorLightest - #B3D3FF, CSS: var(--primaryColorLightest)
|
|
2071
|
+
Stylus: primaryColorLight - #5C9DF5, CSS: var(--primaryColorLight)
|
|
1772
2072
|
Stylus: primaryColor - #297EF2, CSS: var(--primaryColor)
|
|
1773
2073
|
Stylus: primaryColorDark - #0B61D6, CSS: var(--primaryColorDark)
|
|
1774
|
-
Stylus:
|
|
1775
|
-
Stylus: primaryColorLightest - #9FC4FB, CSS: var(--primaryColorLightest)
|
|
1776
|
-
Stylus: primaryContrastTextColor - #FFFFFF, CSS: var(--primaryContrastTextColor)
|
|
2074
|
+
Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
|
|
1777
2075
|
|
|
1778
2076
|
Styleguide Settings.theme.primary
|
|
1779
2077
|
*/
|
|
2078
|
+
--primaryColorLightest: #b3d3ff;
|
|
2079
|
+
--primaryColorLight: #579eff;
|
|
1780
2080
|
--primaryColor: #297ef2;
|
|
1781
|
-
--primaryColorDark: #
|
|
1782
|
-
--
|
|
1783
|
-
--primaryColorLightest: #9fc4fb;
|
|
2081
|
+
--primaryColorDark: #0f5cc7;
|
|
2082
|
+
--primaryContrastTextColor: #fff;
|
|
1784
2083
|
/*
|
|
1785
|
-
Secondary
|
|
2084
|
+
Secondary colors
|
|
1786
2085
|
|
|
1787
|
-
Stylus:
|
|
1788
|
-
Stylus:
|
|
1789
|
-
Stylus:
|
|
1790
|
-
Stylus:
|
|
2086
|
+
Stylus: secondaryColorLightest - #FFD3D3, CSS: var(--secondaryColorLightest)
|
|
2087
|
+
Stylus: secondaryColorLight - #F96B6B, CSS: var(--secondaryColorLight)
|
|
2088
|
+
Stylus: secondaryColor - #EA3F3F, CSS: var(--secondaryColor)
|
|
2089
|
+
Stylus: secondaryColorDark - #D31F1F, CSS: var(--secondaryColorDark)
|
|
2090
|
+
Stylus: secondaryContrastTextColor - #FFF, CSS: var(--secondaryContrastTextColor)
|
|
1791
2091
|
|
|
1792
2092
|
Styleguide Settings.theme.secondary
|
|
1793
2093
|
*/
|
|
1794
|
-
--
|
|
1795
|
-
--
|
|
1796
|
-
--
|
|
1797
|
-
--
|
|
2094
|
+
--secondaryColorLightest: #ffd3d3;
|
|
2095
|
+
--secondaryColorLight: #f96b6b;
|
|
2096
|
+
--secondaryColor: #ea3f3f;
|
|
2097
|
+
--secondaryColorDark: #d31f1f;
|
|
2098
|
+
--secondaryContrastTextColor: #fff;
|
|
1798
2099
|
/*
|
|
1799
2100
|
Background colors
|
|
1800
2101
|
|
|
1801
|
-
Stylus: primaryBackgroundLight - #
|
|
2102
|
+
Stylus: primaryBackgroundLight - #F7FAFF, CSS: var(--primaryBackgroundLight)
|
|
1802
2103
|
Stylus: paperBackgroundColor - #FFF, CSS: var(--paperBackgroundColor)
|
|
1803
|
-
Stylus: defaultBackgroundColor - #
|
|
2104
|
+
Stylus: defaultBackgroundColor - #F4F5F6, CSS: var(--defaultBackgroundColor)
|
|
1804
2105
|
|
|
1805
2106
|
Styleguide Settings.theme.background
|
|
1806
2107
|
*/
|
|
1807
|
-
--primaryBackgroundLight: #
|
|
2108
|
+
--primaryBackgroundLight: #f7faff;
|
|
1808
2109
|
--paperBackgroundColor: #fff;
|
|
1809
|
-
--defaultBackgroundColor: #
|
|
2110
|
+
--defaultBackgroundColor: #f4f5f6;
|
|
1810
2111
|
/*
|
|
1811
2112
|
Text colors
|
|
1812
2113
|
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
Stylus:
|
|
2114
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2115
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2116
|
+
|
|
2117
|
+
Stylus: primaryTextColor - #383B43, CSS: var(--primaryTextColor)
|
|
2118
|
+
Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
|
|
2119
|
+
Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
|
|
2120
|
+
Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
|
|
2121
|
+
Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
|
|
1817
2122
|
|
|
1818
2123
|
Styleguide Settings.theme.text
|
|
1819
2124
|
*/
|
|
1820
|
-
--primaryTextColor:
|
|
1821
|
-
--secondaryTextColor:
|
|
1822
|
-
--
|
|
1823
|
-
--
|
|
2125
|
+
--primaryTextColor: rgba(29,33,42,0.9);
|
|
2126
|
+
--secondaryTextColor: rgba(29,33,42,0.48);
|
|
2127
|
+
--disabledTextColor: rgba(29,33,42,0.32);
|
|
2128
|
+
--hintTextColor: rgba(29,33,42,0.32);
|
|
2129
|
+
--iconTextColor: rgba(29,33,42,0.72);
|
|
1824
2130
|
/*
|
|
1825
|
-
|
|
2131
|
+
Action colors
|
|
2132
|
+
|
|
2133
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2134
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
1826
2135
|
|
|
1827
|
-
|
|
1828
|
-
|
|
2136
|
+
Stylus: actionColorActive - #8A8C90, CSS: var(--actionColorActive)
|
|
2137
|
+
Stylus: actionColorHover - #F7F7F7, CSS: var(--actionColorHover)
|
|
2138
|
+
Stylus: actionColorSelected - #EFEFF0, CSS: var(--actionColorSelected)
|
|
2139
|
+
Stylus: actionColorDisabled - #CFCFD1, CSS: var(--actionColorDisabled)
|
|
2140
|
+
Stylus: actionColorDisabledBackground - #E7E7E8, CSS: var(--actionColorDisabledBackground)
|
|
2141
|
+
Stylus: actionColorFocus - #E7E7E8, CSS: var(--actionColorFocus)
|
|
2142
|
+
Stylus: actionColorGhost - #EFEFF0, CSS: var(--actionColorGhost)
|
|
2143
|
+
Stylus: actionColorHoverGhost - #DFE0E0, CSS: var(--actionColorHoverGhost)
|
|
2144
|
+
|
|
2145
|
+
Styleguide Settings.theme.action
|
|
2146
|
+
*/
|
|
2147
|
+
--actionColorActive: rgba(29,33,42,0.56);
|
|
2148
|
+
--actionColorHover: rgba(29,33,42,0.04);
|
|
2149
|
+
--actionColorSelected: rgba(29,33,42,0.08);
|
|
2150
|
+
--actionColorDisabled: rgba(29,33,42,0.24);
|
|
2151
|
+
--actionColorDisabledBackground: rgba(29,33,42,0.12);
|
|
2152
|
+
--actionColorFocus: rgba(29,33,42,0.12);
|
|
2153
|
+
--actionColorGhost: rgba(29,33,42,0.08);
|
|
2154
|
+
--actionColorHoverGhost: rgba(29,33,42,0.16);
|
|
2155
|
+
/*
|
|
2156
|
+
Border colors
|
|
2157
|
+
|
|
2158
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2159
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2160
|
+
|
|
2161
|
+
Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
|
|
2162
|
+
Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
|
|
2163
|
+
Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
|
|
2164
|
+
Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
|
|
2165
|
+
|
|
2166
|
+
Styleguide Settings.theme.border
|
|
2167
|
+
*/
|
|
2168
|
+
--borderMainColor: rgba(29,33,42,0.16);
|
|
2169
|
+
--borderDisabledColor: rgba(29,33,42,0.08);
|
|
2170
|
+
--borderGhostColor: rgba(29,33,42,0.48);
|
|
2171
|
+
--borderGhostDisabledColor: rgba(29,33,42,0.16);
|
|
2172
|
+
/*
|
|
2173
|
+
Divider colors
|
|
2174
|
+
|
|
2175
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2176
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
1829
2177
|
|
|
1830
2178
|
Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
|
|
1831
2179
|
|
|
1832
|
-
Styleguide Settings.theme.
|
|
2180
|
+
Styleguide Settings.theme.divider
|
|
2181
|
+
*/
|
|
2182
|
+
--dividerColor: rgba(29,33,42,0.12);
|
|
2183
|
+
/*
|
|
2184
|
+
Success colors
|
|
2185
|
+
|
|
2186
|
+
Stylus: successColorLight - #38C949, CSS: var(--successColorLight)
|
|
2187
|
+
Stylus: successColor - #09AE1C, CSS: var(--successColor)
|
|
2188
|
+
Stylus: successColorDark - #018711, CSS: var(--successColorDark)
|
|
2189
|
+
Stylus: successColorContrastText - #FFF, CSS: var(--successColorContrastText)
|
|
2190
|
+
|
|
2191
|
+
Styleguide Settings.theme.success
|
|
2192
|
+
*/
|
|
2193
|
+
--successColorLight: #38c949;
|
|
2194
|
+
--successColor: #09ae1c;
|
|
2195
|
+
--successColorDark: #018711;
|
|
2196
|
+
--successColorContrastText: #fff;
|
|
2197
|
+
/*
|
|
2198
|
+
Warning colors
|
|
2199
|
+
|
|
2200
|
+
Stylus: warningColorLight - #EFA82F, CSS: var(--warningColorLight)
|
|
2201
|
+
Stylus: warningColor - #CB8100, CSS: var(--warningColor)
|
|
2202
|
+
Stylus: warningColorDark - #986100, CSS: var(--warningColorDark)
|
|
2203
|
+
Stylus: warningColorContrastText - #FFF, CSS: var(--warningColorContrastText)
|
|
2204
|
+
|
|
2205
|
+
Styleguide Settings.theme.warning
|
|
2206
|
+
*/
|
|
2207
|
+
--warningColorLight: #efa82d;
|
|
2208
|
+
--warningColor: #cb8100;
|
|
2209
|
+
--warningColorDark: #986100;
|
|
2210
|
+
--warningColorContrastText: #fff;
|
|
2211
|
+
/*
|
|
2212
|
+
Error colors
|
|
2213
|
+
|
|
2214
|
+
Stylus: errorColorLightest - #FFECEC, CSS: var(--errorColorLightest)
|
|
2215
|
+
Stylus: errorColorLight - #F96B6B, CSS: var(--errorColorLight)
|
|
2216
|
+
Stylus: errorColor - #EA3F3F, CSS: var(--errorColor)
|
|
2217
|
+
Stylus: errorColorDark - #D31F1F, CSS: var(--errorColorDark)
|
|
2218
|
+
Stylus: errorBackground - #FFECEC, CSS: var(--errorBackground)
|
|
2219
|
+
Stylus: errorColorContrastText - #FFF, CSS: var(--errorColorContrastText)
|
|
2220
|
+
|
|
2221
|
+
Styleguide Settings.theme.error
|
|
1833
2222
|
*/
|
|
1834
|
-
--
|
|
2223
|
+
--errorColorLightest: #ffecec;
|
|
2224
|
+
--errorColorLight: #f96b6b;
|
|
2225
|
+
--errorColor: #ea3f3f;
|
|
2226
|
+
--errorColorDark: #d31f1f;
|
|
2227
|
+
--errorBackground: #ffecec;
|
|
2228
|
+
--errorColorContrastText: #fff;
|
|
1835
2229
|
/*
|
|
1836
|
-
|
|
2230
|
+
Info colors
|
|
1837
2231
|
|
|
1838
|
-
Stylus:
|
|
1839
|
-
Stylus:
|
|
1840
|
-
Stylus:
|
|
1841
|
-
Stylus:
|
|
2232
|
+
Stylus: infoColorLight - #0EC4C7, CSS: var(--infoColorLight)
|
|
2233
|
+
Stylus: infoColor - #009FA2, CSS: var(--infoColor)
|
|
2234
|
+
Stylus: infoColorDark - #007578, CSS: var(--infoColorDark)
|
|
2235
|
+
Stylus: infoColorContrastText - #FFF, CSS: var(--infoColorContrastText)
|
|
1842
2236
|
|
|
1843
|
-
Styleguide Settings.theme.
|
|
2237
|
+
Styleguide Settings.theme.info
|
|
2238
|
+
*/
|
|
2239
|
+
--infoColorLight: #0ec4c7;
|
|
2240
|
+
--infoColor: #009fa2;
|
|
2241
|
+
--infoColorDark: #007578;
|
|
2242
|
+
--infoColorContrastText: #fff;
|
|
2243
|
+
/*
|
|
2244
|
+
---------------------------------------------------------------------
|
|
1844
2245
|
*/
|
|
1845
|
-
--successColor: #35ce68;
|
|
1846
|
-
--warningColor: #ff962f;
|
|
1847
|
-
--errorColor: #f52d2d;
|
|
1848
|
-
--errorColorDark: #a00808;
|
|
1849
|
-
--errorColorLight: #fcbfbf;
|
|
1850
|
-
--errorColorLightest: #fee6e6;
|
|
1851
|
-
--errorBackground: #fff2f2;
|
|
1852
2246
|
/*
|
|
1853
2247
|
The CSS variables below are historic and we should strive not to
|
|
1854
2248
|
use them. Prefer to use directly semantic colors above.
|
|
@@ -1976,10 +2370,97 @@ html,
|
|
|
1976
2370
|
imported from autosuggest.styl
|
|
1977
2371
|
*/
|
|
1978
2372
|
|
|
2373
|
+
:root {
|
|
2374
|
+
--invertedBackgroundColor: #297ef2;
|
|
2375
|
+
--invertedContrastTextColor: #fff;
|
|
2376
|
+
}
|
|
2377
|
+
.autosuggest__CozyTheme--inverted___QJCUa {
|
|
2378
|
+
--primaryTextColor: #fff;
|
|
2379
|
+
--secondaryTextColor: rgba(255,255,255,0.64);
|
|
2380
|
+
--disabledTextColor: rgba(255,255,255,0.4);
|
|
2381
|
+
--hintTextColor: rgba(255,255,255,0.4);
|
|
2382
|
+
--iconTextColor: #fff;
|
|
2383
|
+
--actionColorActive: #fff;
|
|
2384
|
+
--actionColorHover: rgba(255,255,255,0.08);
|
|
2385
|
+
--actionColorSelected: rgba(255,255,255,0.16);
|
|
2386
|
+
--actionColorDisabled: rgba(255,255,255,0.32);
|
|
2387
|
+
--actionColorDisabledBackground: rgba(255,255,255,0.12);
|
|
2388
|
+
--actionColorFocus: rgba(255,255,255,0.24);
|
|
2389
|
+
--actionColorGhost: rgba(255,255,255,0.08);
|
|
2390
|
+
--actionColorHoverGhost: rgba(255,255,255,0.16);
|
|
2391
|
+
--dividerColor: rgba(255,255,255,0.16);
|
|
2392
|
+
--borderMainColor: rgba(255,255,255,0.24);
|
|
2393
|
+
--borderDisabledColor: rgba(255,255,255,0.12);
|
|
2394
|
+
--borderGhostColor: rgba(255,255,255,0.48);
|
|
2395
|
+
--borderGhostDisabledColor: rgba(255,255,255,0.24);
|
|
2396
|
+
--paperBackgroundColor: #297ef2;
|
|
2397
|
+
--defaultBackgroundColor: #579eff;
|
|
2398
|
+
--primaryColorLight: #fff;
|
|
2399
|
+
--primaryColor: #fff;
|
|
2400
|
+
--primaryColorDark: #eaf3ff;
|
|
2401
|
+
--primaryContrastTextColor: #297ef2;
|
|
2402
|
+
--secondaryColorLight: #f8eefd;
|
|
2403
|
+
--secondaryColor: #ecd7f7;
|
|
2404
|
+
--secondaryColorDark: #deb8f0;
|
|
2405
|
+
--secondaryContrastTextColor: rgba(29,33,42,0.9);
|
|
2406
|
+
--errorColorLight: #ffecec;
|
|
2407
|
+
--errorColor: #ffd3d3;
|
|
2408
|
+
--errorColorDark: #ffb9b9;
|
|
2409
|
+
--errorColorContrastText: rgba(29,33,42,0.9);
|
|
2410
|
+
--errorBackground: #d31f1f;
|
|
2411
|
+
--warningColorLight: #fff3dd;
|
|
2412
|
+
--warningColor: #ffe4b5;
|
|
2413
|
+
--warningColorDark: #ffd58b;
|
|
2414
|
+
--warningColorContrastText: rgba(29,33,42,0.9);
|
|
2415
|
+
--successColorLight: #e3ffe7;
|
|
2416
|
+
--successColor: #c0f4c6;
|
|
2417
|
+
--successColorDark: #97eca1;
|
|
2418
|
+
--successColorContrastText: rgba(29,33,42,0.9);
|
|
2419
|
+
--infoColorLight: #d4feff;
|
|
2420
|
+
--infoColor: #affdff;
|
|
2421
|
+
--infoColorDark: #86f5f7;
|
|
2422
|
+
--infoColorContrastText: rgba(29,33,42,0.9);
|
|
2423
|
+
/*
|
|
2424
|
+
The CSS variables below are historic and we should strive not to
|
|
2425
|
+
use them. Prefer to use directly semantic colors above.
|
|
2426
|
+
*/
|
|
2427
|
+
--iconColor: var(--secondaryTextColor);
|
|
2428
|
+
--textIconColor: #fff;
|
|
2429
|
+
--barIconColor: #fff;
|
|
2430
|
+
--barIconColorDisabled: rgba(255,255,255,0.88);
|
|
2431
|
+
--spinnerColor: #fff;
|
|
2432
|
+
--linkColor: #fff;
|
|
2433
|
+
--linkColorActive: #fff;
|
|
2434
|
+
--linkTextDecoration: underline;
|
|
2435
|
+
--regularButtonPrimaryColor: #fff;
|
|
2436
|
+
--regularButtonSecondaryColor: #fff;
|
|
2437
|
+
--regularButtonActiveColor: rgba(255,255,255,0.88);
|
|
2438
|
+
--regularButtonConstrastColor: #297ef2;
|
|
2439
|
+
--secondaryButtonPrimaryColor: #297ef2;
|
|
2440
|
+
--secondaryButtonSecondaryColor: #fff;
|
|
2441
|
+
--secondaryButtonActiveColor: rgba(255,255,255,0.24);
|
|
2442
|
+
--secondaryButtonContrastColor: #fff;
|
|
2443
|
+
--dividerColor2: rgba(255,255,255,0.16);
|
|
2444
|
+
}
|
|
1979
2445
|
html {
|
|
1980
2446
|
/*
|
|
1981
2447
|
Grey
|
|
1982
2448
|
|
|
2449
|
+
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
|
|
2450
|
+
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
|
|
2451
|
+
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
|
|
2452
|
+
Stylus: grey200 - #eceff1, CSS: var(--grey200)
|
|
2453
|
+
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
|
|
2454
|
+
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
|
|
2455
|
+
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
|
|
2456
|
+
Stylus: grey600 - #7c8086, CSS: var(--grey600)
|
|
2457
|
+
Stylus: grey700 - #5d6169, CSS: var(--grey700)
|
|
2458
|
+
Stylus: grey800 - #3e424a, CSS: var(--grey800)
|
|
2459
|
+
Stylus: grey900 - #1d212a, CSS: var(--grey900)
|
|
2460
|
+
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
|
|
2461
|
+
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
|
|
2462
|
+
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
|
|
2463
|
+
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
|
|
1983
2464
|
Stylus: white - #FFFFFF, CSS: var(--white)
|
|
1984
2465
|
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
|
|
1985
2466
|
Stylus: silver - #D6D8Da, CSS: var(--silver)
|
|
@@ -1988,9 +2469,23 @@ html {
|
|
|
1988
2469
|
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
|
|
1989
2470
|
Stylus: black - #000000, CSS: var(--black)
|
|
1990
2471
|
|
|
1991
|
-
|
|
1992
2472
|
Styleguide Settings.colors.grey
|
|
1993
2473
|
*/
|
|
2474
|
+
--grey0: #fff;
|
|
2475
|
+
--grey50: #f9fafb;
|
|
2476
|
+
--grey100: #f4f5f6;
|
|
2477
|
+
--grey200: #eceff1;
|
|
2478
|
+
--grey300: #dde0e3;
|
|
2479
|
+
--grey400: #bfc3c7;
|
|
2480
|
+
--grey500: #9da2a6;
|
|
2481
|
+
--grey600: #7c8086;
|
|
2482
|
+
--grey700: #5d6169;
|
|
2483
|
+
--grey800: #3e424a;
|
|
2484
|
+
--grey900: #1d212a;
|
|
2485
|
+
--greyA100: #d3d6d8;
|
|
2486
|
+
--greyA200: #a7abaf;
|
|
2487
|
+
--greyA400: #2c3039;
|
|
2488
|
+
--greyA700: #5d6169;
|
|
1994
2489
|
--white: #fff;
|
|
1995
2490
|
--paleGrey: #f5f6f7;
|
|
1996
2491
|
--silver: #d6d8da;
|
|
@@ -2051,88 +2546,184 @@ html {
|
|
|
2051
2546
|
html,
|
|
2052
2547
|
.autosuggest__CozyTheme--normal___1-_dN {
|
|
2053
2548
|
/*
|
|
2054
|
-
Primary
|
|
2549
|
+
Primary colors
|
|
2055
2550
|
|
|
2551
|
+
Stylus: primaryColorLightest - #B3D3FF, CSS: var(--primaryColorLightest)
|
|
2552
|
+
Stylus: primaryColorLight - #5C9DF5, CSS: var(--primaryColorLight)
|
|
2056
2553
|
Stylus: primaryColor - #297EF2, CSS: var(--primaryColor)
|
|
2057
2554
|
Stylus: primaryColorDark - #0B61D6, CSS: var(--primaryColorDark)
|
|
2058
|
-
Stylus:
|
|
2059
|
-
Stylus: primaryColorLightest - #9FC4FB, CSS: var(--primaryColorLightest)
|
|
2060
|
-
Stylus: primaryContrastTextColor - #FFFFFF, CSS: var(--primaryContrastTextColor)
|
|
2555
|
+
Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
|
|
2061
2556
|
|
|
2062
2557
|
Styleguide Settings.theme.primary
|
|
2063
2558
|
*/
|
|
2559
|
+
--primaryColorLightest: #b3d3ff;
|
|
2560
|
+
--primaryColorLight: #579eff;
|
|
2064
2561
|
--primaryColor: #297ef2;
|
|
2065
|
-
--primaryColorDark: #
|
|
2066
|
-
--
|
|
2067
|
-
--primaryColorLightest: #9fc4fb;
|
|
2562
|
+
--primaryColorDark: #0f5cc7;
|
|
2563
|
+
--primaryContrastTextColor: #fff;
|
|
2068
2564
|
/*
|
|
2069
|
-
Secondary
|
|
2565
|
+
Secondary colors
|
|
2070
2566
|
|
|
2071
|
-
Stylus:
|
|
2072
|
-
Stylus:
|
|
2073
|
-
Stylus:
|
|
2074
|
-
Stylus:
|
|
2567
|
+
Stylus: secondaryColorLightest - #FFD3D3, CSS: var(--secondaryColorLightest)
|
|
2568
|
+
Stylus: secondaryColorLight - #F96B6B, CSS: var(--secondaryColorLight)
|
|
2569
|
+
Stylus: secondaryColor - #EA3F3F, CSS: var(--secondaryColor)
|
|
2570
|
+
Stylus: secondaryColorDark - #D31F1F, CSS: var(--secondaryColorDark)
|
|
2571
|
+
Stylus: secondaryContrastTextColor - #FFF, CSS: var(--secondaryContrastTextColor)
|
|
2075
2572
|
|
|
2076
2573
|
Styleguide Settings.theme.secondary
|
|
2077
2574
|
*/
|
|
2078
|
-
--
|
|
2079
|
-
--
|
|
2080
|
-
--
|
|
2081
|
-
--
|
|
2575
|
+
--secondaryColorLightest: #ffd3d3;
|
|
2576
|
+
--secondaryColorLight: #f96b6b;
|
|
2577
|
+
--secondaryColor: #ea3f3f;
|
|
2578
|
+
--secondaryColorDark: #d31f1f;
|
|
2579
|
+
--secondaryContrastTextColor: #fff;
|
|
2082
2580
|
/*
|
|
2083
2581
|
Background colors
|
|
2084
2582
|
|
|
2085
|
-
Stylus: primaryBackgroundLight - #
|
|
2583
|
+
Stylus: primaryBackgroundLight - #F7FAFF, CSS: var(--primaryBackgroundLight)
|
|
2086
2584
|
Stylus: paperBackgroundColor - #FFF, CSS: var(--paperBackgroundColor)
|
|
2087
|
-
Stylus: defaultBackgroundColor - #
|
|
2585
|
+
Stylus: defaultBackgroundColor - #F4F5F6, CSS: var(--defaultBackgroundColor)
|
|
2088
2586
|
|
|
2089
2587
|
Styleguide Settings.theme.background
|
|
2090
2588
|
*/
|
|
2091
|
-
--primaryBackgroundLight: #
|
|
2589
|
+
--primaryBackgroundLight: #f7faff;
|
|
2092
2590
|
--paperBackgroundColor: #fff;
|
|
2093
|
-
--defaultBackgroundColor: #
|
|
2591
|
+
--defaultBackgroundColor: #f4f5f6;
|
|
2094
2592
|
/*
|
|
2095
2593
|
Text colors
|
|
2096
2594
|
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
Stylus:
|
|
2595
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2596
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2597
|
+
|
|
2598
|
+
Stylus: primaryTextColor - #383B43, CSS: var(--primaryTextColor)
|
|
2599
|
+
Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
|
|
2600
|
+
Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
|
|
2601
|
+
Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
|
|
2602
|
+
Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
|
|
2101
2603
|
|
|
2102
2604
|
Styleguide Settings.theme.text
|
|
2103
2605
|
*/
|
|
2104
|
-
--primaryTextColor:
|
|
2105
|
-
--secondaryTextColor:
|
|
2106
|
-
--
|
|
2107
|
-
--
|
|
2606
|
+
--primaryTextColor: rgba(29,33,42,0.9);
|
|
2607
|
+
--secondaryTextColor: rgba(29,33,42,0.48);
|
|
2608
|
+
--disabledTextColor: rgba(29,33,42,0.32);
|
|
2609
|
+
--hintTextColor: rgba(29,33,42,0.32);
|
|
2610
|
+
--iconTextColor: rgba(29,33,42,0.72);
|
|
2611
|
+
/*
|
|
2612
|
+
Action colors
|
|
2613
|
+
|
|
2614
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2615
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2616
|
+
|
|
2617
|
+
Stylus: actionColorActive - #8A8C90, CSS: var(--actionColorActive)
|
|
2618
|
+
Stylus: actionColorHover - #F7F7F7, CSS: var(--actionColorHover)
|
|
2619
|
+
Stylus: actionColorSelected - #EFEFF0, CSS: var(--actionColorSelected)
|
|
2620
|
+
Stylus: actionColorDisabled - #CFCFD1, CSS: var(--actionColorDisabled)
|
|
2621
|
+
Stylus: actionColorDisabledBackground - #E7E7E8, CSS: var(--actionColorDisabledBackground)
|
|
2622
|
+
Stylus: actionColorFocus - #E7E7E8, CSS: var(--actionColorFocus)
|
|
2623
|
+
Stylus: actionColorGhost - #EFEFF0, CSS: var(--actionColorGhost)
|
|
2624
|
+
Stylus: actionColorHoverGhost - #DFE0E0, CSS: var(--actionColorHoverGhost)
|
|
2625
|
+
|
|
2626
|
+
Styleguide Settings.theme.action
|
|
2627
|
+
*/
|
|
2628
|
+
--actionColorActive: rgba(29,33,42,0.56);
|
|
2629
|
+
--actionColorHover: rgba(29,33,42,0.04);
|
|
2630
|
+
--actionColorSelected: rgba(29,33,42,0.08);
|
|
2631
|
+
--actionColorDisabled: rgba(29,33,42,0.24);
|
|
2632
|
+
--actionColorDisabledBackground: rgba(29,33,42,0.12);
|
|
2633
|
+
--actionColorFocus: rgba(29,33,42,0.12);
|
|
2634
|
+
--actionColorGhost: rgba(29,33,42,0.08);
|
|
2635
|
+
--actionColorHoverGhost: rgba(29,33,42,0.16);
|
|
2108
2636
|
/*
|
|
2109
|
-
|
|
2637
|
+
Border colors
|
|
2638
|
+
|
|
2639
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2640
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2110
2641
|
|
|
2111
|
-
|
|
2112
|
-
|
|
2642
|
+
Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
|
|
2643
|
+
Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
|
|
2644
|
+
Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
|
|
2645
|
+
Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
|
|
2646
|
+
|
|
2647
|
+
Styleguide Settings.theme.border
|
|
2648
|
+
*/
|
|
2649
|
+
--borderMainColor: rgba(29,33,42,0.16);
|
|
2650
|
+
--borderDisabledColor: rgba(29,33,42,0.08);
|
|
2651
|
+
--borderGhostColor: rgba(29,33,42,0.48);
|
|
2652
|
+
--borderGhostDisabledColor: rgba(29,33,42,0.16);
|
|
2653
|
+
/*
|
|
2654
|
+
Divider colors
|
|
2655
|
+
|
|
2656
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
2657
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2113
2658
|
|
|
2114
2659
|
Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
|
|
2115
2660
|
|
|
2116
|
-
Styleguide Settings.theme.
|
|
2661
|
+
Styleguide Settings.theme.divider
|
|
2117
2662
|
*/
|
|
2118
|
-
--dividerColor: rgba(29,33,42,0.
|
|
2663
|
+
--dividerColor: rgba(29,33,42,0.12);
|
|
2119
2664
|
/*
|
|
2120
|
-
|
|
2665
|
+
Success colors
|
|
2121
2666
|
|
|
2122
|
-
Stylus:
|
|
2123
|
-
Stylus:
|
|
2124
|
-
Stylus:
|
|
2125
|
-
Stylus:
|
|
2667
|
+
Stylus: successColorLight - #38C949, CSS: var(--successColorLight)
|
|
2668
|
+
Stylus: successColor - #09AE1C, CSS: var(--successColor)
|
|
2669
|
+
Stylus: successColorDark - #018711, CSS: var(--successColorDark)
|
|
2670
|
+
Stylus: successColorContrastText - #FFF, CSS: var(--successColorContrastText)
|
|
2126
2671
|
|
|
2127
|
-
Styleguide Settings.theme.
|
|
2672
|
+
Styleguide Settings.theme.success
|
|
2673
|
+
*/
|
|
2674
|
+
--successColorLight: #38c949;
|
|
2675
|
+
--successColor: #09ae1c;
|
|
2676
|
+
--successColorDark: #018711;
|
|
2677
|
+
--successColorContrastText: #fff;
|
|
2678
|
+
/*
|
|
2679
|
+
Warning colors
|
|
2680
|
+
|
|
2681
|
+
Stylus: warningColorLight - #EFA82F, CSS: var(--warningColorLight)
|
|
2682
|
+
Stylus: warningColor - #CB8100, CSS: var(--warningColor)
|
|
2683
|
+
Stylus: warningColorDark - #986100, CSS: var(--warningColorDark)
|
|
2684
|
+
Stylus: warningColorContrastText - #FFF, CSS: var(--warningColorContrastText)
|
|
2685
|
+
|
|
2686
|
+
Styleguide Settings.theme.warning
|
|
2687
|
+
*/
|
|
2688
|
+
--warningColorLight: #efa82d;
|
|
2689
|
+
--warningColor: #cb8100;
|
|
2690
|
+
--warningColorDark: #986100;
|
|
2691
|
+
--warningColorContrastText: #fff;
|
|
2692
|
+
/*
|
|
2693
|
+
Error colors
|
|
2694
|
+
|
|
2695
|
+
Stylus: errorColorLightest - #FFECEC, CSS: var(--errorColorLightest)
|
|
2696
|
+
Stylus: errorColorLight - #F96B6B, CSS: var(--errorColorLight)
|
|
2697
|
+
Stylus: errorColor - #EA3F3F, CSS: var(--errorColor)
|
|
2698
|
+
Stylus: errorColorDark - #D31F1F, CSS: var(--errorColorDark)
|
|
2699
|
+
Stylus: errorBackground - #FFECEC, CSS: var(--errorBackground)
|
|
2700
|
+
Stylus: errorColorContrastText - #FFF, CSS: var(--errorColorContrastText)
|
|
2701
|
+
|
|
2702
|
+
Styleguide Settings.theme.error
|
|
2703
|
+
*/
|
|
2704
|
+
--errorColorLightest: #ffecec;
|
|
2705
|
+
--errorColorLight: #f96b6b;
|
|
2706
|
+
--errorColor: #ea3f3f;
|
|
2707
|
+
--errorColorDark: #d31f1f;
|
|
2708
|
+
--errorBackground: #ffecec;
|
|
2709
|
+
--errorColorContrastText: #fff;
|
|
2710
|
+
/*
|
|
2711
|
+
Info colors
|
|
2712
|
+
|
|
2713
|
+
Stylus: infoColorLight - #0EC4C7, CSS: var(--infoColorLight)
|
|
2714
|
+
Stylus: infoColor - #009FA2, CSS: var(--infoColor)
|
|
2715
|
+
Stylus: infoColorDark - #007578, CSS: var(--infoColorDark)
|
|
2716
|
+
Stylus: infoColorContrastText - #FFF, CSS: var(--infoColorContrastText)
|
|
2717
|
+
|
|
2718
|
+
Styleguide Settings.theme.info
|
|
2719
|
+
*/
|
|
2720
|
+
--infoColorLight: #0ec4c7;
|
|
2721
|
+
--infoColor: #009fa2;
|
|
2722
|
+
--infoColorDark: #007578;
|
|
2723
|
+
--infoColorContrastText: #fff;
|
|
2724
|
+
/*
|
|
2725
|
+
---------------------------------------------------------------------
|
|
2128
2726
|
*/
|
|
2129
|
-
--successColor: #35ce68;
|
|
2130
|
-
--warningColor: #ff962f;
|
|
2131
|
-
--errorColor: #f52d2d;
|
|
2132
|
-
--errorColorDark: #a00808;
|
|
2133
|
-
--errorColorLight: #fcbfbf;
|
|
2134
|
-
--errorColorLightest: #fee6e6;
|
|
2135
|
-
--errorBackground: #fff2f2;
|
|
2136
2727
|
/*
|
|
2137
2728
|
The CSS variables below are historic and we should strive not to
|
|
2138
2729
|
use them. Prefer to use directly semantic colors above.
|
|
@@ -2267,10 +2858,97 @@ html {
|
|
|
2267
2858
|
imported from button.styl
|
|
2268
2859
|
*/
|
|
2269
2860
|
|
|
2861
|
+
:root {
|
|
2862
|
+
--invertedBackgroundColor: #297ef2;
|
|
2863
|
+
--invertedContrastTextColor: #fff;
|
|
2864
|
+
}
|
|
2865
|
+
.button__CozyTheme--inverted___3s3RR {
|
|
2866
|
+
--primaryTextColor: #fff;
|
|
2867
|
+
--secondaryTextColor: rgba(255,255,255,0.64);
|
|
2868
|
+
--disabledTextColor: rgba(255,255,255,0.4);
|
|
2869
|
+
--hintTextColor: rgba(255,255,255,0.4);
|
|
2870
|
+
--iconTextColor: #fff;
|
|
2871
|
+
--actionColorActive: #fff;
|
|
2872
|
+
--actionColorHover: rgba(255,255,255,0.08);
|
|
2873
|
+
--actionColorSelected: rgba(255,255,255,0.16);
|
|
2874
|
+
--actionColorDisabled: rgba(255,255,255,0.32);
|
|
2875
|
+
--actionColorDisabledBackground: rgba(255,255,255,0.12);
|
|
2876
|
+
--actionColorFocus: rgba(255,255,255,0.24);
|
|
2877
|
+
--actionColorGhost: rgba(255,255,255,0.08);
|
|
2878
|
+
--actionColorHoverGhost: rgba(255,255,255,0.16);
|
|
2879
|
+
--dividerColor: rgba(255,255,255,0.16);
|
|
2880
|
+
--borderMainColor: rgba(255,255,255,0.24);
|
|
2881
|
+
--borderDisabledColor: rgba(255,255,255,0.12);
|
|
2882
|
+
--borderGhostColor: rgba(255,255,255,0.48);
|
|
2883
|
+
--borderGhostDisabledColor: rgba(255,255,255,0.24);
|
|
2884
|
+
--paperBackgroundColor: #297ef2;
|
|
2885
|
+
--defaultBackgroundColor: #579eff;
|
|
2886
|
+
--primaryColorLight: #fff;
|
|
2887
|
+
--primaryColor: #fff;
|
|
2888
|
+
--primaryColorDark: #eaf3ff;
|
|
2889
|
+
--primaryContrastTextColor: #297ef2;
|
|
2890
|
+
--secondaryColorLight: #f8eefd;
|
|
2891
|
+
--secondaryColor: #ecd7f7;
|
|
2892
|
+
--secondaryColorDark: #deb8f0;
|
|
2893
|
+
--secondaryContrastTextColor: rgba(29,33,42,0.9);
|
|
2894
|
+
--errorColorLight: #ffecec;
|
|
2895
|
+
--errorColor: #ffd3d3;
|
|
2896
|
+
--errorColorDark: #ffb9b9;
|
|
2897
|
+
--errorColorContrastText: rgba(29,33,42,0.9);
|
|
2898
|
+
--errorBackground: #d31f1f;
|
|
2899
|
+
--warningColorLight: #fff3dd;
|
|
2900
|
+
--warningColor: #ffe4b5;
|
|
2901
|
+
--warningColorDark: #ffd58b;
|
|
2902
|
+
--warningColorContrastText: rgba(29,33,42,0.9);
|
|
2903
|
+
--successColorLight: #e3ffe7;
|
|
2904
|
+
--successColor: #c0f4c6;
|
|
2905
|
+
--successColorDark: #97eca1;
|
|
2906
|
+
--successColorContrastText: rgba(29,33,42,0.9);
|
|
2907
|
+
--infoColorLight: #d4feff;
|
|
2908
|
+
--infoColor: #affdff;
|
|
2909
|
+
--infoColorDark: #86f5f7;
|
|
2910
|
+
--infoColorContrastText: rgba(29,33,42,0.9);
|
|
2911
|
+
/*
|
|
2912
|
+
The CSS variables below are historic and we should strive not to
|
|
2913
|
+
use them. Prefer to use directly semantic colors above.
|
|
2914
|
+
*/
|
|
2915
|
+
--iconColor: var(--secondaryTextColor);
|
|
2916
|
+
--textIconColor: #fff;
|
|
2917
|
+
--barIconColor: #fff;
|
|
2918
|
+
--barIconColorDisabled: rgba(255,255,255,0.88);
|
|
2919
|
+
--spinnerColor: #fff;
|
|
2920
|
+
--linkColor: #fff;
|
|
2921
|
+
--linkColorActive: #fff;
|
|
2922
|
+
--linkTextDecoration: underline;
|
|
2923
|
+
--regularButtonPrimaryColor: #fff;
|
|
2924
|
+
--regularButtonSecondaryColor: #fff;
|
|
2925
|
+
--regularButtonActiveColor: rgba(255,255,255,0.88);
|
|
2926
|
+
--regularButtonConstrastColor: #297ef2;
|
|
2927
|
+
--secondaryButtonPrimaryColor: #297ef2;
|
|
2928
|
+
--secondaryButtonSecondaryColor: #fff;
|
|
2929
|
+
--secondaryButtonActiveColor: rgba(255,255,255,0.24);
|
|
2930
|
+
--secondaryButtonContrastColor: #fff;
|
|
2931
|
+
--dividerColor2: rgba(255,255,255,0.16);
|
|
2932
|
+
}
|
|
2270
2933
|
html {
|
|
2271
2934
|
/*
|
|
2272
2935
|
Grey
|
|
2273
2936
|
|
|
2937
|
+
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
|
|
2938
|
+
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
|
|
2939
|
+
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
|
|
2940
|
+
Stylus: grey200 - #eceff1, CSS: var(--grey200)
|
|
2941
|
+
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
|
|
2942
|
+
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
|
|
2943
|
+
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
|
|
2944
|
+
Stylus: grey600 - #7c8086, CSS: var(--grey600)
|
|
2945
|
+
Stylus: grey700 - #5d6169, CSS: var(--grey700)
|
|
2946
|
+
Stylus: grey800 - #3e424a, CSS: var(--grey800)
|
|
2947
|
+
Stylus: grey900 - #1d212a, CSS: var(--grey900)
|
|
2948
|
+
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
|
|
2949
|
+
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
|
|
2950
|
+
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
|
|
2951
|
+
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
|
|
2274
2952
|
Stylus: white - #FFFFFF, CSS: var(--white)
|
|
2275
2953
|
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
|
|
2276
2954
|
Stylus: silver - #D6D8Da, CSS: var(--silver)
|
|
@@ -2279,9 +2957,23 @@ html {
|
|
|
2279
2957
|
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
|
|
2280
2958
|
Stylus: black - #000000, CSS: var(--black)
|
|
2281
2959
|
|
|
2282
|
-
|
|
2283
2960
|
Styleguide Settings.colors.grey
|
|
2284
2961
|
*/
|
|
2962
|
+
--grey0: #fff;
|
|
2963
|
+
--grey50: #f9fafb;
|
|
2964
|
+
--grey100: #f4f5f6;
|
|
2965
|
+
--grey200: #eceff1;
|
|
2966
|
+
--grey300: #dde0e3;
|
|
2967
|
+
--grey400: #bfc3c7;
|
|
2968
|
+
--grey500: #9da2a6;
|
|
2969
|
+
--grey600: #7c8086;
|
|
2970
|
+
--grey700: #5d6169;
|
|
2971
|
+
--grey800: #3e424a;
|
|
2972
|
+
--grey900: #1d212a;
|
|
2973
|
+
--greyA100: #d3d6d8;
|
|
2974
|
+
--greyA200: #a7abaf;
|
|
2975
|
+
--greyA400: #2c3039;
|
|
2976
|
+
--greyA700: #5d6169;
|
|
2285
2977
|
--white: #fff;
|
|
2286
2978
|
--paleGrey: #f5f6f7;
|
|
2287
2979
|
--silver: #d6d8da;
|
|
@@ -2342,88 +3034,184 @@ html {
|
|
|
2342
3034
|
html,
|
|
2343
3035
|
.button__CozyTheme--normal___OteWq {
|
|
2344
3036
|
/*
|
|
2345
|
-
Primary
|
|
3037
|
+
Primary colors
|
|
2346
3038
|
|
|
3039
|
+
Stylus: primaryColorLightest - #B3D3FF, CSS: var(--primaryColorLightest)
|
|
3040
|
+
Stylus: primaryColorLight - #5C9DF5, CSS: var(--primaryColorLight)
|
|
2347
3041
|
Stylus: primaryColor - #297EF2, CSS: var(--primaryColor)
|
|
2348
3042
|
Stylus: primaryColorDark - #0B61D6, CSS: var(--primaryColorDark)
|
|
2349
|
-
Stylus:
|
|
2350
|
-
Stylus: primaryColorLightest - #9FC4FB, CSS: var(--primaryColorLightest)
|
|
2351
|
-
Stylus: primaryContrastTextColor - #FFFFFF, CSS: var(--primaryContrastTextColor)
|
|
3043
|
+
Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
|
|
2352
3044
|
|
|
2353
3045
|
Styleguide Settings.theme.primary
|
|
2354
3046
|
*/
|
|
3047
|
+
--primaryColorLightest: #b3d3ff;
|
|
3048
|
+
--primaryColorLight: #579eff;
|
|
2355
3049
|
--primaryColor: #297ef2;
|
|
2356
|
-
--primaryColorDark: #
|
|
2357
|
-
--
|
|
2358
|
-
--primaryColorLightest: #9fc4fb;
|
|
3050
|
+
--primaryColorDark: #0f5cc7;
|
|
3051
|
+
--primaryContrastTextColor: #fff;
|
|
2359
3052
|
/*
|
|
2360
|
-
Secondary
|
|
3053
|
+
Secondary colors
|
|
2361
3054
|
|
|
2362
|
-
Stylus:
|
|
2363
|
-
Stylus:
|
|
2364
|
-
Stylus:
|
|
2365
|
-
Stylus:
|
|
3055
|
+
Stylus: secondaryColorLightest - #FFD3D3, CSS: var(--secondaryColorLightest)
|
|
3056
|
+
Stylus: secondaryColorLight - #F96B6B, CSS: var(--secondaryColorLight)
|
|
3057
|
+
Stylus: secondaryColor - #EA3F3F, CSS: var(--secondaryColor)
|
|
3058
|
+
Stylus: secondaryColorDark - #D31F1F, CSS: var(--secondaryColorDark)
|
|
3059
|
+
Stylus: secondaryContrastTextColor - #FFF, CSS: var(--secondaryContrastTextColor)
|
|
2366
3060
|
|
|
2367
3061
|
Styleguide Settings.theme.secondary
|
|
2368
3062
|
*/
|
|
2369
|
-
--
|
|
2370
|
-
--
|
|
2371
|
-
--
|
|
2372
|
-
--
|
|
3063
|
+
--secondaryColorLightest: #ffd3d3;
|
|
3064
|
+
--secondaryColorLight: #f96b6b;
|
|
3065
|
+
--secondaryColor: #ea3f3f;
|
|
3066
|
+
--secondaryColorDark: #d31f1f;
|
|
3067
|
+
--secondaryContrastTextColor: #fff;
|
|
2373
3068
|
/*
|
|
2374
3069
|
Background colors
|
|
2375
3070
|
|
|
2376
|
-
Stylus: primaryBackgroundLight - #
|
|
3071
|
+
Stylus: primaryBackgroundLight - #F7FAFF, CSS: var(--primaryBackgroundLight)
|
|
2377
3072
|
Stylus: paperBackgroundColor - #FFF, CSS: var(--paperBackgroundColor)
|
|
2378
|
-
Stylus: defaultBackgroundColor - #
|
|
3073
|
+
Stylus: defaultBackgroundColor - #F4F5F6, CSS: var(--defaultBackgroundColor)
|
|
2379
3074
|
|
|
2380
3075
|
Styleguide Settings.theme.background
|
|
2381
3076
|
*/
|
|
2382
|
-
--primaryBackgroundLight: #
|
|
3077
|
+
--primaryBackgroundLight: #f7faff;
|
|
2383
3078
|
--paperBackgroundColor: #fff;
|
|
2384
|
-
--defaultBackgroundColor: #
|
|
3079
|
+
--defaultBackgroundColor: #f4f5f6;
|
|
2385
3080
|
/*
|
|
2386
3081
|
Text colors
|
|
2387
3082
|
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
Stylus:
|
|
3083
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3084
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
3085
|
+
|
|
3086
|
+
Stylus: primaryTextColor - #383B43, CSS: var(--primaryTextColor)
|
|
3087
|
+
Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
|
|
3088
|
+
Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
|
|
3089
|
+
Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
|
|
3090
|
+
Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
|
|
2392
3091
|
|
|
2393
3092
|
Styleguide Settings.theme.text
|
|
2394
3093
|
*/
|
|
2395
|
-
--primaryTextColor:
|
|
2396
|
-
--secondaryTextColor:
|
|
2397
|
-
--
|
|
2398
|
-
--
|
|
3094
|
+
--primaryTextColor: rgba(29,33,42,0.9);
|
|
3095
|
+
--secondaryTextColor: rgba(29,33,42,0.48);
|
|
3096
|
+
--disabledTextColor: rgba(29,33,42,0.32);
|
|
3097
|
+
--hintTextColor: rgba(29,33,42,0.32);
|
|
3098
|
+
--iconTextColor: rgba(29,33,42,0.72);
|
|
2399
3099
|
/*
|
|
2400
|
-
|
|
3100
|
+
Action colors
|
|
3101
|
+
|
|
3102
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3103
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2401
3104
|
|
|
2402
|
-
|
|
2403
|
-
|
|
3105
|
+
Stylus: actionColorActive - #8A8C90, CSS: var(--actionColorActive)
|
|
3106
|
+
Stylus: actionColorHover - #F7F7F7, CSS: var(--actionColorHover)
|
|
3107
|
+
Stylus: actionColorSelected - #EFEFF0, CSS: var(--actionColorSelected)
|
|
3108
|
+
Stylus: actionColorDisabled - #CFCFD1, CSS: var(--actionColorDisabled)
|
|
3109
|
+
Stylus: actionColorDisabledBackground - #E7E7E8, CSS: var(--actionColorDisabledBackground)
|
|
3110
|
+
Stylus: actionColorFocus - #E7E7E8, CSS: var(--actionColorFocus)
|
|
3111
|
+
Stylus: actionColorGhost - #EFEFF0, CSS: var(--actionColorGhost)
|
|
3112
|
+
Stylus: actionColorHoverGhost - #DFE0E0, CSS: var(--actionColorHoverGhost)
|
|
3113
|
+
|
|
3114
|
+
Styleguide Settings.theme.action
|
|
3115
|
+
*/
|
|
3116
|
+
--actionColorActive: rgba(29,33,42,0.56);
|
|
3117
|
+
--actionColorHover: rgba(29,33,42,0.04);
|
|
3118
|
+
--actionColorSelected: rgba(29,33,42,0.08);
|
|
3119
|
+
--actionColorDisabled: rgba(29,33,42,0.24);
|
|
3120
|
+
--actionColorDisabledBackground: rgba(29,33,42,0.12);
|
|
3121
|
+
--actionColorFocus: rgba(29,33,42,0.12);
|
|
3122
|
+
--actionColorGhost: rgba(29,33,42,0.08);
|
|
3123
|
+
--actionColorHoverGhost: rgba(29,33,42,0.16);
|
|
3124
|
+
/*
|
|
3125
|
+
Border colors
|
|
3126
|
+
|
|
3127
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3128
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
3129
|
+
|
|
3130
|
+
Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
|
|
3131
|
+
Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
|
|
3132
|
+
Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
|
|
3133
|
+
Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
|
|
3134
|
+
|
|
3135
|
+
Styleguide Settings.theme.border
|
|
3136
|
+
*/
|
|
3137
|
+
--borderMainColor: rgba(29,33,42,0.16);
|
|
3138
|
+
--borderDisabledColor: rgba(29,33,42,0.08);
|
|
3139
|
+
--borderGhostColor: rgba(29,33,42,0.48);
|
|
3140
|
+
--borderGhostDisabledColor: rgba(29,33,42,0.16);
|
|
3141
|
+
/*
|
|
3142
|
+
Divider colors
|
|
3143
|
+
|
|
3144
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3145
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2404
3146
|
|
|
2405
3147
|
Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
|
|
2406
3148
|
|
|
2407
|
-
Styleguide Settings.theme.
|
|
3149
|
+
Styleguide Settings.theme.divider
|
|
3150
|
+
*/
|
|
3151
|
+
--dividerColor: rgba(29,33,42,0.12);
|
|
3152
|
+
/*
|
|
3153
|
+
Success colors
|
|
3154
|
+
|
|
3155
|
+
Stylus: successColorLight - #38C949, CSS: var(--successColorLight)
|
|
3156
|
+
Stylus: successColor - #09AE1C, CSS: var(--successColor)
|
|
3157
|
+
Stylus: successColorDark - #018711, CSS: var(--successColorDark)
|
|
3158
|
+
Stylus: successColorContrastText - #FFF, CSS: var(--successColorContrastText)
|
|
3159
|
+
|
|
3160
|
+
Styleguide Settings.theme.success
|
|
2408
3161
|
*/
|
|
2409
|
-
--
|
|
3162
|
+
--successColorLight: #38c949;
|
|
3163
|
+
--successColor: #09ae1c;
|
|
3164
|
+
--successColorDark: #018711;
|
|
3165
|
+
--successColorContrastText: #fff;
|
|
2410
3166
|
/*
|
|
2411
|
-
|
|
3167
|
+
Warning colors
|
|
2412
3168
|
|
|
2413
|
-
Stylus:
|
|
2414
|
-
Stylus: warningColor
|
|
2415
|
-
Stylus:
|
|
2416
|
-
Stylus:
|
|
3169
|
+
Stylus: warningColorLight - #EFA82F, CSS: var(--warningColorLight)
|
|
3170
|
+
Stylus: warningColor - #CB8100, CSS: var(--warningColor)
|
|
3171
|
+
Stylus: warningColorDark - #986100, CSS: var(--warningColorDark)
|
|
3172
|
+
Stylus: warningColorContrastText - #FFF, CSS: var(--warningColorContrastText)
|
|
2417
3173
|
|
|
2418
|
-
Styleguide Settings.theme.
|
|
3174
|
+
Styleguide Settings.theme.warning
|
|
3175
|
+
*/
|
|
3176
|
+
--warningColorLight: #efa82d;
|
|
3177
|
+
--warningColor: #cb8100;
|
|
3178
|
+
--warningColorDark: #986100;
|
|
3179
|
+
--warningColorContrastText: #fff;
|
|
3180
|
+
/*
|
|
3181
|
+
Error colors
|
|
3182
|
+
|
|
3183
|
+
Stylus: errorColorLightest - #FFECEC, CSS: var(--errorColorLightest)
|
|
3184
|
+
Stylus: errorColorLight - #F96B6B, CSS: var(--errorColorLight)
|
|
3185
|
+
Stylus: errorColor - #EA3F3F, CSS: var(--errorColor)
|
|
3186
|
+
Stylus: errorColorDark - #D31F1F, CSS: var(--errorColorDark)
|
|
3187
|
+
Stylus: errorBackground - #FFECEC, CSS: var(--errorBackground)
|
|
3188
|
+
Stylus: errorColorContrastText - #FFF, CSS: var(--errorColorContrastText)
|
|
3189
|
+
|
|
3190
|
+
Styleguide Settings.theme.error
|
|
3191
|
+
*/
|
|
3192
|
+
--errorColorLightest: #ffecec;
|
|
3193
|
+
--errorColorLight: #f96b6b;
|
|
3194
|
+
--errorColor: #ea3f3f;
|
|
3195
|
+
--errorColorDark: #d31f1f;
|
|
3196
|
+
--errorBackground: #ffecec;
|
|
3197
|
+
--errorColorContrastText: #fff;
|
|
3198
|
+
/*
|
|
3199
|
+
Info colors
|
|
3200
|
+
|
|
3201
|
+
Stylus: infoColorLight - #0EC4C7, CSS: var(--infoColorLight)
|
|
3202
|
+
Stylus: infoColor - #009FA2, CSS: var(--infoColor)
|
|
3203
|
+
Stylus: infoColorDark - #007578, CSS: var(--infoColorDark)
|
|
3204
|
+
Stylus: infoColorContrastText - #FFF, CSS: var(--infoColorContrastText)
|
|
3205
|
+
|
|
3206
|
+
Styleguide Settings.theme.info
|
|
3207
|
+
*/
|
|
3208
|
+
--infoColorLight: #0ec4c7;
|
|
3209
|
+
--infoColor: #009fa2;
|
|
3210
|
+
--infoColorDark: #007578;
|
|
3211
|
+
--infoColorContrastText: #fff;
|
|
3212
|
+
/*
|
|
3213
|
+
---------------------------------------------------------------------
|
|
2419
3214
|
*/
|
|
2420
|
-
--successColor: #35ce68;
|
|
2421
|
-
--warningColor: #ff962f;
|
|
2422
|
-
--errorColor: #f52d2d;
|
|
2423
|
-
--errorColorDark: #a00808;
|
|
2424
|
-
--errorColorLight: #fcbfbf;
|
|
2425
|
-
--errorColorLightest: #fee6e6;
|
|
2426
|
-
--errorBackground: #fff2f2;
|
|
2427
3215
|
/*
|
|
2428
3216
|
The CSS variables below are historic and we should strive not to
|
|
2429
3217
|
use them. Prefer to use directly semantic colors above.
|
|
@@ -2487,10 +3275,97 @@ html,
|
|
|
2487
3275
|
imported from badge.styl
|
|
2488
3276
|
*/
|
|
2489
3277
|
|
|
3278
|
+
:root {
|
|
3279
|
+
--invertedBackgroundColor: #297ef2;
|
|
3280
|
+
--invertedContrastTextColor: #fff;
|
|
3281
|
+
}
|
|
3282
|
+
.badge__CozyTheme--inverted___1vv9l {
|
|
3283
|
+
--primaryTextColor: #fff;
|
|
3284
|
+
--secondaryTextColor: rgba(255,255,255,0.64);
|
|
3285
|
+
--disabledTextColor: rgba(255,255,255,0.4);
|
|
3286
|
+
--hintTextColor: rgba(255,255,255,0.4);
|
|
3287
|
+
--iconTextColor: #fff;
|
|
3288
|
+
--actionColorActive: #fff;
|
|
3289
|
+
--actionColorHover: rgba(255,255,255,0.08);
|
|
3290
|
+
--actionColorSelected: rgba(255,255,255,0.16);
|
|
3291
|
+
--actionColorDisabled: rgba(255,255,255,0.32);
|
|
3292
|
+
--actionColorDisabledBackground: rgba(255,255,255,0.12);
|
|
3293
|
+
--actionColorFocus: rgba(255,255,255,0.24);
|
|
3294
|
+
--actionColorGhost: rgba(255,255,255,0.08);
|
|
3295
|
+
--actionColorHoverGhost: rgba(255,255,255,0.16);
|
|
3296
|
+
--dividerColor: rgba(255,255,255,0.16);
|
|
3297
|
+
--borderMainColor: rgba(255,255,255,0.24);
|
|
3298
|
+
--borderDisabledColor: rgba(255,255,255,0.12);
|
|
3299
|
+
--borderGhostColor: rgba(255,255,255,0.48);
|
|
3300
|
+
--borderGhostDisabledColor: rgba(255,255,255,0.24);
|
|
3301
|
+
--paperBackgroundColor: #297ef2;
|
|
3302
|
+
--defaultBackgroundColor: #579eff;
|
|
3303
|
+
--primaryColorLight: #fff;
|
|
3304
|
+
--primaryColor: #fff;
|
|
3305
|
+
--primaryColorDark: #eaf3ff;
|
|
3306
|
+
--primaryContrastTextColor: #297ef2;
|
|
3307
|
+
--secondaryColorLight: #f8eefd;
|
|
3308
|
+
--secondaryColor: #ecd7f7;
|
|
3309
|
+
--secondaryColorDark: #deb8f0;
|
|
3310
|
+
--secondaryContrastTextColor: rgba(29,33,42,0.9);
|
|
3311
|
+
--errorColorLight: #ffecec;
|
|
3312
|
+
--errorColor: #ffd3d3;
|
|
3313
|
+
--errorColorDark: #ffb9b9;
|
|
3314
|
+
--errorColorContrastText: rgba(29,33,42,0.9);
|
|
3315
|
+
--errorBackground: #d31f1f;
|
|
3316
|
+
--warningColorLight: #fff3dd;
|
|
3317
|
+
--warningColor: #ffe4b5;
|
|
3318
|
+
--warningColorDark: #ffd58b;
|
|
3319
|
+
--warningColorContrastText: rgba(29,33,42,0.9);
|
|
3320
|
+
--successColorLight: #e3ffe7;
|
|
3321
|
+
--successColor: #c0f4c6;
|
|
3322
|
+
--successColorDark: #97eca1;
|
|
3323
|
+
--successColorContrastText: rgba(29,33,42,0.9);
|
|
3324
|
+
--infoColorLight: #d4feff;
|
|
3325
|
+
--infoColor: #affdff;
|
|
3326
|
+
--infoColorDark: #86f5f7;
|
|
3327
|
+
--infoColorContrastText: rgba(29,33,42,0.9);
|
|
3328
|
+
/*
|
|
3329
|
+
The CSS variables below are historic and we should strive not to
|
|
3330
|
+
use them. Prefer to use directly semantic colors above.
|
|
3331
|
+
*/
|
|
3332
|
+
--iconColor: var(--secondaryTextColor);
|
|
3333
|
+
--textIconColor: #fff;
|
|
3334
|
+
--barIconColor: #fff;
|
|
3335
|
+
--barIconColorDisabled: rgba(255,255,255,0.88);
|
|
3336
|
+
--spinnerColor: #fff;
|
|
3337
|
+
--linkColor: #fff;
|
|
3338
|
+
--linkColorActive: #fff;
|
|
3339
|
+
--linkTextDecoration: underline;
|
|
3340
|
+
--regularButtonPrimaryColor: #fff;
|
|
3341
|
+
--regularButtonSecondaryColor: #fff;
|
|
3342
|
+
--regularButtonActiveColor: rgba(255,255,255,0.88);
|
|
3343
|
+
--regularButtonConstrastColor: #297ef2;
|
|
3344
|
+
--secondaryButtonPrimaryColor: #297ef2;
|
|
3345
|
+
--secondaryButtonSecondaryColor: #fff;
|
|
3346
|
+
--secondaryButtonActiveColor: rgba(255,255,255,0.24);
|
|
3347
|
+
--secondaryButtonContrastColor: #fff;
|
|
3348
|
+
--dividerColor2: rgba(255,255,255,0.16);
|
|
3349
|
+
}
|
|
2490
3350
|
html {
|
|
2491
3351
|
/*
|
|
2492
3352
|
Grey
|
|
2493
3353
|
|
|
3354
|
+
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
|
|
3355
|
+
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
|
|
3356
|
+
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
|
|
3357
|
+
Stylus: grey200 - #eceff1, CSS: var(--grey200)
|
|
3358
|
+
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
|
|
3359
|
+
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
|
|
3360
|
+
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
|
|
3361
|
+
Stylus: grey600 - #7c8086, CSS: var(--grey600)
|
|
3362
|
+
Stylus: grey700 - #5d6169, CSS: var(--grey700)
|
|
3363
|
+
Stylus: grey800 - #3e424a, CSS: var(--grey800)
|
|
3364
|
+
Stylus: grey900 - #1d212a, CSS: var(--grey900)
|
|
3365
|
+
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
|
|
3366
|
+
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
|
|
3367
|
+
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
|
|
3368
|
+
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
|
|
2494
3369
|
Stylus: white - #FFFFFF, CSS: var(--white)
|
|
2495
3370
|
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
|
|
2496
3371
|
Stylus: silver - #D6D8Da, CSS: var(--silver)
|
|
@@ -2499,9 +3374,23 @@ html {
|
|
|
2499
3374
|
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
|
|
2500
3375
|
Stylus: black - #000000, CSS: var(--black)
|
|
2501
3376
|
|
|
2502
|
-
|
|
2503
3377
|
Styleguide Settings.colors.grey
|
|
2504
3378
|
*/
|
|
3379
|
+
--grey0: #fff;
|
|
3380
|
+
--grey50: #f9fafb;
|
|
3381
|
+
--grey100: #f4f5f6;
|
|
3382
|
+
--grey200: #eceff1;
|
|
3383
|
+
--grey300: #dde0e3;
|
|
3384
|
+
--grey400: #bfc3c7;
|
|
3385
|
+
--grey500: #9da2a6;
|
|
3386
|
+
--grey600: #7c8086;
|
|
3387
|
+
--grey700: #5d6169;
|
|
3388
|
+
--grey800: #3e424a;
|
|
3389
|
+
--grey900: #1d212a;
|
|
3390
|
+
--greyA100: #d3d6d8;
|
|
3391
|
+
--greyA200: #a7abaf;
|
|
3392
|
+
--greyA400: #2c3039;
|
|
3393
|
+
--greyA700: #5d6169;
|
|
2505
3394
|
--white: #fff;
|
|
2506
3395
|
--paleGrey: #f5f6f7;
|
|
2507
3396
|
--silver: #d6d8da;
|
|
@@ -2562,88 +3451,184 @@ html {
|
|
|
2562
3451
|
html,
|
|
2563
3452
|
.badge__CozyTheme--normal___2pjsD {
|
|
2564
3453
|
/*
|
|
2565
|
-
Primary
|
|
3454
|
+
Primary colors
|
|
2566
3455
|
|
|
3456
|
+
Stylus: primaryColorLightest - #B3D3FF, CSS: var(--primaryColorLightest)
|
|
3457
|
+
Stylus: primaryColorLight - #5C9DF5, CSS: var(--primaryColorLight)
|
|
2567
3458
|
Stylus: primaryColor - #297EF2, CSS: var(--primaryColor)
|
|
2568
3459
|
Stylus: primaryColorDark - #0B61D6, CSS: var(--primaryColorDark)
|
|
2569
|
-
Stylus:
|
|
2570
|
-
Stylus: primaryColorLightest - #9FC4FB, CSS: var(--primaryColorLightest)
|
|
2571
|
-
Stylus: primaryContrastTextColor - #FFFFFF, CSS: var(--primaryContrastTextColor)
|
|
3460
|
+
Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
|
|
2572
3461
|
|
|
2573
3462
|
Styleguide Settings.theme.primary
|
|
2574
3463
|
*/
|
|
3464
|
+
--primaryColorLightest: #b3d3ff;
|
|
3465
|
+
--primaryColorLight: #579eff;
|
|
2575
3466
|
--primaryColor: #297ef2;
|
|
2576
|
-
--primaryColorDark: #
|
|
2577
|
-
--
|
|
2578
|
-
--primaryColorLightest: #9fc4fb;
|
|
3467
|
+
--primaryColorDark: #0f5cc7;
|
|
3468
|
+
--primaryContrastTextColor: #fff;
|
|
2579
3469
|
/*
|
|
2580
|
-
Secondary
|
|
3470
|
+
Secondary colors
|
|
2581
3471
|
|
|
2582
|
-
Stylus:
|
|
2583
|
-
Stylus:
|
|
2584
|
-
Stylus:
|
|
2585
|
-
Stylus:
|
|
3472
|
+
Stylus: secondaryColorLightest - #FFD3D3, CSS: var(--secondaryColorLightest)
|
|
3473
|
+
Stylus: secondaryColorLight - #F96B6B, CSS: var(--secondaryColorLight)
|
|
3474
|
+
Stylus: secondaryColor - #EA3F3F, CSS: var(--secondaryColor)
|
|
3475
|
+
Stylus: secondaryColorDark - #D31F1F, CSS: var(--secondaryColorDark)
|
|
3476
|
+
Stylus: secondaryContrastTextColor - #FFF, CSS: var(--secondaryContrastTextColor)
|
|
2586
3477
|
|
|
2587
3478
|
Styleguide Settings.theme.secondary
|
|
2588
3479
|
*/
|
|
2589
|
-
--
|
|
2590
|
-
--
|
|
2591
|
-
--
|
|
2592
|
-
--
|
|
3480
|
+
--secondaryColorLightest: #ffd3d3;
|
|
3481
|
+
--secondaryColorLight: #f96b6b;
|
|
3482
|
+
--secondaryColor: #ea3f3f;
|
|
3483
|
+
--secondaryColorDark: #d31f1f;
|
|
3484
|
+
--secondaryContrastTextColor: #fff;
|
|
2593
3485
|
/*
|
|
2594
3486
|
Background colors
|
|
2595
3487
|
|
|
2596
|
-
Stylus: primaryBackgroundLight - #
|
|
3488
|
+
Stylus: primaryBackgroundLight - #F7FAFF, CSS: var(--primaryBackgroundLight)
|
|
2597
3489
|
Stylus: paperBackgroundColor - #FFF, CSS: var(--paperBackgroundColor)
|
|
2598
|
-
Stylus: defaultBackgroundColor - #
|
|
3490
|
+
Stylus: defaultBackgroundColor - #F4F5F6, CSS: var(--defaultBackgroundColor)
|
|
2599
3491
|
|
|
2600
3492
|
Styleguide Settings.theme.background
|
|
2601
3493
|
*/
|
|
2602
|
-
--primaryBackgroundLight: #
|
|
3494
|
+
--primaryBackgroundLight: #f7faff;
|
|
2603
3495
|
--paperBackgroundColor: #fff;
|
|
2604
|
-
--defaultBackgroundColor: #
|
|
3496
|
+
--defaultBackgroundColor: #f4f5f6;
|
|
2605
3497
|
/*
|
|
2606
3498
|
Text colors
|
|
2607
3499
|
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
Stylus:
|
|
3500
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3501
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
3502
|
+
|
|
3503
|
+
Stylus: primaryTextColor - #383B43, CSS: var(--primaryTextColor)
|
|
3504
|
+
Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
|
|
3505
|
+
Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
|
|
3506
|
+
Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
|
|
3507
|
+
Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
|
|
2612
3508
|
|
|
2613
3509
|
Styleguide Settings.theme.text
|
|
2614
3510
|
*/
|
|
2615
|
-
--primaryTextColor:
|
|
2616
|
-
--secondaryTextColor:
|
|
2617
|
-
--
|
|
2618
|
-
--
|
|
3511
|
+
--primaryTextColor: rgba(29,33,42,0.9);
|
|
3512
|
+
--secondaryTextColor: rgba(29,33,42,0.48);
|
|
3513
|
+
--disabledTextColor: rgba(29,33,42,0.32);
|
|
3514
|
+
--hintTextColor: rgba(29,33,42,0.32);
|
|
3515
|
+
--iconTextColor: rgba(29,33,42,0.72);
|
|
2619
3516
|
/*
|
|
2620
|
-
|
|
3517
|
+
Action colors
|
|
3518
|
+
|
|
3519
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3520
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
3521
|
+
|
|
3522
|
+
Stylus: actionColorActive - #8A8C90, CSS: var(--actionColorActive)
|
|
3523
|
+
Stylus: actionColorHover - #F7F7F7, CSS: var(--actionColorHover)
|
|
3524
|
+
Stylus: actionColorSelected - #EFEFF0, CSS: var(--actionColorSelected)
|
|
3525
|
+
Stylus: actionColorDisabled - #CFCFD1, CSS: var(--actionColorDisabled)
|
|
3526
|
+
Stylus: actionColorDisabledBackground - #E7E7E8, CSS: var(--actionColorDisabledBackground)
|
|
3527
|
+
Stylus: actionColorFocus - #E7E7E8, CSS: var(--actionColorFocus)
|
|
3528
|
+
Stylus: actionColorGhost - #EFEFF0, CSS: var(--actionColorGhost)
|
|
3529
|
+
Stylus: actionColorHoverGhost - #DFE0E0, CSS: var(--actionColorHoverGhost)
|
|
3530
|
+
|
|
3531
|
+
Styleguide Settings.theme.action
|
|
3532
|
+
*/
|
|
3533
|
+
--actionColorActive: rgba(29,33,42,0.56);
|
|
3534
|
+
--actionColorHover: rgba(29,33,42,0.04);
|
|
3535
|
+
--actionColorSelected: rgba(29,33,42,0.08);
|
|
3536
|
+
--actionColorDisabled: rgba(29,33,42,0.24);
|
|
3537
|
+
--actionColorDisabledBackground: rgba(29,33,42,0.12);
|
|
3538
|
+
--actionColorFocus: rgba(29,33,42,0.12);
|
|
3539
|
+
--actionColorGhost: rgba(29,33,42,0.08);
|
|
3540
|
+
--actionColorHoverGhost: rgba(29,33,42,0.16);
|
|
3541
|
+
/*
|
|
3542
|
+
Border colors
|
|
3543
|
+
|
|
3544
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3545
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2621
3546
|
|
|
2622
|
-
|
|
2623
|
-
|
|
3547
|
+
Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
|
|
3548
|
+
Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
|
|
3549
|
+
Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
|
|
3550
|
+
Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
|
|
3551
|
+
|
|
3552
|
+
Styleguide Settings.theme.border
|
|
3553
|
+
*/
|
|
3554
|
+
--borderMainColor: rgba(29,33,42,0.16);
|
|
3555
|
+
--borderDisabledColor: rgba(29,33,42,0.08);
|
|
3556
|
+
--borderGhostColor: rgba(29,33,42,0.48);
|
|
3557
|
+
--borderGhostDisabledColor: rgba(29,33,42,0.16);
|
|
3558
|
+
/*
|
|
3559
|
+
Divider colors
|
|
3560
|
+
|
|
3561
|
+
These colors use the alpha layer. Be careful to use the semantic variable.
|
|
3562
|
+
Hexadecimal colors are here only as an example on a white background.
|
|
2624
3563
|
|
|
2625
3564
|
Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
|
|
2626
3565
|
|
|
2627
|
-
Styleguide Settings.theme.
|
|
3566
|
+
Styleguide Settings.theme.divider
|
|
2628
3567
|
*/
|
|
2629
|
-
--dividerColor: rgba(29,33,42,0.
|
|
3568
|
+
--dividerColor: rgba(29,33,42,0.12);
|
|
2630
3569
|
/*
|
|
2631
|
-
|
|
3570
|
+
Success colors
|
|
2632
3571
|
|
|
2633
|
-
Stylus:
|
|
2634
|
-
Stylus:
|
|
2635
|
-
Stylus:
|
|
2636
|
-
Stylus:
|
|
3572
|
+
Stylus: successColorLight - #38C949, CSS: var(--successColorLight)
|
|
3573
|
+
Stylus: successColor - #09AE1C, CSS: var(--successColor)
|
|
3574
|
+
Stylus: successColorDark - #018711, CSS: var(--successColorDark)
|
|
3575
|
+
Stylus: successColorContrastText - #FFF, CSS: var(--successColorContrastText)
|
|
2637
3576
|
|
|
2638
|
-
Styleguide Settings.theme.
|
|
3577
|
+
Styleguide Settings.theme.success
|
|
3578
|
+
*/
|
|
3579
|
+
--successColorLight: #38c949;
|
|
3580
|
+
--successColor: #09ae1c;
|
|
3581
|
+
--successColorDark: #018711;
|
|
3582
|
+
--successColorContrastText: #fff;
|
|
3583
|
+
/*
|
|
3584
|
+
Warning colors
|
|
3585
|
+
|
|
3586
|
+
Stylus: warningColorLight - #EFA82F, CSS: var(--warningColorLight)
|
|
3587
|
+
Stylus: warningColor - #CB8100, CSS: var(--warningColor)
|
|
3588
|
+
Stylus: warningColorDark - #986100, CSS: var(--warningColorDark)
|
|
3589
|
+
Stylus: warningColorContrastText - #FFF, CSS: var(--warningColorContrastText)
|
|
3590
|
+
|
|
3591
|
+
Styleguide Settings.theme.warning
|
|
3592
|
+
*/
|
|
3593
|
+
--warningColorLight: #efa82d;
|
|
3594
|
+
--warningColor: #cb8100;
|
|
3595
|
+
--warningColorDark: #986100;
|
|
3596
|
+
--warningColorContrastText: #fff;
|
|
3597
|
+
/*
|
|
3598
|
+
Error colors
|
|
3599
|
+
|
|
3600
|
+
Stylus: errorColorLightest - #FFECEC, CSS: var(--errorColorLightest)
|
|
3601
|
+
Stylus: errorColorLight - #F96B6B, CSS: var(--errorColorLight)
|
|
3602
|
+
Stylus: errorColor - #EA3F3F, CSS: var(--errorColor)
|
|
3603
|
+
Stylus: errorColorDark - #D31F1F, CSS: var(--errorColorDark)
|
|
3604
|
+
Stylus: errorBackground - #FFECEC, CSS: var(--errorBackground)
|
|
3605
|
+
Stylus: errorColorContrastText - #FFF, CSS: var(--errorColorContrastText)
|
|
3606
|
+
|
|
3607
|
+
Styleguide Settings.theme.error
|
|
3608
|
+
*/
|
|
3609
|
+
--errorColorLightest: #ffecec;
|
|
3610
|
+
--errorColorLight: #f96b6b;
|
|
3611
|
+
--errorColor: #ea3f3f;
|
|
3612
|
+
--errorColorDark: #d31f1f;
|
|
3613
|
+
--errorBackground: #ffecec;
|
|
3614
|
+
--errorColorContrastText: #fff;
|
|
3615
|
+
/*
|
|
3616
|
+
Info colors
|
|
3617
|
+
|
|
3618
|
+
Stylus: infoColorLight - #0EC4C7, CSS: var(--infoColorLight)
|
|
3619
|
+
Stylus: infoColor - #009FA2, CSS: var(--infoColor)
|
|
3620
|
+
Stylus: infoColorDark - #007578, CSS: var(--infoColorDark)
|
|
3621
|
+
Stylus: infoColorContrastText - #FFF, CSS: var(--infoColorContrastText)
|
|
3622
|
+
|
|
3623
|
+
Styleguide Settings.theme.info
|
|
3624
|
+
*/
|
|
3625
|
+
--infoColorLight: #0ec4c7;
|
|
3626
|
+
--infoColor: #009fa2;
|
|
3627
|
+
--infoColorDark: #007578;
|
|
3628
|
+
--infoColorContrastText: #fff;
|
|
3629
|
+
/*
|
|
3630
|
+
---------------------------------------------------------------------
|
|
2639
3631
|
*/
|
|
2640
|
-
--successColor: #35ce68;
|
|
2641
|
-
--warningColor: #ff962f;
|
|
2642
|
-
--errorColor: #f52d2d;
|
|
2643
|
-
--errorColorDark: #a00808;
|
|
2644
|
-
--errorColorLight: #fcbfbf;
|
|
2645
|
-
--errorColorLightest: #fee6e6;
|
|
2646
|
-
--errorBackground: #fff2f2;
|
|
2647
3632
|
/*
|
|
2648
3633
|
The CSS variables below are historic and we should strive not to
|
|
2649
3634
|
use them. Prefer to use directly semantic colors above.
|