@alfalab/core-components-vars 7.0.0 → 7.1.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 (9) hide show
  1. package/colors-bluetint.css +22 -0
  2. package/colors-indigo.css +22 -0
  3. package/cssm/bundle/site.css +22 -0
  4. package/cssm/colors-bluetint.css +22 -0
  5. package/cssm/colors-indigo.css +22 -0
  6. package/cssm/index.css +22 -0
  7. package/package.json +1 -1
  8. package/send-stats.js +1 -1
  9. package/typography.css +216 -208
package/colors-bluetint.css CHANGED
@@ -210,12 +210,15 @@
210
210
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
211
211
  --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
212
212
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
213
+ --color-dark-graphic-negative-alpha-10: rgba(217, 29, 11, 0.1);
213
214
  --color-dark-graphic-negative-alpha-30: rgba(217, 29, 11, 0.3);
215
+ --color-dark-graphic-negative-alpha-40: rgba(217, 29, 11, 0.4);
214
216
  --color-dark-graphic-negative-shade-20: rgb(174, 23, 9);
215
217
  --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
216
218
  --color-dark-graphic-negative-tint-7: rgb(220, 45, 28);
217
219
  --color-dark-graphic-negative-tint-15: rgb(223, 63, 48);
218
220
  --color-dark-graphic-negative-tint-30: rgb(228, 97, 84);
221
+ --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
219
222
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
220
223
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
221
224
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -263,12 +266,18 @@
263
266
  --color-dark-specialbg-component-inverted-alpha-30: rgba(0, 0, 0, 0.3);
264
267
  --color-dark-specialbg-component-inverted-shade-15: rgba(0, 0, 0, 0.218);
265
268
  --color-dark-specialbg-component-inverted-shade-20: rgba(0, 0, 0, 0.264);
269
+ --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.1723);
270
+ --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.2435);
271
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(27, 27, 29, 0.235);
272
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-20: rgba(26, 26, 27, 0.28);
266
273
  --color-dark-text-link-shade-30: rgb(0, 80, 167);
267
274
  --color-dark-text-link-shade-50: rgb(0, 57, 120);
268
275
  --color-dark-text-link-tint-20: rgb(51, 142, 242);
269
276
  --color-dark-text-link-tint-40: rgb(102, 170, 245);
270
277
  --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
278
+ --color-dark-text-primary-shade-24: rgb(194, 194, 194);
271
279
  --color-dark-text-primary-shade-30: rgb(179, 179, 179);
280
+ --color-dark-text-primary-shade-40: rgb(153, 153, 153);
272
281
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
273
282
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
274
283
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
@@ -278,7 +287,9 @@
278
287
  --color-dark-text-primary-inverted-shade-30: rgb(0, 0, 0);
279
288
  --color-dark-text-primary-inverted-tint-7: rgb(18, 18, 18);
280
289
  --color-dark-text-primary-inverted-tint-15: rgb(38, 38, 38);
290
+ --color-dark-text-primary-inverted-tint-24: rgb(61, 61, 61);
281
291
  --color-dark-text-primary-inverted-tint-30: rgb(77, 77, 77);
292
+ --color-dark-text-primary-inverted-tint-40: rgb(102, 102, 102);
282
293
  --color-dark-text-primary-inverted-tint-50: rgb(128, 128, 128);
283
294
  --color-dark-text-secondary-shade-20: rgba(188, 188, 196, 0.68);
284
295
  --color-dark-text-secondary-shade-30: rgba(164, 164, 172, 0.72);
@@ -349,12 +360,15 @@
349
360
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
350
361
  --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
351
362
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
363
+ --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
352
364
  --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
365
+ --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
353
366
  --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
354
367
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
355
368
  --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
356
369
  --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
357
370
  --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
371
+ --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
358
372
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
359
373
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
360
374
  --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
@@ -402,12 +416,18 @@
402
416
  --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
403
417
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.235);
404
418
  --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.28);
419
+ --color-light-specialbg-tertiary-transparent-shade-7: rgba(30, 30, 32, 0.163);
420
+ --color-light-specialbg-tertiary-transparent-shade-15: rgba(27, 27, 29, 0.235);
421
+ --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.2435);
422
+ --color-light-specialbg-tertiary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.288);
405
423
  --color-light-text-link-tint-30: rgb(77, 156, 244);
406
424
  --color-light-text-link-tint-50: rgb(128, 185, 247);
407
425
  --color-light-text-link-shade-20: rgb(0, 91, 191);
408
426
  --color-light-text-link-shade-40: rgb(0, 68, 143);
409
427
  --color-light-text-primary-alpha-30: rgba(0, 0, 0, 0.3);
428
+ --color-light-text-primary-tint-24: rgb(61, 61, 61);
410
429
  --color-light-text-primary-tint-30: rgb(77, 77, 77);
430
+ --color-light-text-primary-tint-40: rgb(102, 102, 102);
411
431
  --color-light-text-primary-tint-50: rgb(128, 128, 128);
412
432
  --color-light-text-primary-shade-20: rgb(0, 0, 0);
413
433
  --color-light-text-primary-shade-40: rgb(0, 0, 0);
@@ -417,7 +437,9 @@
417
437
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
418
438
  --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
419
439
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
440
+ --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
420
441
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
442
+ --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
421
443
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
422
444
  --color-light-text-secondary-tint-20: rgba(99, 99, 105, 0.68);
423
445
  --color-light-text-secondary-tint-30: rgba(119, 119, 123, 0.72);
package/colors-indigo.css CHANGED
@@ -210,12 +210,15 @@
210
210
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
211
211
  --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
