@alfalab/core-components-vars 10.1.0 → 10.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/alfasans-index.css +1 -0
  2. package/alfasans-index.d.ts +12 -8
  3. package/alfasans-index.js +16 -8
  4. package/alfasans-index.js.map +1 -1
  5. package/alfasans-typography.css +0 -2
  6. package/bundle/alfasans-click.css +1 -0
  7. package/bundle/alfasans-corp.css +1 -0
  8. package/bundle/alfasans-intranet.css +1 -0
  9. package/bundle/click.css +1 -0
  10. package/bundle/corp.css +1 -0
  11. package/bundle/intranet.css +1 -0
  12. package/bundle/mobile.css +1 -0
  13. package/common.css +2 -2
  14. package/esm/alfasans-index.d.ts +12 -8
  15. package/esm/alfasans-index.js +13 -9
  16. package/esm/alfasans-index.js.map +1 -1
  17. package/esm/index.d.ts +12 -8
  18. package/esm/index.js +13 -9
  19. package/esm/index.js.map +1 -1
  20. package/esm/no-typography-index.d.ts +3807 -0
  21. package/esm/no-typography-index.js +3811 -0
  22. package/esm/no-typography-index.js.map +1 -0
  23. package/esm/shadows-bluetint.d.ts +1 -1
  24. package/esm/shadows-bluetint.js +1 -1
  25. package/esm/shadows-bluetint.js.map +1 -1
  26. package/esm/shadows-bluetint.module.d.ts +4 -4
  27. package/esm/shadows-bluetint.module.js +4 -4
  28. package/esm/shadows-bluetint.module.js.map +1 -1
  29. package/esm/shadows-indigo.d.ts +1 -1
  30. package/esm/shadows-indigo.js +1 -1
  31. package/esm/shadows-indigo.js.map +1 -1
  32. package/gaps.css +4 -0
  33. package/index.css +1 -0
  34. package/index.d.ts +12 -8
  35. package/index.js +16 -8
  36. package/index.js.map +1 -1
  37. package/mixins.css +10 -5
  38. package/modern/alfasans-index.d.ts +12 -8
  39. package/modern/alfasans-index.js +13 -9
  40. package/modern/alfasans-index.js.map +1 -1
  41. package/modern/index.d.ts +12 -8
  42. package/modern/index.js +13 -9
  43. package/modern/index.js.map +1 -1
  44. package/modern/no-typography-index.d.ts +3807 -0
  45. package/modern/no-typography-index.js +3811 -0
  46. package/modern/no-typography-index.js.map +1 -0
  47. package/modern/shadows-bluetint.d.ts +1 -1
  48. package/modern/shadows-bluetint.js +26 -17
  49. package/modern/shadows-bluetint.js.map +1 -1
  50. package/modern/shadows-bluetint.module.d.ts +4 -4
  51. package/modern/shadows-bluetint.module.js +4 -4
  52. package/modern/shadows-bluetint.module.js.map +1 -1
  53. package/modern/shadows-indigo.d.ts +1 -1
  54. package/modern/shadows-indigo.js +20 -10
  55. package/modern/shadows-indigo.js.map +1 -1
  56. package/no-typography-index.css +10 -0
  57. package/no-typography-index.d.ts +3807 -0
  58. package/no-typography-index.js +5371 -0
  59. package/no-typography-index.js.map +1 -0
  60. package/no-typography.css +313 -0
  61. package/package.json +1 -1
  62. package/shadows-bluetint.css +26 -17
  63. package/shadows-bluetint.d.ts +1 -1
  64. package/shadows-bluetint.js +1 -1
  65. package/shadows-bluetint.js.map +1 -1
  66. package/shadows-bluetint.module.d.ts +4 -4
  67. package/shadows-bluetint.module.js +4 -4
  68. package/shadows-bluetint.module.js.map +1 -1
  69. package/shadows-indigo.css +20 -10
  70. package/shadows-indigo.d.ts +1 -1
  71. package/shadows-indigo.js +1 -1
  72. package/shadows-indigo.js.map +1 -1
  73. package/src/alfasans-index.css +1 -0
  74. package/src/alfasans-index.ts +12 -8
  75. package/src/alfasans-typography.css +0 -2
  76. package/src/bundle/alfasans-click.css +1 -0
  77. package/src/bundle/alfasans-corp.css +1 -0
  78. package/src/bundle/alfasans-intranet.css +1 -0
  79. package/src/bundle/click.css +1 -0
  80. package/src/bundle/corp.css +1 -0
  81. package/src/bundle/intranet.css +1 -0
  82. package/src/bundle/mobile.css +1 -0
  83. package/src/common.css +2 -2
  84. package/src/gaps.css +4 -0
  85. package/src/index.css +1 -0
  86. package/src/index.ts +12 -8
  87. package/src/mixins.css +10 -5
  88. package/src/no-typography-index.css +10 -0
  89. package/src/no-typography-index.ts +3809 -0
  90. package/src/no-typography.css +313 -0
  91. package/src/shadows-bluetint.css +26 -17
  92. package/src/shadows-bluetint.module.ts +4 -4
  93. package/src/shadows-bluetint.ts +26 -17
  94. package/src/shadows-indigo.css +20 -10
  95. package/src/shadows-indigo.ts +20 -10
  96. package/src/typography-vars.css +10 -0
  97. package/src/typography.css +109 -109
  98. package/typography-vars.css +10 -0
  99. package/typography.css +109 -109
  100. package/src/typography-common.css +0 -15
  101. package/typography-common.css +0 -15
