@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.
package/cssm/index.css CHANGED
@@ -172,47 +172,54 @@
172
172
  --color-dark-bg-attention-muted: #432000;
173
173
  --color-dark-bg-info: #001c3c;
174
174
  --color-dark-bg-negative-muted: #410903;
175
- --color-dark-bg-neutral: #485767;
176
- --color-dark-bg-opaque: rgba(11, 31, 53, 0.6);
175
+ --color-dark-bg-opaque: rgba(255, 255, 255, 0.6);
177
176
  --color-dark-bg-overlay: rgba(0, 0, 0, 0.6);
178
177
  --color-dark-bg-positive-muted: #06311e;
179
178
  --color-dark-bg-primary: #0b1f35;
180
179
  --color-dark-bg-primary-inverted: #fff;
180
+ --color-dark-bg-quaternary: #485767;
181
+ --color-dark-bg-quaternary-inverted: #dbdee1;
181
182
  --color-dark-bg-secondary: #233549;
182
- --color-dark-bg-secondary-inverted: #b6bcc3;
183
+ --color-dark-bg-secondary-inverted: #f3f4f5;
183
184
  --color-dark-bg-tertiary: #3c4c5d;
184
- --color-dark-bg-tertiary-inverted: #6d7986;
185
+ --color-dark-bg-tertiary-inverted: #e7e9eb;
185
186
  --color-dark-border-accent: #ef3124;
186
187
  --color-dark-border-key: #fff;
187
188
  --color-dark-border-key-inverted: #0b1f35;
188
189
  --color-dark-border-link: #007aff;
189
190
  --color-dark-border-primary: #485767;
191
+ --color-dark-border-primary-inverted: #dbdee1;
190
192
  --color-dark-border-secondary: #3c4c5d;
191
- --color-dark-border-secondary-inverted: #6d7986;
193
+ --color-dark-border-secondary-inverted: #e7e9eb;
192
194
  --color-dark-border-tertiary: #233549;
193
- --color-dark-border-tertiary-inverted: #b6bcc3;
195
+ --color-dark-border-tertiary-inverted: #f3f4f5;
194
196
  --color-dark-border-underline: #6d7986;
195
197
  --color-dark-border-underline-inverted: #b6bcc3;
196
198
  --color-dark-graphic-accent: #ef3124;
197
199
  --color-dark-graphic-attention: #e58933;
198
200
  --color-dark-graphic-link: #007aff;
199
201
  --color-dark-graphic-negative: #f15045;
200
- --color-dark-graphic-neutral: #485767;
201
202
  --color-dark-graphic-positive: #2fc26e;
202
203
  --color-dark-graphic-primary: #fff;
203
204
  --color-dark-graphic-primary-inverted: #0b1f35;
205
+ --color-dark-graphic-quaternary: #485767;
206
+ --color-dark-graphic-quaternary-inverted: #dbdee1;
204
207
  --color-dark-graphic-secondary: #b6bcc3;
205
- --color-dark-graphic-secondary-inverted: #233549;
208
+ --color-dark-graphic-secondary-inverted: #6d7986;
206
209
  --color-dark-graphic-tertiary: #6d7986;
207
- --color-dark-specialbg-component: #485767;
210
+ --color-dark-graphic-tertiary-inverted: #b6bcc3;
211
+ --color-dark-specialbg-component: rgba(255, 255, 255, 0.15);
208
212
  --color-dark-specialbg-component-inverted: rgba(11, 31, 53, 0.07);
209
213
  --color-dark-specialbg-nulled: rgba(11, 31, 53, 0);
214
+ --color-dark-specialbg-overlay-fallback: #070707;
210
215
  --color-dark-specialbg-primary-grouped: #0b1f35;
211
216
  --color-dark-specialbg-secondary-grouped: #233549;
212
217
  --color-dark-specialbg-tertiary-grouped: #3c4c5d;
213
218
  --color-dark-text-accent: #ef3124;
214
219
  --color-dark-text-attention: #de6a00;
215
220
  --color-dark-text-disabled: #485767;
