@pikacss/plugin-typography 0.0.43 → 0.0.45

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.
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.0.43",
7
+ "version": "0.0.45",
8
8
  "author": "DevilTea <ch19980814@gmail.com>",
9
9
  "license": "MIT",
10
10
  "repository": {
@@ -25,24 +25,19 @@
25
25
  "import": {
26
26
  "types": "./dist/index.d.mts",
27
27
  "default": "./dist/index.mjs"
28
- },
29
- "require": {
30
- "types": "./dist/index.d.cts",
31
- "default": "./dist/index.cjs"
32
28
  }
33
29
  }
34
30
  },
35
- "main": "dist/index.cjs",
36
31
  "module": "dist/index.mjs",
37
32
  "types": "dist/index.d.mts",
38
33
  "files": [
39
34
  "dist"
40
35
  ],
41
36
  "peerDependencies": {
42
- "@pikacss/core": "0.0.43"
37
+ "@pikacss/core": "0.0.45"
43
38
  },
44
39
  "devDependencies": {
45
- "@pikacss/core": "0.0.43"
40
+ "@pikacss/core": "0.0.45"
46
41
  },
47
42
  "scripts": {
48
43
  "build": "tsdown",
package/dist/index.cjs DELETED
@@ -1,372 +0,0 @@
1
- let _pikacss_core = require("@pikacss/core");
2
-
3
- //#region src/styles.ts
4
- const typographyVariables = {
5
- "--pk-prose-color-body": "currentColor",
6
- "--pk-prose-color-headings": "currentColor",
7
- "--pk-prose-color-lead": "currentColor",
8
- "--pk-prose-color-links": "currentColor",
9
- "--pk-prose-color-bold": "currentColor",
10
- "--pk-prose-color-counters": "currentColor",
11
- "--pk-prose-color-bullets": "currentColor",
12
- "--pk-prose-color-hr": "currentColor",
13
- "--pk-prose-color-quotes": "currentColor",
14
- "--pk-prose-color-quote-borders": "currentColor",
15
- "--pk-prose-color-captions": "currentColor",
16
- "--pk-prose-color-code": "currentColor",
17
- "--pk-prose-color-pre-code": "currentColor",
18
- "--pk-prose-color-pre-bg": "transparent",
19
- "--pk-prose-color-th-borders": "currentColor",
20
- "--pk-prose-color-td-borders": "currentColor",
21
- "--pk-prose-color-kbd": "currentColor",
22
- "--pk-prose-kbd-shadows": "currentColor"
23
- };
24
- const proseBaseStyle = (0, _pikacss_core.defineStyleDefinition)({
25
- "color": "var(--pk-prose-color-body)",
26
- "maxWidth": "65ch",
27
- "fontSize": "1rem",
28
- "lineHeight": "1.75",
29
- "$ > :first-child": { marginTop: "0" },
30
- "$ > :last-child": { marginBottom: "0" }
31
- });
32
- const proseParagraphsStyle = (0, _pikacss_core.defineStyleDefinition)({
33
- "$ p": {
34
- marginTop: "1.25em",
35
- marginBottom: "1.25em"
36
- },
37
- "$ [class~=\"lead\"]": {
38
- color: "var(--pk-prose-color-lead)",
39
- fontSize: "1.25em",
40
- lineHeight: "1.6",
41
- marginTop: "1.2em",
42
- marginBottom: "1.2em"
43
- }
44
- });
45
- const proseLinksStyle = (0, _pikacss_core.defineStyleDefinition)({
46
- "$ a": {
47
- color: "var(--pk-prose-color-links)",
48
- textDecoration: "underline",
49
- fontWeight: "500"
50
- },
51
- "$ a strong": { color: "inherit" },
52
- "$ a code": { color: "inherit" }
53
- });
54
- const proseEmphasisStyle = (0, _pikacss_core.defineStyleDefinition)({
55
- "$ strong": {
56
- color: "var(--pk-prose-color-bold)",
57
- fontWeight: "600"
58
- },
59
- "$ a strong": { color: "inherit" },
60
- "$ blockquote strong": { color: "inherit" },
61
- "$ thead th strong": { color: "inherit" },
62
- "$ em": { fontStyle: "italic" }
63
- });
64
- const proseKbdStyle = (0, _pikacss_core.defineStyleDefinition)({ "$ kbd": {
65
- color: "var(--pk-prose-color-kbd)",
66
- fontSize: "0.875em",
67
- fontWeight: "500",
68
- fontFamily: "inherit",
69
- borderRadius: "0.3125rem",
70
- paddingTop: "0.1875em",
71
- paddingRight: "0.375em",
72
- paddingBottom: "0.1875em",
73
- paddingLeft: "0.375em",
74
- boxShadow: "0 0 0 1px var(--pk-prose-kbd-shadows), 0 3px 0 var(--pk-prose-kbd-shadows)"
75
- } });
76
- const proseListsStyle = (0, _pikacss_core.defineStyleDefinition)({
77
- "$ ol": {
78
- listStyleType: "decimal",
79
- marginTop: "1.25em",
80
- marginBottom: "1.25em",
81
- paddingLeft: "1.625em"
82
- },
83
- "$ ol[type=\"A\"]": { listStyleType: "upper-alpha" },
84
- "$ ol[type=\"a\"]": { listStyleType: "lower-alpha" },
85
- "$ ol[type=\"A\" s]": { listStyleType: "upper-alpha" },
86
- "$ ol[type=\"a\" s]": { listStyleType: "lower-alpha" },
87
- "$ ol[type=\"I\"]": { listStyleType: "upper-roman" },
88
- "$ ol[type=\"i\"]": { listStyleType: "lower-roman" },
89
- "$ ol[type=\"I\" s]": { listStyleType: "upper-roman" },
90
- "$ ol[type=\"i\" s]": { listStyleType: "lower-roman" },
91
- "$ ol[type=\"1\"]": { listStyleType: "decimal" },
92
- "$ ul": {
93
- listStyleType: "disc",
94
- marginTop: "1.25em",
95
- marginBottom: "1.25em",
96
- paddingLeft: "1.625em"
97
- },
98
- "$ ul ul": { listStyleType: "circle" },
99
- "$ ul ul ul": { listStyleType: "square" },
100
- "$ li": {
101
- marginTop: "0.5em",
102
- marginBottom: "0.5em"
103
- },
104
- "$ ol > li": { paddingLeft: "0.375em" },
105
- "$ ul > li": { paddingLeft: "0.375em" },
106
- "$ > ul > li p": {
107
- marginTop: "0.75em",
108
- marginBottom: "0.75em"
109
- },
110
- "$ > ul > li > :first-child": { marginTop: "1.25em" },
111
- "$ > ul > li > :last-child": { marginBottom: "1.25em" },
112
- "$ > ol > li > :first-child": { marginTop: "1.25em" },
113
- "$ > ol > li > :last-child": { marginBottom: "1.25em" },
114
- "$ ul ul, $ ul ol, $ ol ul, $ ol ol": {
115
- marginTop: "0.75em",
116
- marginBottom: "0.75em"
117
- },
118
- "$ dl": {
119
- marginTop: "1.25em",
120
- marginBottom: "1.25em"
121
- },
122
- "$ dt": {
123
- color: "var(--pk-prose-color-headings)",
124
- fontWeight: "600",
125
- marginTop: "1.25em"
126
- },
127
- "$ dd": {
128
- marginTop: "0.5em",
129
- paddingLeft: "1.625em"
130
- }
131
- });
132
- const proseHrStyle = (0, _pikacss_core.defineStyleDefinition)({
133
- "$ hr": {
134
- borderColor: "var(--pk-prose-color-hr)",
135
- borderTopWidth: "1px",
136
- marginTop: "3em",
137
- marginBottom: "3em"
138
- },
139
- "$ hr + *": { marginTop: "0" }
140
- });
141
- const proseHeadingsStyle = (0, _pikacss_core.defineStyleDefinition)({
142
- "$ h1": {
143
- color: "var(--pk-prose-color-headings)",
144
- fontWeight: "800",
145
- fontSize: "2.25em",
146
- marginTop: "0",
147
- marginBottom: "0.88em",
148
- lineHeight: "1.1"
149
- },
150
- "$ h1 strong": { fontWeight: "900" },
151
- "$ h1 code": { color: "inherit" },
152
- "$ h2": {
153
- color: "var(--pk-prose-color-headings)",
154
- fontWeight: "700",
155
- fontSize: "1.5em",
156
- marginTop: "2em",
157
- marginBottom: "1em",
158
- lineHeight: "1.33"
159
- },
160
- "$ h2 strong": { fontWeight: "800" },
161
- "$ h2 code": { color: "inherit" },
162
- "$ h2 + *": { marginTop: "0" },
163
- "$ h3": {
164
- color: "var(--pk-prose-color-headings)",
165
- fontWeight: "600",
166
- fontSize: "1.25em",
167
- marginTop: "1.6em",
168
- marginBottom: "0.6em",
169
- lineHeight: "1.6"
170
- },
171
- "$ h3 strong": { fontWeight: "700" },
172
- "$ h3 code": { color: "inherit" },
173
- "$ h3 + *": { marginTop: "0" },
174
- "$ h4": {
175
- color: "var(--pk-prose-color-headings)",
176
- fontWeight: "600",
177
- marginTop: "1.5em",
178
- marginBottom: "0.5em",
179
- lineHeight: "1.5"
180
- },
181
- "$ h4 strong": { fontWeight: "700" },
182
- "$ h4 code": { color: "inherit" },
183
- "$ h4 + *": { marginTop: "0" }
184
- });
185
- const proseQuotesStyle = (0, _pikacss_core.defineStyleDefinition)({
186
- "$ blockquote": {
187
- fontWeight: "500",
188
- fontStyle: "italic",
189
- color: "var(--pk-prose-color-quotes)",
190
- borderLeftWidth: "0.25rem",
191
- borderLeftColor: "var(--pk-prose-color-quote-borders)",
192
- quotes: "\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"",
193
- marginTop: "1.6em",
194
- marginBottom: "1.6em",
195
- paddingLeft: "1em"
196
- },
197
- "$ blockquote p:first-of-type::before": { content: "open-quote" },
198
- "$ blockquote p:last-of-type::after": { content: "close-quote" },
199
- "$ blockquote code": { color: "inherit" }
200
- });
201
- const proseMediaStyle = (0, _pikacss_core.defineStyleDefinition)({
202
- "$ img": {
203
- marginTop: "2em",
204
- marginBottom: "2em"
205
- },
206
- "$ picture": {
207
- display: "block",
208
- marginTop: "2em",
209
- marginBottom: "2em"
210
- },
211
- "$ video": {
212
- marginTop: "2em",
213
- marginBottom: "2em"
214
- },
215
- "$ figure": {
216
- marginTop: "2em",
217
- marginBottom: "2em"
218
- },
219
- "$ figure > *": {
220
- marginTop: "0",
221
- marginBottom: "0"
222
- },
223
- "$ figcaption": {
224
- color: "var(--pk-prose-color-captions)",
225
- fontSize: "0.875em",
226
- lineHeight: "1.4",
227
- marginTop: "0.85em"
228
- }
229
- });
230
- const proseCodeStyle = (0, _pikacss_core.defineStyleDefinition)({
231
- "$ code": {
232
- color: "var(--pk-prose-color-code)",
233
- fontWeight: "600",
234
- fontSize: "0.875em"
235
- },
236
- "$ code::before": { content: "\"`\"" },
237
- "$ code::after": { content: "\"`\"" },
238
- "$ pre": {
239
- color: "var(--pk-prose-color-pre-code)",
240
- backgroundColor: "var(--pk-prose-color-pre-bg)",
241
- overflowX: "auto",
242
- fontWeight: "400",
243
- fontSize: "0.875em",
244
- lineHeight: "1.7",
245
- marginTop: "1.7em",
246
- marginBottom: "1.7em",
247
- borderRadius: "0.375rem",
248
- paddingTop: "0.85em",
249
- paddingRight: "1.14em",
250
- paddingBottom: "0.85em",
251
- paddingLeft: "1.14em"
252
- },
253
- "$ pre code": {
254
- backgroundColor: "transparent",
255
- borderWidth: "0",
256
- borderRadius: "0",
257
- padding: "0",
258
- fontWeight: "inherit",
259
- color: "inherit",
260
- fontSize: "inherit",
261
- fontFamily: "inherit",
262
- lineHeight: "inherit"
263
- },
264
- "$ pre code::before": { content: "none" },
265
- "$ pre code::after": { content: "none" }
266
- });
267
- const proseTablesStyle = (0, _pikacss_core.defineStyleDefinition)({
268
- "$ table": {
269
- width: "100%",
270
- tableLayout: "auto",
271
- textAlign: "left",
272
- marginTop: "2em",
273
- marginBottom: "2em",
274
- fontSize: "0.875em",
275
- lineHeight: "1.7"
276
- },
277
- "$ thead": {
278
- borderBottomWidth: "1px",
279
- borderBottomColor: "var(--pk-prose-color-th-borders)"
280
- },
281
- "$ thead th": {
282
- color: "var(--pk-prose-color-headings)",
283
- fontWeight: "600",
284
- verticalAlign: "bottom",
285
- paddingRight: "0.57em",
286
- paddingBottom: "0.57em",
287
- paddingLeft: "0.57em"
288
- },
289
- "$ thead th:first-child": { paddingLeft: "0" },
290
- "$ thead th:last-child": { paddingRight: "0" },
291
- "$ thead th code": { color: "inherit" },
292
- "$ tbody tr": {
293
- borderBottomWidth: "1px",
294
- borderBottomColor: "var(--pk-prose-color-td-borders)"
295
- },
296
- "$ tbody tr:last-child": { borderBottomWidth: "0" },
297
- "$ tbody td": { verticalAlign: "baseline" },
298
- "$ tbody td, $ tfoot td": {
299
- paddingTop: "0.57em",
300
- paddingRight: "0.57em",
301
- paddingBottom: "0.57em",
302
- paddingLeft: "0.57em"
303
- },
304
- "$ tbody td:first-child, $ tfoot td:first-child": { paddingLeft: "0" },
305
- "$ tbody td:last-child, $ tfoot td:last-child": { paddingRight: "0" }
306
- });
307
-
308
- //#endregion
309
- //#region src/index.ts
310
- function typography() {
311
- let typographyConfig = {};
312
- return (0, _pikacss_core.defineEnginePlugin)({
313
- name: "typography",
314
- configureRawConfig: (config) => {
315
- if (config.typography) typographyConfig = config.typography;
316
- },
317
- configureEngine: async (engine) => {
318
- engine.variables.add({
319
- ...typographyVariables,
320
- ...typographyConfig.variables
321
- });
322
- engine.shortcuts.add(["prose-base", proseBaseStyle]);
323
- engine.shortcuts.add(["prose-paragraphs", ["prose-base", proseParagraphsStyle]]);
324
- engine.shortcuts.add(["prose-links", ["prose-base", proseLinksStyle]]);
325
- engine.shortcuts.add(["prose-emphasis", ["prose-base", proseEmphasisStyle]]);
326
- engine.shortcuts.add(["prose-kbd", ["prose-base", proseKbdStyle]]);
327
- engine.shortcuts.add(["prose-lists", ["prose-base", proseListsStyle]]);
328
- engine.shortcuts.add(["prose-hr", ["prose-base", proseHrStyle]]);
329
- engine.shortcuts.add(["prose-headings", ["prose-base", proseHeadingsStyle]]);
330
- engine.shortcuts.add(["prose-quotes", ["prose-base", proseQuotesStyle]]);
331
- engine.shortcuts.add(["prose-media", ["prose-base", proseMediaStyle]]);
332
- engine.shortcuts.add(["prose-code", ["prose-base", proseCodeStyle]]);
333
- engine.shortcuts.add(["prose-tables", ["prose-base", proseTablesStyle]]);
334
- engine.shortcuts.add(["prose", [
335
- "prose-paragraphs",
336
- "prose-links",
337
- "prose-emphasis",
338
- "prose-kbd",
339
- "prose-lists",
340
- "prose-hr",
341
- "prose-headings",
342
- "prose-quotes",
343
- "prose-media",
344
- "prose-code",
345
- "prose-tables"
346
- ]]);
347
- Object.entries({
348
- "sm": {
349
- fontSize: "0.875rem",
350
- lineHeight: "1.71"
351
- },
352
- "lg": {
353
- fontSize: "1.125rem",
354
- lineHeight: "1.77"
355
- },
356
- "xl": {
357
- fontSize: "1.25rem",
358
- lineHeight: "1.8"
359
- },
360
- "2xl": {
361
- fontSize: "1.5rem",
362
- lineHeight: "1.66"
363
- }
364
- }).forEach(([size, overrides]) => {
365
- engine.shortcuts.add([`prose-${size}`, ["prose", overrides]]);
366
- });
367
- }
368
- });
369
- }
370
-
371
- //#endregion
372
- exports.typography = typography;
package/dist/index.d.cts DELETED
@@ -1,39 +0,0 @@
1
- import { EnginePlugin } from "@pikacss/core";
2
-
3
- //#region src/styles.d.ts
4
- declare const typographyVariables: {
5
- '--pk-prose-color-body': string;
6
- '--pk-prose-color-headings': string;
7
- '--pk-prose-color-lead': string;
8
- '--pk-prose-color-links': string;
9
- '--pk-prose-color-bold': string;
10
- '--pk-prose-color-counters': string;
11
- '--pk-prose-color-bullets': string;
12
- '--pk-prose-color-hr': string;
13
- '--pk-prose-color-quotes': string;
14
- '--pk-prose-color-quote-borders': string;
15
- '--pk-prose-color-captions': string;
16
- '--pk-prose-color-code': string;
17
- '--pk-prose-color-pre-code': string;
18
- '--pk-prose-color-pre-bg': string;
19
- '--pk-prose-color-th-borders': string;
20
- '--pk-prose-color-td-borders': string;
21
- '--pk-prose-color-kbd': string;
22
- '--pk-prose-kbd-shadows': string;
23
- };
24
- //#endregion
25
- //#region src/index.d.ts
26
- interface TypographyPluginOptions {
27
- /**
28
- * Custom variables to override the default typography variables.
29
- */
30
- variables?: Partial<typeof typographyVariables>;
31
- }
32
- declare module '@pikacss/core' {
33
- interface EngineConfig {
34
- typography?: TypographyPluginOptions;
35
- }
36
- }
37
- declare function typography(): EnginePlugin;
38
- //#endregion
39
- export { TypographyPluginOptions, typography };