@scribe-atp/styles 1.1.0 → 1.1.1
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 +104 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# @scribe-atp/styles
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@scribe-atp/styles)
|
|
4
|
+
[](https://github.com/ACregan/scribe-atp-sdk/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
Base CSS for rendering [Scribe CMS](https://scribe-cms.app) article content in consumer sites. Pure CSS — no build step, no JavaScript.
|
|
7
|
+
|
|
8
|
+
All rules are scoped to `.scribe-content` so they cannot leak into the rest of your page. Override any `--scribe-*` custom property to theme the output.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @scribe-atp/styles
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
### With Vite / React / React Router
|
|
19
|
+
|
|
20
|
+
Import the stylesheet once at the route that renders article content:
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import "@scribe-atp/styles";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Then wrap your article HTML in an element with the `scribe-content` class:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
<div
|
|
30
|
+
className="scribe-content"
|
|
31
|
+
dangerouslySetInnerHTML={{ __html: article.content }}
|
|
32
|
+
/>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Or use the `<ScribeContent>` component from `@scribe-atp/react`, which adds the class automatically:
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { ScribeContent } from "@scribe-atp/react";
|
|
39
|
+
import "@scribe-atp/styles";
|
|
40
|
+
|
|
41
|
+
<ScribeContent html={article.content} />
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### With a `<link>` tag (CDN / no bundler)
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<link rel="stylesheet" href="https://unpkg.com/@scribe-atp/styles/src/index.css" />
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## What it styles
|
|
51
|
+
|
|
52
|
+
| Element | Selector |
|
|
53
|
+
| ------- | -------- |
|
|
54
|
+
| Code blocks | `.scribe-content pre` |
|
|
55
|
+
| Inline code | `.scribe-content :not(pre) > code` |
|
|
56
|
+
| Syntax tokens | `.scribe-content .token.keyword` etc. |
|
|
57
|
+
| Images | `.scribe-content img` |
|
|
58
|
+
| Blockquotes | `.scribe-content blockquote` |
|
|
59
|
+
| Ordered / unordered lists | `.scribe-content ul`, `.scribe-content ol` |
|
|
60
|
+
| Checklists | `.scribe-content li[role="checkbox"]` |
|
|
61
|
+
|
|
62
|
+
Token classes (`token keyword`, `token string`, …) are the Prism-compatible class names that Scribe CMS emits when it serialises article content.
|
|
63
|
+
|
|
64
|
+
## Theming
|
|
65
|
+
|
|
66
|
+
Override any custom property on `.scribe-content` (or a parent) to customise the output:
|
|
67
|
+
|
|
68
|
+
```css
|
|
69
|
+
.my-article {
|
|
70
|
+
--scribe-code-bg: #1e1e1e;
|
|
71
|
+
--scribe-code-border: #333;
|
|
72
|
+
--scribe-token-keyword: #569cd6;
|
|
73
|
+
--scribe-token-string: #ce9178;
|
|
74
|
+
--scribe-token-comment: #6a9955;
|
|
75
|
+
--scribe-token-function: #dcdcaa;
|
|
76
|
+
--scribe-token-variable: #9cdcfe;
|
|
77
|
+
--scribe-blockquote-border: #444;
|
|
78
|
+
--scribe-blockquote-color: #aaa;
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Full list of custom properties
|
|
83
|
+
|
|
84
|
+
| Property | Default | Description |
|
|
85
|
+
| -------- | ------- | ----------- |
|
|
86
|
+
| `--scribe-code-bg` | `#f5f5f5` | Code block background |
|
|
87
|
+
| `--scribe-code-border` | `#e0e0e0` | Code block border colour |
|
|
88
|
+
| `--scribe-code-font` | `"Courier New", Courier, monospace` | Font family for code |
|
|
89
|
+
| `--scribe-code-font-size` | `0.875em` | Font size for code |
|
|
90
|
+
| `--scribe-inline-code-bg` | `rgba(0,0,0,0.06)` | Inline code background |
|
|
91
|
+
| `--scribe-blockquote-border` | `#ccc` | Blockquote left border colour |
|
|
92
|
+
| `--scribe-blockquote-color` | `#666` | Blockquote text colour |
|
|
93
|
+
| `--scribe-checkbox-size` | `1em` | Checklist checkbox size |
|
|
94
|
+
| `--scribe-checkbox-border` | `#aaa` | Unchecked checkbox border |
|
|
95
|
+
| `--scribe-checkbox-checked-bg` | `#333` | Checked checkbox fill |
|
|
96
|
+
| `--scribe-checkbox-checked-border` | `#333` | Checked checkbox border |
|
|
97
|
+
| `--scribe-token-comment` | `#708090` | `comment`, `prolog`, `doctype`, `cdata` |
|
|
98
|
+
| `--scribe-token-punctuation` | `#555` | `punctuation` |
|
|
99
|
+
| `--scribe-token-property` | `#905` | `property`, `tag`, `boolean`, `number`, `constant`, `symbol`, `deleted` |
|
|
100
|
+
| `--scribe-token-string` | `#690` | `string`, `selector`, `attr`, `char`, `builtin`, `inserted` |
|
|
101
|
+
| `--scribe-token-operator` | `#9a6e3a` | `operator`, `entity`, `url` |
|
|
102
|
+
| `--scribe-token-keyword` | `#07a` | `keyword`, `atrule` |
|
|
103
|
+
| `--scribe-token-function` | `#dd4a68` | `function`, `class-name`, `class` |
|
|
104
|
+
| `--scribe-token-variable` | `#e90` | `variable`, `regex`, `important` |
|