@alfalab/core-components-vars 5.5.3 → 6.2.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 (10) hide show
  1. package/border-radius.css +1 -0
  2. package/colors-bluetint.css +191 -46
  3. package/colors-indigo.css +191 -68
  4. package/colors-x5.css +4 -0
  5. package/cssm/border-radius.css +1 -0
  6. package/cssm/colors-bluetint.css +191 -46
  7. package/cssm/colors-indigo.css +191 -68
  8. package/cssm/colors-x5.css +4 -0
  9. package/cssm/index.css +192 -68
  10. package/package.json +1 -1
package/cssm/colors-bluetint.css CHANGED
@@ -3,34 +3,44 @@
3
3
  --color-dark-bg-attention-muted: #332104;
4
4
  --color-dark-bg-info: #001c3c;
5
5
  --color-dark-bg-negative-muted: #35110d;
6
- --color-dark-bg-neutral: #3a3a3c;
7
6
  --color-dark-bg-opaque: rgba(255, 255, 255, 0.8);
8
7
  --color-dark-bg-overlay: rgba(0, 0, 0, 0.8);
9
8
  --color-dark-bg-positive-muted: #042117;
10
9
  --color-dark-bg-primary: #121212;
11
10
  --color-dark-bg-primary-inverted: #fff;
11
+ --color-dark-bg-quaternary: #3a3a3c;
12
+ --color-dark-bg-quaternary-inverted: #dcdcdd;
12
13
  --color-dark-bg-secondary: #202022;
13
14
  --color-dark-bg-secondary-inverted: #f3f4f5;
14
15
  --color-dark-bg-tertiary: #2c2c2e;
15
16
  --color-dark-bg-tertiary-inverted: #e9e9eb;
16
17
  --color-dark-border-accent: #ef3124;
17
18
  --color-dark-border-key: #fff;
18
- --color-dark-border-key-inverted: #121212;
19
+ --color-dark-border-key-inverted: #000;
20
+ --color-dark-border-link: #0072ef;
19
21
  --color-dark-border-primary: #2b2b2e;
22
+ --color-dark-border-primary-inverted: #dcdcdd;
20
23
  --color-dark-border-secondary: #262629;
21
24
  --color-dark-border-secondary-inverted: #e9e9eb;
22
25
  --color-dark-border-tertiary: #1c1c1e;
23
26
  --color-dark-border-tertiary-inverted: #f3f4f5;
27
+ --color-dark-border-underline: #464649;
28
+ --color-dark-border-underline-inverted: #c5c5c7;
24
29
  --color-dark-graphic-accent: #ef3124;
25
30
  --color-dark-graphic-attention: #f6bf65;
26
31
  --color-dark-graphic-link: #0072ef;
27
32
  --color-dark-graphic-negative: #d91d0b;
28
- --color-dark-graphic-neutral: #2a2a2c;
29
33
  --color-dark-graphic-positive: #2fc26e;
30
34
  --color-dark-graphic-primary: #fff;
31
- --color-dark-graphic-primary-inverted: #121212;
35
+ --color-dark-graphic-primary-inverted: #000;
36
+ --color-dark-graphic-quaternary: #2a2a2c;
37
+ --color-dark-graphic-quaternary-inverted: #dcdcdd;
32
38
  --color-dark-graphic-secondary: #8d8d93;
39
+ --color-dark-graphic-secondary-inverted: #8a8a8e;
33
40
  --color-dark-graphic-tertiary: #464649;
41
+ --color-dark-graphic-tertiary-inverted: #c5c5c7;
42
+ --color-dark-specialbg-component: rgba(255, 255, 255, 0.1);
43
+ --color-dark-specialbg-component-inverted: rgba(0, 0, 0, 0.08);
34
44
  --color-dark-specialbg-nulled: rgba(255, 255, 255, 0);
35
45
  --color-dark-specialbg-overlay-fallback: #070707;
36
46
  --color-dark-specialbg-primary-grouped: #202022;
@@ -39,6 +49,8 @@
39
49
  --color-dark-text-accent: #ef3124;
40
50
  --color-dark-text-attention: #cb830f;
