@carbon/type 10.26.0 → 10.28.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 +63 -36
  2. package/lib/index.js +65 -35
  3. package/package.json +4 -4
  4. package/scss/_inlined/_reset.scss +2 -2
  5. package/scss/_inlined/_styles.scss +33 -0
  6. package/scss/_inlined/font-face/_mono.scss +72 -72
  7. package/scss/_inlined/font-face/_sans-condensed.scss +42 -42
  8. package/scss/_inlined/font-face/_sans.scss +84 -84
  9. package/scss/_inlined/font-face/_serif.scss +72 -72
  10. package/scss/_reset.scss +2 -2
  11. package/scss/_styles.scss +33 -0
  12. package/scss/font-face/_mono.scss +72 -72
  13. package/scss/font-face/_sans-condensed.scss +42 -42
  14. package/scss/font-face/_sans.scss +84 -84
  15. package/scss/font-face/_serif.scss +72 -72
  16. package/scss/modules/_reset.scss +3 -3
  17. package/src/__tests__/__snapshots__/styles-test.js.snap +20 -0
  18. package/src/__tests__/exports-test.js +3 -0
  19. package/src/styles.js +20 -0
  20. package/src/tokens.js +6 -0
  21. package/umd/index.js +65 -35
package/scss/font-face/_serif.scss CHANGED
@@ -13,416 +13,416 @@
13
13
  @mixin carbon--font-face-serif {
14
14
  // .woff support for IE11
15
15
  @font-face {
16
- font-weight: 300;
16
+ font-display: $carbon--font-display;
17
17
  font-family: 'IBM Plex Serif';
18
18
  font-style: italic;
19
+ font-weight: 300;
19
20
  src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
20
21
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff)
21
22
  format('woff');
22
- font-display: $carbon--font-display;
23
23
  }
24
24
  @font-face {
25
- font-weight: 400;
25
+ font-display: $carbon--font-display;
26
26
  font-family: 'IBM Plex Serif';
27
27
  font-style: italic;
28
+ font-weight: 400;
28
29
  src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
29
30
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff)
30
31
  format('woff');
31
- font-display: $carbon--font-display;
32
32
  }
33
33
  @font-face {
34
- font-weight: 600;
34
+ font-display: $carbon--font-display;
35
35
  font-family: 'IBM Plex Serif';
36
36
  font-style: italic;
37
+ font-weight: 600;
37
38
  src: local('IBM Plex Serif SemiBold Italic'),
38
39
  local('IBMPlexSerif-SemiBoldItalic'),
39
40
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff)
40
41
  format('woff');
41
- font-display: $carbon--font-display;
42
42
  }
43
43
  @font-face {
44
- font-weight: 300;
44
+ font-display: $carbon--font-display;
45
45
  font-family: 'IBM Plex Serif';
46
46
  font-style: normal;
47
+ font-weight: 300;
47
48
  src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
48
49
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff)
49
50
  format('woff');
50
- font-display: $carbon--font-display;
51
51
  }
52
52
  @font-face {
53
- font-weight: 400;
53
+ font-display: $carbon--font-display;
54
54
  font-family: 'IBM Plex Serif';
55
55
  font-style: normal;
56
+ font-weight: 400;
56
57
  src: local('IBM Plex Serif'), local('IBMPlexSerif'),
57
58
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff)
58
59
  format('woff');
59
- font-display: $carbon--font-display;
60
60
  }
61
61
  @font-face {
62
- font-weight: 600;
62
+ font-display: $carbon--font-display;
63
63
  font-family: 'IBM Plex Serif';
64
64
  font-style: normal;
65
+ font-weight: 600;
65
66
  src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
66
67
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff)
67
68
  format('woff');
68
- font-display: $carbon--font-display;
69
69
  }
70
70
 
71
71
  /* cyrillic-ext */
72
72
  @font-face {
73
- font-weight: 300;
73
+ font-display: $carbon--font-display;
74
74
  font-family: 'IBM Plex Serif';
75
75
  font-style: italic;
76
+ font-weight: 300;
76
77
  src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
77
78
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2)
78
79
  format('woff2');
79
- font-display: $carbon--font-display;
80
80
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
81
81
  U+FE2E-FE2F;
82
82
  }
83
83
  /* cyrillic */
84
84
  @font-face {
85
- font-weight: 300;
85
+ font-display: $carbon--font-display;
86
86
  font-family: 'IBM Plex Serif';
87
87
  font-style: italic;
88
+ font-weight: 300;
88
89
  src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
89
90
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2)
90
91
  format('woff2');
91
- font-display: $carbon--font-display;
92
92
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
93
93
  }
