@epam/assets 5.9.0-beta.0 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/css/theme/theme_electric.css +81 -98
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +95 -91
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +97 -134
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +83 -103
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +0 -68
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/icons/action-search-fill.svg +1 -1
  12. package/icons/content-person_contacts-fill.svg +1 -0
  13. package/icons/content-person_contacts-outline.svg +1 -0
  14. package/icons/content-person_group-outline.svg +1 -0
  15. package/icons/editor-headline_h4-outline.svg +1 -0
  16. package/icons/editor-headline_h5-outline.svg +1 -0
  17. package/icons/editor-headline_h6-outline.svg +1 -0
  18. package/icons/external_logo/figma-logo-outline-inverted.svg +1 -0
  19. package/icons/file-file_csv-fill.svg +1 -0
  20. package/icons/navigation-chevron_down-outline.svg +1 -1
  21. package/icons/navigation-chevron_left-outline.svg +1 -1
  22. package/icons/navigation-chevron_right-outline.svg +1 -1
  23. package/icons/navigation-chevron_up-outline.svg +1 -1
  24. package/icons/radio_dot-fill.svg +1 -1
  25. package/package.json +2 -2
  26. package/theme/theme_6px.scss +2 -91
  27. package/theme/theme_electric.scss +8 -68
  28. package/theme/theme_loveship.scss +5 -41
  29. package/theme/theme_loveship_dark.scss +7 -89
  30. package/theme/theme_promo.scss +1 -64
  31. package/theme/tokens/_color_classes.scss +103 -0
  32. package/theme/tokens/_theme_electric.scss +12 -1
  33. package/theme/tokens/_theme_loveship_dark.scss +12 -1
  34. package/theme/tokens/_theme_loveship_light.scss +12 -1
  35. package/theme/tokens/_theme_promo.scss +12 -1
package/theme/theme_6px.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  --uui-icon-size: 12px;
18
18
  --uui-line-height: 12px;
19
19
  --uui-font-size: 12px;
20
- --uui-dot-size: 6px;
20
+
21
21
  }
22
22
 
23
23
  .uui-size-18 {
@@ -30,7 +30,7 @@
30
30
  --uui-icon-size: 12px;
31
31
  --uui-line-height: 12px;
32
32
  --uui-font-size: 10px;
33
- --uui-dot-size: 6px;
33
+
34
34
  }
35
35
 
36
36
  .uui-size-24 {
@@ -43,7 +43,6 @@
43
43
  --uui-icon-size: 12px;
44
44
  --uui-line-height: 18px;
45
45
  --uui-font-size: 12px;
46
- --uui-dot-size: 8px;
47
46
  }
48
47
 
49
48
  .uui-size-30 {
@@ -56,7 +55,6 @@
56
55
  --uui-icon-size: 18px;
57
56
  --uui-line-height: 18px;
58
57
  --uui-font-size: 14px;
59
- --uui-dot-size: 8px;
60
58
  }
61
59
 
62
60
  .uui-size-36 {
@@ -69,7 +67,6 @@
69
67
  --uui-icon-size: 18px;
70
68
  --uui-line-height: 18px;
71
69
  --uui-font-size: 14px;
72
- --uui-dot-size: 8px;
73
70
  }
74
71
 
75
72
  .uui-size-42 {
@@ -82,7 +79,6 @@
82
79
  --uui-icon-size: 18px;
83
80
  --uui-line-height: 24px;
84
81
  --uui-font-size: 16px;
85
- --uui-dot-size: 10px;
86
82
  }
87
83
 
88
84
  .uui-size-48 {
@@ -95,7 +91,6 @@
95
91
  --uui-icon-size: 24px;
96
92
  --uui-line-height: 24px;
97
93
  --uui-font-size: 16px;
98
- --uui-dot-size: 12px;
99
94
  }
100
95
 
101
96
  .uui-size-60 {
@@ -108,7 +103,6 @@
108
103
  --uui-icon-size: 24px;
109
104
  --uui-line-height: 24px;
110
105
  --uui-font-size: 20px;
111
- --uui-dot-size: 12px;
112
106
  }
113
107
 
114
108
  .uui-input-box {
@@ -119,14 +113,6 @@
119
113
  &.uui-size-48 {
120
114
  --uui-horizontal-padding: 6px;
121
115
  }
122
-
123
- &.uui-textarea {
124
- --uui-horizontal-padding: 12px;
125
-
126
- &.uui-size-24 {
127
- --uui-line-height: 12px;
128
- }
129
- }
130
116
  }