41
51
  --color-dark-text-disabled: #2a2a2c;
52
+ --color-dark-text-disabled-inverted: #dcdcdd;
53
+ --color-dark-text-disabled-inverted-transparent: rgba(60, 60, 67, 0.18);
42
54
  --color-dark-text-disabled-transparent: rgba(235, 235, 245, 0.18);
43
55
  --color-dark-text-link: #0072ef;
44
56
  --color-dark-text-negative: #f15045;
@@ -57,12 +69,13 @@
57
69
  --color-light-bg-attention-muted: #f7ebd9;
58
70
  --color-light-bg-info: #d6e8fc;
59
71
  --color-light-bg-negative-muted: #fbe8e7;
60
- --color-light-bg-neutral: #dcdcdd;
61
72
  --color-light-bg-opaque: rgba(255, 255, 255, 0.8);
62
73
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
63
74
  --color-light-bg-positive-muted: #e7f6ef;
64
75
  --color-light-bg-primary: #fff;
65
76
  --color-light-bg-primary-inverted: #121212;
77
+ --color-light-bg-quaternary: #dcdcdd;
78
+ --color-light-bg-quaternary-inverted: #3a3a3c;
66
79
  --color-light-bg-secondary: #f3f4f5;
67
80
  --color-light-bg-secondary-inverted: #202022;
68
81
  --color-light-bg-tertiary: #e9e9eb;
@@ -70,21 +83,30 @@
70
83
  --color-light-border-accent: #ef3124;
71
84
  --color-light-border-key: #000;
72
85
  --color-light-border-key-inverted: #fff;
86
+ --color-light-border-link: #0072ef;
73
87
  --color-light-border-primary: #dcdcdd;
88
+ --color-light-border-primary-inverted: #2b2b2e;
74
89
  --color-light-border-secondary: #e9e9eb;
75
90
  --color-light-border-secondary-inverted: #262629;
76
91
  --color-light-border-tertiary: #f3f4f5;
77
92
  --color-light-border-tertiary-inverted: #1c1c1e;
93
+ --color-light-border-underline: #c5c5c7;
94
+ --color-light-border-underline-inverted: #464649;
78
95
  --color-light-graphic-accent: #ef3124;
79
96
  --color-light-graphic-attention: #f6bf65;
80
97
  --color-light-graphic-link: #0072ef;
81
98
  --color-light-graphic-negative: #f15045;
82
- --color-light-graphic-neutral: #dcdcdd;
83
99
  --color-light-graphic-positive: #2fc26e;
84
100
  --color-light-graphic-primary: #000;
85
101
  --color-light-graphic-primary-inverted: #fff;
102
+ --color-light-graphic-quaternary: #dcdcdd;
103
+ --color-light-graphic-quaternary-inverted: #2a2a2c;
86
104
  --color-light-graphic-secondary: #8a8a8e;
105
+ --color-light-graphic-secondary-inverted: #8d8d93;
87
106
  --color-light-graphic-tertiary: #c5c5c7;
107
+ --color-light-graphic-tertiary-inverted: #464649;
108
+ --color-light-specialbg-component: rgba(0, 0, 0, 0.08);
109
+ --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.1);
88
110
  --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
89
111
  --color-light-specialbg-overlay-fallback: #5c5c5c;
90
112
  --color-light-specialbg-primary-grouped: #f3f4f5;
@@ -93,6 +115,8 @@
93
115
  --color-light-text-accent: #ef3124;
94
116
  --color-light-text-attention: #cb830f;
95
117
  --color-light-text-disabled: #dcdcdd;
118
+ --color-light-text-disabled-inverted: #2a2a2c;
119
+ --color-light-text-disabled-inverted-transparent: rgba(235, 235, 245, 0.18);
96
120
  --color-light-text-disabled-transparent: rgba(60, 60, 67, 0.18);
97
121
  --color-light-text-link: #0072ef;
98
122
  --color-light-text-negative: #d91d0b;
@@ -108,12 +132,14 @@
108
132
  --color-light-text-tertiary-inverted-transparent: rgba(235, 235, 245, 0.3);