94
94
  /* vietnamese */
95
95
  @font-face {
96
- font-weight: 300;
96
+ font-display: $carbon--font-display;
97
97
  font-family: 'IBM Plex Serif';
98
98
  font-style: italic;
99
+ font-weight: 300;
99
100
  src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
100
101
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2)
101
102
  format('woff2');
102
- font-display: $carbon--font-display;
103
103
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
104
104
  }
105
105
  /* latin-ext */
106
106
  @font-face {
107
- font-weight: 300;
107
+ font-display: $carbon--font-display;
108
108
  font-family: 'IBM Plex Serif';
109
109
  font-style: italic;
110
+ font-weight: 300;
110
111
  src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
111
112
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2)
112
113
  format('woff2');
113
- font-display: $carbon--font-display;
114
114
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
115
115
  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
116
116
  }
117
117
  /* latin */
118
118
  @font-face {
119
- font-weight: 300;
119
+ font-display: $carbon--font-display;
120
120
  font-family: 'IBM Plex Serif';
121
121
  font-style: italic;
122
+ font-weight: 300;
122
123
  src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
123
124
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2)
124
125
  format('woff2');
125
- font-display: $carbon--font-display;
126
126
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
127
127
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
128
128
  U+2215, U+FEFF, U+FFFD;
129
129
  }
130
130
  /* cyrillic-ext */
131
131
  @font-face {
132
- font-weight: 400;
132
+ font-display: $carbon--font-display;
133
133
  font-family: 'IBM Plex Serif';
134
134
  font-style: italic;
135
+ font-weight: 400;
135
136
  src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
136
137
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2)
137
138
  format('woff2');
138
- font-display: $carbon--font-display;
139
139
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
140
140
  U+FE2E-FE2F;
141
141
  }
142
142
  /* cyrillic */
143
143
  @font-face {
144
- font-weight: 400;
144
+ font-display: $carbon--font-display;
145
145
  font-family: 'IBM Plex Serif';
146
146
  font-style: italic;
147
+ font-weight: 400;
147
148
  src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
148
149
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2)
149
150
  format('woff2');
150
- font-display: $carbon--font-display;
151
151
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
152
152
  }
153
153
  /* vietnamese */
154
154
  @font-face {
155
- font-weight: 400;
155
+ font-display: $carbon--font-display;
156
156
  font-family: 'IBM Plex Serif';
157
157
  font-style: italic;
158
+ font-weight: 400;
158
159
  src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
159
160
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2)
160
161
  format('woff2');
161
- font-display: $carbon--font-display;
162
162
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
163
163
  }
164
164
  /* latin-ext */
165
165
  @font-face {
166
- font-weight: 400;
166
+ font-display: $carbon--font-display;
167
167
  font-family: 'IBM Plex Serif';
168
168
  font-style: italic;
169
+ font-weight: 400;
169
170
  src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
170
171
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2)
171
172
  format('woff2');
172
- font-display: $carbon--font-display;
173
173
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
174
174
  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
175
175
  }
176
176
  /* latin */
177
177
  @font-face {
178
- font-weight: 400;
178
+ font-display: $carbon--font-display;
179
179
  font-family: 'IBM Plex Serif';
180
180
  font-style: italic;
181
+ font-weight: 400;
181
182
  src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
182
183
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2)
183
184
  format('woff2');
184
- font-display: $carbon--font-display;
185
185
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
186
186
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
187
187
  U+2215, U+FEFF, U+FFFD;
188
188
  }
189
189
  /* cyrillic-ext */
190
190
  @font-face {
191
- font-weight: 600;
191
+ font-display: $carbon--font-display;
192
192
  font-family: 'IBM Plex Serif';
193
193
  font-style: italic;
194
+ font-weight: 600;
194
195
  src: local('IBM Plex Serif SemiBold Italic'),
195
196
  local('IBMPlexSerif-SemiBoldItalic'),
196
197
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2)
197
198
  format('woff2');
198
- font-display: $carbon--font-display;
199
199
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
200
200
  U+FE2E-FE2F;
201
201
  }
202
202
  /* cyrillic */
203
203
  @font-face {
204
- font-weight: 600;
204
+ font-display: $carbon--font-display;
205
205
  font-family: 'IBM Plex Serif';
206
206
  font-style: italic;
207
+ font-weight: 600;
207
208
  src: local('IBM Plex Serif SemiBold Italic'),
208
209
  local('IBMPlexSerif-SemiBoldItalic'),
209
210
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2)
210
211
  format('woff2');
211
- font-display: $carbon--font-display;
212
212
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
213
213
  }
