@epam/assets 5.0.0-alpha.4 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/css/theme/theme_loveship.css +1209 -0
  2. package/css/theme/theme_loveship.css.map +1 -0
  3. package/css/theme/theme_promo.css +961 -0
  4. package/css/theme/theme_promo.css.map +1 -0
  5. package/css/theme/theme_vanilla_thunder.css +806 -0
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -0
  7. package/package.json +4 -4
  8. package/scss/font-faces.scss +2 -105
  9. package/scss/fonts.scss +2 -13
  10. package/scss/index.scss +4 -9
  11. package/scss/loveship/colors.scss +121 -0
  12. package/scss/loveship/font-faces.scss +66 -0
  13. package/scss/loveship/fonts.scss +7 -0
  14. package/scss/loveship/typography.scss +153 -0
  15. package/scss/loveship-colors.scss +2 -56
  16. package/scss/promo/colors.scss +94 -49
  17. package/scss/promo/font-faces.scss +8 -0
  18. package/scss/promo/fonts.scss +2 -4
  19. package/scss/promo/typography.scss +1 -2
  20. package/scss/typography.scss +2 -141
  21. package/theme/theme_loveship.scss +183 -71
  22. package/theme/theme_promo.scss +51 -4
  23. package/scss/contrast.scss +0 -39
  24. package/scss/control-layout.scss +0 -2
  25. package/scss/control-size.scss +0 -7
  26. package/scss/dnd.scss +0 -9
  27. package/scss/effects.scss +0 -25
  28. package/scss/text-size.scss +0 -37
package/theme/theme_loveship.scss CHANGED
@@ -6,9 +6,9 @@
6
6
  --font-regular: 'Sans Regular', Arial, sans-serif;
7
7
  --font-semibold: 'Sans Semibold', Arial, sans-serif;
8
8
  --font-italic: 'Sans Italic', Arial, sans-serif;
9
- --font-primary: 'Museo Sans', 'Sans Semibold', Arial, sans-serif;
10
- --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
11
- --font-mono: 'Roboto Mono', Arial, sans-serif;
9
+ --font-primary: 'Sans Semibold', Arial, sans-serif;
10
+ --font-promo: 'Sans Semibold', Arial, sans-serif;
11
+ --font-mono: monospace;
12
12
  --font-redacted: 'Redacted';
13
13
  --font-light: 'Sans Light', Arial, sans-serif;
14
14
 
@@ -109,36 +109,16 @@
109
109
  --mint-40: #2E9E68;
110
110
  --mint-50: #236E4A;
111
111
 
112
- /* TODO: needs to resolve old colors question */
113
112
  /* Loveship old colors */
114
- --uui-color-600: #EBECF1;
115
-
116
- --uui-color-carbon-700: #3D404D;
117
- --uui-color-carbon-800: #272933;
118
- --uui-color-carbon-900: #17181F;
119
-
120
- --uui-color-cobalt-500: #32B2FB;
121
- --uui-color-cobalt-600: #2196F3;
122
- --uui-color-cobalt-700: #0E74E2;
123
- --uui-color-cobalt-800: #0453C7;
124
- --uui-color-cobalt-900: #003399;
125
-
126
-
127
- --uui-color-lavanda-500: #6362C9;
128
- --uui-color-lavanda-600: #3F51B5;
129
- --uui-color-lavanda-700: #2E3A9D;
130
- --uui-color-lavanda-800: #21288D;
131
- --uui-color-lavanda-900: #191980;
132
-
133
- --uui-color-fuchsia-500: #F5527B;
134
- --uui-color-fuchsia-600: #E91E63;
135
- --uui-color-fuchsia-700: #CD0053;
136
- --uui-color-fuchsia-800: #B00052;
137
- --uui-color-fuchsia-900: #94004C;
138
-
139
113
  --uui-color-white-800: #E6E6E6;
140
114
  --uui-color-white-900: #CCCCCC;
141
115
 
116
+ --uui-color-night50-800: #DADAE9;
117
+ --uui-color-night50-900: #BABAD6;
118
+
119
+ --uui-color-night100-800: #D3D7E9;
120
+ --uui-color-night100-900: #B1B9D8;
121
+
142
122
  --uui-color-night200-700: #E6E8F2;
143
123
  --uui-color-night200-800: #C9CEE4;
144
124
  --uui-color-night200-900: #A7B0D3;
@@ -157,7 +137,15 @@
157
137
 
