@weasel-js/theme 0.7.2 → 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/NOTICE +18 -0
- package/README.md +61 -6
- package/dist/chunk-RATE4LL3.js +786 -0
- package/dist/chunk-RATE4LL3.js.map +1 -0
- package/dist/fonts.css +19 -0
- package/dist/index.d.ts +32 -83
- package/dist/index.js +144 -90
- 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 +104 -172
- package/fonts/OFL-Inter.txt +92 -0
- package/fonts/OFL-Oswald.txt +93 -0
- package/fonts/README.md +70 -0
- package/fonts/inter-latin.woff2 +0 -0
- package/fonts/oswald-latin-variable.woff2 +0 -0
- package/package.json +21 -2
package/NOTICE
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@weasel-js/theme
|
|
2
|
+
|
|
3
|
+
The package's source code is licensed under the MIT License (see LICENSE).
|
|
4
|
+
|
|
5
|
+
This package additionally redistributes two font binaries under the SIL Open
|
|
6
|
+
Font License, Version 1.1. The OFL applies to these files only:
|
|
7
|
+
|
|
8
|
+
fonts/oswald-latin-variable.woff2
|
|
9
|
+
Copyright 2016 The Oswald Project Authors
|
|
10
|
+
https://github.com/googlefonts/OswaldFont
|
|
11
|
+
License: fonts/OFL-Oswald.txt
|
|
12
|
+
|
|
13
|
+
fonts/inter-latin.woff2
|
|
14
|
+
Copyright (c) 2016 The Inter Project Authors
|
|
15
|
+
https://github.com/rsms/inter
|
|
16
|
+
License: fonts/OFL-Inter.txt
|
|
17
|
+
|
|
18
|
+
See fonts/README.md for the exact subsetting commands used.
|
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# @weasel-js/theme
|
|
2
2
|
|
|
3
|
-
Design tokens shared by weasel-ui and weasel-hud —
|
|
3
|
+
Design tokens shared by weasel-ui and weasel-hud — generated from a DTCG
|
|
4
|
+
source into CSS custom properties plus a parallel TS export.
|
|
4
5
|
|
|
5
6
|
Part of [weasel](https://github.com/orochi235/weasel), a domain-agnostic 2D
|
|
6
7
|
scene-graph canvas kit for React. See the
|
|
@@ -15,12 +16,66 @@ npm install @weasel-js/theme
|
|
|
15
16
|
## Usage
|
|
16
17
|
|
|
17
18
|
```ts
|
|
18
|
-
import {
|
|
19
|
-
import '@weasel-js/theme/tokens.css';
|
|
19
|
+
import { THEMES, TOKEN_MANIFEST, type TokenName } from '@weasel-js/theme';
|
|
20
|
+
import '@weasel-js/theme/tokens.css'; // required — component styles read these
|
|
21
|
+
import '@weasel-js/theme/fonts.css'; // optional — bundled Oswald + Inter
|
|
20
22
|
```
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
`tokens.css` is required; component styles reference the custom properties it
|
|
25
|
+
declares. `fonts.css` is optional — skip it and the token font stacks fall back
|
|
26
|
+
to `system-ui`. Nothing is fetched from a third-party host either way.
|
|
23
27
|
|
|
24
|
-
|
|
28
|
+
Modes are selected with a data attribute, which cascades:
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
```html
|
|
31
|
+
<html data-wzl-mode="light">
|
|
32
|
+
```
|
|
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
|
+
|
|
62
|
+
## Editing tokens
|
|
63
|
+
|
|
64
|
+
`src/generated/` is generated — never edit it. Change `tokens/weasel/*.json`,
|
|
65
|
+
then:
|
|
66
|
+
|
|
67
|
+
```sh
|
|
68
|
+
npm run gen:tokens -w @weasel-js/theme
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
CI re-runs the generator and fails if the committed output differs.
|
|
72
|
+
|
|
73
|
+
Token names are flat leaf keys inside `$type` groups: `color.fg-muted` becomes
|
|
74
|
+
`--wzl-fg-muted`. The group carries `$type` and contributes nothing to the name,
|
|
75
|
+
because `--wzl-accent` and `--wzl-accent-base` are both real tokens and DTCG
|
|
76
|
+
forbids a token that is also a group.
|
|
77
|
+
|
|
78
|
+
## Licenses
|
|
79
|
+
|
|
80
|
+
Code is MIT. The two bundled fonts are SIL Open Font License 1.1 — see `NOTICE`
|
|
81
|
+
and `fonts/README.md`.
|