@carbon/type 10.0.0-rc.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 (44) hide show
  1. package/CHANGELOG.md +525 -0
  2. package/LICENSE +2 -2
  3. package/README.md +25 -21
  4. package/es/index.js +26 -38
  5. package/lib/index.js +31 -37
  6. package/package.json +7 -7
  7. package/scss/_classes.scss +3 -0
  8. package/scss/_font-family.scss +17 -4
  9. package/scss/_inlined/_classes.scss +41 -0
  10. package/scss/_inlined/_font-family.scss +70 -0
  11. package/scss/_inlined/_prefix.scss +11 -0
  12. package/scss/_inlined/_reset.scss +43 -0
  13. package/scss/_inlined/_scale.scss +59 -0
  14. package/scss/_inlined/_styles.scss +673 -0
  15. package/scss/_inlined/font-face/_mono.scss +430 -0
  16. package/scss/_inlined/font-face/_sans.scss +497 -0
  17. package/scss/_inlined/font-face/_serif.scss +430 -0
  18. package/scss/_inlined/font-face/_settings.scss +12 -0
  19. package/scss/_prefix.scss +3 -0
  20. package/scss/_reset.scss +20 -7
  21. package/scss/_scale.scss +16 -5
  22. package/scss/_styles.scss +145 -49
  23. package/scss/font-face/_mono.scss +41 -0
  24. package/scss/font-face/_sans.scss +144 -36
  25. package/scss/font-face/_serif.scss +77 -36
  26. package/scss/font-face/_settings.scss +12 -0
  27. package/scss/index.scss +11 -0
  28. package/scss/type.scss +4 -4
  29. package/scss/vendor/@carbon/import-once/import-once.scss +27 -0
  30. package/scss/vendor/@carbon/import-once/index.scss +8 -0
  31. package/scss/vendor/@carbon/layout/_breakpoint.scss +237 -0
  32. package/scss/vendor/@carbon/layout/_convert.scss +30 -0
  33. package/scss/vendor/@carbon/layout/_key-height.scss +97 -0
  34. package/scss/vendor/@carbon/layout/_mini-unit.scss +23 -0
  35. package/scss/vendor/@carbon/layout/_spacing.scss +328 -0
  36. package/scss/vendor/@carbon/layout/_utilities.scss +41 -0
  37. package/scss/vendor/@carbon/layout/index.scss +8 -0
  38. package/scss/vendor/@carbon/layout/layout.scss +12 -0
  39. package/src/__tests__/__snapshots__/styles-test.js.snap +121 -87
  40. package/src/__tests__/exports-test.js +43 -37
  41. package/src/__tests__/fluid-test.js +0 -1
  42. package/src/reset.js +3 -0
  43. package/src/styles.js +22 -38
  44. package/umd/index.js +31 -37
package/umd/index.js CHANGED
@@ -111,6 +111,9 @@
111
111
  },
112
112
  strong: {
113
113
  fontWeight: fontWeights.semibold
114
+ },
115
+ code: {
116
+ fontFamily: fontFamilies.mono
114
117
  }
115
118
  };
116
119
 
@@ -301,105 +304,106 @@
301
304
  * LICENSE file in the root directory of this source tree.
302
305
  */
303
306
  var caption01 = {
304
- fontFamily: fontFamilies.sans,
305
307
  fontSize: layout.rem(scale[0]),
306
308
  fontWeight: fontWeights.regular,
307
309
  lineHeight: layout.rem(16),
308
310
  letterSpacing: layout.px(0.32)
309
311
  };
310
312
  var label01 = {
311
- fontFamily: fontFamilies.sans,
312
313
  fontSize: layout.rem(scale[0]),
313
314
  fontWeight: fontWeights.regular,
314
315
  lineHeight: layout.rem(16),
315
316
  letterSpacing: layout.px(0.32)
316
317
  };
317
318
  var helperText01 = {
318
- fontFamily: fontFamilies.sans,
319
319
  fontSize: layout.rem(scale[0]),
320
320
  fontStyle: 'italic',
321
321
  lineHeight: layout.rem(16),
322
322
  letterSpacing: layout.px(0.32)
323
323
  };