158
138
  --uui-color-night600-700: #595B6D;
159
139
  --uui-color-night600-800: #555764;
160
- --uui-color-night600-900: #3D3F49;
140
+
141
+ --uui-color-night700-800: #30323D;
142
+ --uui-color-night700-900: #1A1B20;
143
+
144
+ --uui-color-night800-800: #1A1B23;
145
+ --uui-color-night800-900: #040406;
146
+
147
+ --uui-color-night900-800: #070709;
148
+ --uui-color-night900-900: #000000;
161
149
  /* end Loveship old colors */
162
150
 
163
151
  /* core variables start */
@@ -262,6 +250,7 @@
262
250
  --uui-text-secondary: var(--night600);
263
251
  --uui-text-disabled: var(--night500);
264
252
  --uui-text-contrast: var(--night50);
253
+ --uui-text-white: var(--white);
265
254
 
266
255
  --uui-control-bg: var(--white);
267
256
  --uui-control-bg-checked: var(--uui-primary);
@@ -346,10 +335,6 @@
346
335
  --uui-btn-font: var(--font-semibold);
347
336
 
348
337
  /* LinkButton vars */
349
- --uui-link-button-text: var(--uui-primary);
350
- --uui-link-button-text-hover: var(--uui-primary-dark);
351
- --uui-link-button-text-active: var(--uui-primary-darkest);
352
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
353
338
  --uui-link-button-font: var(--font-semibold);
354
339
 
355
340
  /* DatePicker vars */
@@ -571,6 +556,7 @@
571
556
 
572
557
  /* MainMenu */
573
558
  --uui-main_menu-text: var(--uui-text-contrast);
559
+ --uui-main_menu-text-active: var(--uui-text-contrast);
574
560
  --uui-main_menu-bg: var(--uui-surface-contrast);
575
561
  --uui-main_menu-hover: var(--uui-surface-contrast-hover);
576
562
  --uui-main_menu-active: var(--uui-surface-contrast-active);
@@ -861,6 +847,135 @@
861
847
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
862
848
  }
863
849
 