214
214
  /* vietnamese */
215
215
  @font-face {
216
- font-weight: 600;
216
+ font-display: $carbon--font-display;
217
217
  font-family: 'IBM Plex Serif';
218
218
  font-style: italic;
219
+ font-weight: 600;
219
220
  src: local('IBM Plex Serif SemiBold Italic'),
220
221
  local('IBMPlexSerif-SemiBoldItalic'),
221
222
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2)
222
223
  format('woff2');
223
- font-display: $carbon--font-display;
224
224
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
225
225
  }
226
226
  /* latin-ext */
227
227
  @font-face {
228
- font-weight: 600;
228
+ font-display: $carbon--font-display;
229
229
  font-family: 'IBM Plex Serif';
230
230
  font-style: italic;
231
+ font-weight: 600;
231
232
  src: local('IBM Plex Serif SemiBold Italic'),
232
233
  local('IBMPlexSerif-SemiBoldItalic'),
233
234
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2)
234
235
  format('woff2');
235
- font-display: $carbon--font-display;
236
236
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
237
237
  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
238
238
  }
239
239
  /* latin */
240
240
  @font-face {
241
- font-weight: 600;
241
+ font-display: $carbon--font-display;
242
242
  font-family: 'IBM Plex Serif';
243
243
  font-style: italic;
244
+ font-weight: 600;
244
245
  src: local('IBM Plex Serif SemiBold Italic'),
245
246
  local('IBMPlexSerif-SemiBoldItalic'),
246
247
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2)
247
248
  format('woff2');
248
- font-display: $carbon--font-display;
249
249
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
250
250
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
251
251
  U+2215, U+FEFF, U+FFFD;
252
252
  }
253
253
  /* cyrillic-ext */
254
254
  @font-face {
255
- font-weight: 300;
255
+ font-display: $carbon--font-display;
256
256
  font-family: 'IBM Plex Serif';
257
257
  font-style: normal;
258
+ font-weight: 300;
258
259
  src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
259
260
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2)
260
261
  format('woff2');
261
- font-display: $carbon--font-display;
262
262
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
263
263
  U+FE2E-FE2F;
264
264
  }
265
265
  /* cyrillic */
266
266
  @font-face {
267
- font-weight: 300;
267
+ font-display: $carbon--font-display;
268
268
  font-family: 'IBM Plex Serif';
269
269
  font-style: normal;
270
+ font-weight: 300;
270
271
  src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
271
272
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2)
272
273
  format('woff2');
273
- font-display: $carbon--font-display;
274
274
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
275
275
  }
276
276
  /* vietnamese */
277
277
  @font-face {
278
- font-weight: 300;
278
+ font-display: $carbon--font-display;
279
279
  font-family: 'IBM Plex Serif';
280
280
  font-style: normal;
281
+ font-weight: 300;
281
282
  src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
282
283
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2)
283
284
  format('woff2');
284
- font-display: $carbon--font-display;
285
285
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
286
286
  }
287
287
  /* latin-ext */
288
288
  @font-face {
289
- font-weight: 300;
289
+ font-display: $carbon--font-display;
290
290
  font-family: 'IBM Plex Serif';
291
291
  font-style: normal;
292
+ font-weight: 300;
292
293
  src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
293
294
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2)
294
295
  format('woff2');
295
- font-display: $carbon--font-display;
296
296
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
297
297
  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
298
298
  }
299
299
  /* latin */
300
300
  @font-face {
301
- font-weight: 300;
301
+ font-display: $carbon--font-display;
302
302
  font-family: 'IBM Plex Serif';
303
303
  font-style: normal;
304
+ font-weight: 300;
304
305
  src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
305
306
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2)
306
307
  format('woff2');
307
- font-display: $carbon--font-display;
308
308
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
309
309
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
310
310
  U+2215, U+FEFF, U+FFFD;
311
311
  }
312
312
  /* cyrillic-ext */
313
313
  @font-face {
314
- font-weight: 400;
314
+ font-display: $carbon--font-display;
315
315
  font-family: 'IBM Plex Serif';
316
316
  font-style: normal;
317
+ font-weight: 400;
317
318
  src: local('IBM Plex Serif'), local('IBMPlexSerif'),
318
319
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2)
319
320
  format('woff2');
320
- font-display: $carbon--font-display;
321
321
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
322
322
  U+FE2E-FE2F;
323
323
  }
324
324
  /* cyrillic */
325
325
  @font-face {
326
- font-weight: 400;
326
+ font-display: $carbon--font-display;
327
327
  font-family: 'IBM Plex Serif';
328
328
  font-style: normal;
329
+ font-weight: 400;
329
330
  src: local('IBM Plex Serif'), local('IBMPlexSerif'),
330
331
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2)
331
332
  format('woff2');