131
117
 
132
118
  .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
@@ -227,79 +213,4 @@
227
213
  --uui-line-height: 24px;
228
214
  --uui-font-size: 16px;
229
215
  }
230
-
231
- .uui-labeled-input {
232
- &.uui-size-30 {
233
- --uui-icon-size: 12px;
234
- --uui-font-size: 12px;
235
- }
236
-
237
- &.uui-size-42 {
238
- --uui-line-height: 18px;
239
- --uui-font-size: 14px;
240
- }
241
-
242
- &.uui-size-48 {
243
- --uui-icon-size: 18px;
244
- --uui-line-height: 18px;
245
- --uui-font-size: 14px;
246
- }
247
- }
248
-
249
- .uui-badge {
250
- &.uui-size-18 {
251
- --uui-font-size: 12px;
252
- }
253
-
254
- &.uui-size-24 {
255
- --uui-horizontal-padding: 3px;
256
- --uui-icon-size: 18px;
257
- --uui-line-height: 12px;
258
- }
259
-
260
- &.uui-size-36 {
261
- --uui-horizontal-padding: 9px;
262
- }
263
-
264
- &.uui-size-42 {
265
- --uui-icon-size: 24px;
266
- }
267
- }
268
-
269
- .uui-status_indicator {
270
- &.uui-size-12 {
271
- --uui-horizontal-gap: 4px;
272
- }
273
-
274
- &.uui-size-18 {
275
- --uui-horizontal-gap: 6px;
276
- --uui-line-height: 18px;
277
- --uui-font-size: 14px;
278
- --uui-dot-size: 8px;
279
- }
280
-
281
- &.uui-size-24 {
282
- --uui-font-size: 14px;
283
- --uui-dot-size: 10px;
284
- }
285
- }
286
-
287
- .uui-count_indicator {
288
- &.uui-size-12 {
289
- --uui-horizontal-padding: 3px;
290
- --uui-line-height: 10px;
291
- --uui-font-size: 8px;
292
- }
293
-
294
- &.uui-size-18 {
295
- --uui-horizontal-padding: 6px;
296
- --uui-line-height: 16px;
297
- --uui-font-size: 12px;
298
- }
299
-
300
- &.uui-size-24 {
301
- --uui-line-height: 22px;
302
- --uui-font-size: 14px;
303
- }
304
- }
305
216
  }
package/theme/theme_electric.scss CHANGED
@@ -19,23 +19,6 @@
19
19
  --gradient-4: linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
20
20
  --gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
21
21
 
22
- /* contrast colors */
23
- --uui-primary-contrast: var(--white);
24
-
25
- --uui-accent-contrast: var(--white);
26
-
27
- --uui-secondary-contrast: var(--white);
28
-
29
- --uui-critical-contrast: var(--white);
30
-
31
- --uui-info-contrast: var(--white);
32
-
33
- --uui-success-contrast: var(--white);
34
-
35
- --uui-warning-contrast: var(--uui-neutral-80);
36
-
37
- --uui-error-contrast: var(--white);
38
-
39
22
  /* shadows */
40
23
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
41
24
  --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);
@@ -50,31 +33,7 @@
50
33
  /* override variables */
51
34
 
52
35
  /* begin color classes */