212
212
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
213
+ --color-dark-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
213
214
  --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
215
+ --color-dark-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
214
216
  --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
215
217
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
216
218
  --color-dark-graphic-negative-tint-7: rgb(242, 92, 82);
217
219
  --color-dark-graphic-negative-tint-15: rgb(243, 106, 97);
218
220
  --color-dark-graphic-negative-tint-30: rgb(245, 133, 125);
221
+ --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
219
222
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
220
223
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
221
224
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -263,12 +266,18 @@
263
266
  --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3);
264
267
  --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
265
268
  --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256);
269
+ --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.256);
270
+ --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.32);
271
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235);
272
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.28);
266
273
  --color-dark-text-link-shade-30: rgb(0, 85, 179);
267
274
  --color-dark-text-link-shade-50: rgb(0, 61, 128);
268
275
  --color-dark-text-link-tint-20: rgb(51, 149, 255);
269
276
  --color-dark-text-link-tint-40: rgb(102, 175, 255);
270
277
  --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
278
+ --color-dark-text-primary-shade-24: rgb(194, 194, 194);
271
279
  --color-dark-text-primary-shade-30: rgb(179, 179, 179);
280
+ --color-dark-text-primary-shade-40: rgb(153, 153, 153);
272
281
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
273
282
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
274
283
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
@@ -278,7 +287,9 @@
278
287
  --color-dark-text-primary-inverted-shade-30: rgb(8, 22, 37);
279
288
  --color-dark-text-primary-inverted-tint-7: rgb(28, 47, 67);
280
289
  --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
290
+ --color-dark-text-primary-inverted-tint-24: rgb(70, 85, 101);
281
291
  --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
292
+ --color-dark-text-primary-inverted-tint-40: rgb(109, 121, 134);
282
293
  --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
283
294
  --color-dark-text-secondary-shade-20: rgba(204, 204, 204, 0.76);
284
295
  --color-dark-text-secondary-shade-30: rgba(179, 179, 179, 0.79);
@@ -349,12 +360,15 @@
349
360
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
350
361
  --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
351
362
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
363
+ --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
352
364
  --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
365
+ --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
353
366
  --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
354
367
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
355
368
  --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
356
369
  --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
357
370
  --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
371
+ --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
358
372
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
359
373
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
360
374
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
@@ -402,12 +416,18 @@
402
416
  --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
403
417
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
404
418
  --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.32);
419
+ --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163);
420
+ --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235);
421
+ --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.32);
422
+ --color-light-specialbg-tertiary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.36);
405
423
  --color-light-text-link-tint-30: rgb(77, 162, 255);
406
424
  --color-light-text-link-tint-50: rgb(128, 189, 255);
407
425
  --color-light-text-link-shade-20: rgb(0, 98, 204);
408
426
  --color-light-text-link-shade-40: rgb(0, 73, 153);
409
427
  --color-light-text-primary-alpha-30: rgba(11, 31, 53, 0.3);
428
+ --color-light-text-primary-tint-24: rgb(70, 85, 101);
410
429
  --color-light-text-primary-tint-30: rgb(84, 98, 114);
430
+ --color-light-text-primary-tint-40: rgb(109, 121, 134);
411
431
  --color-light-text-primary-tint-50: rgb(133, 143, 154);
412
432
  --color-light-text-primary-shade-20: rgb(9, 25, 42);
413
433
  --color-light-text-primary-shade-40: rgb(7, 19, 32);
@@ -417,7 +437,9 @@
417
437
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
418
438
  --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
419
439
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
440
+ --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
420
441
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
442
+ --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
421
443
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
422
444
  --color-light-text-secondary-tint-20: rgba(60, 76, 93, 0.76);
423
445
  --color-light-text-secondary-tint-30: rgba(84, 98, 114, 0.79);
package/cssm/bundle/site.css CHANGED
@@ -210,12 +210,15 @@
210
210
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
211
211
  --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
212
212
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
213
+ --color-dark-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
213
214
  --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
215
+ --color-dark-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
214
216
  --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
215
217
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
216
218
  --color-dark-graphic-negative-tint-7: rgb(242, 92, 82);
217
219
  --color-dark-graphic-negative-tint-15: rgb(243, 106, 97);
218
220
  --color-dark-graphic-negative-tint-30: rgb(245, 133, 125);
221
+ --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
219
222
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
220
223
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
221
224
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -263,12 +266,18 @@
263
266
  --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3);
264
267
  --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
265
268
  --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256);
269
+ --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.256);
270
+ --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.32);
271
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235);
272
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.28);
266
273
  --color-dark-text-link-shade-30: rgb(0, 85, 179);
267
274
  --color-dark-text-link-shade-50: rgb(0, 61, 128);
268
275
  --color-dark-text-link-tint-20: rgb(51, 149, 255);
269
276
  --color-dark-text-link-tint-40: rgb(102, 175, 255);
270
277
  --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
278
+ --color-dark-text-primary-shade-24: rgb(194, 194, 194);
271
279
  --color-dark-text-primary-shade-30: rgb(179, 179, 179);
280
+ --color-dark-text-primary-shade-40: rgb(153, 153, 153);
272
281
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
273
282
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
274
283
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
@@ -278,7 +287,9 @@
278
287
  --color-dark-text-primary-inverted-shade-30: rgb(8, 22, 37);
279
288
  --color-dark-text-primary-inverted-tint-7: rgb(28, 47, 67);
280
289
  --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
290
+ --color-dark-text-primary-inverted-tint-24: rgb(70, 85, 101);
281
291
  --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
