Skip to content

Commit eb88a24

Browse files
bradlcbradlc
committed
Add initial 2xl size and h1 styles
1 parent e94f16a commit eb88a24

File tree

3 files changed

+179
-14
lines changed

3 files changed

+179
-14
lines changed

‎docs/pages/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default () => {
88
return (
99
<Layout meta={{ title: 'Tailwind CSS Typography' }}>
1010
<div className="fixed top-0 left-0 flex flex-col ml-3">
11-
{['default', 'sm', 'lg', 'xl'].map((s) => (
11+
{['sm', 'default', 'lg', 'xl', '2xl'].map((s) => (
1212
<button
1313
key={s}
1414
type="button"

‎src/index.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const plugin = require('tailwindcss/plugin')
22
const merge = require('lodash/merge')
33
const styles = require('./styles')
4+
// const union = require('lodash/union')
45

56
const computed = {
67
// bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
@@ -18,21 +19,24 @@ function configToCss(config) {
1819
}
1920

2021
module.exports = plugin.withOptions(
21-
({ modifiers = ['default', 'sm', 'lg', 'xl'] } = {}) => {
22+
({ modifiers = ['default', 'sm', 'lg', 'xl', '2xl'] } = {}) => {
2223
return function ({ addComponents, theme, variants }) {
2324
const config = theme('typography', {})
2425

25-
// addComponents(
26-
// union(
27-
// ['default', 'sm', 'lg', 'xl'].filter(modifiers.includes),
26+
// addComponents({
27+
// [`@variants ${variants('typography').join(', ')}`]: union(
28+
// ['default', 'sm', 'lg', 'xl', '2xl'].filter((x) =>
29+
// modifiers.includes(x)
30+
// ),
2831
// Object.keys(config)
2932
// ).map((modifier) => ({
3033
// [`.prose${modifier === 'default' ? '' : `-${modifier}`}`]: merge(
31-
// styles.modifiers[modifier] || {},
34+
// modifier === 'default' ? styles.shared : {},
35+
// styles.modifiers[modifier] ? styles.modifiers[modifier].css : {},
3236
// configToCss(config[modifier] || {})
3337
// ),
34-
// }))
35-
// )
38+
// })),
39+
// })
3640

3741
addComponents({
3842
[`@variants ${variants('typography').join(', ')}`]: [
@@ -68,9 +72,17 @@ module.exports = plugin.withOptions(
6872
configToCss(config.xl || {})
6973
),
7074
}),
75+
...(!modifiers.includes('2xl')
76+
? {}
77+
: {
78+
'.prose-2xl': merge(
79+
styles.modifiers['2xl'].css,
80+
configToCss(config['2xl'] || {})
81+
),
82+
}),
7183
},
7284
...Object.keys(config)
73-
.filter((x) => !['default', 'sm', 'lg', 'xl'].includes(x))
85+
.filter((x) => !['default', 'sm', 'lg', 'xl', '2xl'].includes(x))
7486
.map((modifier) => ({
7587
[`.prose-${modifier}`]: configToCss(config[modifier]),
7688
})),

‎src/styles.js

Lines changed: 158 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ module.exports = {
4545
left: '0',
4646
backgroundColor: defaultTheme.colors.gray[500],
4747
},
48+
h1: {
49+
color: defaultTheme.colors.gray[900],
50+
fontWeight: '800',
51+
},
4852
h2: {
4953
color: defaultTheme.colors.gray[900],
5054
fontWeight: '700',
@@ -89,6 +93,12 @@ module.exports = {
8993
marginTop: em(20, 16),
9094
marginBottom: em(20, 16),
9195
},
96+
h1: {
97+
fontSize: em(36, 16),
98+
marginTop: '0',
99+
marginBottom: em(32, 36),
100+
lineHeight: round(40 / 36),
101+
},
92102
h2: {
93103
fontSize: em(24, 16),
94104
marginTop: em(48, 24),
@@ -155,8 +165,8 @@ module.exports = {
155165
},
156166
'ul > li::before': {
157167
// TODO: ask Steve about sizing
158-
height: em(2, 16),
159168
width: em(12, 16),
169+
height: em(2, 16),
160170
top: 'calc(0.875em - 0.0625em)', // TODO: track line-height
161171
},
162172
'> ul > li p': {
@@ -198,6 +208,12 @@ module.exports = {
198208
marginTop: em(16, 14),
199209
marginBottom: em(16, 14),
200210
},
211+
h1: {
212+
fontSize: em(30, 14),
213+
marginTop: '0',
214+
marginBottom: em(24, 30),
215+
lineHeight: round(36 / 30),
216+
},
201217
h2: {
202218
fontSize: em(20, 14),
203219
marginTop: em(40, 24),
@@ -307,6 +323,12 @@ module.exports = {
307323
marginTop: em(24, 18),
308324
marginBottom: em(24, 18),
309325
},
326+
h1: {
327+
fontSize: em(48, 18),
328+
marginTop: '0',
329+
marginBottom: em(40, 48),
330+
lineHeight: round(48 / 48),
331+
},
310332
h2: {
311333
fontSize: em(30, 18),
312334
marginTop: em(56, 30),
@@ -369,8 +391,8 @@ module.exports = {
369391
paddingLeft: em(32, 18),
370392
},
371393
'ul > li::before': {
372-
height: '0.111em',
373-
width: '0.666em',
394+
width: em(12, 18),
395+
height: em(2, 18),
374396
top: 'calc(0.888em - 0.0555em)',
375397
},
376398
'> ul > li p': {
@@ -412,6 +434,12 @@ module.exports = {
412434
marginTop: em(24, 20),
413435
marginBottom: em(24, 20),
414436
},
437+
h1: {
438+
fontSize: em(56, 20),
439+
marginTop: '0',
440+
marginBottom: em(48, 56),
441+
lineHeight: round(56 / 56),
442+
},
415443
h2: {
416444
fontSize: em(36, 20),
417445
marginTop: em(56, 36),
@@ -488,8 +516,8 @@ module.exports = {
488516
paddingLeft: em(40, 20),
489517
},
490518
'ul > li::before': {
491-
height: '0.111em',
492-
width: '0.666em',
519+
width: em(12, 20),
520+
height: em(2, 20),
493521
top: 'calc(0.888em - 0.0555em)',
494522
},
495523
'> ul > li p': {
@@ -523,5 +551,130 @@ module.exports = {
523551
},
524552
},
525553
},
554+
'2xl': {
555+
css: {
556+
fontSize: rem(24),
557+
lineHeight: round(40 / 24),
558+
p: {
559+
marginTop: em(32, 24),
560+
marginBottom: em(32, 24),
561+
},
562+
h1: {
563+
fontSize: em(64, 24),
564+
marginTop: '0',
565+
marginBottom: em(56, 64),
566+
lineHeight: round(64 / 64),
567+
},
568+
h2: {
569+
fontSize: em(48, 24),
570+
marginTop: em(64, 48),
571+
marginBottom: em(40, 48),
572+
lineHeight: round(40 / 48),
573+
},
574+
h3: {
575+
fontSize: em(36, 24),
576+
marginTop: em(56, 36),
577+
marginBottom: em(24, 36),
578+
lineHeight: round(40 / 36),
579+
},
580+
h4: {}, // TODO
581+
img: {
582+
marginTop: em(48, 24),
583+
marginBottom: em(48, 24),
584+
},
585+
video: {
586+
marginTop: em(48, 24),
587+
marginBottom: em(48, 24),
588+
},
589+
figure: {
590+
marginTop: em(48, 24),
591+
marginBottom: em(48, 24),
592+
},
593+
code: {
594+
fontSize: em(20, 24),
595+
lineHeight: round(40 / 20),
596+
borderRadius: rem(6),
597+
paddingTop: em(8, 20),
598+
paddingRight: em(10, 20),
599+
paddingBottom: em(8, 20),
600+
paddingLeft: em(10, 20),
601+
},
602+
'h2 code': {
603+
lineHeight: round(40 / 32.4),
604+
paddingTop: em(6, 36),
605+
paddingRight: em(8, 36),
606+
paddingBottom: em(6, 36),
607+
paddingLeft: em(8, 36),
608+
},
609+
'h3 code': {
610+
lineHeight: round(40 / 27),
611+
paddingTop: em(4, 30),
612+
paddingRight: em(6, 30),
613+
paddingBottom: em(4, 30),
614+
paddingLeft: em(6, 30),
615+
},
616+
pre: {
617+
fontSize: em(20, 24),
618+
lineHeight: round(36 / 20),
619+
borderRadius: rem(6),
620+
paddingTop: em(32, 20),
621+
paddingRight: em(32, 20),
622+
paddingBottom: em(32, 20),
623+
paddingLeft: em(32, 20),
624+
},
625+
ol: {
626+
marginTop: em(32, 24),
627+
marginBottom: em(32, 24),
628+
},
629+
ul: {
630+
marginTop: em(32, 24),
631+
marginBottom: em(32, 24),
632+
},
633+
li: {
634+
marginTop: em(16, 24),
635+
marginBottom: em(16, 24),
636+
},
637+
'ol > li': {
638+
paddingLeft: em(48, 24),
639+
},
640+
'ul > li': {
641+
paddingLeft: em(48, 24),
642+
},
643+
'ul > li::before': {
644+
width: em(12, 24),
645+
height: em(2, 24),
646+
top: 'calc(0.888em - 0.0555em)',
647+
},
648+
'> ul > li p': {
649+
marginTop: em(20, 24),
650+
marginBottom: em(20, 24),
651+
},
652+
'> ul > li > *:first-child': {
653+
marginTop: em(32, 24),
654+
},
655+
'> ul > li > *:last-child': {
656+
marginBottom: em(32, 24),
657+
},
658+
'> ol > li > *:first-child': {
659+
marginTop: em(32, 24),
660+
},
661+
'> ol > li > *:last-child': {
662+
marginBottom: em(32, 24),
663+
},
664+
'ul ul, ul ol, ol ul, ol ol': {
665+
marginTop: em(20, 24),
666+
marginBottom: em(20, 24),
667+
},
668+
'h2 + *': {
669+
marginTop: '0',
670+
},
671+
'h3 + *': {
672+
marginTop: '0',
673+
},
674+
'h4 + *': {
675+
marginTop: '0',
676+
},
677+
},
678+
},
526679
},
527680
}

0 commit comments

Comments
 (0)