@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.
Files changed (21) hide show
  1. package/es/index.js +57 -59
  2. package/lib/index.js +57 -59
  3. package/package.json +4 -4
  4. package/scss/_inlined/_reset.scss +1 -1
  5. package/scss/_inlined/_scale.scss +2 -2
  6. package/scss/_inlined/_styles.scss +58 -59
  7. package/scss/_inlined/font-face/_mono.scss +72 -72
  8. package/scss/_inlined/font-face/_sans-condensed.scss +42 -42
  9. package/scss/_inlined/font-face/_sans.scss +84 -84
  10. package/scss/_inlined/font-face/_serif.scss +72 -72
  11. package/scss/_reset.scss +1 -1
  12. package/scss/_scale.scss +2 -2
  13. package/scss/_styles.scss +58 -59
  14. package/scss/font-face/_mono.scss +72 -72
  15. package/scss/font-face/_sans-condensed.scss +42 -42
  16. package/scss/font-face/_sans.scss +84 -84
  17. package/scss/font-face/_serif.scss +72 -72
  18. package/src/__tests__/__snapshots__/styles-test.js.snap +31 -31
  19. package/src/__tests__/fluid-test.js +26 -26
  20. package/src/styles.js +57 -59
  21. package/umd/index.js +57 -59
package/scss/_styles.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  $caption-01: (
16
16
  font-size: carbon--type-scale(1),
17
17
  font-weight: carbon--font-weight('regular'),
18
- line-height: carbon--rem(16px),
18
+ line-height: 1.34,
19
19
  letter-spacing: 0.32px,
20
20
  ) !default;
21
21
 