850
+ .link-button-primary,
851
+ .link-button-sky {
852
+ --uui-link-button-text: var(--uui-primary);
853
+ --uui-link-button-text-hover: var(--uui-primary-dark);
854
+ --uui-link-button-text-active: var(--uui-primary-darkest);
855
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
856
+ }
857
+
858
+ .link-button-secondary,
859
+ .link-button-night600 {
860
+ --uui-link-button-text: var(--uui-secondary);
861
+ --uui-link-button-text-hover: var(--uui-secondary-dark);
862
+ --uui-link-button-text-active: var(--uui-secondary-darkest);
863
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
864
+ }
865
+
866
+ .link-button-contrast,
867
+ .link-button-night100 {
868
+ --uui-link-button-text: var(--night100);
869
+ --uui-link-button-text-hover: var(--uui-color-night100-800);
870
+ --uui-link-button-text-active: var(--uui-color-night100-900);
871
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
872
+ }
873
+
874
+ .link-button-grass {
875
+ --uui-link-button-text: var(--grass);
876
+ --uui-link-button-text-hover: var(--grass-dark);
877
+ --uui-link-button-text-active: var(--grass-darkest);
878
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
879
+ }
880
+
881
+ .link-button-sun {
882
+ --uui-link-button-text: var(--sun);
883
+ --uui-link-button-text-hover: var(--sun-dark);
884
+ --uui-link-button-text-active: var(--sun-darkest);
885
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
886
+ }
887
+
888
+ .link-button-fire {
889
+ --uui-link-button-text: var(--fire);
890
+ --uui-link-button-text-hover: var(--fire-dark);
891
+ --uui-link-button-text-active: var(--fire-darkest);
892
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
893
+ }
894
+
895
+ .link-button-cobalt {
896
+ --uui-link-button-text: var(--cobalt-30);
897
+ --uui-link-button-text-hover: var(--cobalt-40);
898
+ --uui-link-button-text-active: var(--cobalt-50);
899
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
900
+ }
901
+
902
+ .link-button-lavanda {
903
+ --uui-link-button-text: var(--lavanda-30);
904
+ --uui-link-button-text-hover: var(--lavanda-40);
905
+ --uui-link-button-text-active: var(--lavanda-50);
906
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
907
+ }
908
+
909
+ .link-button-fuchsia {
910
+ --uui-link-button-text: var(--fuchia-30);
911
+ --uui-link-button-text-hover: var(--fuchia-40);
912
+ --uui-link-button-text-active: var(--fuchia-50);
913
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
914
+ }
915
+
916
+ .link-button-white {
917
+ --uui-link-button-text: var(--white);
918
+ --uui-link-button-text-hover: var(--uui-color-white-800);
919
+ --uui-link-button-text-active: var(--uui-color-white-900);
920
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
921
+ }
922
+
923
+ .link-button-night50 {
924
+ --uui-link-button-text: var(--night50);
925
+ --uui-link-button-text-hover: var(--uui-color-night50-800);
926
+ --uui-link-button-text-active: var(--uui-color-night50-900);
927
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
928
+ }
929
+
930
+ .link-button-night200 {
931
+ --uui-link-button-text: var(--night200);
932
+ --uui-link-button-text-hover: var(--uui-color-night200-800);
933
+ --uui-link-button-text-active: var(--uui-color-night200-900);
934
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
935
+ }
936
+
937
+ .link-button-night300 {
938
+ --uui-link-button-text: var(--night300);
939
+ --uui-link-button-text-hover: var(--uui-color-night300-800);
940
+ --uui-link-button-text-active: var(--uui-color-night300-900);
941
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
942
+ }
943
+
944
+ .link-button-night400 {
945
+ --uui-link-button-text: var(--night400);
946
+ --uui-link-button-text-hover: var(--uui-color-night400-800);
947
+ --uui-link-button-text-active: var(--uui-color-night400-900);
948
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
949
+ }
950
+
951
+ .link-button-night500 {
952
+ --uui-link-button-text: var(--night500);
953
+ --uui-link-button-text-hover: var(--uui-color-night500-800);
954
+ --uui-link-button-text-active: var(--uui-color-night500-900);
955
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
956
+ }
957
+
958
+ .link-button-night700 {
959
+ --uui-link-button-text: var(--night700);
960
+ --uui-link-button-text-hover: var(--uui-color-night700-800);
961
+ --uui-link-button-text-active: var(--uui-color-night700-900);
962
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
963
+ }
964
+
965
+ .link-button-night800 {
966
+ --uui-link-button-text: var(--night800);
967
+ --uui-link-button-text-hover: var(--uui-color-night800-800);
968
+ --uui-link-button-text-active: var(--uui-color-night800-900);
969
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
970
+ }
971
+
972
+ .link-button-night900 {
973
+ --uui-link-button-text: var(--night900);
974
+ --uui-link-button-text-hover: var(--uui-color-night900-800);
975
+ --uui-link-button-text-active: var(--uui-color-night900-900);
976
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
977
+ }
978
+
864
979
  .icon-button-sky,
865
980
  .icon-button-info {
866
981
  --uui-icon-btn: var(--uui-info);
@@ -893,31 +1008,24 @@
893
1008
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
894
1009
  }
895
1010
 
896
- .icon-button-carbon {
897
- --uui-icon-btn: var(--uui-color-carbon-700);
898
- --uui-icon-btn-hover: var(--uui-color-carbon-800);
899
- --uui-icon-btn-active: var(--uui-color-carbon-900);
900
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
901
- }
902
-
903
1011
  .icon-button-cobalt {
904
- --uui-icon-btn: var(--uui-color-cobalt-700);
905
- --uui-icon-btn-hover: var(--uui-color-cobalt-800);
906
- --uui-icon-btn-active: var(--uui-color-cobalt-900);
1012
+ --uui-icon-btn: var(--cobalt-30);
1013
+ --uui-icon-btn-hover: var(--cobalt-40);
1014
+ --uui-icon-btn-active: var(--cobalt-50);
907
1015
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
908
1016
  }
909
1017
 
910
1018
  .icon-button-lavanda {
911
- --uui-icon-btn: var(--uui-color-lavanda-700);
912
- --uui-icon-btn-hover: var(--uui-color-lavanda-800);
913
- --uui-icon-btn-active: var(--uui-color-lavanda-900);
1019
+ --uui-icon-btn: var(--lavanda-30);
1020
+ --uui-icon-btn-hover: var(--lavanda-40);
1021
+ --uui-icon-btn-active: var(--lavanda-50);
914
1022
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
915
1023
  }
916
1024
 
