@carbon/type 10.14.0 → 10.16.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 (15) hide show
  1. package/es/index.js +59 -60
  2. package/lib/index.js +59 -60
  3. package/package.json +4 -4
  4. package/scss/_font-family.scss +2 -2
  5. package/scss/_inlined/_font-family.scss +2 -2
  6. package/scss/_inlined/_reset.scss +1 -1
  7. package/scss/_inlined/_scale.scss +2 -2
  8. package/scss/_inlined/_styles.scss +59 -59
  9. package/scss/_reset.scss +1 -1
  10. package/scss/_scale.scss +2 -2
  11. package/scss/_styles.scss +59 -59
  12. package/src/__tests__/__snapshots__/styles-test.js.snap +31 -31
  13. package/src/__tests__/fluid-test.js +26 -26
  14. package/src/styles.js +58 -59
  15. package/umd/index.js +59 -60
package/scss/_inlined/_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,15 +207,16 @@ $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),
219
+ line-height: 1.334,
218
220
  ),
219
221
  ),
220
222
  ) !default;
@@ -225,12 +227,12 @@ $expressive-heading-03: (
225
227
  $expressive-heading-04: (
226
228
  font-size: carbon--type-scale(7),
227
229
  font-weight: carbon--font-weight('regular'),
228
- line-height: 129%,
230
+ line-height: 1.29,
229
231
  letter-spacing: 0,
230
232
  breakpoints: (
231
233
  xlg: (
232
234
  font-size: carbon--type-scale(7),
233
- line-height: 125%,
235
+ line-height: 1.25,
234
236
  ),
235
237
  max: (
236
238
  font-size: carbon--type-scale(8),
@@ -244,25 +246,24 @@ $expressive-heading-04: (
244
246
  $expressive-heading-05: (
245
247
  font-size: carbon--type-scale(8),
246
248
  font-weight: carbon--font-weight('regular'),
247
- line-height: 125%,
249
+ line-height: 1.25,
248
250
  letter-spacing: 0,
249
251
  breakpoints: (
250
252
  md: (
251
253
  font-size: carbon--type-scale(9),
252
254
  font-weight: carbon--font-weight('light'),
253
- line-height: 122%,
255
+ line-height: 1.22,
254
256
  ),
255
257
  lg: (
256
258
  font-size: carbon--type-scale(10),
257
- line-height: 119%,
259
+ line-height: 1.19,
258
260
  ),
259
261
  xlg: (
260
262
  font-size: carbon--type-scale(11),
261
- line-height: 117%,
263
+ line-height: 1.17,
262
264
  ),
263
265
  max: (
264
266
  font-size: carbon--type-scale(13),
265
- line-height: carbon--rem(70px),
266
267
  ),
267
268
  ),
268
269
  ) !default;
@@ -273,24 +274,23 @@ $expressive-heading-05: (
273
274
  $expressive-heading-06: (
274
275
  font-size: carbon--type-scale(8),
275
276
  font-weight: carbon--font-weight('semibold'),
276
- line-height: 125%,
277
+ line-height: 1.25,
277
278
  letter-spacing: 0,
278
279
  breakpoints: (
279
280
  md: (
280
281
  font-size: carbon--type-scale(9),
281
- line-height: 122%,
282
+ line-height: 1.22,
282
283
  ),
283
284
  lg: (
284
285
  font-size: carbon--type-scale(10),
285
- line-height: 119%,
286
+ line-height: 1.19,
286
287
  ),
287
288
  xlg: (
288
289
  font-size: carbon--type-scale(11),
289
- line-height: 117%,
290
+ line-height: 1.17,
290
291
  ),
291
292
  max: (
292
293
  font-size: carbon--type-scale(13),
293
- line-height: carbon--rem(70px),
294
294
  ),
295
295
  ),
296
296
  ) !default;
@@ -301,16 +301,16 @@ $expressive-heading-06: (
301
301
  $expressive-paragraph-01: (
302
302
  font-size: carbon--type-scale(6),
303
303
  font-weight: carbon--font-weight('light'),
304
- line-height: 125%,
304
+ line-height: 1.334,
305
305
  letter-spacing: 0,
306
306
  breakpoints: (
307
307
  lg: (
308
308
  font-size: carbon--type-scale(7),
309
- line-height: 129%,
309
+ line-height: 1.29,
310
310
  ),
311
311
  max: (
312
312
  font-size: carbon--type-scale(8),
313
- line-height: 125%,
313
+ line-height: 1.25,
314
314
  ),
315
315
  ),
316
316
  );
@@ -321,7 +321,7 @@ $expressive-paragraph-01: (
321
321
  $quotation-01: (
322
322
  font-size: carbon--type-scale(5),
323
323
  font-weight: carbon--font-weight('regular'),
324
- line-height: 130%,
324
+ line-height: 1.3,
325
325
  letter-spacing: 0,
326
326
  breakpoints: (
327
327
  md: (
@@ -329,15 +329,15 @@ $quotation-01: (
329
329
  ),
330
330
  lg: (
331
331
  font-size: carbon--type-scale(6),
332
- line-height: 125%,
332
+ line-height: 1.334,
333
333
  ),
334
334
  xlg: (
335
335
  font-size: carbon--type-scale(7),
336
- line-height: 129%,
336
+ line-height: 1.29,
337
337
  ),
338
338
  max: (
339
339
  font-size: carbon--type-scale(8),
340
- line-height: 125%,
340
+ line-height: 1.25,
341
341
  ),
342
342
  ),
343
343
  ) !default;
@@ -348,20 +348,20 @@ $quotation-01: (
348
348
  $quotation-02: (
349
349
  font-size: carbon--type-scale(8),
350
350
  font-weight: carbon--font-weight('light'),
351
- line-height: 125%,
351
+ line-height: 1.25,
352
352
  letter-spacing: 0,
353
353
  breakpoints: (
354
354
  md: (
355
355
  font-size: carbon--type-scale(9),
356
- line-height: 122%,
356
+ line-height: 1.22,
357
357
  ),
358
358
  lg: (
359
359
  font-size: carbon--type-scale(10),
360
- line-height: 119%,
360
+ line-height: 1.19,
361
361
  ),
362
362
  xlg: (
363
363
  font-size: carbon--type-scale(11),
364
- line-height: 117%,
364
+ line-height: 1.17,
365
365
  ),
366
366
  max: (
367
367
  font-size: carbon--type-scale(13),
@@ -375,7 +375,7 @@ $quotation-02: (
375
375
  $display-01: (
376
376
  font-size: carbon--type-scale(10),
377
377
  font-weight: carbon--font-weight('light'),
378
- line-height: 119%,
378
+ line-height: 1.19,
379
379
  letter-spacing: 0,
380
380
  breakpoints: (
381
381
  md: (
@@ -386,11 +386,11 @@ $display-01: (
386
386
  ),
387
387
  xlg: (
388
388
  font-size: carbon--type-scale(13),
389
- line-height: 117%,
389
+ line-height: 1.17,
390
390
  ),
391
391
  max: (
392
392
  font-size: carbon--type-scale(15),
393
- line-height: 113%,
393
+ line-height: 1.13,
394
394
  ),
395
395
  ),
396
396
  ) !default;
@@ -401,7 +401,7 @@ $display-01: (
401
401
  $display-02: (
402
402
  font-size: carbon--type-scale(10),
403
403
  font-weight: carbon--font-weight('semibold'),
404
- line-height: 119%,
404
+ line-height: 1.19,
405
405
  letter-spacing: 0,
406
406
  breakpoints: (
407
407
  md: (
@@ -412,11 +412,11 @@ $display-02: (
412
412
  ),
413
413
  xlg: (
414
414
  font-size: carbon--type-scale(13),
415
- line-height: 116%,
415
+ line-height: 1.16,
416
416
  ),
417
417
  max: (
418
418
  font-size: carbon--type-scale(15),
419
- line-height: 113%,
419
+ line-height: 1.13,
420
420
  ),
421
421
  ),
422
422
  ) !default;
@@ -427,26 +427,26 @@ $display-02: (
427
427
  $display-03: (
428
428
  font-size: carbon--type-scale(10),
429
429
  font-weight: carbon--font-weight('light'),
430
- line-height: 119%,
430
+ line-height: 1.19,
431
431
  letter-spacing: 0,
432
432
  breakpoints: (
433
433
  md: (
434
434
  font-size: carbon--type-scale(14),
435
- line-height: 115%,
435
+ line-height: 1.15,
436
436
  ),
437
437
  lg: (
438
438
  font-size: carbon--type-scale(17),
439
- line-height: 111%,
439
+ line-height: 1.11,
440
440
  letter-spacing: -0.64px,
441
441
  ),
442
442
  xlg: (
443
443
  font-size: carbon--type-scale(20),
444
- line-height: 107%,
444
+ line-height: 1.07,
445
445
  letter-spacing: -0.64px,
446
446
  ),
447
447
  max: (
448
448
  font-size: carbon--type-scale(23),
449
- line-height: 105%,
449
+ line-height: 1.05,
450
450
  letter-spacing: -0.96px,
451
451
  ),
452
452
  ),
@@ -458,26 +458,26 @@ $display-03: (
458
458
  $display-04: (
459
459
  font-size: carbon--type-scale(10),
460
460
  font-weight: carbon--font-weight('semibold'),
461
- line-height: 119%,
461
+ line-height: 1.19,
462
462
  letter-spacing: 0,
463
463
  breakpoints: (
464
464
  md: (
465
465
  font-size: carbon--type-scale(14),
466
- line-height: 115%,
466
+ line-height: 1.15,
467
467
  ),
468
468
  lg: (
469
469
  font-size: carbon--type-scale(17),
470
- line-height: 111%,
470
+ line-height: 1.11,
471
471
  letter-spacing: -0.64px,
472
472
  ),
473
473
  xlg: (
474
474
  font-size: carbon--type-scale(20),
475
- line-height: 107%,
475
+ line-height: 1.07,
476
476
  letter-spacing: -0.64px,
477
477
  ),
478
478
  max: (
479
479
  font-size: carbon--type-scale(23),
480
- line-height: 105%,
480
+ line-height: 1.05,
481
481
  letter-spacing: -0.96px,
482
482
  ),
483
483
  ),
package/scss/_reset.scss CHANGED
@@ -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
- $base-font-size: $carbon--base-font-size,
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
  ) {
package/scss/_scale.scss CHANGED
@@ -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 scole follows a custom formula for determining each step size and supports sizes from 12px to 92px
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 typescale
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