@alfalab/core-components-vars 6.5.1 → 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 +58 -44
  2. package/colors-indigo.css +58 -44
  3. package/cssm/bundle/site.css +58 -44
  4. package/cssm/colors-bluetint.css +58 -44
  5. package/cssm/colors-indigo.css +58 -44
  6. package/cssm/index.css +58 -44
  7. package/package.json +1 -1
  8. package/send-stats.js +1 -1
  9. package/typography.css +195 -331
package/typography.css CHANGED
@@ -5,106 +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;
82
- }
83
-
84
- @define-mixin paragraph_component {
85
- font-size: 16px;
86
- line-height: 20px;
87
- font-weight: 400;
11
+ font-weight: 700;
12
+ letter-spacing: 1.25px;
13
+ text-transform: uppercase;
88
14
  }
89
15
 
90
- @define-mixin paragraph_component_primary {
16
+ @define-mixin accent_component_primary {
91
17
  font-size: 16px;
92
18
  line-height: 20px;
93
- font-weight: 400;
19
+ font-weight: 700;
94
20
  }
95
21
 
96
- @define-mixin paragraph_component_secondary {
22
+ @define-mixin accent_component_secondary {
97
23
  font-size: 14px;
98
24
  line-height: 18px;
99
- font-weight: 400;
100
- }
101
-
102
- @define-mixin paragraph_caps {
103
- font-size: 12px;
104
- line-height: 16px;
105
- font-weight: 500;
106
- letter-spacing: 1.25px;
107
- text-transform: uppercase;
25
+ font-weight: 700;
108
26
  }
109
27
 
110
28
  @define-mixin accent_primary_large {
@@ -143,25 +61,7 @@
143
61
  font-weight: 700;
144
62
  }
145
63
 
146
- @define-mixin accent_component {
147
- font-size: 16px;
148
- line-height: 20px;
149
- font-weight: 700;
150
- }
151
-
152
- @define-mixin accent_component_primary {
153
- font-size: 16px;
154
- line-height: 20px;
155
- font-weight: 700;
156
- }
157
-
158
- @define-mixin accent_component_secondary {
159
- font-size: 14px;
160
- line-height: 18px;
161
- font-weight: 700;
162
- }
163
-
164
- @define-mixin accent_caps {
64
+ @define-mixin action_caps {
165
65
  font-size: 12px;
166
66
  line-height: 16px;
167
67
  font-weight: 700;
@@ -169,34 +69,16 @@
169
69
  text-transform: uppercase;
170
70
  }
171
71
 
172
- @define-mixin headline-system_xlarge {
173
- font-size: 48px;
174
- line-height: 52px;
175
- font-weight: 700;
176
- }
177
-
178
- @define-mixin headline-system_large {
179
- font-size: 40px;
180
- line-height: 48px;
181
- font-weight: 700;
182
- }
183
-
184
- @define-mixin headline-system_medium {
185
- font-size: 30px;
186
- line-height: 36px;
187
- font-weight: 700;
188
- }
189
-
190
- @define-mixin headline-system_small {
191
- font-size: 22px;
192
- line-height: 26px;
193
- font-weight: 700;
72
+ @define-mixin action_component_primary {
73
+ font-size: 16px;
74
+ line-height: 20px;
75
+ font-weight: 500;
194
76
  }
195
77
 
196
- @define-mixin headline-system_xsmall {
197
- font-size: 18px;
198
- line-height: 22px;
199
- font-weight: 700;
78
+ @define-mixin action_component_secondary {
79
+ font-size: 14px;
80
+ line-height: 18px;
81
+ font-weight: 500;
200
82
  }
201
83
 
202
84
  @define-mixin action_primary_large {
@@ -235,75 +117,141 @@
235
117
  font-weight: 500;
236
118
  }
237
119
 
238
- @define-mixin action_component {
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 {
239
153
  font-size: 16px;
240
154
  line-height: 20px;
241
155
  font-weight: 500;
156
+ font-feature-settings: 'ss01';
157
+ font-family: var(--font-family-styrene);
242
158
  }
243
159
 
244
- @define-mixin action_component_primary {
160
+ @define-mixin headline-system-mobile_large {
161
+ font-size: 30px;
162
+ line-height: 36px;
163
+ font-weight: 600;
164
+ }
165
+
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 {
245
185
  font-size: 16px;
246
186
  line-height: 20px;
247
- font-weight: 500;
187
+ font-weight: 600;
248
188
  }
249
189
 
250
- @define-mixin action_component_secondary {
251
- font-size: 14px;
252
- line-height: 18px;
253
- font-weight: 500;
190
+ @define-mixin headline-system_large {
191
+ font-size: 40px;
192
+ line-height: 48px;
193
+ font-weight: 700;
254
194
  }
255
195
 
256
- @define-mixin action_caps {
257
- font-size: 12px;
258
- line-height: 16px;
196
+ @define-mixin headline-system_medium {
197
+ font-size: 30px;
198
+ line-height: 36px;
259
199
  font-weight: 700;
260
- letter-spacing: 1.25px;
261
- text-transform: uppercase;
262
200
  }
263
201
 
264
- @define-mixin promo_xlarge {
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 {
265
209
  font-size: 48px;
266
- line-height: 64px;
267
- font-weight: 400;
268
- font-feature-settings: 'ss01';
269
- font-family: var(--font-family-styrene);
210
+ line-height: 52px;
211
+ font-weight: 700;
270
212
  }
271
213
 
272
- @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 {
273
221
  font-size: 40px;
274
222
  line-height: 48px;
275
- font-weight: 400;
223
+ font-weight: 500;
276
224
  font-feature-settings: 'ss01';
277
225
  font-family: var(--font-family-styrene);
278
226
  }
279
227
 
280
- @define-mixin promo_medium {
228
+ @define-mixin headline_medium {
281
229
  font-size: 32px;
282
230
  line-height: 40px;
283
- font-weight: 400;
231
+ font-weight: 500;
284
232
  font-feature-settings: 'ss01';
285
233
  font-family: var(--font-family-styrene);
286
234
  }
287
235
 
288
- @define-mixin promo_small {
236
+ @define-mixin headline_small {
289
237
  font-size: 24px;
290
238
  line-height: 32px;
291
- font-weight: 400;
239
+ font-weight: 500;
292
240
  font-feature-settings: 'ss01';
293
241
  font-family: var(--font-family-styrene);
294
242
  }
295
243
 
296
- @define-mixin promo_xsmall {
297
- font-size: 20px;
298
- line-height: 24px;
299
- font-weight: 400;
244
+ @define-mixin headline_xlarge {
245
+ font-size: 48px;
246
+ line-height: 64px;
247
+ font-weight: 500;
300
248
  font-feature-settings: 'ss01';
301
249
  font-family: var(--font-family-styrene);
302
250
  }
303
251
 
304
- @define-mixin key_xlarge {
305
- font-size: 144px;
306
- line-height: 180px;
252
+ @define-mixin headline_xsmall {
253
+ font-size: 20px;
254
+ line-height: 24px;
307
255
  font-weight: 500;
308
256
  font-feature-settings: 'ss01';
309
257
  font-family: var(--font-family-styrene);
@@ -333,87 +281,75 @@
333
281
  font-family: var(--font-family-styrene);
334
282
  }
335
283
 
336
- @define-mixin key_xsmall {
337
- font-size: 64px;
338
- line-height: 80px;
284
+ @define-mixin key_xlarge {
285
+ font-size: 144px;
286
+ line-height: 180px;
339
287
  font-weight: 500;
340
288
  font-feature-settings: 'ss01';
341
289
  font-family: var(--font-family-styrene);
342
290
  }
343
291
 
344
- @define-mixin headline-mobile_xlarge {
345
- font-size: 34px;
346
- line-height: 40px;
292
+ @define-mixin key_xsmall {
293
+ font-size: 64px;
294
+ line-height: 80px;
347
295
  font-weight: 500;
348
296
  font-feature-settings: 'ss01';
349
297
  font-family: var(--font-family-styrene);
350
298
  }
351
299
 
352
- @define-mixin headline-mobile_large {
353
- font-size: 30px;
354
- line-height: 36px;
300
+ @define-mixin paragraph_caps {
301
+ font-size: 12px;
302
+ line-height: 16px;
355
303
  font-weight: 500;
356
- font-feature-settings: 'ss01';
357
- font-family: var(--font-family-styrene);
304
+ letter-spacing: 1.25px;
305
+ text-transform: uppercase;
358
306
  }
359
307
 
360
- @define-mixin headline-mobile_medium {
361
- font-size: 26px;
362
- line-height: 32px;
363
- font-weight: 500;
364
- font-feature-settings: 'ss01';
365
- font-family: var(--font-family-styrene);
308
+ @define-mixin paragraph_component_primary {
309
+ font-size: 16px;
310
+ line-height: 20px;
311
+ font-weight: 400;
366
312
  }
367
313
 
368
- @define-mixin headline-mobile_small {
369
- font-size: 20px;
370
- line-height: 28px;
371
- font-weight: 500;
372
- font-feature-settings: 'ss01';
373
- font-family: var(--font-family-styrene);
314
+ @define-mixin paragraph_component_secondary {
315
+ font-size: 14px;
316
+ line-height: 18px;
317
+ font-weight: 400;
374
318
  }
375
319
 
376
- @define-mixin headline-mobile_xsmall {
377
- font-size: 16px;
320
+ @define-mixin paragraph_primary_large {
321
+ font-size: 18px;
378
322
  line-height: 24px;
379
- font-weight: 500;
380
- font-feature-settings: 'ss01';
381
- font-family: var(--font-family-styrene);
382
- }
383
-
384
- @define-mixin headline-system-mobile_xlarge {
385
- font-size: 34px;
386
- line-height: 40px;
387
- font-weight: 600;
323
+ font-weight: 400;
388
324
  }
389
325
 
390
- @define-mixin headline-system-mobile_large {
391
- font-size: 30px;
392
- line-height: 36px;
393
- font-weight: 600;
326
+ @define-mixin paragraph_primary_medium {
327
+ font-size: 16px;
328
+ line-height: 24px;
329
+ font-weight: 400;
394
330
  }
395
331
 
396
- @define-mixin headline-system-mobile_medium {
397
- font-size: 26px;
398
- line-height: 32px;
399
- font-weight: 600;
332
+ @define-mixin paragraph_primary_small {
333
+ font-size: 14px;
334
+ line-height: 20px;
335
+ font-weight: 400;
400
336
  }
401
337
 
402
- @define-mixin headline-system-mobile_small {
403
- font-size: 20px;
404
- line-height: 28px;
405
- font-weight: 600;
338
+ @define-mixin paragraph_secondary_large {
339
+ font-size: 13px;
340
+ line-height: 16px;
341
+ font-weight: 400;
406
342
  }
407
343
 
408
- @define-mixin headline-system-mobile_xsmall {
409
- font-size: 16px;
410
- line-height: 24px;
411
- font-weight: 600;
344
+ @define-mixin paragraph_secondary_medium {
345
+ font-size: 12px;
346
+ line-height: 16px;
347
+ font-weight: 400;
412
348
  }
413
349
 
414
- @define-mixin promo-system_xlarge {
415
- font-size: 48px;
416
- line-height: 52px;
350
+ @define-mixin paragraph_secondary_small {
351
+ font-size: 11px;
352
+ line-height: 16px;
417
353
  font-weight: 400;
418
354
  }
419
355
 
@@ -435,152 +371,80 @@
435
371
  font-weight: 400;
436
372
  }
437
373
 
438
- @define-mixin promo-system_xsmall {
439
- font-size: 18px;
440
- line-height: 22px;
441
- font-weight: 400;
442
- }
443
-
444
- @define-mixin legacy_primary_small {
445
- font-size: 14px;
446
- line-height: 18px;
447
- font-weight: 400;
448
- }
449
-
450
- @define-mixin system_48-52_bold {
374
+ @define-mixin promo-system_xlarge {
451
375
  font-size: 48px;
452
376
  line-height: 52px;
453
- font-weight: 700;
454
- }
455
-
456
- @define-mixin system_40-48_bold {
457
- font-size: 40px;
458
- line-height: 48px;
459
- font-weight: 700;
460
- }
461
-
462
- @define-mixin system_30-36_bold {
463
- font-size: 30px;
464
- line-height: 36px;
465
- font-weight: 700;
466
- }
467
-
468
- @define-mixin system_22-26_bold {
469
- font-size: 22px;
470
- line-height: 26px;
471
- font-weight: 700;
377
+ font-weight: 400;
472
378
  }
473
379
 
474
- @define-mixin system_18-22_bold {
380
+ @define-mixin promo-system_xsmall {
475
381
  font-size: 18px;
476
382
  line-height: 22px;
477
- font-weight: 700;
383
+ font-weight: 400;
478
384
  }
479
385
 
480
- @define-mixin system_18-22_regular {
481
- font-size: 18px;
482
- line-height: 22px;
386
+ @define-mixin promo_large {
387
+ font-size: 40px;
388
+ line-height: 48px;
483
389
  font-weight: 400;
390
+ font-feature-settings: 'ss01';
391
+ font-family: var(--font-family-styrene);
484
392
  }
485
393
 
486
- @define-mixin system_18-22_medium {
487
- font-size: 18px;
488
- line-height: 22px;
489
- font-weight: 500;
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);
490
400
  }
491
401
 
492
- @define-mixin system_16-24_regular {
493
- font-size: 16px;
494
- line-height: 24px;
402
+ @define-mixin promo_small {
403
+ font-size: 24px;
404
+ line-height: 32px;
495
405
  font-weight: 400;
406
+ font-feature-settings: 'ss01';
407
+ font-family: var(--font-family-styrene);
496
408
  }
497
409
 
498
- @define-mixin system_16-24_medium {
499
- font-size: 16px;
500
- line-height: 24px;
501
- font-weight: 500;
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);
502
416
  }
503
417
 
504
- @define-mixin system_16-24_bold {
505
- font-size: 16px;
418
+ @define-mixin promo_xsmall {
419
+ font-size: 20px;
506
420
  line-height: 24px;
507
- font-weight: 700;
421
+ font-weight: 400;
422
+ font-feature-settings: 'ss01';
423
+ font-family: var(--font-family-styrene);
508
424
  }
509
425
 
510
- @define-mixin system_16-20_regular {
426
+ @define-mixin accent_component {
511
427
  font-size: 16px;
512
428
  line-height: 20px;
513
- font-weight: 400;
429
+ font-weight: 700;
514
430
  }
515
431
 
516
- @define-mixin system_16-20_medium {
432
+ @define-mixin action_component {
517
433
  font-size: 16px;
518
434
  line-height: 20px;
519
435
  font-weight: 500;
520
436
  }
521
437
 
522
- @define-mixin system_16-20_bold {
438
+ @define-mixin paragraph_component {
523
439
  font-size: 16px;
524
440
  line-height: 20px;
525
- font-weight: 700;
526
- }
527
-
528
- @define-mixin system_14-18_regular {
529
- font-size: 14px;
530
- line-height: 18px;
531
- font-weight: 400;
532
- }
533
-
534
- @define-mixin system_12-16_medium_caps {
535
- font-size: 12px;
536
- line-height: 16px;
537
- font-weight: 500;
538
- letter-spacing: 1.5px;
539
- text-transform: uppercase;
540
- }
541
-
542
- @define-mixin system_12-16_regular {
543
- font-size: 12px;
544
- line-height: 16px;
545
441
  font-weight: 400;
546
442
  }
547
443
 
548
- @define-mixin styrene_40-48_medium {
549
- font-size: 40px;
550
- line-height: 48px;
551
- font-weight: 500;
552
- font-feature-settings: 'ss01';
553
- font-family: var(--font-family-styrene);
554
- }
555
-
556
- @define-mixin styrene_32-40_medium {
557
- font-size: 32px;
558
- line-height: 40px;
559
- font-weight: 500;
560
- font-feature-settings: 'ss01';
561
- font-family: var(--font-family-styrene);
562
- }
563
-
564
- @define-mixin styrene_28-34_medium {
565
- font-size: 28px;
566
- line-height: 34px;
567
- font-weight: 500;
568
- font-feature-settings: 'ss01';
569
- font-family: var(--font-family-styrene);
570
- }
571
-
572
- @define-mixin styrene_24-30_medium {
573
- font-size: 24px;
574
- line-height: 30px;
575
- font-weight: 500;
576
- font-feature-settings: 'ss01';
577
- font-family: var(--font-family-styrene);
578
- }
579
-
580
- @define-mixin styrene_20-24_medium {
581
- font-size: 20px;
582
- line-height: 24px;
583
- font-weight: 500;
584
- font-feature-settings: 'ss01';
585
- font-family: var(--font-family-styrene);
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;
586
450
  }