@epam/assets 5.5.4 → 5.6.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.
- package/css/theme/theme_electric.css +117 -116
- package/css/theme/theme_electric.css.map +1 -1
- package/css/theme/theme_loveship.css +129 -128
- package/css/theme/theme_loveship.css.map +1 -1
- package/css/theme/theme_loveship_dark.css +134 -125
- package/css/theme/theme_loveship_dark.css.map +1 -1
- package/css/theme/theme_promo.css +113 -113
- package/css/theme/theme_promo.css.map +1 -1
- package/css/theme/theme_vanilla_thunder.css +15 -14
- package/css/theme/theme_vanilla_thunder.css.map +1 -1
- package/package.json +2 -2
- package/theme/theme_electric.scss +2 -211
- package/theme/theme_loveship.scss +2 -209
- package/theme/theme_loveship_dark.scss +21 -219
- package/theme/theme_promo.scss +2 -209
- package/theme/theme_vanilla_thunder.scss +15 -14
- package/theme/tokens/_theme_electric.scss +263 -0
- package/theme/tokens/_theme_loveship.scss +261 -0
- package/theme/tokens/_theme_loveship_dark.scss +261 -0
- package/theme/tokens/_theme_promo.scss +261 -0
|
@@ -1,107 +1,12 @@
|
|
|
1
|
+
@use './tokens/_theme_loveship.scss' as tokens;
|
|
1
2
|
/* Name convention */
|
|
2
3
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
3
4
|
|
|
4
5
|
@mixin theme-loveship {
|
|
6
|
+
@include tokens.theme-tokens;
|
|
5
7
|
--uui-font: 'Source Sans Pro', sans-serif;
|
|
6
8
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
7
9
|
|
|
8
|
-
--night50: #FAFAFC;
|
|
9
|
-
--night100: #F5F6FA;
|
|
10
|
-
--night200: #EBEDF5;
|
|
11
|
-
--night300: #E1E3EB;
|
|
12
|
-
--night400: #CED0DB;
|
|
13
|
-
--night500: #ACAFBF;
|
|
14
|
-
--night600: #6C6F80;
|
|
15
|
-
--night700: #474A59;
|
|
16
|
-
--night800: #303240;
|
|
17
|
-
--night900: #1D1E26;
|
|
18
|
-
|
|
19
|
-
--sky-5: #F5FDFF;
|
|
20
|
-
--sky-10: #E1F4FA;
|
|
21
|
-
--sky-20: #A0DDEE;
|
|
22
|
-
--sky-50: #009ECC;
|
|
23
|
-
--sky-60: #0086AD;
|
|
24
|
-
--sky-70: #006B8A;
|
|
25
|
-
|
|
26
|
-
--grass-5: #FCFFF5;
|
|
27
|
-
--grass-10: #EBF3D8;
|
|
28
|
-
--grass-20: #C1E288;
|
|
29
|
-
--grass-50: #67A300;
|
|
30
|
-
--grass-60: #528500;
|
|
31
|
-
--grass-70: #396F1F;
|
|
32
|
-
|
|
33
|
-
--sun-5: #FFFCF5;
|
|
34
|
-
--sun-10: #FFEDC9;
|
|
35
|
-
--sun-20: #FFD785;
|
|
36
|
-
--sun-50: #FCAA00;
|
|
37
|
-
--sun-60: #FF9000;
|
|
38
|
-
--sun-70: #BD5800;
|
|
39
|
-
|
|
40
|
-
--fire-5: #FEF6F6;
|
|
41
|
-
--fire-10: #FDE1E1;
|
|
42
|
-
--fire-20: #FBB6B6;
|
|
43
|
-
--fire-50: #FF4242;
|
|
44
|
-
--fire-60: #E22A2A;
|
|
45
|
-
--fire-70: #AD0000;
|
|
46
|
-
|
|
47
|
-
--white: #FFFFFF;
|
|
48
|
-
|
|
49
|
-
--yellow-5: #FFFFF5;
|
|
50
|
-
--yellow-10: #FFFFE5;
|
|
51
|
-
--yellow-20: #FFFCA4;
|
|
52
|
-
--yellow-50: #FDD63B;
|
|
53
|
-
--yellow-60: #EDBE02;
|
|
54
|
-
--yellow-70: #BC7E02;
|
|
55
|
-
|
|
56
|
-
--orange-5: #FEF8F4;
|
|
57
|
-
--orange-10: #FFE8D7;
|
|
58
|
-
--orange-20: #FFCCA7;
|
|
59
|
-
--orange-50: #FF8B3E;
|
|
60
|
-
--orange-60: #F76B0D;
|
|
61
|
-
--orange-70: #BD4B00;
|
|
62
|
-
|
|
63
|
-
--fuchsia-5: #FFF7FB;
|
|
64
|
-
--fuchsia-10: #F9D8E7;
|
|
65
|
-
--fuchsia-20: #EDADC8;
|
|
66
|
-
--fuchsia-50: #EA4386;
|
|
67
|
-
--fuchsia-60: #D61E68;
|
|
68
|
-
--fuchsia-70: #AE1955;
|
|
69
|
-
|
|
70
|
-
--purple-5: #FDF6FE;
|
|
71
|
-
--purple-10: #F2CCFA;
|
|
72
|
-
--purple-20: #E79DF5;
|
|
73
|
-
--purple-50: #B114D1;
|
|
74
|
-
--purple-60: #860F9E;
|
|
75
|
-
--purple-70: #5E0B6F;
|
|
76
|
-
|
|
77
|
-
--violet-5: #F8F6FE;
|
|
78
|
-
--violet-10: #DBCCFA;
|
|
79
|
-
--violet-20: #BB9DF5;
|
|
80
|
-
--violet-50: #773CEC;
|
|
81
|
-
--violet-60: #5514D6;
|
|
82
|
-
--violet-70: #40109E;
|
|
83
|
-
|
|
84
|
-
--cobalt-5: #F8FAFF;
|
|
85
|
-
--cobalt-10: #D9E2FC;
|
|
86
|
-
--cobalt-20: #AEC0F5;
|
|
87
|
-
--cobalt-50: #0F98FF;
|
|
88
|
-
--cobalt-60: #006FE5;
|
|
89
|
-
--cobalt-70: #0954A5;
|
|
90
|
-
|
|
91
|
-
--cyan-5: #F6FEFE;
|
|
92
|
-
--cyan-10: #D1FAFA;
|
|
93
|
-
--cyan-20: #AAEEEE;
|
|
94
|
-
--cyan-50: #14CCCC;
|
|
95
|
-
--cyan-60: #12B5B5;
|
|
96
|
-
--cyan-70: #0B6F6F;
|
|
97
|
-
|
|
98
|
-
--mint-5: #F2FCF5;
|
|
99
|
-
--mint-10: #DDF3E4;
|
|
100
|
-
--mint-20: #B4DFC4;
|
|
101
|
-
--mint-50: #4FC48C;
|
|
102
|
-
--mint-60: #31AA70;
|
|
103
|
-
--mint-70: #236E4A;
|
|
104
|
-
|
|
105
10
|
/* Loveship old colors */
|
|
106
11
|
--uui-color-night50-800: #DADAE9;
|
|
107
12
|
--uui-color-night50-900: #BABAD6;
|
|
@@ -126,145 +31,33 @@
|
|
|
126
31
|
|
|
127
32
|
/* brand colors */
|
|
128
33
|
|
|
129
|
-
--uui-primary-5: var(--sky-5);
|
|
130
|
-
--uui-primary-10: var(--sky-10);
|
|
131
|
-
--uui-primary-20: var(--sky-20);
|
|
132
|
-
--uui-primary-50: var(--sky-50);
|
|
133
|
-
--uui-primary-60: var(--sky-60);
|
|
134
|
-
--uui-primary-70: var(--sky-70);
|
|
135
34
|
--uui-primary-contrast: var(--white);
|
|
136
35
|
|
|
137
|
-
--uui-accent-5: var(--grass-5);
|
|
138
|
-
--uui-accent-10: var(--grass-10);
|
|
139
|
-
--uui-accent-20: var(--grass-20);
|
|
140
|
-
--uui-accent-50: var(--grass-50);
|
|
141
|
-
--uui-accent-60: var(--grass-60);
|
|
142
|
-
--uui-accent-70: var(--grass-70);
|
|
143
36
|
--uui-accent-contrast: var(--white);
|
|
144
37
|
|
|
145
|
-
--uui-secondary-5: var(--night100);
|
|
146
|
-
--uui-secondary-10: var(--night200);
|
|
147
|
-
--uui-secondary-20: var(--night300);
|
|
148
|
-
--uui-secondary-50: var(--night600);
|
|
149
|
-
--uui-secondary-60: var(--night700);
|
|
150
|
-
--uui-secondary-70: var(--night800);
|
|
151
38
|
--uui-secondary-contrast: var(--white);
|
|
152
39
|
|
|
153
|
-
--uui-critical-5: var(--fire-5);
|
|
154
|
-
--uui-critical-10: var(--fire-10);
|
|
155
|
-
--uui-critical-20: var(--fire-20);
|
|
156
|
-
--uui-critical-50: var(--fire-50);
|
|
157
|
-
--uui-critical-60: var(--fire-60);
|
|
158
|
-
--uui-critical-70: var(--fire-70);
|
|
159
40
|
--uui-critical-contrast: var(--white);
|
|
160
41
|
|
|
161
42
|
/* semantic colors */
|
|
162
43
|
|
|
163
|
-
--uui-info-5: var(--sky-5);
|
|
164
|
-
--uui-info-10: var(--sky-10);
|
|
165
|
-
--uui-info-20: var(--sky-20);
|
|
166
|
-
--uui-info-50: var(--sky-50);
|
|
167
|
-
--uui-info-60: var(--sky-60);
|
|
168
|
-
--uui-info-70: var(--sky-70);
|
|
169
44
|
--uui-info-contrast: var(--white);
|
|
170
45
|
|
|
171
|
-
--uui-success-5: var(--grass-5);
|
|
172
|
-
--uui-success-10: var(--grass-10);
|
|
173
|
-
--uui-success-20: var(--grass-20);
|
|
174
|
-
--uui-success-50: var(--grass-50);
|
|
175
|
-
--uui-success-60: var(--grass-60);
|
|
176
|
-
--uui-success-70: var(--grass-70);
|
|
177
46
|
--uui-success-contrast: var(--white);
|
|
178
47
|
|
|
179
|
-
--uui-warning-5: var(--sun-5);
|
|
180
|
-
--uui-warning-10: var(--sun-10);
|
|
181
|
-
--uui-warning-20: var(--sun-20);
|
|
182
|
-
--uui-warning-50: var(--sun-50);
|
|
183
|
-
--uui-warning-60: var(--sun-60);
|
|
184
|
-
--uui-warning-70: var(--sun-70);
|
|
185
48
|
--uui-warning-contrast: var(--night800);
|
|
186
49
|
|
|
187
|
-
--uui-error-5: var(--fire-5);
|
|
188
|
-
--uui-error-10: var(--fire-10);
|
|
189
|
-
--uui-error-20: var(--fire-20);
|
|
190
|
-
--uui-error-50: var(--fire-50);
|
|
191
|
-
--uui-error-60: var(--fire-60);
|
|
192
|
-
--uui-error-70: var(--fire-70);
|
|
193
50
|
--uui-error-contrast: var(--white);
|
|
194
51
|
|
|
195
|
-
--uui-neutral-0: #FFFFFF;
|
|
196
|
-
--uui-neutral-5: var(--night50);
|
|
197
|
-
--uui-neutral-10: var(--night100);
|
|
198
|
-
--uui-neutral-20: var(--night200);
|
|
199
|
-
--uui-neutral-30: var(--night300);
|
|
200
|
-
--uui-neutral-40: var(--night400);
|
|
201
|
-
--uui-neutral-50: var(--night500);
|
|
202
|
-
--uui-neutral-60: var(--night600);
|
|
203
|
-
--uui-neutral-70: var(--night700);
|
|
204
|
-
--uui-neutral-80: var(--night800);
|
|
205
|
-
--uui-neutral-90: var(--night900);
|
|
206
|
-
--uui-neutral-100: #000000;
|
|
207
|
-
|
|
208
52
|
/* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
|
|
209
53
|
|
|
210
|
-
--uui-app-bg: var(--uui-neutral-10);
|
|
211
|
-
--uui-overlay: rgba(29, 30, 38, 0.8);
|
|
212
|
-
|
|
213
|
-
--uui-surface-sunken: var(--uui-neutral-5);
|
|
214
|
-
--uui-surface-main: var(--uui-neutral-0);
|
|
215
|
-
--uui-surface-higher: var(--uui-neutral-10);
|
|
216
|
-
--uui-surface-highest: var(--uui-neutral-20);
|
|
217
|
-
|
|
218
|
-
--uui-divider: var(--uui-neutral-40);
|
|
219
|
-
--uui-divider-light: var(--uui-neutral-30);
|
|
220
|
-
|
|
221
|
-
--uui-text-brand: var(--uui-neutral-90);
|
|
222
|
-
--uui-text-primary: var(--uui-neutral-80);
|
|
223
|
-
--uui-text-secondary: var(--uui-neutral-70);
|
|
224
|
-
--uui-text-tertiary: var(--uui-neutral-60);
|
|
225
|
-
--uui-text-disabled: var(--uui-neutral-50);
|
|
226
|
-
|
|
227
|
-
--uui-text-info: var(--uui-info-70);
|
|
228
|
-
--uui-text-warning: var(--uui-warning-70);
|
|
229
|
-
--uui-text-critical: var(--uui-critical-70);
|
|
230
|
-
--uui-text-success: var(--uui-success-70);
|
|
231
|
-
|
|
232
|
-
|
|
233
54
|
/* control specific */
|
|
234
55
|
|
|
235
|
-
--uui-link: var(--sky-50);
|
|
236
|
-
--uui-link-hover: var(--sky-60);
|
|
237
|
-
--uui-link-visited: #8018A0;
|
|
238
56
|
--uui-link-visited-hover: #601278;
|
|
239
|
-
--uui-link-disabled: var(--uui-neutral-50);
|
|
240
57
|
|
|
241
|
-
--uui-icon: var(--uui-neutral-60);
|
|
242
|
-
--uui-icon-hover: var(--uui-neutral-70);
|
|
243
|
-
--uui-icon-active: var(--uui-neutral-80);
|
|
244
|
-
--uui-icon-disabled: var(--uui-neutral-50);
|
|
245
|
-
|
|
246
|
-
--uui-control-bg: var(--uui-surface-main);
|
|
247
|
-
--uui-control-bg-hover: var(--uui-neutral-60);
|
|
248
|
-
--uui-control-bg-disabled: var(--uui-neutral-5);
|
|
249
|
-
|
|
250
|
-
--uui-control-border: var(--uui-neutral-40);
|
|
251
|
-
--uui-control-border-hover: var(--uui-neutral-60);
|
|
252
58
|
--uui-control-border-focus: var(--uui-primary-50);
|
|
253
59
|
--uui-control-border-disabled: var(--uui-neutral-30);
|
|
254
60
|
|
|
255
|
-
--uui-control-placeholder: var(--uui-neutral-50);
|
|
256
|
-
--uui-control-placeholder-disabled: var(--uui-neutral-50);
|
|
257
|
-
|
|
258
|
-
--uui-control-text: var(--uui-text-primary);
|
|
259
|
-
--uui-control-text-disabled: var(--uui-text-tertiary);
|
|
260
|
-
|
|
261
|
-
--uui-control-icon: var(--uui-neutral-50);
|
|
262
|
-
--uui-control-icon-disabled: var(--uui-neutral-50);
|
|
263
|
-
|
|
264
|
-
--uui-outline-focus: #008ACE80;
|
|
265
|
-
|
|
266
|
-
--uui-skeleton: var(--uui-neutral-40);
|
|
267
|
-
|
|
268
61
|
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
269
62
|
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
|
|
270
63
|
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
|
|
@@ -1,251 +1,43 @@
|
|
|
1
|
+
@use './tokens/_theme_loveship_dark.scss' as tokens;
|
|
1
2
|
/* Name convention */
|
|
2
3
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
3
4
|
|
|
4
5
|
@mixin theme-loveship_dark {
|
|
6
|
+
@include tokens.theme-tokens;
|
|
5
7
|
--uui-font: 'Source Sans Pro', sans-serif;
|
|
6
8
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
7
9
|
|
|
8
|
-
--night50: #FAFAFC;
|
|
9
|
-
--night100: #E1E3EB;
|
|
10
|
-
--night200: #ACAFBF;
|
|
11
|
-
--night300: #6C6F80;
|
|
12
|
-
--night400: #585B69;
|
|
13
|
-
--night500: #474A59;
|
|
14
|
-
--night600: #383B4A;
|
|
15
|
-
--night700: #303240;
|
|
16
|
-
--night800: #272833;
|
|
17
|
-
--night900: #1D1E26;
|
|
18
|
-
|
|
19
|
-
--sky-5: #2C394B;
|
|
20
|
-
--sky-10: #334052;
|
|
21
|
-
--sky-20: #3E586F;
|
|
22
|
-
--sky-50: #008ACE;
|
|
23
|
-
--sky-60: #48A4D0;
|
|
24
|
-
--sky-70: #7DBCDB;
|
|
25
|
-
|
|
26
|
-
--grass-5: #343A3B;
|
|
27
|
-
--grass-10: #39443D;
|
|
28
|
-
--grass-20: #505F49;
|
|
29
|
-
--grass-50: #669900;
|
|
30
|
-
--grass-60: #83B918;
|
|
31
|
-
--grass-70: #A6D151;
|
|
32
|
-
|
|
33
|
-
--sun-5: #3F3B3B;
|
|
34
|
-
--sun-10: #47433D;
|
|
35
|
-
--sun-20: #625747;
|
|
36
|
-
--sun-50: #F1A105;
|
|
37
|
-
--sun-60: #F4B83A;
|
|
38
|
-
--sun-70: #FFD06D;
|
|
39
|
-
|
|
40
|
-
--fire-5: #3C343E;
|
|
41
|
-
--fire-10: #473943;
|
|
42
|
-
--fire-20: #6B4447;
|
|
43
|
-
--fire-50: #CC482D;
|
|
44
|
-
--fire-60: #E56248;
|
|
45
|
-
--fire-70: #F78C77;
|
|
46
|
-
|
|
47
|
-
--white: #FFFFFF;
|
|
48
|
-
|
|
49
|
-
--yellow-5: #403F40;
|
|
50
|
-
--yellow-10: #4F4B3F;
|
|
51
|
-
--yellow-20: #74683E;
|
|
52
|
-
--yellow-50: #FDD63B;
|
|
53
|
-
--yellow-60: #FEE376;
|
|
54
|
-
--yellow-70: #FEEA9D;
|
|
55
|
-
|
|
56
|
-
--orange-5: #413940;
|
|
57
|
-
--orange-10: #4F3F40;
|
|
58
|
-
--orange-20: #744F3F;
|
|
59
|
-
--orange-50: #FF8B3E;
|
|
60
|
-
--orange-60: #FFAA70;
|
|
61
|
-
--orange-70: #FFBF95;
|
|
62
|
-
|
|
63
|
-
--fuchsia-5: #413346;
|
|
64
|
-
--fuchsia-10: #51344C;
|
|
65
|
-
--fuchsia-20: #713657;
|
|
66
|
-
--fuchsia-50: #E93D82;
|
|
67
|
-
--fuchsia-60: #ED5F98;
|
|
68
|
-
--fuchsia-70: #F183AF;
|
|
69
|
-
|
|
70
|
-
--purple-5: #3E2F4F;
|
|
71
|
-
--purple-10: #4A2C5D;
|
|
72
|
-
--purple-20: #68267F;
|
|
73
|
-
--purple-50: #B915DA;
|
|
74
|
-
--purple-60: #D34EEE;
|
|
75
|
-
--purple-70: #D68AE5;
|
|
76
|
-
|
|
77
|
-
--violet-5: #393251;
|
|
78
|
-
--violet-10: #443166;
|
|
79
|
-
--violet-20: #573088;
|
|
80
|
-
--violet-50: #8E32EB;
|
|
81
|
-
--violet-60: #A55CEF;
|
|
82
|
-
--violet-70: #AE8BF4;
|
|
83
|
-
|
|
84
|
-
--cobalt-5: #2C3A4F;
|
|
85
|
-
--cobalt-10: #29405D;
|
|
86
|
-
--cobalt-20: #20517F;
|
|
87
|
-
--cobalt-50: #0091FF;
|
|
88
|
-
--cobalt-60: #40ACFF;
|
|
89
|
-
--cobalt-70: #7AC5FF;
|
|
90
|
-
|
|
91
|
-
--cyan-5: #2E3E4B;
|
|
92
|
-
--cyan-10: #2C4955;
|
|
93
|
-
--cyan-20: #27656E;
|
|
94
|
-
--cyan-50: #14CCCC;
|
|
95
|
-
--cyan-60: #70E0E0;
|
|
96
|
-
--cyan-70: #A1EBEB;
|
|
97
|
-
|
|
98
|
-
--mint-5: #323E46;
|
|
99
|
-
--mint-10: #34484B;
|
|
100
|
-
--mint-20: #396258;
|
|
101
|
-
--mint-50: #4CC38A;
|
|
102
|
-
--mint-60: #79D2A7;
|
|
103
|
-
--mint-70: #A6E1C5;
|
|
104
|
-
|
|
105
10
|
/* core variables start */
|
|
106
11
|
|
|
107
12
|
/* brand colors */
|
|
108
|
-
|
|
109
|
-
--uui-primary-5: var(--sky-5);
|
|
110
|
-
--uui-primary-10: var(--sky-10);
|
|
111
|
-
--uui-primary-20: var(--sky-20);
|
|
112
|
-
--uui-primary-50: var(--sky-50);
|
|
113
|
-
--uui-primary-60: var(--sky-60);
|
|
114
|
-
--uui-primary-70: var(--sky-70);
|
|
115
13
|
--uui-primary-contrast: var(--white);
|
|
116
14
|
|
|
117
|
-
--uui-accent-5: var(--grass-5);
|
|
118
|
-
--uui-accent-10: var(--grass-10);
|
|
119
|
-
--uui-accent-20: var(--grass-20);
|
|
120
|
-
--uui-accent-50: var(--grass-50);
|
|
121
|
-
--uui-accent-60: var(--grass-60);
|
|
122
|
-
--uui-accent-70: var(--grass-70);
|
|
123
15
|
--uui-accent-contrast: var(--white);
|
|
124
16
|
|
|
125
|
-
--uui-secondary-5: var(--night800);
|
|
126
|
-
--uui-secondary-10: var(--night700);
|
|
127
|
-
--uui-secondary-20: var(--night600);
|
|
128
|
-
--uui-secondary-50: var(--night500);
|
|
129
|
-
--uui-secondary-60: var(--night400);
|
|
130
|
-
--uui-secondary-70: var(--night300);
|
|
131
17
|
--uui-secondary-contrast: var(--white);
|
|
132
18
|
|
|
133
|
-
--uui-critical-5: var(--fire-5);
|
|
134
|
-
--uui-critical-10: var(--fire-10);
|
|
135
|
-
--uui-critical-20: var(--fire-20);
|
|
136
|
-
--uui-critical-50: var(--fire-50);
|
|
137
|
-
--uui-critical-60: var(--fire-60);
|
|
138
|
-
--uui-critical-70: var(--fire-70);
|
|
139
19
|
--uui-critical-contrast: var(--white);
|
|
140
20
|
|
|
141
21
|
/* semantic colors */
|
|
142
22
|
|
|
143
|
-
--uui-info-5: var(--sky-5);
|
|
144
|
-
--uui-info-10: var(--sky-10);
|
|
145
|
-
--uui-info-20: var(--sky-20);
|
|
146
|
-
--uui-info-50: var(--sky-50);
|
|
147
|
-
--uui-info-60: var(--sky-60);
|
|
148
|
-
--uui-info-70: var(--sky-70);
|
|
149
23
|
--uui-info-contrast: var(--white);
|
|
150
24
|
|
|
151
|
-
--uui-success-5: var(--grass-5);
|
|
152
|
-
--uui-success-10: var(--grass-10);
|
|
153
|
-
--uui-success-20: var(--grass-20);
|
|
154
|
-
--uui-success-50: var(--grass-50);
|
|
155
|
-
--uui-success-60: var(--grass-60);
|
|
156
|
-
--uui-success-70: var(--grass-70);
|
|
157
25
|
--uui-success-contrast: var(--white);
|
|
158
26
|
|
|
159
|
-
--uui-warning-5: var(--sun-5);
|
|
160
|
-
--uui-warning-10: var(--sun-10);
|
|
161
|
-
--uui-warning-20: var(--sun-20);
|
|
162
|
-
--uui-warning-50: var(--sun-50);
|
|
163
|
-
--uui-warning-60: var(--sun-60);
|
|
164
|
-
--uui-warning-70: var(--sun-70);
|
|
165
27
|
--uui-warning-contrast: var(--night700);
|
|
166
28
|
|
|
167
|
-
--uui-error-5: var(--fire-5);
|
|
168
|
-
--uui-error-10: var(--fire-10);
|
|
169
|
-
--uui-error-20: var(--fire-20);
|
|
170
|
-
--uui-error-50: var(--fire-50);
|
|
171
|
-
--uui-error-60: var(--fire-60);
|
|
172
|
-
--uui-error-70: var(--fire-70);
|
|
173
29
|
--uui-error-contrast: var(--white);
|
|
174
30
|
|
|
175
|
-
--uui-neutral-0: #FFFFFF;
|
|
176
|
-
--uui-neutral-5: var(--night50);
|
|
177
|
-
--uui-neutral-10: var(--night100);
|
|
178
|
-
--uui-neutral-20: var(--night200);
|
|
179
|
-
--uui-neutral-30: var(--night300);
|
|
180
|
-
--uui-neutral-40: var(--night400);
|
|
181
|
-
--uui-neutral-50: var(--night500);
|
|
182
|
-
--uui-neutral-60: var(--night600);
|
|
183
|
-
--uui-neutral-70: var(--night700);
|
|
184
|
-
--uui-neutral-80: var(--night800);
|
|
185
|
-
--uui-neutral-90: var(--night900);
|
|
186
|
-
--uui-neutral-100: #000000;
|
|
187
|
-
|
|
188
31
|
/* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
|
|
189
32
|
|
|
190
|
-
--uui-app-bg: var(--uui-neutral-90);
|
|
191
|
-
--uui-overlay: rgba(29, 30, 38, 0.8);
|
|
192
|
-
|
|
193
|
-
--uui-surface-sunken: var(--uui-neutral-80);
|
|
194
|
-
--uui-surface-main: var(--uui-neutral-70);
|
|
195
|
-
--uui-surface-higher: var(--uui-neutral-60);
|
|
196
|
-
--uui-surface-highest: var(--uui-neutral-50);
|
|
197
|
-
|
|
198
|
-
--uui-divider: var(--uui-neutral-40);
|
|
199
|
-
--uui-divider-light: var(--uui-neutral-50);
|
|
200
|
-
|
|
201
|
-
--uui-text-brand: var(--uui-neutral-0);
|
|
202
|
-
--uui-text-primary: var(--uui-neutral-5);
|
|
203
|
-
--uui-text-secondary: var(--uui-neutral-10);
|
|
204
|
-
--uui-text-tertiary: var(--uui-neutral-20);
|
|
205
|
-
--uui-text-disabled: var(--uui-neutral-30);
|
|
206
|
-
|
|
207
|
-
--uui-text-info: var(--uui-info-70);
|
|
208
|
-
--uui-text-warning: var(--uui-warning-70);
|
|
209
|
-
--uui-text-critical: var(--uui-critical-70);
|
|
210
|
-
--uui-text-success: var(--uui-success-70);
|
|
211
|
-
|
|
212
33
|
/* not accepted part */
|
|
213
34
|
|
|
214
35
|
/* control specific */
|
|
215
|
-
|
|
216
|
-
--uui-link: var(--sky-60);
|
|
217
|
-
--uui-link-hover: var(--sky-70);
|
|
218
|
-
--uui-link-visited: #9062EC;
|
|
219
36
|
--uui-link-visited-hover: #A884F0;
|
|
220
|
-
--uui-link-disabled: var(--uui-neutral-60);
|
|
221
|
-
|
|
222
|
-
--uui-icon: var(--uui-neutral-10);
|
|
223
|
-
--uui-icon-hover: var(--uui-neutral-5);
|
|
224
|
-
--uui-icon-active: var(--uui-neutral-5);
|
|
225
|
-
--uui-icon-disabled: var(--uui-neutral-30);
|
|
226
|
-
|
|
227
|
-
--uui-control-bg: var(--uui-surface-main);
|
|
228
|
-
--uui-control-bg-hover: var(--uui-neutral-60);
|
|
229
|
-
--uui-control-bg-disabled: var(--uui-neutral-60);
|
|
230
37
|
|
|
231
|
-
--uui-control-border: var(--uui-neutral-40);
|
|
232
|
-
--uui-control-border-hover: var(--uui-neutral-20);
|
|
233
38
|
--uui-control-border-focus: var(--uui-primary-60);
|
|
234
39
|
--uui-control-border-disabled: var(--uui-neutral-40);
|
|
235
40
|
|
|
236
|
-
--uui-control-placeholder: var(--uui-neutral-20);
|
|
237
|
-
--uui-control-placeholder-disabled: var(--uui-neutral-30);
|
|
238
|
-
|
|
239
|
-
--uui-control-text: var(--uui-text-primary);
|
|
240
|
-
--uui-control-text-disabled: var(--uui-text-tertiary);
|
|
241
|
-
|
|
242
|
-
--uui-control-icon: var(--uui-neutral-30);
|
|
243
|
-
--uui-control-icon-disabled: var(--uui-neutral-30);
|
|
244
|
-
|
|
245
|
-
--uui-outline-focus: #008ACE80;
|
|
246
|
-
|
|
247
|
-
--uui-skeleton: var(--uui-neutral-30);
|
|
248
|
-
|
|
249
41
|
--uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
|
|
250
42
|
--uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
|
|
251
43
|
--uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
|
|
@@ -634,6 +426,8 @@
|
|
|
634
426
|
}
|
|
635
427
|
|
|
636
428
|
&.uui-fill-outline {
|
|
429
|
+
--uui-badge-bg: var(--uui-neutral-80);
|
|
430
|
+
--uui-badge-bg-hover: var(--uui-neutral-70);
|
|
637
431
|
--uui-badge-border: var(--uui-neutral-30);
|
|
638
432
|
--uui-badge-border-hover: var(--uui-neutral-30);
|
|
639
433
|
--uui-badge-caption: var(--uui-neutral-5);
|
|
@@ -680,8 +474,8 @@
|
|
|
680
474
|
/* MainMenu */
|
|
681
475
|
|
|
682
476
|
.uui-main_menu {
|
|
683
|
-
--uui-main_menu-text: var(--uui-
|
|
684
|
-
--uui-main_menu-text-active: var(--uui-
|
|
477
|
+
--uui-main_menu-text: var(--uui-neutral-0);
|
|
478
|
+
--uui-main_menu-text-active: var(--uui-neutral-0);
|
|
685
479
|
--uui-main_menu-bg: var(--uui-neutral-70);
|
|
686
480
|
|
|
687
481
|
--uui-main_menu-search-bg: var(--uui-neutral-5);
|
|
@@ -696,8 +490,8 @@
|
|
|
696
490
|
}
|
|
697
491
|
|
|
698
492
|
.uui-main_menu-dropdown {
|
|
699
|
-
--uui-main_menu-text: var(--uui-
|
|
700
|
-
--uui-main_menu-text-active: var(--uui-
|
|
493
|
+
--uui-main_menu-text: var(--uui-neutral-0);
|
|
494
|
+
--uui-main_menu-text-active: var(--uui-neutral-0);
|
|
701
495
|
--uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);
|
|
702
496
|
}
|
|
703
497
|
|
|
@@ -713,7 +507,7 @@
|
|
|
713
507
|
|
|
714
508
|
/* BurgerButton */
|
|
715
509
|
.uui-main_menu-burger-button {
|
|
716
|
-
--uui-burger_btn_caption: var(--uui-
|
|
510
|
+
--uui-burger_btn_caption: var(--uui-neutral-0);
|
|
717
511
|
--uui-burger_btn_caption-hover: var(--uui-primary-50);
|
|
718
512
|
--uui-burger_btn_caption-active: var(--uui-primary-50);
|
|
719
513
|
--uui-burger_btn-border: var(--uui-neutral-40);
|
|
@@ -722,7 +516,7 @@
|
|
|
722
516
|
/* BurgerSearch */
|
|
723
517
|
|
|
724
518
|
.uui-main_menu-burger-search {
|
|
725
|
-
--uui-burger_search: var(--uui-
|
|
519
|
+
--uui-burger_search: var(--uui-neutral-0);
|
|
726
520
|
--uui-burger_search-fill: var(--uui-neutral-70);
|
|
727
521
|
--uui-burger_search-bg: var(--uui-neutral-40);
|
|
728
522
|
--uui-burger_search-placeholder: var(--uui-text-tertiary);
|
|
@@ -865,7 +659,7 @@
|
|
|
865
659
|
}
|
|
866
660
|
|
|
867
661
|
&.uui-fill-outline {
|
|
868
|
-
--uui-tag-caption: var(--uui-
|
|
662
|
+
--uui-tag-caption: var(--uui-neutral-0);
|
|
869
663
|
--uui-tag-fill: var(--uui-neutral-0);
|
|
870
664
|
--uui-tag-bg: color-mix(in srgb, var(--white) 5%, transparent);
|
|
871
665
|
--uui-tag-bg-hover: color-mix(in srgb, var(--white) 10%, transparent);
|
|
@@ -879,7 +673,7 @@
|
|
|
879
673
|
|
|
880
674
|
&.uui-color-night100 {
|
|
881
675
|
&.uui-fill-solid {
|
|
882
|
-
--uui-tag-caption: var(--uui-
|
|
676
|
+
--uui-tag-caption: var(--uui-neutral-0);
|
|
883
677
|
--uui-tag-fill: var(--uui-neutral-0);
|
|
884
678
|
--uui-tag-bg: var(--uui-neutral-40);
|
|
885
679
|
--uui-tag-border: var(--uui-neutral-40);
|
|
@@ -911,7 +705,7 @@
|
|
|
911
705
|
|
|
912
706
|
&.uui-color-night700 {
|
|
913
707
|
&.uui-fill-solid {
|
|
914
|
-
--uui-tag-caption: var(--uui-
|
|
708
|
+
--uui-tag-caption: var(--uui-neutral-0);
|
|
915
709
|
--uui-tag-fill: var(--uui-neutral-0);
|
|
916
710
|
--uui-tag-bg: var(--uui-neutral-80);
|
|
917
711
|
--uui-tag-border: var(--uui-neutral-80);
|
|
@@ -972,6 +766,14 @@
|
|
|
972
766
|
--uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px);
|
|
973
767
|
}
|
|
974
768
|
|
|
769
|
+
.uui-dt-vars {
|
|
770
|
+
--uui-dt-header-row-bg: var(--uui-surface-sunken);
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.uui-filters-panel-item-toggler {
|
|
774
|
+
--uui-filters_toggler-bg-hover: var(--uui-neutral-30);
|
|
775
|
+
}
|
|
776
|
+
|
|
975
777
|
/* fonts */
|
|
976
778
|
|
|
977
779
|
.uui-font-sans {
|