292
+ --color-dark-text-primary-inverted-tint-40: rgb(109, 121, 134);
282
293
  --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
283
294
  --color-dark-text-secondary-shade-20: rgba(204, 204, 204, 0.76);
284
295
  --color-dark-text-secondary-shade-30: rgba(179, 179, 179, 0.79);
@@ -349,12 +360,15 @@
349
360
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
350
361
  --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
351
362
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
363
+ --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
352
364
  --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
365
+ --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
353
366
  --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
354
367
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
355
368
  --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
356
369
  --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
357
370
  --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
371
+ --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
358
372
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
359
373
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
360
374
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
@@ -402,12 +416,18 @@
402
416
  --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
403
417
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
404
418
  --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.32);
419
+ --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163);
420
+ --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235);
421
+ --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.32);
422
+ --color-light-specialbg-tertiary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.36);
405
423
  --color-light-text-link-tint-30: rgb(77, 162, 255);
406
424
  --color-light-text-link-tint-50: rgb(128, 189, 255);
407
425
  --color-light-text-link-shade-20: rgb(0, 98, 204);
408
426
  --color-light-text-link-shade-40: rgb(0, 73, 153);
409
427
  --color-light-text-primary-alpha-30: rgba(11, 31, 53, 0.3);
428
+ --color-light-text-primary-tint-24: rgb(70, 85, 101);
410
429
  --color-light-text-primary-tint-30: rgb(84, 98, 114);
430
+ --color-light-text-primary-tint-40: rgb(109, 121, 134);
411
431
  --color-light-text-primary-tint-50: rgb(133, 143, 154);
412
432
  --color-light-text-primary-shade-20: rgb(9, 25, 42);
413
433
  --color-light-text-primary-shade-40: rgb(7, 19, 32);
@@ -417,7 +437,9 @@
417
437
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
418
438
  --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
419
439
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
440
+ --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
420
441
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
442
+ --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
421
443
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
422
444
  --color-light-text-secondary-tint-20: rgba(60, 76, 93, 0.76);
423
445
  --color-light-text-secondary-tint-30: rgba(84, 98, 114, 0.79);
package/cssm/colors-bluetint.css CHANGED
@@ -210,12 +210,15 @@
210
210
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
211
211
  --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
212
212
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
213
+ --color-dark-graphic-negative-alpha-10: rgba(217, 29, 11, 0.1);
213
214
  --color-dark-graphic-negative-alpha-30: rgba(217, 29, 11, 0.3);
215
+ --color-dark-graphic-negative-alpha-40: rgba(217, 29, 11, 0.4);
214
216
  --color-dark-graphic-negative-shade-20: rgb(174, 23, 9);
215
217
  --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
216
218
  --color-dark-graphic-negative-tint-7: rgb(220, 45, 28);
217
219
  --color-dark-graphic-negative-tint-15: rgb(223, 63, 48);
218
220
  --color-dark-graphic-negative-tint-30: rgb(228, 97, 84);
221
+ --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
219
222
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
220
223
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
221
224
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -263,12 +266,18 @@
263
266
  --color-dark-specialbg-component-inverted-alpha-30: rgba(0, 0, 0, 0.3);
264
267
  --color-dark-specialbg-component-inverted-shade-15: rgba(0, 0, 0, 0.218);
265
268
  --color-dark-specialbg-component-inverted-shade-20: rgba(0, 0, 0, 0.264);
269
+ --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.1723);
270
+ --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.2435);
271
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(27, 27, 29, 0.235);
272
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-20: rgba(26, 26, 27, 0.28);
266
273
  --color-dark-text-link-shade-30: rgb(0, 80, 167);
267
274
  --color-dark-text-link-shade-50: rgb(0, 57, 120);
268
275
  --color-dark-text-link-tint-20: rgb(51, 142, 242);
269
276
  --color-dark-text-link-tint-40: rgb(102, 170, 245);
270
277
  --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
278
+ --color-dark-text-primary-shade-24: rgb(194, 194, 194);
271
279
  --color-dark-text-primary-shade-30: rgb(179, 179, 179);
280
+ --color-dark-text-primary-shade-40: rgb(153, 153, 153);
272
281
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
273
282
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
274
283
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
@@ -278,7 +287,9 @@
278
287
  --color-dark-text-primary-inverted-shade-30: rgb(0, 0, 0);
279
288
  --color-dark-text-primary-inverted-tint-7: rgb(18, 18, 18);
280
289
  --color-dark-text-primary-inverted-tint-15: rgb(38, 38, 38);
290
+ --color-dark-text-primary-inverted-tint-24: rgb(61, 61, 61);
281
291
  --color-dark-text-primary-inverted-tint-30: rgb(77, 77, 77);
292
+ --color-dark-text-primary-inverted-tint-40: rgb(102, 102, 102);
282
293
  --color-dark-text-primary-inverted-tint-50: rgb(128, 128, 128);
283
294
  --color-dark-text-secondary-shade-20: rgba(188, 188, 196, 0.68);
284
295
  --color-dark-text-secondary-shade-30: rgba(164, 164, 172, 0.72);
@@ -349,12 +360,15 @@
349
360
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
350
361
  --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
351
362
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
363
+ --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
352
364
  --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
365
+ --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
353
366
  --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
354
367
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
355
368
  --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
356
369
  --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
357
370
  --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
371
+ --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
358
372
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
359
373
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
360
374
  --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
@@ -402,12 +416,18 @@
402
416
  --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
403
417
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.235);
404
418
  --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.28);
