@epam/assets 5.0.0-alpha.0 → 5.0.0-alpha.1
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/less/control-mods.less +1 -1
- package/less/control-size.less +1 -1
- package/less/effects.less +1 -1
- package/less/globals.less +1 -1
- package/less/index.less +1 -1
- package/less/loveship-color-vars.less +1 -1
- package/less/loveship-colors.less +1 -1
- package/less/text-size.less +1 -1
- package/package.json +2 -2
- package/scss/contrast.scss +1 -1
- package/scss/control-layout.scss +1 -1
- package/scss/control-size.scss +1 -1
- package/scss/dnd.scss +1 -1
- package/scss/effects.scss +1 -1
- package/scss/loveship-colors.scss +19 -19
- package/scss/promo/font-faces.scss +1 -1
- package/styles/error-pages.less +1 -1
- package/styles/index.less +1 -1
- package/styles/menu.less +1 -2
- package/styles/scss/error-pages.scss +1 -1
- package/styles/scss/index.scss +1 -1
- package/styles/scss/menu.scss +1 -2
- package/theme/theme_loveship.scss +32 -15
- package/theme/theme_promo.scss +11 -8
- package/theme/theme_vanilla_thunder.scss +272 -244
package/less/control-mods.less
CHANGED
package/less/control-size.less
CHANGED
package/less/effects.less
CHANGED
package/less/globals.less
CHANGED
package/less/index.less
CHANGED
|
@@ -34,4 +34,4 @@
|
|
|
34
34
|
@night800: #303240;
|
|
35
35
|
@night900: #1D1E26;
|
|
36
36
|
|
|
37
|
-
@loveship-epam-colors: sky, grass, sun, fire, carbon, night, cobalt, lavanda, fuchsia, white, night50, night100, night200, night300, night400, night500, night600, night700, night900;
|
|
37
|
+
@loveship-epam-colors: sky, grass, sun, fire, carbon, night, cobalt, lavanda, fuchsia, white, night50, night100, night200, night300, night400, night500, night600, night700, night900;
|
package/less/text-size.less
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/assets",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.1",
|
|
4
4
|
"description": "EPAM Assets Library",
|
|
5
5
|
"author": "EPAM",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"type": "git",
|
|
16
16
|
"url": "https://github.com/epam/UUI"
|
|
17
17
|
},
|
|
18
|
-
"gitHead": "
|
|
18
|
+
"gitHead": "f2093a914a25d372647005b94d29e0c3f6413981",
|
|
19
19
|
"publishConfig": {
|
|
20
20
|
"directory": "build"
|
|
21
21
|
}
|
package/scss/contrast.scss
CHANGED
package/scss/control-layout.scss
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
$panel-border-radius: 6px;
|
|
2
|
-
$control-border-radius: 3px;
|
|
2
|
+
$control-border-radius: 3px;
|
package/scss/control-size.scss
CHANGED
package/scss/dnd.scss
CHANGED
package/scss/effects.scss
CHANGED
|
@@ -35,22 +35,22 @@ $night800: #303240;
|
|
|
35
35
|
$night900: #1D1E26;
|
|
36
36
|
|
|
37
37
|
$loveship-epam-colors: (
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
);
|
|
38
|
+
sky: $sky,
|
|
39
|
+
grass: $grass,
|
|
40
|
+
sun: $sun,
|
|
41
|
+
fire: $fire,
|
|
42
|
+
carbon: $carbon700,
|
|
43
|
+
cobalt: $cobalt,
|
|
44
|
+
lavanda: $lavanda,
|
|
45
|
+
fuchsia: $fuchsia,
|
|
46
|
+
white: $white,
|
|
47
|
+
night50: $night50,
|
|
48
|
+
night100: $night100,
|
|
49
|
+
night200: $night200,
|
|
50
|
+
night300: $night300,
|
|
51
|
+
night400: $night400,
|
|
52
|
+
night500: $night500,
|
|
53
|
+
night600: $night600,
|
|
54
|
+
night700: $night700,
|
|
55
|
+
night900: $night900
|
|
56
|
+
);
|
package/styles/error-pages.less
CHANGED
package/styles/index.less
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@import './menu.less';
|
|
2
|
-
@import './error-pages.less';
|
|
2
|
+
@import './error-pages.less';
|
package/styles/menu.less
CHANGED
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
align-items: center;
|
|
28
28
|
position: relative;
|
|
29
29
|
min-height: 60px;
|
|
30
|
-
height: 60px;
|
|
31
30
|
min-width: 360px;
|
|
32
31
|
user-select: none;
|
|
33
32
|
height: 60px;
|
|
@@ -85,7 +84,7 @@
|
|
|
85
84
|
|
|
86
85
|
&:hover,
|
|
87
86
|
&:active {
|
|
88
|
-
background-color: #
|
|
87
|
+
background-color: #30B6DD;
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
&-caption {
|
package/styles/scss/index.scss
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@import './menu';
|
|
2
|
-
@import './error-pages';
|
|
2
|
+
@import './error-pages';
|
package/styles/scss/menu.scss
CHANGED
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
align-items: center;
|
|
28
28
|
position: relative;
|
|
29
29
|
min-height: 60px;
|
|
30
|
-
height: 60px;
|
|
31
30
|
min-width: 360px;
|
|
32
31
|
user-select: none;
|
|
33
32
|
height: 60px;
|
|
@@ -85,7 +84,7 @@
|
|
|
85
84
|
|
|
86
85
|
&:hover,
|
|
87
86
|
&:active {
|
|
88
|
-
background-color: #
|
|
87
|
+
background-color: #30B6DD;
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
&-caption {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* Name convention */
|
|
2
2
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
3
|
-
|
|
3
|
+
// refactor indentions for this page using co-pilot
|
|
4
4
|
|
|
5
5
|
:global(.uui-theme-loveship) {
|
|
6
6
|
--font-regular: 'Sans Regular', Arial, sans-serif;
|
|
@@ -169,13 +169,11 @@
|
|
|
169
169
|
--uui-primary-dark: var(--sky-dark);
|
|
170
170
|
--uui-primary-darkest: var(--sky-darkest);
|
|
171
171
|
|
|
172
|
-
--uui-secondary: var(--
|
|
172
|
+
--uui-secondary: var(--night600);
|
|
173
173
|
--uui-secondary-light: var(--night300);
|
|
174
174
|
--uui-secondary-lightest: var(--night200);
|
|
175
|
-
--uui-secondary-dark: var(--
|
|
176
|
-
--uui-secondary-darkest: var(--
|
|
177
|
-
--uui-secondary-hover: var(--night600);
|
|
178
|
-
--uui-secondary-active: var(--night700);
|
|
175
|
+
--uui-secondary-dark: var(--night700);
|
|
176
|
+
--uui-secondary-darkest: var(--night800);
|
|
179
177
|
|
|
180
178
|
--uui-negative: var(--fire);
|
|
181
179
|
--uui-negative-light: var(--fire-light);
|
|
@@ -303,7 +301,7 @@
|
|
|
303
301
|
--uui-overlay: rgba(29, 30, 38, 0.8);
|
|
304
302
|
--uui-border-radius: 3px;
|
|
305
303
|
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
306
|
-
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0
|
|
304
|
+
--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);
|
|
307
305
|
--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);
|
|
308
306
|
|
|
309
307
|
/* core variables end */
|
|
@@ -366,7 +364,6 @@
|
|
|
366
364
|
--uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
|
|
367
365
|
--uui-calendar-text: var(--uui-control-text);
|
|
368
366
|
--uui-calendar-text-filtered: var(--uui-control-text-disabled);
|
|
369
|
-
--uui-calendar-bg-selected: var(--uui-secondary);
|
|
370
367
|
|
|
371
368
|
--uui-calendar-content-font: var(--font-regular);
|
|
372
369
|
--uui-calendar-weekday-font: var(--font-regular);
|
|
@@ -449,7 +446,7 @@
|
|
|
449
446
|
--uui-drop-marker-blocked: var(--uui-error);
|
|
450
447
|
|
|
451
448
|
/* Tooltip vars */
|
|
452
|
-
--uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgba(44, 47, 60, 0.
|
|
449
|
+
--uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgba(44, 47, 60, 0.3), 0 1px 4px 0 rgba(44, 47, 60, 0.5)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
|
|
453
450
|
--uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
|
|
454
451
|
--uui-tooltip-border-radius: var(--uui-border-radius);
|
|
455
452
|
|
|
@@ -748,17 +745,20 @@
|
|
|
748
745
|
|
|
749
746
|
/* ------------------------------------ */
|
|
750
747
|
|
|
751
|
-
:global(.tooltip-contrast)
|
|
752
|
-
|
|
748
|
+
:global(.tooltip-contrast),
|
|
749
|
+
:global(.tooltip-night800) {
|
|
750
|
+
--uui-tooltip-bg: var(--uui-surface-contrast);
|
|
753
751
|
--uui-tooltip-text: var(--uui-contrast);
|
|
754
752
|
}
|
|
755
753
|
|
|
756
|
-
:global(.tooltip-default)
|
|
754
|
+
:global(.tooltip-default),
|
|
755
|
+
:global(.tooltip-white) {
|
|
757
756
|
--uui-tooltip-bg: var(--uui-surface);
|
|
758
757
|
--uui-tooltip-text: var(--uui-text-primary);
|
|
759
758
|
}
|
|
760
759
|
|
|
761
|
-
:global(.tooltip-critical)
|
|
760
|
+
:global(.tooltip-critical),
|
|
761
|
+
:global(.tooltip-fire) {
|
|
762
762
|
--uui-tooltip-bg: var(--uui-error-dark);
|
|
763
763
|
--uui-tooltip-text: var(--uui-contrast);
|
|
764
764
|
}
|
|
@@ -814,7 +814,24 @@
|
|
|
814
814
|
--uui-btn-caption-disabled: var(--uui-button-caption-disabled);
|
|
815
815
|
}
|
|
816
816
|
|
|
817
|
-
:global(.button-night500)
|
|
817
|
+
:global(.button-night500) {
|
|
818
|
+
--uui-btn-bg: var(--night500);
|
|
819
|
+
--uui-btn-bg-hover: var(--night600);
|
|
820
|
+
--uui-btn-bg-active: var(--night700);
|
|
821
|
+
--uui-btn-bg-halftone: var(--uui-button-bg-halftone);
|
|
822
|
+
--uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
|
|
823
|
+
--uui-btn-bg-halftone-active: var(--uui-secondary-light);
|
|
824
|
+
--uui-btn-border: var(--night500);
|
|
825
|
+
--uui-btn-border-hover: var(--night600);
|
|
826
|
+
--uui-btn-border-active: var(--night700);
|
|
827
|
+
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
828
|
+
--uui-btn-border-disabled: var(--uui-disabled);
|
|
829
|
+
--uui-btn-caption: var(--uui-contrast);
|
|
830
|
+
--uui-btn-caption-halftone: var(--night600);
|
|
831
|
+
--uui-btn-caption-disabled: var(--uui-button-caption-disabled);
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
:global(.button-night600), :global(.button-secondary) {
|
|
818
835
|
--uui-btn-bg: var(--uui-secondary);
|
|
819
836
|
--uui-btn-bg-hover: var(--uui-secondary-dark);
|
|
820
837
|
--uui-btn-bg-active: var(--uui-secondary-darkest);
|
|
@@ -1342,4 +1359,4 @@
|
|
|
1342
1359
|
:global(.panel-night50) {
|
|
1343
1360
|
--uui-panel-bg: var(--night50);
|
|
1344
1361
|
}
|
|
1345
|
-
}
|
|
1362
|
+
}
|
package/theme/theme_promo.scss
CHANGED
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
--uui-overlay: rgba(29, 30, 38, 0.8);
|
|
238
238
|
--uui-border-radius: 0;
|
|
239
239
|
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
240
|
-
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0
|
|
240
|
+
--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);
|
|
241
241
|
--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);
|
|
242
242
|
|
|
243
243
|
/* core variables end */
|
|
@@ -383,7 +383,7 @@
|
|
|
383
383
|
--uui-drop-marker-blocked: var(--uui-error);
|
|
384
384
|
|
|
385
385
|
/* Tooltip vars */
|
|
386
|
-
--uui-tooltip-shadow: var(--uui-shadow-level-2, 0 3px 6px 0 rgba(29, 30, 38, 0.
|
|
386
|
+
--uui-tooltip-shadow: var(--uui-shadow-level-2, 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 0 3px 0 rgba(29, 30, 38, 0.15)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
|
|
387
387
|
--uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
|
|
388
388
|
--uui-tooltip-border-radius: var(--uui-border-radius);
|
|
389
389
|
|
|
@@ -441,7 +441,7 @@
|
|
|
441
441
|
/* Accordion */
|
|
442
442
|
--uui-accordion-bg: var(--uui-surface);
|
|
443
443
|
--uui-accordion-border: var(--uui-divider);
|
|
444
|
-
--uui-accordion-border-radius:
|
|
444
|
+
--uui-accordion-border-radius: 0;
|
|
445
445
|
--uui-accordion-text: var(--uui-text-primary);
|
|
446
446
|
--uui-accordion-text-disabled: var(--uui-text-disabled);
|
|
447
447
|
--uui-accordion-icon: var(--uui-icon);
|
|
@@ -681,17 +681,20 @@
|
|
|
681
681
|
|
|
682
682
|
/* ------------------------------------ */
|
|
683
683
|
|
|
684
|
-
:global(.tooltip-contrast)
|
|
685
|
-
|
|
684
|
+
:global(.tooltip-contrast),
|
|
685
|
+
:global(.tooltip-gray80) {
|
|
686
|
+
--uui-tooltip-bg: var(--uui-surface-contrast);
|
|
686
687
|
--uui-tooltip-text: var(--uui-contrast);
|
|
687
688
|
}
|
|
688
689
|
|
|
689
|
-
:global(.tooltip-default)
|
|
690
|
+
:global(.tooltip-default),
|
|
691
|
+
:global(.tooltip-white) {
|
|
690
692
|
--uui-tooltip-bg: var(--uui-surface);
|
|
691
693
|
--uui-tooltip-text: var(--uui-text-primary);
|
|
692
694
|
}
|
|
693
695
|
|
|
694
|
-
:global(.tooltip-critical)
|
|
696
|
+
:global(.tooltip-critical),
|
|
697
|
+
:global(.tooltip-red) {
|
|
695
698
|
--uui-tooltip-bg: var(--uui-error-dark);
|
|
696
699
|
--uui-tooltip-text: var(--uui-contrast);
|
|
697
700
|
}
|
|
@@ -1099,4 +1102,4 @@
|
|
|
1099
1102
|
:global(.panel-gray90) {
|
|
1100
1103
|
--uui-panel-bg: var(--uui-surface-inverted);
|
|
1101
1104
|
}
|
|
1102
|
-
}
|
|
1105
|
+
}
|
|
@@ -233,19 +233,24 @@
|
|
|
233
233
|
--uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
|
|
234
234
|
--uui-text-input-border-radius: var(--uui-border-radius);
|
|
235
235
|
|
|
236
|
-
--uui-text-input-font: var(--font-
|
|
236
|
+
--uui-text-input-font: var(--font-inter);
|
|
237
|
+
--uui-text-input-font-weight: 400;
|
|
237
238
|
|
|
238
239
|
/* Button vars */
|
|
239
240
|
--uui-btn-border-radius: 8px;
|
|
240
241
|
|
|
241
|
-
--uui-btn-font: var(--font-
|
|
242
|
+
--uui-btn-font: var(--font-museo-sans);
|
|
243
|
+
--uui-btn-font-weight: 500;
|
|
244
|
+
|
|
242
245
|
|
|
243
246
|
/* LinkButton vars */
|
|
244
247
|
--uui-link-button-text: var(--uui-primary);
|
|
245
248
|
--uui-link-button-text-hover: var(--uui-primary-dark);
|
|
246
249
|
--uui-link-button-text-active: var(--uui-primary-darkest);
|
|
247
250
|
--uui-link-button-text-disabled: var(--uui-button-caption-disabled);
|
|
248
|
-
|
|
251
|
+
|
|
252
|
+
--uui-link-button-font: var(--font-inter);
|
|
253
|
+
--uui-link-button-font-weight: 400;
|
|
249
254
|
|
|
250
255
|
/* DatePicker vars */
|
|
251
256
|
--uui-dtp-title-bg: var(--uui-control-bg);
|
|
@@ -255,8 +260,10 @@
|
|
|
255
260
|
--uui-dtp-next-prev-icon: var(--uui-icon);
|
|
256
261
|
--uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
|
|
257
262
|
|
|
258
|
-
--uui-dtp_header-font: var(--font-
|
|
259
|
-
--uui-
|
|
263
|
+
--uui-dtp_header-font: var(--font-inter);
|
|
264
|
+
--uui-dtp_header-font-weight: 400;
|
|
265
|
+
--uui-dtp_body-content-font: var(--font-inter);
|
|
266
|
+
--uui-dtp_body-content-font-weight: 400;
|
|
260
267
|
|
|
261
268
|
/* RangeDatePicker vars */
|
|
262
269
|
--uui-rdtp-bg: var(--uui-control-bg);
|
|
@@ -271,16 +278,21 @@
|
|
|
271
278
|
--uui-calendar-text-filtered: var(--uui-control-text-disabled);
|
|
272
279
|
--uui-calendar-bg-selected: var(--uui-secondary);
|
|
273
280
|
|
|
274
|
-
--uui-calendar-content-font: var(--font-
|
|
275
|
-
--uui-calendar-
|
|
276
|
-
--uui-calendar-
|
|
281
|
+
--uui-calendar-content-font: var(--font-inter);
|
|
282
|
+
--uui-calendar-content-font-weight: 400;
|
|
283
|
+
--uui-calendar-weekday-font: var(--font-inter);
|
|
284
|
+
--uui-calendar-weekday-font-weight: 400;
|
|
285
|
+
--uui-calendar-selected_day-font: var(--font-inter);
|
|
286
|
+
--uui-calendar-selected_day-font-weight: 600;
|
|
277
287
|
|
|
278
288
|
/* tab-button-vars */
|
|
279
289
|
--uui-tab-button-text: var(--uui-text-primary);
|
|
280
290
|
--uui-tab-button-text-hover: var(--uui-primary);
|
|
281
291
|
--uui-tab-button-text-active: var(--uui-primary);
|
|
282
292
|
--uui-tab-button-text-disabled: var(--uui-text-disabled);
|
|
283
|
-
|
|
293
|
+
|
|
294
|
+
--uui-tab-button-font: var(--font-inter);
|
|
295
|
+
--uui-tab-button-font-weight: 600;
|
|
284
296
|
|
|
285
297
|
/* radio-input-vars */
|
|
286
298
|
--uui-radio-input-bg: var(--uui-control-bg);
|
|
@@ -297,7 +309,8 @@
|
|
|
297
309
|
--uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
|
|
298
310
|
--uui-radio-input-error: var(--uui-negative);
|
|
299
311
|
|
|
300
|
-
--uui-radio-input-font: var(--font-
|
|
312
|
+
--uui-radio-input-font: var(--font-inter);
|
|
313
|
+
--uui-radio-input-font-weight: 400;
|
|
301
314
|
|
|
302
315
|
/* Checkbox vars */
|
|
303
316
|
--uui-checkbox-border: var(--uui-control-border);
|
|
@@ -316,7 +329,8 @@
|
|
|
316
329
|
--uui-checkbox-label-disabled: var(--uui-control-label-disabled);
|
|
317
330
|
--uui-checkbox-border-radius: var(--uui-border-radius);
|
|
318
331
|
|
|
319
|
-
--uui-checkbox-font: var(--font-
|
|
332
|
+
--uui-checkbox-font: var(--font-inter);
|
|
333
|
+
--uui-checkbox-font-weight: 400;
|
|
320
334
|
|
|
321
335
|
/* Tag vars */
|
|
322
336
|
--uui-tag-caption: var(--uui-text-primary);
|
|
@@ -327,8 +341,10 @@
|
|
|
327
341
|
--uui-tag-label: var(--uui-text-secondary);
|
|
328
342
|
--uui-tag-border-radius: 30px;
|
|
329
343
|
|
|
330
|
-
--uui-tag-font: var(--font-
|
|
331
|
-
--uui-tag-
|
|
344
|
+
--uui-tag-font: var(--font-inter);
|
|
345
|
+
--uui-tag-font-weight: 400;
|
|
346
|
+
--uui-tag-count-font: var(--font-inter);
|
|
347
|
+
--uui-tag-count-font-weight: 500;
|
|
332
348
|
|
|
333
349
|
/* TextArea vars */
|
|
334
350
|
--uui-text-area-bg: var(--uui-control-bg);
|
|
@@ -344,8 +360,10 @@
|
|
|
344
360
|
--uui-text-area-icon: var(--uui-icon);
|
|
345
361
|
--uui-text-area-border-radius: var(--uui-border-radius);
|
|
346
362
|
|
|
347
|
-
--uui-text-area-font: var(--font-
|
|
348
|
-
--uui-text-area-
|
|
363
|
+
--uui-text-area-font: var(--font-inter);
|
|
364
|
+
--uui-text-area-font-weight: 400;
|
|
365
|
+
--uui-text-area-counter-font: var(--font-inter);
|
|
366
|
+
--uui-text-area-counter-font-weight: 400;
|
|
349
367
|
|
|
350
368
|
/* DropMarker vars */
|
|
351
369
|
--uui-drop-marker: var(--uui-primary);
|
|
@@ -356,7 +374,8 @@
|
|
|
356
374
|
--uui-tooltip-arrow-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
|
|
357
375
|
--uui-tooltip-border-radius: 8px;
|
|
358
376
|
|
|
359
|
-
--uui-tooltip-font: var(--font-
|
|
377
|
+
--uui-tooltip-font: var(--font-inter);
|
|
378
|
+
--uui-tooltip-font-weight: 400;
|
|
360
379
|
|
|
361
380
|
/* PickerInput vars */
|
|
362
381
|
--uui-picker_input-bg: var(--uui-surface);
|
|
@@ -378,7 +397,8 @@
|
|
|
378
397
|
--uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
|
|
379
398
|
--uui-picker-toggler-border-radius: var(--uui-border-radius);
|
|
380
399
|
|
|
381
|
-
--uui-picker-toggler-font: var(--font-
|
|
400
|
+
--uui-picker-toggler-font: var(--font-inter);
|
|
401
|
+
--uui-picker-toggler-font-weight: 400;
|
|
382
402
|
|
|
383
403
|
/* Panel */
|
|
384
404
|
--uui-panel-border-radius: 8px;
|
|
@@ -403,9 +423,12 @@
|
|
|
403
423
|
--uui-labeled-input-optional-text: var(--uui-text-secondary);
|
|
404
424
|
--uui-labeled-input-asterisk: var(--uui-error);
|
|
405
425
|
|
|
406
|
-
--uui-labeled-input-font: var(--font-
|
|
407
|
-
--uui-labeled-input-
|
|
408
|
-
--uui-labeled-input-
|
|
426
|
+
--uui-labeled-input-font: var(--font-inter);
|
|
427
|
+
--uui-labeled-input-font-weight: 500;
|
|
428
|
+
--uui-labeled-input-optional-font: var(--font-inter);
|
|
429
|
+
--uui-labeled-input-optional-font-weight: 300;
|
|
430
|
+
--uui-labeled-input-invalid-msg-font: var(--font-inter);
|
|
431
|
+
--uui-labeled-input-invalid-msg-font-weight: 400;
|
|
409
432
|
|
|
410
433
|
/* Accordion */
|
|
411
434
|
--uui-accordion-bg: var(--uui-surface);
|
|
@@ -419,8 +442,10 @@
|
|
|
419
442
|
--uui-accordion-shadow: var(--uui-shadow-level-1);
|
|
420
443
|
--uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
|
|
421
444
|
|
|
422
|
-
--uui-accordion-toggler-font: var(--font-
|
|
423
|
-
--uui-accordion-
|
|
445
|
+
--uui-accordion-toggler-font: var(--font-inter);
|
|
446
|
+
--uui-accordion-toggler-font-weight: 500;
|
|
447
|
+
--uui-accordion-body-font: var(--font-inter);
|
|
448
|
+
--uui-accordion-body-font-weight: 400;
|
|
424
449
|
|
|
425
450
|
/* Switch */
|
|
426
451
|
--uui-switch-bg: var(--uui-control_switch-bg);
|
|
@@ -446,7 +471,8 @@
|
|
|
446
471
|
--uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
|
|
447
472
|
--uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
|
|
448
473
|
|
|
449
|
-
--uui-switch-font: var(--font-
|
|
474
|
+
--uui-switch-font: var(--font-inter);
|
|
475
|
+
--uui-switch-font-weight: 400;
|
|
450
476
|
|
|
451
477
|
/* DropdownContainer */
|
|
452
478
|
--uui-dropdown-container-border-radius: 6px;
|
|
@@ -462,14 +488,16 @@
|
|
|
462
488
|
--uui-dropdown-menu-item-active: var(--uui-surface-hover);
|
|
463
489
|
--uui-dropdown-menu-item-text: var(--uui-text-primary);
|
|
464
490
|
|
|
465
|
-
--uui-dropdown-menu-body-font: var(--font-
|
|
466
|
-
--uui-dropdown-menu-
|
|
491
|
+
--uui-dropdown-menu-body-font: var(--font-inter);
|
|
492
|
+
--uui-dropdown-menu-body-font-weight: 400;
|
|
493
|
+
--uui-dropdown-menu-item-font: var(--font-inter);
|
|
494
|
+
--uui-dropdown-menu-item-font-weight: 400;
|
|
467
495
|
|
|
468
496
|
/* MainMenu */
|
|
469
497
|
--uui-main_menu-text: var(--uui-text-primary);
|
|
470
|
-
--uui-main_menu-bg:
|
|
471
|
-
--uui-main_menu-hover:
|
|
472
|
-
--uui-main_menu-active:
|
|
498
|
+
--uui-main_menu-bg: #F0F7FCD9;
|
|
499
|
+
--uui-main_menu-hover: #FFF;
|
|
500
|
+
--uui-main_menu-active: #FFF;
|
|
473
501
|
--uui-main_menu-border-active: var(--uui-primary);
|
|
474
502
|
|
|
475
503
|
--uui-main_menu-dropdown-bg: var(--uui-surface);
|
|
@@ -487,8 +515,10 @@
|
|
|
487
515
|
--uui-main_menu-icon-hover: var(--uui-text-primary);
|
|
488
516
|
--uui-main_menu-icon-active: var(--uui-text-primary);
|
|
489
517
|
|
|
490
|
-
--uui-main_menu-font: var(--font-
|
|
491
|
-
--uui-main_menu-
|
|
518
|
+
--uui-main_menu-font: var(--font-museo-sans);
|
|
519
|
+
--uui-main_menu-font-weight: 500;
|
|
520
|
+
--uui-main_menu-search-font: var(--font-inter);
|
|
521
|
+
--uui-main_menu-search-font-weight: 400;
|
|
492
522
|
|
|
493
523
|
/* BurgerMenu */
|
|
494
524
|
--uui-burger_menu-bg: var(--uui-surface);
|
|
@@ -504,7 +534,8 @@
|
|
|
504
534
|
--uui-burger_group-bg: var(--uui-surface-contrast);
|
|
505
535
|
--uui-burger_group-line: var(--uui-divider);
|
|
506
536
|
|
|
507
|
-
--uui-burger_group-font: var(--font-
|
|
537
|
+
--uui-burger_group-font: var(--font-inter);
|
|
538
|
+
--uui-burger_group-font-weight: 400;
|
|
508
539
|
|
|
509
540
|
/* BurgerButton */
|
|
510
541
|
--uui-burger_btn_caption: var(--uui-text-contrast);
|
|
@@ -512,7 +543,8 @@
|
|
|
512
543
|
--uui-burger_btn_caption-active: var(--uui-primary);
|
|
513
544
|
--uui-burger_btn-border: var(--uui-divider-light);
|
|
514
545
|
|
|
515
|
-
--uui-burger_btn-font: var(--font-
|
|
546
|
+
--uui-burger_btn-font: var(--font-inter);
|
|
547
|
+
--uui-burger_btn-font-weight: 400;
|
|
516
548
|
|
|
517
549
|
/* BurgerSearch */
|
|
518
550
|
--uui-burger_search: var(--uui-text-contrast);
|
|
@@ -520,7 +552,8 @@
|
|
|
520
552
|
--uui-burger_search-bg: var(--uui-surface-contrast);
|
|
521
553
|
--uui-burger_search-placeholder: var(--uui-text-disabled);
|
|
522
554
|
|
|
523
|
-
--uui-burger_search-font: var(--font-
|
|
555
|
+
--uui-burger_search-font: var(--font-inter);
|
|
556
|
+
--uui-burger_search-font-weight: 400;
|
|
524
557
|
|
|
525
558
|
/* NumericInput */
|
|
526
559
|
--uui-numeric-input-bg: var(--uui-control-bg);
|
|
@@ -585,8 +618,10 @@
|
|
|
585
618
|
--uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
|
|
586
619
|
--uui-filters-toggler-shadow: var(--uui-shadow-level-1);
|
|
587
620
|
|
|
588
|
-
--uui-filters-toggler-font: var(--font-
|
|
589
|
-
--uui-filters-
|
|
621
|
+
--uui-filters-toggler-font: var(--font-inter);
|
|
622
|
+
--uui-filters-toggler-font-weight: 400;
|
|
623
|
+
--uui-filters-panel-header-font: var(--font-inter);
|
|
624
|
+
--uui-filters-panel-header-font-weight: 400;
|
|
590
625
|
|
|
591
626
|
/* NotificationCard */
|
|
592
627
|
--uui-notification-card-border-radius: 8px;
|
|
@@ -633,354 +668,347 @@
|
|
|
633
668
|
--uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
|
|
634
669
|
--uui-dt_header-drop_marker: var(--uui-primary);
|
|
635
670
|
|
|
636
|
-
--uui-dt-header-cell-font: var(--font-
|
|
671
|
+
--uui-dt-header-cell-font: var(--font-inter);
|
|
672
|
+
--uui-dt-header-cell-font-weight: 500;
|
|
637
673
|
|
|
638
674
|
/* AvatarStack */
|
|
639
675
|
|
|
640
|
-
--uui-avatar-stack-font: var(--font-
|
|
676
|
+
--uui-avatar-stack-font: var(--font-inter);
|
|
677
|
+
--uui-avatar-stack-font-weight: 400;
|
|
641
678
|
|
|
642
679
|
/* Badge */
|
|
643
680
|
|
|
644
|
-
--uui-badge-font: var(--font-
|
|
645
|
-
--uui-badge-
|
|
681
|
+
--uui-badge-font: var(--font-museo-sans);
|
|
682
|
+
--uui-badge-font-weight: 700;
|
|
683
|
+
--uui-badge-count-font: var(--font-museo-sans);
|
|
684
|
+
--uui-badge-count-font-weight: 700;
|
|
646
685
|
|
|
647
686
|
/* Pagination */
|
|
648
687
|
|
|
649
|
-
--uui-pagination-font: var(--font-
|
|
688
|
+
--uui-pagination-font: var(--font-inter);
|
|
689
|
+
--uui-pagination-font-weight: 400;
|
|
650
690
|
|
|
651
691
|
|
|
652
692
|
/* ------------------------------------ */
|
|
653
693
|
|
|
654
694
|
:global(.tooltip-contrast) {
|
|
655
|
-
|
|
656
|
-
|
|
695
|
+
--uui-tooltip-bg: var(--uui-surface-inverted);
|
|
696
|
+
--uui-tooltip-text: var(--uui-contrast);
|
|
657
697
|
}
|
|
658
698
|
|
|
659
699
|
:global(.tooltip-default) {
|
|
660
|
-
|
|
661
|
-
|
|
700
|
+
--uui-tooltip-bg: var(--uui-surface);
|
|
701
|
+
--uui-tooltip-text: var(--uui-text-primary);
|
|
662
702
|
}
|
|
663
703
|
|
|
664
704
|
:global(.tooltip-critical) {
|
|
665
|
-
|
|
666
|
-
|
|
705
|
+
--uui-tooltip-bg: var(--uui-error-dark);
|
|
706
|
+
--uui-tooltip-text: var(--uui-contrast);
|
|
667
707
|
}
|
|
668
708
|
|
|
669
709
|
:global(.button-primary) {
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
710
|
+
--uui-btn-bg: var(--uui-primary);
|
|
711
|
+
--uui-btn-bg-hover: var(--uui-primary-dark);
|
|
712
|
+
--uui-btn-bg-active: var(--uui-primary-darkest);
|
|
713
|
+
--uui-btn-bg-halftone: var(--uui-button-bg-halftone);
|
|
714
|
+
--uui-btn-bg-halftone-hover: var(--blue-0);
|
|
715
|
+
--uui-btn-bg-halftone-active: var(--uui-primary-lightest);
|
|
716
|
+
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
717
|
+
--uui-btn-border: var(--uui-primary);
|
|
718
|
+
--uui-btn-border-hover: var(--uui-primary-dark);
|
|
719
|
+
--uui-btn-border-active: var(--uui-primary-darkest);
|
|
720
|
+
--uui-btn-border-disabled: var(--uui-disabled);
|
|
721
|
+
--uui-btn-caption: var(--uui-contrast);
|
|
722
|
+
--uui-btn-caption-halftone: var(--uui-text-primary);
|
|
723
|
+
--uui-btn-caption-disabled: var(--uui-button-caption-disabled);
|
|
684
724
|
}
|
|
685
725
|
|
|
686
726
|
:global(.button-accent) {
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
727
|
+
--uui-btn-bg: var(--uui-accent);
|
|
728
|
+
--uui-btn-bg-hover: var(--uui-accent-dark);
|
|
729
|
+
--uui-btn-bg-active: var(--uui-accent-darkest);
|
|
730
|
+
--uui-btn-bg-halftone: var(--uui-button-bg-halftone);
|
|
731
|
+
--uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
|
|
732
|
+
--uui-btn-bg-halftone-active: var(--uui-accent-light);
|
|
733
|
+
--uui-btn-border: var(--uui-accent);
|
|
734
|
+
--uui-btn-border-hover: var(--uui-accent-dark);
|
|
735
|
+
--uui-btn-border-active: var(--uui-accent-darkest);
|
|
736
|
+
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
737
|
+
--uui-btn-border-disabled: var(--uui-disabled);
|
|
738
|
+
--uui-btn-caption: var(--uui-contrast);
|
|
739
|
+
--uui-btn-caption-halftone: var(--uui-text-primary);
|
|
740
|
+
--uui-btn-caption-disabled: var(--uui-button-caption-disabled);
|
|
701
741
|
}
|
|
702
742
|
|
|
703
743
|
:global(.button-negative) {
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
744
|
+
--uui-btn-bg: var(--uui-negative);
|
|
745
|
+
--uui-btn-bg-hover: var(--uui-negative-dark);
|
|
746
|
+
--uui-btn-bg-active: var(--uui-negative-darkest);
|
|
747
|
+
--uui-btn-bg-halftone: var(--uui-button-bg-halftone);
|
|
748
|
+
--uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
|
|
749
|
+
--uui-btn-bg-halftone-active: var(--uui-negative-light);
|
|
750
|
+
--uui-btn-border: var(--uui-negative);
|
|
751
|
+
--uui-btn-border-hover: var(--uui-negative-dark);
|
|
752
|
+
--uui-btn-border-active: var(--uui-negative-darkest);
|
|
753
|
+
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
754
|
+
--uui-btn-border-disabled: var(--uui-disabled);
|
|
755
|
+
--uui-btn-caption: var(--uui-contrast);
|
|
756
|
+
--uui-btn-caption-halftone: var(--uui-text-primary);
|
|
757
|
+
--uui-btn-caption-disabled: var(--uui-button-caption-disabled);
|
|
718
758
|
}
|
|
719
759
|
|
|
720
760
|
:global(.button-secondary) {
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
761
|
+
--uui-btn-bg: var(--uui-secondary);
|
|
762
|
+
--uui-btn-bg-hover: var(--uui-secondary-dark);
|
|
763
|
+
--uui-btn-bg-active: var(--uui-secondary-darkest);
|
|
764
|
+
--uui-btn-bg-halftone: var(--uui-button-bg-halftone);
|
|
765
|
+
--uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
|
|
766
|
+
--uui-btn-bg-halftone-active: var(--uui-secondary-light);
|
|
767
|
+
--uui-btn-border: var(--uui-secondary);
|
|
768
|
+
--uui-btn-border-hover: var(--uui-secondary-dark);
|
|
769
|
+
--uui-btn-border-active: var(--uui-secondary-darkest);
|
|
770
|
+
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
771
|
+
--uui-btn-border-disabled: var(--uui-disabled);
|
|
772
|
+
--uui-btn-caption: var(--uui-contrast);
|
|
773
|
+
--uui-btn-caption-halftone: var(--uui-text-primary);
|
|
774
|
+
--uui-btn-caption-disabled: var(--uui-button-caption-disabled);
|
|
735
775
|
}
|
|
736
776
|
|
|
737
777
|
:global(.icon-button-info) {
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
778
|
+
--uui-icon-btn: var(--uui-info);
|
|
779
|
+
--uui-icon-btn-hover: var(--uui-info-dark);
|
|
780
|
+
--uui-icon-btn-active: var(--uui-info-darkest);
|
|
781
|
+
--uui-icon-btn-disabled: var(--uui-icon-disabled);
|
|
742
782
|
}
|
|
743
783
|
|
|
744
784
|
:global(.icon-button-success) {
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
785
|
+
--uui-icon-btn: var(--uui-success);
|
|
786
|
+
--uui-icon-btn-hover: var(--uui-success-dark);
|
|
787
|
+
--uui-icon-btn-active: var(--uui-success-darkest);
|
|
788
|
+
--uui-icon-btn-disabled: var(--uui-icon-disabled);
|
|
749
789
|
}
|
|
750
790
|
|
|
751
791
|
:global(.icon-button-warning) {
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
792
|
+
--uui-icon-btn: var(--uui-warning);
|
|
793
|
+
--uui-icon-btn-hover: var(--uui-warning-dark);
|
|
794
|
+
--uui-icon-btn-active: var(--uui-warning-darkest);
|
|
795
|
+
--uui-icon-btn-disabled: var(--uui-icon-disabled);
|
|
756
796
|
}
|
|
757
797
|
|
|
758
798
|
:global(.icon-button-error) {
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
799
|
+
--uui-icon-btn: var(--uui-error);
|
|
800
|
+
--uui-icon-btn-hover: var(--uui-error-dark);
|
|
801
|
+
--uui-icon-btn-active: var(--uui-error-darkest);
|
|
802
|
+
--uui-icon-btn-disabled: var(--uui-icon-disabled);
|
|
763
803
|
}
|
|
764
804
|
|
|
765
805
|
:global(.icon-button-secondary) {
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
806
|
+
--uui-icon-btn: var(--gray50);
|
|
807
|
+
--uui-icon-btn-hover: var(--uui-color-night500-800);
|
|
808
|
+
--uui-icon-btn-active: var(--uui-color-night500-900);
|
|
809
|
+
--uui-icon-btn-disabled: var(--uui-icon-disabled);
|
|
770
810
|
}
|
|
771
811
|
|
|
772
812
|
:global(.icon-button-default) {
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
813
|
+
--uui-icon-btn: var(--gray60);
|
|
814
|
+
--uui-icon-btn-hover: var(--uui-color-night600-800);
|
|
815
|
+
--uui-icon-btn-active: var(--uui-color-night600-900);
|
|
816
|
+
--uui-icon-btn-disabled: var(--uui-icon-disabled);
|
|
777
817
|
}
|
|
778
818
|
|
|
779
819
|
:global(.notification-card-warning) {
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
820
|
+
--uui-notification-card-fill: var(--uui-warning);
|
|
821
|
+
--uui-notification-card-border: var(--uui-warning);
|
|
822
|
+
--uui-notification-card-bg: var(--uui-surface);
|
|
823
|
+
--uui-notification-card-text: var(--uui-text-primary);
|
|
784
824
|
}
|
|
785
825
|
|
|
786
826
|
:global(.notification-card-success) {
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
827
|
+
--uui-notification-card-fill: var(--uui-success);
|
|
828
|
+
--uui-notification-card-border: var(--uui-success);
|
|
829
|
+
--uui-notification-card-bg: var(--uui-surface);
|
|
830
|
+
--uui-notification-card-text: var(--uui-text-primary);
|
|
791
831
|
}
|
|
792
832
|
|
|
793
833
|
:global(.notification-card-info) {
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
834
|
+
--uui-notification-card-fill: var(--uui-info);
|
|
835
|
+
--uui-notification-card-border: var(--uui-info);
|
|
836
|
+
--uui-notification-card-bg: var(--uui-surface);
|
|
837
|
+
--uui-notification-card-text: var(--uui-text-primary);
|
|
798
838
|
}
|
|
799
839
|
|
|
800
840
|
:global(.notification-card-error) {
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
841
|
+
--uui-notification-card-fill: var(--uui-error);
|
|
842
|
+
--uui-notification-card-border: var(--uui-error);
|
|
843
|
+
--uui-notification-card-bg: var(--uui-surface);
|
|
844
|
+
--uui-notification-card-text: var(--uui-text-primary);
|
|
805
845
|
}
|
|
806
846
|
|
|
807
847
|
:global(.alert-error) {
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
848
|
+
--uui-alert-text: var(--uui-text-primary);
|
|
849
|
+
--uui-alert-bg: #F5E5E9;
|
|
850
|
+
--uui-alert-border: var(--uui-error);
|
|
851
|
+
--uui-alert-icon: var(--uui-error);
|
|
812
852
|
}
|
|
813
853
|
|
|
814
854
|
:global(.alert-warning) {
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
855
|
+
--uui-alert-text: var(--uui-text-primary);
|
|
856
|
+
--uui-alert-bg: #F6EEE1;
|
|
857
|
+
--uui-alert-border: var(--uui-warning);
|
|
858
|
+
--uui-alert-icon: var(--uui-warning);
|
|
819
859
|
}
|
|
820
860
|
|
|
821
861
|
:global(.alert-success) {
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
862
|
+
--uui-alert-text: var(--uui-text-primary);
|
|
863
|
+
--uui-alert-bg: #E7EEE1;
|
|
864
|
+
--uui-alert-border: var(--uui-success);
|
|
865
|
+
--uui-alert-icon: var(--uui-success);
|
|
826
866
|
}
|
|
827
867
|
|
|
828
868
|
:global(.alert-info) {
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
869
|
+
--uui-alert-text: var(--uui-text-primary);
|
|
870
|
+
--uui-alert-bg: #DCEDF6;
|
|
871
|
+
--uui-alert-border: var(--uui-info);
|
|
872
|
+
--uui-alert-icon: var(--uui-info);
|
|
833
873
|
}
|
|
834
874
|
|
|
835
875
|
:global(.badge-default) {
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
876
|
+
--uui-badge-bg: var(--night300);
|
|
877
|
+
--uui-badge-bg-hover: var(--night400);
|
|
878
|
+
--uui-badge-caption-solid: var(--uui-text-primary);
|
|
879
|
+
--uui-badge-count-bg: var(--white);
|
|
880
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
881
|
+
--uui-badge-bg-halftone: var(--night200);
|
|
882
|
+
--uui-badge-bg-halftone-hover: var(--night300);
|
|
883
|
+
--uui-badge-border-halftone: var(--night400);
|
|
884
|
+
--uui-badge-border-halftone-hover: var(--night500);
|
|
885
|
+
--uui-badge-caption-halftone: var(--uui-text-primary);
|
|
846
886
|
}
|
|
847
887
|
|
|
848
888
|
:global(.badge-info) {
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
889
|
+
--uui-badge-bg: var(--uui-info);
|
|
890
|
+
--uui-badge-bg-hover: var(--uui-info-dark);
|
|
891
|
+
--uui-badge-caption-solid: var(--white);
|
|
892
|
+
--uui-badge-count-bg: var(--white);
|
|
893
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
894
|
+
--uui-badge-bg-halftone: var(--uui-info-lightest);
|
|
895
|
+
--uui-badge-bg-halftone-hover: var(--uui-info-light);
|
|
896
|
+
--uui-badge-border-halftone: var(--uui-info-light);
|
|
897
|
+
--uui-badge-border-halftone-hover: var(--uui-info);
|
|
898
|
+
--uui-badge-caption-halftone: var(--uui-info-darkest);
|
|
859
899
|
}
|
|
860
900
|
|
|
861
901
|
:global(.badge-success) {
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
902
|
+
--uui-badge-bg: var(--uui-success);
|
|
903
|
+
--uui-badge-bg-hover: var(--uui-success-dark);
|
|
904
|
+
--uui-badge-caption-solid: var(--white);
|
|
905
|
+
--uui-badge-count-bg: var(--white);
|
|
906
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
907
|
+
--uui-badge-bg-halftone: var(--uui-success-lightest);
|
|
908
|
+
--uui-badge-bg-halftone-hover: var(--uui-success-light);
|
|
909
|
+
--uui-badge-border-halftone: var(--uui-success-light);
|
|
910
|
+
--uui-badge-border-halftone-hover: var(--uui-success);
|
|
911
|
+
--uui-badge-caption-halftone: var(--uui-success-darkest);
|
|
872
912
|
}
|
|
873
913
|
|
|
874
914
|
:global(.badge-warning) {
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
915
|
+
--uui-badge-bg: var(--uui-warning);
|
|
916
|
+
--uui-badge-bg-hover: var(--uui-warning-dark);
|
|
917
|
+
--uui-badge-caption-solid: var(--uui-text-primary);
|
|
918
|
+
--uui-badge-count-bg: var(--white);
|
|
919
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
920
|
+
--uui-badge-bg-halftone: var(--uui-warning-lightest);
|
|
921
|
+
--uui-badge-bg-halftone-hover: var(--uui-warning-light);
|
|
922
|
+
--uui-badge-border-halftone: var(--uui-warning-light);
|
|
923
|
+
--uui-badge-border-halftone-hover: var(--uui-warning);
|
|
924
|
+
--uui-badge-caption-halftone: var(--uui-warning-darkest);
|
|
885
925
|
}
|
|
886
926
|
|
|
887
927
|
:global(.badge-error) {
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
928
|
+
--uui-badge-bg: var(--uui-error);
|
|
929
|
+
--uui-badge-bg-hover: var(--uui-error-dark);
|
|
930
|
+
--uui-badge-caption-solid: var(--white);
|
|
931
|
+
--uui-badge-count-bg: var(--white);
|
|
932
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
933
|
+
--uui-badge-bg-halftone: var(--uui-error-lightest);
|
|
934
|
+
--uui-badge-bg-halftone-hover: var(--uui-error-light);
|
|
935
|
+
--uui-badge-border-halftone: var(--uui-error-light);
|
|
936
|
+
--uui-badge-border-halftone-hover: var(--uui-error);
|
|
937
|
+
--uui-badge-caption-halftone: var(--uui-error-darkest);
|
|
898
938
|
}
|
|
899
939
|
|
|
900
940
|
:global(.informer-default) {
|
|
901
|
-
|
|
902
|
-
|
|
941
|
+
--uui-informer-bg: var(--uui-secondary-light);
|
|
942
|
+
--uui-informer-caption: var(--uui-text-secondary);
|
|
903
943
|
}
|
|
904
944
|
|
|
905
945
|
:global(.informer-focus) {
|
|
906
|
-
|
|
907
|
-
|
|
946
|
+
--uui-informer-bg: var(--uui-negative);
|
|
947
|
+
--uui-informer-caption: var(--uui-caption);
|
|
908
948
|
}
|
|
909
949
|
|
|
910
950
|
:global(.informer-white) {
|
|
911
|
-
|
|
912
|
-
|
|
951
|
+
--uui-informer-bg: var(--uui-surface);
|
|
952
|
+
--uui-informer-caption: var(--uui-text-secondary);
|
|
913
953
|
}
|
|
914
954
|
|
|
915
955
|
:global(.uui-text-brand) {
|
|
916
|
-
|
|
956
|
+
--uui-text: var(--uui-text-brand);
|
|
917
957
|
}
|
|
918
958
|
|
|
919
959
|
:global(.uui-text-primary) {
|
|
920
|
-
|
|
960
|
+
--uui-text: var(--uui-text-primary);
|
|
921
961
|
}
|
|
922
962
|
|
|
923
963
|
:global(.uui-text-secondary) {
|
|
924
|
-
|
|
964
|
+
--uui-text: var(--uui-text-secondary);
|
|
925
965
|
}
|
|
926
966
|
|
|
927
967
|
:global(.uui-text-disabled) {
|
|
928
|
-
|
|
968
|
+
--uui-text: var(--uui-text-disabled);
|
|
929
969
|
}
|
|
930
970
|
|
|
931
971
|
:global(.uui-text-contrast) {
|
|
932
|
-
|
|
933
|
-
}
|
|
934
|
-
|
|
935
|
-
:global(.uui-font-regular) {
|
|
936
|
-
--uui-font: var(--font-regular);
|
|
937
|
-
}
|
|
938
|
-
|
|
939
|
-
:global(.uui-font-semibold) {
|
|
940
|
-
--uui-font: var(--font-semibold);
|
|
941
|
-
}
|
|
942
|
-
|
|
943
|
-
:global(.uui-font-italic) {
|
|
944
|
-
--uui-font: var(--font-italic);
|
|
972
|
+
--uui-text: var(--uui-text-contrast);
|
|
945
973
|
}
|
|
946
974
|
|
|
947
|
-
|
|
948
|
-
--uui-font: var(--font-
|
|
975
|
+
.uui-font-inter {
|
|
976
|
+
--uui-font: var(--font-inter);
|
|
949
977
|
}
|
|
950
978
|
|
|
951
|
-
|
|
952
|
-
--uui-font: var(--font-
|
|
979
|
+
.uui-font-museo-sans {
|
|
980
|
+
--uui-font: var(--font-museo-sans);
|
|
953
981
|
}
|
|
954
982
|
|
|
955
983
|
:global(.dropdown-container-white) {
|
|
956
|
-
|
|
984
|
+
--uui-dropdown-container-bg: var(--white);
|
|
957
985
|
}
|
|
958
986
|
|
|
959
987
|
:global(.dropdown-container-night700) {
|
|
960
|
-
|
|
988
|
+
--uui-dropdown-container-bg: var(--night700);
|
|
961
989
|
}
|
|
962
990
|
|
|
963
991
|
:global(.flex-row-background-white) {
|
|
964
|
-
|
|
992
|
+
--uui-flex-row-bg: var(--uui-surface);
|
|
965
993
|
}
|
|
966
994
|
|
|
967
995
|
:global(.flex-row-background-night50) {
|
|
968
|
-
|
|
996
|
+
--uui-flex-row-bg: var(--night50);
|
|
969
997
|
}
|
|
970
998
|
|
|
971
999
|
:global(.flex-row-background-night100) {
|
|
972
|
-
|
|
1000
|
+
--uui-flex-row-bg: var(--night100);
|
|
973
1001
|
}
|
|
974
1002
|
|
|
975
1003
|
:global(.flex-row-background-none) {
|
|
976
|
-
|
|
1004
|
+
--uui-flex-row-bg: transparent;
|
|
977
1005
|
}
|
|
978
1006
|
|
|
979
1007
|
:global(.panel-white) {
|
|
980
|
-
|
|
1008
|
+
--uui-panel-bg: var(--uui-surface);
|
|
981
1009
|
}
|
|
982
1010
|
|
|
983
1011
|
:global(.panel-night50) {
|
|
984
|
-
|
|
1012
|
+
--uui-panel-bg: var(--night50);
|
|
985
1013
|
}
|
|
986
|
-
}
|
|
1014
|
+
}
|