109
133
  --color-light-text-tertiary-transparent: rgba(60, 60, 67, 0.3);
110
134
  --color-static-bg-accent: #ef3124;
111
- --color-static-bg-neutral-dark: #3a3a3c;
112
- --color-static-bg-neutral-light: #dcdcdd;
113
135
  --color-static-bg-primary-dark: #121212;
114
136
  --color-static-bg-primary-light: #fff;
137
+ --color-static-bg-quaternary-dark: #3a3a3c;
138
+ --color-static-bg-quaternary-light: #dcdcdd;
115
139
  --color-static-bg-secondary-dark: #202022;
116
140
  --color-static-bg-secondary-light: #f3f4f5;
141
+ --color-static-bg-tertiary-dark: #2c2c2e;
142
+ --color-static-bg-tertiary-light: #e9e9eb;
117
143
  --color-static-border-accent: #ef3124;
118
144
  --color-static-graphic-accent: #ef3124;
119
145
  --color-static-graphic-dark: #000;
@@ -130,62 +156,116 @@
130
156
  --color-static-text-tertiary-light: #464649;
131
157
  --color-static-text-tertiary-light-transparent: rgba(235, 235, 245, 0.3);
132
158
  --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
159
+ --color-dark-bg-accent-shade-15: rgb(203, 42, 31);
160
+ --color-dark-bg-accent-shade-20: rgb(191, 39, 29);
133
161
  --color-dark-bg-accent-tint-7: rgb(240, 63, 51);
134
162
  --color-dark-bg-accent-tint-10: rgb(241, 70, 58);
135
163
  --color-dark-bg-accent-tint-15: rgb(241, 80, 69);
136
164
  --color-dark-bg-accent-tint-30: rgb(244, 111, 102);
137
- --color-dark-bg-neutral-alpha-30: rgba(58, 58, 60, 0.3);
138
- --color-dark-bg-neutral-tint-7: rgb(72, 72, 74);
139
- --color-dark-bg-neutral-tint-10: rgb(78, 78, 80);
140
- --color-dark-bg-neutral-tint-15: rgb(88, 88, 89);
141
- --color-dark-bg-neutral-tint-30: rgb(117, 117, 119);
142
- --color-dark-bg-neutral-shade-15: rgb(49, 49, 51);
165
+ --color-dark-bg-primary-alpha-4: rgba(18, 18, 18, 0.04);
143
166
  --color-dark-bg-primary-alpha-8: rgba(18, 18, 18, 0.08);
167
+ --color-dark-bg-primary-alpha-12: rgba(18, 18, 18, 0.12);
168
+ --color-dark-bg-primary-alpha-15: rgba(18, 18, 18, 0.15);
169
+ --color-dark-bg-primary-alpha-16: rgba(18, 18, 18, 0.16);
170
+ --color-dark-bg-primary-alpha-20: rgba(18, 18, 18, 0.2);
171
+ --color-dark-bg-primary-alpha-32: rgba(18, 18, 18, 0.32);
172
+ --color-dark-bg-primary-alpha-37: rgba(18, 18, 18, 0.37);
144
173
  --color-dark-bg-primary-alpha-40: rgba(18, 18, 18, 0.4);
145
174
  --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
175
+ --color-dark-bg-primary-inverted-alpha-4: rgba(255, 255, 255, 0.04);
176
+ --color-dark-bg-primary-inverted-alpha-5: rgba(255, 255, 255, 0.05);
146
177
  --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
178
+ --color-dark-bg-primary-inverted-alpha-8: rgba(255, 255, 255, 0.08);
147
179
  --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
180
+ --color-dark-bg-primary-inverted-alpha-12: rgba(255, 255, 255, 0.12);
148
181
  --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
182
+ --color-dark-bg-primary-inverted-alpha-16: rgba(255, 255, 255, 0.16);
149
183
  --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
184
+ --color-dark-bg-primary-inverted-alpha-24: rgba(255, 255, 255, 0.24);
150
185
  --color-dark-bg-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
186
+ --color-dark-bg-primary-inverted-alpha-32: rgba(255, 255, 255, 0.32);
151
187
  --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