419
+ --color-light-specialbg-tertiary-transparent-shade-7: rgba(30, 30, 32, 0.163);
420
+ --color-light-specialbg-tertiary-transparent-shade-15: rgba(27, 27, 29, 0.235);
421
+ --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.2435);
422
+ --color-light-specialbg-tertiary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.288);
405
423
  --color-light-text-link-tint-30: rgb(77, 156, 244);
406
424
  --color-light-text-link-tint-50: rgb(128, 185, 247);
407
425
  --color-light-text-link-shade-20: rgb(0, 91, 191);
408
426
  --color-light-text-link-shade-40: rgb(0, 68, 143);
409
427
  --color-light-text-primary-alpha-30: rgba(0, 0, 0, 0.3);
428
+ --color-light-text-primary-tint-24: rgb(61, 61, 61);
410
429
  --color-light-text-primary-tint-30: rgb(77, 77, 77);
430
+ --color-light-text-primary-tint-40: rgb(102, 102, 102);
411
431
  --color-light-text-primary-tint-50: rgb(128, 128, 128);
412
432
  --color-light-text-primary-shade-20: rgb(0, 0, 0);
413
433
  --color-light-text-primary-shade-40: rgb(0, 0, 0);
@@ -417,7 +437,9 @@
417
437
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
418
438
  --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
419
439
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
440
+ --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
420
441
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
442
+ --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
421
443
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
422
444
  --color-light-text-secondary-tint-20: rgba(99, 99, 105, 0.68);
423
445
  --color-light-text-secondary-tint-30: rgba(119, 119, 123, 0.72);
package/cssm/colors-indigo.css CHANGED
@@ -210,12 +210,15 @@
210
210
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
211
211
  --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
212
212
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
213
+ --color-dark-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
213
214
  --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
215
+ --color-dark-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
214
216
  --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
215
217
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
216
218
  --color-dark-graphic-negative-tint-7: rgb(242, 92, 82);
217
219
  --color-dark-graphic-negative-tint-15: rgb(243, 106, 97);
218
220
  --color-dark-graphic-negative-tint-30: rgb(245, 133, 125);
221
+ --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
219
222
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
220
223
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
221
224
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -263,12 +266,18 @@
263
266
  --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3);
264
267
  --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
265
268
  --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256);
269
+ --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.256);
270
+ --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.32);
271
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235);
272
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.28);
266
273
  --color-dark-text-link-shade-30: rgb(0, 85, 179);
267
274
  --color-dark-text-link-shade-50: rgb(0, 61, 128);
268
275
  --color-dark-text-link-tint-20: rgb(51, 149, 255);
269
276
  --color-dark-text-link-tint-40: rgb(102, 175, 255);
270
277
  --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
278
+ --color-dark-text-primary-shade-24: rgb(194, 194, 194);
271
279
  --color-dark-text-primary-shade-30: rgb(179, 179, 179);
280
+ --color-dark-text-primary-shade-40: rgb(153, 153, 153);
272
281
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
273
282
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
274
283
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
@@ -278,7 +287,9 @@
278
287
  --color-dark-text-primary-inverted-shade-30: rgb(8, 22, 37);
279
288
  --color-dark-text-primary-inverted-tint-7: rgb(28, 47, 67);
280
289
  --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
290
+ --color-dark-text-primary-inverted-tint-24: rgb(70, 85, 101);
281
291
  --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
292
+ --color-dark-text-primary-inverted-tint-40: rgb(109, 121, 134);
282
293
  --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
283
294
  --color-dark-text-secondary-shade-20: rgba(204, 204, 204, 0.76);
284
295
  --color-dark-text-secondary-shade-30: rgba(179, 179, 179, 0.79);
@@ -349,12 +360,15 @@
349
360
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
350
361
  --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
351
362
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
363
+ --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
352
364
  --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
365
+ --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
353
366
  --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
354
367
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
355
368
  --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
356
369
  --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
357
370
  --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
371
+ --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
358
372
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
359
373
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
360
374
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
@@ -402,12 +416,18 @@
402
416
  --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
403
417
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
404
418
  --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.32);
419
+ --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163);
420
+ --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235);
421
+ --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.32);
422
+ --color-light-specialbg-tertiary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.36);
405
423
  --color-light-text-link-tint-30: rgb(77, 162, 255);
406
424
  --color-light-text-link-tint-50: rgb(128, 189, 255);
407
425
  --color-light-text-link-shade-20: rgb(0, 98, 204);
408
426
  --color-light-text-link-shade-40: rgb(0, 73, 153);
409
427
  --color-light-text-primary-alpha-30: rgba(11, 31, 53, 0.3);
428
+ --color-light-text-primary-tint-24: rgb(70, 85, 101);
410
429
  --color-light-text-primary-tint-30: rgb(84, 98, 114);
430
+ --color-light-text-primary-tint-40: rgb(109, 121, 134);
411
431
  --color-light-text-primary-tint-50: rgb(133, 143, 154);
412
432
  --color-light-text-primary-shade-20: rgb(9, 25, 42);
413
433
  --color-light-text-primary-shade-40: rgb(7, 19, 32);
@@ -417,7 +437,9 @@
417
437
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
418
438
  --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
419
439
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
440
+ --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
420
441
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
442
+ --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
421
443
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
422
444
  --color-light-text-secondary-tint-20: rgba(60, 76, 93, 0.76);
423
445
  --color-light-text-secondary-tint-30: rgba(84, 98, 114, 0.79);
package/cssm/index.css CHANGED
@@ -379,12 +379,15 @@
379
379
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
380
380
  --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
381
381
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
382
+ --color-dark-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
382
383
  --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
384
+ --color-dark-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
383
385
  --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