package/src/typography.css CHANGED
@@ -1,4 +1,4 @@
1
- @import './typography-common.css';
1
+ /* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY */
2
2
 
3
3
  @define-mixin accent_caps {
4
4
  font-size: 12px;
@@ -128,74 +128,84 @@
128
128
  text-transform: uppercase;
129
129
  }
130
130
 
131
- @define-mixin headline-mobile_large {
132
- font-size: 30px;
133
- line-height: 36px;
131
+ @define-mixin headline_large {
132
+ font-size: 40px;
133
+ line-height: 48px;
134
134
  font-weight: 500;
135
135
  font-feature-settings: 'ss01';
136
136
  font-family: var(--font-family-styrene);
137
137
  }
138
138
 
139
- @define-mixin headline-mobile_medium {
140
- font-size: 26px;
141
- line-height: 32px;
139
+ @define-mixin headline_medium {
140
+ font-size: 32px;
141
+ line-height: 40px;
142
142
  font-weight: 500;
143
143
  font-feature-settings: 'ss01';
144
144
  font-family: var(--font-family-styrene);
145
145
  }
146
146
 
147
- @define-mixin headline-mobile_small {
148
- font-size: 20px;
149
- line-height: 28px;
147
+ @define-mixin headline_small {
148
+ font-size: 24px;
149
+ line-height: 32px;
150
150
  font-weight: 500;
151
151
  font-feature-settings: 'ss01';
152
152
  font-family: var(--font-family-styrene);
153
153
  }
154
154
 
155
- @define-mixin headline-mobile_xlarge {
156
- font-size: 34px;
157
- line-height: 40px;
155
+ @define-mixin headline_xlarge {
156
+ font-size: 48px;
157
+ line-height: 64px;
158
158
  font-weight: 500;
159
159
  font-feature-settings: 'ss01';
160
160
  font-family: var(--font-family-styrene);
161
161
  }
162
162
 
163
- @define-mixin headline-mobile_xsmall {
164
- font-size: 16px;
165
- line-height: 20px;
163
+ @define-mixin headline_xsmall {
164
+ font-size: 20px;
165
+ line-height: 24px;
166
166
  font-weight: 500;
167
167
  font-feature-settings: 'ss01';
168
168
  font-family: var(--font-family-styrene);
169
169
  }
170
170
 
171
- @define-mixin headline-system-mobile_large {
171
+ @define-mixin headline-mobile_large {
172
172
  font-size: 30px;
173
173
  line-height: 36px;
174
- font-weight: 600;
174
+ font-weight: 500;
175
+ font-feature-settings: 'ss01';
176
+ font-family: var(--font-family-styrene);
175
177
  }
176
178
 
177
- @define-mixin headline-system-mobile_medium {
179
+ @define-mixin headline-mobile_medium {
178
180
  font-size: 26px;
179
181
  line-height: 32px;
180
- font-weight: 600;
182
+ font-weight: 500;
183
+ font-feature-settings: 'ss01';
184
+ font-family: var(--font-family-styrene);
181
185
  }
182
186
 
183
- @define-mixin headline-system-mobile_small {
187
+ @define-mixin headline-mobile_small {
184
188
  font-size: 20px;
185
189
  line-height: 28px;
186
- font-weight: 600;
190
+ font-weight: 500;
191
+ font-feature-settings: 'ss01';
192
+ font-family: var(--font-family-styrene);
187
193
  }
188
194
 
189
- @define-mixin headline-system-mobile_xlarge {
195
+ @define-mixin headline-mobile_xlarge {
190
196
  font-size: 34px;
191
197
  line-height: 40px;
192
- font-weight: 600;
198
+ font-weight: 500;
199
+ font-feature-settings: 'ss01';
200
+ font-family: var(--font-family-styrene);
193
201
  }
194
202
 
195
- @define-mixin headline-system-mobile_xsmall {
203
+ @define-mixin headline-mobile_xsmall {
196
204
  font-size: 16px;
197
205
  line-height: 20px;
198
- font-weight: 600;
206
+ font-weight: 500;
207
+ font-feature-settings: 'ss01';
208
+ font-family: var(--font-family-styrene);
199
209
  }
200
210
 
201
211
  @define-mixin headline-system_large {
@@ -228,44 +238,34 @@
228
238
  font-weight: 700;
229
239
  }
230
240
 
231
- @define-mixin headline_large {
232
- font-size: 40px;
233
- line-height: 48px;
234
- font-weight: 500;
235
- font-feature-settings: 'ss01';
236
- font-family: var(--font-family-styrene);
241
+ @define-mixin headline-system-mobile_large {
242
+ font-size: 30px;
243
+ line-height: 36px;
244
+ font-weight: 600;
237
245
  }
238
246
 
239
- @define-mixin headline_medium {
240
- font-size: 32px;
241
- line-height: 40px;
242
- font-weight: 500;
243
- font-feature-settings: 'ss01';
244
- font-family: var(--font-family-styrene);
247
+ @define-mixin headline-system-mobile_medium {
248
+ font-size: 26px;
249
+ line-height: 32px;
250
+ font-weight: 600;
245
251
  }
246
252
 
247
- @define-mixin headline_small {
248
- font-size: 24px;
249
- line-height: 32px;
250
- font-weight: 500;
251
- font-feature-settings: 'ss01';
252
- font-family: var(--font-family-styrene);
253
+ @define-mixin headline-system-mobile_small {
254
+ font-size: 20px;
255
+ line-height: 28px;
256
+ font-weight: 600;
253
257
  }
254
258
 
255
- @define-mixin headline_xlarge {
256
- font-size: 48px;
257
- line-height: 64px;
258
- font-weight: 500;
259
- font-feature-settings: 'ss01';
260
- font-family: var(--font-family-styrene);
259
+ @define-mixin headline-system-mobile_xlarge {
260
+ font-size: 34px;
261
+ line-height: 40px;
262
+ font-weight: 600;
261
263
  }
262
264
 
263
- @define-mixin headline_xsmall {
264
- font-size: 20px;
265
- line-height: 24px;
266
- font-weight: 500;
267
- font-feature-settings: 'ss01';
268
- font-family: var(--font-family-styrene);
265
+ @define-mixin headline-system-mobile_xsmall {
266
+ font-size: 16px;
267
+ line-height: 20px;
268
+ font-weight: 600;
269
269
  }
270
270
 
271
271
  @define-mixin key_large {
@@ -274,7 +274,7 @@
274
274
  font-weight: 500;
275
275
  font-feature-settings: 'ss01';
276
276
  font-family: var(--font-family-styrene);
277
- } /* deprecated */
277
+ }
278
278
 
279
279
  @define-mixin key_medium {
280
280
  font-size: 96px;
@@ -282,7 +282,7 @@
282
282
  font-weight: 500;
283
283
  font-feature-settings: 'ss01';
284
284
  font-family: var(--font-family-styrene);
285
- } /* deprecated */
285
+ }
286
286
 
287
287
  @define-mixin key_small {
288
288
  font-size: 80px;
@@ -290,7 +290,7 @@
290
290
  font-weight: 500;
291
291
  font-feature-settings: 'ss01';
292
292
  font-family: var(--font-family-styrene);
293
- } /* deprecated */
293
+ }
294
294
 
295
295
  @define-mixin key_xlarge {
296
296
  font-size: 144px;
@@ -298,7 +298,7 @@
298
298
  font-weight: 500;
299
299
  font-feature-settings: 'ss01';
300
300
  font-family: var(--font-family-styrene);
301
- } /* deprecated */
301
+ }
302
302
 
303
303
  @define-mixin key_xsmall {
304
304
  font-size: 64px;
@@ -306,7 +306,7 @@
306
306
  font-weight: 500;
307
307
  font-feature-settings: 'ss01';
308
308
  font-family: var(--font-family-styrene);
309
- } /* deprecated */
309
+ }
310
310
 
311
311
  @define-mixin paragraph_caps {
312
312
  font-size: 12px;
@@ -372,74 +372,84 @@
372
372
  text-transform: uppercase;
373
373
  }
374
374
 
375
- @define-mixin promo-mobile_large {
376
- font-size: 30px;
377
- line-height: 36px;
375
+ @define-mixin promo_large {
376
+ font-size: 40px;
377
+ line-height: 48px;
378
378
  font-weight: 400;
379
379
  font-feature-settings: 'ss01';
380
380
  font-family: var(--font-family-styrene);
381
381
  }
382
382
 
383
- @define-mixin promo-mobile_medium {
384
- font-size: 26px;
385
- line-height: 32px;
383
+ @define-mixin promo_medium {
384
+ font-size: 32px;
385
+ line-height: 40px;
386
386
  font-weight: 400;
387
387
  font-feature-settings: 'ss01';
388
388
  font-family: var(--font-family-styrene);
389
389
  }
390
390
 
391
- @define-mixin promo-mobile_small {
392
- font-size: 20px;
393
- line-height: 28px;
391
+ @define-mixin promo_small {
392
+ font-size: 24px;
393
+ line-height: 32px;
394
394
  font-weight: 400;
395
395
  font-feature-settings: 'ss01';
396
396
  font-family: var(--font-family-styrene);
397
397
  }
398
398
 
399
- @define-mixin promo-mobile_xlarge {
400
- font-size: 34px;
401
- line-height: 40px;
399
+ @define-mixin promo_xlarge {
400
+ font-size: 48px;
401
+ line-height: 64px;
402
402
  font-weight: 400;
403
403
  font-feature-settings: 'ss01';
404
404
  font-family: var(--font-family-styrene);
405
405
  }
406
406
 
407
- @define-mixin promo-mobile_xsmall {
408
- font-size: 16px;
409
- line-height: 20px;
407
+ @define-mixin promo_xsmall {
408
+ font-size: 20px;
409
+ line-height: 24px;
410
410
  font-weight: 400;
411
411
  font-feature-settings: 'ss01';
412
412
  font-family: var(--font-family-styrene);
413
413
  }
414
414
 
415
- @define-mixin promo-system-mobile_large {
415
+ @define-mixin promo-mobile_large {
416
416
  font-size: 30px;
417
417
  line-height: 36px;
418
418
  font-weight: 400;
419
+ font-feature-settings: 'ss01';
420
+ font-family: var(--font-family-styrene);
419
421
  }
420
422
 
421
- @define-mixin promo-system-mobile_medium {
423
+ @define-mixin promo-mobile_medium {
422
424
  font-size: 26px;
423
425
  line-height: 32px;
424
426
  font-weight: 400;
427
+ font-feature-settings: 'ss01';
428
+ font-family: var(--font-family-styrene);
425
429
  }
426
430
 
427
- @define-mixin promo-system-mobile_small {
431
+ @define-mixin promo-mobile_small {
428
432
  font-size: 20px;
429
433
  line-height: 28px;
430
434
  font-weight: 400;
435
+ font-feature-settings: 'ss01';
436
+ font-family: var(--font-family-styrene);
431
437
  }
432
438
 
433
- @define-mixin promo-system-mobile_xlarge {
439
+ @define-mixin promo-mobile_xlarge {
434
440
  font-size: 34px;
435
441
  line-height: 40px;
436
442
  font-weight: 400;
443
+ font-feature-settings: 'ss01';
444
+ font-family: var(--font-family-styrene);
437
445
  }
438
446
 
439
- @define-mixin promo-system-mobile_xsmall {
447
+ @define-mixin promo-mobile_xsmall {
440
448
  font-size: 16px;
441
449
  line-height: 20px;
442
450
  font-weight: 400;
451
+ font-feature-settings: 'ss01';
452
+ font-family: var(--font-family-styrene);
443
453
  }
444
454
 
445
455
  @define-mixin promo-system_large {
@@ -472,60 +482,50 @@
472
482
  font-weight: 400;
473
483
  }
474
484
 
475
- @define-mixin promo_large {
476
- font-size: 40px;
477
- line-height: 48px;
485
+ @define-mixin promo-system-mobile_large {
486
+ font-size: 30px;
487
+ line-height: 36px;
478
488
  font-weight: 400;
479
- font-feature-settings: 'ss01';
480
- font-family: var(--font-family-styrene);
481
489
  }
482
490
 
483
- @define-mixin promo_medium {
484
- font-size: 32px;
485
- line-height: 40px;
491
+ @define-mixin promo-system-mobile_medium {
492
+ font-size: 26px;
493
+ line-height: 32px;
486
494
  font-weight: 400;
487
- font-feature-settings: 'ss01';
488
- font-family: var(--font-family-styrene);
489
495
  }
490
496
 
491
- @define-mixin promo_small {
492
- font-size: 24px;
493
- line-height: 32px;
497
+ @define-mixin promo-system-mobile_small {
498
+ font-size: 20px;
499
+ line-height: 28px;
494
500
  font-weight: 400;
495
- font-feature-settings: 'ss01';
496
- font-family: var(--font-family-styrene);
497
501
  }
498
502
 
499
- @define-mixin promo_xlarge {
500
- font-size: 48px;
501
- line-height: 64px;
503
+ @define-mixin promo-system-mobile_xlarge {
504
+ font-size: 34px;
505
+ line-height: 40px;
502
506
  font-weight: 400;
503
- font-feature-settings: 'ss01';
504
- font-family: var(--font-family-styrene);
505
507
  }
506
508
 
507
- @define-mixin promo_xsmall {
508
- font-size: 20px;
509
- line-height: 24px;
509
+ @define-mixin promo-system-mobile_xsmall {
510
+ font-size: 16px;
511
+ line-height: 20px;
510
512
  font-weight: 400;
511
- font-feature-settings: 'ss01';
512
- font-family: var(--font-family-styrene);
513
513
  }
514
514
 
515
515
  @define-mixin accent_component {
516
516
  font-size: 16px;
517
517
  line-height: 20px;
518
518
  font-weight: 700;
519
- }
519
+ } /* deprecated */
520
520
 
521
521
  @define-mixin action_component {
522
522
  font-size: 16px;
523
523
  line-height: 20px;
524
524
  font-weight: 500;
525
- }
525
+ } /* deprecated */
526
526
 
527
527
  @define-mixin paragraph_component {
528
528
  font-size: 16px;
529
529
  line-height: 20px;
530
530
  font-weight: 400;
531
- }
531
+ } /* deprecated */
package/typography-vars.css ADDED
@@ -0,0 +1,10 @@
1
+ :root {
2
+ --font-family-system:
3
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
4
+ --font-family-styrene:
5
+ 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
6
+ sans-serif;
7
+ --font-family-alfasans:
8
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
9
+ Helvetica, sans-serif;
10
+ }