152
188
  --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
153
- --color-dark-bg-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
154
- --color-dark-bg-primary-inverted-alpha-80: rgba(255, 255, 255, 0.8);
155
- --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
156
189
  --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
157
190
  --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
191
+ --color-dark-bg-quaternary-alpha-30: rgba(58, 58, 60, 0.3);
192
+ --color-dark-bg-quaternary-tint-7: rgb(72, 72, 74);
193
+ --color-dark-bg-quaternary-tint-10: rgb(78, 78, 80);
194
+ --color-dark-bg-quaternary-tint-15: rgb(88, 88, 89);
195
+ --color-dark-bg-quaternary-tint-30: rgb(117, 117, 119);
196
+ --color-dark-bg-quaternary-inverted-alpha-30: rgba(220, 220, 221, 0.3);
197
+ --color-dark-bg-quaternary-inverted-shade-15: rgb(187, 187, 188);
198
+ --color-dark-bg-quaternary-inverted-shade-20: rgb(176, 176, 177);
158
199
  --color-dark-bg-secondary-alpha-30: rgba(32, 32, 34, 0.3);
200
+ --color-dark-bg-secondary-shade-15: rgb(27, 27, 29);
201
+ --color-dark-bg-secondary-shade-20: rgb(26, 26, 27);
159
202
  --color-dark-bg-secondary-tint-7: rgb(48, 48, 49);
160
203
  --color-dark-bg-secondary-tint-15: rgb(65, 65, 67);
161
- --color-dark-bg-secondary-inverted-alpha-7: rgba(243, 244, 245, 0.07);
162
- --color-dark-bg-secondary-inverted-alpha-15: rgba(243, 244, 245, 0.15);
163
204
  --color-dark-bg-secondary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
164
- --color-dark-bg-secondary-inverted-shade-7: rgb(226, 227, 228);
165
205
  --color-dark-bg-secondary-inverted-shade-15: rgb(207, 207, 208);
166
206
  --color-dark-bg-secondary-inverted-shade-20: rgb(194, 195, 196);
207
+ --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
208
+ --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
167
209
  --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
168
- --color-dark-border-tertiary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
210
+ --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
211
+ --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
169
212
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
170
213
  --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
171
214
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
172
215
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
216
+ --color-dark-graphic-negative-alpha-30: rgba(217, 29, 11, 0.3);
217
+ --color-dark-graphic-negative-shade-20: rgb(174, 23, 9);
173
218
  --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
174
- --color-dark-graphic-negative-shade-50: rgb(109, 15, 6);
175
- --color-dark-graphic-neutral-tint-10: rgb(63, 63, 65);
219
+ --color-dark-graphic-negative-tint-7: rgb(220, 45, 28);
220
+ --color-dark-graphic-negative-tint-15: rgb(223, 63, 48);
221
+ --color-dark-graphic-negative-tint-30: rgb(228, 97, 84);
176
222
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
177
223
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
178
224
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
179
225
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
180
226
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
227
+ --color-dark-graphic-primary-alpha-60: rgba(255, 255, 255, 0.6);
181
228
  --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
229
+ --color-dark-graphic-primary-shade-20: rgb(204, 204, 204);
182
230
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
183
- --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
184
231
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
185
232
  --color-dark-graphic-primary-tint-30: rgb(255, 255, 255);
233
+ --color-dark-graphic-primary-inverted-alpha-30: rgba(0, 0, 0, 0.3);
234
+ --color-dark-graphic-primary-inverted-alpha-40: rgba(0, 0, 0, 0.4);
235
+ --color-dark-graphic-primary-inverted-alpha-50: rgba(0, 0, 0, 0.5);
236
+ --color-dark-graphic-primary-inverted-alpha-60: rgba(0, 0, 0, 0.6);
237
+ --color-dark-graphic-primary-inverted-tint-7: rgb(18, 18, 18);
238
+ --color-dark-graphic-primary-inverted-tint-10: rgb(26, 26, 26);
239
+ --color-dark-graphic-primary-inverted-tint-15: rgb(38, 38, 38);
240
+ --color-dark-graphic-primary-inverted-tint-30: rgb(77, 77, 77);
241
+ --color-dark-graphic-quaternary-tint-10: rgb(63, 63, 65);
186
242
  --color-dark-graphic-secondary-alpha-30: rgba(141, 141, 147, 0.3);
