@unocss/preset-typography 0.50.7 → 0.51.0
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/README.md +2 -217
- package/dist/index.d.ts +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,224 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Typography Preset for UnoCSS
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Documentation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
pnpm add @unocss/preset-typography -D
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
```js
|
|
14
|
-
// uno.config.ts
|
|
15
|
-
import { defineConfig, presetAttributify, presetTypography, presetUno } from 'unocss'
|
|
16
|
-
|
|
17
|
-
export default defineConfig({
|
|
18
|
-
presets: [
|
|
19
|
-
presetAttributify(), // required if using attributify mode
|
|
20
|
-
presetUno(), // required
|
|
21
|
-
presetTypography(),
|
|
22
|
-
],
|
|
23
|
-
})
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
<table>
|
|
27
|
-
<thead>
|
|
28
|
-
<tr style="text-align: center">
|
|
29
|
-
<th>With classes</th>
|
|
30
|
-
<th>With attributes</th>
|
|
31
|
-
</tr>
|
|
32
|
-
</thead>
|
|
33
|
-
<tbody>
|
|
34
|
-
<tr>
|
|
35
|
-
<td>
|
|
36
|
-
|
|
37
|
-
<!-- prettier-ignore -->
|
|
38
|
-
```html
|
|
39
|
-
<article class="text-base prose prose-truegray xl:text-xl">
|
|
40
|
-
{{ markdown }}
|
|
41
|
-
<p class="not-prose">
|
|
42
|
-
some text
|
|
43
|
-
</p>
|
|
44
|
-
</article>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
</td>
|
|
48
|
-
|
|
49
|
-
<td>
|
|
50
|
-
|
|
51
|
-
<!-- prettier-ignore -->
|
|
52
|
-
```html
|
|
53
|
-
<article text-base prose prose-truegray xl="text-xl">
|
|
54
|
-
{{ markdown }}
|
|
55
|
-
<p class="not-prose">
|
|
56
|
-
not-prose is only available in class.
|
|
57
|
-
</p>
|
|
58
|
-
</article>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
</td>
|
|
62
|
-
</tr>
|
|
63
|
-
</tbody>
|
|
64
|
-
</table>
|
|
65
|
-
|
|
66
|
-
## Highlight
|
|
67
|
-
|
|
68
|
-
- **Any font size you want**
|
|
69
|
-
|
|
70
|
-
Apply any font size for body you like and `prose` will scale the styles for
|
|
71
|
-
the respective HTML elements. For instance, `prose text-lg` has body font size
|
|
72
|
-
`1.125rem` and `h1` will with scale with that size 2.25 times. See [all the
|
|
73
|
-
supported HTML elements].
|
|
74
|
-
|
|
75
|
-
[all the supported html elements]: https://github.com/unocss/unocss/blob/main/packages/preset-typography/src/preflights/default.ts
|
|
76
|
-
|
|
77
|
-
- **Any color you like**
|
|
78
|
-
|
|
79
|
-
Apply any color with `prose-${colorName}` by UnoCSS (e.g. `prose-coolgray`,
|
|
80
|
-
`prose-sky`) since `prose` does not have any color by default. See
|
|
81
|
-
[all available colors](#colors). For instance, `prose prose-truegray` will use
|
|
82
|
-
the respective colors for the respective HTML elements.
|
|
83
|
-
|
|
84
|
-
- **Dark mode in ONE utility**
|
|
85
|
-
|
|
86
|
-
Apply typographic dark mode with `prose-invert` (background color needs to be
|
|
87
|
-
handled by users). For instance, `prose dark:prose-invert` will use the
|
|
88
|
-
inverted colors in the dark mode.
|
|
89
|
-
|
|
90
|
-
- **Your own style, still your style**
|
|
91
|
-
|
|
92
|
-
Styles of elements not within `prose` will stay the same. No style resetting
|
|
93
|
-
just like UnoCSS.
|
|
94
|
-
|
|
95
|
-
- **Undo with `not` utility**
|
|
96
|
-
|
|
97
|
-
Apply `not-prose` to the elements to undo the typographic styles. For
|
|
98
|
-
instance, `<table class="not-prose">` will skip the styles by this preset for
|
|
99
|
-
the `table` element **(NOTE: `not` utility is only usable in class since it is
|
|
100
|
-
only used in CSS** **selector & not scanned by UnoCSS)**.
|
|
101
|
-
|
|
102
|
-
- **Compatibility Options**
|
|
103
|
-
|
|
104
|
-
This preset used some pseudo-classes which are not widely supported, but you
|
|
105
|
-
can disable them.
|
|
106
|
-
|
|
107
|
-
- If you enabled `noColonNot` or `noColonWhere`, `not-prose` will be unavailable.
|
|
108
|
-
- If you enabled `noColonIs`, attributify mode will have a wrong behavior.
|
|
109
|
-
|
|
110
|
-
## Utilities
|
|
111
|
-
|
|
112
|
-
| Rule | Styles by this rule |
|
|
113
|
-
| :-----: | :---------------------------------------------------------------------------------------------------------------: |
|
|
114
|
-
| `prose` | See [on GitHub](https://github.com/unocss/unocss/blob/main/packages/preset-typography/src/preflights/default.ts). |
|
|
115
|
-
|
|
116
|
-
### Colors
|
|
117
|
-
|
|
118
|
-
| Rules (color) |
|
|
119
|
-
| --------------- |
|
|
120
|
-
| `prose-rose` |
|
|
121
|
-
| `prose-pink` |
|
|
122
|
-
| `prose-fuchsia` |
|
|
123
|
-
| `prose-purple` |
|
|
124
|
-
| `prose-violet` |
|
|
125
|
-
| `prose-indigo` |
|
|
126
|
-
| `prose-blue` |
|
|
127
|
-
| `prose-sky` |
|
|
128
|
-
| `prose-cyan` |
|
|
129
|
-
| `prose-teal` |
|
|
130
|
-
| `prose-emerald` |
|
|
131
|
-
| `prose-green` |
|
|
132
|
-
| `prose-lime` |
|
|
133
|
-
| `prose-yellow` |
|
|
134
|
-
| `prose-amber` |
|
|
135
|
-
| `prose-orange` |
|
|
136
|
-
| `prose-red` |
|
|
137
|
-
| `prose-gray` |
|
|
138
|
-
| `prose-slate` |
|
|
139
|
-
| `prose-zinc` |
|
|
140
|
-
| `prose-neutral` |
|
|
141
|
-
| `prose-stone` |
|
|
142
|
-
|
|
143
|
-
## Configurations
|
|
144
|
-
|
|
145
|
-
This preset has `selectorName` and `cssExtend` configurations for users who like
|
|
146
|
-
to override or extend.
|
|
147
|
-
|
|
148
|
-
The CSS declarations passed to `cssExtend` will
|
|
149
|
-
|
|
150
|
-
- **override** the built-in styles if the values are conflicting, else
|
|
151
|
-
|
|
152
|
-
- **be merged** deeply with built-in styles.
|
|
153
|
-
|
|
154
|
-
### Type of `TypographyOptions`
|
|
155
|
-
|
|
156
|
-
```ts
|
|
157
|
-
export interface TypographyCompatibilityOptions {
|
|
158
|
-
noColonWhere?: boolean
|
|
159
|
-
noColonIs?: boolean
|
|
160
|
-
noColonNot?: boolean
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
export interface TypographyOptions {
|
|
164
|
-
/**
|
|
165
|
-
* The class name to use the typographic utilities.
|
|
166
|
-
* To undo the styles to the elements, use it like
|
|
167
|
-
* `not-${selectorName}` which is by default `not-prose`.
|
|
168
|
-
*
|
|
169
|
-
* Note: `not` utility is only available in class.
|
|
170
|
-
*
|
|
171
|
-
* @defaultValue `prose`
|
|
172
|
-
*/
|
|
173
|
-
selectorName?: string
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* Extend or override CSS selectors with CSS declaration block.
|
|
177
|
-
*
|
|
178
|
-
* @defaultValue undefined
|
|
179
|
-
*/
|
|
180
|
-
cssExtend?: Record<string, CSSObject>
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* Compatibility option. Notice that it will affect some features.
|
|
184
|
-
* For more instructions, see
|
|
185
|
-
* [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography)
|
|
186
|
-
*
|
|
187
|
-
* @defaultValue undefined
|
|
188
|
-
*/
|
|
189
|
-
compatibility?: TypographyCompatibilityOptions
|
|
190
|
-
}
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
### Example
|
|
194
|
-
|
|
195
|
-
```ts
|
|
196
|
-
// uno.config.ts
|
|
197
|
-
import { defineConfig, presetAttributify, presetUno } from 'unocss'
|
|
198
|
-
import { presetTypography } from '@unocss/preset-typography'
|
|
199
|
-
|
|
200
|
-
export default defineConfig({
|
|
201
|
-
presets: [
|
|
202
|
-
presetAttributify(), // required if using attributify mode
|
|
203
|
-
presetUno(), // required
|
|
204
|
-
presetTypography({
|
|
205
|
-
selectorName: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
|
|
206
|
-
// cssExtend is an object with CSS selector as key and
|
|
207
|
-
// CSS declaration block as value like writing normal CSS.
|
|
208
|
-
cssExtend: {
|
|
209
|
-
'code': {
|
|
210
|
-
color: '#8b5cf6',
|
|
211
|
-
},
|
|
212
|
-
'a:hover': {
|
|
213
|
-
color: '#f43f5e',
|
|
214
|
-
},
|
|
215
|
-
'a:visited': {
|
|
216
|
-
color: '#14b8a6',
|
|
217
|
-
},
|
|
218
|
-
},
|
|
219
|
-
}),
|
|
220
|
-
],
|
|
221
|
-
})
|
|
222
|
-
```
|
|
7
|
+
Please refer to the [documentation](https://unocss.dev/presets/typography).
|
|
223
8
|
|
|
224
9
|
## Acknowledgement
|
|
225
10
|
|
package/dist/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unocss/preset-typography",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.0",
|
|
4
4
|
"description": "Typography preset for UnoCSS",
|
|
5
5
|
"author": "Jeff Yang",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"dist"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@unocss/core": "0.
|
|
36
|
-
"@unocss/preset-mini": "0.
|
|
35
|
+
"@unocss/core": "0.51.0",
|
|
36
|
+
"@unocss/preset-mini": "0.51.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "unbuild",
|