332
- font-display: $carbon--font-display;
333
333
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
334
334
  }
335
335
  /* vietnamese */
336
336
  @font-face {
337
- font-weight: 400;
337
+ font-display: $carbon--font-display;
338
338
  font-family: 'IBM Plex Serif';
339
339
  font-style: normal;
340
+ font-weight: 400;
340
341
  src: local('IBM Plex Serif'), local('IBMPlexSerif'),
341
342
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2)
342
343
  format('woff2');
343
- font-display: $carbon--font-display;
344
344
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
345
345
  }
346
346
  /* latin-ext */
347
347
  @font-face {
348
- font-weight: 400;
348
+ font-display: $carbon--font-display;
349
349
  font-family: 'IBM Plex Serif';
350
350
  font-style: normal;
351
+ font-weight: 400;
351
352
  src: local('IBM Plex Serif'), local('IBMPlexSerif'),
352
353
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2)
353
354
  format('woff2');
354
- font-display: $carbon--font-display;
355
355
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
356
356
  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
357
357
  }
358
358
  /* latin */
359
359
  @font-face {
360
- font-weight: 400;
360
+ font-display: $carbon--font-display;
361
361
  font-family: 'IBM Plex Serif';
362
362
  font-style: normal;
363
+ font-weight: 400;
363
364
  src: local('IBM Plex Serif'), local('IBMPlexSerif'),
364
365
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2)
365
366
  format('woff2');
366
- font-display: $carbon--font-display;
367
367
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
368
368
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
369
369
  U+2215, U+FEFF, U+FFFD;
370
370
  }
371
371
  /* cyrillic-ext */
372
372
  @font-face {
373
- font-weight: 600;
373
+ font-display: $carbon--font-display;
374
374
  font-family: 'IBM Plex Serif';
375
375
  font-style: normal;
376
+ font-weight: 600;
376
377
  src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
377
378
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2)
378
379
  format('woff2');
379
- font-display: $carbon--font-display;
380
380
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
381
381
  U+FE2E-FE2F;
382
382
  }
383
383
  /* cyrillic */
384
384
  @font-face {
385
- font-weight: 600;
385
+ font-display: $carbon--font-display;
386
386
  font-family: 'IBM Plex Serif';
387
387
  font-style: normal;
388
+ font-weight: 600;
388
389
  src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
389
390
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2)
390
391
  format('woff2');
391
- font-display: $carbon--font-display;
392
392
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
393
393
  }
394
394
  /* vietnamese */
395
395
  @font-face {
396
- font-weight: 600;
396
+ font-display: $carbon--font-display;
397
397
  font-family: 'IBM Plex Serif';
398
398
  font-style: normal;
399
+ font-weight: 600;
399
400
  src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
400
401
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2)
401
402
  format('woff2');
402
- font-display: $carbon--font-display;
403
403
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
404
404
  }
405
405
  /* latin-ext */
406
406
  @font-face {
407
- font-weight: 600;
407
+ font-display: $carbon--font-display;
408
408
  font-family: 'IBM Plex Serif';
409
409
  font-style: normal;
410
+ font-weight: 600;
410
411
  src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
411
412
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2)
412
413
  format('woff2');
413
- font-display: $carbon--font-display;
414
414
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
415
415
  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
416
416
  }
417
417
  /* latin */
418
418
  @font-face {
419
- font-weight: 600;
419
+ font-display: $carbon--font-display;
420
420
  font-family: 'IBM Plex Serif';
421
421
  font-style: normal;
422
+ font-weight: 600;
422
423
  src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
423
424
  url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2)
424
425
  format('woff2');
425
- font-display: $carbon--font-display;
426
426
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
427
427
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
428
428
  U+2215, U+FEFF, U+FFFD;
package/scss/modules/_reset.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  /// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
17
17
  /// @access public
18
18
  /// @group @carbon/type