221
+ --color-dark-text-disabled-inverted: #dbdee1;
222
+ --color-dark-text-disabled-inverted-transparent: rgba(11, 31, 53, 0.15);
216
223
  --color-dark-text-disabled-transparent: rgba(255, 255, 255, 0.25);
217
224
  --color-dark-text-link: #007aff;
218
225
  --color-dark-text-negative: #d91d0b;
@@ -220,8 +227,8 @@
220
227
  --color-dark-text-primary: #fff;
221
228
  --color-dark-text-primary-inverted: #0b1f35;
222
229
  --color-dark-text-secondary: #b6bcc3;
223
- --color-dark-text-secondary-inverted: #6d7986;
224
- --color-dark-text-secondary-inverted-transparent: rgba(11, 31, 53, 0.6);
230
+ --color-dark-text-secondary-inverted: #546272;
231
+ --color-dark-text-secondary-inverted-transparent: rgba(11, 31, 53, 0.7);
225
232
  --color-dark-text-secondary-transparent: rgba(255, 255, 255, 0.7);
226
233
  --color-dark-text-tertiary: #6d7986;
227
234
  --color-dark-text-tertiary-inverted: #b6bcc3;
@@ -231,12 +238,13 @@
231
238
  --color-light-bg-attention-muted: #fff3e0;
232
239
  --color-light-bg-info: #d6e8fc;
233
240
  --color-light-bg-negative-muted: #feebea;
234
- --color-light-bg-neutral: #dbdee1;
235
241
  --color-light-bg-opaque: rgba(255, 255, 255, 0.6);
236
242
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
237
243
  --color-light-bg-positive-muted: #ebf9f1;
238
244
  --color-light-bg-primary: #fff;
239
245
  --color-light-bg-primary-inverted: #0b1f35;
246
+ --color-light-bg-quaternary: #dbdee1;
247
+ --color-light-bg-quaternary-inverted: #485767;
240
248
  --color-light-bg-secondary: #f3f4f5;
241
249
  --color-light-bg-secondary-inverted: #233549;
242
250
  --color-light-bg-tertiary: #e7e9eb;
@@ -246,32 +254,38 @@
246
254
  --color-light-border-key-inverted: #fff;
247
255
  --color-light-border-link: #007aff;
248
256
  --color-light-border-primary: #dbdee1;
257
+ --color-light-border-primary-inverted: #485767;
249
258
  --color-light-border-secondary: #e7e9eb;
250
- --color-light-border-secondary-inverted: #b6bcc3;
259
+ --color-light-border-secondary-inverted: #3c4c5d;
251
260
  --color-light-border-tertiary: #f3f4f5;
252
- --color-light-border-tertiary-inverted: #6d7986;
261
+ --color-light-border-tertiary-inverted: #233549;
253
262
  --color-light-border-underline: #b6bcc3;
254
263
  --color-light-border-underline-inverted: #6d7986;
255
264
  --color-light-graphic-accent: #ef3124;
256
265
  --color-light-graphic-attention: #e58933;
257
266
  --color-light-graphic-link: #007aff;
258
267
  --color-light-graphic-negative: #f15045;
259
- --color-light-graphic-neutral: #dbdee1;
260
268
  --color-light-graphic-positive: #2fc26e;
261
269
  --color-light-graphic-primary: #0b1f35;
262
270
  --color-light-graphic-primary-inverted: #fff;
271
+ --color-light-graphic-quaternary: #dbdee1;
272
+ --color-light-graphic-quaternary-inverted: #485767;
263
273
  --color-light-graphic-secondary: #6d7986;
264
- --color-light-graphic-secondary-inverted: #f3f4f5;
274
+ --color-light-graphic-secondary-inverted: #b6bcc3;
265
275
  --color-light-graphic-tertiary: #b6bcc3;
276
+ --color-light-graphic-tertiary-inverted: #6d7986;
266
277
  --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
267
278
  --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.15);
268
279
  --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
280
+ --color-light-specialbg-overlay-fallback: #5c5c5c;
269
281
  --color-light-specialbg-primary-grouped: #f3f4f5;