@@ -25,7 +25,7 @@ $caption-01: (
25
25
  $label-01: (
26
26
  font-size: carbon--type-scale(1),
27
27
  font-weight: carbon--font-weight('regular'),
28
- line-height: carbon--rem(16px),
28
+ line-height: 1.34,
29
29
  letter-spacing: 0.32px,
30
30
  ) !default;
31
31
 
@@ -34,7 +34,7 @@ $label-01: (
34
34
  /// @group @carbon/type
35
35
  $helper-text-01: (
36
36
  font-size: carbon--type-scale(1),
37
- line-height: carbon--rem(16px),
37
+ line-height: 1.34,
38
38
  letter-spacing: 0.32px,
39
39
  ) !default;
40
40
 
@@ -44,7 +44,7 @@ $helper-text-01: (
44
44
  $body-short-01: (
45
45
  font-size: carbon--type-scale(2),
46
46
  font-weight: carbon--font-weight('regular'),
47
- line-height: carbon--em(18px),
47
+ line-height: 1.29,
48
48
  letter-spacing: 0.16px,
49
49
  ) !default;
50
50
 
@@ -54,7 +54,7 @@ $body-short-01: (
54
54
  $body-long-01: (
55
55
  font-size: carbon--type-scale(2),
56
56
  font-weight: carbon--font-weight('regular'),
57
- line-height: carbon--em(20px),
57
+ line-height: 1.43,
58
58
  letter-spacing: 0.16px,
59
59
  ) !default;
60
60
 
@@ -64,7 +64,7 @@ $body-long-01: (
64
64
  $body-short-02: (
65
65
  font-size: carbon--type-scale(3),
66
66
  font-weight: carbon--font-weight('regular'),
67
- line-height: carbon--em(22px),
67
+ line-height: 1.375,
68
68
  letter-spacing: 0,
69
69
  ) !default;
70
70
 
@@ -74,7 +74,7 @@ $body-short-02: (
74
74
  $body-long-02: (
75
75
  font-size: carbon--type-scale(3),
76
76
  font-weight: carbon--font-weight('regular'),
77
- line-height: carbon--em(24px),
77
+ line-height: 1.5,
78
78
  letter-spacing: 0,
79
79
  ) !default;
80
80
 
@@ -85,7 +85,7 @@ $code-01: (
85
85
  font-family: carbon--font-family('mono'),
86
86
  font-size: carbon--type-scale(1),
87
87
  font-weight: carbon--font-weight('regular'),
88
- line-height: carbon--rem(16px),
88
+ line-height: 1.34,
89
89
  letter-spacing: 0.32px,
90
90
  ) !default;
91
91
 
@@ -96,7 +96,7 @@ $code-02: (
96
96
  font-family: carbon--font-family('mono'),
97
97
  font-size: carbon--type-scale(2),
98
98
  font-weight: carbon--font-weight('regular'),
99
- line-height: carbon--rem(20px),
99
+ line-height: 1.43,
100
100
  letter-spacing: 0.32px,
101
101
  ) !default;
102
102
 
@@ -106,7 +106,7 @@ $code-02: (
106
106
  $heading-01: (
107
107
  font-size: carbon--type-scale(2),
108
108
  font-weight: carbon--font-weight('semibold'),
109
- line-height: carbon--rem(18px),
109
+ line-height: 1.29,
110
110
  letter-spacing: 0.16px,
111
111
  ) !default;
112
112
 
@@ -121,7 +121,7 @@ $productive-heading-01: $heading-01 !default;
121
121
  $heading-02: (
122
122
  font-size: carbon--type-scale(3),
123
123
  font-weight: carbon--font-weight('semibold'),
124
- line-height: carbon--rem(22px),
124
+ line-height: 1.375,
125
125
  letter-spacing: 0,
126
126
  ) !default;
127
127
 
@@ -136,7 +136,7 @@ $productive-heading-02: $heading-02 !default;
136
136
  $productive-heading-03: (
137
137
  font-size: carbon--type-scale(5),
138
138
  font-weight: carbon--font-weight('regular'),
139
- line-height: carbon--rem(28px),
139
+ line-height: 1.4,
140
140
  letter-spacing: 0,
141
141
  ) !default;
142
142
 
@@ -146,7 +146,7 @@ $productive-heading-03: (
146
146
  $productive-heading-04: (
147
147
  font-size: carbon--type-scale(7),
148
148
  font-weight: carbon--font-weight('regular'),
149
- line-height: carbon--rem(36px),
149
+ line-height: 1.29,
150
150
  letter-spacing: 0,
151
151
  ) !default;
152
152
 
@@ -156,7 +156,7 @@ $productive-heading-04: (
156
156
  $productive-heading-05: (
157
157
  font-size: carbon--type-scale(8),
158
158
  font-weight: carbon--font-weight('regular'),
159
- line-height: carbon--rem(40px),
159
+ line-height: 1.25,
160
160
  letter-spacing: 0,
161
161
  ) !default;
162
162
 
@@ -166,7 +166,8 @@ $productive-heading-05: (
166
166
  $productive-heading-06: (
167
167
  font-size: carbon--type-scale(8),
168
168
  font-weight: carbon--font-weight('light'),
169
- line-height: carbon--rem(50px),
169
+ // Extra digit needed for precision in Chrome
170
+ line-height: 1.199,
170
171
  letter-spacing: 0,
171
172
  ) !default;
172
173
 
@@ -176,7 +177,7 @@ $productive-heading-06: (
176
177
  $productive-heading-07: (
177
178
  font-size: carbon--type-scale(10),
178
179
  font-weight: carbon--font-weight('light'),
179
- line-height: carbon--rem(64px),
180
+ line-height: 1.19,
180
181
  letter-spacing: 0,
181
182
  ) !default;
182
183
 
@@ -186,7 +187,7 @@ $productive-heading-07: (
186
187
  $expressive-heading-01: map-merge(
187
188
  $heading-01,
188
189
  (
189
- line-height: carbon--rem(20px),
190
+ line-height: 1.25,
190
191
  )
191
192
  ) !default;
192
193
 
@@ -196,7 +197,7 @@ $expressive-heading-01: map-merge(
196
197
  $expressive-heading-02: map-merge(
197
198
  $heading-02,
198
199
  (
199
- line-height: carbon--rem(24px),
200
+ line-height: 1.5,
200
201
  )
201
202
  ) !default;
202
203
 
@@ -206,12 +207,12 @@ $expressive-heading-02: map-merge(
206
207
  $expressive-heading-03: (
207
208
  font-size: carbon--type-scale(5),
208
209
  font-weight: carbon--font-weight('regular'),
209
- line-height: 140%,
210
+ line-height: 1.4,
210
211
  letter-spacing: 0,
211
212
  breakpoints: (
212
213
  xlg: (
213
214
  font-size: carbon--type-scale(5),
214
- line-height: 125%,
215
+ line-height: 1.25,
215
216
  ),
216
217
  max: (
217
218
  font-size: carbon--type-scale(6),
@@ -225,12 +226,12 @@ $expressive-heading-03: (
225
226
  $expressive-heading-04: (
226
227
  font-size: carbon--type-scale(7),
227
228
  font-weight: carbon--font-weight('regular'),
228
- line-height: 129%,
229
+ line-height: 1.29,
229
230
  letter-spacing: 0,
230
231
  breakpoints: (
231
232
  xlg: (
232
233
  font-size: carbon--type-scale(7),
233
- line-height: 125%,
234
+ line-height: 1.25,
234
235
  ),
235
236
  max: (
236
237
  font-size: carbon--type-scale(8),
@@ -244,25 +245,24 @@ $expressive-heading-04: (
244
245
  $expressive-heading-05: (
245
246
  font-size: carbon--type-scale(8),
246
247
  font-weight: carbon--font-weight('regular'),
247
- line-height: 125%,
248
+ line-height: 1.25,
248
249
  letter-spacing: 0,
249
250
  breakpoints: (
250
251
  md: (
251
252
  font-size: carbon--type-scale(9),
252
253
  font-weight: carbon--font-weight('light'),
253
- line-height: 122%,
254
+ line-height: 1.22,
254
255
  ),
255
256
  lg: (
256
257
  font-size: carbon--type-scale(10),
257
- line-height: 119%,
258
+ line-height: 1.19,
258
259
  ),
259
260
  xlg: (
260
261
  font-size: carbon--type-scale(11),
261
- line-height: 117%,
262
+ line-height: 1.17,
262
263
  ),
263
264
  max: (
264
265
  font-size: carbon--type-scale(13),
265
- line-height: carbon--rem(70px),
266
266
  ),
267
267
  ),
268
268
  ) !default;
@@ -273,24 +273,23 @@ $expressive-heading-05: (
273
273
  $expressive-heading-06: (
274
274
  font-size: carbon--type-scale(8),
275
275
  font-weight: carbon--font-weight('semibold'),
276
- line-height: 125%,
276
+ line-height: 1.25,
277
277
  letter-spacing: 0,
278
278
  breakpoints: (
279
279
  md: (
280
280
  font-size: carbon--type-scale(9),
281
- line-height: 122%,
281
+ line-height: 1.22,
282
282
  ),
283
283
  lg: (
284
284
  font-size: carbon--type-scale(10),
285
- line-height: 119%,
285
+ line-height: 1.19,
286
286
  ),
287
287
  xlg: (
288
288
  font-size: carbon--type-scale(11),
289
- line-height: 117%,
289
+ line-height: 1.17,
290
290
  ),
291
291
  max: (
292
292
  font-size: carbon--type-scale(13),
293
- line-height: carbon--rem(70px),
294
293
  ),
295
294
  ),
296
295
  ) !default;
@@ -301,16 +300,16 @@ $expressive-heading-06: (
301
300
  $expressive-paragraph-01: (
302
301
  font-size: carbon--type-scale(6),
303
302
  font-weight: carbon--font-weight('light'),
304
- line-height: 125%,
303
+ line-height: 1.25,
305
304
  letter-spacing: 0,
306
305
  breakpoints: (
307
306
  lg: (
308
307
  font-size: carbon--type-scale(7),
309
- line-height: 129%,
308
+ line-height: 1.29,
310
309
  ),
311
310
  max: (
312
311
  font-size: carbon--type-scale(8),
313
- line-height: 125%,
312
+ line-height: 1.25,
314
313
  ),
315
314
  ),
316
315
  );
@@ -321,7 +320,7 @@ $expressive-paragraph-01: (
321
320
  $quotation-01: (
322
321
  font-size: carbon--type-scale(5),
323
322
  font-weight: carbon--font-weight('regular'),
324
- line-height: 130%,
323
+ line-height: 1.3,
325
324
  letter-spacing: 0,
326
325
  breakpoints: (
327
326
  md: (
@@ -329,15 +328,15 @@ $quotation-01: (
329
328
  ),
330
329
  lg: (
331
330
  font-size: carbon--type-scale(6),
332
- line-height: 125%,
331
+ line-height: 1.25,
333
332
  ),
334
333
  xlg: (
335
334
  font-size: carbon--type-scale(7),
336
- line-height: 129%,
335
+ line-height: 1.29,
337
336
  ),
338
337
  max: (
339
338
  font-size: carbon--type-scale(8),
340
- line-height: 125%,
339
+ line-height: 1.25,
341
340
  ),
342
341
  ),
343
342
  ) !default;
@@ -348,20 +347,20 @@ $quotation-01: (
348
347
  $quotation-02: (
349
348
  font-size: carbon--type-scale(8),
350
349
  font-weight: carbon--font-weight('light'),
351
- line-height: 125%,
350
+ line-height: 1.25,
352
351
  letter-spacing: 0,
353
352
  breakpoints: (
354
353
  md: (
355
354
  font-size: carbon--type-scale(9),
356
- line-height: 122%,
355
+ line-height: 1.22,
357
356
  ),
358
357
  lg: (
359
358
  font-size: carbon--type-scale(10),
360
- line-height: 119%,
359
+ line-height: 1.19,
361
360
  ),
362
361
  xlg: (
363
362
  font-size: carbon--type-scale(11),
364
- line-height: 117%,
363
+ line-height: 1.17,
365
364
  ),
366
365
  max: (
367
366
  font-size: carbon--type-scale(13),
@@ -375,7 +374,7 @@ $quotation-02: (
375
374
  $display-01: (
376
375
  font-size: carbon--type-scale(10),
377
376
  font-weight: carbon--font-weight('light'),
378
- line-height: 119%,
377
+ line-height: 1.19,
379
378
  letter-spacing: 0,
380
379
  breakpoints: (
381
380
  md: (
@@ -386,11 +385,11 @@ $display-01: (
386
385
  ),
387
386
  xlg: (
388
387
  font-size: carbon--type-scale(13),
389
- line-height: 117%,
388
+ line-height: 1.17,
390
389
  ),
391
390
  max: (
392
391
  font-size: carbon--type-scale(15),
393
- line-height: 113%,
392
+ line-height: 1.13,
394
393
  ),
395
394
  ),
396
395
  ) !default;
@@ -401,7 +400,7 @@ $display-01: (
401
400
  $display-02: (
402
401
  font-size: carbon--type-scale(10),
403
402
  font-weight: carbon--font-weight('semibold'),
404
- line-height: 119%,
403
+ line-height: 1.19,
405
404
  letter-spacing: 0,
406
405
  breakpoints: (
407
406
  md: (
@@ -412,11 +411,11 @@ $display-02: (
412
411
  ),
413
412
  xlg: (
414
413
  font-size: carbon--type-scale(13),
415
- line-height: 116%,
414
+ line-height: 1.16,
416
415
  ),
417
416
  max: (
418
417
  font-size: carbon--type-scale(15),
419
- line-height: 113%,
418
+ line-height: 1.13,
420
419
  ),
421
420
  ),
422
421
  ) !default;
@@ -427,26 +426,26 @@ $display-02: (
427
426
  $display-03: (
428
427
  font-size: carbon--type-scale(10),
429
428
  font-weight: carbon--font-weight('light'),
430
- line-height: 119%,
429
+ line-height: 1.19,
431
430
  letter-spacing: 0,
432
431
  breakpoints: (
433
432
  md: (
434
433
  font-size: carbon--type-scale(14),
435
- line-height: 115%,
434
+ line-height: 1.15,
436
435
  ),
437
436
  lg: (
438
437
  font-size: carbon--type-scale(17),
439
- line-height: 111%,
438
+ line-height: 1.11,
440
439
  letter-spacing: -0.64px,
441
440
  ),
442
441
  xlg: (
443
442
  font-size: carbon--type-scale(20),
444
- line-height: 107%,
443
+ line-height: 1.07,
445
444
  letter-spacing: -0.64px,
446
445
  ),
447
446
  max: (
448
447
  font-size: carbon--type-scale(23),
449
- line-height: 105%,
448
+ line-height: 1.05,
450
449
  letter-spacing: -0.96px,
451
450
  ),
452
451
  ),
@@ -458,26 +457,26 @@ $display-03: (
458
457
  $display-04: (
459
458
  font-size: carbon--type-scale(10),
460
459
  font-weight: carbon--font-weight('semibold'),
461
- line-height: 119%,
460
+ line-height: 1.19,
462
461
  letter-spacing: 0,
463
462
  breakpoints: (
464
463
  md: (
465
464
  font-size: carbon--type-scale(14),
466
- line-height: 115%,
465
+ line-height: 1.15,
467
466
  ),
468
467
  lg: (
469
468
  font-size: carbon--type-scale(17),
470
- line-height: 111%,
469
+ line-height: 1.11,
471
470
  letter-spacing: -0.64px,
472
471
  ),
473
472
  xlg: (
474
473
  font-size: carbon--type-scale(20),
475
- line-height: 107%,
474
+ line-height: 1.07,
476
475
  letter-spacing: -0.64px,
477
476
  ),
478
477
  max: (
479
478
  font-size: carbon--type-scale(23),
480
- line-height: 105%,
479
+ line-height: 1.05,
481
480
  letter-spacing: -0.96px,
482
481
  ),
483
482
  ),