@epam/assets 5.0.0-alpha.0 → 5.0.0-alpha.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/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 +35 -18
- package/theme/theme_promo.scss +16 -13
- package/theme/theme_vanilla_thunder.scss +275 -242
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.2",
|
|
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": "f0d58123e11e321e4417e3bba7dc6c5c9026998c",
|
|
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);
|
|
@@ -1299,16 +1316,16 @@
|
|
|
1299
1316
|
|
|
1300
1317
|
:global(.uui-font-regular),
|
|
1301
1318
|
:global(.uui-font-sans) {
|
|
1302
|
-
--uui-font: var(--font-regular);
|
|
1319
|
+
--uui-text-font: var(--font-regular);
|
|
1303
1320
|
}
|
|
1304
1321
|
|
|
1305
1322
|
:global(.uui-font-semibold),
|
|
1306
1323
|
:global(.uui-font-sans-semibold) {
|
|
1307
|
-
--uui-font: var(--font-semibold);
|
|
1324
|
+
--uui-text-font: var(--font-semibold);
|
|
1308
1325
|
}
|
|
1309
1326
|
|
|
1310
1327
|
:global(.uui-font-sans-light) {
|
|
1311
|
-
--uui-font: var(--font-light);
|
|
1328
|
+
--uui-text-font: var(--font-light);
|
|
1312
1329
|
}
|
|
1313
1330
|
|
|
1314
1331
|
:global(.dropdown-container-white) {
|
|
@@ -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
|
}
|
|
@@ -1049,27 +1052,27 @@
|
|
|
1049
1052
|
|
|
1050
1053
|
:global(.uui-font-regular),
|
|
1051
1054
|
:global(.uui-font-sans) {
|
|
1052
|
-
--uui-font: var(--font-regular);
|
|
1055
|
+
--uui-text-font: var(--font-regular);
|
|
1053
1056
|
}
|
|
1054
1057
|
|
|
1055
1058
|
:global(.uui-font-semibold),
|
|
1056
1059
|
:global(.uui-font-sans-semibold) {
|
|
1057
|
-
--uui-font: var(--font-semibold);
|
|
1060
|
+
--uui-text-font: var(--font-semibold);
|
|
1058
1061
|
}
|
|
1059
1062
|
|
|
1060
1063
|
:global(.uui-font-italic),
|
|
1061
1064
|
:global(.uui-font-sans-italic) {
|
|
1062
|
-
--uui-font: var(--font-italic);
|
|
1065
|
+
--uui-text-font: var(--font-italic);
|
|
1063
1066
|
}
|
|
1064
1067
|
|
|
1065
1068
|
:global(.uui-font-primary),
|
|
1066
1069
|
:global(.uui-font-museo-sans) {
|
|
1067
|
-
--uui-font: var(--font-primary);
|
|
1070
|
+
--uui-text-font: var(--font-primary);
|
|
1068
1071
|
}
|
|
1069
1072
|
|
|
1070
1073
|
:global(.uui-font-promo),
|
|
1071
1074
|
:global(.uui-font-museo-slab) {
|
|
1072
|
-
--uui-font: var(--font-promo);
|
|
1075
|
+
--uui-text-font: var(--font-promo);
|
|
1073
1076
|
}
|
|
1074
1077
|
|
|
1075
1078
|
:global(.dropdown-container-white) {
|
|
@@ -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,352 @@
|
|
|
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);
|
|
972
|
+
--uui-text: var(--uui-text-contrast);
|
|
941
973
|
}
|
|
942
974
|
|
|
943
|
-
|
|
944
|
-
--uui-font: var(--font-
|
|
975
|
+
.uui-font-inter, .uui-font-regular {
|
|
976
|
+
--uui-text-font: var(--font-inter);
|
|
945
977
|
}
|
|
946
978
|
|
|
947
|
-
|
|
948
|
-
--uui-font: var(--font-
|
|
979
|
+
.uui-font-museo-sans {
|
|
980
|
+
--uui-text-font: var(--font-museo-sans);
|
|
949
981
|
}
|
|
950
982
|
|
|
951
|
-
|
|
952
|
-
--uui-font: var(--font-
|
|
983
|
+
.uui-font-semibold {
|
|
984
|
+
--uui-text-font: var(--font-museo-sans);
|
|
985
|
+
--uui-text-font-weight: 700;
|
|
953
986
|
}
|
|
954
987
|
|
|
955
988
|
:global(.dropdown-container-white) {
|
|
956
|
-
|
|
989
|
+
--uui-dropdown-container-bg: var(--white);
|
|
957
990
|
}
|
|
958
991
|
|
|
959
992
|
:global(.dropdown-container-night700) {
|
|
960
|
-
|
|
993
|
+
--uui-dropdown-container-bg: var(--night700);
|
|
961
994
|
}
|
|
962
995
|
|
|
963
996
|
:global(.flex-row-background-white) {
|
|
964
|
-
|
|
997
|
+
--uui-flex-row-bg: var(--uui-surface);
|
|
965
998
|
}
|
|
966
999
|
|
|
967
1000
|
:global(.flex-row-background-night50) {
|
|
968
|
-
|
|
1001
|
+
--uui-flex-row-bg: var(--night50);
|
|
969
1002
|
}
|
|
970
1003
|
|
|
971
1004
|
:global(.flex-row-background-night100) {
|
|
972
|
-
|
|
1005
|
+
--uui-flex-row-bg: var(--night100);
|
|
973
1006
|
}
|
|
974
1007
|
|
|
975
1008
|
:global(.flex-row-background-none) {
|
|
976
|
-
|
|
1009
|
+
--uui-flex-row-bg: transparent;
|
|
977
1010
|
}
|
|
978
1011
|
|
|
979
1012
|
:global(.panel-white) {
|
|
980
|
-
|
|
1013
|
+
--uui-panel-bg: var(--uui-surface);
|
|
981
1014
|
}
|
|
982
1015
|
|
|
983
1016
|
:global(.panel-night50) {
|
|
984
|
-
|
|
1017
|
+
--uui-panel-bg: var(--night50);
|
|
985
1018
|
}
|
|
986
|
-
}
|
|
1019
|
+
}
|