324
324
  var bodyShort01 = {
325
- fontFamily: fontFamilies.sans,
326
325
  fontSize: layout.rem(scale[1]),
327
326
  fontWeight: fontWeights.regular,
328
327
  lineHeight: layout.rem(18),
329
328
  letterSpacing: layout.px(0.16)
330
329
  };
331
330
  var bodyLong01 = {
332
- fontFamily: fontFamilies.sans,
333
331
  fontSize: layout.rem(scale[1]),
334
332
  fontWeight: fontWeights.regular,
335
333
  lineHeight: layout.rem(20),
336
334
  letterSpacing: layout.px(0.16)
337
335
  };
338
336
  var bodyShort02 = {
339
- fontFamily: fontFamilies.sans,
340
337
  fontSize: layout.rem(scale[2]),
341
338
  fontWeight: fontWeights.regular,
342
339
  lineHeight: layout.rem(22),
343
340
  letterSpacing: 0
344
341
  };
345
342
  var bodyLong02 = {
346
- fontFamily: fontFamilies.sans,
347
343
  fontSize: layout.rem(scale[2]),
348
344
  fontWeight: fontWeights.regular,
349
345
  lineHeight: layout.rem(24),
350
346
  letterSpacing: 0
351
347
  };
352
348
  var code01 = {
353
- fontFamily: fontFamilies.mono,
354
349
  fontSize: layout.rem(scale[0]),
355
350
  fontWeight: fontWeights.regular,
356
351
  lineHeight: layout.rem(16),
357
352
  letterSpacing: layout.px(0.32)
358
353
  };
359
354
  var code02 = {
360
- fontFamily: fontFamilies.mono,
361
355
  fontSize: layout.rem(scale[1]),
362
356
  fontWeight: fontWeights.regular,
363
357
  lineHeight: layout.rem(20),
364
358
  letterSpacing: layout.px(0.32)
365
359
  };
366
360
  var heading01 = {
367
- fontFamily: fontFamilies.sans,
368
361
  fontSize: layout.rem(scale[1]),
369
362
  fontWeight: fontWeights.semibold,
370
363
  lineHeight: layout.rem(18),
371
364
  letterSpacing: layout.px(0.16)
372
365
  };
366
+ var productiveHeading01 = heading01;
373
367
  var heading02 = {
374
- fontFamily: fontFamilies.sans,
375
368
  fontSize: layout.rem(scale[2]),
376
369
  fontWeight: fontWeights.semibold,
377
370
  lineHeight: layout.rem(22),
378
371
  letterSpacing: 0
379
372
  };
373
+ var productiveHeading02 = heading02;
380
374
  var productiveHeading03 = {
381
- fontFamily: fontFamilies.sans,
382
375
  fontSize: layout.rem(scale[4]),
383
376
  fontWeight: fontWeights.regular,
384
377
  lineHeight: layout.rem(26),
385
378
  letterSpacing: 0
386
379
  };
387
380
  var productiveHeading04 = {
388
- fontFamily: fontFamilies.sans,
389
381
  fontSize: layout.rem(scale[6]),
390
382
  fontWeight: fontWeights.regular,
391
383
  lineHeight: layout.rem(36),
392
384
  letterSpacing: 0
393
385
  };
394
386
  var productiveHeading05 = {
395
- fontFamily: fontFamilies.sans,
396
387
  fontSize: layout.rem(scale[7]),
397
388
  fontWeight: fontWeights.regular,
398
389
  lineHeight: layout.rem(40),
399
390
  letterSpacing: 0
400
391
  };
392
+ var productiveHeading06 = {
393
+ fontSize: layout.rem(scale[9]),
394
+ fontWeight: fontWeights.light,
395
+ lineHeight: layout.rem(50),
396
+ letterSpacing: 0
397
+ };
398
+ var productiveHeading07 = {
399
+ fontSize: layout.rem(scale[11]),
400
+ fontWeight: fontWeights.light,
401
+ lineHeight: layout.rem(64),
402
+ letterSpacing: 0
403
+ };
404
+ var expressiveHeading01 = heading01;
405
+ var expressiveHeading02 = heading02;
401
406
  var expressiveHeading03 = fluid({
402
- fontFamily: fontFamilies.sans,
403
407
  fontSize: layout.rem(scale[4]),
404
408
  fontWeight: fontWeights.regular,
405
409
  lineHeight: '130%',
@@ -415,7 +419,6 @@
415
419
  }
416
420
  });