187
243
  --color-dark-graphic-secondary-tint-30: rgb(175, 175, 179);
188
244
  --color-dark-graphic-secondary-tint-50: rgb(198, 198, 201);
245
+ --color-dark-graphic-secondary-inverted-alpha-30: rgba(138, 138, 142, 0.3);
246
+ --color-dark-graphic-secondary-inverted-shade-15: rgb(117, 117, 121);
247
+ --color-dark-graphic-secondary-inverted-shade-20: rgb(110, 110, 114);
248
+ --color-dark-graphic-secondary-inverted-tint-10: rgb(150, 150, 153);
249
+ --color-dark-graphic-secondary-inverted-tint-30: rgb(173, 173, 176);
250
+ --color-dark-graphic-tertiary-alpha-30: rgba(70, 70, 73, 0.3);
251
+ --color-dark-graphic-tertiary-shade-15: rgb(60, 60, 62);
252
+ --color-dark-graphic-tertiary-shade-20: rgb(56, 56, 58);
253
+ --color-dark-graphic-tertiary-tint-7: rgb(83, 83, 86);
254
+ --color-dark-graphic-tertiary-tint-15: rgb(98, 98, 100);
255
+ --color-dark-graphic-tertiary-inverted-alpha-30: rgba(197, 197, 199, 0.3);
256
+ --color-dark-graphic-tertiary-inverted-shade-15: rgb(167, 167, 169);
257
+ --color-dark-graphic-tertiary-inverted-shade-20: rgb(158, 158, 159);
258
+ --color-dark-specialbg-component-tint-7: rgba(255, 255, 255, 0.163);
259
+ --color-dark-specialbg-component-tint-10: rgba(255, 255, 255, 0.19);
260
+ --color-dark-specialbg-component-tint-15: rgba(255, 255, 255, 0.235);
261
+ --color-dark-specialbg-component-tint-30: rgba(255, 255, 255, 0.37);
262
+ --color-dark-specialbg-component-alpha-2: rgba(255, 255, 255, 0.02);
263
+ --color-dark-specialbg-component-alpha-14: rgba(255, 255, 255, 0.14);
264
+ --color-dark-specialbg-component-alpha-23: rgba(255, 255, 255, 0.23);
265
+ --color-dark-specialbg-component-alpha-30: rgba(255, 255, 255, 0.3);
266
+ --color-dark-specialbg-component-inverted-alpha-30: rgba(0, 0, 0, 0.3);
267
+ --color-dark-specialbg-component-inverted-shade-15: rgba(0, 0, 0, 0.218);
268
+ --color-dark-specialbg-component-inverted-shade-20: rgba(0, 0, 0, 0.264);
189
269
  --color-dark-text-link-shade-30: rgb(0, 80, 167);
190
270
  --color-dark-text-link-shade-50: rgb(0, 57, 120);
191
271
  --color-dark-text-link-tint-20: rgb(51, 142, 242);
@@ -195,72 +275,131 @@
195
275
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
196
276
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
197
277
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
278
+ --color-dark-text-primary-inverted-alpha-30: rgba(0, 0, 0, 0.3);
198
279
  --color-dark-text-primary-inverted-alpha-40: rgba(0, 0, 0, 0.4);
280
+ --color-dark-text-primary-inverted-shade-20: rgb(0, 0, 0);
199
281
  --color-dark-text-primary-inverted-shade-30: rgb(0, 0, 0);
200
- --color-dark-text-primary-inverted-shade-50: rgb(0, 0, 0);
282
+ --color-dark-text-primary-inverted-tint-7: rgb(18, 18, 18);
283
+ --color-dark-text-primary-inverted-tint-15: rgb(38, 38, 38);
284
+ --color-dark-text-primary-inverted-tint-30: rgb(77, 77, 77);
285
+ --color-dark-text-primary-inverted-tint-50: rgb(128, 128, 128);
286
+ --color-dark-text-secondary-shade-20: rgb(113, 113, 118);
201
287
  --color-dark-text-secondary-shade-30: rgb(99, 99, 103);
