@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/src/__tests__/fluid-test.js CHANGED
@@ -41,31 +41,31 @@ describe('fluid', () => {
41
41
 
42
42
  it('should compute the fluid styles for a token', () => {
43
43
  expect(fluid(display04)).toMatchInlineSnapshot(`
44
- Object {
45
- "@media (min-width: 42rem)": Object {
46
- "fontSize": "calc(4.25rem + 1.5 * ((100vw - 42rem) / 24))",
47
- "lineHeight": "115%",
48
- },
49
- "@media (min-width: 66rem)": Object {
50
- "fontSize": "calc(5.75rem + 1.875 * ((100vw - 66rem) / 16))",
51
- "letterSpacing": "-0.64px",
52
- "lineHeight": "111%",
53
- },
54
- "@media (min-width: 82rem)": Object {
55
- "fontSize": "calc(7.625rem + 2.125 * ((100vw - 82rem) / 17))",
56
- "letterSpacing": "-0.64px",
57
- "lineHeight": "107%",
58
- },
59
- "@media (min-width: 99rem)": Object {
60
- "fontSize": "9.75rem",
61
- "letterSpacing": "-0.96px",
62
- "lineHeight": "105%",
63
- },
64
- "fontSize": "calc(2.625rem + 1.625 * ((100vw - 20rem) / 22))",
65
- "fontWeight": 600,
66
- "letterSpacing": 0,
67
- "lineHeight": "119%",
68
- }
69
- `);
44
+ Object {
45
+ "@media (min-width: 42rem)": Object {
46
+ "fontSize": "calc(4.25rem + 1.5 * ((100vw - 42rem) / 24))",
47
+ "lineHeight": 1.15,
48
+ },
49
+ "@media (min-width: 66rem)": Object {
50
+ "fontSize": "calc(5.75rem + 1.875 * ((100vw - 66rem) / 16))",
51
+ "letterSpacing": "-0.64px",
52
+ "lineHeight": 1.11,
53
+ },
54
+ "@media (min-width: 82rem)": Object {
55
+ "fontSize": "calc(7.625rem + 2.125 * ((100vw - 82rem) / 17))",
56
+ "letterSpacing": "-0.64px",
57
+ "lineHeight": 1.07,
58
+ },
59
+ "@media (min-width: 99rem)": Object {
60
+ "fontSize": "9.75rem",
61
+ "letterSpacing": "-0.96px",
62
+ "lineHeight": 1.05,
63
+ },
64
+ "fontSize": "calc(2.625rem + 1.625 * ((100vw - 20rem) / 22))",
65
+ "fontWeight": 600,
66
+ "letterSpacing": 0,
67
+ "lineHeight": 1.19,
68
+ }
69
+ `);
70
70
  });
71
71
  });
package/src/styles.js CHANGED
@@ -13,48 +13,48 @@ import { scale } from './scale';
13
13
  export const caption01 = {
14
14
  fontSize: rem(scale[0]),
15
15
  fontWeight: fontWeights.regular,
16
- lineHeight: rem(16),
16
+ lineHeight: 1.34,
17
17
  letterSpacing: px(0.32),
18
18
  };
19
19
 
20
20
  export const label01 = {
21
21
  fontSize: rem(scale[0]),
22
22
  fontWeight: fontWeights.regular,
23
- lineHeight: rem(16),
23
+ lineHeight: 1.34,
24
24
  letterSpacing: px(0.32),
25
25
  };
26
26
 
27
27
  export const helperText01 = {
28
28
  fontSize: rem(scale[0]),
29
- lineHeight: rem(16),
29
+ lineHeight: 1.34,
30
30
  letterSpacing: px(0.32),
31
31
  };
32
32
 
33
33
  export const bodyShort01 = {
34
34
  fontSize: rem(scale[1]),
35
35
  fontWeight: fontWeights.regular,
36
- lineHeight: rem(18),
36
+ lineHeight: 1.29,
37
37
  letterSpacing: px(0.16),
38
38
  };
39
39
 
40
40
  export const bodyLong01 = {
41
41
  fontSize: rem(scale[1]),
42
42
  fontWeight: fontWeights.regular,
43
- lineHeight: rem(20),
43
+ lineHeight: 1.43,
44
44
  letterSpacing: px(0.16),
45
45
  };
46
46
 
47
47
  export const bodyShort02 = {
48
48
  fontSize: rem(scale[2]),
49
49
  fontWeight: fontWeights.regular,
50
- lineHeight: rem(22),
50
+ lineHeight: 1.375,
51
51
  letterSpacing: 0,
52
52
  };
53
53
 
54
54
  export const bodyLong02 = {
55
55
  fontSize: rem(scale[2]),
56
56
  fontWeight: fontWeights.regular,
57
- lineHeight: rem(24),
57
+ lineHeight: 1.5,
58
58
  letterSpacing: 0,
59
59
  };
60
60
 
@@ -62,7 +62,7 @@ export const code01 = {
62
62
  fontFamily: fontFamilies.mono,
63
63
  fontSize: rem(scale[0]),
64
64
  fontWeight: fontWeights.regular,
65
- lineHeight: rem(16),
65
+ lineHeight: 1.34,
66
66
  letterSpacing: px(0.32),
67
67
  };
68
68
 
@@ -70,14 +70,14 @@ export const code02 = {
70
70
  fontFamily: fontFamilies.mono,
71
71
  fontSize: rem(scale[1]),
72
72
  fontWeight: fontWeights.regular,
73
- lineHeight: rem(20),
73
+ lineHeight: 1.43,
74
74
  letterSpacing: px(0.32),
75
75
  };
76
76
 
77
77
  export const heading01 = {
78
78
  fontSize: rem(scale[1]),
79
79
  fontWeight: fontWeights.semibold,
80
- lineHeight: rem(18),
80
+ lineHeight: 1.29,
81
81
  letterSpacing: px(0.16),
82
82
  };
83
83
 
@@ -86,7 +86,7 @@ export const productiveHeading01 = heading01;
86
86
  export const heading02 = {
87
87
  fontSize: rem(scale[2]),
88
88
  fontWeight: fontWeights.semibold,
89
- lineHeight: rem(22),
89
+ lineHeight: 1.375,
90
90
  letterSpacing: 0,
91
91
  };
92
92
 
@@ -95,60 +95,61 @@ export const productiveHeading02 = heading02;
95
95
  export const productiveHeading03 = {
96
96
  fontSize: rem(scale[4]),
97
97
  fontWeight: fontWeights.regular,
98
- lineHeight: rem(28),
98
+ lineHeight: 1.4,
99
99
  letterSpacing: 0,
100
100
  };
101
101
 
102
102
  export const productiveHeading04 = {
103
103
  fontSize: rem(scale[6]),
104
104
  fontWeight: fontWeights.regular,
105
- lineHeight: rem(36),
105
+ lineHeight: 1.29,
106
106
  letterSpacing: 0,
107
107
  };
108
108
 
109
109
  export const productiveHeading05 = {
110
110
  fontSize: rem(scale[7]),
111
111
  fontWeight: fontWeights.regular,
112
- lineHeight: rem(40),
112
+ lineHeight: 1.25,
113
113
  letterSpacing: 0,
114
114
  };
115
115
 
116
116
  export const productiveHeading06 = {
117
117
  fontSize: rem(scale[9]),
118
118
  fontWeight: fontWeights.light,
119
- lineHeight: rem(50),
119
+ lineHeight: 1.199,
120
120
  letterSpacing: 0,
121
121
  };
122
122
 
123
123
  export const productiveHeading07 = {
124
124
  fontSize: rem(scale[11]),
125
125
  fontWeight: fontWeights.light,
126
- lineHeight: rem(64),
126
+ lineHeight: 1.19,
127
127
  letterSpacing: 0,
128
128
  };
129
129
 
130
130
  export const expressiveHeading01 = {
131
131
  ...heading01,
132
- lineHeight: rem(20),
132
+ lineHeight: 1.25,
133
133
  };
134
134
 
135
135
  export const expressiveHeading02 = {
136
136
  ...heading02,
137
- lineHeight: rem(24),
137
+ lineHeight: 1.5,
138
138
  };
139
139
 
140
140
  export const expressiveHeading03 = {
141
141
  fontSize: rem(scale[4]),
142
142
  fontWeight: fontWeights.regular,
143
- lineHeight: '140%',
143
+ lineHeight: 1.4,
144
144
  letterSpacing: 0,
145
145
  breakpoints: {
146
146
  xlg: {
147
147
  fontSize: rem(scale[4]),
148
- lineHeight: '125%',
148
+ lineHeight: 1.25,
149
149
  },
150
150
  max: {
151
151
  fontSize: rem(scale[5]),
152
+ lineHeight: 1.334,
152
153
  },
153
154
  },
154
155
  };
@@ -156,12 +157,12 @@ export const expressiveHeading03 = {
156
157
  export const expressiveHeading04 = {
157
158
  fontSize: rem(scale[6]),
158
159
  fontWeight: fontWeights.regular,
159
- lineHeight: '129%',
160
+ lineHeight: 1.29,
160
161
  letterSpacing: 0,
161
162
  breakpoints: {
162
163
  xlg: {
163
164
  fontSize: rem(scale[6]),
164
- lineHeight: '125%',
165
+ lineHeight: 1.25,
165
166
  },
166
167
  max: {
167
168
  fontSize: rem(scale[7]),
@@ -172,31 +173,30 @@ export const expressiveHeading04 = {
172
173
  export const expressiveHeading05 = {
173
174
  fontSize: rem(scale[7]),
174
175
  fontWeight: fontWeights.regular,
175
- lineHeight: '125%',
176
+ lineHeight: 1.25,
176
177
  letterSpacing: 0,
177
178
  breakpoints: {
178
179
  md: {
179
180
  fontSize: rem(scale[8]),
180
181
  fontWeight: fontWeights.light,
181
- lineHeight: '122%',
182
+ lineHeight: 1.22,
182
183
  letterSpacing: 0,
183
184
  },
184
185
  lg: {
185
186
  fontSize: rem(scale[9]),
186
187
  fontWeight: fontWeights.light,
187
- lineHeight: '119%',
188
+ lineHeight: 1.19,
188
189
  letterSpacing: 0,
189
190
  },
190
191
  xlg: {
191
192
  fontSize: rem(scale[10]),
192
193
  fontWeight: fontWeights.light,
193
- lineHeight: '117%',
194
+ lineHeight: 1.17,
194
195
  letterSpacing: 0,
195
196
  },
196
197
  max: {
197
198
  fontSize: rem(scale[12]),
198
199
  fontWeight: fontWeights.light,
199
- lineHeight: rem(70),
200
200
  letterSpacing: 0,
201
201
  },
202
202
  },
@@ -205,31 +205,30 @@ export const expressiveHeading05 = {
205
205
  export const expressiveHeading06 = {
206
206
  fontSize: rem(scale[7]),
207
207
  fontWeight: fontWeights.semibold,
208
- lineHeight: '125%',
208
+ lineHeight: 1.25,
209
209
  letterSpacing: 0,
210
210
  breakpoints: {
211
211
  md: {
212
212
  fontSize: rem(scale[8]),
213
213
  fontWeight: fontWeights.semibold,
214
- lineHeight: '122%',
214
+ lineHeight: 1.22,
215
215
  letterSpacing: 0,
216
216
  },
217
217
  lg: {
218
218
  fontSize: rem(scale[9]),
219
219
  fontWeight: fontWeights.semibold,
220
- lineHeight: '119%',
220
+ lineHeight: 1.19,
221
221
  letterSpacing: 0,
222
222
  },
223
223
  xlg: {
224
224
  fontSize: rem(scale[10]),
225
225
  fontWeight: fontWeights.semibold,
226
- lineHeight: '117%',
226
+ lineHeight: 1.17,
227
227
  letterSpacing: 0,
228
228
  },
229
229
  max: {
230
230
  fontSize: rem(scale[12]),
231
231
  fontWeight: fontWeights.semibold,
232
- lineHeight: rem(70),
233
232
  letterSpacing: 0,
234
233
  },
235
234
  },
@@ -238,22 +237,22 @@ export const expressiveHeading06 = {
238
237
  export const expressiveParagraph01 = {
239
238
  fontSize: rem(scale[5]),
240
239
  fontWeight: fontWeights.light,
241
- lineHeight: '125%',
240
+ lineHeight: 1.334,
242
241
  letterSpacing: 0,
243
242
  lg: {
244
243
  fontSize: rem(scale[6]),
245
- lineHeight: '129%',
244
+ lineHeight: 1.29,
246
245
  },
247
246
  max: {
248
247
  fontSize: rem(scale[7]),
249
- lineHeight: '125%',
248
+ lineHeight: 1.25,
250
249
  },
251
250
  };
252
251
 
253
252
  export const quotation01 = {
254
253
  fontSize: rem(scale[4]),
255
254
  fontWeight: fontWeights.regular,
256
- lineHeight: '130%',
255
+ lineHeight: 1.3,
257
256
  letterSpacing: 0,
258
257
  breakpoints: {
259
258
  md: {
@@ -264,19 +263,19 @@ export const quotation01 = {
264
263
  lg: {
265
264
  fontSize: rem(scale[5]),
266
265
  fontWeight: fontWeights.regular,
267
- lineHeight: '125%',
266
+ lineHeight: 1.334,
268
267
  letterSpacing: 0,
269
268
  },
270
269
  xlg: {
271
270
  fontSize: rem(scale[6]),
272
271
  fontWeight: fontWeights.regular,
273
- lineHeight: '129%',
272
+ lineHeight: 1.29,
274
273
  letterSpacing: 0,
275
274
  },
276
275
  max: {
277
276
  fontSize: rem(scale[7]),
278
277
  fontWeight: fontWeights.regular,
279
- lineHeight: '125%',
278
+ lineHeight: 1.25,
280
279
  letterSpacing: 0,
281
280
  },
282
281
  },
@@ -285,20 +284,20 @@ export const quotation01 = {
285
284
  export const quotation02 = {
286
285
  fontSize: rem(scale[7]),
287
286
  fontWeight: fontWeights.light,
288
- lineHeight: '125%',
287
+ lineHeight: 1.25,
289
288
  letterSpacing: 0,
290
289
  breakpoints: {
291
290
  md: {
292
291
  fontSize: rem(scale[8]),
293
- lineHeight: '122%',
292
+ lineHeight: 1.22,
294
293
  },
295
294
  lg: {
296
295
  fontSize: rem(scale[9]),
297
- lineHeight: '119%',
296
+ lineHeight: 1.19,
298
297
  },
299
298
  xlg: {
300
299
  fontSize: rem(scale[10]),
301
- lineHeight: '117%',
300
+ lineHeight: 1.17,
302
301
  },
303
302
  max: {
304
303
  fontSize: rem(scale[12]),
@@ -309,7 +308,7 @@ export const quotation02 = {
309
308
  export const display01 = {
310
309
  fontSize: rem(scale[9]),
311
310
  fontWeight: fontWeights.light,
312
- lineHeight: '119%',
311
+ lineHeight: 1.19,
313
312
  letterSpacing: 0,
314
313
  breakpoints: {
315
314
  md: {
@@ -320,11 +319,11 @@ export const display01 = {
320
319
  },
321
320
  xlg: {
322
321
  fontSize: rem(scale[12]),
323
- lineHeight: '117%',
322
+ lineHeight: 1.17,
324
323
  },
325
324
  max: {
326
325
  fontSize: rem(scale[14]),
327
- lineHeight: '113%',
326
+ lineHeight: 1.13,
328
327
  },
329
328
  },
330
329
  };
@@ -332,7 +331,7 @@ export const display01 = {
332
331
  export const display02 = {
333
332
  fontSize: rem(scale[9]),
334
333
  fontWeight: fontWeights.semibold,
335
- lineHeight: '119%',
334
+ lineHeight: 1.19,
336
335
  letterSpacing: 0,
337
336
  breakpoints: {
338
337
  md: {
@@ -343,11 +342,11 @@ export const display02 = {
343
342
  },
344
343
  xlg: {
345
344
  fontSize: rem(scale[12]),
346
- lineHeight: '116%',
345
+ lineHeight: 1.16,
347
346
  },
348
347
  max: {
349
348
  fontSize: rem(scale[14]),
350
- lineHeight: '113%',
349
+ lineHeight: 1.13,
351
350
  },
352
351
  },
353
352
  };
@@ -355,25 +354,25 @@ export const display02 = {
355
354
  export const display03 = {
356
355
  fontSize: rem(scale[9]),
357
356
  fontWeight: fontWeights.light,
358
- lineHeight: '119%',
357
+ lineHeight: 1.19,
359
358
  letterSpacing: 0,
360
359
  breakpoints: {
361
360
  md: {
362
361
  fontSize: rem(scale[13]),
363
- lineHeight: '115%',
362
+ lineHeight: 1.15,
364
363
  },
365
364
  lg: {
366
365
  fontSize: rem(scale[16]),
367
- lineHeight: '111%',
366
+ lineHeight: 1.11,
368
367
  letterSpacing: px(-0.64),
369
368
  },
370
369
  xlg: {
371
370
  fontSize: rem(scale[19]),
372
- lineHeight: '107%',
371
+ lineHeight: 1.07,
373
372
  },
374
373
  max: {
375
374
  fontSize: rem(scale[22]),
376
- lineHeight: '105%',
375
+ lineHeight: 1.05,
377
376
  letterSpacing: px(-0.96),
378
377
  },
379
378
  },
@@ -382,26 +381,26 @@ export const display03 = {
382
381
  export const display04 = {
383
382
  fontSize: rem(scale[9]),
384
383
  fontWeight: fontWeights.semibold,
385
- lineHeight: '119%',
384
+ lineHeight: 1.19,
386
385
  letterSpacing: 0,
387
386
  breakpoints: {
388
387
  md: {
389
388
  fontSize: rem(scale[13]),
390
- lineHeight: '115%',
389
+ lineHeight: 1.15,
391
390
  },
392
391
  lg: {
393
392
  fontSize: rem(scale[16]),
394
- lineHeight: '111%',
393
+ lineHeight: 1.11,
395
394
  letterSpacing: px(-0.64),
396
395
  },
397
396
  xlg: {
398
397
  fontSize: rem(scale[19]),
399
- lineHeight: '107%',
398
+ lineHeight: 1.07,
400
399
  letterSpacing: px(-0.64),
401
400
  },
402
401
  max: {
403
402
  fontSize: rem(scale[22]),
404
- lineHeight: '105%',
403
+ lineHeight: 1.05,
405
404
  letterSpacing: px(-0.96),
406
405
  },
407
406
  },