384
386
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
385
387
  --color-dark-graphic-negative-tint-7: rgb(242, 92, 82);
386
388
  --color-dark-graphic-negative-tint-15: rgb(243, 106, 97);
387
389
  --color-dark-graphic-negative-tint-30: rgb(245, 133, 125);
390
+ --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
388
391
  --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
389
392
  --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
390
393
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -432,12 +435,18 @@
432
435
  --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3);
433
436
  --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
434
437
  --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256);
438
+ --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.256);
439
+ --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.32);
440
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235);
441
+ --color-dark-specialbg-tertiary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.28);
435
442
  --color-dark-text-link-shade-30: rgb(0, 85, 179);
436
443
  --color-dark-text-link-shade-50: rgb(0, 61, 128);
437
444
  --color-dark-text-link-tint-20: rgb(51, 149, 255);
438
445
  --color-dark-text-link-tint-40: rgb(102, 175, 255);
439
446
  --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
447
+ --color-dark-text-primary-shade-24: rgb(194, 194, 194);
440
448
  --color-dark-text-primary-shade-30: rgb(179, 179, 179);
449
+ --color-dark-text-primary-shade-40: rgb(153, 153, 153);
441
450
  --color-dark-text-primary-shade-50: rgb(128, 128, 128);
442
451
  --color-dark-text-primary-tint-20: rgb(255, 255, 255);
443
452
  --color-dark-text-primary-tint-40: rgb(255, 255, 255);
@@ -447,7 +456,9 @@
447
456
  --color-dark-text-primary-inverted-shade-30: rgb(8, 22, 37);
448
457
  --color-dark-text-primary-inverted-tint-7: rgb(28, 47, 67);
449
458
  --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
459
+ --color-dark-text-primary-inverted-tint-24: rgb(70, 85, 101);
450
460
  --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
461
+ --color-dark-text-primary-inverted-tint-40: rgb(109, 121, 134);
451
462
  --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
452
463
  --color-dark-text-secondary-shade-20: rgba(204, 204, 204, 0.76);
453
464
  --color-dark-text-secondary-shade-30: rgba(179, 179, 179, 0.79);
@@ -518,12 +529,15 @@
518
529
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
519
530
  --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
520
531
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
532
+ --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
521
533
  --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
534
+ --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
522
535
  --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
523
536
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
524
537
  --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
525
538
  --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
526
539
  --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
540
+ --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
527
541
  --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
528
542
  --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
529
543
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
@@ -571,12 +585,18 @@
571
585
  --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
572
586
  --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
573
587
  --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.32);
588
+ --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163);
589
+ --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235);
590
+ --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.32);
591
+ --color-light-specialbg-tertiary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.36);
574
592
  --color-light-text-link-tint-30: rgb(77, 162, 255);
575
593
  --color-light-text-link-tint-50: rgb(128, 189, 255);
576
594
  --color-light-text-link-shade-20: rgb(0, 98, 204);
577
595
  --color-light-text-link-shade-40: rgb(0, 73, 153);
578
596
  --color-light-text-primary-alpha-30: rgba(11, 31, 53, 0.3);
597
+ --color-light-text-primary-tint-24: rgb(70, 85, 101);
579
598
  --color-light-text-primary-tint-30: rgb(84, 98, 114);
599
+ --color-light-text-primary-tint-40: rgb(109, 121, 134);
580
600
  --color-light-text-primary-tint-50: rgb(133, 143, 154);
581
601
  --color-light-text-primary-shade-20: rgb(9, 25, 42);
582
602
  --color-light-text-primary-shade-40: rgb(7, 19, 32);
@@ -586,7 +606,9 @@
586
606
  --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
587
607
  --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
588
608
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
609
+ --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
589
610
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
611
+ --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
590
612
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
591
613
  --color-light-text-secondary-tint-20: rgba(60, 76, 93, 0.76);
592
614
  --color-light-text-secondary-tint-30: rgba(84, 98, 114, 0.79);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-vars",
3
- "version": "7.0.0",
3
+ "version": "7.1.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/send-stats.js CHANGED
@@ -55,7 +55,7 @@ async function main() {
55
55
  };
56
56
 