202
- --color-dark-text-secondary-shade-50: rgb(71, 71, 74);
203
288
  --color-dark-text-secondary-tint-20: rgb(164, 164, 169);
204
289
  --color-dark-text-secondary-tint-40: rgb(187, 187, 190);
290
+ --color-dark-text-secondary-inverted-shade-20: rgb(110, 110, 114);
205
291
  --color-dark-text-secondary-inverted-shade-30: rgb(97, 97, 99);
206
- --color-dark-text-secondary-inverted-shade-50: rgb(69, 69, 71);
207
292
  --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
293
+ --color-light-bg-accent-tint-15: rgb(241, 80, 69);
294
+ --color-light-bg-accent-tint-20: rgb(242, 90, 80);
208
295
  --color-light-bg-accent-shade-7: rgb(222, 46, 33);
209
296
  --color-light-bg-accent-shade-10: rgb(215, 44, 32);
210
297
  --color-light-bg-accent-shade-15: rgb(203, 42, 31);
211
298
  --color-light-bg-accent-shade-30: rgb(167, 34, 25);
212
- --color-light-bg-neutral-alpha-30: rgba(220, 220, 221, 0.3);
213
- --color-light-bg-neutral-shade-7: rgb(205, 205, 206);
214
- --color-light-bg-neutral-shade-10: rgb(198, 198, 199);
215
- --color-light-bg-neutral-shade-15: rgb(187, 187, 188);
216
- --color-light-bg-neutral-shade-30: rgb(154, 154, 155);
217
- --color-light-bg-neutral-tint-15: rgb(225, 225, 226);
299
+ --color-light-bg-primary-alpha-4: rgba(255, 255, 255, 0.04);
218
300
  --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
301
+ --color-light-bg-primary-alpha-12: rgba(255, 255, 255, 0.12);
302
+ --color-light-bg-primary-alpha-15: rgba(255, 255, 255, 0.15);
303
+ --color-light-bg-primary-alpha-16: rgba(255, 255, 255, 0.16);
304
+ --color-light-bg-primary-alpha-20: rgba(255, 255, 255, 0.2);
305
+ --color-light-bg-primary-alpha-32: rgba(255, 255, 255, 0.32);
306
+ --color-light-bg-primary-alpha-37: rgba(255, 255, 255, 0.37);
219
307
  --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
220
308
  --color-light-bg-primary-inverted-alpha-3: rgba(18, 18, 18, 0.03);
309
+ --color-light-bg-primary-inverted-alpha-4: rgba(18, 18, 18, 0.04);
310
+ --color-light-bg-primary-inverted-alpha-5: rgba(18, 18, 18, 0.05);
221
311
  --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
312
+ --color-light-bg-primary-inverted-alpha-8: rgba(18, 18, 18, 0.08);
222
313
  --color-light-bg-primary-inverted-alpha-10: rgba(18, 18, 18, 0.1);
314
+ --color-light-bg-primary-inverted-alpha-12: rgba(18, 18, 18, 0.12);
223
315
  --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
316
+ --color-light-bg-primary-inverted-alpha-16: rgba(18, 18, 18, 0.16);
224
317
  --color-light-bg-primary-inverted-alpha-20: rgba(18, 18, 18, 0.2);
318
+ --color-light-bg-primary-inverted-alpha-24: rgba(18, 18, 18, 0.24);
225
319
  --color-light-bg-primary-inverted-alpha-30: rgba(18, 18, 18, 0.3);
320
+ --color-light-bg-primary-inverted-alpha-32: rgba(18, 18, 18, 0.32);
226
321
  --color-light-bg-primary-inverted-alpha-40: rgba(18, 18, 18, 0.4);
227
322
  --color-light-bg-primary-inverted-alpha-50: rgba(18, 18, 18, 0.5);
