@jackbernnie/hiyf 0.1.7 → 0.3.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.
Files changed (9) hide show
  1. package/AGENTS.md +23 -3
  2. package/README.md +25 -3
  3. package/dist/components/Image.d.ts +36 -0
  4. package/dist/components/Image.js +40 -0
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +1 -0
  7. package/dist/stylex.css +63 -63
  8. package/package.json +4 -2
  9. package/src/theme-template.css +98 -0
package/AGENTS.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Building UI with `@jackbernnie/hiyf`
2
2
 
3
3
  > Instructions for AI coding agents (Claude Code, Codex, Cursor, …). This project
4
- > uses the **hiyf** design system with its **lockdown** lint. Build UI using
5
- > **only** this system — off-system code fails the build on purpose.
4
+ > uses the **hiyf** AI design protocol (a locked design system) with its **lockdown**
5
+ > lint. Build UI using **only** this system — off-system code fails the build on purpose.
6
6
 
7
7
  ## The three rules (these fail `npm run build`)
8
8
 
@@ -93,7 +93,7 @@ hatch. A few key APIs:
93
93
  Full catalog — actions: ButtonGroup, Input, InputGroup, InputOTP, Textarea, Select,
94
94
  NativeSelect, Combobox, Checkbox, Switch, Slider, Toggle, ToggleGroup, RadioGroup,
95
95
  Label, Field. Feedback/display: Status, Badge, Alert, Card, Progress, Skeleton,
96
- Spinner, Avatar, Kbd, Empty, Toaster. Layout/data: Separator, AspectRatio,
96
+ Spinner, Avatar, Image, Kbd, Empty, Toaster. Layout/data: Separator, AspectRatio,
97
97
  ScrollArea, Table, Carousel, Grid, GridItem. Navigation: Tabs, Accordion,
98
98
  Collapsible, Breadcrumb, Pagination, Command, NavigationMenu, Menubar. Overlays:
99
99
  Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip, DropdownMenu,
@@ -118,6 +118,26 @@ import { Home01Icon, Search01Icon } from '@jackbernnie/hiyf/icons'
118
118
  `size`: `xs s m l xl`. `color` defaults to `current` (inherits text color, so
119
119
  icons inside buttons just work); other values: `muted accent success warning danger`.
120
120
 
121
+ ## Images
122
+
123
+ Raw `<img>` fails the build — render images through `<Image>`:
124
+
125
+ ```tsx
126
+ import { Image } from '@jackbernnie/hiyf'
127
+
128
+ <Image src="/logo.png" alt="Logo" width={120} height={32} radius="m" fit="contain" />
129
+ ```
130
+
131
+ `radius`: `none s m l xl full`. `fit`: `cover contain fill none`. `alt` is required
132
+ (pass `""` for purely decorative images).
133
+
134
+ ## A note on `<Box>` vs `<Text>` className
135
+
136
+ `<Box>` accepts `className` for standard utility classes (`flex`, `items-center`).
137
+ `<Text>` does NOT — it is closed; a `className` on it is dropped and the lint flags
138
+ it. Put layout on a `<Box>` wrapper; use Text props (`variant`, `color`, `align`,
139
+ `truncate`, `monospace`) for everything else.
140
+
121
141
  ## When something you need doesn't exist
122
142
 
123
143
  Work through this in order. **Don't get stuck, and don't expand the design system
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @jackbernnie/hiyf
2
2
 
3
- **human-in-your-face** — a personal, LLM-safe design system: the full shadcn/ui
4
- component set as a robust base, themed neutral, and closed down so the only
5
- expressible choices are correct ones.
3
+ **human-in-your-face** — an AI design protocol (a locked, LLM-safe design system):
4
+ the full shadcn/ui component set as a robust base, themed neutral, and closed down
5
+ so the only expressible choices are correct ones.
6
6
 