57
57
  return new Promise((resolve, reject) => {
58
- const req = http.request(options, res => {
58
+ const req = http.request(options, (res) => {
59
59
  res.on('end', () => {
60
60
  resolve();
61
61
  });
package/typography.css CHANGED
@@ -5,100 +5,24 @@
5
5
  'Helvetica Neue', Helvetica, sans-serif;
6
6
  }
7
7
 
8
- @define-mixin headline_xlarge {
9
- font-size: 48px;
10
- line-height: 64px;
11
- font-weight: 500;
12
- font-feature-settings: 'ss01';
13
- font-family: var(--font-family-styrene);
14
- }
15
-
16
- @define-mixin headline_large {
17
- font-size: 40px;
18
- line-height: 48px;
19
- font-weight: 500;
20
- font-feature-settings: 'ss01';
21
- font-family: var(--font-family-styrene);
22
- }
23
-
24
- @define-mixin headline_medium {
25
- font-size: 32px;
26
- line-height: 40px;
27
- font-weight: 500;
28
- font-feature-settings: 'ss01';
29
- font-family: var(--font-family-styrene);
30
- }
31
-
32
- @define-mixin headline_small {
33
- font-size: 24px;
34
- line-height: 32px;
35
- font-weight: 500;
36
- font-feature-settings: 'ss01';
37
- font-family: var(--font-family-styrene);
38
- }
39
-
40
- @define-mixin headline_xsmall {
41
- font-size: 20px;
42
- line-height: 24px;
43
- font-weight: 500;
44
- font-feature-settings: 'ss01';
45
- font-family: var(--font-family-styrene);
46
- }
47
-
48
- @define-mixin paragraph_primary_large {
49
- font-size: 18px;
50
- line-height: 24px;
51
- font-weight: 400;
52
- }
53
-
54
- @define-mixin paragraph_primary_medium {
55
- font-size: 16px;
56
- line-height: 24px;
57
- font-weight: 400;
58
- }
59
-
60
- @define-mixin paragraph_primary_small {
61
- font-size: 14px;
62
- line-height: 20px;
63
- font-weight: 400;
64
- }
65
-
66
- @define-mixin paragraph_secondary_large {
67
- font-size: 13px;
68
- line-height: 16px;
69
- font-weight: 400;
70
- }
71
-
72
- @define-mixin paragraph_secondary_medium {
8
+ @define-mixin accent_caps {
73
9
  font-size: 12px;
74
10
  line-height: 16px;
75
- font-weight: 400;
76
- }
77
-
78
- @define-mixin paragraph_secondary_small {
79
- font-size: 11px;
80
- line-height: 16px;
81
- font-weight: 400;
11
+ font-weight: 700;
12
+ letter-spacing: 1.25px;
13
+ text-transform: uppercase;
82
14
  }
83
15
 
84
- @define-mixin paragraph_component_primary {
16
+ @define-mixin accent_component_primary {
85
17
  font-size: 16px;
86
18
  line-height: 20px;
87
- font-weight: 400;
19
+ font-weight: 700;
88
20
  }
89
21
 
90
- @define-mixin paragraph_component_secondary {
22
+ @define-mixin accent_component_secondary {
91
23
  font-size: 14px;
92
24
  line-height: 18px;
93
- font-weight: 400;
94
- }
95
-
96
- @define-mixin paragraph_caps {
97
- font-size: 12px;
98
- line-height: 16px;
99
- font-weight: 500;
100
- letter-spacing: 1.25px;
101
- text-transform: uppercase;
25
+ font-weight: 700;
102
26
  }
103
27
 
104
28
  @define-mixin accent_primary_large {
@@ -137,19 +61,7 @@
137
61
  font-weight: 700;
138
62
  }
139
63
 
140
- @define-mixin accent_component_primary {
141
- font-size: 16px;
142
- line-height: 20px;
143
- font-weight: 700;
144
- }
145
-
146
- @define-mixin accent_component_secondary {
147
- font-size: 14px;
148
- line-height: 18px;
149
- font-weight: 700;
150
- }
151
-
152
- @define-mixin accent_caps {
64
+ @define-mixin action_caps {
153
65
  font-size: 12px;
154
66
  line-height: 16px;
155
67
  font-weight: 700;
@@ -157,34 +69,16 @@
157
69
  text-transform: uppercase;
158
70
  }
159
71
 
160
- @define-mixin headline-system_xlarge {
161
- font-size: 48px;
162
- line-height: 52px;
163
- font-weight: 700;
164
- }
165
-
166
- @define-mixin headline-system_large {
167
- font-size: 40px;
168
- line-height: 48px;
169
- font-weight: 700;
170
- }
171
-
172
- @define-mixin headline-system_medium {
173
- font-size: 30px;
174
- line-height: 36px;
175
- font-weight: 700;
176
- }
177
-
178
- @define-mixin headline-system_small {
179
- font-size: 22px;
180
- line-height: 26px;
181
- font-weight: 700;
72
+ @define-mixin action_component_primary {
73
+ font-size: 16px;
74
+ line-height: 20px;
75
+ font-weight: 500;
182
76
  }
183
77
 
184
- @define-mixin headline-system_xsmall {
185
- font-size: 18px;
186
- line-height: 22px;
187
- font-weight: 700;
78
+ @define-mixin action_component_secondary {
79
+ font-size: 14px;
80
+ line-height: 18px;
81
+ font-weight: 500;
188
82
  }
189
83
 
190
84
  @define-mixin action_primary_large {
@@ -223,69 +117,141 @@
223
117
  font-weight: 500;
224
118
  }
225
119
 
226
- @define-mixin action_component_primary {
120
+ @define-mixin headline-mobile_large {
121
+ font-size: 30px;
122
+ line-height: 36px;
123
+ font-weight: 500;
124
+ font-feature-settings: 'ss01';
125
+ font-family: var(--font-family-styrene);
126
+ }
127
+
128
+ @define-mixin headline-mobile_medium {
129
+ font-size: 26px;
130
+ line-height: 32px;
131
+ font-weight: 500;
132
+ font-feature-settings: 'ss01';
133
+ font-family: var(--font-family-styrene);
134
+ }
135
+
136
+ @define-mixin headline-mobile_small {
137
+ font-size: 20px;
138
+ line-height: 28px;
139
+ font-weight: 500;
140
+ font-feature-settings: 'ss01';
141
+ font-family: var(--font-family-styrene);
142
+ }
143
+
144
+ @define-mixin headline-mobile_xlarge {
145
+ font-size: 34px;
146
+ line-height: 40px;
147
+ font-weight: 500;
148
+ font-feature-settings: 'ss01';
149
+ font-family: var(--font-family-styrene);
150
+ }
151
+
152
+ @define-mixin headline-mobile_xsmall {
227
153
  font-size: 16px;
228
154
  line-height: 20px;
229
155
  font-weight: 500;
156
+ font-feature-settings: 'ss01';
157
+ font-family: var(--font-family-styrene);
230
158
  }
231
159
 
232
- @define-mixin action_component_secondary {
233
- font-size: 14px;
234
- line-height: 18px;
235
- font-weight: 500;
160
+ @define-mixin headline-system-mobile_large {
161
+ font-size: 30px;
162
+ line-height: 36px;
163
+ font-weight: 600;
236
164
  }
237
165
 
238
- @define-mixin action_caps {
239
- font-size: 12px;
240
- line-height: 16px;
166
+ @define-mixin headline-system-mobile_medium {
167
+ font-size: 26px;
168
+ line-height: 32px;
169
+ font-weight: 600;
170
+ }
171
+
172
+ @define-mixin headline-system-mobile_small {
173
+ font-size: 20px;
174
+ line-height: 28px;
175
+ font-weight: 600;
176
+ }
177
+
178
+ @define-mixin headline-system-mobile_xlarge {
179
+ font-size: 34px;
180
+ line-height: 40px;
181
+ font-weight: 600;
182
+ }
183
+
184
+ @define-mixin headline-system-mobile_xsmall {
185
+ font-size: 16px;
186
+ line-height: 20px;
187
+ font-weight: 600;
188
+ }
189
+
190
+ @define-mixin headline-system_large {
191
+ font-size: 40px;
192
+ line-height: 48px;
241
193
  font-weight: 700;
242
- letter-spacing: 1.25px;
243
- text-transform: uppercase;
244
194
  }
245
195
 
246
- @define-mixin promo_xlarge {
196
+ @define-mixin headline-system_medium {
197
+ font-size: 30px;
198
+ line-height: 36px;
199
+ font-weight: 700;
200
+ }
201
+
202
+ @define-mixin headline-system_small {
203
+ font-size: 22px;
204
+ line-height: 26px;
205
+ font-weight: 700;
206
+ }
207
+
208
+ @define-mixin headline-system_xlarge {
247
209
  font-size: 48px;
248
- line-height: 64px;
249
- font-weight: 400;
250
- font-feature-settings: 'ss01';
251
- font-family: var(--font-family-styrene);
210
+ line-height: 52px;
211
+ font-weight: 700;
252
212
  }
253
213
 
254
- @define-mixin promo_large {
214
+ @define-mixin headline-system_xsmall {
215
+ font-size: 18px;
216
+ line-height: 22px;
217
+ font-weight: 700;
218
+ }
219
+
220
+ @define-mixin headline_large {
255
221
  font-size: 40px;
256
222
  line-height: 48px;
257
- font-weight: 400;
223
+ font-weight: 500;
258
224
  font-feature-settings: 'ss01';
259
225
  font-family: var(--font-family-styrene);
260
226
  }
261
227
 
262
- @define-mixin promo_medium {
228
+ @define-mixin headline_medium {
263
229
  font-size: 32px;
264
230
  line-height: 40px;
265
- font-weight: 400;
231
+ font-weight: 500;
266
232
  font-feature-settings: 'ss01';
267
233
  font-family: var(--font-family-styrene);
268
234
  }
269
235
 
270
- @define-mixin promo_small {
236
+ @define-mixin headline_small {
271
237
  font-size: 24px;
272
238
  line-height: 32px;
273
- font-weight: 400;
239
+ font-weight: 500;
274
240
  font-feature-settings: 'ss01';
275
241
  font-family: var(--font-family-styrene);
276
242
  }
277
243
 
278
- @define-mixin promo_xsmall {
279
- font-size: 20px;
280
- line-height: 24px;
281
- font-weight: 400;
244
+ @define-mixin headline_xlarge {
245
+ font-size: 48px;
246
+ line-height: 64px;
247
+ font-weight: 500;
282
248
  font-feature-settings: 'ss01';
283
249
  font-family: var(--font-family-styrene);
284
250
  }
285
251
 
286
- @define-mixin key_xlarge {
287
- font-size: 144px;
288
- line-height: 180px;
252
+ @define-mixin headline_xsmall {
253
+ font-size: 20px;
254
+ line-height: 24px;
289
255
  font-weight: 500;
290
256
  font-feature-settings: 'ss01';
291
257
  font-family: var(--font-family-styrene);
@@ -315,87 +281,75 @@
315
281
  font-family: var(--font-family-styrene);
316
282
  }
317
283
 
318
- @define-mixin key_xsmall {
319
- font-size: 64px;
320
- line-height: 80px;
284
+ @define-mixin key_xlarge {
285
+ font-size: 144px;
286
+ line-height: 180px;
321
287
  font-weight: 500;
322
288
  font-feature-settings: 'ss01';
323
289
  font-family: var(--font-family-styrene);
324
290
  }
325
291
 
326
- @define-mixin headline-mobile_xlarge {
327
- font-size: 34px;
328
- line-height: 40px;
292
+ @define-mixin key_xsmall {
293
+ font-size: 64px;
294
+ line-height: 80px;
329
295
  font-weight: 500;
330
296
  font-feature-settings: 'ss01';
331
297
  font-family: var(--font-family-styrene);
332
298
  }
333
299
 
334
- @define-mixin headline-mobile_large {
335
- font-size: 30px;
336
- line-height: 36px;
300
+ @define-mixin paragraph_caps {
301
+ font-size: 12px;
302
+ line-height: 16px;
337
303
  font-weight: 500;
338
- font-feature-settings: 'ss01';
339
- font-family: var(--font-family-styrene);
304
+ letter-spacing: 1.25px;
305
+ text-transform: uppercase;
340
306
  }
341
307
 
342
- @define-mixin headline-mobile_medium {
343
- font-size: 26px;
344
- line-height: 32px;
345
- font-weight: 500;
346
- font-feature-settings: 'ss01';
347
- font-family: var(--font-family-styrene);
308
+ @define-mixin paragraph_component_primary {
309
+ font-size: 16px;
310
+ line-height: 20px;
311
+ font-weight: 400;
348
312
  }
349
313
 
350
- @define-mixin headline-mobile_small {
351
- font-size: 20px;
352
- line-height: 28px;
353
- font-weight: 500;
354
- font-feature-settings: 'ss01';
355
- font-family: var(--font-family-styrene);
314
+ @define-mixin paragraph_component_secondary {
315
+ font-size: 14px;
316
+ line-height: 18px;
317
+ font-weight: 400;
356
318
  }
357
319
 
358
- @define-mixin headline-mobile_xsmall {
359
- font-size: 16px;
320
+ @define-mixin paragraph_primary_large {
321
+ font-size: 18px;
360
322
  line-height: 24px;
361
- font-weight: 500;
362
- font-feature-settings: 'ss01';
363
- font-family: var(--font-family-styrene);
364
- }
365
-
366
- @define-mixin headline-system-mobile_xlarge {
367
- font-size: 34px;
368
- line-height: 40px;
369
- font-weight: 600;
323
+ font-weight: 400;
370
324
  }
371
325
 
372
- @define-mixin headline-system-mobile_large {
373
- font-size: 30px;
374
- line-height: 36px;
375
- font-weight: 600;
326
+ @define-mixin paragraph_primary_medium {
327
+ font-size: 16px;
328
+ line-height: 24px;
329
+ font-weight: 400;
376
330
  }
377
331
 
378
- @define-mixin headline-system-mobile_medium {
379
- font-size: 26px;
380
- line-height: 32px;
381
- font-weight: 600;
332
+ @define-mixin paragraph_primary_small {
333
+ font-size: 14px;
334
+ line-height: 20px;
335
+ font-weight: 400;
382
336
  }
383
337
 
384
- @define-mixin headline-system-mobile_small {
385
- font-size: 20px;
386
- line-height: 28px;
387
- font-weight: 600;
338
+ @define-mixin paragraph_secondary_large {
339
+ font-size: 13px;
340
+ line-height: 16px;
341
+ font-weight: 400;
388
342
  }
389
343
 
390
- @define-mixin headline-system-mobile_xsmall {
391
- font-size: 16px;
392
- line-height: 24px;
393
- font-weight: 600;
344
+ @define-mixin paragraph_secondary_medium {
345
+ font-size: 12px;
346
+ line-height: 16px;
347
+ font-weight: 400;
394
348
  }
395
349
 
396
- @define-mixin promo-system_xlarge {
397
- font-size: 48px;
398
- line-height: 52px;
350
+ @define-mixin paragraph_secondary_small {
351
+ font-size: 11px;
352
+ line-height: 16px;
399
353
  font-weight: 400;
400
354
  }
401
355
 
@@ -417,16 +371,62 @@
417
371
  font-weight: 400;
418
372
  }
419
373
 
374
+ @define-mixin promo-system_xlarge {
375
+ font-size: 48px;
376
+ line-height: 52px;
377
+ font-weight: 400;
378
+ }
379
+
420
380
  @define-mixin promo-system_xsmall {
421
381
  font-size: 18px;
422
382
  line-height: 22px;
423
383
  font-weight: 400;
424
384
  }
425
385
 
426
- @define-mixin paragraph_component {
386
+ @define-mixin promo_large {
387
+ font-size: 40px;
388
+ line-height: 48px;
389
+ font-weight: 400;
390
+ font-feature-settings: 'ss01';
391
+ font-family: var(--font-family-styrene);
392
+ }
393
+
394
+ @define-mixin promo_medium {
395
+ font-size: 32px;
396
+ line-height: 40px;
397
+ font-weight: 400;
398
+ font-feature-settings: 'ss01';
399
+ font-family: var(--font-family-styrene);
400
+ }
401
+
402
+ @define-mixin promo_small {
403
+ font-size: 24px;
404
+ line-height: 32px;
405
+ font-weight: 400;
406
+ font-feature-settings: 'ss01';
407
+ font-family: var(--font-family-styrene);
408
+ }
409
+
410
+ @define-mixin promo_xlarge {
411
+ font-size: 48px;
412
+ line-height: 64px;
413
+ font-weight: 400;
414
+ font-feature-settings: 'ss01';
415
+ font-family: var(--font-family-styrene);
416
+ }
417
+
418
+ @define-mixin promo_xsmall {
419
+ font-size: 20px;
420
+ line-height: 24px;
421
+ font-weight: 400;
422
+ font-feature-settings: 'ss01';
423
+ font-family: var(--font-family-styrene);
424
+ }
425
+
426
+ @define-mixin accent_component {
427
427
  font-size: 16px;
428
428
  line-height: 20px;
429
- font-weight: 400;
429
+ font-weight: 700;
430
430
  }
431
431
 
432
432
  @define-mixin action_component {
@@ -435,8 +435,16 @@
435
435
  font-weight: 500;
436
436
  }
437
437
 
438
- @define-mixin accent_component {
438
+ @define-mixin paragraph_component {
439
439
  font-size: 16px;
440
440
  line-height: 20px;
441
- font-weight: 700;
441
+ font-weight: 400;
442
+ }
443
+
444
+ @define-mixin row_limit $num {
445
+ -webkit-line-clamp: $num;
446
+ display: -webkit-box;
447
+ -webkit-box-orient: vertical;
448
+ overflow: hidden;
449
+ word-break: break-all;
442
450
  }