-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
249 lines (245 loc) · 8.9 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
const defaultTheme = require("tailwindcss/defaultTheme");
const plugin = require('tailwindcss/plugin');
module.exports = plugin.withOptions(function (options) {
return function ({ addComponents, theme }) {
const newStyles = {
'.rich-docs': theme("richDocs")
}
addComponents(newStyles);
}
}, function (options) {
return {
theme: {
extend: {
fontFamily: {
"rd-main": ["Fira Sans", ...defaultTheme.fontFamily.sans]
},
fontSize: {
"rd-2base": "1.0625rem"
},
spacing: {
"rd-3.5": "0.875rem", // 14px
"rd-7": "1.75rem",
},
lineHeight: {
"rd-normal": "1.4375rem", // 23px
"rd-title": "1.38"
},
},
richDocs: theme => ({
"font-family": theme("fontFamily.rd-main").toString(),
"max-width": "608px",
"padding-left": defaultTheme.spacing[4],
"padding-right": defaultTheme.spacing[4],
"margin-left": "auto",
"margin-right": "auto",
"margin-top": "64px",
"margin-bottom": "64px",
"counter-reset": "counter-h2",
"h1:not(.own-style)": {
"margin-bottom": "40px",
"font-size": "23px",
"font-weight": defaultTheme.fontWeight["bold"],
"color": defaultTheme.colors.gray[900],
"line-height": theme("lineHeight.rd-title"),
},
"> ol:not(.own-style)": {
"counter-reset": "counter-1",
"font-size": defaultTheme.fontSize["base"],
"font-weight": defaultTheme.fontWeight["normal"],
"line-height": theme("lineHeight.rd-normal"),
},
"> ol a:not(.own-style)": {
"color": defaultTheme.colors.blue[700],
},
"> ol ol:not(.own-style)": {
"margin-top": defaultTheme.spacing[2],
},
"> ol li:not(.own-style)": {
"margin-top": defaultTheme.spacing[2],
},
"> ol li:not(.own-style)::before": {
"content": "counter(counter-1) '. '",
"counter-increment": "counter-1",
"color": defaultTheme.colors.gray[800],
"margin-right": "2px",
},
"> ol > li:not(.own-style)": {
"margin-bottom": theme("spacing['rd-7']"),
},
"> ol > li > ol:not(.own-style)": {
"margin-left": defaultTheme.spacing[4],
"margin-top": defaultTheme.spacing[2],
"counter-reset": "counter-2",
},
"> ol > li > ol > li:not(.own-style)::before": {
"content": "counter(counter-1) '.' counter(counter-2) ' '",
"counter-increment": "counter-2",
"color": defaultTheme.colors.gray[800],
"margin-right": "0.1875rem",
},
"> ol > li > ol > li:not(.own-style)": {
"counter-reset": "counter-3",
},
"> ol > li > ol > li > ol li:not(.own-style)::before": {
"content": "counter(counter-1) '.' counter(counter-2) '.' counter(counter-3) ' '",
"counter-increment": "counter-3",
"color": defaultTheme.colors.gray[600],
"margin-right": "0.1875rem",
},
"hr:not(.own-style)": {
"margin-left": "auto",
"margin-right": "auto",
"margin-top": "28px",
"margin-bottom": "28px",
"border-top-width": "1px",
"max-width": "7.875rem",
},
"h2:not(.own-style)": {
"font-weight": defaultTheme.fontWeight["medium"],
"line-height": theme("lineHeight.rd-normal"),
"color": defaultTheme.colors.gray[800],
"margin-top": theme("spacing['rd-7']"),
"margin-bottom": theme("spacing['rd-3.5']"),
"font-size": theme("fontSize.rd-2base"),
"counter-reset": "counter-h3",
},
"h2:not(.own-style)::before": {
"content": "counter(counter-h2) '.'",
"counter-increment": "counter-h2",
"font-weight": defaultTheme.fontWeight["normal"],
"margin-right": "2px",
},
"h2 + h3:not(.own-style)": {
"margin-top": theme("spacing.4"),
},
".iframe-parent + h2:not(.own-style)": {
"margin-top": theme("spacing.8"),
},
"img + h2:not(.own-style)": {
"margin-top": theme("spacing.8"),
},
"h3:not(.own-style)": {
"font-weight": defaultTheme.fontWeight["medium"],
"line-height": theme("lineHeight.rd-normal"),
"color": defaultTheme.colors.gray[800],
"margin-top": theme("spacing['rd-7']"),
"margin-bottom": theme("spacing['rd-3.5']"),
"font-size": theme("fontSize.rd-2base"),
"counter-reset": "counter-h4",
"margin-left": defaultTheme.spacing[4],
},
"h3:not(.own-style)::before": {
"content": "counter(counter-h2) '.' counter(counter-h3) ' '",
"counter-increment": "counter-h3",
"font-weight": defaultTheme.fontWeight["normal"],
"margin-right": "0.1875rem",
},
"h3 + h4:not(.own-style)": {
"margin-top": theme("spacing.4"),
},
".iframe-parent + h3:not(.own-style)": {
"margin-top": theme("spacing.8"),
},
"img + h3:not(.own-style)": {
"margin-top": theme("spacing.8"),
},
"h4:not(.own-style)": {
"font-weight": defaultTheme.fontWeight["medium"],
"line-height": theme("lineHeight.rd-normal"),
"color": defaultTheme.colors.gray[800],
"margin-top": theme("spacing['rd-7']"),
"margin-bottom": theme("spacing['rd-3.5']"),
"font-size": theme("fontSize.rd-2base"),
"margin-left": defaultTheme.spacing[4],
},
"h4:not(.own-style)::before": {
"content": "counter(counter-h2) '.' counter(counter-h3) '.' counter(counter-h4) ' '",
"counter-increment": "counter-h4",
"font-weight": defaultTheme.fontWeight["normal"],
"color": defaultTheme.colors.gray[600],
"margin-right": "0.1875rem",
},
".iframe-parent + h4:not(.own-style)": {
"margin-top": theme("spacing.8"),
},
"img + h4:not(.own-style)": {
"margin-top": theme("spacing.8"),
},
"p:not(.own-style)": {
"margin-bottom": theme("spacing['rd-3.5']"),
"font-size": theme("fontSize.base"),
"color": defaultTheme.colors.gray[700],
"line-height": theme("lineHeight.rd-normal"),
},
"a:not(.own-style)": {
"color": defaultTheme.colors.blue[700],
},
"> ul:not(.own-style)": {
"margin-bottom": theme("spacing['rd-3.5']"),
},
"> ul > li:not(.own-style)": {
"margin-bottom": theme("spacing[2]"),
"font-size": theme("fontSize.base"),
"color": defaultTheme.colors.gray[700],
"line-height": theme("lineHeight.rd-normal"),
"margin-left": "1em",
"list-style-position": "outside",
"list-style-type": defaultTheme.listStyleType["disc"],
},
"img:not(.own-style)": {
"max-width": "100%",
"margin-top": defaultTheme.spacing[6],
"margin-bottom": defaultTheme.spacing[6],
},
".iframe-parent:not(.own-style)": {
"position": "relative",
"height": defaultTheme.spacing[0],
"margin-top": defaultTheme.spacing[6],
"margin-bottom": defaultTheme.spacing[6],
"padding-bottom": "calc(var(--aspect-ratio-vertical, 9) / var(--aspect-ratio-horizontal, 16) * 100%)",
},
"iframe:not(.own-style)": {
"position": "absolute",
"width": "100%",
"height": "100%",
"left": "0",
"right": "0",
"top": "0",
"bottom": "0",
},
"b:not(.own-style)": {
"font-weight": defaultTheme.fontWeight["medium"],
},
"table:not(.own-style)": {
"margin-top": defaultTheme.spacing[5],
"margin-bottom": defaultTheme.spacing[5],
"width": "100%",
"font-size": defaultTheme.fontSize["base"],
"line-height": theme("lineHeight.rd-normal"),
"color": defaultTheme.colors.gray[700],
"border-color": defaultTheme.colors.gray[200],
"border-top-width": "1px",
"border-bottom-width": "1px",
"table-layout": "fixed",
},
"table tr:not(.own-style)": {
"height": defaultTheme.spacing[8],
},
"table tr:nth-child(even):not(.own-style)": {
"background-color": defaultTheme.colors.gray["100"],
},
"table th:not(.own-style)": {
"font-weight": defaultTheme.fontWeight["medium"],
"text-align": "left",
"border-bottom-width": "1px",
"border-color": defaultTheme.colors.gray[200],
},
})
},
variants: {
textColor: ["responsive", "group-hover"],
backgroundColor: ["responsive", "even", "odd"],
}
}
});