270
282
  --color-light-specialbg-secondary-grouped: #fff;
271
283
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
272
284
  --color-light-text-accent: #ef3124;
273
285
  --color-light-text-attention: #de6a00;
274
286
  --color-light-text-disabled: #dbdee1;
287
+ --color-light-text-disabled-inverted: #485767;
288
+ --color-light-text-disabled-inverted-transparent: rgba(255, 255, 255, 0.25);
275
289
  --color-light-text-disabled-transparent: rgba(11, 31, 53, 0.15);
276
290
  --color-light-text-link: #007aff;
277
291
  --color-light-text-negative: #d91d0b;
@@ -287,10 +301,14 @@
287
301
  --color-light-text-tertiary-inverted-transparent: rgba(255, 255, 255, 0.4);
288
302
  --color-light-text-tertiary-transparent: rgba(11, 31, 53, 0.3);
289
303
  --color-static-bg-accent: #ef3124;
290
- --color-static-bg-primary-dark: #000;
304
+ --color-static-bg-primary-dark: #0b1f35;
291
305
  --color-static-bg-primary-light: #fff;
292
- --color-static-bg-secondary-dark: #2b2b2b;
306
+ --color-static-bg-quaternary-dark: #485767;
307
+ --color-static-bg-quaternary-light: #dbdee1;
308
+ --color-static-bg-secondary-dark: #233549;
293
309
  --color-static-bg-secondary-light: #f3f4f5;
310
+ --color-static-bg-tertiary-dark: #3c4c5d;
311
+ --color-static-bg-tertiary-light: #e7e9eb;
294
312
  --color-static-border-accent: #ef3124;
295
313
  --color-static-graphic-accent: #ef3124;
296
314
  --color-static-graphic-dark: #0b1f35;
@@ -307,69 +325,116 @@
307
325
  --color-static-text-tertiary-light: #6d7986;
308
326
  --color-static-text-tertiary-light-transparent: rgba(255, 255, 255, 0.4);
309
327
  --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
328
+ --color-dark-bg-accent-shade-15: rgb(203, 42, 31);
329
+ --color-dark-bg-accent-shade-20: rgb(191, 39, 29);
310
330
  --color-dark-bg-accent-tint-7: rgb(240, 63, 51);
311
331
  --color-dark-bg-accent-tint-10: rgb(241, 70, 58);
312
332
  --color-dark-bg-accent-tint-15: rgb(241, 80, 69);
313
333
  --color-dark-bg-accent-tint-30: rgb(244, 111, 102);
314
- --color-dark-bg-neutral-alpha-30: rgba(72, 87, 103, 0.3);
315
- --color-dark-bg-neutral-tint-7: rgb(85, 99, 114);
316
- --color-dark-bg-neutral-tint-10: rgb(90, 104, 118);
317
- --color-dark-bg-neutral-tint-15: rgb(99, 112, 126);
318
- --color-dark-bg-neutral-tint-30: rgb(127, 137, 149);
319
- --color-dark-bg-neutral-shade-15: rgb(61, 74, 88);
334
+ --color-dark-bg-primary-alpha-4: rgba(11, 31, 53, 0.04);
320
335
  --color-dark-bg-primary-alpha-8: rgba(11, 31, 53, 0.08);
336
+ --color-dark-bg-primary-alpha-12: rgba(11, 31, 53, 0.12);
337
+ --color-dark-bg-primary-alpha-15: rgba(11, 31, 53, 0.15);
338
+ --color-dark-bg-primary-alpha-16: rgba(11, 31, 53, 0.16);
339
+ --color-dark-bg-primary-alpha-20: rgba(11, 31, 53, 0.2);
340
+ --color-dark-bg-primary-alpha-32: rgba(11, 31, 53, 0.32);
341
+ --color-dark-bg-primary-alpha-37: rgba(11, 31, 53, 0.37);
321
342
  --color-dark-bg-primary-alpha-40: rgba(11, 31, 53, 0.4);
322
343
  --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
344
+ --color-dark-bg-primary-inverted-alpha-4: rgba(255, 255, 255, 0.04);
345
+ --color-dark-bg-primary-inverted-alpha-5: rgba(255, 255, 255, 0.05);
323
346
  --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