228
- --color-light-bg-primary-inverted-alpha-60: rgba(18, 18, 18, 0.6);
229
- --color-light-bg-primary-inverted-alpha-80: rgba(18, 18, 18, 0.8);
230
- --color-light-bg-primary-inverted-tint-7: rgb(35, 35, 35);
231
323
  --color-light-bg-primary-inverted-tint-15: rgb(54, 54, 54);
232
324
  --color-light-bg-primary-inverted-tint-20: rgb(65, 65, 65);
325
+ --color-light-bg-quaternary-alpha-30: rgba(220, 220, 221, 0.3);
326
+ --color-light-bg-quaternary-shade-7: rgb(205, 205, 206);
327
+ --color-light-bg-quaternary-shade-10: rgb(198, 198, 199);
328
+ --color-light-bg-quaternary-shade-15: rgb(187, 187, 188);
329
+ --color-light-bg-quaternary-shade-30: rgb(154, 154, 155);
330
+ --color-light-bg-quaternary-inverted-alpha-30: rgba(58, 58, 60, 0.3);
331
+ --color-light-bg-quaternary-inverted-tint-15: rgb(88, 88, 89);
332
+ --color-light-bg-quaternary-inverted-tint-20: rgb(97, 97, 99);
233
333
  --color-light-bg-secondary-alpha-30: rgba(243, 244, 245, 0.3);
334
+ --color-light-bg-secondary-tint-15: rgb(245, 246, 246);
335
+ --color-light-bg-secondary-tint-20: rgb(245, 246, 247);
234
336
  --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
235
337
  --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
236
- --color-light-bg-secondary-inverted-alpha-7: rgba(32, 32, 34, 0.07);
237
- --color-light-bg-secondary-inverted-alpha-15: rgba(32, 32, 34, 0.15);
238
338
  --color-light-bg-secondary-inverted-alpha-30: rgba(32, 32, 34, 0.3);
239
- --color-light-bg-secondary-inverted-tint-7: rgb(48, 48, 49);
240
339
  --color-light-bg-secondary-inverted-tint-15: rgb(65, 65, 67);
241
340
  --color-light-bg-secondary-inverted-tint-20: rgb(77, 77, 78);
341
+ --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
342
+ --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
242
343
  --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
243
- --color-light-border-tertiary-inverted-alpha-30: rgba(28, 28, 30, 0.3);
344
+ --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
345
+ --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
244
346
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
245
347
  --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
246
348
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
247
349
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
350
+ --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
351
+ --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
248
352
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
249
- --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
250
- --color-light-graphic-neutral-shade-10: rgb(198, 198, 199);
353
+ --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
354
+ --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
355
+ --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
251
356
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
252
357
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
253
358
  --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
254
359
  --color-light-graphic-primary-alpha-40: rgba(0, 0, 0, 0.4);
255
360
  --color-light-graphic-primary-alpha-50: rgba(0, 0, 0, 0.5);
361
+ --color-light-graphic-primary-alpha-60: rgba(0, 0, 0, 0.6);
256
362
  --color-light-graphic-primary-tint-15: rgb(38, 38, 38);
363
+ --color-light-graphic-primary-tint-20: rgb(51, 51, 51);
257
364
  --color-light-graphic-primary-tint-30: rgb(77, 77, 77);
258
- --color-light-graphic-primary-tint-50: rgb(128, 128, 128);
259
365
  --color-light-graphic-primary-shade-10: rgb(0, 0, 0);
260
366
  --color-light-graphic-primary-shade-30: rgb(0, 0, 0);
367
+ --color-light-graphic-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
368
+ --color-light-graphic-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
369
+ --color-light-graphic-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
370
+ --color-light-graphic-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
371
+ --color-light-graphic-primary-inverted-shade-7: rgb(237, 237, 237);
372
+ --color-light-graphic-primary-inverted-shade-10: rgb(230, 230, 230);
373
+ --color-light-graphic-primary-inverted-shade-15: rgb(217, 217, 217);
374
+ --color-light-graphic-primary-inverted-shade-30: rgb(179, 179, 179);
375
+ --color-light-graphic-quaternary-shade-10: rgb(198, 198, 199);
261
376
  --color-light-graphic-secondary-alpha-30: rgba(138, 138, 142, 0.3);
