@epam/assets 5.8.2 → 5.8.4

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 (18) hide show
  1. package/css/theme/theme_electric.css +76 -28
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +98 -26
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +99 -68
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +82 -34
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/package.json +2 -2
  10. package/theme/theme_electric.scss +2 -66
  11. package/theme/theme_loveship.scss +4 -40
  12. package/theme/theme_loveship_dark.scss +2 -84
  13. package/theme/theme_promo.scss +0 -63
  14. package/theme/tokens/_color_classes.scss +103 -0
  15. package/theme/tokens/_theme_electric.scss +12 -1
  16. package/theme/tokens/_theme_loveship_dark.scss +12 -1
  17. package/theme/tokens/_theme_loveship_light.scss +12 -1
  18. package/theme/tokens/_theme_promo.scss +12 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/assets",
3
- "version": "5.8.2",
3
+ "version": "5.8.4",
4
4
  "description": "EPAM Assets Library",
5
5
  "author": "EPAM",
6
6
  "license": "MIT",
@@ -13,7 +13,7 @@
13
13
  "type": "git",
14
14
  "url": "https://github.com/epam/UUI"
15
15
  },
16
- "gitHead": "32fbf774f084102b3cba9f27348fa71189c08857",
16
+ "gitHead": "1a3fe0269b3c8c07de01688a34638b6e226ef1db",
17
17
  "publishConfig": {
18
18
  "directory": "build"
19
19
  }
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);
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);
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 */
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);
package/theme/tokens/_color_classes.scss ADDED
@@ -0,0 +1,103 @@
1
+ // This file is AUTOGENERATED. DO NOT EDIT THIS FILE DIRECTLY.
2
+
3
+ @mixin theme-color-classes {
4
+ .uui-color-primary {
5
+ --uui-color-5: var(--uui-primary-5);
6
+ --uui-color-10: var(--uui-primary-10);
7
+ --uui-color-20: var(--uui-primary-20);
8
+ --uui-color-50: var(--uui-primary-50);
9
+ --uui-color-60: var(--uui-primary-60);
10
+ --uui-color-70: var(--uui-primary-70);
11
+ --uui-color-contrast: var(--uui-primary-contrast);
12
+ }
13
+
14
+ .uui-color-secondary {
15
+ --uui-color-5: var(--uui-secondary-5);
16
+ --uui-color-10: var(--uui-secondary-10);
17
+ --uui-color-20: var(--uui-secondary-20);
18
+ --uui-color-50: var(--uui-secondary-50);
19
+ --uui-color-60: var(--uui-secondary-60);
20
+ --uui-color-70: var(--uui-secondary-70);
21
+ --uui-color-contrast: var(--uui-secondary-contrast);
22
+ }
23
+
24
+ .uui-color-accent {
25
+ --uui-color-5: var(--uui-accent-5);
26
+ --uui-color-10: var(--uui-accent-10);
27
+ --uui-color-20: var(--uui-accent-20);
28
+ --uui-color-50: var(--uui-accent-50);
29
+ --uui-color-60: var(--uui-accent-60);
30
+ --uui-color-70: var(--uui-accent-70);
31
+ --uui-color-contrast: var(--uui-accent-contrast);
32
+ }
33
+
34
+ .uui-color-info {
35
+ --uui-color-5: var(--uui-info-5);
36
+ --uui-color-10: var(--uui-info-10);
37
+ --uui-color-20: var(--uui-info-20);
38
+ --uui-color-50: var(--uui-info-50);
39
+ --uui-color-60: var(--uui-info-60);
40
+ --uui-color-70: var(--uui-info-70);
41
+ --uui-color-contrast: var(--uui-info-contrast);
42
+ }
43
+
44
+ .uui-color-success {
45
+ --uui-color-5: var(--uui-success-5);
46
+ --uui-color-10: var(--uui-success-10);
47
+ --uui-color-20: var(--uui-success-20);
48
+ --uui-color-50: var(--uui-success-50);
49
+ --uui-color-60: var(--uui-success-60);
50
+ --uui-color-70: var(--uui-success-70);
51
+ --uui-color-contrast: var(--uui-success-contrast);
52
+ }
53
+
54
+ .uui-color-warning {
55
+ --uui-color-5: var(--uui-warning-5);
56
+ --uui-color-10: var(--uui-warning-10);
57
+ --uui-color-20: var(--uui-warning-20);
58
+ --uui-color-50: var(--uui-warning-50);
59
+ --uui-color-60: var(--uui-warning-60);
60
+ --uui-color-70: var(--uui-warning-70);
61
+ --uui-color-contrast: var(--uui-warning-contrast);
62
+ }
63
+
64
+ .uui-color-error {
65
+ --uui-color-5: var(--uui-error-5);
66
+ --uui-color-10: var(--uui-error-10);
67
+ --uui-color-20: var(--uui-error-20);
68
+ --uui-color-50: var(--uui-error-50);
69
+ --uui-color-60: var(--uui-error-60);
70
+ --uui-color-70: var(--uui-error-70);
71
+ --uui-color-contrast: var(--uui-error-contrast);
72
+ }
73
+
74
+ .uui-color-critical {
75
+ --uui-color-5: var(--uui-critical-5);
76
+ --uui-color-10: var(--uui-critical-10);
77
+ --uui-color-20: var(--uui-critical-20);
78
+ --uui-color-50: var(--uui-critical-50);
79
+ --uui-color-60: var(--uui-critical-60);
80
+ --uui-color-70: var(--uui-critical-70);
81
+ --uui-color-contrast: var(--uui-critical-contrast);
82
+ }
83
+
84
+ .uui-color-white {
85
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
86
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
87
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
88
+ --uui-color-50: var(--uui-neutral-0);
89
+ --uui-color-60: var(--uui-neutral-10);
90
+ --uui-color-70: var(--uui-neutral-20);
91
+ --uui-color-contrast: var(--uui-neutral-70);
92
+ }
93
+
94
+ .uui-color-neutral {
95
+ --uui-color-5: var(--uui-secondary-5);
96
+ --uui-color-10: var(--uui-secondary-10);
97
+ --uui-color-20: var(--uui-secondary-20);
98
+ --uui-color-50: var(--uui-secondary-50);
99
+ --uui-color-60: var(--uui-secondary-60);
100
+ --uui-color-70: var(--uui-secondary-70);
101
+ --uui-color-contrast: var(--uui-secondary-contrast);
102
+ }
103
+ }
package/theme/tokens/_theme_electric.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  // This file is AUTOGENERATED from Figma. DO NOT EDIT THIS FILE DIRECTLY.
2
+ @use './_color_classes.scss' as colorClasses;
2
3
 