347
+ --color-dark-bg-primary-inverted-alpha-8: rgba(255, 255, 255, 0.08);
324
348
  --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
349
+ --color-dark-bg-primary-inverted-alpha-12: rgba(255, 255, 255, 0.12);
325
350
  --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
351
+ --color-dark-bg-primary-inverted-alpha-16: rgba(255, 255, 255, 0.16);
326
352
  --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
353
+ --color-dark-bg-primary-inverted-alpha-24: rgba(255, 255, 255, 0.24);
327
354
  --color-dark-bg-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
355
+ --color-dark-bg-primary-inverted-alpha-32: rgba(255, 255, 255, 0.32);
328
356
  --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
329
357
  --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
330
- --color-dark-bg-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
331
- --color-dark-bg-primary-inverted-alpha-80: rgba(255, 255, 255, 0.8);
332
- --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
333
358
  --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
334
359
  --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
360
+ --color-dark-bg-quaternary-alpha-30: rgba(72, 87, 103, 0.3);
361
+ --color-dark-bg-quaternary-tint-7: rgb(85, 99, 114);
362
+ --color-dark-bg-quaternary-tint-10: rgb(90, 104, 118);
363
+ --color-dark-bg-quaternary-tint-15: rgb(99, 112, 126);
364
+ --color-dark-bg-quaternary-tint-30: rgb(127, 137, 149);
365
+ --color-dark-bg-quaternary-inverted-alpha-30: rgba(219, 222, 225, 0.3);
366
+ --color-dark-bg-quaternary-inverted-shade-15: rgb(186, 189, 191);
367
+ --color-dark-bg-quaternary-inverted-shade-20: rgb(175, 178, 180);
335
368
  --color-dark-bg-secondary-alpha-30: rgba(35, 53, 73, 0.3);
369
+ --color-dark-bg-secondary-shade-15: rgb(30, 45, 62);
370
+ --color-dark-bg-secondary-shade-20: rgb(28, 42, 58);
336
371
  --color-dark-bg-secondary-tint-7: rgb(50, 67, 86);
337
372
  --color-dark-bg-secondary-tint-15: rgb(68, 83, 100);
338
- --color-dark-bg-secondary-inverted-alpha-7: rgba(182, 188, 195, 0.07);
339
- --color-dark-bg-secondary-inverted-alpha-15: rgba(182, 188, 195, 0.15);
340
- --color-dark-bg-secondary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
341
- --color-dark-bg-secondary-inverted-shade-7: rgb(169, 175, 181);
342
- --color-dark-bg-secondary-inverted-shade-15: rgb(155, 160, 166);
343
- --color-dark-bg-secondary-inverted-shade-20: rgb(146, 150, 156);
373
+ --color-dark-bg-secondary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
374
+ --color-dark-bg-secondary-inverted-shade-15: rgb(207, 207, 208);
375
+ --color-dark-bg-secondary-inverted-shade-20: rgb(194, 195, 196);
376
+ --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
377
+ --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
344
378
  --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
345
- --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
379
+ --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
380
+ --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
346
381
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
347
382
  --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
348
383
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
349
384
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
385
+ --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
386
+ --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
350
387
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
351
- --color-dark-graphic-negative-shade-50: rgb(121, 40, 35);
352
- --color-dark-graphic-neutral-tint-10: rgb(90, 104, 118);
388
+ --color-dark-graphic-negative-tint-7: rgb(242, 92, 82);
389
+ --color-dark-graphic-negative-tint-15: rgb(243, 106, 97);
390
+ --color-dark-graphic-negative-tint-30: rgb(245, 133, 125);
353
391
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
354
392
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
355
393
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
356
394
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
357
395
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
396
+ --color-dark-graphic-primary-alpha-60: rgba(255, 255, 255, 0.6);
358
397
  --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
398
+ --color-dark-graphic-primary-shade-20: rgb(204, 204, 204);
359
399
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
360
- --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
361
400
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
362
401
  --color-dark-graphic-primary-tint-30: rgb(255, 255, 255);
