@kwtv/tokens 0.2.0 → 0.4.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 +11 -8
- package/package.json +1 -1
- package/tokens/tokens.css +5 -4
- package/tokens/utilities.css +1 -1
package/README.md
CHANGED
|
@@ -15,8 +15,11 @@ Import the CSS once in your app's root layout:
|
|
|
15
15
|
---
|
|
16
16
|
import "@kwtv/tokens/tokens.css";
|
|
17
17
|
---
|
|
18
|
+
|
|
18
19
|
<html lang="nl">
|
|
19
|
-
<body
|
|
20
|
+
<body>
|
|
21
|
+
<slot />
|
|
22
|
+
</body>
|
|
20
23
|
</html>
|
|
21
24
|
```
|
|
22
25
|
|
|
@@ -25,13 +28,13 @@ The default theme follows the operating system. Set `data-theme="light"` or
|
|
|
25
28
|
|
|
26
29
|
## Exports
|
|
27
30
|
|
|
28
|
-
| Import
|
|
29
|
-
|
|
|
30
|
-
| `@kwtv/tokens/tokens.css`
|
|
31
|
-
| `@kwtv/tokens/utilities.css` | Optional utility classes. Load after the tokens.
|
|
32
|
-
| `@kwtv/tokens/tokens.json`
|
|
33
|
-
| `@kwtv/tokens/tokens.scss`
|
|
34
|
-
| `@kwtv/tokens`
|
|
31
|
+
| Import | Contents |
|
|
32
|
+
| ---------------------------- | ------------------------------------------------------------------ |
|
|
33
|
+
| `@kwtv/tokens/tokens.css` | CSS custom properties and theme rules. |
|
|
34
|
+
| `@kwtv/tokens/utilities.css` | Optional utility classes. Load after the tokens. |
|
|
35
|
+
| `@kwtv/tokens/tokens.json` | Token data for tools and applications. |
|
|
36
|
+
| `@kwtv/tokens/tokens.scss` | SCSS variables. |
|
|
37
|
+
| `@kwtv/tokens` | Typed token exports as TypeScript source, supported by Astro/Vite. |
|
|
35
38
|
|
|
36
39
|
The root TypeScript entry requires a toolchain that processes TypeScript
|
|
37
40
|
dependencies. The CSS, SCSS and JSON entries do not require it.
|
package/package.json
CHANGED
package/tokens/tokens.css
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/* Generated by scripts/build-tokens.py. Do not edit by hand. */
|
|
2
2
|
|
|
3
|
-
@layer
|
|
3
|
+
@layer reset, tokens, base, components, motion, utilities;
|
|
4
|
+
@layer tokens.palette, tokens.theme, tokens.scale;
|
|
4
5
|
|
|
5
|
-
@layer palette {
|
|
6
|
+
@layer tokens.palette {
|
|
6
7
|
:root {
|
|
7
8
|
--sage-xlight: #DCF1E8;
|
|
8
9
|
--sage-light: #B1C9BF;
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
|
|
42
|
-
@layer theme {
|
|
43
|
+
@layer tokens.theme {
|
|
43
44
|
:root {
|
|
44
45
|
/* Both themes named explicitly, so either can be referenced
|
|
45
46
|
directly regardless of which one is active. */
|
|
@@ -319,7 +320,7 @@
|
|
|
319
320
|
}
|
|
320
321
|
}
|
|
321
322
|
|
|
322
|
-
@layer scale {
|
|
323
|
+
@layer tokens.scale {
|
|
323
324
|
:root {
|
|
324
325
|
/* Type family */
|
|
325
326
|
--font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|