@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 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.1.7",
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
+ }