@carbon/type 10.13.0 → 10.15.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 +57 -59
- package/lib/index.js +57 -59
- package/package.json +4 -4
- package/scss/_inlined/_reset.scss +1 -1
- package/scss/_inlined/_scale.scss +2 -2
- package/scss/_inlined/_styles.scss +58 -59
- package/scss/_inlined/font-face/_mono.scss +72 -72
- package/scss/_inlined/font-face/_sans-condensed.scss +42 -42
- package/scss/_inlined/font-face/_sans.scss +84 -84
- package/scss/_inlined/font-face/_serif.scss +72 -72
- package/scss/_reset.scss +1 -1
- package/scss/_scale.scss +2 -2
- package/scss/_styles.scss +58 -59
- package/scss/font-face/_mono.scss +72 -72
- package/scss/font-face/_sans-condensed.scss +42 -42
- package/scss/font-face/_sans.scss +84 -84
- package/scss/font-face/_serif.scss +72 -72
- package/src/__tests__/__snapshots__/styles-test.js.snap +31 -31
- package/src/__tests__/fluid-test.js +26 -26
- package/src/styles.js +57 -59
- package/umd/index.js +57 -59
package/lib/index.js
CHANGED
|
@@ -250,117 +250,117 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
250
250
|
var caption01 = {
|
|
251
251
|
fontSize: layout.rem(scale[0]),
|
|
252
252
|
fontWeight: fontWeights.regular,
|
|
253
|
-
lineHeight:
|
|
253
|
+
lineHeight: 1.34,
|
|
254
254
|
letterSpacing: layout.px(0.32)
|
|
255
255
|
};
|
|
256
256
|
var label01 = {
|
|
257
257
|
fontSize: layout.rem(scale[0]),
|
|
258
258
|
fontWeight: fontWeights.regular,
|
|
259
|
-
lineHeight:
|
|
259
|
+
lineHeight: 1.34,
|
|
260
260
|
letterSpacing: layout.px(0.32)
|
|
261
261
|
};
|
|
262
262
|
var helperText01 = {
|
|
263
263
|
fontSize: layout.rem(scale[0]),
|
|
264
|
-
lineHeight:
|
|
264
|
+
lineHeight: 1.34,
|
|
265
265
|
letterSpacing: layout.px(0.32)
|
|
266
266
|
};
|
|
267
267
|
var bodyShort01 = {
|
|
268
268
|
fontSize: layout.rem(scale[1]),
|
|
269
269
|
fontWeight: fontWeights.regular,
|
|
270
|
-
lineHeight:
|
|
270
|
+
lineHeight: 1.29,
|
|
271
271
|
letterSpacing: layout.px(0.16)
|
|
272
272
|
};
|
|
273
273
|
var bodyLong01 = {
|
|
274
274
|
fontSize: layout.rem(scale[1]),
|
|
275
275
|
fontWeight: fontWeights.regular,
|
|
276
|
-
lineHeight:
|
|
276
|
+
lineHeight: 1.43,
|
|
277
277
|
letterSpacing: layout.px(0.16)
|
|
278
278
|
};
|
|
279
279
|
var bodyShort02 = {
|
|
280
280
|
fontSize: layout.rem(scale[2]),
|
|
281
281
|
fontWeight: fontWeights.regular,
|
|
282
|
-
lineHeight:
|
|
282
|
+
lineHeight: 1.375,
|
|
283
283
|
letterSpacing: 0
|
|
284
284
|
};
|
|
285
285
|
var bodyLong02 = {
|
|
286
286
|
fontSize: layout.rem(scale[2]),
|
|
287
287
|
fontWeight: fontWeights.regular,
|
|
288
|
-
lineHeight:
|
|
288
|
+
lineHeight: 1.5,
|
|
289
289
|
letterSpacing: 0
|
|
290
290
|
};
|
|
291
291
|
var code01 = {
|
|
292
292
|
fontFamily: fontFamilies.mono,
|
|
293
293
|
fontSize: layout.rem(scale[0]),
|
|
294
294
|
fontWeight: fontWeights.regular,
|
|
295
|
-
lineHeight:
|
|
295
|
+
lineHeight: 1.34,
|
|
296
296
|
letterSpacing: layout.px(0.32)
|
|
297
297
|
};
|
|
298
298
|
var code02 = {
|
|
299
299
|
fontFamily: fontFamilies.mono,
|
|
300
300
|
fontSize: layout.rem(scale[1]),
|
|
301
301
|
fontWeight: fontWeights.regular,
|
|
302
|
-
lineHeight:
|
|
302
|
+
lineHeight: 1.43,
|
|
303
303
|
letterSpacing: layout.px(0.32)
|
|
304
304
|
};
|
|
305
305
|
var heading01 = {
|
|
306
306
|
fontSize: layout.rem(scale[1]),
|
|
307
307
|
fontWeight: fontWeights.semibold,
|
|
308
|
-
lineHeight:
|
|
308
|
+
lineHeight: 1.29,
|
|
309
309
|
letterSpacing: layout.px(0.16)
|
|
310
310
|
};
|
|
311
311
|
var productiveHeading01 = heading01;
|
|
312
312
|
var heading02 = {
|
|
313
313
|
fontSize: layout.rem(scale[2]),
|
|
314
314
|
fontWeight: fontWeights.semibold,
|
|
315
|
-
lineHeight:
|
|
315
|
+
lineHeight: 1.375,
|
|
316
316
|
letterSpacing: 0
|
|
317
317
|
};
|
|
318
318
|
var productiveHeading02 = heading02;
|
|
319
319
|
var productiveHeading03 = {
|
|
320
320
|
fontSize: layout.rem(scale[4]),
|
|
321
321
|
fontWeight: fontWeights.regular,
|
|
322
|
-
lineHeight:
|
|
322
|
+
lineHeight: 1.4,
|
|
323
323
|
letterSpacing: 0
|
|
324
324
|
};
|
|
325
325
|
var productiveHeading04 = {
|
|
326
326
|
fontSize: layout.rem(scale[6]),
|
|
327
327
|
fontWeight: fontWeights.regular,
|
|
328
|
-
lineHeight:
|
|
328
|
+
lineHeight: 1.29,
|
|
329
329
|
letterSpacing: 0
|
|
330
330
|
};
|
|
331
331
|
var productiveHeading05 = {
|
|
332
332
|
fontSize: layout.rem(scale[7]),
|
|
333
333
|
fontWeight: fontWeights.regular,
|
|
334
|
-
lineHeight:
|
|
334
|
+
lineHeight: 1.25,
|
|
335
335
|
letterSpacing: 0
|
|
336
336
|
};
|
|
337
337
|
var productiveHeading06 = {
|
|
338
338
|
fontSize: layout.rem(scale[9]),
|
|
339
339
|
fontWeight: fontWeights.light,
|
|
340
|
-
lineHeight:
|
|
340
|
+
lineHeight: 1.199,
|
|
341
341
|
letterSpacing: 0
|
|
342
342
|
};
|
|
343
343
|
var productiveHeading07 = {
|
|
344
344
|
fontSize: layout.rem(scale[11]),
|
|
345
345
|
fontWeight: fontWeights.light,
|
|
346
|
-
lineHeight:
|
|
346
|
+
lineHeight: 1.19,
|
|
347
347
|
letterSpacing: 0
|
|
348
348
|
};
|
|
349
349
|
var expressiveHeading01 = _objectSpread2(_objectSpread2({}, heading01), {}, {
|
|
350
|
-
lineHeight:
|
|
350
|
+
lineHeight: 1.25
|
|
351
351
|
});
|
|
352
352
|
var expressiveHeading02 = _objectSpread2(_objectSpread2({}, heading02), {}, {
|
|
353
|
-
lineHeight:
|
|
353
|
+
lineHeight: 1.5
|
|
354
354
|
});
|
|
355
355
|
var expressiveHeading03 = {
|
|
356
356
|
fontSize: layout.rem(scale[4]),
|
|
357
357
|
fontWeight: fontWeights.regular,
|
|
358
|
-
lineHeight:
|
|
358
|
+
lineHeight: 1.4,
|
|
359
359
|
letterSpacing: 0,
|
|
360
360
|
breakpoints: {
|
|
361
361
|
xlg: {
|
|
362
362
|
fontSize: layout.rem(scale[4]),
|
|
363
|
-
lineHeight:
|
|
363
|
+
lineHeight: 1.25
|
|
364
364
|
},
|
|
365
365
|
max: {
|
|
366
366
|
fontSize: layout.rem(scale[5])
|
|
@@ -370,12 +370,12 @@ var expressiveHeading03 = {
|
|
|
370
370
|
var expressiveHeading04 = {
|
|
371
371
|
fontSize: layout.rem(scale[6]),
|
|
372
372
|
fontWeight: fontWeights.regular,
|
|
373
|
-
lineHeight:
|
|
373
|
+
lineHeight: 1.29,
|
|
374
374
|
letterSpacing: 0,
|
|
375
375
|
breakpoints: {
|
|
376
376
|
xlg: {
|
|
377
377
|
fontSize: layout.rem(scale[6]),
|
|
378
|
-
lineHeight:
|
|
378
|
+
lineHeight: 1.25
|
|
379
379
|
},
|
|
380
380
|
max: {
|
|
381
381
|
fontSize: layout.rem(scale[7])
|
|
@@ -385,31 +385,30 @@ var expressiveHeading04 = {
|
|
|
385
385
|
var expressiveHeading05 = {
|
|
386
386
|
fontSize: layout.rem(scale[7]),
|
|
387
387
|
fontWeight: fontWeights.regular,
|
|
388
|
-
lineHeight:
|
|
388
|
+
lineHeight: 1.25,
|
|
389
389
|
letterSpacing: 0,
|
|
390
390
|
breakpoints: {
|
|
391
391
|
md: {
|
|
392
392
|
fontSize: layout.rem(scale[8]),
|
|
393
393
|
fontWeight: fontWeights.light,
|
|
394
|
-
lineHeight:
|
|
394
|
+
lineHeight: 1.22,
|
|
395
395
|
letterSpacing: 0
|
|
396
396
|
},
|
|
397
397
|
lg: {
|
|
398
398
|
fontSize: layout.rem(scale[9]),
|
|
399
399
|
fontWeight: fontWeights.light,
|
|
400
|
-
lineHeight:
|
|
400
|
+
lineHeight: 1.19,
|
|
401
401
|
letterSpacing: 0
|
|
402
402
|
},
|
|
403
403
|
xlg: {
|
|
404
404
|
fontSize: layout.rem(scale[10]),
|
|
405
405
|
fontWeight: fontWeights.light,
|
|
406
|
-
lineHeight:
|
|
406
|
+
lineHeight: 1.17,
|
|
407
407
|
letterSpacing: 0
|
|
408
408
|
},
|
|
409
409
|
max: {
|
|
410
410
|
fontSize: layout.rem(scale[12]),
|
|
411
411
|
fontWeight: fontWeights.light,
|
|
412
|
-
lineHeight: layout.rem(70),
|
|
413
412
|
letterSpacing: 0
|
|
414
413
|
}
|
|
415
414
|
}
|
|
@@ -417,31 +416,30 @@ var expressiveHeading05 = {
|
|
|
417
416
|
var expressiveHeading06 = {
|
|
418
417
|
fontSize: layout.rem(scale[7]),
|
|
419
418
|
fontWeight: fontWeights.semibold,
|
|
420
|
-
lineHeight:
|
|
419
|
+
lineHeight: 1.25,
|
|
421
420
|
letterSpacing: 0,
|
|
422
421
|
breakpoints: {
|
|
423
422
|
md: {
|
|
424
423
|
fontSize: layout.rem(scale[8]),
|
|
425
424
|
fontWeight: fontWeights.semibold,
|
|
426
|
-
lineHeight:
|
|
425
|
+
lineHeight: 1.22,
|
|
427
426
|
letterSpacing: 0
|
|
428
427
|
},
|
|
429
428
|
lg: {
|
|
430
429
|
fontSize: layout.rem(scale[9]),
|
|
431
430
|
fontWeight: fontWeights.semibold,
|
|
432
|
-
lineHeight:
|
|
431
|
+
lineHeight: 1.19,
|
|
433
432
|
letterSpacing: 0
|
|
434
433
|
},
|
|
435
434
|
xlg: {
|
|
436
435
|
fontSize: layout.rem(scale[10]),
|
|
437
436
|
fontWeight: fontWeights.semibold,
|
|
438
|
-
lineHeight:
|
|
437
|
+
lineHeight: 1.17,
|
|
439
438
|
letterSpacing: 0
|
|
440
439
|
},
|
|
441
440
|
max: {
|
|
442
441
|
fontSize: layout.rem(scale[12]),
|
|
443
442
|
fontWeight: fontWeights.semibold,
|
|
444
|
-
lineHeight: layout.rem(70),
|
|
445
443
|
letterSpacing: 0
|
|
446
444
|
}
|
|
447
445
|
}
|
|
@@ -449,21 +447,21 @@ var expressiveHeading06 = {
|
|
|
449
447
|
var expressiveParagraph01 = {
|
|
450
448
|
fontSize: layout.rem(scale[5]),
|
|
451
449
|
fontWeight: fontWeights.light,
|
|
452
|
-
lineHeight:
|
|
450
|
+
lineHeight: 1.25,
|
|
453
451
|
letterSpacing: 0,
|
|
454
452
|
lg: {
|
|
455
453
|
fontSize: layout.rem(scale[6]),
|
|
456
|
-
lineHeight:
|
|
454
|
+
lineHeight: 1.29
|
|
457
455
|
},
|
|
458
456
|
max: {
|
|
459
457
|
fontSize: layout.rem(scale[7]),
|
|
460
|
-
lineHeight:
|
|
458
|
+
lineHeight: 1.25
|
|
461
459
|
}
|
|
462
460
|
};
|
|
463
461
|
var quotation01 = {
|
|
464
462
|
fontSize: layout.rem(scale[4]),
|
|
465
463
|
fontWeight: fontWeights.regular,
|
|
466
|
-
lineHeight:
|
|
464
|
+
lineHeight: 1.3,
|
|
467
465
|
letterSpacing: 0,
|
|
468
466
|
breakpoints: {
|
|
469
467
|
md: {
|
|
@@ -474,19 +472,19 @@ var quotation01 = {
|
|
|
474
472
|
lg: {
|
|
475
473
|
fontSize: layout.rem(scale[5]),
|
|
476
474
|
fontWeight: fontWeights.regular,
|
|
477
|
-
lineHeight:
|
|
475
|
+
lineHeight: 1.25,
|
|
478
476
|
letterSpacing: 0
|
|
479
477
|
},
|
|
480
478
|
xlg: {
|
|
481
479
|
fontSize: layout.rem(scale[6]),
|
|
482
480
|
fontWeight: fontWeights.regular,
|
|
483
|
-
lineHeight:
|
|
481
|
+
lineHeight: 1.29,
|
|
484
482
|
letterSpacing: 0
|
|
485
483
|
},
|
|
486
484
|
max: {
|
|
487
485
|
fontSize: layout.rem(scale[7]),
|
|
488
486
|
fontWeight: fontWeights.regular,
|
|
489
|
-
lineHeight:
|
|
487
|
+
lineHeight: 1.25,
|
|
490
488
|
letterSpacing: 0
|
|
491
489
|
}
|
|
492
490
|
}
|
|
@@ -494,20 +492,20 @@ var quotation01 = {
|
|
|
494
492
|
var quotation02 = {
|
|
495
493
|
fontSize: layout.rem(scale[7]),
|
|
496
494
|
fontWeight: fontWeights.light,
|
|
497
|
-
lineHeight:
|
|
495
|
+
lineHeight: 1.25,
|
|
498
496
|
letterSpacing: 0,
|
|
499
497
|
breakpoints: {
|
|
500
498
|
md: {
|
|
501
499
|
fontSize: layout.rem(scale[8]),
|
|
502
|
-
lineHeight:
|
|
500
|
+
lineHeight: 1.22
|
|
503
501
|
},
|
|
504
502
|
lg: {
|
|
505
503
|
fontSize: layout.rem(scale[9]),
|
|
506
|
-
lineHeight:
|
|
504
|
+
lineHeight: 1.19
|
|
507
505
|
},
|
|
508
506
|
xlg: {
|
|
509
507
|
fontSize: layout.rem(scale[10]),
|
|
510
|
-
lineHeight:
|
|
508
|
+
lineHeight: 1.17
|
|
511
509
|
},
|
|
512
510
|
max: {
|
|
513
511
|
fontSize: layout.rem(scale[12])
|
|
@@ -517,7 +515,7 @@ var quotation02 = {
|
|
|
517
515
|
var display01 = {
|
|
518
516
|
fontSize: layout.rem(scale[9]),
|
|
519
517
|
fontWeight: fontWeights.light,
|
|
520
|
-
lineHeight:
|
|
518
|
+
lineHeight: 1.19,
|
|
521
519
|
letterSpacing: 0,
|
|
522
520
|
breakpoints: {
|
|
523
521
|
md: {
|
|
@@ -528,18 +526,18 @@ var display01 = {
|
|
|
528
526
|
},
|
|
529
527
|
xlg: {
|
|
530
528
|
fontSize: layout.rem(scale[12]),
|
|
531
|
-
lineHeight:
|
|
529
|
+
lineHeight: 1.17
|
|
532
530
|
},
|
|
533
531
|
max: {
|
|
534
532
|
fontSize: layout.rem(scale[14]),
|
|
535
|
-
lineHeight:
|
|
533
|
+
lineHeight: 1.13
|
|
536
534
|
}
|
|
537
535
|
}
|
|
538
536
|
};
|
|
539
537
|
var display02 = {
|
|
540
538
|
fontSize: layout.rem(scale[9]),
|
|
541
539
|
fontWeight: fontWeights.semibold,
|
|
542
|
-
lineHeight:
|
|
540
|
+
lineHeight: 1.19,
|
|
543
541
|
letterSpacing: 0,
|
|
544
542
|
breakpoints: {
|
|
545
543
|
md: {
|
|
@@ -550,36 +548,36 @@ var display02 = {
|
|
|
550
548
|
},
|
|
551
549
|
xlg: {
|
|
552
550
|
fontSize: layout.rem(scale[12]),
|
|
553
|
-
lineHeight:
|
|
551
|
+
lineHeight: 1.16
|
|
554
552
|
},
|
|
555
553
|
max: {
|
|
556
554
|
fontSize: layout.rem(scale[14]),
|
|
557
|
-
lineHeight:
|
|
555
|
+
lineHeight: 1.13
|
|
558
556
|
}
|
|
559
557
|
}
|
|
560
558
|
};
|
|
561
559
|
var display03 = {
|
|
562
560
|
fontSize: layout.rem(scale[9]),
|
|
563
561
|
fontWeight: fontWeights.light,
|
|
564
|
-
lineHeight:
|
|
562
|
+
lineHeight: 1.19,
|
|
565
563
|
letterSpacing: 0,
|
|
566
564
|
breakpoints: {
|
|
567
565
|
md: {
|
|
568
566
|
fontSize: layout.rem(scale[13]),
|
|
569
|
-
lineHeight:
|
|
567
|
+
lineHeight: 1.15
|
|
570
568
|
},
|
|
571
569
|
lg: {
|
|
572
570
|
fontSize: layout.rem(scale[16]),
|
|
573
|
-
lineHeight:
|
|
571
|
+
lineHeight: 1.11,
|
|
574
572
|
letterSpacing: layout.px(-0.64)
|
|
575
573
|
},
|
|
576
574
|
xlg: {
|
|
577
575
|
fontSize: layout.rem(scale[19]),
|
|
578
|
-
lineHeight:
|
|
576
|
+
lineHeight: 1.07
|
|
579
577
|
},
|
|
580
578
|
max: {
|
|
581
579
|
fontSize: layout.rem(scale[22]),
|
|
582
|
-
lineHeight:
|
|
580
|
+
lineHeight: 1.05,
|
|
583
581
|
letterSpacing: layout.px(-0.96)
|
|
584
582
|
}
|
|
585
583
|
}
|
|
@@ -587,26 +585,26 @@ var display03 = {
|
|
|
587
585
|
var display04 = {
|
|
588
586
|
fontSize: layout.rem(scale[9]),
|
|
589
587
|
fontWeight: fontWeights.semibold,
|
|
590
|
-
lineHeight:
|
|
588
|
+
lineHeight: 1.19,
|
|
591
589
|
letterSpacing: 0,
|
|
592
590
|
breakpoints: {
|
|
593
591
|
md: {
|
|
594
592
|
fontSize: layout.rem(scale[13]),
|
|
595
|
-
lineHeight:
|
|
593
|
+
lineHeight: 1.15
|
|
596
594
|
},
|
|
597
595
|
lg: {
|
|
598
596
|
fontSize: layout.rem(scale[16]),
|
|
599
|
-
lineHeight:
|
|
597
|
+
lineHeight: 1.11,
|
|
600
598
|
letterSpacing: layout.px(-0.64)
|
|
601
599
|
},
|
|
602
600
|
xlg: {
|
|
603
601
|
fontSize: layout.rem(scale[19]),
|
|
604
|
-
lineHeight:
|
|
602
|
+
lineHeight: 1.07,
|
|
605
603
|
letterSpacing: layout.px(-0.64)
|
|
606
604
|
},
|
|
607
605
|
max: {
|
|
608
606
|
fontSize: layout.rem(scale[22]),
|
|
609
|
-
lineHeight:
|
|
607
|
+
lineHeight: 1.05,
|
|
610
608
|
letterSpacing: layout.px(-0.96)
|
|
611
609
|
}
|
|
612
610
|
}
|
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.15.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@carbon/import-once": "^10.3.0",
|
|
36
|
-
"@carbon/layout": "^10.
|
|
36
|
+
"@carbon/layout": "^10.13.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@carbon/bundler": "^10.9.0",
|
|
40
|
-
"@carbon/test-utils": "^10.
|
|
40
|
+
"@carbon/test-utils": "^10.11.0",
|
|
41
41
|
"change-case": "^4.1.1",
|
|
42
42
|
"rimraf": "^3.0.0"
|
|
43
43
|
},
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"sassDir": "scss",
|
|
48
48
|
"needs": "^1.3.0"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "1ddaf4a45fd03d39ca695505d0c764b5879c924b"
|
|
51
51
|
}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
/// @group @carbon/type
|
|
17
17
|
@mixin carbon--type-reset(
|
|
18
18
|
// TODO: remove in next major release. This has been replaced with 100%
|
|
19
|
-
|
|
19
|
+
$base-font-size: $carbon--base-font-size,
|
|
20
20
|
$body-font-family: carbon--font-family('sans'),
|
|
21
21
|
$mono-font-family: carbon--font-family('mono')
|
|
22
22
|
) {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
@return carbon--get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
/// Type
|
|
23
|
+
/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
|
|
24
24
|
/// @type Map
|
|
25
25
|
/// @access public
|
|
26
26
|
/// @group @carbon/type
|
|
@@ -32,7 +32,7 @@ $carbon--type-scale: ();
|
|
|
32
32
|
);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
/// Get the value of a specific step in the
|
|
35
|
+
/// Get the value of a specific step in the type scale
|
|
36
36
|
/// @param {Number} $step
|
|
37
37
|
/// @return {Number} In rem
|
|
38
38
|
/// @access public
|