@cirthcss/cirth 0.12.0 → 0.14.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 +21 -13
- package/dist/cirth.classless.css +307 -515
- package/dist/cirth.classless.min.css +1 -1
- package/dist/cirth.classless.scoped.css +307 -507
- package/dist/cirth.classless.scoped.min.css +1 -1
- package/dist/cirth.css +390 -525
- package/dist/cirth.min.css +1 -1
- package/dist/cirth.print.classless.css +127 -0
- package/dist/cirth.print.classless.min.css +1 -0
- package/dist/cirth.print.classless.scoped.css +119 -0
- package/dist/cirth.print.classless.scoped.min.css +1 -0
- package/dist/cirth.print.css +133 -0
- package/dist/cirth.print.min.css +1 -0
- package/dist/cirth.print.scoped.css +125 -0
- package/dist/cirth.print.scoped.min.css +1 -0
- package/dist/cirth.scoped.css +390 -517
- package/dist/cirth.scoped.min.css +1 -1
- package/dist/presets/plain.css +16 -0
- package/dist/presets/plain.min.css +1 -0
- package/dist/presets/playroom.css +38 -0
- package/dist/presets/playroom.min.css +1 -0
- package/package.json +7 -4
- package/dist/presets/cobalt.css +0 -95
- package/dist/presets/cobalt.min.css +0 -1
- package/dist/presets/coral.css +0 -103
- package/dist/presets/coral.min.css +0 -1
package/README.md
CHANGED
|
@@ -50,13 +50,15 @@
|
|
|
50
50
|
|
|
51
51
|
## Quickstart
|
|
52
52
|
|
|
53
|
-
Include one stylesheet and write ordinary semantic HTML.
|
|
53
|
+
Include one stylesheet and write ordinary semantic HTML. Add the print
|
|
54
|
+
sheet too if your pages get printed — it is separate so it does not weigh
|
|
55
|
+
on the first paint.
|
|
54
56
|
|
|
55
57
|
```html
|
|
56
58
|
<link
|
|
57
59
|
rel="stylesheet"
|
|
58
|
-
href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.
|
|
59
|
-
integrity="sha384-
|
|
60
|
+
href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.14.0/dist/cirth.min.css"
|
|
61
|
+
integrity="sha384-sU2A7luz2xm9uj6FZ0hdflySgcbY9uN+QeQgJzyaZaM4ujBLxiPPibqEcaG2Ckuk"
|
|
60
62
|
crossorigin="anonymous">
|
|
61
63
|
```
|
|
62
64
|
|
|
@@ -110,7 +112,7 @@ The main generated stylesheets are:
|
|
|
110
112
|
| `dist/cirth.classless.scoped.min.css` | Scoped classless build. |
|
|
111
113
|
|
|
112
114
|
All four builds share Cirth's one official theme (amber), with light and
|
|
113
|
-
dark variants. `
|
|
115
|
+
dark variants. `plain` and `playroom` are optional presets, not separate theme
|
|
114
116
|
builds — see [Presets](#presets) below and [Colors](docs/src/pages/colors.md).
|
|
115
117
|
|
|
116
118
|
### Classless
|
|
@@ -140,28 +142,34 @@ when embedding Cirth into an existing page, CMS, widget, or application shell.
|
|
|
140
142
|
|
|
141
143
|
## Presets
|
|
142
144
|
|
|
143
|
-
`
|
|
145
|
+
`plain` and `playroom` are optional presets: stylesheets that override an
|
|
144
146
|
existing set of custom properties (color, shadow, type, spacing, motion) on
|
|
145
147
|
top of the default theme. They're worked examples of restyling the system,
|
|
146
148
|
not independently maintained themes — load one after the main stylesheet.
|
|
147
149
|
|
|
148
|
-
- **`
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
- **`plain`** — the conventional application baseline: a familiar blue
|
|
151
|
+
accent, a plain white page, headings in the body face. Four declarations,
|
|
152
|
+
all of them input tokens: the accent's fill, hover, focus ring and
|
|
153
|
+
underline tint derive from `--cirth-primary` on their own.
|
|
154
|
+
- **`playroom`** — the expressive end: a soft violet accent, surfaces
|
|
155
|
+
tinted toward it, large radii, a rounded system face, generous spacing,
|
|
156
|
+
springy motion. Reaches across colour, geometry, typography, motion and
|
|
157
|
+
depth, and overrides two derived tokens on purpose so its hover lightens
|
|
158
|
+
instead of darkening.
|
|
159
|
+
|
|
160
|
+
Between them they are one worked example read from both ends: how little a
|
|
161
|
+
retheme can be, and how far one can go.
|
|
154
162
|
|
|
155
163
|
Like the default theme, presets stick to fonts that ship with every major
|
|
156
164
|
OS — no `@import`, no webfont, zero network requests.
|
|
157
165
|
|
|
158
166
|
```html
|
|
159
167
|
<link rel="stylesheet" href="dist/cirth.min.css">
|
|
160
|
-
<link rel="stylesheet" href="dist/presets/
|
|
168
|
+
<link rel="stylesheet" href="dist/presets/plain.min.css">
|
|
161
169
|
```
|
|
162
170
|
|
|
163
171
|
```js
|
|
164
|
-
import "@cirthcss/cirth/presets/
|
|
172
|
+
import "@cirthcss/cirth/presets/plain";
|
|
165
173
|
```
|
|
166
174
|
|
|
167
175
|
See [Colors](docs/src/pages/colors.md) for what each preset changes.
|