19
- @mixin type-reset(
19
+ @mixin reset(
20
20
  // TODO: remove in next major release. This has been replaced with 100%
21
21
  $base-font-size: layout.$base-font-size,
22
22
  $body-font-family: font-family('sans'),
@@ -30,9 +30,9 @@
30
30
  @include font-weight('regular');
31
31
 
32
32
  font-family: $body-font-family;
33
- text-rendering: optimizeLegibility;
34
- -webkit-font-smoothing: antialiased;
35
33
  -moz-osx-font-smoothing: grayscale;
34
+ -webkit-font-smoothing: antialiased;
35
+ text-rendering: optimizeLegibility;
36
36
  }
37
37
 
38
38
  code {
package/src/__tests__/__snapshots__/styles-test.js.snap CHANGED
@@ -35,6 +35,13 @@ line-height: 1.34;
35
35
  letter-spacing: 0.32px;"
36
36
  `;
37
37
 
38
+ exports[`styles caption02 should be printable 1`] = `
39
+ "font-size: 0.875rem;
40
+ font-weight: 400;
41
+ line-height: 1.29;
42
+ letter-spacing: 0.32px;"
43
+ `;
44
+
38
45
  exports[`styles code01 should be printable 1`] = `
39
46
  "font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
40
47
  font-size: 0.75rem;
@@ -148,6 +155,12 @@ line-height: 1.34;
148
155
  letter-spacing: 0.32px;"
149
156
  `;
150
157
 
158
+ exports[`styles helperText02 should be printable 1`] = `
159
+ "font-size: 0.875rem;
160
+ line-height: 1.29;
161
+ letter-spacing: 0.32px;"
162
+ `;
163
+
151
164
  exports[`styles label01 should be printable 1`] = `
152
165
  "font-size: 0.75rem;
153
166
  font-weight: 400;
@@ -155,6 +168,13 @@ line-height: 1.34;
155
168
  letter-spacing: 0.32px;"
156
169
  `;
157
170
 
171
+ exports[`styles label02 should be printable 1`] = `
172
+ "font-size: 0.875rem;
173
+ font-weight: 400;
174
+ line-height: 1.29;
175
+ letter-spacing: 0.32px;"
176
+ `;
177
+
158
178
  exports[`styles productiveHeading01 should be printable 1`] = `
159
179
  "font-size: 0.875rem;
160
180
  font-weight: 600;
package/src/__tests__/exports-test.js CHANGED
@@ -25,8 +25,11 @@ describe('type', () => {
25
25
  "unstable_tokens",
26
26
  "styles",
27
27
  "caption01",
28
+ "caption02",
28
29
  "label01",
30
+ "label02",
29
31
  "helperText01",
32
+ "helperText02",
30
33
  "bodyShort01",
31
34
  "bodyLong01",
32
35
  "bodyShort02",
package/src/styles.js CHANGED
@@ -17,6 +17,13 @@ export const caption01 = {
17
17
  letterSpacing: px(0.32),
18
18
  };
19
19
 
20
+ export const caption02 = {
21
+ fontSize: rem(scale[1]),
22
+ fontWeight: fontWeights.regular,
23
+ lineHeight: 1.29,
24
+ letterSpacing: px(0.32),
25
+ };
26
+
20
27
  export const label01 = {
21
28
  fontSize: rem(scale[0]),
22
29
  fontWeight: fontWeights.regular,
@@ -24,12 +31,25 @@ export const label01 = {
24
31
  letterSpacing: px(0.32),
25
32
  };
26
33
 
34
+ export const label02 = {
35
+ fontSize: rem(scale[1]),
36
+ fontWeight: fontWeights.regular,
37
+ lineHeight: 1.29,
38
+ letterSpacing: px(0.32),
39
+ };
40
+
27
41
  export const helperText01 = {
28
42
  fontSize: rem(scale[0]),
29
43
  lineHeight: 1.34,
30
44
  letterSpacing: px(0.32),
31
45
  };
32
46
 
47
+ export const helperText02 = {
48
+ fontSize: rem(scale[1]),
49
+ lineHeight: 1.29,
50
+ letterSpacing: px(0.32),
51
+ };
52
+
33
53
  export const bodyShort01 = {
34
54
  fontSize: rem(scale[1]),
35
55
  fontWeight: fontWeights.regular,
package/src/tokens.js CHANGED
@@ -7,8 +7,11 @@
7
7
 
8
8
  // Unstable tokens
9
9
  export const caption01 = 'caption01';
10
+ export const caption02 = 'caption02';
10
11
  export const label01 = 'label01';
12
+ export const label02 = 'label02';
11
13
  export const helperText01 = 'helperText01';
14
+ export const helperText02 = 'helperText02';
12
15
  export const bodyShort01 = 'bodyShort01';
13
16
  export const bodyLong01 = 'bodyLong01';
14
17
  export const bodyShort02 = 'bodyShort02';
@@ -40,8 +43,11 @@ export const display04 = 'display04';
40
43
 
41
44
  export const unstable_tokens = [
42
45
  caption01,
46
+ caption02,
43
47
  label01,
48
+ label02,
44
49
  helperText01,
50
+ helperText02,
45
51
  bodyShort01,
46
52
  bodyLong01,
47
53
  bodyShort02,