@carbon/type 10.44.0 → 10.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +44 -23
- package/lib/index.js +44 -23
- package/package.json +2 -2
- package/scss/_inlined/_styles.scss +16 -16
- package/scss/_styles.scss +16 -16
- package/src/__tests__/__snapshots__/styles-test.js.snap +6 -6
- package/src/__tests__/fluid-test.js +4 -5
- package/src/scale.js +25 -23
- package/src/styles.js +16 -19
- package/umd/index.js +44 -23
package/es/index.js
CHANGED
|
@@ -210,8 +210,32 @@ function getTypeSize(step) {
|
|
|
210
210
|
*
|
|
211
211
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
212
212
|
*/
|
|
213
|
-
|
|
214
|
-
|
|
213
|
+
//values in pixels
|
|
214
|
+
|
|
215
|
+
var scale = [12, //scale[0]
|
|
216
|
+
14, //scale[1]
|
|
217
|
+
16, //scale[2]
|
|
218
|
+
18, //scale[3]
|
|
219
|
+
20, //scale[4]
|
|
220
|
+
24, //scale[5]
|
|
221
|
+
28, //scale[6]
|
|
222
|
+
32, //scale[7]
|
|
223
|
+
36, //scale[8]
|
|
224
|
+
42, //scale[9]
|
|
225
|
+
48, //scale[10]
|
|
226
|
+
54, //scale[11]
|
|
227
|
+
60, //scale[12]
|
|
228
|
+
68, //scale[13]
|
|
229
|
+
76, //scale[14]
|
|
230
|
+
84, //scale[15]
|
|
231
|
+
92, //scale[16]
|
|
232
|
+
102, //scale[17]
|
|
233
|
+
112, //scale[18]
|
|
234
|
+
122, //scale[19]
|
|
235
|
+
132, //scale[20]
|
|
236
|
+
144, //scale[21]
|
|
237
|
+
156 //scale[22]
|
|
238
|
+
];
|
|
215
239
|
|
|
216
240
|
function ownKeys(object, enumerableOnly) {
|
|
217
241
|
var keys = Object.keys(object);
|
|
@@ -410,7 +434,7 @@ var productiveHeading04$1 = {
|
|
|
410
434
|
};
|
|
411
435
|
var productiveHeading05$1 = {
|
|
412
436
|
fontSize: rem(scale[7]),
|
|
413
|
-
fontWeight: fontWeights.
|
|
437
|
+
fontWeight: fontWeights.light,
|
|
414
438
|
lineHeight: 1.25,
|
|
415
439
|
letterSpacing: 0
|
|
416
440
|
};
|
|
@@ -456,40 +480,38 @@ var expressiveHeading04$1 = {
|
|
|
456
480
|
breakpoints: {
|
|
457
481
|
xlg: {
|
|
458
482
|
fontSize: rem(scale[6]),
|
|
459
|
-
lineHeight: 1.25
|
|
483
|
+
lineHeight: 1.25,
|
|
484
|
+
fontWeight: fontWeights.light
|
|
460
485
|
},
|
|
461
486
|
max: {
|
|
462
|
-
fontSize: rem(scale[7])
|
|
487
|
+
fontSize: rem(scale[7]),
|
|
488
|
+
fontWeight: fontWeights.light
|
|
463
489
|
}
|
|
464
490
|
}
|
|
465
491
|
};
|
|
466
492
|
var expressiveHeading05$1 = {
|
|
467
493
|
fontSize: rem(scale[7]),
|
|
468
|
-
fontWeight: fontWeights.
|
|
494
|
+
fontWeight: fontWeights.light,
|
|
469
495
|
lineHeight: 1.25,
|
|
470
496
|
letterSpacing: 0,
|
|
471
497
|
breakpoints: {
|
|
472
498
|
md: {
|
|
473
499
|
fontSize: rem(scale[8]),
|
|
474
|
-
fontWeight: fontWeights.light,
|
|
475
500
|
lineHeight: 1.22,
|
|
476
501
|
letterSpacing: 0
|
|
477
502
|
},
|
|
478
503
|
lg: {
|
|
479
504
|
fontSize: rem(scale[9]),
|
|
480
|
-
fontWeight: fontWeights.light,
|
|
481
505
|
lineHeight: 1.19,
|
|
482
506
|
letterSpacing: 0
|
|
483
507
|
},
|
|
484
508
|
xlg: {
|
|
485
509
|
fontSize: rem(scale[10]),
|
|
486
|
-
fontWeight: fontWeights.light,
|
|
487
510
|
lineHeight: 1.17,
|
|
488
511
|
letterSpacing: 0
|
|
489
512
|
},
|
|
490
513
|
max: {
|
|
491
514
|
fontSize: rem(scale[12]),
|
|
492
|
-
fontWeight: fontWeights.light,
|
|
493
515
|
letterSpacing: 0
|
|
494
516
|
}
|
|
495
517
|
}
|
|
@@ -648,44 +670,43 @@ var display03$1 = {
|
|
|
648
670
|
letterSpacing: 0,
|
|
649
671
|
breakpoints: {
|
|
650
672
|
md: {
|
|
651
|
-
fontSize: rem(scale[
|
|
652
|
-
lineHeight: 1.
|
|
673
|
+
fontSize: rem(scale[11]),
|
|
674
|
+
lineHeight: 1.18
|
|
653
675
|
},
|
|
654
676
|
lg: {
|
|
655
|
-
fontSize: rem(scale[
|
|
656
|
-
lineHeight: 1.
|
|
677
|
+
fontSize: rem(scale[12]),
|
|
678
|
+
lineHeight: 1.16,
|
|
657
679
|
letterSpacing: px(-0.64)
|
|
658
680
|
},
|
|
659
681
|
xlg: {
|
|
660
|
-
fontSize: rem(scale[
|
|
661
|
-
lineHeight: 1.
|
|
682
|
+
fontSize: rem(scale[14]),
|
|
683
|
+
lineHeight: 1.13
|
|
662
684
|
},
|
|
663
685
|
max: {
|
|
664
|
-
fontSize: rem(scale[
|
|
665
|
-
lineHeight: 1.
|
|
686
|
+
fontSize: rem(scale[15]),
|
|
687
|
+
lineHeight: 1.11,
|
|
666
688
|
letterSpacing: px(-0.96)
|
|
667
689
|
}
|
|
668
690
|
}
|
|
669
691
|
};
|
|
670
692
|
var display04$1 = {
|
|
671
693
|
fontSize: rem(scale[9]),
|
|
672
|
-
fontWeight: fontWeights.
|
|
694
|
+
fontWeight: fontWeights.light,
|
|
673
695
|
lineHeight: 1.19,
|
|
674
696
|
letterSpacing: 0,
|
|
675
697
|
breakpoints: {
|
|
676
698
|
md: {
|
|
677
699
|
fontSize: rem(scale[13]),
|
|
678
|
-
lineHeight: 1.
|
|
700
|
+
lineHeight: 1.14
|
|
679
701
|
},
|
|
680
702
|
lg: {
|
|
681
703
|
fontSize: rem(scale[16]),
|
|
682
|
-
lineHeight: 1.
|
|
704
|
+
lineHeight: 1.1,
|
|
683
705
|
letterSpacing: px(-0.64)
|
|
684
706
|
},
|
|
685
707
|
xlg: {
|
|
686
708
|
fontSize: rem(scale[19]),
|
|
687
|
-
lineHeight: 1.
|
|
688
|
-
letterSpacing: px(-0.64)
|
|
709
|
+
lineHeight: 1.06
|
|
689
710
|
},
|
|
690
711
|
max: {
|
|
691
712
|
fontSize: rem(scale[22]),
|
package/lib/index.js
CHANGED
|
@@ -214,8 +214,32 @@ function getTypeSize(step) {
|
|
|
214
214
|
*
|
|
215
215
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
216
216
|
*/
|
|
217
|
-
|
|
218
|
-
|
|
217
|
+
//values in pixels
|
|
218
|
+
|
|
219
|
+
var scale = [12, //scale[0]
|
|
220
|
+
14, //scale[1]
|
|
221
|
+
16, //scale[2]
|
|
222
|
+
18, //scale[3]
|
|
223
|
+
20, //scale[4]
|
|
224
|
+
24, //scale[5]
|
|
225
|
+
28, //scale[6]
|
|
226
|
+
32, //scale[7]
|
|
227
|
+
36, //scale[8]
|
|
228
|
+
42, //scale[9]
|
|
229
|
+
48, //scale[10]
|
|
230
|
+
54, //scale[11]
|
|
231
|
+
60, //scale[12]
|
|
232
|
+
68, //scale[13]
|
|
233
|
+
76, //scale[14]
|
|
234
|
+
84, //scale[15]
|
|
235
|
+
92, //scale[16]
|
|
236
|
+
102, //scale[17]
|
|
237
|
+
112, //scale[18]
|
|
238
|
+
122, //scale[19]
|
|
239
|
+
132, //scale[20]
|
|
240
|
+
144, //scale[21]
|
|
241
|
+
156 //scale[22]
|
|
242
|
+
];
|
|
219
243
|
|
|
220
244
|
function ownKeys(object, enumerableOnly) {
|
|
221
245
|
var keys = Object.keys(object);
|
|
@@ -414,7 +438,7 @@ var productiveHeading04$1 = {
|
|
|
414
438
|
};
|
|
415
439
|
var productiveHeading05$1 = {
|
|
416
440
|
fontSize: rem(scale[7]),
|
|
417
|
-
fontWeight: fontWeights.
|
|
441
|
+
fontWeight: fontWeights.light,
|
|
418
442
|
lineHeight: 1.25,
|
|
419
443
|
letterSpacing: 0
|
|
420
444
|
};
|
|
@@ -460,40 +484,38 @@ var expressiveHeading04$1 = {
|
|
|
460
484
|
breakpoints: {
|
|
461
485
|
xlg: {
|
|
462
486
|
fontSize: rem(scale[6]),
|
|
463
|
-
lineHeight: 1.25
|
|
487
|
+
lineHeight: 1.25,
|
|
488
|
+
fontWeight: fontWeights.light
|
|
464
489
|
},
|
|
465
490
|
max: {
|
|
466
|
-
fontSize: rem(scale[7])
|
|
491
|
+
fontSize: rem(scale[7]),
|
|
492
|
+
fontWeight: fontWeights.light
|
|
467
493
|
}
|
|
468
494
|
}
|
|
469
495
|
};
|
|
470
496
|
var expressiveHeading05$1 = {
|
|
471
497
|
fontSize: rem(scale[7]),
|
|
472
|
-
fontWeight: fontWeights.
|
|
498
|
+
fontWeight: fontWeights.light,
|
|
473
499
|
lineHeight: 1.25,
|
|
474
500
|
letterSpacing: 0,
|
|
475
501
|
breakpoints: {
|
|
476
502
|
md: {
|
|
477
503
|
fontSize: rem(scale[8]),
|
|
478
|
-
fontWeight: fontWeights.light,
|
|
479
504
|
lineHeight: 1.22,
|
|
480
505
|
letterSpacing: 0
|
|
481
506
|
},
|
|
482
507
|
lg: {
|
|
483
508
|
fontSize: rem(scale[9]),
|
|
484
|
-
fontWeight: fontWeights.light,
|
|
485
509
|
lineHeight: 1.19,
|
|
486
510
|
letterSpacing: 0
|
|
487
511
|
},
|
|
488
512
|
xlg: {
|
|
489
513
|
fontSize: rem(scale[10]),
|
|
490
|
-
fontWeight: fontWeights.light,
|
|
491
514
|
lineHeight: 1.17,
|
|
492
515
|
letterSpacing: 0
|
|
493
516
|
},
|
|
494
517
|
max: {
|
|
495
518
|
fontSize: rem(scale[12]),
|
|
496
|
-
fontWeight: fontWeights.light,
|
|
497
519
|
letterSpacing: 0
|
|
498
520
|
}
|
|
499
521
|
}
|
|
@@ -652,44 +674,43 @@ var display03$1 = {
|
|
|
652
674
|
letterSpacing: 0,
|
|
653
675
|
breakpoints: {
|
|
654
676
|
md: {
|
|
655
|
-
fontSize: rem(scale[
|
|
656
|
-
lineHeight: 1.
|
|
677
|
+
fontSize: rem(scale[11]),
|
|
678
|
+
lineHeight: 1.18
|
|
657
679
|
},
|
|
658
680
|
lg: {
|
|
659
|
-
fontSize: rem(scale[
|
|
660
|
-
lineHeight: 1.
|
|
681
|
+
fontSize: rem(scale[12]),
|
|
682
|
+
lineHeight: 1.16,
|
|
661
683
|
letterSpacing: px(-0.64)
|
|
662
684
|
},
|
|
663
685
|
xlg: {
|
|
664
|
-
fontSize: rem(scale[
|
|
665
|
-
lineHeight: 1.
|
|
686
|
+
fontSize: rem(scale[14]),
|
|
687
|
+
lineHeight: 1.13
|
|
666
688
|
},
|
|
667
689
|
max: {
|
|
668
|
-
fontSize: rem(scale[
|
|
669
|
-
lineHeight: 1.
|
|
690
|
+
fontSize: rem(scale[15]),
|
|
691
|
+
lineHeight: 1.11,
|
|
670
692
|
letterSpacing: px(-0.96)
|
|
671
693
|
}
|
|
672
694
|
}
|
|
673
695
|
};
|
|
674
696
|
var display04$1 = {
|
|
675
697
|
fontSize: rem(scale[9]),
|
|
676
|
-
fontWeight: fontWeights.
|
|
698
|
+
fontWeight: fontWeights.light,
|
|
677
699
|
lineHeight: 1.19,
|
|
678
700
|
letterSpacing: 0,
|
|
679
701
|
breakpoints: {
|
|
680
702
|
md: {
|
|
681
703
|
fontSize: rem(scale[13]),
|
|
682
|
-
lineHeight: 1.
|
|
704
|
+
lineHeight: 1.14
|
|
683
705
|
},
|
|
684
706
|
lg: {
|
|
685
707
|
fontSize: rem(scale[16]),
|
|
686
|
-
lineHeight: 1.
|
|
708
|
+
lineHeight: 1.1,
|
|
687
709
|
letterSpacing: px(-0.64)
|
|
688
710
|
},
|
|
689
711
|
xlg: {
|
|
690
712
|
fontSize: rem(scale[19]),
|
|
691
|
-
lineHeight: 1.
|
|
692
|
-
letterSpacing: px(-0.64)
|
|
713
|
+
lineHeight: 1.06
|
|
693
714
|
},
|
|
694
715
|
max: {
|
|
695
716
|
fontSize: rem(scale[22]),
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/type",
|
|
3
3
|
"description": "Typography for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.45.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"sassDir": "scss",
|
|
53
53
|
"needs": "^1.3.0"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "85936cc8eff48a8eeec70b00966339f3b325eb7f"
|
|
56
56
|
}
|
|
@@ -276,7 +276,7 @@ $heading-04: $productive-heading-04 !default;
|
|
|
276
276
|
/// @group @carbon/type
|
|
277
277
|
$productive-heading-05: (
|
|
278
278
|
font-size: carbon--type-scale(8),
|
|
279
|
-
font-weight: carbon--font-weight('
|
|
279
|
+
font-weight: carbon--font-weight('light'),
|
|
280
280
|
line-height: 1.25,
|
|
281
281
|
letter-spacing: 0,
|
|
282
282
|
) !default;
|
|
@@ -364,9 +364,11 @@ $expressive-heading-04: (
|
|
|
364
364
|
xlg: (
|
|
365
365
|
font-size: carbon--type-scale(7),
|
|
366
366
|
line-height: 1.25,
|
|
367
|
+
font-weight: carbon--font-weight('light'),
|
|
367
368
|
),
|
|
368
369
|
max: (
|
|
369
370
|
font-size: carbon--type-scale(8),
|
|
371
|
+
font-weight: carbon--font-weight('light'),
|
|
370
372
|
),
|
|
371
373
|
),
|
|
372
374
|
) !default;
|
|
@@ -381,13 +383,12 @@ $fluid-heading-04: $expressive-heading-04 !default;
|
|
|
381
383
|
/// @group @carbon/type
|
|
382
384
|
$expressive-heading-05: (
|
|
383
385
|
font-size: carbon--type-scale(8),
|
|
384
|
-
font-weight: carbon--font-weight('
|
|
386
|
+
font-weight: carbon--font-weight('light'),
|
|
385
387
|
line-height: 1.25,
|
|
386
388
|
letter-spacing: 0,
|
|
387
389
|
breakpoints: (
|
|
388
390
|
md: (
|
|
389
391
|
font-size: carbon--type-scale(9),
|
|
390
|
-
font-weight: carbon--font-weight('light'),
|
|
391
392
|
line-height: 1.22,
|
|
392
393
|
),
|
|
393
394
|
lg: (
|
|
@@ -604,22 +605,22 @@ $display-03: (
|
|
|
604
605
|
letter-spacing: 0,
|
|
605
606
|
breakpoints: (
|
|
606
607
|
md: (
|
|
607
|
-
font-size: carbon--type-scale(
|
|
608
|
-
line-height: 1.
|
|
608
|
+
font-size: carbon--type-scale(12),
|
|
609
|
+
line-height: 1.18,
|
|
609
610
|
),
|
|
610
611
|
lg: (
|
|
611
|
-
font-size: carbon--type-scale(
|
|
612
|
-
line-height: 1.
|
|
612
|
+
font-size: carbon--type-scale(13),
|
|
613
|
+
line-height: 1.16,
|
|
613
614
|
letter-spacing: -0.64px,
|
|
614
615
|
),
|
|
615
616
|
xlg: (
|
|
616
|
-
font-size: carbon--type-scale(
|
|
617
|
-
line-height: 1.
|
|
617
|
+
font-size: carbon--type-scale(15),
|
|
618
|
+
line-height: 1.13,
|
|
618
619
|
letter-spacing: -0.64px,
|
|
619
620
|
),
|
|
620
621
|
max: (
|
|
621
|
-
font-size: carbon--type-scale(
|
|
622
|
-
line-height: 1.
|
|
622
|
+
font-size: carbon--type-scale(16),
|
|
623
|
+
line-height: 1.11,
|
|
623
624
|
letter-spacing: -0.96px,
|
|
624
625
|
),
|
|
625
626
|
),
|
|
@@ -635,23 +636,22 @@ $fluid-display-03: $display-03 !default;
|
|
|
635
636
|
/// @group @carbon/type
|
|
636
637
|
$display-04: (
|
|
637
638
|
font-size: carbon--type-scale(10),
|
|
638
|
-
font-weight: carbon--font-weight('
|
|
639
|
+
font-weight: carbon--font-weight('light'),
|
|
639
640
|
line-height: 1.19,
|
|
640
641
|
letter-spacing: 0,
|
|
641
642
|
breakpoints: (
|
|
642
643
|
md: (
|
|
643
644
|
font-size: carbon--type-scale(14),
|
|
644
|
-
line-height: 1.
|
|
645
|
+
line-height: 1.14,
|
|
645
646
|
),
|
|
646
647
|
lg: (
|
|
647
648
|
font-size: carbon--type-scale(17),
|
|
648
|
-
line-height: 1.
|
|
649
|
+
line-height: 1.1,
|
|
649
650
|
letter-spacing: -0.64px,
|
|
650
651
|
),
|
|
651
652
|
xlg: (
|
|
652
653
|
font-size: carbon--type-scale(20),
|
|
653
|
-
line-height: 1.
|
|
654
|
-
letter-spacing: -0.64px,
|
|
654
|
+
line-height: 1.06,
|
|
655
655
|
),
|
|
656
656
|
max: (
|
|
657
657
|
font-size: carbon--type-scale(23),
|
package/scss/_styles.scss
CHANGED
|
@@ -276,7 +276,7 @@ $heading-04: $productive-heading-04 !default;
|
|
|
276
276
|
/// @group @carbon/type
|
|
277
277
|
$productive-heading-05: (
|
|
278
278
|
font-size: carbon--type-scale(8),
|
|
279
|
-
font-weight: carbon--font-weight('
|
|
279
|
+
font-weight: carbon--font-weight('light'),
|
|
280
280
|
line-height: 1.25,
|
|
281
281
|
letter-spacing: 0,
|
|
282
282
|
) !default;
|
|
@@ -364,9 +364,11 @@ $expressive-heading-04: (
|
|
|
364
364
|
xlg: (
|
|
365
365
|
font-size: carbon--type-scale(7),
|
|
366
366
|
line-height: 1.25,
|
|
367
|
+
font-weight: carbon--font-weight('light'),
|
|
367
368
|
),
|
|
368
369
|
max: (
|
|
369
370
|
font-size: carbon--type-scale(8),
|
|
371
|
+
font-weight: carbon--font-weight('light'),
|
|
370
372
|
),
|
|
371
373
|
),
|
|
372
374
|
) !default;
|
|
@@ -381,13 +383,12 @@ $fluid-heading-04: $expressive-heading-04 !default;
|
|
|
381
383
|
/// @group @carbon/type
|
|
382
384
|
$expressive-heading-05: (
|
|
383
385
|
font-size: carbon--type-scale(8),
|
|
384
|
-
font-weight: carbon--font-weight('
|
|
386
|
+
font-weight: carbon--font-weight('light'),
|
|
385
387
|
line-height: 1.25,
|
|
386
388
|
letter-spacing: 0,
|
|
387
389
|
breakpoints: (
|
|
388
390
|
md: (
|
|
389
391
|
font-size: carbon--type-scale(9),
|
|
390
|
-
font-weight: carbon--font-weight('light'),
|
|
391
392
|
line-height: 1.22,
|
|
392
393
|
),
|
|
393
394
|
lg: (
|
|
@@ -604,22 +605,22 @@ $display-03: (
|
|
|
604
605
|
letter-spacing: 0,
|
|
605
606
|
breakpoints: (
|
|
606
607
|
md: (
|
|
607
|
-
font-size: carbon--type-scale(
|
|
608
|
-
line-height: 1.
|
|
608
|
+
font-size: carbon--type-scale(12),
|
|
609
|
+
line-height: 1.18,
|
|
609
610
|
),
|
|
610
611
|
lg: (
|
|
611
|
-
font-size: carbon--type-scale(
|
|
612
|
-
line-height: 1.
|
|
612
|
+
font-size: carbon--type-scale(13),
|
|
613
|
+
line-height: 1.16,
|
|
613
614
|
letter-spacing: -0.64px,
|
|
614
615
|
),
|
|
615
616
|
xlg: (
|
|
616
|
-
font-size: carbon--type-scale(
|
|
617
|
-
line-height: 1.
|
|
617
|
+
font-size: carbon--type-scale(15),
|
|
618
|
+
line-height: 1.13,
|
|
618
619
|
letter-spacing: -0.64px,
|
|
619
620
|
),
|
|
620
621
|
max: (
|
|
621
|
-
font-size: carbon--type-scale(
|
|
622
|
-
line-height: 1.
|
|
622
|
+
font-size: carbon--type-scale(16),
|
|
623
|
+
line-height: 1.11,
|
|
623
624
|
letter-spacing: -0.96px,
|
|
624
625
|
),
|
|
625
626
|
),
|
|
@@ -635,23 +636,22 @@ $fluid-display-03: $display-03 !default;
|
|
|
635
636
|
/// @group @carbon/type
|
|
636
637
|
$display-04: (
|
|
637
638
|
font-size: carbon--type-scale(10),
|
|
638
|
-
font-weight: carbon--font-weight('
|
|
639
|
+
font-weight: carbon--font-weight('light'),
|
|
639
640
|
line-height: 1.19,
|
|
640
641
|
letter-spacing: 0,
|
|
641
642
|
breakpoints: (
|
|
642
643
|
md: (
|
|
643
644
|
font-size: carbon--type-scale(14),
|
|
644
|
-
line-height: 1.
|
|
645
|
+
line-height: 1.14,
|
|
645
646
|
),
|
|
646
647
|
lg: (
|
|
647
648
|
font-size: carbon--type-scale(17),
|
|
648
|
-
line-height: 1.
|
|
649
|
+
line-height: 1.1,
|
|
649
650
|
letter-spacing: -0.64px,
|
|
650
651
|
),
|
|
651
652
|
xlg: (
|
|
652
653
|
font-size: carbon--type-scale(20),
|
|
653
|
-
line-height: 1.
|
|
654
|
-
letter-spacing: -0.64px,
|
|
654
|
+
line-height: 1.06,
|
|
655
655
|
),
|
|
656
656
|
max: (
|
|
657
657
|
font-size: carbon--type-scale(23),
|
|
@@ -109,7 +109,7 @@ letter-spacing: 0;"
|
|
|
109
109
|
|
|
110
110
|
exports[`styles display04 should be printable 1`] = `
|
|
111
111
|
"font-size: 2.625rem;
|
|
112
|
-
font-weight:
|
|
112
|
+
font-weight: 300;
|
|
113
113
|
line-height: 1.19;
|
|
114
114
|
letter-spacing: 0;"
|
|
115
115
|
`;
|
|
@@ -144,7 +144,7 @@ letter-spacing: 0;"
|
|
|
144
144
|
|
|
145
145
|
exports[`styles expressiveHeading05 should be printable 1`] = `
|
|
146
146
|
"font-size: 2rem;
|
|
147
|
-
font-weight:
|
|
147
|
+
font-weight: 300;
|
|
148
148
|
line-height: 1.25;
|
|
149
149
|
letter-spacing: 0;"
|
|
150
150
|
`;
|
|
@@ -186,7 +186,7 @@ letter-spacing: 0;"
|
|
|
186
186
|
|
|
187
187
|
exports[`styles fluidDisplay04 should be printable 1`] = `
|
|
188
188
|
"font-size: 2.625rem;
|
|
189
|
-
font-weight:
|
|
189
|
+
font-weight: 300;
|
|
190
190
|
line-height: 1.19;
|
|
191
191
|
letter-spacing: 0;"
|
|
192
192
|
`;
|
|
@@ -207,7 +207,7 @@ letter-spacing: 0;"
|
|
|
207
207
|
|
|
208
208
|
exports[`styles fluidHeading05 should be printable 1`] = `
|
|
209
209
|
"font-size: 2rem;
|
|
210
|
-
font-weight:
|
|
210
|
+
font-weight: 300;
|
|
211
211
|
line-height: 1.25;
|
|
212
212
|
letter-spacing: 0;"
|
|
213
213
|
`;
|
|
@@ -272,7 +272,7 @@ letter-spacing: 0;"
|
|
|
272
272
|
|
|
273
273
|
exports[`styles heading05 should be printable 1`] = `
|
|
274
274
|
"font-size: 2rem;
|
|
275
|
-
font-weight:
|
|
275
|
+
font-weight: 300;
|
|
276
276
|
line-height: 1.25;
|
|
277
277
|
letter-spacing: 0;"
|
|
278
278
|
`;
|
|
@@ -375,7 +375,7 @@ letter-spacing: 0;"
|
|
|
375
375
|
|
|
376
376
|
exports[`styles productiveHeading05 should be printable 1`] = `
|
|
377
377
|
"font-size: 2rem;
|
|
378
|
-
font-weight:
|
|
378
|
+
font-weight: 300;
|
|
379
379
|
line-height: 1.25;
|
|
380
380
|
letter-spacing: 0;"
|
|
381
381
|
`;
|
|
@@ -44,17 +44,16 @@ describe('fluid', () => {
|
|
|
44
44
|
Object {
|
|
45
45
|
"@media (min-width: 42rem)": Object {
|
|
46
46
|
"fontSize": "calc(4.25rem + 1.5 * ((100vw - 42rem) / 24))",
|
|
47
|
-
"lineHeight": 1.
|
|
47
|
+
"lineHeight": 1.14,
|
|
48
48
|
},
|
|
49
49
|
"@media (min-width: 66rem)": Object {
|
|
50
50
|
"fontSize": "calc(5.75rem + 1.875 * ((100vw - 66rem) / 16))",
|
|
51
51
|
"letterSpacing": "-0.64px",
|
|
52
|
-
"lineHeight": 1.
|
|
52
|
+
"lineHeight": 1.1,
|
|
53
53
|
},
|
|
54
54
|
"@media (min-width: 82rem)": Object {
|
|
55
55
|
"fontSize": "calc(7.625rem + 2.125 * ((100vw - 82rem) / 17))",
|
|
56
|
-
"
|
|
57
|
-
"lineHeight": 1.07,
|
|
56
|
+
"lineHeight": 1.06,
|
|
58
57
|
},
|
|
59
58
|
"@media (min-width: 99rem)": Object {
|
|
60
59
|
"fontSize": "9.75rem",
|
|
@@ -62,7 +61,7 @@ describe('fluid', () => {
|
|
|
62
61
|
"lineHeight": 1.05,
|
|
63
62
|
},
|
|
64
63
|
"fontSize": "calc(2.625rem + 1.625 * ((100vw - 20rem) / 22))",
|
|
65
|
-
"fontWeight":
|
|
64
|
+
"fontWeight": 300,
|
|
66
65
|
"letterSpacing": 0,
|
|
67
66
|
"lineHeight": 1.19,
|
|
68
67
|
}
|
package/src/scale.js
CHANGED
|
@@ -24,28 +24,30 @@ export function getTypeSize(step) {
|
|
|
24
24
|
*
|
|
25
25
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
26
26
|
*/
|
|
27
|
+
|
|
28
|
+
//values in pixels
|
|
27
29
|
export const scale = [
|
|
28
|
-
12,
|
|
29
|
-
14,
|
|
30
|
-
16,
|
|
31
|
-
18,
|
|
32
|
-
20,
|
|
33
|
-
24,
|
|
34
|
-
28,
|
|
35
|
-
32,
|
|
36
|
-
36,
|
|
37
|
-
42,
|
|
38
|
-
48,
|
|
39
|
-
54,
|
|
40
|
-
60,
|
|
41
|
-
68,
|
|
42
|
-
76,
|
|
43
|
-
84,
|
|
44
|
-
92,
|
|
45
|
-
102,
|
|
46
|
-
112,
|
|
47
|
-
122,
|
|
48
|
-
132,
|
|
49
|
-
144,
|
|
50
|
-
156,
|
|
30
|
+
12, //scale[0]
|
|
31
|
+
14, //scale[1]
|
|
32
|
+
16, //scale[2]
|
|
33
|
+
18, //scale[3]
|
|
34
|
+
20, //scale[4]
|
|
35
|
+
24, //scale[5]
|
|
36
|
+
28, //scale[6]
|
|
37
|
+
32, //scale[7]
|
|
38
|
+
36, //scale[8]
|
|
39
|
+
42, //scale[9]
|
|
40
|
+
48, //scale[10]
|
|
41
|
+
54, //scale[11]
|
|
42
|
+
60, //scale[12]
|
|
43
|
+
68, //scale[13]
|
|
44
|
+
76, //scale[14]
|
|
45
|
+
84, //scale[15]
|
|
46
|
+
92, //scale[16]
|
|
47
|
+
102, //scale[17]
|
|
48
|
+
112, //scale[18]
|
|
49
|
+
122, //scale[19]
|
|
50
|
+
132, //scale[20]
|
|
51
|
+
144, //scale[21]
|
|
52
|
+
156, //scale[22]
|
|
51
53
|
];
|
package/src/styles.js
CHANGED
|
@@ -138,7 +138,7 @@ export const productiveHeading04 = {
|
|
|
138
138
|
|
|
139
139
|
export const productiveHeading05 = {
|
|
140
140
|
fontSize: rem(scale[7]),
|
|
141
|
-
fontWeight: fontWeights.
|
|
141
|
+
fontWeight: fontWeights.light,
|
|
142
142
|
lineHeight: 1.25,
|
|
143
143
|
letterSpacing: 0,
|
|
144
144
|
};
|
|
@@ -193,40 +193,38 @@ export const expressiveHeading04 = {
|
|
|
193
193
|
xlg: {
|
|
194
194
|
fontSize: rem(scale[6]),
|
|
195
195
|
lineHeight: 1.25,
|
|
196
|
+
fontWeight: fontWeights.light,
|
|
196
197
|
},
|
|
197
198
|
max: {
|
|
198
199
|
fontSize: rem(scale[7]),
|
|
200
|
+
fontWeight: fontWeights.light,
|
|
199
201
|
},
|
|
200
202
|
},
|
|
201
203
|
};
|
|
202
204
|
|
|
203
205
|
export const expressiveHeading05 = {
|
|
204
206
|
fontSize: rem(scale[7]),
|
|
205
|
-
fontWeight: fontWeights.
|
|
207
|
+
fontWeight: fontWeights.light,
|
|
206
208
|
lineHeight: 1.25,
|
|
207
209
|
letterSpacing: 0,
|
|
208
210
|
breakpoints: {
|
|
209
211
|
md: {
|
|
210
212
|
fontSize: rem(scale[8]),
|
|
211
|
-
fontWeight: fontWeights.light,
|
|
212
213
|
lineHeight: 1.22,
|
|
213
214
|
letterSpacing: 0,
|
|
214
215
|
},
|
|
215
216
|
lg: {
|
|
216
217
|
fontSize: rem(scale[9]),
|
|
217
|
-
fontWeight: fontWeights.light,
|
|
218
218
|
lineHeight: 1.19,
|
|
219
219
|
letterSpacing: 0,
|
|
220
220
|
},
|
|
221
221
|
xlg: {
|
|
222
222
|
fontSize: rem(scale[10]),
|
|
223
|
-
fontWeight: fontWeights.light,
|
|
224
223
|
lineHeight: 1.17,
|
|
225
224
|
letterSpacing: 0,
|
|
226
225
|
},
|
|
227
226
|
max: {
|
|
228
227
|
fontSize: rem(scale[12]),
|
|
229
|
-
fontWeight: fontWeights.light,
|
|
230
228
|
letterSpacing: 0,
|
|
231
229
|
},
|
|
232
230
|
},
|
|
@@ -392,21 +390,21 @@ export const display03 = {
|
|
|
392
390
|
letterSpacing: 0,
|
|
393
391
|
breakpoints: {
|
|
394
392
|
md: {
|
|
395
|
-
fontSize: rem(scale[
|
|
396
|
-
lineHeight: 1.
|
|
393
|
+
fontSize: rem(scale[11]),
|
|
394
|
+
lineHeight: 1.18,
|
|
397
395
|
},
|
|
398
396
|
lg: {
|
|
399
|
-
fontSize: rem(scale[
|
|
400
|
-
lineHeight: 1.
|
|
397
|
+
fontSize: rem(scale[12]),
|
|
398
|
+
lineHeight: 1.16,
|
|
401
399
|
letterSpacing: px(-0.64),
|
|
402
400
|
},
|
|
403
401
|
xlg: {
|
|
404
|
-
fontSize: rem(scale[
|
|
405
|
-
lineHeight: 1.
|
|
402
|
+
fontSize: rem(scale[14]),
|
|
403
|
+
lineHeight: 1.13,
|
|
406
404
|
},
|
|
407
405
|
max: {
|
|
408
|
-
fontSize: rem(scale[
|
|
409
|
-
lineHeight: 1.
|
|
406
|
+
fontSize: rem(scale[15]),
|
|
407
|
+
lineHeight: 1.11,
|
|
410
408
|
letterSpacing: px(-0.96),
|
|
411
409
|
},
|
|
412
410
|
},
|
|
@@ -414,23 +412,22 @@ export const display03 = {
|
|
|
414
412
|
|
|
415
413
|
export const display04 = {
|
|
416
414
|
fontSize: rem(scale[9]),
|
|
417
|
-
fontWeight: fontWeights.
|
|
415
|
+
fontWeight: fontWeights.light,
|
|
418
416
|
lineHeight: 1.19,
|
|
419
417
|
letterSpacing: 0,
|
|
420
418
|
breakpoints: {
|
|
421
419
|
md: {
|
|
422
420
|
fontSize: rem(scale[13]),
|
|
423
|
-
lineHeight: 1.
|
|
421
|
+
lineHeight: 1.14,
|
|
424
422
|
},
|
|
425
423
|
lg: {
|
|
426
424
|
fontSize: rem(scale[16]),
|
|
427
|
-
lineHeight: 1.
|
|
425
|
+
lineHeight: 1.1,
|
|
428
426
|
letterSpacing: px(-0.64),
|
|
429
427
|
},
|
|
430
428
|
xlg: {
|
|
431
429
|
fontSize: rem(scale[19]),
|
|
432
|
-
lineHeight: 1.
|
|
433
|
-
letterSpacing: px(-0.64),
|
|
430
|
+
lineHeight: 1.06,
|
|
434
431
|
},
|
|
435
432
|
max: {
|
|
436
433
|
fontSize: rem(scale[22]),
|
package/umd/index.js
CHANGED
|
@@ -216,8 +216,32 @@
|
|
|
216
216
|
*
|
|
217
217
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
218
218
|
*/
|
|
219
|
-
|
|
220
|
-
|
|
219
|
+
//values in pixels
|
|
220
|
+
|
|
221
|
+
var scale = [12, //scale[0]
|
|
222
|
+
14, //scale[1]
|
|
223
|
+
16, //scale[2]
|
|
224
|
+
18, //scale[3]
|
|
225
|
+
20, //scale[4]
|
|
226
|
+
24, //scale[5]
|
|
227
|
+
28, //scale[6]
|
|
228
|
+
32, //scale[7]
|
|
229
|
+
36, //scale[8]
|
|
230
|
+
42, //scale[9]
|
|
231
|
+
48, //scale[10]
|
|
232
|
+
54, //scale[11]
|
|
233
|
+
60, //scale[12]
|
|
234
|
+
68, //scale[13]
|
|
235
|
+
76, //scale[14]
|
|
236
|
+
84, //scale[15]
|
|
237
|
+
92, //scale[16]
|
|
238
|
+
102, //scale[17]
|
|
239
|
+
112, //scale[18]
|
|
240
|
+
122, //scale[19]
|
|
241
|
+
132, //scale[20]
|
|
242
|
+
144, //scale[21]
|
|
243
|
+
156 //scale[22]
|
|
244
|
+
];
|
|
221
245
|
|
|
222
246
|
function ownKeys(object, enumerableOnly) {
|
|
223
247
|
var keys = Object.keys(object);
|
|
@@ -416,7 +440,7 @@
|
|
|
416
440
|
};
|
|
417
441
|
var productiveHeading05$1 = {
|
|
418
442
|
fontSize: rem(scale[7]),
|
|
419
|
-
fontWeight: fontWeights.
|
|
443
|
+
fontWeight: fontWeights.light,
|
|
420
444
|
lineHeight: 1.25,
|
|
421
445
|
letterSpacing: 0
|
|
422
446
|
};
|
|
@@ -462,40 +486,38 @@
|
|
|
462
486
|
breakpoints: {
|
|
463
487
|
xlg: {
|
|
464
488
|
fontSize: rem(scale[6]),
|
|
465
|
-
lineHeight: 1.25
|
|
489
|
+
lineHeight: 1.25,
|
|
490
|
+
fontWeight: fontWeights.light
|
|
466
491
|
},
|
|
467
492
|
max: {
|
|
468
|
-
fontSize: rem(scale[7])
|
|
493
|
+
fontSize: rem(scale[7]),
|
|
494
|
+
fontWeight: fontWeights.light
|
|
469
495
|
}
|
|
470
496
|
}
|
|
471
497
|
};
|
|
472
498
|
var expressiveHeading05$1 = {
|
|
473
499
|
fontSize: rem(scale[7]),
|
|
474
|
-
fontWeight: fontWeights.
|
|
500
|
+
fontWeight: fontWeights.light,
|
|
475
501
|
lineHeight: 1.25,
|
|
476
502
|
letterSpacing: 0,
|
|
477
503
|
breakpoints: {
|
|
478
504
|
md: {
|
|
479
505
|
fontSize: rem(scale[8]),
|
|
480
|
-
fontWeight: fontWeights.light,
|
|
481
506
|
lineHeight: 1.22,
|
|
482
507
|
letterSpacing: 0
|
|
483
508
|
},
|
|
484
509
|
lg: {
|
|
485
510
|
fontSize: rem(scale[9]),
|
|
486
|
-
fontWeight: fontWeights.light,
|
|
487
511
|
lineHeight: 1.19,
|
|
488
512
|
letterSpacing: 0
|
|
489
513
|
},
|
|
490
514
|
xlg: {
|
|
491
515
|
fontSize: rem(scale[10]),
|
|
492
|
-
fontWeight: fontWeights.light,
|
|
493
516
|
lineHeight: 1.17,
|
|
494
517
|
letterSpacing: 0
|
|
495
518
|
},
|
|
496
519
|
max: {
|
|
497
520
|
fontSize: rem(scale[12]),
|
|
498
|
-
fontWeight: fontWeights.light,
|
|
499
521
|
letterSpacing: 0
|
|
500
522
|
}
|
|
501
523
|
}
|
|
@@ -654,44 +676,43 @@
|
|
|
654
676
|
letterSpacing: 0,
|
|
655
677
|
breakpoints: {
|
|
656
678
|
md: {
|
|
657
|
-
fontSize: rem(scale[
|
|
658
|
-
lineHeight: 1.
|
|
679
|
+
fontSize: rem(scale[11]),
|
|
680
|
+
lineHeight: 1.18
|
|
659
681
|
},
|
|
660
682
|
lg: {
|
|
661
|
-
fontSize: rem(scale[
|
|
662
|
-
lineHeight: 1.
|
|
683
|
+
fontSize: rem(scale[12]),
|
|
684
|
+
lineHeight: 1.16,
|
|
663
685
|
letterSpacing: px(-0.64)
|
|
664
686
|
},
|
|
665
687
|
xlg: {
|
|
666
|
-
fontSize: rem(scale[
|
|
667
|
-
lineHeight: 1.
|
|
688
|
+
fontSize: rem(scale[14]),
|
|
689
|
+
lineHeight: 1.13
|
|
668
690
|
},
|
|
669
691
|
max: {
|
|
670
|
-
fontSize: rem(scale[
|
|
671
|
-
lineHeight: 1.
|
|
692
|
+
fontSize: rem(scale[15]),
|
|
693
|
+
lineHeight: 1.11,
|
|
672
694
|
letterSpacing: px(-0.96)
|
|
673
695
|
}
|
|
674
696
|
}
|
|
675
697
|
};
|
|
676
698
|
var display04$1 = {
|
|
677
699
|
fontSize: rem(scale[9]),
|
|
678
|
-
fontWeight: fontWeights.
|
|
700
|
+
fontWeight: fontWeights.light,
|
|
679
701
|
lineHeight: 1.19,
|
|
680
702
|
letterSpacing: 0,
|
|
681
703
|
breakpoints: {
|
|
682
704
|
md: {
|
|
683
705
|
fontSize: rem(scale[13]),
|
|
684
|
-
lineHeight: 1.
|
|
706
|
+
lineHeight: 1.14
|
|
685
707
|
},
|
|
686
708
|
lg: {
|
|
687
709
|
fontSize: rem(scale[16]),
|
|
688
|
-
lineHeight: 1.
|
|
710
|
+
lineHeight: 1.1,
|
|
689
711
|
letterSpacing: px(-0.64)
|
|
690
712
|
},
|
|
691
713
|
xlg: {
|
|
692
714
|
fontSize: rem(scale[19]),
|
|
693
|
-
lineHeight: 1.
|
|
694
|
-
letterSpacing: px(-0.64)
|
|
715
|
+
lineHeight: 1.06
|
|
695
716
|
},
|
|
696
717
|
max: {
|
|
697
718
|
fontSize: rem(scale[22]),
|