917
1025
  .icon-button-fuchsia {
918
- --uui-icon-btn: var(--uui-color-fuchsia-700);
919
- --uui-icon-btn-hover: var(--uui-color-fuchsia-800);
920
- --uui-icon-btn-active: var(--uui-color-fuchsia-900);
1026
+ --uui-icon-btn: var(--fuchia-30);
1027
+ --uui-icon-btn-hover: var(--fuchia-40);
1028
+ --uui-icon-btn-active: var(--fuchia-50);
921
1029
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
922
1030
  }
923
1031
 
@@ -1103,42 +1211,42 @@
1103
1211
  }
1104
1212
 
1105
1213
  .badge-cobalt {
1106
- --uui-badge-bg: var(--uui-color-cobalt-700);
1107
- --uui-badge-bg-hover: var(--uui-color-cobalt-800);
1214
+ --uui-badge-bg: var(--cobalt-30);
1215
+ --uui-badge-bg-hover: var(--cobalt-40);
1108
1216
  --uui-badge-caption-solid: var(--uui-text-contrast);
1109
1217
  --uui-badge-count-bg: var(--white);
1110
1218
  --uui-badge-count: var(--uui-text-secondary);
1111
- --uui-badge-bg-halftone: var(--uui-color-cobalt-500);
1112
- --uui-badge-bg-halftone-hover: var(--uui-color-cobalt-600);
1113
- --uui-badge-border-halftone: var(--uui-color-cobalt-700);
1114
- --uui-badge-border-halftone-hover: var(--uui-color-cobalt-800);
1115
- --uui-badge-caption-halftone: var(--uui-color-cobalt-900);
1219
+ --uui-badge-bg-halftone: var(--cobalt-10);
1220
+ --uui-badge-bg-halftone-hover: var(--cobalt-20);
1221
+ --uui-badge-border-halftone: var(--cobalt-30);
1222
+ --uui-badge-border-halftone-hover: var(--cobalt-40);
1223
+ --uui-badge-caption-halftone: var(--cobalt-50);
1116
1224
  }
1117
1225
 
1118
1226
  .badge-lavanda {
1119
- --uui-badge-bg: var(--uui-color-lavanda-700);
1120
- --uui-badge-bg-hover: var(--uui-color-lavanda-800);
1227
+ --uui-badge-bg: var(--lavanda-30);
1228
+ --uui-badge-bg-hover: var(--lavanda-40);
1121
1229
  --uui-badge-caption-solid: var(--white);
1122
1230
  --uui-badge-count-bg: var(--white);
1123
1231
  --uui-badge-count: var(--uui-text-secondary);
1124
- --uui-badge-bg-halftone: var(--uui-color-lavanda-500);
1125
- --uui-badge-bg-halftone-hover: var(--uui-color-lavanda-600);
1126
- --uui-badge-border-halftone: var(--uui-color-lavanda-700);
1127
- --uui-badge-border-halftone-hover: var(--uui-color-lavanda-800);
1128
- --uui-badge-caption-halftone: var(--uui-color-lavanda-900);
1232
+ --uui-badge-bg-halftone: var(--lavanda-10);
1233
+ --uui-badge-bg-halftone-hover: var(--lavanda-20);
1234
+ --uui-badge-border-halftone: var(--lavanda-30);
1235
+ --uui-badge-border-halftone-hover: var(--lavanda-40);
1236
+ --uui-badge-caption-halftone: var(--lavanda-50);
1129
1237
  }
1130
1238
 
1131
1239
  .badge-fuchsia {
1132
- --uui-badge-bg: var(--uui-color-fuchsia-700);
1133
- --uui-badge-bg-hover: var(--uui-color-fuchsia-800);
1240
+ --uui-badge-bg: var(--fuchia-30);
1241
+ --uui-badge-bg-hover: var(--fuchia-40);
1134
1242
  --uui-badge-caption-solid: var(--uui-text-contrast);
1135
1243
  --uui-badge-count-bg: var(--white);
1136
1244
  --uui-badge-count: var(--uui-text-secondary);
1137
- --uui-badge-bg-halftone: var(--uui-color-fuchsia-500);
1138
- --uui-badge-bg-halftone-hover: var(--uui-color-fuchsia-600);
1139
- --uui-badge-border-halftone: var(--uui-color-fuchsia-700);
1140
- --uui-badge-border-halftone-hover: var(--uui-color-fuchsia-800);
1141
- --uui-badge-caption-halftone: var(--uui-color-fuchsia-900);
1245
+ --uui-badge-bg-halftone: var(--fuchia-10);
1246
+ --uui-badge-bg-halftone-hover: var(--fuchia-20);
1247
+ --uui-badge-border-halftone: var(--fuchia-30);
1248
+ --uui-badge-border-halftone-hover: var(--fuchia-40);
1249
+ --uui-badge-caption-halftone: var(--fuchia-50);
1142
1250
  }
