@jasonruesch/tokens 0.1.0 → 0.1.2
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 +82 -0
- package/dist/css/theme-light.css +1 -1
- package/dist/ts/tokens.js +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# @jasonruesch/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for the design system, authored in [W3C DTCG](https://www.w3.org/community/design-tokens/)
|
|
4
|
+
JSON and compiled with [Style Dictionary](https://styledictionary.com/) into CSS
|
|
5
|
+
custom properties (`--ds-*`) and a typed TypeScript object.
|
|
6
|
+
|
|
7
|
+
Tokens are layered **primitive → semantic → component**:
|
|
8
|
+
|
|
9
|
+
- **Primitive** — raw values (color scales, dimensions, typography, shadow) on `:root`.
|
|
10
|
+
- **Semantic** — intent-based aliases (`bg`, `fg`, `accent`, `danger`, …) that
|
|
11
|
+
switch with `data-theme`.
|
|
12
|
+
- **Component** — component-scoped values that reference the semantic layer.
|
|
13
|
+
- **Brand** — per-brand overrides applied with `data-brand`.
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install @jasonruesch/tokens
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
### CSS variables
|
|
24
|
+
|
|
25
|
+
Import the full cascade (primitives, light/dark themes, brand, components):
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
@import "@jasonruesch/tokens/css";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
…or import individual layers:
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@import "@jasonruesch/tokens/css/variables.css"; /* primitives → :root */
|
|
35
|
+
@import "@jasonruesch/tokens/css/theme-light.css"; /* [data-theme~="light"] */
|
|
36
|
+
@import "@jasonruesch/tokens/css/theme-dark.css"; /* [data-theme~="dark"] */
|
|
37
|
+
@import "@jasonruesch/tokens/css/brand-acme.css"; /* [data-brand="acme"] */
|
|
38
|
+
@import "@jasonruesch/tokens/css/components.css"; /* component layer → :root */
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Then reference the variables and switch theme/brand on any ancestor element — no
|
|
42
|
+
rebuild required:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<html data-theme="dark" data-brand="acme">
|
|
46
|
+
<button
|
|
47
|
+
style="background: var(--ds-color-accent-default); color: var(--ds-color-fg-on-accent)"
|
|
48
|
+
>
|
|
49
|
+
Save
|
|
50
|
+
</button>
|
|
51
|
+
</html>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### TypeScript / JavaScript
|
|
55
|
+
|
|
56
|
+
Resolved values (light theme as canonical) are also available as a typed object:
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
import { tokens, type TokenName } from "@jasonruesch/tokens";
|
|
60
|
+
|
|
61
|
+
tokens["color.accent.default"]; // "#2563eb"
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Exports
|
|
65
|
+
|
|
66
|
+
| Entry | Contents |
|
|
67
|
+
| --------------------------- | ------------------------------------------------- |
|
|
68
|
+
| `@jasonruesch/tokens` | Typed `tokens` object + types (`dist/ts`) |
|
|
69
|
+
| `@jasonruesch/tokens/css` | Barrel importing every CSS layer in cascade order |
|
|
70
|
+
| `@jasonruesch/tokens/css/*` | Individual CSS layer files |
|
|
71
|
+
|
|
72
|
+
## Build
|
|
73
|
+
|
|
74
|
+
Tokens are authored in `tokens/` and compiled into `dist/` by `config.mjs`:
|
|
75
|
+
|
|
76
|
+
```sh
|
|
77
|
+
pnpm build # or: pnpm tokens:build
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
MIT
|
package/dist/css/theme-light.css
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
--ds-color-bg-inverse: var(--ds-color-slate-900);
|
|
11
11
|
--ds-color-fg-default: var(--ds-color-slate-900);
|
|
12
12
|
--ds-color-fg-muted: var(--ds-color-slate-600);
|
|
13
|
-
--ds-color-fg-subtle: var(--ds-color-slate-
|
|
13
|
+
--ds-color-fg-subtle: var(--ds-color-slate-500);
|
|
14
14
|
--ds-color-fg-on-emphasis: var(--ds-color-white);
|
|
15
15
|
--ds-color-fg-on-accent: var(--ds-color-white);
|
|
16
16
|
--ds-color-border-default: var(--ds-color-slate-200);
|
package/dist/ts/tokens.js
CHANGED
|
@@ -64,7 +64,7 @@ export const tokens = {
|
|
|
64
64
|
"color.bg.inverse": "#0f172a",
|
|
65
65
|
"color.fg.default": "#0f172a",
|
|
66
66
|
"color.fg.muted": "#475569",
|
|
67
|
-
"color.fg.subtle": "#
|
|
67
|
+
"color.fg.subtle": "#64748b",
|
|
68
68
|
"color.fg.onEmphasis": "#ffffff",
|
|
69
69
|
"color.fg.onAccent": "#ffffff",
|
|
70
70
|
"color.border.default": "#e2e8f0",
|