@silknet-ds/tokens 0.1.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 +74 -0
- package/dist/tokens.css +716 -0
- package/dist/tokens.dark.css +355 -0
- package/dist/tokens.light.css +355 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @silknet-ds/tokens
|
|
2
|
+
|
|
3
|
+
CSS tokens for the Silknet design system — light + dark themes. Generated from Figma Variables via Style Dictionary; this package just publishes the resulting CSS.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @silknet-ds/tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Use
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
/* In your global CSS */
|
|
15
|
+
@import '@silknet-ds/tokens/tokens.css';
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
// Or in your app entry (Vite / Next.js / CRA)
|
|
20
|
+
import '@silknet-ds/tokens/tokens.css';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This loads both light and dark theme variables. Light applies on `:root` by default; dark activates when `<html data-theme="dark">` is set.
|
|
24
|
+
|
|
25
|
+
### Light or dark only
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import '@silknet-ds/tokens/tokens.light.css';
|
|
29
|
+
import '@silknet-ds/tokens/tokens.dark.css';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Theme switching
|
|
33
|
+
|
|
34
|
+
Set the attribute on the document root:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
document.documentElement.setAttribute('data-theme', 'dark'); // or remove for light
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
For OS-driven switching:
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
const mq = matchMedia('(prefers-color-scheme: dark)');
|
|
44
|
+
const apply = () => {
|
|
45
|
+
if (mq.matches) document.documentElement.setAttribute('data-theme', 'dark');
|
|
46
|
+
else document.documentElement.removeAttribute('data-theme');
|
|
47
|
+
};
|
|
48
|
+
mq.addEventListener('change', apply);
|
|
49
|
+
apply();
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Token names
|
|
53
|
+
|
|
54
|
+
All tokens are CSS custom properties. Naming mirrors Figma 1:1, including a known typo (`--text-warrning` — double r) which is preserved intentionally so the source can drive automated updates.
|
|
55
|
+
|
|
56
|
+
Some examples:
|
|
57
|
+
|
|
58
|
+
```css
|
|
59
|
+
var(--background-primary-accent)
|
|
60
|
+
var(--background-layer)
|
|
61
|
+
var(--text-default)
|
|
62
|
+
var(--text-additional)
|
|
63
|
+
var(--digits-spacing-3) /* 12px */
|
|
64
|
+
var(--digits-radius-s) /* 12px */
|
|
65
|
+
var(--font-size-body-body-default)
|
|
66
|
+
var(--font-height-body-body-default)
|
|
67
|
+
var(--primary-16) /* alpha-blended primary */
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Browse all variables in the source files: `dist/tokens.light.css` (~360 entries).
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT
|