53
-
54
- .uui-color-primary,
55
- .uui-color-info {
56
- --uui-color-5: var(--uui-primary-5);
57
- --uui-color-10: var(--uui-primary-10);
58
- --uui-color-20: var(--uui-primary-20);
59
- --uui-color-50: var(--uui-primary-50);
60
- --uui-color-60: var(--uui-primary-60);
61
- --uui-color-70: var(--uui-primary-70);
62
- --uui-color-contrast: var(--white);
63
- }
64
-
65
- .uui-color-accent {
66
- --uui-color-5: var(--uui-accent-5);
67
- --uui-color-10: var(--uui-accent-10);
68
- --uui-color-20: var(--uui-accent-20);
69
- --uui-color-50: var(--uui-accent-50);
70
- --uui-color-60: var(--uui-accent-60);
71
- --uui-color-70: var(--uui-accent-70);
72
- --uui-color-contrast: var(--white);
73
- }
74
-
75
- .uui-color-fire,
76
- .uui-color-critical,
77
- .uui-color-error {
36
+ .uui-color-fire {
78
37
  --uui-color-5: var(--uui-critical-5);
79
38
  --uui-color-10: var(--uui-critical-10);
80
39
  --uui-color-20: var(--uui-critical-20);
@@ -84,16 +43,6 @@
84
43
  --uui-color-contrast: var(--white);
85
44
  }
86
45
 
87
- .uui-color-white {
88
- --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
89
- --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
90
- --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
91
- --uui-color-50: var(--uui-neutral-0);
92
- --uui-color-60: var(--uui-neutral-10);
93
- --uui-color-70: var(--uui-neutral-20);
94
- --uui-color-contrast: var(--uui-neutral-70);
95
- }
96
-
97
46
  .uui-color-night100 {
98
47
  --uui-color-5: var(--white);
99
48
  --uui-color-10: var(--white);
@@ -114,8 +63,6 @@
114
63
  --uui-color-contrast: var(--uui-neutral-80);
115
64
  }
116
65
 
117
- .uui-color-neutral,
118
- .uui-color-secondary,
119
66
  .uui-color-night600 {
120
67
  --uui-color-5: var(--uui-secondary-5);
121
68
  --uui-color-10: var(--uui-secondary-10);
@@ -136,18 +83,7 @@
136
83
  --uui-color-contrast: var(--white);
137
84
  }
138
85
 
139
- .uui-color-success {
140
- --uui-color-5: var(--uui-success-5);
141
- --uui-color-10: var(--uui-success-10);
142
- --uui-color-20: var(--uui-success-20);
143
- --uui-color-50: var(--uui-success-50);
144
- --uui-color-60: var(--uui-success-60);
145
- --uui-color-70: var(--uui-success-70);
146
- --uui-color-contrast: var(--white);
147
- }
148
-
149
- .uui-color-sun,
150
- .uui-color-warning {
86
+ .uui-color-sun {
151
87
  --uui-color-5: var(--sun-5);
152
88
  --uui-color-10: var(--sun-10);
153
89
  --uui-color-20: var(--sun-20);
@@ -383,7 +319,7 @@
383
319
  /* Status Indicator */
384
320
 
385
321
  .uui-status_indicator.uui-color-white.uui-fill-outline {
386
- .uui-status_indicator-dot {
322
+ .uui-status_indicator_dot {
387
323
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
388
324
  border: 1px solid var(--uui-neutral-40);
389
325
  }
@@ -536,7 +472,11 @@
536
472
  /* Typography */
537
473
 
538
474
  .uui-typography {
539
- h1, h3, h4, h5 {
475
+ h1 {
476
+ font-weight: 400;
477
+ }
478
+
479
+ h2, h3, h4, h5 {
540
480
  font-weight: 600;
541
481
  }
542
482
 
package/theme/theme_loveship.scss CHANGED
@@ -18,23 +18,6 @@
18
18
 
19
19
  /* end Loveship old colors */
20
20
 
21
- /* contrast colors */
22
- --uui-primary-contrast: var(--white);
23
-
24
- --uui-accent-contrast: var(--white);
25
-
26
- --uui-secondary-contrast: var(--white);
27
-
28
- --uui-critical-contrast: var(--white);
29
-
30
- --uui-info-contrast: var(--white);
31
-
32
- --uui-success-contrast: var(--white);
33
-
34
- --uui-warning-contrast: var(--night800);
35
-
36
- --uui-error-contrast: var(--white);
37
-
38
21
  /* shadows */
39
22
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
40
23
  --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);
@@ -48,9 +31,7 @@
48
31
 
49
32
  /* begin color classes */
50
33
 
51
- .uui-color-accent,
52
- .uui-color-grass,
53
- .uui-color-success {
34
+ .uui-color-grass {
54
35
  --uui-color-5: var(--uui-accent-5);
55
36
  --uui-color-10: var(--uui-accent-10);
56
37
  --uui-color-20: var(--uui-accent-20);
@@ -60,9 +41,7 @@
60
41
  --uui-color-contrast: var(--uui-accent-contrast);
61
42
  }
62
43
 
63
- .uui-color-primary,
64
- .uui-color-sky,
65
- .uui-color-info {
44
+ .uui-color-sky {
66
45
  --uui-color-5: var(--uui-primary-5);
67
46
  --uui-color-10: var(--uui-primary-10);
68
47
  --uui-color-20: var(--uui-primary-20);
@@ -72,9 +51,7 @@
72
51
  --uui-color-contrast: var(--uui-primary-contrast);
73
52
  }
74
53
 
75
- .uui-color-fire,
76
- .uui-color-critical,
77
- .uui-color-error {
54
+ .uui-color-fire {
78
55
  --uui-color-5: var(--uui-critical-5);
79
56
  --uui-color-10: var(--uui-critical-10);
80
57
  --uui-color-20: var(--uui-critical-20);
@@ -84,16 +61,6 @@
84
61
  --uui-color-contrast: var(--uui-critical-contrast);
85
62
  }
86
63
 
87
- .uui-color-white {
88
- --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
89
- --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
90
- --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
91
- --uui-color-50: var(--uui-neutral-0);
92
- --uui-color-60: var(--uui-neutral-10);
93
- --uui-color-70: var(--uui-neutral-20);
94
- --uui-color-contrast: var(--uui-neutral-70);
95
- }
96
-
97
64
  .uui-color-night100 {
98
65
  --uui-color-5: var(--white);
99
66
  --uui-color-10: var(--white);
@@ -125,9 +92,7 @@
125
92
  }
126
93
 
127
94
  .uui-color-night600,
128
- .uui-color-neutral,
129
- .uui-color-gray,
130
- .uui-color-secondary {
95
+ .uui-color-gray {
131
96
  --uui-color-5: var(--uui-secondary-5);
132
97
  --uui-color-10: var(--uui-secondary-10);
133
98
  --uui-color-20: var(--uui-secondary-20);
@@ -147,7 +112,6 @@
147
112
  --uui-color-contrast: var(--white);
148
113
  }
149
114
 
150
- .uui-color-warning,
151
115
  .uui-color-sun {
152
116
  --uui-color-5: var(--uui-warning-5);
153
117
  --uui-color-10: var(--uui-warning-10);
@@ -393,7 +357,7 @@
393
357
  /* Status Indicator */
394
358
 
395
359
  .uui-status_indicator.uui-color-white.uui-fill-outline {
396
- .uui-status_indicator-dot {
360
+ .uui-status_indicator_dot {
397
361
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
398
362
  border: 1px solid var(--uui-neutral-40);
399
363
  }
package/theme/theme_loveship_dark.scss CHANGED
@@ -9,23 +9,6 @@
9
9
  --uui-font: 'Source Sans Pro', sans-serif;
10
10
  --uui-font-mono: 'Roboto Mono', monospace;
11
11
 
12
- /* contrast colors */
13
- --uui-primary-contrast: var(--white);
14
-
15
- --uui-accent-contrast: var(--white);
16
-
17
- --uui-secondary-contrast: var(--white);
18
-
19
- --uui-critical-contrast: var(--white);
20
-
21
- --uui-info-contrast: var(--white);
22
-
23
- --uui-success-contrast: var(--white);
24
-
25
- --uui-warning-contrast: var(--night700);
26
-
27
- --uui-error-contrast: var(--white);
28
-
29
12
  /* shadows */
30
13
  --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
31
14
  --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
@@ -39,9 +22,7 @@
39
22
 
40
23
  /* begin color classes */
41
24
 
42
- .uui-color-neutral,
43
- .uui-color-gray,
44
- .uui-color-secondary {
25
+ .uui-color-gray {
45
26
  --uui-color-5: var(--uui-secondary-5);
46
27
  --uui-color-10: var(--uui-secondary-10);
47
28
  --uui-color-20: var(--uui-secondary-20);
@@ -51,7 +32,6 @@
51
32
  --uui-color-contrast: var(--white);
52
33
  }
53
34
 
54
- .uui-color-accent,
55
35
  .uui-color-grass {
56
36
  --uui-color-5: var(--grass-5);
57
37
  --uui-color-10: var(--grass-10);
@@ -62,17 +42,6 @@
62
42
  --uui-color-contrast: var(--white);
63
43
  }
64
44
 
65
- .uui-color-success {
66
- --uui-color-5: var(--uui-success-5);
67
- --uui-color-10: var(--uui-success-10);
68
- --uui-color-20: var(--uui-success-20);
69
- --uui-color-50: var(--uui-success-50);
70
- --uui-color-60: var(--uui-success-60);
71
- --uui-color-70: var(--uui-success-70);
72
- --uui-color-contrast: var(--white);
73
- }
74
-
75
- .uui-color-primary,
76
45
  .uui-color-sky {
77
46
  --uui-color-5: var(--sky-5);
78
47
  --uui-color-10: var(--sky-10);
@@ -93,28 +62,7 @@
93
62
  --uui-color-contrast: var(--white);
94
63
  }
95
64
 
96
- .uui-color-info {
97
- --uui-color-5: var(--uui-info-5);
98
- --uui-color-10: var(--uui-info-10);
99
- --uui-color-20: var(--uui-info-20);
100
- --uui-color-50: var(--uui-info-50);
101
- --uui-color-60: var(--uui-info-60);
102
- --uui-color-70: var(--uui-info-70);
103
- --uui-color-contrast: var(--white);
104
- }
105
-
106
- .uui-color-success {
107
- --uui-color-5: var(--uui-success-5);
108
- --uui-color-10: var(--uui-success-10);
109
- --uui-color-20: var(--uui-success-20);
110
- --uui-color-50: var(--uui-success-50);
111
- --uui-color-60: var(--uui-success-60);
112
- --uui-color-70: var(--uui-success-70);
113
- --uui-color-contrast: var(--white);
114
- }
115
-
116
- .uui-color-sun,
117
- .uui-color-warning {
65
+ .uui-color-sun {
118
66
  --uui-color-5: var(--sun-5);
119
67
  --uui-color-10: var(--sun-10);
120
68
  --uui-color-20: var(--sun-20);
@@ -124,26 +72,6 @@
124
72
  --uui-color-contrast: var(--night700);
125
73
  }
126
74
 
127
- .uui-color-error {
128
- --uui-color-5: var(--uui-error-5);
129
- --uui-color-10: var(--uui-error-10);
130
- --uui-color-20: var(--uui-error-20);
131
- --uui-color-50: var(--uui-error-50);
132
- --uui-color-60: var(--uui-error-60);
133
- --uui-color-70: var(--uui-error-70);
134
- --uui-color-contrast: var(--white);
135
- }
136
-
137
- .uui-color-critical {
138
- --uui-color-5: var(--uui-critical-5);
139
- --uui-color-10: var(--uui-critical-10);
140
- --uui-color-20: var(--uui-critical-20);
141
- --uui-color-50: var(--uui-critical-50);
142
- --uui-color-60: var(--uui-critical-60);
143
- --uui-color-70: var(--uui-critical-70);
144
- --uui-color-contrast: var(--white);
145
- }
146
-
147
75
  .uui-color-yellow {
148
76
  --uui-color-5: var(--yellow-5);
149
77
  --uui-color-10: var(--yellow-10);
@@ -224,16 +152,6 @@
224
152
  --uui-color-contrast: var(--night700);
225
153
  }
226
154
 
227
- .uui-color-white {
228
- --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
229
- --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
230
- --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
231
- --uui-color-50: var(--uui-neutral-0);
232
- --uui-color-60: var(--uui-neutral-10);
233
- --uui-color-70: var(--uui-neutral-20);
234
- --uui-color-contrast: var(--uui-neutral-70);
235
- }
236
-
237
155
  /* override variables */
238
156
 
239
157
  /* isInvalid color */
@@ -580,7 +498,7 @@
580
498
  /* Status Indicator */
581
499
 
582
500
  .uui-status_indicator.uui-color-white.uui-fill-outline {
583
- .uui-status_indicator-dot {
501
+ .uui-status_indicator_dot {
584
502
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
585
503
  border: 1px solid var(--white);
586
504
  }
@@ -588,12 +506,12 @@
588
506
 
589
507
  .uui-status_indicator.uui-color-night600,
590
508
  .uui-status_indicator.uui-color-neutral {
591
- .uui-status_indicator-dot {
509
+ .uui-status_indicator_dot {
592
510
  background-color: var(--uui-neutral-30);
593
511
  }
594
512
 
595
513
  &.uui-fill-outline {
596
- .uui-status_indicator-dot {
514
+ .uui-status_indicator_dot {
597
515
  background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent);
598
516
  border: 1px solid var(--uui-neutral-30);
599
517
  }
@@ -800,8 +718,8 @@
800
718
 
801
719
  /* PickerInput */
802
720
 
803
- .uui-picker_input-body {
804
- --uui-picker_input-selected_mark: var(--uui-info-60);
721
+ .uui-pickerInput-body {
722
+ --uui-pickerInput-selected_mark: var(--uui-info-60);
805
723
  }
806
724
 
807
725
  /* fonts */
package/theme/theme_promo.scss CHANGED
@@ -13,23 +13,6 @@
13
13
  --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
14
14
  --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
15
15
 
16
- /* contrast colors */
17
- --uui-primary-contrast: var(--white);
18
-
19
- --uui-accent-contrast: var(--white);
20
-
21
- --uui-secondary-contrast: var(--white);
22
-
23
- --uui-critical-contrast: var(--white);
24
-
25
- --uui-info-contrast: var(--white);
26
-
27
- --uui-success-contrast: var(--white);
28
-
29
- --uui-warning-contrast: var(--gray80);
30
-
31
- --uui-error-contrast: var(--white);
32
-
33
16
  /* shadows */
34
17
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
35
18
  --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);
@@ -43,7 +26,6 @@
43
26
 
44
27
  /* begin color classes */
45
28
 
46
- .uui-color-accent,
47
29
  .uui-color-green {
48
30
  --uui-color-5: var(--uui-accent-5);
49
31
  --uui-color-10: var(--uui-accent-10);
@@ -54,7 +36,6 @@
54
36
  --uui-color-contrast: var(--uui-accent-contrast);
55
37
  }
56
38
 
57
- .uui-color-primary,
58
39
  .uui-color-blue {
59
40
  --uui-color-5: var(--uui-primary-5);
60
41
  --uui-color-10: var(--uui-primary-10);
@@ -65,8 +46,6 @@
65
46
  --uui-color-contrast: var(--uui-primary-contrast);
66
47
  }
67
48
 
68
- .uui-color-secondary,
69
- .uui-color-neutral,
70
49
  .uui-color-gray {
71
50
  --uui-color-5: var(--uui-secondary-5);
72
51
  --uui-color-10: var(--uui-secondary-10);
@@ -77,7 +56,6 @@
77
56
  --uui-color-contrast: var(--uui-secondary-contrast);
78
57
  }
79
58
 
80
- .uui-color-critical,
81
59
  .uui-color-red {
82
60
  --uui-color-5: var(--uui-critical-5);
83
61
  --uui-color-10: var(--uui-critical-10);
@@ -88,27 +66,6 @@
88
66
  --uui-color-contrast: var(--uui-critical-contrast);
89
67
  }
90
68
 
91
- .uui-color-info {
92
- --uui-color-5: var(--uui-info-5);
93
- --uui-color-10: var(--uui-info-10);
94
- --uui-color-20: var(--uui-info-20);
95
- --uui-color-50: var(--uui-info-50);
96
- --uui-color-60: var(--uui-info-60);
97
- --uui-color-70: var(--uui-info-70);
98
- --uui-color-contrast: var(--uui-info-contrast);
99
- }
100
-
101
- .uui-color-success {
102
- --uui-color-5: var(--uui-success-5);
103
- --uui-color-10: var(--uui-success-10);
104
- --uui-color-20: var(--uui-success-20);
105
- --uui-color-50: var(--uui-success-50);
106
- --uui-color-60: var(--uui-success-60);
107
- --uui-color-70: var(--uui-success-70);
108
- --uui-color-contrast: var(--uui-success-contrast);
109
- }
110
-
111
- .uui-color-warning,
112
69
  .uui-color-amber {
113
70
  --uui-color-5: var(--uui-warning-5);
114
71
  --uui-color-10: var(--uui-warning-10);
@@ -119,26 +76,6 @@
119
76
  --uui-color-contrast: var(--uui-warning-contrast);
120
77
  }
121
78
 
122
- .uui-color-error {
123
- --uui-color-5: var(--uui-error-5);
124
- --uui-color-10: var(--uui-error-10);
125
- --uui-color-20: var(--uui-error-20);
126
- --uui-color-50: var(--uui-error-50);
127
- --uui-color-60: var(--uui-error-60);
128
- --uui-color-70: var(--uui-error-70);
129
- --uui-color-contrast: var(--uui-error-contrast);
130
- }
131
-
132
- .uui-color-white {
133
- --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
134
- --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
135
- --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
136
- --uui-color-50: var(--uui-neutral-0);
137
- --uui-color-60: var(--uui-neutral-10);
138
- --uui-color-70: var(--uui-neutral-20);
139
- --uui-color-contrast: var(--uui-neutral-70);
140
- }
141
-
142
79
  .uui-link_button.uui-color-contrast,
143
80
  .uui-color-gray10 {
144
81
  --uui-color-5: var(--white);
@@ -416,7 +353,7 @@
416
353
  /* Status Indicator */
417
354
 
418
355
  .uui-status_indicator.uui-color-white.uui-fill-outline {
419
- .uui-status_indicator-dot {
356
+ .uui-status_indicator_dot {
420
357
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
421
358
  border: 1px solid var(--uui-neutral-40);
422
359
  }