402
+ --color-dark-graphic-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
403
+ --color-dark-graphic-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
404
+ --color-dark-graphic-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
405
+ --color-dark-graphic-primary-inverted-alpha-60: rgba(11, 31, 53, 0.6);
406
+ --color-dark-graphic-primary-inverted-tint-7: rgb(28, 47, 67);
407
+ --color-dark-graphic-primary-inverted-tint-10: rgb(35, 53, 73);
408
+ --color-dark-graphic-primary-inverted-tint-15: rgb(48, 65, 83);
409
+ --color-dark-graphic-primary-inverted-tint-30: rgb(84, 98, 114);
410
+ --color-dark-graphic-quaternary-tint-10: rgb(90, 104, 118);
363
411
  --color-dark-graphic-secondary-alpha-30: rgba(182, 188, 195, 0.3);
364
412
  --color-dark-graphic-secondary-tint-30: rgb(204, 208, 213);
365
413
  --color-dark-graphic-secondary-tint-50: rgb(219, 222, 225);
366
- --color-dark-specialbg-component-tint-7: rgb(85, 99, 114);
367
- --color-dark-specialbg-component-tint-10: rgb(90, 104, 118);
368
- --color-dark-specialbg-component-tint-30: rgb(127, 137, 149);
369
- --color-dark-specialbg-component-alpha-2: rgba(72, 87, 103, 0.02);
370
- --color-dark-specialbg-component-alpha-14: rgba(72, 87, 103, 0.14);
371
- --color-dark-specialbg-component-alpha-23: rgba(72, 87, 103, 0.23);
414
+ --color-dark-graphic-secondary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
415
+ --color-dark-graphic-secondary-inverted-shade-15: rgb(93, 103, 114);
416
+ --color-dark-graphic-secondary-inverted-shade-20: rgb(87, 97, 107);
417
+ --color-dark-graphic-secondary-inverted-tint-10: rgb(124, 134, 146);
418
+ --color-dark-graphic-secondary-inverted-tint-30: rgb(153, 161, 170);
419
+ --color-dark-graphic-tertiary-alpha-30: rgba(109, 121, 134, 0.3);
420
+ --color-dark-graphic-tertiary-shade-15: rgb(93, 103, 114);
421
+ --color-dark-graphic-tertiary-shade-20: rgb(87, 97, 107);
422
+ --color-dark-graphic-tertiary-tint-7: rgb(119, 130, 142);
423
+ --color-dark-graphic-tertiary-tint-15: rgb(131, 141, 152);
424
+ --color-dark-graphic-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
425
+ --color-dark-graphic-tertiary-inverted-shade-15: rgb(155, 160, 166);
426
+ --color-dark-graphic-tertiary-inverted-shade-20: rgb(146, 150, 156);
427
+ --color-dark-specialbg-component-tint-7: rgba(255, 255, 255, 0.2095);
428
+ --color-dark-specialbg-component-tint-10: rgba(255, 255, 255, 0.235);
429
+ --color-dark-specialbg-component-tint-15: rgba(255, 255, 255, 0.2775);
430
+ --color-dark-specialbg-component-tint-30: rgba(255, 255, 255, 0.405);
431
+ --color-dark-specialbg-component-alpha-2: rgba(255, 255, 255, 0.02);
432
+ --color-dark-specialbg-component-alpha-14: rgba(255, 255, 255, 0.14);
433
+ --color-dark-specialbg-component-alpha-23: rgba(255, 255, 255, 0.23);
434
+ --color-dark-specialbg-component-alpha-30: rgba(255, 255, 255, 0.3);
435
+ --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3);
372
436
  --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
437
+ --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256);
373
438
  --color-dark-text-link-shade-30: rgb(0, 85, 179);
374
439
  --color-dark-text-link-shade-50: rgb(0, 61, 128);
375
440
  --color-dark-text-link-tint-20: rgb(51, 149, 255);
@@ -379,79 +444,131 @@
379
444
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
380
445
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
381
446
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
447
+ --color-dark-text-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
382
448
  --color-dark-text-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