7
7
  ```bash
8
8
  npm install @jackbernnie/hiyf
@@ -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/components/Image.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Image — the closed, sanctioned way to render an image asset.
3
+ *
4
+ * Raw <img> fails the lockdown lint (it is an off-system escape hatch). This is
5
+ * its one home: every image on screen goes through here. There is no
6
+ * className/style escape hatch — size with width/height, shape with radius,
7
+ * control object-fit with fit.
8
+ */
9
+ declare const RADIUS: {
10
+ readonly none: "rounded-none";
11
+ readonly s: "rounded-sm";
12
+ readonly m: "rounded-md";
13
+ readonly l: "rounded-lg";
14
+ readonly xl: "rounded-xl";
15
+ readonly full: "rounded-full";
16
+ };
17
+ declare const FIT: {
18
+ readonly cover: "object-cover";
19
+ readonly contain: "object-contain";
20
+ readonly fill: "object-fill";
21
+ readonly none: "object-none";
22
+ };
23
+ export type ImageRadius = keyof typeof RADIUS;
24
+ export type ImageFit = keyof typeof FIT;
25
+ export type ImageProps = {
26
+ src: string;
27
+ /** Always required — describe the image, or pass "" for decorative images. */
28
+ alt: string;
29
+ width?: number;
30
+ height?: number;
31
+ radius?: ImageRadius;
32
+ fit?: ImageFit;
33
+ loading?: 'lazy' | 'eager';
34
+ };
35
+ export declare function Image({ src, alt, width, height, radius, fit, loading, }: ImageProps): import("react").JSX.Element;
36
+ export {};
package/dist/components/Image.js ADDED
@@ -0,0 +1,40 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { cn } from '../lib/utils.js';
3
+
4
+ const RADIUS = {
5
+ none: "rounded-none",
6
+ s: "rounded-sm",
7
+ m: "rounded-md",
8
+ l: "rounded-lg",
9
+ xl: "rounded-xl",
10
+ full: "rounded-full"
11
+ };
12
+ const FIT = {
13
+ cover: "object-cover",
14
+ contain: "object-contain",
15
+ fill: "object-fill",
16
+ none: "object-none"
17
+ };
18
+ function Image({
19
+ src,
20
+ alt,
21
+ width,
22
+ height,
23
+ radius = "none",
24
+ fit = "cover",
25
+ loading = "lazy"
26
+ }) {
27
+ return /* @__PURE__ */ jsx(
28
+ "img",
29
+ {
30
+ src,
31
+ alt,
32
+ width,
33
+ height,
34
+ loading,
35
+ className: cn("inline-block max-w-full", RADIUS[radius], FIT[fit])
36
+ }
37
+ );
38
+ }
39
+
40
+ export { Image };
package/dist/index.d.ts CHANGED
@@ -60,6 +60,8 @@ export { Spinner } from './components/Spinner';
60
60
  export type { SpinnerProps } from './components/Spinner';
61
61
  export { Avatar } from './components/Avatar';
62
62
  export type { AvatarProps } from './components/Avatar';
63
+ export { Image } from './components/Image';
64
+ export type { ImageProps, ImageRadius, ImageFit } from './components/Image';
63
65
  export { Kbd } from './components/Kbd';
64
66
  export type { KbdProps } from './components/Kbd';
65
67
  export { Empty } from './components/Empty';
package/dist/index.js CHANGED
@@ -29,6 +29,7 @@ export { Progress } from './components/Progress.js';
29
29
  export { Skeleton } from './components/Skeleton.js';
30
30
  export { Spinner } from './components/Spinner.js';
31
31
  export { Avatar } from './components/Avatar.js';
32
+ export { Image } from './components/Image.js';
32
33
  export { Kbd } from './components/Kbd.js';
33
34
  export { Empty } from './components/Empty.js';
34
35
  export { Toaster } from './components/Toaster.js';
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,7 +1,7 @@
1
1
  {
2
2
  "name": "@jackbernnie/hiyf",
3
- "version": "0.1.7",
4
- "description": "human-in-your-face — a personal, LLM-safe design system. Forked from Polar's Orbit (Apache-2.0).",
3
+ "version": "0.3.0",
4
+ "description": "human-in-your-face — an AI design protocol (a locked, LLM-safe design system). Forked from Polar's Orbit (Apache-2.0).",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "sideEffects": [
@@ -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",
package/src/theme-template.css ADDED
@@ -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
+ }