@jackbernnie/hiyf 0.1.7 → 0.2.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 +22 -0
- package/dist/stylex.css +63 -63
- package/package.json +3 -1
- package/src/theme-template.css +98 -0
package/README.md
CHANGED
|
@@ -42,6 +42,28 @@ Ships compiled JS + types + CSS; works in Vite, Next.js (App Router — `'use cl
|
|
|
42
42
|
directives are preserved), and any bundler. Full setup: see the repository's
|
|
43
43
|
`USAGE.md`.
|
|
44
44
|
|
|
45
|
+
## Theming (re-skin without forking)
|
|
46
|
+
|
|
47
|
+
Every token indirects through a stable CSS variable, so you can re-skin the whole
|
|
48
|
+
system from your own CSS — no fork, no StyleX plugin. The shadcn palette/radius
|
|
49
|
+
live in `--radius`/`--primary`/… ; the `Box`/`Text` primitive tokens live in
|
|
50
|
+
`--hiyf-*`. Override any of them:
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
@import "@jackbernnie/hiyf/theme.css";
|
|
54
|
+
@import "@jackbernnie/hiyf/styles.css";
|
|
55
|
+
|
|
56
|
+
:root {
|
|
57
|
+
--radius: 0.5rem; /* component corners */
|
|
58
|
+
--primary: oklch(0.55 0.2 264);
|
|
59
|
+
--hiyf-space-m: 14px; /* Box gap/padding="m" everywhere */
|
|
60
|
+
--hiyf-radius-m: 10px; /* Box borderRadius="m" */
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Defaults are unchanged unless you override. See **`@jackbernnie/hiyf/theme-template.css`**
|
|
65
|
+
for the full list of every overridable variable.
|
|
66
|
+
|
|
45
67
|
## For AI coding agents
|
|
46
68
|
|
|
47
69
|
This package ships an **`AGENTS.md`** with the complete rules, token vocabulary,
|
package/dist/stylex.css
CHANGED
|
@@ -1,100 +1,100 @@
|
|
|
1
1
|
:root, .x1yvbn9g {
|
|
2
|
-
--x1bpj6mm: none;
|
|
3
|
-
--xk4tqw9: 0 1px 2px #0000000d;
|
|
4
|
-
--x12cdk85: 0 0px 15px #0000000a, 0 0px 2px #0000000f;
|
|
5
|
-
--xssuu6: 0 0px 20px #0000000a, 0 0px 5px #0000000f;
|
|
6
|
-
--x1lz7a6k: 0 0px 30px #0000000a, 0 0px 10px #0000000f;
|
|
2
|
+
--x1bpj6mm: var(--hiyf-shadow-none, none);
|
|
3
|
+
--xk4tqw9: var(--hiyf-shadow-s, 0 1px 2px #0000000d);
|
|
4
|
+
--x12cdk85: var(--hiyf-shadow-m, 0 0px 15px #0000000a, 0 0px 2px #0000000f);
|
|
5
|
+
--xssuu6: var(--hiyf-shadow-l, 0 0px 20px #0000000a, 0 0px 5px #0000000f);
|
|
6
|
+
--x1lz7a6k: var(--hiyf-shadow-xl, 0 0px 30px #0000000a, 0 0px 10px #0000000f);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
:root, .xq51erv {
|
|
10
|
-
--x1dulp5n: 0s;
|
|
11
|
-
--x1cobr8s: .12s;
|
|
12
|
-
--xx13mrz: .2s;
|
|
13
|
-
--x1x0p2eb: .32s;
|
|
14
|
-
--xfeph44: .48s;
|
|
10
|
+
--x1dulp5n: var(--hiyf-duration-instant, 0s);
|
|
11
|
+
--x1cobr8s: var(--hiyf-duration-fast, .12s);
|
|
12
|
+
--xx13mrz: var(--hiyf-duration-base, .2s);
|
|
13
|
+
--x1x0p2eb: var(--hiyf-duration-slow, .32s);
|
|
14
|
+
--xfeph44: var(--hiyf-duration-slower, .48s);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
:root, .xe12k8q {
|
|
18
|
-
--x1gf3f8t: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
|
|
19
|
-
--xqrwy3f: var(--lightningcss-light, #6a7282) var(--lightningcss-dark, #7d7f8c);
|
|
20
|
-
--x13e1qfx: var(--lightningcss-light, #99a1af) var(--lightningcss-dark, #71727a);
|
|
21
|
-
--x1osny8q: var(--lightningcss-light, #00bb7e) var(--lightningcss-dark, #00bb7e);
|
|
22
|
-
--x1mixa3t: var(--lightningcss-light, #fb2c38) var(--lightningcss-dark, #fb2c38);
|
|
23
|
-
--x1vkc7ih: var(--lightningcss-light, #f99c00) var(--lightningcss-dark, #f99c00);
|
|
24
|
-
--xjx2sl: var(--lightningcss-light, #898f9c) var(--lightningcss-dark, #989fab);
|
|
18
|
+
--x1gf3f8t: var(--hiyf-text-primary, var(--lightningcss-light, #000) var(--lightningcss-dark, #fff));
|
|
19
|
+
--xqrwy3f: var(--hiyf-text-secondary, var(--lightningcss-light, #6a7282) var(--lightningcss-dark, #7d7f8c));
|
|
20
|
+
--x13e1qfx: var(--hiyf-text-tertiary, var(--lightningcss-light, #99a1af) var(--lightningcss-dark, #71727a));
|
|
21
|
+
--x1osny8q: var(--hiyf-text-success, var(--lightningcss-light, #00bb7e) var(--lightningcss-dark, #00bb7e));
|
|
22
|
+
--x1mixa3t: var(--hiyf-text-danger, var(--lightningcss-light, #fb2c38) var(--lightningcss-dark, #fb2c38));
|
|
23
|
+
--x1vkc7ih: var(--hiyf-text-warning, var(--lightningcss-light, #f99c00) var(--lightningcss-dark, #f99c00));
|
|
24
|
+
--xjx2sl: var(--hiyf-text-pending, var(--lightningcss-light, #898f9c) var(--lightningcss-dark, #989fab));
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
@supports (color: lab(0% 0 0)) {
|
|
28
28
|
:root, .xe12k8q {
|
|
29
|
-
--xqrwy3f: var(--lightningcss-light, lab(47.7841% -.393182 -10.0268)) var(--lightningcss-dark, lab(53.3255% 1.40297 -7.38626));
|
|
30
|
-
--x13e1qfx: var(--lightningcss-light, lab(65.9269% -.832707 -8.17473)) var(--lightningcss-dark, lab(48.1551% .864536 -4.57108));
|
|
31
|
-
--x1osny8q: var(--lightningcss-light, lab(66.9741% -58.0824 20.0982)) var(--lightningcss-dark, lab(66.9741% -58.0824 20.0982));
|
|
32
|
-
--x1mixa3t: var(--lightningcss-light, lab(55.4735% 75.1505 48.0805)) var(--lightningcss-dark, lab(55.4735% 75.1505 48.0805));
|
|
33
|
-
--x1vkc7ih: var(--lightningcss-light, lab(72.7153% 31.942 97.8348)) var(--lightningcss-dark, lab(72.7153% 31.942 97.8348));
|
|
34
|
-
--xjx2sl: var(--lightningcss-light, lab(59.3104% -.446051 -7.47464)) var(--lightningcss-dark, lab(65.1111% -.459403 -7.48129));
|
|
29
|
+
--xqrwy3f: var(--hiyf-text-secondary, var(--lightningcss-light, lab(47.7841% -.393182 -10.0268)) var(--lightningcss-dark, lab(53.3255% 1.40297 -7.38626)));
|
|
30
|
+
--x13e1qfx: var(--hiyf-text-tertiary, var(--lightningcss-light, lab(65.9269% -.832707 -8.17473)) var(--lightningcss-dark, lab(48.1551% .864536 -4.57108)));
|
|
31
|
+
--x1osny8q: var(--hiyf-text-success, var(--lightningcss-light, lab(66.9741% -58.0824 20.0982)) var(--lightningcss-dark, lab(66.9741% -58.0824 20.0982)));
|
|
32
|
+
--x1mixa3t: var(--hiyf-text-danger, var(--lightningcss-light, lab(55.4735% 75.1505 48.0805)) var(--lightningcss-dark, lab(55.4735% 75.1505 48.0805)));
|
|
33
|
+
--x1vkc7ih: var(--hiyf-text-warning, var(--lightningcss-light, lab(72.7153% 31.942 97.8348)) var(--lightningcss-dark, lab(72.7153% 31.942 97.8348)));
|
|
34
|
+
--xjx2sl: var(--hiyf-text-pending, var(--lightningcss-light, lab(59.3104% -.446051 -7.47464)) var(--lightningcss-dark, lab(65.1111% -.459403 -7.48129)));
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
:root, .x3o8qo0 {
|
|
39
|
-
--x1rar3os: 0;
|
|
40
|
-
--x1wxfz1x: 4px;
|
|
41
|
-
--x1wgg1jz: 8px;
|
|
42
|
-
--xchumnb: 12px;
|
|
43
|
-
--xxlrnop: 16px;
|
|
44
|
-
--x7r7sef: 24px;
|
|
45
|
-
--x1wjolhk: 32px;
|
|
46
|
-
--xr1xmvj: 48px;
|
|
47
|
-
--x14c7wq8: 64px;
|
|
48
|
-
--x1apyyst: 96px;
|
|
39
|
+
--x1rar3os: var(--hiyf-space-none, 0);
|
|
40
|
+
--x1wxfz1x: var(--hiyf-space-xs, 4px);
|
|
41
|
+
--x1wgg1jz: var(--hiyf-space-s, 8px);
|
|
42
|
+
--xchumnb: var(--hiyf-space-m, 12px);
|
|
43
|
+
--xxlrnop: var(--hiyf-space-l, 16px);
|
|
44
|
+
--x7r7sef: var(--hiyf-space-xl, 24px);
|
|
45
|
+
--x1wjolhk: var(--hiyf-space-2xl, 32px);
|
|
46
|
+
--xr1xmvj: var(--hiyf-space-3xl, 48px);
|
|
47
|
+
--x14c7wq8: var(--hiyf-space-4xl, 64px);
|
|
48
|
+
--x1apyyst: var(--hiyf-space-5xl, 96px);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
:root, .x1okhtjr {
|
|
52
|
-
--xb9t9qz: var(--lightningcss-light, #e5e7eb) var(--lightningcss-dark, #1d1e20);
|
|
53
|
-
--xwpvn0g: var(--lightningcss-light, #f6f6f6) var(--lightningcss-dark, #17171a);
|
|
54
|
-
--x1t6ehjk: var(--lightningcss-light, #decb56) var(--lightningcss-dark, #937400);
|
|
55
|
-
--x1gac5em: var(--lightningcss-light, #e5e7eb) var(--lightningcss-dark, #0000);
|
|
52
|
+
--xb9t9qz: var(--hiyf-border-primary, var(--lightningcss-light, #e5e7eb) var(--lightningcss-dark, #1d1e20));
|
|
53
|
+
--xwpvn0g: var(--hiyf-border-secondary, var(--lightningcss-light, #f6f6f6) var(--lightningcss-dark, #17171a));
|
|
54
|
+
--x1t6ehjk: var(--hiyf-border-warning, var(--lightningcss-light, #decb56) var(--lightningcss-dark, #937400));
|
|
55
|
+
--x1gac5em: var(--hiyf-border-card, var(--lightningcss-light, #e5e7eb) var(--lightningcss-dark, #0000));
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
@supports (color: lab(0% 0 0)) {
|
|
59
59
|
:root, .x1okhtjr {
|
|
60
|
-
--xb9t9qz: var(--lightningcss-light, lab(91.6229% -.159115 -2.26791)) var(--lightningcss-dark, lab(11.217% -.0964031 -1.54577));
|
|
61
|
-
--xwpvn0g: var(--lightningcss-light, lab(96.8849% 0 0)) var(--lightningcss-dark, lab(7.85791% .338666 -1.85103));
|
|
62
|
-
--x1t6ehjk: var(--lightningcss-light, lab(81.6491% -3.12603 59.2444)) var(--lightningcss-dark, lab(50.6081% 7.2386 80.5927));
|
|
63
|
-
--x1gac5em: var(--lightningcss-light, lab(91.6229% -.159115 -2.26791)) var(--lightningcss-dark, lab(0% 0 0 / 0));
|
|
60
|
+
--xb9t9qz: var(--hiyf-border-primary, var(--lightningcss-light, lab(91.6229% -.159115 -2.26791)) var(--lightningcss-dark, lab(11.217% -.0964031 -1.54577)));
|
|
61
|
+
--xwpvn0g: var(--hiyf-border-secondary, var(--lightningcss-light, lab(96.8849% 0 0)) var(--lightningcss-dark, lab(7.85791% .338666 -1.85103)));
|
|
62
|
+
--x1t6ehjk: var(--hiyf-border-warning, var(--lightningcss-light, lab(81.6491% -3.12603 59.2444)) var(--lightningcss-dark, lab(50.6081% 7.2386 80.5927)));
|
|
63
|
+
--x1gac5em: var(--hiyf-border-card, var(--lightningcss-light, lab(91.6229% -.159115 -2.26791)) var(--lightningcss-dark, lab(0% 0 0 / 0)));
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
:root, .xe1fndl {
|
|
68
|
-
--xewqza3: var(--lightningcss-light, #fff) var(--lightningcss-dark, #090909);
|
|
69
|
-
--x1forjiq: var(--lightningcss-light, #f9fafb) var(--lightningcss-dark, #101011);
|
|
70
|
-
--xxlbvr3: var(--lightningcss-light, #f3f4f6) var(--lightningcss-dark, #171719);
|
|
71
|
-
--xgll94b: var(--lightningcss-light, #101828) var(--lightningcss-dark, #fff);
|
|
72
|
-
--x14qjew9: var(--lightningcss-light, #f8f6e2) var(--lightningcss-dark, #6d4e0033);
|
|
73
|
-
--x1orv1ku: var(--lightningcss-light, #defeed) var(--lightningcss-dark, #00bb7e33);
|
|
74
|
-
--x1cu0ldb: var(--lightningcss-light, #fff0ee) var(--lightningcss-dark, #fb2c3833);
|
|
75
|
-
--xndb461: var(--lightningcss-light, #f0f2f5) var(--lightningcss-dark, #7a808d33);
|
|
76
|
-
--x8h3i0x: var(--lightningcss-light, #0000) var(--lightningcss-dark, #171719);
|
|
68
|
+
--xewqza3: var(--hiyf-bg-primary, var(--lightningcss-light, #fff) var(--lightningcss-dark, #090909));
|
|
69
|
+
--x1forjiq: var(--hiyf-bg-secondary, var(--lightningcss-light, #f9fafb) var(--lightningcss-dark, #101011));
|
|
70
|
+
--xxlbvr3: var(--hiyf-bg-card, var(--lightningcss-light, #f3f4f6) var(--lightningcss-dark, #171719));
|
|
71
|
+
--xgll94b: var(--hiyf-bg-inverse, var(--lightningcss-light, #101828) var(--lightningcss-dark, #fff));
|
|
72
|
+
--x14qjew9: var(--hiyf-bg-warning, var(--lightningcss-light, #f8f6e2) var(--lightningcss-dark, #6d4e0033));
|
|
73
|
+
--x1orv1ku: var(--hiyf-bg-success, var(--lightningcss-light, #defeed) var(--lightningcss-dark, #00bb7e33));
|
|
74
|
+
--x1cu0ldb: var(--hiyf-bg-danger, var(--lightningcss-light, #fff0ee) var(--lightningcss-dark, #fb2c3833));
|
|
75
|
+
--xndb461: var(--hiyf-bg-pending, var(--lightningcss-light, #f0f2f5) var(--lightningcss-dark, #7a808d33));
|
|
76
|
+
--x8h3i0x: var(--hiyf-bg-card-raised, var(--lightningcss-light, #0000) var(--lightningcss-dark, #171719));
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
@supports (color: lab(0% 0 0)) {
|
|
80
80
|
:root, .xe1fndl {
|
|
81
|
-
--x1forjiq: var(--lightningcss-light, lab(98.2596% -.247031 -.706708)) var(--lightningcss-dark, lab(4.70366% .144824 -.531313));
|
|
82
|
-
--xxlbvr3: var(--lightningcss-light, lab(96.1596% -.0823736 -1.13577)) var(--lightningcss-dark, lab(7.8027% .393994 -1.4171));
|
|
83
|
-
--xgll94b: var(--lightningcss-light, lab(8.11897% .811279 -12.254)) var(--lightningcss-dark, lab(100% 0 0));
|
|
84
|
-
--x14qjew9: var(--lightningcss-light, lab(96.7139% -1.83159 9.76751)) var(--lightningcss-dark, lab(35.6446% 9.83276 51.0473 / .2));
|
|
85
|
-
--x1orv1ku: var(--lightningcss-light, lab(97.0603% -13.025 4.60047)) var(--lightningcss-dark, lab(66.9741% -58.0824 20.0982 / .2));
|
|
86
|
-
--x1cu0ldb: var(--lightningcss-light, lab(96.1493% 12.2788 6.63452)) var(--lightningcss-dark, lab(55.4735% 75.1505 48.0805 / .2));
|
|
87
|
-
--xndb461: var(--lightningcss-light, lab(95.3398% -.150025 -1.88942)) var(--lightningcss-dark, lab(53.5095% -.430346 -7.467 / .2));
|
|
81
|
+
--x1forjiq: var(--hiyf-bg-secondary, var(--lightningcss-light, lab(98.2596% -.247031 -.706708)) var(--lightningcss-dark, lab(4.70366% .144824 -.531313)));
|
|
82
|
+
--xxlbvr3: var(--hiyf-bg-card, var(--lightningcss-light, lab(96.1596% -.0823736 -1.13577)) var(--lightningcss-dark, lab(7.8027% .393994 -1.4171)));
|
|
83
|
+
--xgll94b: var(--hiyf-bg-inverse, var(--lightningcss-light, lab(8.11897% .811279 -12.254)) var(--lightningcss-dark, lab(100% 0 0)));
|
|
84
|
+
--x14qjew9: var(--hiyf-bg-warning, var(--lightningcss-light, lab(96.7139% -1.83159 9.76751)) var(--lightningcss-dark, lab(35.6446% 9.83276 51.0473 / .2)));
|
|
85
|
+
--x1orv1ku: var(--hiyf-bg-success, var(--lightningcss-light, lab(97.0603% -13.025 4.60047)) var(--lightningcss-dark, lab(66.9741% -58.0824 20.0982 / .2)));
|
|
86
|
+
--x1cu0ldb: var(--hiyf-bg-danger, var(--lightningcss-light, lab(96.1493% 12.2788 6.63452)) var(--lightningcss-dark, lab(55.4735% 75.1505 48.0805 / .2)));
|
|
87
|
+
--xndb461: var(--hiyf-bg-pending, var(--lightningcss-light, lab(95.3398% -.150025 -1.88942)) var(--lightningcss-dark, lab(53.5095% -.430346 -7.467 / .2)));
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
:root, .xgq2g6v {
|
|
92
|
-
--xp2820d: 0;
|
|
93
|
-
--xiyndgr: 8px;
|
|
94
|
-
--x1c47loo: 12px;
|
|
95
|
-
--x1vzimgr: 16px;
|
|
96
|
-
--x1uymohs: 32px;
|
|
97
|
-
--x6mqhnb: 9999px;
|
|
92
|
+
--xp2820d: var(--hiyf-radius-none, 0);
|
|
93
|
+
--xiyndgr: var(--hiyf-radius-s, 8px);
|
|
94
|
+
--x1c47loo: var(--hiyf-radius-m, 12px);
|
|
95
|
+
--x1vzimgr: var(--hiyf-radius-l, 16px);
|
|
96
|
+
--x1uymohs: var(--hiyf-radius-xl, 32px);
|
|
97
|
+
--x6mqhnb: var(--hiyf-radius-full, 9999px);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.x1bpp3o7:not(#\#) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jackbernnie/hiyf",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "human-in-your-face — a personal, LLM-safe design system. Forked from Polar's Orbit (Apache-2.0).",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"files": [
|
|
17
17
|
"dist",
|
|
18
18
|
"src/theme.css",
|
|
19
|
+
"src/theme-template.css",
|
|
19
20
|
"AGENTS.md",
|
|
20
21
|
"LICENSE",
|
|
21
22
|
"NOTICE"
|
|
@@ -34,6 +35,7 @@
|
|
|
34
35
|
"default": "./dist/icons.js"
|
|
35
36
|
},
|
|
36
37
|
"./theme.css": "./src/theme.css",
|
|
38
|
+
"./theme-template.css": "./src/theme-template.css",
|
|
37
39
|
"./styles.css": "./dist/stylex.css",
|
|
38
40
|
"./*": {
|
|
39
41
|
"types": "./dist/components/*.d.ts",
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/* ──────────────────────────────────────────────────────────────────────────
|
|
2
|
+
* HIYF theme template
|
|
3
|
+
*
|
|
4
|
+
* Copy any of these into your app's CSS (after importing @jackbernnie/hiyf/theme.css
|
|
5
|
+
* and styles.css) and set your own values to RE-SKIN the whole design system.
|
|
6
|
+
* Every line is optional — unset variables fall back to HIYF's shipped defaults.
|
|
7
|
+
* No fork, no StyleX plugin.
|
|
8
|
+
*
|
|
9
|
+
* Two layers:
|
|
10
|
+
* 1. Component palette + radius (the shadcn layer) — light in :root, dark in .dark
|
|
11
|
+
* 2. --hiyf-* primitive tokens (Box / Text spacing, radius, colors, shadow, motion)
|
|
12
|
+
*
|
|
13
|
+
* For the brownfield "adopt the app's style" flow, a tool fills these in from the
|
|
14
|
+
* existing codebase (one gray per role, the modal radius, the spacing rhythm, …).
|
|
15
|
+
* ────────────────────────────────────────────────────────────────────────── */
|
|
16
|
+
|
|
17
|
+
:root {
|
|
18
|
+
/* ── Component palette — LIGHT (shadcn layer) ──────────────────────────── */
|
|
19
|
+
/* --radius: 0.75rem; */
|
|
20
|
+
/* --background: oklch(1 0 0); */
|
|
21
|
+
/* --foreground: oklch(0.145 0 0); */
|
|
22
|
+
/* --card: oklch(1 0 0); */
|
|
23
|
+
/* --card-foreground: oklch(0.145 0 0); */
|
|
24
|
+
/* --popover: oklch(1 0 0); */
|
|
25
|
+
/* --popover-foreground: oklch(0.145 0 0); */
|
|
26
|
+
/* --primary: oklch(0.205 0 0); */
|
|
27
|
+
/* --primary-foreground: oklch(0.985 0 0); */
|
|
28
|
+
/* --secondary: oklch(0.97 0 0); */
|
|
29
|
+
/* --secondary-foreground: oklch(0.205 0 0); */
|
|
30
|
+
/* --muted: oklch(0.97 0 0); */
|
|
31
|
+
/* --muted-foreground: oklch(0.556 0 0); */
|
|
32
|
+
/* --accent: oklch(0.97 0 0); */
|
|
33
|
+
/* --accent-foreground: oklch(0.205 0 0); */
|
|
34
|
+
/* --destructive: oklch(0.577 0.245 27.325); */
|
|
35
|
+
/* --border: oklch(0.922 0 0); */
|
|
36
|
+
/* --input: oklch(0.922 0 0); */
|
|
37
|
+
/* --ring: oklch(0.708 0 0); */
|
|
38
|
+
/* --chart-1: oklch(0.646 0.222 41.116); */
|
|
39
|
+
/* --chart-2: oklch(0.6 0.118 184.704); */
|
|
40
|
+
/* --chart-3: oklch(0.398 0.07 227.392); */
|
|
41
|
+
/* --chart-4: oklch(0.828 0.189 84.429); */
|
|
42
|
+
/* --chart-5: oklch(0.769 0.188 70.08); */
|
|
43
|
+
|
|
44
|
+
/* ── Primitive tokens — Box / Text (the --hiyf-* layer) ────────────────── */
|
|
45
|
+
|
|
46
|
+
/* Spacing — padding / margin / gap */
|
|
47
|
+
/* --hiyf-space-xs: 4px; */
|
|
48
|
+
/* --hiyf-space-s: 8px; */
|
|
49
|
+
/* --hiyf-space-m: 12px; */
|
|
50
|
+
/* --hiyf-space-l: 16px; */
|
|
51
|
+
/* --hiyf-space-xl: 24px; */
|
|
52
|
+
/* --hiyf-space-2xl: 32px; */
|
|
53
|
+
/* --hiyf-space-3xl: 48px; */
|
|
54
|
+
/* --hiyf-space-4xl: 64px; */
|
|
55
|
+
/* --hiyf-space-5xl: 96px; */
|
|
56
|
+
|
|
57
|
+
/* Corner radius (Box borderRadius) */
|
|
58
|
+
/* --hiyf-radius-s: 8px; */
|
|
59
|
+
/* --hiyf-radius-m: 12px; */
|
|
60
|
+
/* --hiyf-radius-l: 16px; */
|
|
61
|
+
/* --hiyf-radius-xl: 32px; */
|
|
62
|
+
|
|
63
|
+
/* Surfaces (Box backgroundColor) — a value, or a light-dark(light, dark) pair */
|
|
64
|
+
/* --hiyf-bg-primary: light-dark(#ffffff, hsl(233, 4%, 3.5%)); */
|
|
65
|
+
/* --hiyf-bg-secondary: light-dark(oklch(0.985 0.002 247.839), hsl(233, 4%, 6.5%)); */
|
|
66
|
+
/* --hiyf-bg-card: light-dark(oklch(96.7% 0.003 264.54), hsl(233, 4%, 9.5%)); */
|
|
67
|
+
|
|
68
|
+
/* Text colors (Box color) */
|
|
69
|
+
/* --hiyf-text-primary: light-dark(#000000, #ffffff); */
|
|
70
|
+
/* --hiyf-text-secondary: light-dark(oklch(0.551 0.027 264.364), oklch(0.599 0.02 279.8)); */
|
|
71
|
+
/* --hiyf-text-tertiary: light-dark(oklch(0.707 0.022 261.325), hsl(233, 4%, 46%)); */
|
|
72
|
+
|
|
73
|
+
/* Borders (Box borderColor) */
|
|
74
|
+
/* --hiyf-border-primary: light-dark(oklch(0.928 0.006 264.531), hsl(233, 4%, 12%)); */
|
|
75
|
+
/* --hiyf-border-card: light-dark(oklch(0.928 0.006 264.531), transparent); */
|
|
76
|
+
|
|
77
|
+
/* Elevation (Box boxShadow) */
|
|
78
|
+
/* --hiyf-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.05); */
|
|
79
|
+
/* --hiyf-shadow-m: 0 0px 15px rgba(0, 0, 0, 0.04), 0 0px 2px rgba(0, 0, 0, 0.06); */
|
|
80
|
+
|
|
81
|
+
/* Motion (Box transitionDuration) */
|
|
82
|
+
/* --hiyf-duration-fast: 120ms; */
|
|
83
|
+
/* --hiyf-duration-base: 200ms; */
|
|
84
|
+
/* --hiyf-duration-slow: 320ms; */
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.dark {
|
|
88
|
+
/* ── Component palette — DARK (shadcn layer) ───────────────────────────── */
|
|
89
|
+
/* --background: oklch(0.145 0 0); */
|
|
90
|
+
/* --foreground: oklch(0.985 0 0); */
|
|
91
|
+
/* --card: oklch(0.205 0 0); */
|
|
92
|
+
/* --primary: oklch(0.922 0 0); */
|
|
93
|
+
/* --border: oklch(1 0 0 / 10%); */
|
|
94
|
+
/* … (same keys as :root above) */
|
|
95
|
+
|
|
96
|
+
/* Note: the --hiyf-* surface/text/border tokens already carry their own
|
|
97
|
+
* light/dark via light-dark(), so they usually don't need a .dark block. */
|
|
98
|
+
}
|