449
+ --color-dark-text-primary-inverted-shade-20: rgb(9, 25, 42);
383
450
  --color-dark-text-primary-inverted-shade-30: rgb(8, 22, 37);
384
- --color-dark-text-primary-inverted-shade-50: rgb(6, 16, 26);
451
+ --color-dark-text-primary-inverted-tint-7: rgb(28, 47, 67);
452
+ --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
453
+ --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
454
+ --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
455
+ --color-dark-text-secondary-shade-20: rgb(146, 150, 156);
385
456
  --color-dark-text-secondary-shade-30: rgb(127, 132, 136);
386
- --color-dark-text-secondary-shade-50: rgb(91, 94, 98);
387
457
  --color-dark-text-secondary-tint-20: rgb(197, 201, 207);
388
458
  --color-dark-text-secondary-tint-40: rgb(211, 215, 219);
389
- --color-dark-text-secondary-inverted-shade-30: rgb(76, 85, 94);
390
- --color-dark-text-secondary-inverted-shade-50: rgb(55, 61, 67);
459
+ --color-dark-text-secondary-inverted-shade-20: rgb(67, 78, 91);
460
+ --color-dark-text-secondary-inverted-shade-30: rgb(59, 69, 80);
391
461
  --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
462
+ --color-light-bg-accent-tint-15: rgb(241, 80, 69);
463
+ --color-light-bg-accent-tint-20: rgb(242, 90, 80);
392
464
  --color-light-bg-accent-shade-7: rgb(222, 46, 33);
393
465
  --color-light-bg-accent-shade-10: rgb(215, 44, 32);
394
466
  --color-light-bg-accent-shade-15: rgb(203, 42, 31);
395
467
  --color-light-bg-accent-shade-30: rgb(167, 34, 25);
396
- --color-light-bg-neutral-alpha-30: rgba(219, 222, 225, 0.3);
397
- --color-light-bg-neutral-shade-7: rgb(204, 206, 209);
398
- --color-light-bg-neutral-shade-10: rgb(197, 200, 203);
399
- --color-light-bg-neutral-shade-15: rgb(186, 189, 191);
400
- --color-light-bg-neutral-shade-30: rgb(153, 155, 157);
401
- --color-light-bg-neutral-tint-15: rgb(224, 227, 230);
468
+ --color-light-bg-primary-alpha-4: rgba(255, 255, 255, 0.04);
402
469
  --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
470
+ --color-light-bg-primary-alpha-12: rgba(255, 255, 255, 0.12);
471
+ --color-light-bg-primary-alpha-15: rgba(255, 255, 255, 0.15);
472
+ --color-light-bg-primary-alpha-16: rgba(255, 255, 255, 0.16);
473
+ --color-light-bg-primary-alpha-20: rgba(255, 255, 255, 0.2);
474
+ --color-light-bg-primary-alpha-32: rgba(255, 255, 255, 0.32);
475
+ --color-light-bg-primary-alpha-37: rgba(255, 255, 255, 0.37);
403
476
  --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
404
477
  --color-light-bg-primary-inverted-alpha-3: rgba(11, 31, 53, 0.03);
478
+ --color-light-bg-primary-inverted-alpha-4: rgba(11, 31, 53, 0.04);
479
+ --color-light-bg-primary-inverted-alpha-5: rgba(11, 31, 53, 0.05);
405
480
  --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
481
+ --color-light-bg-primary-inverted-alpha-8: rgba(11, 31, 53, 0.08);
406
482
  --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
483
+ --color-light-bg-primary-inverted-alpha-12: rgba(11, 31, 53, 0.12);
407
484
  --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
485
+ --color-light-bg-primary-inverted-alpha-16: rgba(11, 31, 53, 0.16);
408
486
  --color-light-bg-primary-inverted-alpha-20: rgba(11, 31, 53, 0.2);
487
+ --color-light-bg-primary-inverted-alpha-24: rgba(11, 31, 53, 0.24);
409
488
  --color-light-bg-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
489
+ --color-light-bg-primary-inverted-alpha-32: rgba(11, 31, 53, 0.32);
410
490
  --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
