Skip to content

Commit bf63bb9

Browse files
btkostnerbtkostner
committed
update font sizes to rem for non default accessibility
1 parent 3263496 commit bf63bb9

File tree

1 file changed

+73
-61
lines changed

1 file changed

+73
-61
lines changed

‎tailwind.config.js

+73-61
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
const colors = require('tailwindcss/colors')
22

3+
const round = num =>
4+
num
5+
.toFixed(7)
6+
.replace(/(\.[0-9]+?)0+$/, '$1')
7+
.replace(/\.0$/, '')
8+
const rem = px => `${round(px / 16)}rem`
9+
310
module.exports = {
411
plugins: [
512
require('@tailwindcss/line-clamp'),
@@ -50,7 +57,7 @@ module.exports = {
5057
300: '#9f9893',
5158
400: '#877f7a',
5259
500: '#6f6762',
53-
600: '#57504c',
60+
600: '#574f4a',
5461
700: '#3e3936',
5562
800: '#262220',
5663
900: '#0d0c0b'
@@ -164,65 +171,70 @@ module.exports = {
164171

165172
extend: {
166173
typography: theme => ({
167-
DEFAULT: { // prose
174+
DEFAULT: {
168175
css: {
176+
color: theme('colors.warmGray.600'),
177+
fontSize: rem(16),
178+
lineHeight: rem(28),
169179
maxWidth: null,
170180

171181
a: {
172182
color: theme('colors.orange.700')
173183
},
174184

175185
p: {
176-
color: '#574F4A',
177-
fontFamily: 'Fira Sans',
178-
lineHeight: '28px',
179-
fontSize: '16px'
186+
color: theme('colors.warmGray.600'),
187+
fontFamily: theme('fontFamily.sans').join(','),
188+
fontSize: rem(16),
189+
lineHeight: rem(28)
180190
},
181191

182192
h1: {
183-
color: '#574F4A',
184-
fontFamily: 'Fira Sans',
193+
color: theme('colors.warmGray.600'),
194+
fontFamily: theme('fontFamily.sans').join(','),
185195
fontWeight: theme('fontWeight.extralight'),
186-
fontSize: '48px',
187-
lineHeight: '54px'
196+
fontSize: rem(36),
197+
lineHeight: rem(42)
188198
},
189199

190200
h2: {
191-
color: '#574F4A',
192-
fontFamily: 'Roboto Slab, serif, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
201+
color: theme('colors.warmGray.600'),
202+
fontFamily: theme('fontFamily.serif').join(','),
193203
fontWeight: theme('fontWeight.normal'),
194-
fontSize: '32px',
195-
lineHeight: '36px'
204+
fontSize: rem(32),
205+
lineHeight: rem(36)
196206
},
197207

198208
h3: {
199-
color: '#574F4A',
200-
fontFamily: 'Roboto Slab, serif, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
209+
color: theme('colors.warmGray.600'),
210+
fontFamily: theme('fontFamily.serif').join(','),
201211
fontWeight: theme('fontWeight.normal'),
202-
fontSize: '24px',
203-
lineHeight: '32px'
212+
fontSize: rem(24),
213+
lineHeight: rem(32)
204214
},
205215

206216
h4: {
207-
color: '#574F4A',
208-
fontFamily: 'Roboto Slab, serif, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
217+
color: theme('colors.warmGray.600'),
218+
fontFamily: theme('fontFamily.serif').join(','),
209219
fontWeight: theme('fontWeight.bold'),
210-
fontSize: '20px',
211-
lineHeight: '24px'
220+
fontSize: rem(20),
221+
lineHeight: rem(24)
212222
},
213223

214224
h5: {
215-
fontFamily: 'Roboto Slab, serif, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
225+
color: theme('colors.warmGray.600'),
226+
fontFamily: theme('fontFamily.serif').join(','),
216227
fontWeight: theme('fontWeight.bold'),
217-
fontSize: '18px',
218-
lineHeight: '20px'
228+
fontSize: rem(18),
229+
lineHeight: rem(20)
219230
},
220231

221232
h6: {
222-
fontFamily: 'Roboto Slab, serif, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
233+
color: theme('colors.warmGray.600'),
234+
fontFamily: theme('fontFamily.serif').join(','),
223235
fontWeight: theme('fontWeight.bold'),
224-
fontSize: '16px',
225-
lineHeight: '20px'
236+
fontSize: rem(16),
237+
lineHeight: rem(20)
226238
},
227239

228240
'blockquote p:first-of-type::before': {
@@ -249,7 +261,7 @@ module.exports = {
249261
backgroundColor: theme('colors.gray.800'),
250262
borderRadius: theme('borderRadius.DEFAULT'),
251263
color: theme('colors.gray.100'),
252-
fontWeight: '400',
264+
fontWeight: theme('fontWeight.normal'),
253265
padding: theme('spacing.2')
254266
},
255267

@@ -275,81 +287,81 @@ module.exports = {
275287
}
276288
},
277289

278-
sm: { // // prose-sm
290+
sm: {
279291
css: {
280-
fontSize: '18px',
281-
lineHeight: '32px',
292+
fontSize: rem(18),
293+
lineHeight: rem(32),
282294

283295
p: {
284-
fontSize: '18px',
285-
lineHeight: '32px'
296+
fontSize: rem(18),
297+
lineHeight: rem(32)
286298
},
287299

288300
h1: {
289-
fontSize: '42px',
290-
lineHeight: '48px'
301+
fontSize: rem(42),
302+
lineHeight: rem(48)
291303
},
292304

293305
h2: {
294-
fontSize: '36px',
295-
lineHeight: '42px'
306+
fontSize: rem(36),
307+
lineHeight: rem(42)
296308
},
297309

298310
h3: {
299-
fontSize: '28px',
300-
lineHeight: '36px'
311+
fontSize: rem(28),
312+
lineHeight: rem(36)
301313
},
302314

303315
h4: {
304-
fontSize: '24px',
305-
lineHeight: '28px'
316+
fontSize: rem(24),
317+
lineHeight: rem(28)
306318
},
307319

308320
h5: {
309-
fontSize: '20px',
310-
lineHeight: '24px'
321+
fontSize: rem(20),
322+
lineHeight: rem(24)
311323
}
312324
}
313325
},
314326

315-
xl: { // prose-xl
327+
xl: {
316328
css: {
317-
fontSize: '20px',
318-
lineHeight: '36px',
329+
fontSize: rem(20),
330+
lineHeight: rem(36),
319331

320332
p: {
321-
fontSize: '20px',
322-
lineHeight: '36px'
333+
fontSize: rem(20),
334+
lineHeight: rem(36)
323335
},
324336

325337
h1: {
326-
fontSize: '48px',
327-
lineHeight: '54px'
338+
fontSize: rem(48),
339+
lineHeight: rem(54)
328340
},
329341

330342
h2: {
331-
fontSize: '40px',
332-
lineHeight: '48px'
343+
fontSize: rem(40),
344+
lineHeight: rem(48)
333345
},
334346

335347
h3: {
336-
fontSize: '32px',
337-
lineHeight: '40px'
348+
fontSize: rem(32),
349+
lineHeight: rem(40)
338350
},
339351

340352
h4: {
341-
fontSize: '28px',
342-
lineHeight: '32px'
353+
fontSize: rem(28),
354+
lineHeight: rem(32)
343355
},
344356

345357
h5: {
346-
fontSize: '24px',
347-
lineHeight: '28px'
358+
fontSize: rem(24),
359+
lineHeight: rem(28)
348360
},
349361

350362
h6: {
351-
fontSize: '20px',
352-
lineHeight: '24px'
363+
fontSize: rem(20),
364+
lineHeight: rem(24)
353365
}
354366
}
355367
}

0 commit comments

Comments
 (0)