1143
1251
 
1144
1252
  .badge-white {
@@ -1330,6 +1438,10 @@
1330
1438
  --uui-text: var(--uui-text-contrast);
1331
1439
  }
1332
1440
 
1441
+ .uui-text-white {
1442
+ --uui-text: var(--uui-text-white);
1443
+ }
1444
+
1333
1445
  .uui-font-regular,
1334
1446
  .uui-font-sans {
1335
1447
  --uui-text-font: var(--font-regular);
package/theme/theme_promo.scss CHANGED
@@ -209,6 +209,7 @@
209
209
  --uui-text-secondary: var(--gray60);
210
210
  --uui-text-disabled: var(--gray50);
211
211
  --uui-text-contrast: var(--gray5);
212
+ --uui-text-white: var(--white);
212
213
 
213
214
  --uui-control-bg: var(--white);
214
215
  --uui-control-bg-checked: var(--uui-primary);
@@ -293,10 +294,6 @@
293
294
  --uui-btn-font: var(--font-semibold);
294
295
 
295
296
  /* LinkButton vars */
296
- --uui-link-button-text: var(--uui-primary);
297
- --uui-link-button-text-hover: var(--uui-primary-dark);
298
- --uui-link-button-text-active: var(--uui-primary-darkest);
299
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
300
297
  --uui-link-button-font: var(--font-semibold);
301
298
 
302
299
  /* DatePicker vars */
@@ -519,6 +516,7 @@
519
516
 
520
517
  /* MainMenu */
521
518
  --uui-main_menu-text: var(--uui-text-contrast);
519
+ --uui-main_menu-text-active: var(--uui-text-contrast);
522
520
  --uui-main_menu-bg: var(--uui-surface-contrast);
523
521
  --uui-main_menu-hover: var(--uui-surface-contrast-hover);
524
522
  --uui-main_menu-active: var(--uui-surface-contrast-active);
@@ -907,6 +905,51 @@
907
905
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
908
906
  }
909
907
 
908
+ .link-button-primary,
909
+ .link-button-blue {
910
+ --uui-link-button-text: var(--blue);
911
+ --uui-link-button-text-hover: var(--blue-dark);
912
+ --uui-link-button-text-active: var(--blue-darkest);
913
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
914
+ }
915
+
916
+ .link-button-secondary,
917
+ .link-button-gray60 {
918
+ --uui-link-button-text: var(--uui-secondary);
919
+ --uui-link-button-text-hover: var(--uui-secondary-dark);
920
+ --uui-link-button-text-active: var(--uui-secondary-darkest);
921
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
922
+ }
923
+
924
+ .link-button-contrast,
925
+ .link-button-gray10 {
926
+ --uui-link-button-text: var(--gray10);
927
+ --uui-link-button-text-hover: var(--gray20);
928
+ --uui-link-button-text-active: var(--gray30);
929
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
930
+ }
931
+
932
+ .link-button-green {
933
+ --uui-link-button-text: var(--green);
934
+ --uui-link-button-text-hover: var(--green-dark);
935
+ --uui-link-button-text-active: var(--green-darkest);
936
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
937
+ }
938
+
939
+ .link-button-amber {
940
+ --uui-link-button-text: var(--amber);
941
+ --uui-link-button-text-hover: var(--amber-dark);
942
+ --uui-link-button-text-active: var(--amber-darkest);
943
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
944
+ }
945
+
946
+ .link-button-red {
947
+ --uui-link-button-text: var(--red);
948
+ --uui-link-button-text-hover: var(--red-dark);
949
+ --uui-link-button-text-active: var(--red-darkest);
950
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
951
+ }
952
+
910
953
  .icon-button-blue,
911
954
  .icon-button-info {
912
955
  --uui-icon-btn: var(--uui-info);
@@ -1093,6 +1136,10 @@
1093
1136
  --uui-text: var(--uui-text-contrast);
1094
1137
  }
1095
1138
 
1139
+ .uui-text-white {
1140
+ --uui-text: var(--uui-text-white);
1141
+ }
1142
+
1096
1143
  .uui-font-regular,