411
491
  --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
412
- --color-light-bg-primary-inverted-alpha-60: rgba(11, 31, 53, 0.6);
413
- --color-light-bg-primary-inverted-alpha-80: rgba(11, 31, 53, 0.8);
414
- --color-light-bg-primary-inverted-tint-7: rgb(28, 47, 67);
415
492
  --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
416
493
  --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
494
+ --color-light-bg-quaternary-alpha-30: rgba(219, 222, 225, 0.3);
495
+ --color-light-bg-quaternary-shade-7: rgb(204, 206, 209);
496
+ --color-light-bg-quaternary-shade-10: rgb(197, 200, 203);
497
+ --color-light-bg-quaternary-shade-15: rgb(186, 189, 191);
498
+ --color-light-bg-quaternary-shade-30: rgb(153, 155, 157);
499
+ --color-light-bg-quaternary-inverted-alpha-30: rgba(72, 87, 103, 0.3);
500
+ --color-light-bg-quaternary-inverted-tint-15: rgb(99, 112, 126);
501
+ --color-light-bg-quaternary-inverted-tint-20: rgb(109, 121, 133);
417
502
  --color-light-bg-secondary-alpha-30: rgba(243, 244, 245, 0.3);
503
+ --color-light-bg-secondary-tint-15: rgb(245, 246, 246);
504
+ --color-light-bg-secondary-tint-20: rgb(245, 246, 247);
418
505
  --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
419
506
  --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
420
- --color-light-bg-secondary-inverted-alpha-7: rgba(35, 53, 73, 0.07);
421
- --color-light-bg-secondary-inverted-alpha-15: rgba(35, 53, 73, 0.15);
422
507
  --color-light-bg-secondary-inverted-alpha-30: rgba(35, 53, 73, 0.3);
423
- --color-light-bg-secondary-inverted-tint-7: rgb(50, 67, 86);
424
508
  --color-light-bg-secondary-inverted-tint-15: rgb(68, 83, 100);
425
509
  --color-light-bg-secondary-inverted-tint-20: rgb(79, 93, 109);
510
+ --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
511
+ --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
426
512
  --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
427
- --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
513
+ --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
514
+ --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
428
515
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
429
516
  --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
430
517
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
431
518
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
519
+ --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
520
+ --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
432
521
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
433
- --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
434
- --color-light-graphic-neutral-shade-10: rgb(197, 200, 203);
522
+ --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
523
+ --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
524
+ --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
435
525
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
436
526
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
437
527
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
438
528
  --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
439
529
  --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
530
+ --color-light-graphic-primary-alpha-60: rgba(11, 31, 53, 0.6);
440
531
  --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
532
+ --color-light-graphic-primary-tint-20: rgb(60, 76, 93);
441
533
  --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
442
- --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
443
534
  --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
444
535
  --color-light-graphic-primary-shade-30: rgb(8, 22, 37);
536
+ --color-light-graphic-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
537
+ --color-light-graphic-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
538
+ --color-light-graphic-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
539
+ --color-light-graphic-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
540
+ --color-light-graphic-primary-inverted-shade-7: rgb(237, 237, 237);
541
+ --color-light-graphic-primary-inverted-shade-10: rgb(230, 230, 230);
542
+ --color-light-graphic-primary-inverted-shade-15: rgb(217, 217, 217);
543
+ --color-light-graphic-primary-inverted-shade-30: rgb(179, 179, 179);
544
+ --color-light-graphic-quaternary-shade-10: rgb(197, 200, 203);
445
545
  --color-light-graphic-secondary-alpha-30: rgba(109, 121, 134, 0.3);
446
546
  --color-light-graphic-secondary-shade-30: rgb(76, 85, 94);
447
547
  --color-light-graphic-secondary-shade-50: rgb(55, 61, 67);
