@weasel-js/theme 0.8.0 → 1.0.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 +28 -0
- package/dist/chunk-RATE4LL3.js +786 -0
- package/dist/chunk-RATE4LL3.js.map +1 -0
- package/dist/index.d.ts +22 -240
- package/dist/index.js +83 -176
- package/dist/index.js.map +1 -1
- package/dist/react.d.ts +38 -0
- package/dist/react.js +45 -0
- package/dist/react.js.map +1 -0
- package/dist/resolveTheme-Bl6riwGu.d.ts +234 -0
- package/dist/tokens.css +36 -18
- package/package.json +13 -1
package/README.md
CHANGED
|
@@ -31,6 +31,34 @@ Modes are selected with a data attribute, which cascades:
|
|
|
31
31
|
<html data-wzl-mode="light">
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
+
## Custom themes
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { defineTheme, applyTheme } from '@weasel-js/theme';
|
|
38
|
+
|
|
39
|
+
const acme = defineTheme({
|
|
40
|
+
name: 'acme',
|
|
41
|
+
tokens: { 'accent-base': '#ff3366' }, // aliases rebase onto it
|
|
42
|
+
modes: { light: { surface: '#fffdf8' } },
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
applyTheme(document.documentElement, acme, 'light');
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
`extends` defaults to the built-in theme, so a partial theme can never be
|
|
49
|
+
accidentally incomplete. Overriding a primitive rebases every alias that
|
|
50
|
+
references it — set `accent-base` and `--wzl-accent`, `--wzl-accent-hover`,
|
|
51
|
+
`--wzl-focus-ring` and `--wzl-glass-tint` all follow.
|
|
52
|
+
|
|
53
|
+
Themes exported from a design tool load through `loadDTCG(json)` —
|
|
54
|
+
`interstellarTheme` in `@weasel-js/labkit` is a worked example, authored as a
|
|
55
|
+
DTCG document and loaded at import time.
|
|
56
|
+
|
|
57
|
+
In React, `<ThemeProvider theme={acme} mode="light">` from
|
|
58
|
+
`@weasel-js/theme/react` does the same and publishes the resolved record via
|
|
59
|
+
`useTheme()` — which is how canvas and WebGL surfaces stay in sync without
|
|
60
|
+
reading the DOM.
|
|
61
|
+
|
|
34
62
|
## Editing tokens
|
|
35
63
|
|
|
36
64
|
`src/generated/` is generated — never edit it. Change `tokens/weasel/*.json`,
|