417
421
  var expressiveHeading04 = fluid({
418
- fontFamily: fontFamilies.sans,
419
422
  fontSize: layout.rem(scale[6]),
420
423
  fontWeight: fontWeights.regular,
421
424
  lineHeight: '129%',
@@ -431,7 +434,6 @@
431
434
  }
432
435
  });
433
436
  var expressiveHeading05 = fluid({
434
- fontFamily: fontFamilies.sans,
435
437
  fontSize: layout.rem(scale[7]),
436
438
  fontWeight: fontWeights.regular,
437
439
  lineHeight: '125%',
@@ -439,28 +441,24 @@
439
441
  breakpoints: {
440
442
  md: {
441
443
  fontSize: layout.rem(scale[8]),
442
- fontFamily: fontFamilies.sans,
443
444
  fontWeight: fontWeights.light,
444
445
  lineHeight: '122%',
445
446
  letterSpacing: 0
446
447
  },
447
448
  lg: {
448
449
  fontSize: layout.rem(scale[9]),
449
- fontFamily: fontFamilies.sans,
450
450
  fontWeight: fontWeights.light,
451
451
  lineHeight: '119%',
452
452
  letterSpacing: 0
453
453
  },
454
454
  xlg: {
455
455
  fontSize: layout.rem(scale[10]),
456
- fontFamily: fontFamilies.sans,
457
456
  fontWeight: fontWeights.light,
458
457
  lineHeight: '117%',
459
458
  letterSpacing: 0
460
459
  },
461
460
  max: {
462
461
  fontSize: layout.rem(scale[12]),
463
- fontFamily: fontFamilies.sans,
464
462
  fontWeight: fontWeights.light,
465
463
  lineHeight: layout.rem(70),
466
464
  letterSpacing: 0
@@ -468,7 +466,6 @@
468
466
  }
469
467
  });
470
468
  var expressiveHeading06 = fluid({
471
- fontFamily: fontFamilies.sans,
472
469
  fontSize: layout.rem(scale[7]),
473
470
  fontWeight: fontWeights.semibold,
474
471
  lineHeight: '125%',
@@ -476,28 +473,24 @@
476
473
  breakpoints: {
477
474
  md: {
478
475
  fontSize: layout.rem(scale[8]),
479
- fontFamily: fontFamilies.sans,
480
476
  fontWeight: fontWeights.semibold,
481
477
  lineHeight: '122%',
482
478
  letterSpacing: 0
483
479
  },
484
480
  lg: {
485
481
  fontSize: layout.rem(scale[9]),
486
- fontFamily: fontFamilies.sans,
487
482
  fontWeight: fontWeights.semibold,
488
483
  lineHeight: '119%',
489
484
  letterSpacing: 0
490
485
  },
491
486
  xlg: {
492
487
  fontSize: layout.rem(scale[10]),
493
- fontFamily: fontFamilies.sans,
494
488
  fontWeight: fontWeights.semibold,
495
489
  lineHeight: '117%',
496
490
  letterSpacing: 0
497
491
  },
498
492
  max: {
499
493
  fontSize: layout.rem(scale[12]),
500
- fontFamily: fontFamilies.sans,
501
494
  fontWeight: fontWeights.semibold,
502
495
  lineHeight: layout.rem(70),
503
496
  letterSpacing: 0
@@ -505,7 +498,6 @@
505
498
  }
506
499
  });
507
500
  var expressiveParagraph01 = fluid({
508
- fontFamily: fontFamilies.sans,
509
501
  fontSize: layout.rem(scale[5]),
510
502
  fontWeight: fontWeights.light,
511
503
  lineHeight: '125%',
@@ -520,7 +512,6 @@
520
512
  }
521
513
  });
522
514
  var quotation01 = fluid({
523
- fontFamily: fontFamilies.serif,
524
515
  fontSize: layout.rem(scale[4]),
525
516
  fontWeight: fontWeights.regular,
526
517
  lineHeight: '130%',
@@ -528,27 +519,23 @@
528
519
  breakpoints: {
529
520
  md: {
530
521
  fontSize: layout.rem(scale[4]),
531
- fontFamily: fontFamilies.serif,
532
522
  fontWeight: fontWeights.regular,
533
523
  letterSpacing: 0
534
524
  },
535
525
  lg: {
536
526
  fontSize: layout.rem(scale[5]),
537
- fontFamily: fontFamilies.serif,
538
527
  fontWeight: fontWeights.regular,
539
528
  lineHeight: '125%',
540
529
  letterSpacing: 0
541
530
  },
542
531
  xlg: {
543
532
  fontSize: layout.rem(scale[6]),
544
- fontFamily: fontFamilies.serif,
545
533
  fontWeight: fontWeights.regular,
546
534
  lineHeight: '129%',
547
535
  letterSpacing: 0
548
536
  },
549
537
  max: {
550
538
  fontSize: layout.rem(scale[7]),
551
- fontFamily: fontFamilies.serif,
552
539
  fontWeight: fontWeights.regular,
553
540
  lineHeight: '125%',
554
541
  letterSpacing: 0
@@ -556,7 +543,6 @@
556
543
  }
557
544
  });
558
545
  var quotation02 = fluid({
559
- fontFamily: fontFamilies.serif,
560
546
  fontSize: layout.rem(scale[7]),
561
547
  fontWeight: fontWeights.light,
562
548
  lineHeight: '125%',
@@ -580,7 +566,6 @@
580
566
  }
581
567
  });
582
568
  var display01 = fluid({
583
- fontFamily: fontFamilies.sans,
584
569
  fontSize: layout.rem(scale[9]),
585
570
  fontWeight: fontWeights.light,
586
571
  lineHeight: '119%',
@@ -603,7 +588,6 @@
603
588
  }
604
589
  });