548
+ --color-light-graphic-secondary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
549
+ --color-light-graphic-secondary-inverted-tint-15: rgb(193, 198, 204);
550
+ --color-light-graphic-secondary-inverted-tint-20: rgb(197, 201, 207);
551
+ --color-light-graphic-secondary-inverted-shade-10: rgb(164, 169, 176);
552
+ --color-light-graphic-secondary-inverted-shade-30: rgb(127, 132, 136);
553
+ --color-light-graphic-tertiary-alpha-30: rgba(182, 188, 195, 0.3);
554
+ --color-light-graphic-tertiary-tint-15: rgb(193, 198, 204);
555
+ --color-light-graphic-tertiary-tint-20: rgb(197, 201, 207);
556
+ --color-light-graphic-tertiary-shade-7: rgb(169, 175, 181);
557
+ --color-light-graphic-tertiary-shade-15: rgb(155, 160, 166);
558
+ --color-light-graphic-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
559
+ --color-light-graphic-tertiary-inverted-tint-15: rgb(131, 141, 152);
560
+ --color-light-graphic-tertiary-inverted-tint-20: rgb(138, 148, 158);
448
561
  --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
449
562
  --color-light-specialbg-component-shade-10: rgba(10, 28, 48, 0.163);
563
+ --color-light-specialbg-component-shade-15: rgba(9, 26, 45, 0.2095);
450
564
  --color-light-specialbg-component-shade-30: rgba(8, 22, 37, 0.349);
451
565
  --color-light-specialbg-component-alpha-2: rgba(11, 31, 53, 0.02);
452
566
  --color-light-specialbg-component-alpha-14: rgba(11, 31, 53, 0.14);
453
567
  --color-light-specialbg-component-alpha-23: rgba(11, 31, 53, 0.23);
568
+ --color-light-specialbg-component-alpha-30: rgba(11, 31, 53, 0.3);
569
+ --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
454
570
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
571
+ --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.32);
455
572
  --color-light-text-link-tint-30: rgb(77, 162, 255);
456
573
  --color-light-text-link-tint-50: rgb(128, 189, 255);
457
574
  --color-light-text-link-shade-20: rgb(0, 98, 204);
@@ -461,17 +578,23 @@
461
578
  --color-light-text-primary-tint-50: rgb(133, 143, 154);
462
579
  --color-light-text-primary-shade-20: rgb(9, 25, 42);
463
580
  --color-light-text-primary-shade-40: rgb(7, 19, 32);
581
+ --color-light-text-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
464
582
  --color-light-text-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
583
+ --color-light-text-primary-inverted-tint-20: rgb(255, 255, 255);
465
584
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
466
- --color-light-text-primary-inverted-tint-50: rgb(255, 255, 255);
585
+ --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
586
+ --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
587
+ --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
588
+ --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
589
+ --color-light-text-secondary-tint-20: rgb(118, 129, 142);
467
590
  --color-light-text-secondary-tint-30: rgb(135, 145, 156);
468
- --color-light-text-secondary-tint-50: rgb(170, 177, 185);
469
591
  --color-light-text-secondary-shade-20: rgb(67, 78, 91);
470
592
  --color-light-text-secondary-shade-40: rgb(50, 59, 68);
593
+ --color-light-text-secondary-inverted-tint-20: rgb(197, 201, 207);
471
594
  --color-light-text-secondary-inverted-tint-30: rgb(204, 208, 213);
472
- --color-light-text-secondary-inverted-tint-50: rgb(219, 222, 225);
473
- --color-static-bg-primary-dark-alpha-10: rgba(0, 0, 0, 0.1);
474
- --color-static-bg-primary-dark-alpha-20: rgba(0, 0, 0, 0.2);
595
+ --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
596
+ --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
597
+ --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
475
598
  }
476
599
  :root {
477
600
  --color-dynamic-primary-dark: rgba(0, 0, 0, 0.8);
@@ -579,6 +702,7 @@
579
702
  --border-radius-m: 8px;
580
703
  --border-radius-l: 12px;
581
704
  --border-radius-xl: 16px;
705
+ --border-radius-xxl: 20px;
582
706
  --border-radius-circle: 50%;
583
707
  --border-radius-pill: 99px;
584
708
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-vars",
3
- "version": "5.5.3",
3
+ "version": "6.2.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",