3
4
  @mixin theme-tokens {
4
5
 
@@ -130,6 +131,7 @@
130
131
  --uui-accent-50: var(--emerald-50);
131
132
  --uui-accent-60: var(--emerald-60);
132
133
  --uui-accent-70: var(--emerald-70);
134
+ --uui-accent-contrast: var(--white);
133
135
 
134
136
  // "core/semantic/critical-"
135
137
  --uui-critical-5: var(--fire-5);
@@ -138,6 +140,7 @@
138
140
  --uui-critical-50: var(--fire-50);
139
141
  --uui-critical-60: var(--fire-60);
140
142
  --uui-critical-70: var(--fire-70);
143
+ --uui-critical-contrast: var(--white);
141
144
 
142
145
  // "core/semantic/error-"
143
146
  --uui-error-5: var(--fire-5);
@@ -146,6 +149,7 @@
146
149
  --uui-error-50: var(--fire-50);
147
150
  --uui-error-60: var(--fire-60);
148
151
  --uui-error-70: var(--fire-70);
152
+ --uui-error-contrast: var(--white);
149
153
 
150
154
  // "core/semantic/info-"
151
155
  --uui-info-5: var(--electric-5);
@@ -154,6 +158,7 @@
154
158
  --uui-info-50: var(--electric-50);
155
159
  --uui-info-60: var(--electric-60);
156
160
  --uui-info-70: var(--electric-70);
161
+ --uui-info-contrast: var(--white);
157
162
 
158
163
  // "core/semantic/primary-"
159
164
  --uui-primary-5: var(--electric-5);
@@ -162,6 +167,7 @@
162
167
  --uui-primary-50: var(--electric-50);
163
168
  --uui-primary-60: var(--electric-60);
164
169
  --uui-primary-70: var(--electric-70);
170
+ --uui-primary-contrast: var(--white);
165
171
 
166
172
  // "core/semantic/secondary-"
167
173
  --uui-secondary-5: var(--night100);
@@ -170,6 +176,7 @@
170
176
  --uui-secondary-50: var(--night600);
171
177
  --uui-secondary-60: var(--night700);
172
178
  --uui-secondary-70: var(--night800);
179
+ --uui-secondary-contrast: var(--white);
173
180
 
174
181
  // "core/semantic/success-"
175
182
  --uui-success-5: var(--emerald-5);
@@ -178,6 +185,7 @@
178
185
  --uui-success-50: var(--emerald-50);
179
186
  --uui-success-60: var(--emerald-60);
180
187
  --uui-success-70: var(--emerald-70);
188
+ --uui-success-contrast: var(--white);
181
189
 
182
190
  // "core/semantic/warning-"
183
191
  --uui-warning-5: var(--sun-5);
@@ -186,6 +194,7 @@
186
194
  --uui-warning-50: var(--sun-50);
187
195
  --uui-warning-60: var(--sun-60);
188
196
  --uui-warning-70: var(--sun-70);
197
+ --uui-warning-contrast: var(--uui-neutral-80);
189
198
 
190
199
  /********************/
191
200
  /*** Core Neutral ***/
@@ -263,4 +272,6 @@
263
272
  --uui-text-success: var(--uui-success-70);
264
273
  --uui-text-tertiary: var(--uui-neutral-60);
265
274
  --uui-text-warning: var(--uui-warning-70);
266
- }
275
+
276
+ @include colorClasses.theme-color-classes;
277
+ }
package/theme/tokens/_theme_loveship_dark.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  // This file is AUTOGENERATED from Figma. DO NOT EDIT THIS FILE DIRECTLY.
2
+ @use './_color_classes.scss' as colorClasses;
2
3
 