605
590
  var display02 = fluid({
606
- fontFamily: fontFamilies.sans,
607
591
  fontSize: layout.rem(scale[9]),
608
592
  fontWeight: fontWeights.semibold,
609
593
  lineHeight: '119%',
@@ -626,7 +610,6 @@
626
610
  }
627
611
  });
628
612
  var display03 = fluid({
629
- fontFamily: fontFamilies.sans,
630
613
  fontSize: layout.rem(scale[9]),
631
614
  fontWeight: fontWeights.light,
632
615
  lineHeight: '119%',
@@ -653,7 +636,6 @@
653
636
  }
654
637
  });
655
638
  var display04 = fluid({
656
- fontFamily: fontFamilies.sans,
657
639
  fontSize: layout.rem(scale[9]),
658
640
  fontWeight: fontWeights.semibold,
659
641
  lineHeight: '119%',
@@ -692,10 +674,16 @@
692
674
  code01: code01,
693
675
  code02: code02,
694
676
  heading01: heading01,
677
+ productiveHeading01: productiveHeading01,
695
678
  heading02: heading02,
679
+ productiveHeading02: productiveHeading02,
696
680
  productiveHeading03: productiveHeading03,
697
681
  productiveHeading04: productiveHeading04,
698
682
  productiveHeading05: productiveHeading05,
683
+ productiveHeading06: productiveHeading06,
684
+ productiveHeading07: productiveHeading07,
685
+ expressiveHeading01: expressiveHeading01,
686
+ expressiveHeading02: expressiveHeading02,
699
687
  expressiveHeading03: expressiveHeading03,
700
688
  expressiveHeading04: expressiveHeading04,
701
689
  expressiveHeading05: expressiveHeading05,
@@ -735,10 +723,16 @@
735
723
  exports.code01 = code01;
736
724
  exports.code02 = code02;
737
725
  exports.heading01 = heading01;
726
+ exports.productiveHeading01 = productiveHeading01;
738
727
  exports.heading02 = heading02;
728
+ exports.productiveHeading02 = productiveHeading02;
739
729
  exports.productiveHeading03 = productiveHeading03;
740
730
  exports.productiveHeading04 = productiveHeading04;
741
731
  exports.productiveHeading05 = productiveHeading05;
732
+ exports.productiveHeading06 = productiveHeading06;
733
+ exports.productiveHeading07 = productiveHeading07;
734
+ exports.expressiveHeading01 = expressiveHeading01;
735
+ exports.expressiveHeading02 = expressiveHeading02;
742
736
  exports.expressiveHeading03 = expressiveHeading03;
743
737
  exports.expressiveHeading04 = expressiveHeading04;
744
738
  exports.expressiveHeading05 = expressiveHeading05;