1097
1144
  .uui-font-sans {
1098
1145
  --uui-text-font: var(--font-regular);
package/scss/contrast.scss DELETED
@@ -1,39 +0,0 @@
1
- @use 'sass:math';
2
-
3
- @function pow($base, $exponent) {
4
- $result: 1;
5
- @for $_ from 1 through $exponent {
6
- $result: $result * $base;
7
- }
8
-
9
- @return $result;
10
- }
11
-
12
- @function de-gamma($n) {
13
- @if $n <= 0.03928 {
14
- @return math.div($n, 12.92);
15
- } @else {
16
- @return pow(math.div(($n + 0.055), 1.055), 2);
17
- }
18
- }
19
-
20
- @function brightness($c) {
21
- $rlin: de-gamma(math.div(red($c), 255));
22
- $glin: de-gamma(math.div(green($c), 255));
23
- $blin: de-gamma(math.div(blue($c), 255));
24
- @return (0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
25
- }
26
-
27
- @function contrast($color, $dark: #000000, $light: #FFFFFF) {
28
- @if $color == null {
29
- @return null;
30
- }
31
-
32
- @else {
33
- $color-brightness: brightness($color);
34
- $light-text-brightness: brightness($light);
35
- $dark-text-brightness: brightness($dark);
36
-
37
- @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
38
- }
39
- }
package/scss/control-layout.scss DELETED
@@ -1,2 +0,0 @@
1
- $panel-border-radius: 6px;
2
- $control-border-radius: 3px;
package/scss/control-size.scss DELETED
@@ -1,7 +0,0 @@
1
- @use 'sass:math';
2
- @mixin control-size($size, $borderWidth) {
3
- $padding: math.div($size, 6) - $borderWidth;
4
- min-width: $size;
5
- padding-left: $padding;
6
- padding-right: $padding;
7
- }
package/scss/dnd.scss DELETED
@@ -1,9 +0,0 @@
1
- @mixin dnd-cursor-style {
2
- &:hover {
3
- cursor: grab;
4
- }
5
-
6
- &:active {
7
- cursor: grabbing;
8
- }
9
- }
package/scss/effects.scss DELETED
@@ -1,25 +0,0 @@
1
- @mixin panel-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
2
-
3
- @mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
4
-
5
- @mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
6
-
7
- @mixin dnd-ghost-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
8
-
9
- @mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); }
10
-
11
- $scroll-shadow-size: 10px;
12
- $scroll-shadow-opacity: 0.2;
13
-
14
- @mixin scroll-shadow-base() {
15
- position: absolute;
16
- }
17
-
18
- @mixin scroll-shadow-top() {
19
- @include scroll-shadow-base();
20
- top: 0;
21
- left: 0;
22
- right: 0;
23
- height: $scroll-shadow-size;
24
- background: 'linear-gradient(to bottom, rgba(0, 0, 0, #{$scroll-shadow-opacity}) 0%, rgba(0, 0, 0, 0) 100%)';
25
- }
package/scss/text-size.scss DELETED
@@ -1,37 +0,0 @@
1
- @function vpadding($size, $border-width) {
2
- @if ($size == 18px or $size == 24px) {
3
- @return (3px - $border-width);
4
- } @else if ($size == 30px) {
5
- @return (6px - $border-width);
6
- } @else if ($size == 36px or $size == 42px) {
7
- @return (9px - $border-width);
8
- } @else if ($size == 48px) {
9
- @return (12px - $border-width);
10
- }
11
-
12
- @return (null);
13
- }
14
-
15
- @mixin text-size($size, $border-width: 0) {
16
- @if ($size == 18px) {
17
- line-height: 12px;
18
- font-size: 10px;
19
- } @else if ($size == 24px) {
20
- line-height: 18px;
21
- font-size: 12px;
22
- } @else if ($size == 30px) {
23
- line-height: 18px;
24
- font-size: 14px;
25
- } @else if ($size == 36px) {
26
- line-height: 18px;
27
- font-size: 14px;
28
- } @else if ($size == 42px) {
29
- line-height: 24px;
30
- font-size: 16px;
31
- } @else if ($size == 48px) {
32
- line-height: 24px;
33
- font-size: 16px;
34
- }
35
- padding-top: vpadding($size, $border-width);
36
- padding-bottom: vpadding($size, $border-width);
37
- }