@pikacss/plugin-typography 0.0.38
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/LICENSE +21 -0
- package/README.md +291 -0
- package/dist/index.cjs +368 -0
- package/dist/index.d.cts +39 -0
- package/dist/index.d.mts +39 -0
- package/dist/index.mjs +368 -0
- package/package.json +56 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 DevilTea
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
# @pikacss/plugin-typography
|
|
2
|
+
|
|
3
|
+
Beautiful typographic defaults for HTML you don't control.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @pikacss/plugin-typography
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
**pika.config.ts**:
|
|
14
|
+
```typescript
|
|
15
|
+
import { defineEngineConfig } from '@pikacss/core'
|
|
16
|
+
import { typography } from '@pikacss/plugin-typography'
|
|
17
|
+
|
|
18
|
+
export default defineEngineConfig({
|
|
19
|
+
plugins: [typography()]
|
|
20
|
+
})
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
**Your HTML**:
|
|
24
|
+
```html
|
|
25
|
+
<article class="prose">
|
|
26
|
+
<h1>Your Article Title</h1>
|
|
27
|
+
<p>Your content goes here...</p>
|
|
28
|
+
</article>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Features
|
|
32
|
+
|
|
33
|
+
- 🎨 Beautiful typographic defaults
|
|
34
|
+
- � Modular shortcuts for granular control
|
|
35
|
+
- 📏 Multiple size modifiers (sm, lg, xl, 2xl)
|
|
36
|
+
- 🎯 Semantic HTML element styling
|
|
37
|
+
- 🔧 Fully customizable via CSS variables
|
|
38
|
+
- 🌙 Dark mode support through CSS variables
|
|
39
|
+
- ⚡ Automatic style deduplication
|
|
40
|
+
- 🔌 Zero dependencies (except @pikacss/core)
|
|
41
|
+
|
|
42
|
+
## Usage
|
|
43
|
+
|
|
44
|
+
### Complete Prose Style
|
|
45
|
+
|
|
46
|
+
Use `prose` for all typography styles:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<article class="prose">
|
|
50
|
+
<h1>Your Article Title</h1>
|
|
51
|
+
<p>Your content goes here...</p>
|
|
52
|
+
</article>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Modular Shortcuts
|
|
56
|
+
|
|
57
|
+
PikaCSS typography plugin provides modular shortcuts that you can mix and match according to your needs.
|
|
58
|
+
|
|
59
|
+
**Important:** Each modular shortcut automatically includes `prose-base` styles, so you don't need to add it manually. The engine will automatically deduplicate styles when combining multiple shortcuts.
|
|
60
|
+
|
|
61
|
+
#### Why Modular?
|
|
62
|
+
|
|
63
|
+
- ✅ **Smaller CSS Bundle**: Only include the styles you actually use
|
|
64
|
+
- ✅ **Better Performance**: Less CSS to parse and apply
|
|
65
|
+
- ✅ **More Flexible**: Combine exactly what you need for each section
|
|
66
|
+
- ✅ **Easier Debugging**: Know exactly which styles are applied
|
|
67
|
+
- ✅ **Better Control**: Avoid style conflicts with unused elements
|
|
68
|
+
|
|
69
|
+
#### Available Modular Shortcuts
|
|
70
|
+
|
|
71
|
+
Each shortcut automatically includes `prose-base` for consistent styling:
|
|
72
|
+
|
|
73
|
+
- `prose-base` - Base styles (color, max-width, font-size, line-height)
|
|
74
|
+
- `prose-paragraphs` - Paragraph and lead text styles (includes `prose-base`)
|
|
75
|
+
- `prose-links` - Link styles (includes `prose-base`)
|
|
76
|
+
- `prose-emphasis` - Strong and em styles (includes `prose-base`)
|
|
77
|
+
- `prose-kbd` - Keyboard input styles (includes `prose-base`)
|
|
78
|
+
- `prose-lists` - List styles (ul, ol, li, dl, dt, dd) (includes `prose-base`)
|
|
79
|
+
- `prose-hr` - Horizontal rule styles (includes `prose-base`)
|
|
80
|
+
- `prose-headings` - Heading styles (h1-h4) (includes `prose-base`)
|
|
81
|
+
- `prose-quotes` - Blockquote styles (includes `prose-base`)
|
|
82
|
+
- `prose-media` - Media styles (img, video, figure, figcaption) (includes `prose-base`)
|
|
83
|
+
- `prose-code` - Code and pre styles (includes `prose-base`)
|
|
84
|
+
- `prose-tables` - Table styles (includes `prose-base`)
|
|
85
|
+
- `prose` - Complete prose (combination of all above)
|
|
86
|
+
|
|
87
|
+
#### Usage Examples
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<!-- Minimal blog post - just headings and paragraphs -->
|
|
91
|
+
<article class="prose-headings prose-paragraphs">
|
|
92
|
+
<h1>Blog Post Title</h1>
|
|
93
|
+
<p>Just simple text content.</p>
|
|
94
|
+
</article>
|
|
95
|
+
|
|
96
|
+
<!-- Technical documentation - headings, code, and lists -->
|
|
97
|
+
<article class="prose-headings prose-code prose-lists">
|
|
98
|
+
<h1>API Documentation</h1>
|
|
99
|
+
<pre><code>npm install package-name</code></pre>
|
|
100
|
+
<ul>
|
|
101
|
+
<li>Feature 1</li>
|
|
102
|
+
<li>Feature 2</li>
|
|
103
|
+
</ul>
|
|
104
|
+
</article>
|
|
105
|
+
|
|
106
|
+
<!-- Rich blog content - multiple elements -->
|
|
107
|
+
<article class="prose-headings prose-paragraphs prose-links prose-emphasis prose-quotes prose-media">
|
|
108
|
+
<h1>Travel Blog</h1>
|
|
109
|
+
<p>I recently visited <strong>Japan</strong> and it was <em>amazing</em>!</p>
|
|
110
|
+
<blockquote>
|
|
111
|
+
<p>Travel is the only thing you buy that makes you richer.</p>
|
|
112
|
+
</blockquote>
|
|
113
|
+
<figure>
|
|
114
|
+
<img src="photo.jpg" alt="Scenery">
|
|
115
|
+
<figcaption>Mount Fuji at sunrise</figcaption>
|
|
116
|
+
</figure>
|
|
117
|
+
</article>
|
|
118
|
+
|
|
119
|
+
<!-- Data table document -->
|
|
120
|
+
<article class="prose-headings prose-paragraphs prose-tables">
|
|
121
|
+
<h1>Sales Report</h1>
|
|
122
|
+
<p>Q4 2023 results</p>
|
|
123
|
+
<table>
|
|
124
|
+
<!-- table content -->
|
|
125
|
+
</table>
|
|
126
|
+
</article>
|
|
127
|
+
|
|
128
|
+
<!-- Keyboard shortcuts guide -->
|
|
129
|
+
<article class="prose-headings prose-lists prose-kbd">
|
|
130
|
+
<h1>Keyboard Shortcuts</h1>
|
|
131
|
+
<ul>
|
|
132
|
+
<li>Save: <kbd>Cmd</kbd> + <kbd>S</kbd></li>
|
|
133
|
+
<li>Copy: <kbd>Cmd</kbd> + <kbd>C</kbd></li>
|
|
134
|
+
</ul>
|
|
135
|
+
</article>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
#### Common Combinations
|
|
139
|
+
|
|
140
|
+
**Blog Post**:
|
|
141
|
+
```html
|
|
142
|
+
class="prose-headings prose-paragraphs prose-links prose-emphasis prose-lists"
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
**Technical Documentation**:
|
|
146
|
+
```html
|
|
147
|
+
class="prose-headings prose-paragraphs prose-code prose-lists prose-links"
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
**News Article**:
|
|
151
|
+
```html
|
|
152
|
+
class="prose-headings prose-paragraphs prose-links prose-quotes prose-media"
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
**Data Page**:
|
|
156
|
+
```html
|
|
157
|
+
class="prose-headings prose-paragraphs prose-tables"
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
**Simple Landing Page**:
|
|
161
|
+
```html
|
|
162
|
+
class="prose-headings prose-paragraphs"
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Size Modifiers
|
|
166
|
+
|
|
167
|
+
Size modifiers apply the complete `prose` styles with different font sizes:
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<!-- Default size (1rem / 16px) -->
|
|
171
|
+
<article class="prose">...</article>
|
|
172
|
+
|
|
173
|
+
<!-- Small (0.875rem / 14px) -->
|
|
174
|
+
<article class="prose-sm">...</article>
|
|
175
|
+
|
|
176
|
+
<!-- Large (1.125rem / 18px) -->
|
|
177
|
+
<article class="prose-lg">...</article>
|
|
178
|
+
|
|
179
|
+
<!-- Extra Large (1.25rem / 20px) -->
|
|
180
|
+
<article class="prose-xl">...</article>
|
|
181
|
+
|
|
182
|
+
<!-- 2X Large (1.5rem / 24px) -->
|
|
183
|
+
<article class="prose-2xl">...</article>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### Customization
|
|
187
|
+
|
|
188
|
+
Override color variables when creating the plugin:
|
|
189
|
+
|
|
190
|
+
**pika.config.ts**:
|
|
191
|
+
```typescript
|
|
192
|
+
import { defineEngineConfig } from '@pikacss/core'
|
|
193
|
+
import { typography } from '@pikacss/plugin-typography'
|
|
194
|
+
|
|
195
|
+
export default defineEngineConfig({
|
|
196
|
+
plugins: [
|
|
197
|
+
typography({
|
|
198
|
+
variables: {
|
|
199
|
+
'--pk-prose-color-body': '#374151',
|
|
200
|
+
'--pk-prose-color-headings': '#111827',
|
|
201
|
+
'--pk-prose-color-links': '#2563eb',
|
|
202
|
+
}
|
|
203
|
+
})
|
|
204
|
+
]
|
|
205
|
+
})
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
#### Available CSS Variables
|
|
209
|
+
|
|
210
|
+
```css
|
|
211
|
+
--pk-prose-color-body /* Body text color */
|
|
212
|
+
--pk-prose-color-headings /* Heading text color */
|
|
213
|
+
--pk-prose-color-lead /* Lead paragraph color */
|
|
214
|
+
--pk-prose-color-links /* Link color */
|
|
215
|
+
--pk-prose-color-bold /* Bold text color */
|
|
216
|
+
--pk-prose-color-counters /* List counter color */
|
|
217
|
+
--pk-prose-color-bullets /* List bullet color */
|
|
218
|
+
--pk-prose-color-hr /* Horizontal rule color */
|
|
219
|
+
--pk-prose-color-quotes /* Blockquote text color */
|
|
220
|
+
--pk-prose-color-quote-borders /* Blockquote border color */
|
|
221
|
+
--pk-prose-color-captions /* Image caption color */
|
|
222
|
+
--pk-prose-color-code /* Inline code color */
|
|
223
|
+
--pk-prose-color-pre-code /* Code block text color */
|
|
224
|
+
--pk-prose-color-pre-bg /* Code block background */
|
|
225
|
+
--pk-prose-color-th-borders /* Table header border color */
|
|
226
|
+
--pk-prose-color-td-borders /* Table cell border color */
|
|
227
|
+
--pk-prose-color-kbd /* Keyboard input color */
|
|
228
|
+
--pk-prose-kbd-shadows /* Keyboard input shadow color */
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
### Dark Mode
|
|
232
|
+
|
|
233
|
+
Implement dark mode by overriding CSS variables:
|
|
234
|
+
|
|
235
|
+
```css
|
|
236
|
+
@media (prefers-color-scheme: dark) {
|
|
237
|
+
.prose {
|
|
238
|
+
--pk-prose-color-body: #d1d5db;
|
|
239
|
+
--pk-prose-color-headings: #fff;
|
|
240
|
+
--pk-prose-color-links: #60a5fa;
|
|
241
|
+
--pk-prose-color-quote-borders: #374151;
|
|
242
|
+
--pk-prose-color-pre-bg: #1f2937;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
## Styled Elements
|
|
248
|
+
|
|
249
|
+
This plugin provides modular styles for:
|
|
250
|
+
|
|
251
|
+
- **Base**: Container styles (max-width, font size, line height)
|
|
252
|
+
- **Paragraphs**: `p`, lead text (`[class~="lead"]`)
|
|
253
|
+
- **Links**: `a`
|
|
254
|
+
- **Emphasis**: `strong`, `em`
|
|
255
|
+
- **Keyboard**: `kbd`
|
|
256
|
+
- **Lists**: `ul`, `ol`, `li`, `dl`, `dt`, `dd`
|
|
257
|
+
- **Horizontal Rule**: `hr`
|
|
258
|
+
- **Headings**: `h1`, `h2`, `h3`, `h4`
|
|
259
|
+
- **Quotes**: `blockquote`
|
|
260
|
+
- **Media**: `img`, `video`, `figure`, `figcaption`, `picture`
|
|
261
|
+
- **Code**: `code`, `pre`
|
|
262
|
+
- **Tables**: `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`
|
|
263
|
+
|
|
264
|
+
## Architecture
|
|
265
|
+
|
|
266
|
+
The plugin uses a modular architecture with automatic deduplication:
|
|
267
|
+
|
|
268
|
+
- Each modular shortcut is registered with `prose-base` included
|
|
269
|
+
- When combining multiple shortcuts, the engine automatically deduplicates `prose-base`
|
|
270
|
+
- The `prose` shortcut combines all modular shortcuts using shortcut names
|
|
271
|
+
- This ensures optimal performance and consistent styling
|
|
272
|
+
|
|
273
|
+
## Performance
|
|
274
|
+
|
|
275
|
+
Using modular shortcuts can significantly reduce CSS bundle size:
|
|
276
|
+
|
|
277
|
+
```html
|
|
278
|
+
<!-- Full prose: ~100% of typography CSS -->
|
|
279
|
+
<article class="prose">...</article>
|
|
280
|
+
|
|
281
|
+
<!-- Modular: ~30-40% of typography CSS (depending on combination) -->
|
|
282
|
+
<article class="prose-headings prose-paragraphs prose-links">...</article>
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
## Documentation
|
|
286
|
+
|
|
287
|
+
For complete documentation, visit: [PikaCSS Documentation](https://pikacss.dev)
|
|
288
|
+
|
|
289
|
+
## License
|
|
290
|
+
|
|
291
|
+
MIT © DevilTea
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,368 @@
|
|
|
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(options = {}) {
|
|
311
|
+
return (0, _pikacss_core.defineEnginePlugin)({
|
|
312
|
+
name: "typography",
|
|
313
|
+
configureEngine: async (engine) => {
|
|
314
|
+
engine.variables.add({
|
|
315
|
+
...typographyVariables,
|
|
316
|
+
...options.variables
|
|
317
|
+
});
|
|
318
|
+
engine.shortcuts.add(["prose-base", proseBaseStyle]);
|
|
319
|
+
engine.shortcuts.add(["prose-paragraphs", ["prose-base", proseParagraphsStyle]]);
|
|
320
|
+
engine.shortcuts.add(["prose-links", ["prose-base", proseLinksStyle]]);
|
|
321
|
+
engine.shortcuts.add(["prose-emphasis", ["prose-base", proseEmphasisStyle]]);
|
|
322
|
+
engine.shortcuts.add(["prose-kbd", ["prose-base", proseKbdStyle]]);
|
|
323
|
+
engine.shortcuts.add(["prose-lists", ["prose-base", proseListsStyle]]);
|
|
324
|
+
engine.shortcuts.add(["prose-hr", ["prose-base", proseHrStyle]]);
|
|
325
|
+
engine.shortcuts.add(["prose-headings", ["prose-base", proseHeadingsStyle]]);
|
|
326
|
+
engine.shortcuts.add(["prose-quotes", ["prose-base", proseQuotesStyle]]);
|
|
327
|
+
engine.shortcuts.add(["prose-media", ["prose-base", proseMediaStyle]]);
|
|
328
|
+
engine.shortcuts.add(["prose-code", ["prose-base", proseCodeStyle]]);
|
|
329
|
+
engine.shortcuts.add(["prose-tables", ["prose-base", proseTablesStyle]]);
|
|
330
|
+
engine.shortcuts.add(["prose", [
|
|
331
|
+
"prose-paragraphs",
|
|
332
|
+
"prose-links",
|
|
333
|
+
"prose-emphasis",
|
|
334
|
+
"prose-kbd",
|
|
335
|
+
"prose-lists",
|
|
336
|
+
"prose-hr",
|
|
337
|
+
"prose-headings",
|
|
338
|
+
"prose-quotes",
|
|
339
|
+
"prose-media",
|
|
340
|
+
"prose-code",
|
|
341
|
+
"prose-tables"
|
|
342
|
+
]]);
|
|
343
|
+
Object.entries({
|
|
344
|
+
"sm": {
|
|
345
|
+
fontSize: "0.875rem",
|
|
346
|
+
lineHeight: "1.71"
|
|
347
|
+
},
|
|
348
|
+
"lg": {
|
|
349
|
+
fontSize: "1.125rem",
|
|
350
|
+
lineHeight: "1.77"
|
|
351
|
+
},
|
|
352
|
+
"xl": {
|
|
353
|
+
fontSize: "1.25rem",
|
|
354
|
+
lineHeight: "1.8"
|
|
355
|
+
},
|
|
356
|
+
"2xl": {
|
|
357
|
+
fontSize: "1.5rem",
|
|
358
|
+
lineHeight: "1.66"
|
|
359
|
+
}
|
|
360
|
+
}).forEach(([size, overrides]) => {
|
|
361
|
+
engine.shortcuts.add([`prose-${size}`, ["prose", overrides]]);
|
|
362
|
+
});
|
|
363
|
+
}
|
|
364
|
+
});
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
//#endregion
|
|
368
|
+
exports.typography = typography;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
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(options?: TypographyPluginOptions): EnginePlugin;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { TypographyPluginOptions, typography };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
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(options?: TypographyPluginOptions): EnginePlugin;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { TypographyPluginOptions, typography };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,368 @@
|
|
|
1
|
+
import { defineEnginePlugin, defineStyleDefinition } from "@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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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(options = {}) {
|
|
311
|
+
return defineEnginePlugin({
|
|
312
|
+
name: "typography",
|
|
313
|
+
configureEngine: async (engine) => {
|
|
314
|
+
engine.variables.add({
|
|
315
|
+
...typographyVariables,
|
|
316
|
+
...options.variables
|
|
317
|
+
});
|
|
318
|
+
engine.shortcuts.add(["prose-base", proseBaseStyle]);
|
|
319
|
+
engine.shortcuts.add(["prose-paragraphs", ["prose-base", proseParagraphsStyle]]);
|
|
320
|
+
engine.shortcuts.add(["prose-links", ["prose-base", proseLinksStyle]]);
|
|
321
|
+
engine.shortcuts.add(["prose-emphasis", ["prose-base", proseEmphasisStyle]]);
|
|
322
|
+
engine.shortcuts.add(["prose-kbd", ["prose-base", proseKbdStyle]]);
|
|
323
|
+
engine.shortcuts.add(["prose-lists", ["prose-base", proseListsStyle]]);
|
|
324
|
+
engine.shortcuts.add(["prose-hr", ["prose-base", proseHrStyle]]);
|
|
325
|
+
engine.shortcuts.add(["prose-headings", ["prose-base", proseHeadingsStyle]]);
|
|
326
|
+
engine.shortcuts.add(["prose-quotes", ["prose-base", proseQuotesStyle]]);
|
|
327
|
+
engine.shortcuts.add(["prose-media", ["prose-base", proseMediaStyle]]);
|
|
328
|
+
engine.shortcuts.add(["prose-code", ["prose-base", proseCodeStyle]]);
|
|
329
|
+
engine.shortcuts.add(["prose-tables", ["prose-base", proseTablesStyle]]);
|
|
330
|
+
engine.shortcuts.add(["prose", [
|
|
331
|
+
"prose-paragraphs",
|
|
332
|
+
"prose-links",
|
|
333
|
+
"prose-emphasis",
|
|
334
|
+
"prose-kbd",
|
|
335
|
+
"prose-lists",
|
|
336
|
+
"prose-hr",
|
|
337
|
+
"prose-headings",
|
|
338
|
+
"prose-quotes",
|
|
339
|
+
"prose-media",
|
|
340
|
+
"prose-code",
|
|
341
|
+
"prose-tables"
|
|
342
|
+
]]);
|
|
343
|
+
Object.entries({
|
|
344
|
+
"sm": {
|
|
345
|
+
fontSize: "0.875rem",
|
|
346
|
+
lineHeight: "1.71"
|
|
347
|
+
},
|
|
348
|
+
"lg": {
|
|
349
|
+
fontSize: "1.125rem",
|
|
350
|
+
lineHeight: "1.77"
|
|
351
|
+
},
|
|
352
|
+
"xl": {
|
|
353
|
+
fontSize: "1.25rem",
|
|
354
|
+
lineHeight: "1.8"
|
|
355
|
+
},
|
|
356
|
+
"2xl": {
|
|
357
|
+
fontSize: "1.5rem",
|
|
358
|
+
lineHeight: "1.66"
|
|
359
|
+
}
|
|
360
|
+
}).forEach(([size, overrides]) => {
|
|
361
|
+
engine.shortcuts.add([`prose-${size}`, ["prose", overrides]]);
|
|
362
|
+
});
|
|
363
|
+
}
|
|
364
|
+
});
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
//#endregion
|
|
368
|
+
export { typography };
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pikacss/plugin-typography",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"version": "0.0.38",
|
|
8
|
+
"author": "DevilTea <ch19980814@gmail.com>",
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/pikacss/pikacss.git",
|
|
13
|
+
"directory": "packages/plugin-typography"
|
|
14
|
+
},
|
|
15
|
+
"bugs": {
|
|
16
|
+
"url": "https://github.com/pikacss/pikacss/issues"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"pikacss",
|
|
20
|
+
"pikacss-plugin",
|
|
21
|
+
"typography"
|
|
22
|
+
],
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"import": {
|
|
26
|
+
"types": "./dist/index.d.mts",
|
|
27
|
+
"default": "./dist/index.mjs"
|
|
28
|
+
},
|
|
29
|
+
"require": {
|
|
30
|
+
"types": "./dist/index.d.cts",
|
|
31
|
+
"default": "./dist/index.cjs"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"main": "dist/index.cjs",
|
|
36
|
+
"module": "dist/index.mjs",
|
|
37
|
+
"types": "dist/index.d.mts",
|
|
38
|
+
"files": [
|
|
39
|
+
"dist"
|
|
40
|
+
],
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"@pikacss/core": "0.0.38"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@pikacss/core": "0.0.38"
|
|
46
|
+
},
|
|
47
|
+
"scripts": {
|
|
48
|
+
"build": "tsdown",
|
|
49
|
+
"build:pack": "pnpm build && pnpm pack",
|
|
50
|
+
"typecheck": "pnpm typecheck:package && pnpm typecheck:test",
|
|
51
|
+
"typecheck:package": "tsc --project ./tsconfig.package.json --noEmit",
|
|
52
|
+
"typecheck:test": "tsc --project ./tsconfig.tests.json --noEmit",
|
|
53
|
+
"test": "vitest run",
|
|
54
|
+
"test:watch": "vitest"
|
|
55
|
+
}
|
|
56
|
+
}
|