@carbon/type 10.34.0 → 10.37.0-rc.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 +128 -25
- package/lib/index.js +151 -24
- package/package.json +5 -5
- package/scss/_inlined/_scale.scss +1 -1
- package/scss/_inlined/_styles.import.scss +761 -0
- package/scss/_inlined/_styles.scss +214 -36
- package/scss/_scale.scss +1 -1
- package/scss/_styles.import.scss +761 -0
- package/scss/_styles.scss +214 -36
- package/scss/modules/_scale.scss +1 -1
- package/scss/modules/_styles.scss +187 -26
- package/scss/vendor/@carbon/layout/_convert.import.scss +56 -0
- package/scss/vendor/@carbon/layout/_convert.scss +14 -0
- package/scss/vendor/@carbon/layout/_key-height.import.scss +112 -0
- package/scss/vendor/@carbon/layout/_key-height.scss +14 -0
- package/scss/vendor/@carbon/layout/modules/_convert.scss +4 -2
- package/src/__tests__/__snapshots__/styles-test.js.snap +190 -18
- package/src/__tests__/exports-test.js +72 -48
- package/src/styles.js +81 -21
- package/src/tokens.js +50 -0
- package/umd/index.js +151 -24
package/es/index.js
CHANGED
|
@@ -250,47 +250,47 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
250
250
|
var caption01$1 = {
|
|
251
251
|
fontSize: rem(scale[0]),
|
|
252
252
|
fontWeight: fontWeights.regular,
|
|
253
|
-
lineHeight: 1.
|
|
253
|
+
lineHeight: 1.33333,
|
|
254
254
|
letterSpacing: px(0.32)
|
|
255
255
|
};
|
|
256
256
|
var caption02$1 = {
|
|
257
257
|
fontSize: rem(scale[1]),
|
|
258
258
|
fontWeight: fontWeights.regular,
|
|
259
|
-
lineHeight: 1.
|
|
259
|
+
lineHeight: 1.28572,
|
|
260
260
|
letterSpacing: px(0.32)
|
|
261
261
|
};
|
|
262
262
|
var label01$1 = {
|
|
263
263
|
fontSize: rem(scale[0]),
|
|
264
264
|
fontWeight: fontWeights.regular,
|
|
265
|
-
lineHeight: 1.
|
|
265
|
+
lineHeight: 1.33333,
|
|
266
266
|
letterSpacing: px(0.32)
|
|
267
267
|
};
|
|
268
268
|
var label02$1 = {
|
|
269
269
|
fontSize: rem(scale[1]),
|
|
270
270
|
fontWeight: fontWeights.regular,
|
|
271
|
-
lineHeight: 1.
|
|
272
|
-
letterSpacing: px(0.
|
|
271
|
+
lineHeight: 1.28572,
|
|
272
|
+
letterSpacing: px(0.16)
|
|
273
273
|
};
|
|
274
274
|
var helperText01$1 = {
|
|
275
275
|
fontSize: rem(scale[0]),
|
|
276
|
-
lineHeight: 1.
|
|
276
|
+
lineHeight: 1.33333,
|
|
277
277
|
letterSpacing: px(0.32)
|
|
278
278
|
};
|
|
279
279
|
var helperText02$1 = {
|
|
280
280
|
fontSize: rem(scale[1]),
|
|
281
|
-
lineHeight: 1.
|
|
282
|
-
letterSpacing: px(0.
|
|
281
|
+
lineHeight: 1.28572,
|
|
282
|
+
letterSpacing: px(0.16)
|
|
283
283
|
};
|
|
284
284
|
var bodyShort01$1 = {
|
|
285
285
|
fontSize: rem(scale[1]),
|
|
286
286
|
fontWeight: fontWeights.regular,
|
|
287
|
-
lineHeight: 1.
|
|
287
|
+
lineHeight: 1.28572,
|
|
288
288
|
letterSpacing: px(0.16)
|
|
289
289
|
};
|
|
290
290
|
var bodyLong01$1 = {
|
|
291
291
|
fontSize: rem(scale[1]),
|
|
292
292
|
fontWeight: fontWeights.regular,
|
|
293
|
-
lineHeight: 1.
|
|
293
|
+
lineHeight: 1.42857,
|
|
294
294
|
letterSpacing: px(0.16)
|
|
295
295
|
};
|
|
296
296
|
var bodyShort02$1 = {
|
|
@@ -309,30 +309,40 @@ var code01$1 = {
|
|
|
309
309
|
fontFamily: fontFamilies.mono,
|
|
310
310
|
fontSize: rem(scale[0]),
|
|
311
311
|
fontWeight: fontWeights.regular,
|
|
312
|
-
lineHeight: 1.
|
|
312
|
+
lineHeight: 1.33333,
|
|
313
313
|
letterSpacing: px(0.32)
|
|
314
314
|
};
|
|
315
315
|
var code02$1 = {
|
|
316
316
|
fontFamily: fontFamilies.mono,
|
|
317
317
|
fontSize: rem(scale[1]),
|
|
318
318
|
fontWeight: fontWeights.regular,
|
|
319
|
-
lineHeight: 1.
|
|
319
|
+
lineHeight: 1.42857,
|
|
320
320
|
letterSpacing: px(0.32)
|
|
321
321
|
};
|
|
322
322
|
var heading01$1 = {
|
|
323
323
|
fontSize: rem(scale[1]),
|
|
324
324
|
fontWeight: fontWeights.semibold,
|
|
325
|
-
lineHeight: 1.
|
|
325
|
+
lineHeight: 1.42857,
|
|
326
|
+
letterSpacing: px(0.16)
|
|
327
|
+
};
|
|
328
|
+
var productiveHeading01$1 = {
|
|
329
|
+
fontSize: rem(scale[1]),
|
|
330
|
+
fontWeight: fontWeights.semibold,
|
|
331
|
+
lineHeight: 1.28572,
|
|
326
332
|
letterSpacing: px(0.16)
|
|
327
333
|
};
|
|
328
|
-
var productiveHeading01$1 = heading01$1;
|
|
329
334
|
var heading02$1 = {
|
|
335
|
+
fontSize: rem(scale[2]),
|
|
336
|
+
fontWeight: fontWeights.semibold,
|
|
337
|
+
lineHeight: 1.5,
|
|
338
|
+
letterSpacing: 0
|
|
339
|
+
};
|
|
340
|
+
var productiveHeading02$1 = {
|
|
330
341
|
fontSize: rem(scale[2]),
|
|
331
342
|
fontWeight: fontWeights.semibold,
|
|
332
343
|
lineHeight: 1.375,
|
|
333
344
|
letterSpacing: 0
|
|
334
345
|
};
|
|
335
|
-
var productiveHeading02$1 = heading02$1;
|
|
336
346
|
var productiveHeading03$1 = {
|
|
337
347
|
fontSize: rem(scale[4]),
|
|
338
348
|
fontWeight: fontWeights.regular,
|
|
@@ -342,7 +352,7 @@ var productiveHeading03$1 = {
|
|
|
342
352
|
var productiveHeading04$1 = {
|
|
343
353
|
fontSize: rem(scale[6]),
|
|
344
354
|
fontWeight: fontWeights.regular,
|
|
345
|
-
lineHeight: 1.
|
|
355
|
+
lineHeight: 1.28572,
|
|
346
356
|
letterSpacing: 0
|
|
347
357
|
};
|
|
348
358
|
var productiveHeading05$1 = {
|
|
@@ -360,7 +370,7 @@ var productiveHeading06$1 = {
|
|
|
360
370
|
var productiveHeading07$1 = {
|
|
361
371
|
fontSize: rem(scale[11]),
|
|
362
372
|
fontWeight: fontWeights.light,
|
|
363
|
-
lineHeight: 1.
|
|
373
|
+
lineHeight: 1.199,
|
|
364
374
|
letterSpacing: 0
|
|
365
375
|
};
|
|
366
376
|
var expressiveHeading01$1 = _objectSpread2(_objectSpread2({}, heading01$1), {}, {
|
|
@@ -388,7 +398,7 @@ var expressiveHeading03$1 = {
|
|
|
388
398
|
var expressiveHeading04$1 = {
|
|
389
399
|
fontSize: rem(scale[6]),
|
|
390
400
|
fontWeight: fontWeights.regular,
|
|
391
|
-
lineHeight: 1.
|
|
401
|
+
lineHeight: 1.28572,
|
|
392
402
|
letterSpacing: 0,
|
|
393
403
|
breakpoints: {
|
|
394
404
|
xlg: {
|
|
@@ -470,7 +480,7 @@ var expressiveParagraph01$1 = {
|
|
|
470
480
|
breakpoints: {
|
|
471
481
|
lg: {
|
|
472
482
|
fontSize: rem(scale[6]),
|
|
473
|
-
lineHeight: 1.
|
|
483
|
+
lineHeight: 1.28572
|
|
474
484
|
},
|
|
475
485
|
max: {
|
|
476
486
|
fontSize: rem(scale[7]),
|
|
@@ -479,6 +489,7 @@ var expressiveParagraph01$1 = {
|
|
|
479
489
|
}
|
|
480
490
|
};
|
|
481
491
|
var quotation01$1 = {
|
|
492
|
+
fontFamily: fontFamilies.serif,
|
|
482
493
|
fontSize: rem(scale[4]),
|
|
483
494
|
fontWeight: fontWeights.regular,
|
|
484
495
|
lineHeight: 1.3,
|
|
@@ -498,7 +509,7 @@ var quotation01$1 = {
|
|
|
498
509
|
xlg: {
|
|
499
510
|
fontSize: rem(scale[6]),
|
|
500
511
|
fontWeight: fontWeights.regular,
|
|
501
|
-
lineHeight: 1.
|
|
512
|
+
lineHeight: 1.28572,
|
|
502
513
|
letterSpacing: 0
|
|
503
514
|
},
|
|
504
515
|
max: {
|
|
@@ -510,6 +521,7 @@ var quotation01$1 = {
|
|
|
510
521
|
}
|
|
511
522
|
};
|
|
512
523
|
var quotation02$1 = {
|
|
524
|
+
fontFamily: fontFamilies.serif,
|
|
513
525
|
fontSize: rem(scale[7]),
|
|
514
526
|
fontWeight: fontWeights.light,
|
|
515
527
|
lineHeight: 1.25,
|
|
@@ -628,7 +640,48 @@ var display04$1 = {
|
|
|
628
640
|
letterSpacing: px(-0.96)
|
|
629
641
|
}
|
|
630
642
|
}
|
|
643
|
+
}; // Type changes - V11
|
|
644
|
+
// Small styles
|
|
645
|
+
// No changes for code-01, code-02, label-01, label-02
|
|
646
|
+
|
|
647
|
+
var legal01$1 = {
|
|
648
|
+
fontSize: rem(scale[0]),
|
|
649
|
+
fontWeight: fontWeights.regular,
|
|
650
|
+
lineHeight: 1.33333,
|
|
651
|
+
letterSpacing: px(0.32)
|
|
631
652
|
};
|
|
653
|
+
var legal02$1 = {
|
|
654
|
+
fontSize: rem(scale[1]),
|
|
655
|
+
fontWeight: fontWeights.regular,
|
|
656
|
+
lineHeight: 1.28572,
|
|
657
|
+
letterSpacing: px(0.16)
|
|
658
|
+
}; // Body styles
|
|
659
|
+
|
|
660
|
+
var bodyCompact01$1 = bodyShort01$1;
|
|
661
|
+
var bodyCompact02$1 = bodyShort02$1;
|
|
662
|
+
var body01$1 = bodyLong01$1;
|
|
663
|
+
var body02$1 = bodyLong02$1; // Fixed heading styles
|
|
664
|
+
|
|
665
|
+
var headingCompact01$1 = productiveHeading01$1;
|
|
666
|
+
var headingCompact02$1 = productiveHeading02$1;
|
|
667
|
+
var heading03$1 = productiveHeading03$1;
|
|
668
|
+
var heading04$1 = productiveHeading04$1;
|
|
669
|
+
var heading05$1 = productiveHeading05$1;
|
|
670
|
+
var heading06$1 = productiveHeading06$1;
|
|
671
|
+
var heading07$1 = productiveHeading07$1; // Fluid heading styles
|
|
672
|
+
|
|
673
|
+
var fluidHeading03$1 = expressiveHeading03$1;
|
|
674
|
+
var fluidHeading04$1 = expressiveHeading04$1;
|
|
675
|
+
var fluidHeading05$1 = expressiveHeading05$1;
|
|
676
|
+
var fluidHeading06$1 = expressiveHeading06$1; // Additional fluid styles
|
|
677
|
+
|
|
678
|
+
var fluidParagraph01$1 = expressiveParagraph01$1;
|
|
679
|
+
var fluidQuotation01$1 = quotation01$1;
|
|
680
|
+
var fluidQuotation02$1 = quotation02$1;
|
|
681
|
+
var fluidDisplay01$1 = display01$1;
|
|
682
|
+
var fluidDisplay02$1 = display02$1;
|
|
683
|
+
var fluidDisplay03$1 = display03$1;
|
|
684
|
+
var fluidDisplay04$1 = display04$1;
|
|
632
685
|
|
|
633
686
|
var styles = /*#__PURE__*/Object.freeze({
|
|
634
687
|
__proto__: null,
|
|
@@ -665,7 +718,31 @@ var styles = /*#__PURE__*/Object.freeze({
|
|
|
665
718
|
display01: display01$1,
|
|
666
719
|
display02: display02$1,
|
|
667
720
|
display03: display03$1,
|
|
668
|
-
display04: display04$1
|
|
721
|
+
display04: display04$1,
|
|
722
|
+
legal01: legal01$1,
|
|
723
|
+
legal02: legal02$1,
|
|
724
|
+
bodyCompact01: bodyCompact01$1,
|
|
725
|
+
bodyCompact02: bodyCompact02$1,
|
|
726
|
+
body01: body01$1,
|
|
727
|
+
body02: body02$1,
|
|
728
|
+
headingCompact01: headingCompact01$1,
|
|
729
|
+
headingCompact02: headingCompact02$1,
|
|
730
|
+
heading03: heading03$1,
|
|
731
|
+
heading04: heading04$1,
|
|
732
|
+
heading05: heading05$1,
|
|
733
|
+
heading06: heading06$1,
|
|
734
|
+
heading07: heading07$1,
|
|
735
|
+
fluidHeading03: fluidHeading03$1,
|
|
736
|
+
fluidHeading04: fluidHeading04$1,
|
|
737
|
+
fluidHeading05: fluidHeading05$1,
|
|
738
|
+
fluidHeading06: fluidHeading06$1,
|
|
739
|
+
fluidParagraph01: fluidParagraph01$1,
|
|
740
|
+
fluidQuotation01: fluidQuotation01$1,
|
|
741
|
+
fluidQuotation02: fluidQuotation02$1,
|
|
742
|
+
fluidDisplay01: fluidDisplay01$1,
|
|
743
|
+
fluidDisplay02: fluidDisplay02$1,
|
|
744
|
+
fluidDisplay03: fluidDisplay03$1,
|
|
745
|
+
fluidDisplay04: fluidDisplay04$1
|
|
669
746
|
});
|
|
670
747
|
|
|
671
748
|
var _excluded = ["breakpoints"];
|
|
@@ -776,7 +853,33 @@ var quotation02 = 'quotation02';
|
|
|
776
853
|
var display01 = 'display01';
|
|
777
854
|
var display02 = 'display02';
|
|
778
855
|
var display03 = 'display03';
|
|
779
|
-
var display04 = 'display04';
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
856
|
+
var display04 = 'display04'; // V11 Tokens
|
|
857
|
+
|
|
858
|
+
var legal01 = 'legal01';
|
|
859
|
+
var legal02 = 'legal02';
|
|
860
|
+
var bodyCompact01 = 'bodyCompact01';
|
|
861
|
+
var bodyCompact02 = 'bodyCompact02';
|
|
862
|
+
var body01 = 'body01';
|
|
863
|
+
var body02 = 'body02';
|
|
864
|
+
var headingCompact01 = 'headingCompact01';
|
|
865
|
+
var headingCompact02 = 'headingCompact02';
|
|
866
|
+
var heading03 = 'heading03';
|
|
867
|
+
var heading04 = 'heading04';
|
|
868
|
+
var heading05 = 'heading05';
|
|
869
|
+
var heading06 = 'heading06';
|
|
870
|
+
var heading07 = 'heading07';
|
|
871
|
+
var fluidHeading03 = 'fluidHeading03';
|
|
872
|
+
var fluidHeading04 = 'fluidHeading04';
|
|
873
|
+
var fluidHeading05 = 'fluidHeading05';
|
|
874
|
+
var fluidHeading06 = 'fluidHeading06';
|
|
875
|
+
var fluidParagraph01 = 'fluidParagraph01';
|
|
876
|
+
var fluidQuotation01 = 'fluidQuotation01';
|
|
877
|
+
var fluidQuotation02 = 'fluidQuotation02';
|
|
878
|
+
var fluidDisplay01 = 'fluidDisplay01';
|
|
879
|
+
var fluidDisplay02 = 'fluidDisplay02';
|
|
880
|
+
var fluidDisplay03 = 'fluidDisplay03';
|
|
881
|
+
var fluidDisplay04 = 'fluidDisplay04';
|
|
882
|
+
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, // V11 Tokens
|
|
883
|
+
legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04];
|
|
884
|
+
|
|
885
|
+
export { body01$1 as body01, body02$1 as body02, bodyCompact01$1 as bodyCompact01, bodyCompact02$1 as bodyCompact02, bodyLong01$1 as bodyLong01, bodyLong02$1 as bodyLong02, bodyShort01$1 as bodyShort01, bodyShort02$1 as bodyShort02, caption01$1 as caption01, caption02$1 as caption02, code01$1 as code01, code02$1 as code02, display01$1 as display01, display02$1 as display02, display03$1 as display03, display04$1 as display04, expressiveHeading01$1 as expressiveHeading01, expressiveHeading02$1 as expressiveHeading02, expressiveHeading03$1 as expressiveHeading03, expressiveHeading04$1 as expressiveHeading04, expressiveHeading05$1 as expressiveHeading05, expressiveHeading06$1 as expressiveHeading06, expressiveParagraph01$1 as expressiveParagraph01, fluid, fluidDisplay01$1 as fluidDisplay01, fluidDisplay02$1 as fluidDisplay02, fluidDisplay03$1 as fluidDisplay03, fluidDisplay04$1 as fluidDisplay04, fluidHeading03$1 as fluidHeading03, fluidHeading04$1 as fluidHeading04, fluidHeading05$1 as fluidHeading05, fluidHeading06$1 as fluidHeading06, fluidParagraph01$1 as fluidParagraph01, fluidQuotation01$1 as fluidQuotation01, fluidQuotation02$1 as fluidQuotation02, fontFamilies, fontFamily, fontWeight, fontWeights, getTypeSize, heading01$1 as heading01, heading02$1 as heading02, heading03$1 as heading03, heading04$1 as heading04, heading05$1 as heading05, heading06$1 as heading06, heading07$1 as heading07, headingCompact01$1 as headingCompact01, headingCompact02$1 as headingCompact02, helperText01$1 as helperText01, helperText02$1 as helperText02, label01$1 as label01, label02$1 as label02, legal01$1 as legal01, legal02$1 as legal02, print, productiveHeading01$1 as productiveHeading01, productiveHeading02$1 as productiveHeading02, productiveHeading03$1 as productiveHeading03, productiveHeading04$1 as productiveHeading04, productiveHeading05$1 as productiveHeading05, productiveHeading06$1 as productiveHeading06, productiveHeading07$1 as productiveHeading07, quotation01$1 as quotation01, quotation02$1 as quotation02, reset, scale, styles, unstable_tokens };
|
package/lib/index.js
CHANGED
|
@@ -254,47 +254,47 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
254
254
|
var caption01$1 = {
|
|
255
255
|
fontSize: layout.rem(scale[0]),
|
|
256
256
|
fontWeight: fontWeights.regular,
|
|
257
|
-
lineHeight: 1.
|
|
257
|
+
lineHeight: 1.33333,
|
|
258
258
|
letterSpacing: layout.px(0.32)
|
|
259
259
|
};
|
|
260
260
|
var caption02$1 = {
|
|
261
261
|
fontSize: layout.rem(scale[1]),
|
|
262
262
|
fontWeight: fontWeights.regular,
|
|
263
|
-
lineHeight: 1.
|
|
263
|
+
lineHeight: 1.28572,
|
|
264
264
|
letterSpacing: layout.px(0.32)
|
|
265
265
|
};
|
|
266
266
|
var label01$1 = {
|
|
267
267
|
fontSize: layout.rem(scale[0]),
|
|
268
268
|
fontWeight: fontWeights.regular,
|
|
269
|
-
lineHeight: 1.
|
|
269
|
+
lineHeight: 1.33333,
|
|
270
270
|
letterSpacing: layout.px(0.32)
|
|
271
271
|
};
|
|
272
272
|
var label02$1 = {
|
|
273
273
|
fontSize: layout.rem(scale[1]),
|
|
274
274
|
fontWeight: fontWeights.regular,
|
|
275
|
-
lineHeight: 1.
|
|
276
|
-
letterSpacing: layout.px(0.
|
|
275
|
+
lineHeight: 1.28572,
|
|
276
|
+
letterSpacing: layout.px(0.16)
|
|
277
277
|
};
|
|
278
278
|
var helperText01$1 = {
|
|
279
279
|
fontSize: layout.rem(scale[0]),
|
|
280
|
-
lineHeight: 1.
|
|
280
|
+
lineHeight: 1.33333,
|
|
281
281
|
letterSpacing: layout.px(0.32)
|
|
282
282
|
};
|
|
283
283
|
var helperText02$1 = {
|
|
284
284
|
fontSize: layout.rem(scale[1]),
|
|
285
|
-
lineHeight: 1.
|
|
286
|
-
letterSpacing: layout.px(0.
|
|
285
|
+
lineHeight: 1.28572,
|
|
286
|
+
letterSpacing: layout.px(0.16)
|
|
287
287
|
};
|
|
288
288
|
var bodyShort01$1 = {
|
|
289
289
|
fontSize: layout.rem(scale[1]),
|
|
290
290
|
fontWeight: fontWeights.regular,
|
|
291
|
-
lineHeight: 1.
|
|
291
|
+
lineHeight: 1.28572,
|
|
292
292
|
letterSpacing: layout.px(0.16)
|
|
293
293
|
};
|
|
294
294
|
var bodyLong01$1 = {
|
|
295
295
|
fontSize: layout.rem(scale[1]),
|
|
296
296
|
fontWeight: fontWeights.regular,
|
|
297
|
-
lineHeight: 1.
|
|
297
|
+
lineHeight: 1.42857,
|
|
298
298
|
letterSpacing: layout.px(0.16)
|
|
299
299
|
};
|
|
300
300
|
var bodyShort02$1 = {
|
|
@@ -313,30 +313,40 @@ var code01$1 = {
|
|
|
313
313
|
fontFamily: fontFamilies.mono,
|
|
314
314
|
fontSize: layout.rem(scale[0]),
|
|
315
315
|
fontWeight: fontWeights.regular,
|
|
316
|
-
lineHeight: 1.
|
|
316
|
+
lineHeight: 1.33333,
|
|
317
317
|
letterSpacing: layout.px(0.32)
|
|
318
318
|
};
|
|
319
319
|
var code02$1 = {
|
|
320
320
|
fontFamily: fontFamilies.mono,
|
|
321
321
|
fontSize: layout.rem(scale[1]),
|
|
322
322
|
fontWeight: fontWeights.regular,
|
|
323
|
-
lineHeight: 1.
|
|
323
|
+
lineHeight: 1.42857,
|
|
324
324
|
letterSpacing: layout.px(0.32)
|
|
325
325
|
};
|
|
326
326
|
var heading01$1 = {
|
|
327
327
|
fontSize: layout.rem(scale[1]),
|
|
328
328
|
fontWeight: fontWeights.semibold,
|
|
329
|
-
lineHeight: 1.
|
|
329
|
+
lineHeight: 1.42857,
|
|
330
|
+
letterSpacing: layout.px(0.16)
|
|
331
|
+
};
|
|
332
|
+
var productiveHeading01$1 = {
|
|
333
|
+
fontSize: layout.rem(scale[1]),
|
|
334
|
+
fontWeight: fontWeights.semibold,
|
|
335
|
+
lineHeight: 1.28572,
|
|
330
336
|
letterSpacing: layout.px(0.16)
|
|
331
337
|
};
|
|
332
|
-
var productiveHeading01$1 = heading01$1;
|
|
333
338
|
var heading02$1 = {
|
|
339
|
+
fontSize: layout.rem(scale[2]),
|
|
340
|
+
fontWeight: fontWeights.semibold,
|
|
341
|
+
lineHeight: 1.5,
|
|
342
|
+
letterSpacing: 0
|
|
343
|
+
};
|
|
344
|
+
var productiveHeading02$1 = {
|
|
334
345
|
fontSize: layout.rem(scale[2]),
|
|
335
346
|
fontWeight: fontWeights.semibold,
|
|
336
347
|
lineHeight: 1.375,
|
|
337
348
|
letterSpacing: 0
|
|
338
349
|
};
|
|
339
|
-
var productiveHeading02$1 = heading02$1;
|
|
340
350
|
var productiveHeading03$1 = {
|
|
341
351
|
fontSize: layout.rem(scale[4]),
|
|
342
352
|
fontWeight: fontWeights.regular,
|
|
@@ -346,7 +356,7 @@ var productiveHeading03$1 = {
|
|
|
346
356
|
var productiveHeading04$1 = {
|
|
347
357
|
fontSize: layout.rem(scale[6]),
|
|
348
358
|
fontWeight: fontWeights.regular,
|
|
349
|
-
lineHeight: 1.
|
|
359
|
+
lineHeight: 1.28572,
|
|
350
360
|
letterSpacing: 0
|
|
351
361
|
};
|
|
352
362
|
var productiveHeading05$1 = {
|
|
@@ -364,7 +374,7 @@ var productiveHeading06$1 = {
|
|
|
364
374
|
var productiveHeading07$1 = {
|
|
365
375
|
fontSize: layout.rem(scale[11]),
|
|
366
376
|
fontWeight: fontWeights.light,
|
|
367
|
-
lineHeight: 1.
|
|
377
|
+
lineHeight: 1.199,
|
|
368
378
|
letterSpacing: 0
|
|
369
379
|
};
|
|
370
380
|
var expressiveHeading01$1 = _objectSpread2(_objectSpread2({}, heading01$1), {}, {
|
|
@@ -392,7 +402,7 @@ var expressiveHeading03$1 = {
|
|
|
392
402
|
var expressiveHeading04$1 = {
|
|
393
403
|
fontSize: layout.rem(scale[6]),
|
|
394
404
|
fontWeight: fontWeights.regular,
|
|
395
|
-
lineHeight: 1.
|
|
405
|
+
lineHeight: 1.28572,
|
|
396
406
|
letterSpacing: 0,
|
|
397
407
|
breakpoints: {
|
|
398
408
|
xlg: {
|
|
@@ -474,7 +484,7 @@ var expressiveParagraph01$1 = {
|
|
|
474
484
|
breakpoints: {
|
|
475
485
|
lg: {
|
|
476
486
|
fontSize: layout.rem(scale[6]),
|
|
477
|
-
lineHeight: 1.
|
|
487
|
+
lineHeight: 1.28572
|
|
478
488
|
},
|
|
479
489
|
max: {
|
|
480
490
|
fontSize: layout.rem(scale[7]),
|
|
@@ -483,6 +493,7 @@ var expressiveParagraph01$1 = {
|
|
|
483
493
|
}
|
|
484
494
|
};
|
|
485
495
|
var quotation01$1 = {
|
|
496
|
+
fontFamily: fontFamilies.serif,
|
|
486
497
|
fontSize: layout.rem(scale[4]),
|
|
487
498
|
fontWeight: fontWeights.regular,
|
|
488
499
|
lineHeight: 1.3,
|
|
@@ -502,7 +513,7 @@ var quotation01$1 = {
|
|
|
502
513
|
xlg: {
|
|
503
514
|
fontSize: layout.rem(scale[6]),
|
|
504
515
|
fontWeight: fontWeights.regular,
|
|
505
|
-
lineHeight: 1.
|
|
516
|
+
lineHeight: 1.28572,
|
|
506
517
|
letterSpacing: 0
|
|
507
518
|
},
|
|
508
519
|
max: {
|
|
@@ -514,6 +525,7 @@ var quotation01$1 = {
|
|
|
514
525
|
}
|
|
515
526
|
};
|
|
516
527
|
var quotation02$1 = {
|
|
528
|
+
fontFamily: fontFamilies.serif,
|
|
517
529
|
fontSize: layout.rem(scale[7]),
|
|
518
530
|
fontWeight: fontWeights.light,
|
|
519
531
|
lineHeight: 1.25,
|
|
@@ -632,7 +644,48 @@ var display04$1 = {
|
|
|
632
644
|
letterSpacing: layout.px(-0.96)
|
|
633
645
|
}
|
|
634
646
|
}
|
|
647
|
+
}; // Type changes - V11
|
|
648
|
+
// Small styles
|
|
649
|
+
// No changes for code-01, code-02, label-01, label-02
|
|
650
|
+
|
|
651
|
+
var legal01$1 = {
|
|
652
|
+
fontSize: layout.rem(scale[0]),
|
|
653
|
+
fontWeight: fontWeights.regular,
|
|
654
|
+
lineHeight: 1.33333,
|
|
655
|
+
letterSpacing: layout.px(0.32)
|
|
635
656
|
};
|
|
657
|
+
var legal02$1 = {
|
|
658
|
+
fontSize: layout.rem(scale[1]),
|
|
659
|
+
fontWeight: fontWeights.regular,
|
|
660
|
+
lineHeight: 1.28572,
|
|
661
|
+
letterSpacing: layout.px(0.16)
|
|
662
|
+
}; // Body styles
|
|
663
|
+
|
|
664
|
+
var bodyCompact01$1 = bodyShort01$1;
|
|
665
|
+
var bodyCompact02$1 = bodyShort02$1;
|
|
666
|
+
var body01$1 = bodyLong01$1;
|
|
667
|
+
var body02$1 = bodyLong02$1; // Fixed heading styles
|
|
668
|
+
|
|
669
|
+
var headingCompact01$1 = productiveHeading01$1;
|
|
670
|
+
var headingCompact02$1 = productiveHeading02$1;
|
|
671
|
+
var heading03$1 = productiveHeading03$1;
|
|
672
|
+
var heading04$1 = productiveHeading04$1;
|
|
673
|
+
var heading05$1 = productiveHeading05$1;
|
|
674
|
+
var heading06$1 = productiveHeading06$1;
|
|
675
|
+
var heading07$1 = productiveHeading07$1; // Fluid heading styles
|
|
676
|
+
|
|
677
|
+
var fluidHeading03$1 = expressiveHeading03$1;
|
|
678
|
+
var fluidHeading04$1 = expressiveHeading04$1;
|
|
679
|
+
var fluidHeading05$1 = expressiveHeading05$1;
|
|
680
|
+
var fluidHeading06$1 = expressiveHeading06$1; // Additional fluid styles
|
|
681
|
+
|
|
682
|
+
var fluidParagraph01$1 = expressiveParagraph01$1;
|
|
683
|
+
var fluidQuotation01$1 = quotation01$1;
|
|
684
|
+
var fluidQuotation02$1 = quotation02$1;
|
|
685
|
+
var fluidDisplay01$1 = display01$1;
|
|
686
|
+
var fluidDisplay02$1 = display02$1;
|
|
687
|
+
var fluidDisplay03$1 = display03$1;
|
|
688
|
+
var fluidDisplay04$1 = display04$1;
|
|
636
689
|
|
|
637
690
|
var styles = /*#__PURE__*/Object.freeze({
|
|
638
691
|
__proto__: null,
|
|
@@ -669,7 +722,31 @@ var styles = /*#__PURE__*/Object.freeze({
|
|
|
669
722
|
display01: display01$1,
|
|
670
723
|
display02: display02$1,
|
|
671
724
|
display03: display03$1,
|
|
672
|
-
display04: display04$1
|
|
725
|
+
display04: display04$1,
|
|
726
|
+
legal01: legal01$1,
|
|
727
|
+
legal02: legal02$1,
|
|
728
|
+
bodyCompact01: bodyCompact01$1,
|
|
729
|
+
bodyCompact02: bodyCompact02$1,
|
|
730
|
+
body01: body01$1,
|
|
731
|
+
body02: body02$1,
|
|
732
|
+
headingCompact01: headingCompact01$1,
|
|
733
|
+
headingCompact02: headingCompact02$1,
|
|
734
|
+
heading03: heading03$1,
|
|
735
|
+
heading04: heading04$1,
|
|
736
|
+
heading05: heading05$1,
|
|
737
|
+
heading06: heading06$1,
|
|
738
|
+
heading07: heading07$1,
|
|
739
|
+
fluidHeading03: fluidHeading03$1,
|
|
740
|
+
fluidHeading04: fluidHeading04$1,
|
|
741
|
+
fluidHeading05: fluidHeading05$1,
|
|
742
|
+
fluidHeading06: fluidHeading06$1,
|
|
743
|
+
fluidParagraph01: fluidParagraph01$1,
|
|
744
|
+
fluidQuotation01: fluidQuotation01$1,
|
|
745
|
+
fluidQuotation02: fluidQuotation02$1,
|
|
746
|
+
fluidDisplay01: fluidDisplay01$1,
|
|
747
|
+
fluidDisplay02: fluidDisplay02$1,
|
|
748
|
+
fluidDisplay03: fluidDisplay03$1,
|
|
749
|
+
fluidDisplay04: fluidDisplay04$1
|
|
673
750
|
});
|
|
674
751
|
|
|
675
752
|
var _excluded = ["breakpoints"];
|
|
@@ -780,9 +857,39 @@ var quotation02 = 'quotation02';
|
|
|
780
857
|
var display01 = 'display01';
|
|
781
858
|
var display02 = 'display02';
|
|
782
859
|
var display03 = 'display03';
|
|
783
|
-
var display04 = 'display04';
|
|
784
|
-
|
|
785
|
-
|
|
860
|
+
var display04 = 'display04'; // V11 Tokens
|
|
861
|
+
|
|
862
|
+
var legal01 = 'legal01';
|
|
863
|
+
var legal02 = 'legal02';
|
|
864
|
+
var bodyCompact01 = 'bodyCompact01';
|
|
865
|
+
var bodyCompact02 = 'bodyCompact02';
|
|
866
|
+
var body01 = 'body01';
|
|
867
|
+
var body02 = 'body02';
|
|
868
|
+
var headingCompact01 = 'headingCompact01';
|
|
869
|
+
var headingCompact02 = 'headingCompact02';
|
|
870
|
+
var heading03 = 'heading03';
|
|
871
|
+
var heading04 = 'heading04';
|
|
872
|
+
var heading05 = 'heading05';
|
|
873
|
+
var heading06 = 'heading06';
|
|
874
|
+
var heading07 = 'heading07';
|
|
875
|
+
var fluidHeading03 = 'fluidHeading03';
|
|
876
|
+
var fluidHeading04 = 'fluidHeading04';
|
|
877
|
+
var fluidHeading05 = 'fluidHeading05';
|
|
878
|
+
var fluidHeading06 = 'fluidHeading06';
|
|
879
|
+
var fluidParagraph01 = 'fluidParagraph01';
|
|
880
|
+
var fluidQuotation01 = 'fluidQuotation01';
|
|
881
|
+
var fluidQuotation02 = 'fluidQuotation02';
|
|
882
|
+
var fluidDisplay01 = 'fluidDisplay01';
|
|
883
|
+
var fluidDisplay02 = 'fluidDisplay02';
|
|
884
|
+
var fluidDisplay03 = 'fluidDisplay03';
|
|
885
|
+
var fluidDisplay04 = 'fluidDisplay04';
|
|
886
|
+
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, // V11 Tokens
|
|
887
|
+
legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04];
|
|
888
|
+
|
|
889
|
+
exports.body01 = body01$1;
|
|
890
|
+
exports.body02 = body02$1;
|
|
891
|
+
exports.bodyCompact01 = bodyCompact01$1;
|
|
892
|
+
exports.bodyCompact02 = bodyCompact02$1;
|
|
786
893
|
exports.bodyLong01 = bodyLong01$1;
|
|
787
894
|
exports.bodyLong02 = bodyLong02$1;
|
|
788
895
|
exports.bodyShort01 = bodyShort01$1;
|
|
@@ -803,6 +910,17 @@ exports.expressiveHeading05 = expressiveHeading05$1;
|
|
|
803
910
|
exports.expressiveHeading06 = expressiveHeading06$1;
|
|
804
911
|
exports.expressiveParagraph01 = expressiveParagraph01$1;
|
|
805
912
|
exports.fluid = fluid;
|
|
913
|
+
exports.fluidDisplay01 = fluidDisplay01$1;
|
|
914
|
+
exports.fluidDisplay02 = fluidDisplay02$1;
|
|
915
|
+
exports.fluidDisplay03 = fluidDisplay03$1;
|
|
916
|
+
exports.fluidDisplay04 = fluidDisplay04$1;
|
|
917
|
+
exports.fluidHeading03 = fluidHeading03$1;
|
|
918
|
+
exports.fluidHeading04 = fluidHeading04$1;
|
|
919
|
+
exports.fluidHeading05 = fluidHeading05$1;
|
|
920
|
+
exports.fluidHeading06 = fluidHeading06$1;
|
|
921
|
+
exports.fluidParagraph01 = fluidParagraph01$1;
|
|
922
|
+
exports.fluidQuotation01 = fluidQuotation01$1;
|
|
923
|
+
exports.fluidQuotation02 = fluidQuotation02$1;
|
|
806
924
|
exports.fontFamilies = fontFamilies;
|
|
807
925
|
exports.fontFamily = fontFamily;
|
|
808
926
|
exports.fontWeight = fontWeight;
|
|
@@ -810,10 +928,19 @@ exports.fontWeights = fontWeights;
|
|
|
810
928
|
exports.getTypeSize = getTypeSize;
|
|
811
929
|
exports.heading01 = heading01$1;
|
|
812
930
|
exports.heading02 = heading02$1;
|
|
931
|
+
exports.heading03 = heading03$1;
|
|
932
|
+
exports.heading04 = heading04$1;
|
|
933
|
+
exports.heading05 = heading05$1;
|
|
934
|
+
exports.heading06 = heading06$1;
|
|
935
|
+
exports.heading07 = heading07$1;
|
|
936
|
+
exports.headingCompact01 = headingCompact01$1;
|
|
937
|
+
exports.headingCompact02 = headingCompact02$1;
|
|
813
938
|
exports.helperText01 = helperText01$1;
|
|
814
939
|
exports.helperText02 = helperText02$1;
|
|
815
940
|
exports.label01 = label01$1;
|
|
816
941
|
exports.label02 = label02$1;
|
|
942
|
+
exports.legal01 = legal01$1;
|
|
943
|
+
exports.legal02 = legal02$1;
|
|
817
944
|
exports.print = print;
|
|
818
945
|
exports.productiveHeading01 = productiveHeading01$1;
|
|
819
946
|
exports.productiveHeading02 = productiveHeading02$1;
|
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.37.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -38,11 +38,11 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@carbon/import-once": "^10.6.0",
|
|
41
|
-
"@carbon/layout": "^10.
|
|
41
|
+
"@carbon/layout": "^10.32.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@carbon/cli": "^10.
|
|
45
|
-
"@carbon/test-utils": "^10.
|
|
44
|
+
"@carbon/cli": "^10.29.0",
|
|
45
|
+
"@carbon/test-utils": "^10.19.0",
|
|
46
46
|
"change-case": "^4.1.1",
|
|
47
47
|
"rimraf": "^3.0.0"
|
|
48
48
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"sassDir": "scss",
|
|
53
53
|
"needs": "^1.3.0"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "56777e5ca24e7cc05e3035e18183297eaeefcea2"
|
|
56
56
|
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
@return 12px;
|
|
18
18
|
}
|
|
19
19
|
// Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
|
|
20
|
-
@return carbon--get-type-size($step - 1) + (floor(($step - 2)
|
|
20
|
+
@return carbon--get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
|