262
377
  --color-light-graphic-secondary-shade-30: rgb(97, 97, 99);
263
378
  --color-light-graphic-secondary-shade-50: rgb(69, 69, 71);
379
+ --color-light-graphic-secondary-inverted-alpha-30: rgba(141, 141, 147, 0.3);
380
+ --color-light-graphic-secondary-inverted-tint-15: rgb(158, 158, 163);
381
+ --color-light-graphic-secondary-inverted-tint-20: rgb(164, 164, 169);
382
+ --color-light-graphic-secondary-inverted-shade-10: rgb(127, 127, 132);
383
+ --color-light-graphic-secondary-inverted-shade-30: rgb(99, 99, 103);
384
+ --color-light-graphic-tertiary-alpha-30: rgba(197, 197, 199, 0.3);
385
+ --color-light-graphic-tertiary-tint-15: rgb(206, 206, 207);
386
+ --color-light-graphic-tertiary-tint-20: rgb(209, 209, 210);
387
+ --color-light-graphic-tertiary-shade-7: rgb(183, 183, 185);
388
+ --color-light-graphic-tertiary-shade-15: rgb(167, 167, 169);
389
+ --color-light-graphic-tertiary-inverted-alpha-30: rgba(70, 70, 73, 0.3);
390
+ --color-light-graphic-tertiary-inverted-tint-15: rgb(98, 98, 100);
391
+ --color-light-graphic-tertiary-inverted-tint-20: rgb(107, 107, 109);
392
+ --color-light-specialbg-component-shade-7: rgba(0, 0, 0, 0.1444);
393
+ --color-light-specialbg-component-shade-10: rgba(0, 0, 0, 0.172);
394
+ --color-light-specialbg-component-shade-15: rgba(0, 0, 0, 0.218);
395
+ --color-light-specialbg-component-shade-30: rgba(0, 0, 0, 0.356);
396
+ --color-light-specialbg-component-alpha-2: rgba(0, 0, 0, 0.02);
397
+ --color-light-specialbg-component-alpha-14: rgba(0, 0, 0, 0.14);
398
+ --color-light-specialbg-component-alpha-23: rgba(0, 0, 0, 0.23);
399
+ --color-light-specialbg-component-alpha-30: rgba(0, 0, 0, 0.3);
400
+ --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
401
+ --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.235);
402
+ --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.28);
264
403
  --color-light-text-link-tint-30: rgb(77, 156, 244);
265
404
  --color-light-text-link-tint-50: rgb(128, 185, 247);
266
405
  --color-light-text-link-shade-20: rgb(0, 91, 191);
@@ -270,15 +409,21 @@
270
409
  --color-light-text-primary-tint-50: rgb(128, 128, 128);
271
410
  --color-light-text-primary-shade-20: rgb(0, 0, 0);
272
411
  --color-light-text-primary-shade-40: rgb(0, 0, 0);
412
+ --color-light-text-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
273
413
  --color-light-text-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
414
+ --color-light-text-primary-inverted-tint-20: rgb(255, 255, 255);
274
415
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
275
- --color-light-text-primary-inverted-tint-50: rgb(255, 255, 255);
416
+ --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
417
+ --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
418
+ --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
419
+ --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
420
+ --color-light-text-secondary-tint-20: rgb(161, 161, 165);
276
421
  --color-light-text-secondary-tint-30: rgb(173, 173, 176);
277
- --color-light-text-secondary-tint-50: rgb(197, 197, 199);
278
422
  --color-light-text-secondary-shade-20: rgb(110, 110, 114);
279
423
  --color-light-text-secondary-shade-40: rgb(83, 83, 85);
424
+ --color-light-text-secondary-inverted-tint-20: rgb(164, 164, 169);
280
425
  --color-light-text-secondary-inverted-tint-30: rgb(175, 175, 179);
281
- --color-light-text-secondary-inverted-tint-50: rgb(198, 198, 201);
282
426
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
283
427
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
428
+ --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
284
429
  }