@dowel-ui/themes 0.1.0 → 0.2.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/LICENSE +1 -1
- package/README.md +65 -0
- package/package.json +28 -3
package/LICENSE
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# @dowel-ui/themes
|
|
4
|
+
|
|
5
|
+
### Design tokens in plain CSS
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@dowel-ui/themes)
|
|
8
|
+
[](https://github.com/aqkprogrammer/dowel-ui/blob/main/LICENSE)
|
|
9
|
+
|
|
10
|
+
[**Themes documentation**](https://dowel-eight.vercel.app/docs/themes)
|
|
11
|
+
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
The token layer behind [Dowel](https://dowel-eight.vercel.app). No config file,
|
|
17
|
+
no JavaScript theme object — just CSS custom properties you can read and edit.
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
/* Brings Tailwind, the raw scales and the semantic layer. */
|
|
21
|
+
@import "@dowel-ui/themes/styles.css";
|
|
22
|
+
|
|
23
|
+
/* Optional — adds the seven presets. */
|
|
24
|
+
@import "@dowel-ui/themes/presets.css";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Apply a preset with `data-theme` on `<html>`; dark mode is the `dark` class.
|
|
28
|
+
|
|
29
|
+
## Two tiers, on purpose
|
|
30
|
+
|
|
31
|
+
**Raw scales** are the palette: a cool-tinted OKLCH neutral ramp, plus status
|
|
32
|
+
hues. **Semantic aliases** are what components actually reference —
|
|
33
|
+
`--primary`, `--muted-foreground`, `--destructive`.
|
|
34
|
+
|
|
35
|
+
Components never touch the raw scale. That is what makes re-skinning the system
|
|
36
|
+
a change to a handful of aliases rather than a search across every component
|
|
37
|
+
file.
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
:root {
|
|
41
|
+
--primary: oklch(0.55 0.2 275);
|
|
42
|
+
--radius-scale: 1; /* one knob re-proportions every corner in the system */
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Seven presets, all contrast-audited
|
|
47
|
+
|
|
48
|
+
Default · Ocean · Emerald · Violet · Rose · Amber · Monochrome
|
|
49
|
+
|
|
50
|
+
Every preset passes **WCAG AA contrast in light and dark**, checked by an audit
|
|
51
|
+
that evaluates 322 colour pairs across 14 schemes on every commit. When the
|
|
52
|
+
audit first ran it found 88 failures — including that the amber preset could not
|
|
53
|
+
carry dark text on its fill at any usable lightness, so amber became an ochre.
|
|
54
|
+
That is a real trade, made knowingly, rather than a swatch that looks nice and
|
|
55
|
+
fails in use.
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
<div align="center">
|
|
60
|
+
|
|
61
|
+
[**Read the docs →**](https://dowel-eight.vercel.app/docs/themes)
|
|
62
|
+
|
|
63
|
+
MIT licensed
|
|
64
|
+
|
|
65
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,8 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dowel-ui/themes",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "
|
|
5
|
+
"description": "Two-tier OKLCH design tokens in plain CSS for Dowel, with seven presets that all pass WCAG AA contrast in light and dark.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"css",
|
|
8
|
+
"design-tokens",
|
|
9
|
+
"theme",
|
|
10
|
+
"theming",
|
|
11
|
+
"tailwind",
|
|
12
|
+
"tailwindcss",
|
|
13
|
+
"oklch",
|
|
14
|
+
"dark-mode",
|
|
15
|
+
"accessible",
|
|
16
|
+
"wcag",
|
|
17
|
+
"contrast",
|
|
18
|
+
"design-system",
|
|
19
|
+
"dowel"
|
|
20
|
+
],
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"homepage": "https://dowel-eight.vercel.app",
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "git+https://github.com/aqkprogrammer/dowel-ui.git",
|
|
26
|
+
"directory": "packages/themes"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://github.com/aqkprogrammer/dowel-ui/issues"
|
|
30
|
+
},
|
|
6
31
|
"sideEffects": [
|
|
7
32
|
"*.css"
|
|
8
33
|
],
|
|
@@ -28,7 +53,7 @@
|
|
|
28
53
|
"tailwindcss": "4.3.3",
|
|
29
54
|
"tsdown": "0.22.14",
|
|
30
55
|
"typescript": "6.0.3",
|
|
31
|
-
"@dowel-ui/config": "0.
|
|
56
|
+
"@dowel-ui/config": "0.2.0"
|
|
32
57
|
},
|
|
33
58
|
"scripts": {
|
|
34
59
|
"build": "tsdown",
|