3
4
  @mixin theme-tokens {
4
5
 
@@ -129,6 +130,7 @@
129
130
  --uui-accent-50: var(--grass-50);
130
131
  --uui-accent-60: var(--grass-60);
131
132
  --uui-accent-70: var(--grass-70);
133
+ --uui-accent-contrast: var(--white);
132
134
 
133
135
  // "core/semantic/critical-"
134
136
  --uui-critical-5: var(--fire-5);
@@ -137,6 +139,7 @@
137
139
  --uui-critical-50: var(--fire-50);
138
140
  --uui-critical-60: var(--fire-60);
139
141
  --uui-critical-70: var(--fire-70);
142
+ --uui-critical-contrast: var(--white);
140
143
 
141
144
  // "core/semantic/error-"
142
145
  --uui-error-5: var(--fire-5);
@@ -145,6 +148,7 @@
145
148
  --uui-error-50: var(--fire-50);
146
149
  --uui-error-60: var(--fire-60);
147
150
  --uui-error-70: var(--fire-70);
151
+ --uui-error-contrast: var(--white);
148
152
 
149
153
  // "core/semantic/info-"
150
154
  --uui-info-5: var(--sky-5);
@@ -153,6 +157,7 @@
153
157
  --uui-info-50: var(--sky-50);
154
158
  --uui-info-60: var(--sky-60);
155
159
  --uui-info-70: var(--sky-70);
160
+ --uui-info-contrast: var(--white);
156
161
 
157
162
  // "core/semantic/primary-"
158
163
  --uui-primary-5: var(--sky-5);
@@ -161,6 +166,7 @@
161
166
  --uui-primary-50: var(--sky-50);
162
167
  --uui-primary-60: var(--sky-60);
163
168
  --uui-primary-70: var(--sky-70);
169
+ --uui-primary-contrast: var(--white);
164
170
 
165
171
  // "core/semantic/secondary-"
166
172
  --uui-secondary-5: var(--night800);
@@ -169,6 +175,7 @@
169
175
  --uui-secondary-50: var(--night500);
170
176
  --uui-secondary-60: var(--night400);
171
177
  --uui-secondary-70: var(--night300);
178
+ --uui-secondary-contrast: var(--white);
172
179
 
173
180
  // "core/semantic/success-"
174
181
  --uui-success-5: var(--grass-5);
@@ -177,6 +184,7 @@
177
184
  --uui-success-50: var(--grass-50);
178
185
  --uui-success-60: var(--grass-60);
179
186
  --uui-success-70: var(--grass-70);
187
+ --uui-success-contrast: var(--white);
180
188
 
181
189
  // "core/semantic/warning-"
182
190
  --uui-warning-5: var(--sun-5);
@@ -185,6 +193,7 @@
185
193
  --uui-warning-50: var(--sun-50);
186
194
  --uui-warning-60: var(--sun-60);
187
195
  --uui-warning-70: var(--sun-70);
196
+ --uui-warning-contrast: var(--night700);
188
197
 
189
198
  /********************/
190
199
  /*** Core Neutral ***/
@@ -261,4 +270,6 @@
261
270
  --uui-text-success: var(--uui-success-70);
262
271
  --uui-text-tertiary: var(--uui-neutral-20);
263
272
  --uui-text-warning: var(--uui-warning-70);
264
- }
273
+
274
+ @include colorClasses.theme-color-classes;
275
+ }