konnosDashboard
typography.config.js232 lines · main
1/**
2 * Typography customization for @tailwindcss/typography.
3 *
4 * Loaded via `@config './typography.config.js'` in tailwind.config.css.
5 * Only contains theme.extend.typography — everything else (colors, animations,
6 * variants, utilities, base) lives in CSS under packages/config/css/.
7 *
8 * The typography plugin reads theme.typography to generate .prose, .prose-toc,
9 * and .prose-docs classes (and to make them @apply-able). See:
10 * https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css
11 */
12
13module.exports = {
14 theme: {
15 extend: {
16 typography: {
17 DEFAULT: {
18 css: {
19 // Removal of backticks in code blocks.
20 // https://github.com/tailwindlabs/tailwindcss-typography/issues/135
21 'code::before': { content: '""' },
22 'code::after': { content: '""' },
23 '--tw-prose-body': 'hsl(var(--foreground-light))',
24 '--tw-prose-headings': 'hsl(var(--foreground-default))',
25 '--tw-prose-lead': 'hsl(var(--foreground-light))',
26 '--tw-prose-links': 'hsl(var(--foreground-light))',
27 '--tw-prose-bold': 'hsl(var(--foreground-light))',
28 '--tw-prose-counters': 'hsl(var(--foreground-light))',
29 '--tw-prose-bullets': 'hsl(var(--foreground-muted))',
30 '--tw-prose-hr': 'hsl(var(--background-surface-300))',
31 '--tw-prose-quotes': 'hsl(var(--foreground-light))',
32 '--tw-prose-quote-borders': 'hsl(var(--background-surface-300))',
33 '--tw-prose-captions': 'hsl(var(--border-strong))',
34 '--tw-prose-code': 'hsl(var(--foreground-default))',
35 '--tw-prose-pre-code': 'hsl(var(--foreground-muted))',
36 '--tw-prose-pre-bg': 'hsl(var(--background-surface-200))',
37 '--tw-prose-th-borders': 'hsl(var(--background-surface-300))',
38 '--tw-prose-td-borders': 'hsl(var(--background-default))',
39 '--tw-prose-invert-body': 'hsl(var(--background-default))',
40 '--tw-prose-invert-headings': 'white',
41 '--tw-prose-invert-lead': 'hsl(var(--background-surface-300))',
42 '--tw-prose-invert-links': 'white',
43 '--tw-prose-invert-bold': 'white',
44 '--tw-prose-invert-counters': 'hsl(var(--background-surface-200))',
45 '--tw-prose-invert-bullets': 'hsl(var(--background-selection))',
46 '--tw-prose-invert-hr': 'hsl(var(--border-strong))',
47 '--tw-prose-invert-quotes': 'hsl(var(--background-alternative-default))',
48 '--tw-prose-invert-quote-borders': 'hsl(var(--border-strong))',
49 '--tw-prose-invert-captions': 'hsl(var(--background-surface-200))',
50 h4: { fontSize: '1.15em' },
51 // h5 isn't included in --tw-prose-headings.
52 h5: { color: 'var(--color-scale-1200)' },
53 'h1, h2, h3, h4, h5, h6': { fontWeight: '400' },
54 'article h2, article h3, article h4, article h5, article h6': {
55 marginTop: '2em',
56 marginBottom: '1em',
57 },
58 p: { fontWeight: '400' },
59 strong: { fontWeight: '500' },
60 pre: {
61 background: 'none',
62 padding: 0,
63 marginBottom: '32px',
64 },
65 ul: {
66 listStyleType: 'none',
67 paddingLeft: '1rem',
68 },
69 'ul li': { position: 'relative' },
70 'ul li::before': {
71 position: 'absolute',
72 top: '0.75rem',
73 left: '-1rem',
74 height: '0.125rem',
75 width: '0.5rem',
76 borderRadius: '0.25rem',
77 backgroundColor: 'hsl(var(--border-strong))',
78 content: '""',
79 },
80 ol: {
81 paddingLeft: '1rem',
82 counterReset: 'item',
83 listStyleType: 'none',
84 marginBottom: '3rem',
85 },
86 'ol>li': {
87 display: 'block',
88 position: 'relative',
89 paddingLeft: '1rem',
90 },
91 'ol>li::before': {
92 position: 'absolute',
93 top: '0.25rem',
94 left: '-1rem',
95 height: '1.2rem',
96 width: '1.2rem',
97 borderRadius: '0.25rem',
98 backgroundColor: 'hsl(var(--background-surface-100))',
99 border: '1px solid hsl(var(--border-default))',
100 content: 'counter(item) " "',
101 counterIncrement: 'item',
102 fontSize: '12px',
103 color: 'hsl(var(--foreground-muted))',
104 display: 'flex',
105 alignItems: 'center',
106 justifyContent: 'center',
107 },
108 'p img': {
109 border: '1px solid hsl(var(--border-muted))',
110 borderRadius: '4px',
111 overflow: 'hidden',
112 },
113 iframe: {
114 border: '1px solid hsl(var(--border-default))',
115 borderRadius: 'var(--radius-lg)',
116 },
117 td: {
118 borderBottom: '1px solid hsl(var(--background-surface-200))',
119 },
120 code: {
121 fontWeight: '400',
122 padding: '0.2rem 0.4rem',
123 backgroundColor: 'hsl(var(--background-surface-200))',
124 border: '1px solid hsl(var(--background-surface-300))',
125 borderRadius: 'var(--radius-lg)',
126 },
127 a: {
128 position: 'relative',
129 transition: 'all 0.18s ease',
130 paddingBottom: '2px',
131 fontWeight: '400',
132 opacity: 1,
133 color: 'hsl(var(--foreground-default))',
134 textDecorationLine: 'underline',
135 textDecorationColor: 'hsl(var(--foreground-muted))',
136 textDecorationThickness: '1px',
137 textUnderlineOffset: '2px',
138 },
139 'a:hover': {
140 textDecorationColor: 'hsl(var(--foreground-default))',
141 },
142 figcaption: {
143 color: 'hsl(var(--foreground-muted))',
144 fontFamily: 'Office Code Pro, monospace',
145 },
146 'figure.quote-figure p:first-child': {
147 marginTop: '0 !important',
148 },
149 'figure.quote-figure p:last-child': {
150 marginBottom: '0 !important',
151 },
152 figure: { margin: '3rem 0' },
153 'figure img': { margin: '0 !important' },
154 },
155 },
156
157 toc: {
158 css: {
159 ul: {
160 'list-style-type': 'none',
161 'padding-left': 0,
162 margin: 0,
163 li: { 'padding-left': 0 },
164 a: {
165 display: 'block',
166 marginBottom: '0.4rem',
167 'text-decoration': 'none',
168 fontSize: '0.8rem',
169 fontWeight: '200',
170 color: 'hsl(var(--foreground-light))',
171 '&:hover': {
172 color: 'hsl(var(--foreground-default))',
173 },
174 'font-weight': '400',
175 },
176 ul: {
177 'list-style-type': 'none',
178 li: {
179 marginTop: '0.2rem',
180 marginBottom: '0.2rem',
181 'padding-left': '0 !important',
182 'margin-left': '0.5rem',
183 },
184 a: {
185 fontWeight: '200',
186 color: 'hsl(var(--foreground-lighter))',
187 '&:hover': {
188 color: 'hsl(var(--foreground-default))',
189 },
190 },
191 },
192 },
193 },
194 },
195
196 // Used in docs and changelog content.
197 docs: {
198 css: {
199 '--tw-prose-body': 'hsl(var(--foreground-light))',
200 '--tw-prose-headings': 'hsl(var(--foreground-default))',
201 '--tw-prose-lead': 'hsl(var(--foreground-light))',
202 '--tw-prose-links': 'hsl(var(--brand-500))',
203 '--tw-prose-bold': 'hsl(var(--foreground-light))',
204 '--tw-prose-counters': 'hsl(var(--foreground-light))',
205 '--tw-prose-bullets': 'hsl(var(--foreground-muted))',
206 '--tw-prose-hr': 'hsl(var(--background-surface-300))',
207 '--tw-prose-quotes': 'hsl(var(--foreground-light))',
208 '--tw-prose-quote-borders': 'hsl(var(--background-surface-300))',
209 '--tw-prose-captions': 'hsl(var(--border-strong))',
210 '--tw-prose-code': 'hsl(var(--foreground-default))',
211 '--tw-prose-pre-code': 'hsl(var(--foreground-muted))',
212 '--tw-prose-pre-bg': 'hsl(var(--background-surface-200))',
213 '--tw-prose-th-borders': 'hsl(var(--background-surface-300))',
214 '--tw-prose-td-borders': 'hsl(var(--background-default))',
215 '--tw-prose-invert-body': 'hsl(var(--background-default))',
216 '--tw-prose-invert-headings': 'white',
217 '--tw-prose-invert-lead': 'hsl(var(--background-surface-300))',
218 '--tw-prose-invert-links': 'white',
219 '--tw-prose-invert-bold': 'white',
220 '--tw-prose-invert-counters': 'hsl(var(--background-surface-200))',
221 '--tw-prose-invert-bullets': 'hsl(var(--background-selection))',
222 '--tw-prose-invert-hr': 'hsl(var(--border-strong))',
223 '--tw-prose-invert-quotes': 'hsl(var(--background-alternative-default))',
224 '--tw-prose-invert-quote-borders': 'hsl(var(--border-strong))',
225 '--tw-prose-invert-captions': 'hsl(var(--background-surface-200))',
226 'h1, h2, h3, h4, h5': { fontWeight: '400' },
227 },
228 },
229 },
230 },
231 },
232}