@askewly/design 0.5.0 → 0.6.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 (13) hide show
  1. package/README.md +34 -31
  2. package/data/askewly.css +56 -56
  3. package/data/assets.json +1 -0
  4. package/data/knowledge.json +1 -1
  5. package/data/recipes.json +1 -1
  6. package/data/terms.json +1 -1
  7. package/dist/assets.js +83 -0
  8. package/dist/data.js +90 -0
  9. package/dist/index.js +121 -0
  10. package/dist/inject.js +13 -0
  11. package/dist/mascot.js +25 -25
  12. package/dist/site.js +113 -0
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -1,31 +1,34 @@
1
- # @askewly/design
2
-
3
- Query, inject, and verify the [Askewly Design](https://ui.askewly.com) system from your terminal or coding agent.
4
-
5
- ```bash
6
- npx @askewly/design verify src
7
- ```
8
-
9
- ## Commands
10
-
11
- | Command | What it does |
12
- |---|---|
13
- | `verify [dir]` | Scan for color values that bypass the token system — hex literals and raw `rgb()`/`hsl()`/`oklch()`. Comments and SVG markup are exempt. |
14
- | `terms search <query>` | Search the UI vocabulary (562 terms, Korean + English). |
15
- | `terms show <id>` | Definition, aliases, visual anatomy, anti-use cases, prompt phrases. |
16
- | `tokens` | Print the design token set. |
17
- | `init [dir]` | Drop token CSS into a project. |
18
- | `add <recipe>` | Add a component recipe. |
19
- | `recipes list` / `recipes show <id>` | Agent-ready implementation contracts (45 recipes). |
20
-
21
- ## Why `verify` exists
22
-
23
- A screenshot cannot tell `#3B82F6` from `var(--color-accent)` — they render identically. Whether a screen actually uses the token system is a question for a machine, not an eye.
24
-
25
- `verify` exits `1` on violations and prints `file:line [rule] excerpt`, so a coding agent can read the list, fix, and re-measure.
26
-
27
- Exempt by design: generated token files (`tokens.css`, `askewly.css`), build directories, comments, and SVG markup.
28
-
29
- ## License
30
-
31
- MIT
1
+ # @askewly/design
2
+
3
+ Query, inject, and verify the [Askewly Design](https://ui.askewly.com) system from your terminal or coding agent.
4
+
5
+ ```bash
6
+ npx @askewly/design verify src
7
+ ```
8
+
9
+ ## Commands
10
+
11
+ | Command | What it does |
12
+ |---|---|
13
+ | `verify [dir]` | Scan for color values that bypass the token system — hex literals and raw `rgb()`/`hsl()`/`oklch()`. Comments and SVG markup are exempt. |
14
+ | `terms search <query>` | Search the UI vocabulary (562 terms, Korean + English). |
15
+ | `terms show <id>` | Definition, aliases, visual anatomy, anti-use cases, prompt phrases. |
16
+ | `tokens` | Print the design token set. |
17
+ | `init [dir]` | Drop token CSS into a project. |
18
+ | `add <recipe>` | Add a component recipe. |
19
+ | `recipes list` / `recipes show <id>` | Agent-ready implementation contracts (45 recipes). |
20
+ | `assets search <query>` / `assets show <id>` | One md per asset (registry + recipes): definition, usage rules, install command. Bundled, works offline. `show` on an unknown id exits `1` with 3 closest ids (0.6.0). |
21
+ | `site list` / `site get <slug> [dir]` | Download a reproduced-site bundle: structure only (code, layout, motion, text). Images are same-size blank placeholders; video, audio and fonts are left out (originals stay with their owners). Verifies sha256, refuses a non-empty dir, unknown slug exits `1` with closest slugs. Base URL override: `ASKEWLY_SITE_BUNDLE_URL`. |
22
+ | `prompt <id>` | Paste-ready agent prompt: asset md URL + install command + usage rules + one-line instruction (0.6.0). |
23
+
24
+ ## Why `verify` exists
25
+
26
+ A screenshot cannot tell `#3B82F6` from `var(--color-accent)` — they render identically. Whether a screen actually uses the token system is a question for a machine, not an eye.
27
+
28
+ `verify` exits `1` on violations and prints `file:line [rule] excerpt`, so a coding agent can read the list, fix, and re-measure.
29
+
30
+ Exempt by design: generated token files (`tokens.css`, `askewly.css`), build directories, comments, and SVG markup.
31
+
32
+ ## License
33
+
34
+ MIT
package/data/askewly.css CHANGED
@@ -5,60 +5,60 @@
5
5
 
6
6
  @custom-variant dark (&:is(.dark *));
7
7
 
8
- @theme inline {
9
- --font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
10
- --font-mono: "Geist Mono", ui-monospace, monospace;
11
- /* 타이포 스케일 SSOT 경유 (M6) — 값이 Tailwind 기본값과 동일한 단계만 배선(렌더 무손실).
12
- lg(20)·2xl(40)은 Tailwind 동명 기본값과 달라 배선하지 않는다. 2xs 는 신설 유틸(라인하이트 쌍 없음 — text-[10px] 관례와 동일). */
13
- --text-2xs: var(--font-size-2xs);
14
- --text-xs: var(--font-size-xs);
15
- --text-3xl: var(--font-size-3xl);
16
- --text-5xl: var(--font-size-5xl);
17
- --text-7xl: var(--font-size-7xl);
18
- --color-background: var(--background);
19
- --color-foreground: var(--foreground);
20
- --color-card: var(--card);
21
- --color-card-foreground: var(--card-foreground);
22
- --color-popover: var(--popover);
23
- --color-popover-foreground: var(--popover-foreground);
24
- --color-primary: var(--primary);
25
- --color-primary-foreground: var(--primary-foreground);
26
- --color-secondary: var(--secondary);
27
- --color-secondary-foreground: var(--secondary-foreground);
28
- --color-muted: var(--muted);
29
- --color-muted-foreground: var(--muted-foreground);
30
- --color-accent: var(--accent);
31
- --color-accent-foreground: var(--accent-foreground);
32
- --color-destructive: var(--destructive);
33
- --color-destructive-foreground: var(--destructive-foreground);
34
- --color-border: var(--border);
35
- --color-input: var(--input);
36
- --color-ring: var(--ring);
37
- --color-scrim: var(--scrim);
38
- --color-primary-hover: var(--primary-hover);
39
- --color-emphasis-surface: var(--emphasis-surface);
40
- --color-emphasis-foreground: var(--emphasis-foreground);
41
- --color-emphasis-solid: var(--emphasis-solid);
42
- --color-emphasis-solid-hover: var(--emphasis-solid-hover);
43
- --color-emphasis-ring: var(--emphasis-ring);
44
- --color-emphasis-on-solid: var(--emphasis-on-solid);
45
- --color-info-surface: var(--info-surface);
46
- --color-info-foreground: var(--info-foreground);
47
- --color-info-link: var(--info-link);
48
- --color-info-link-hover: var(--info-link-hover);
49
- --color-success-surface: var(--success-surface);
50
- --color-success-foreground: var(--success-foreground);
51
- --color-danger-surface: var(--danger-surface);
52
- --color-danger-foreground: var(--danger-foreground);
53
- --color-danger-solid: var(--danger-solid);
54
- --color-danger-solid-hover: var(--danger-solid-hover);
55
- --radius-sm: calc(var(--radius) - 4px);
56
- --radius-md: calc(var(--radius) - 2px);
57
- --radius-lg: var(--radius);
58
- --radius-xl: calc(var(--radius) + 4px);
59
- --color-askewly-violet: var(--askewly-violet);
60
- --color-askewly-orchid: var(--askewly-orchid);
61
- --color-askewly-lavender: var(--askewly-lavender);
62
- --color-askewly-sky: var(--askewly-sky);
63
- --color-askewly-mint: var(--askewly-mint);
8
+ @theme inline {
9
+ --font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
10
+ --font-mono: "Geist Mono", ui-monospace, monospace;
11
+ /* 타이포 스케일 SSOT 경유 (M6) — 값이 Tailwind 기본값과 동일한 단계만 배선(렌더 무손실).
12
+ lg(20)·2xl(40)은 Tailwind 동명 기본값과 달라 배선하지 않는다. 2xs 는 신설 유틸(라인하이트 쌍 없음 — text-[10px] 관례와 동일). */
13
+ --text-2xs: var(--font-size-2xs);
14
+ --text-xs: var(--font-size-xs);
15
+ --text-3xl: var(--font-size-3xl);
16
+ --text-5xl: var(--font-size-5xl);
17
+ --text-7xl: var(--font-size-7xl);
18
+ --color-background: var(--background);
19
+ --color-foreground: var(--foreground);
20
+ --color-card: var(--card);
21
+ --color-card-foreground: var(--card-foreground);
22
+ --color-popover: var(--popover);
23
+ --color-popover-foreground: var(--popover-foreground);
24
+ --color-primary: var(--primary);
25
+ --color-primary-foreground: var(--primary-foreground);
26
+ --color-secondary: var(--secondary);
27
+ --color-secondary-foreground: var(--secondary-foreground);
28
+ --color-muted: var(--muted);
29
+ --color-muted-foreground: var(--muted-foreground);
30
+ --color-accent: var(--accent);
31
+ --color-accent-foreground: var(--accent-foreground);
32
+ --color-destructive: var(--destructive);
33
+ --color-destructive-foreground: var(--destructive-foreground);
34
+ --color-border: var(--border);
35
+ --color-input: var(--input);
36
+ --color-ring: var(--ring);
37
+ --color-scrim: var(--scrim);
38
+ --color-primary-hover: var(--primary-hover);
39
+ --color-emphasis-surface: var(--emphasis-surface);
40
+ --color-emphasis-foreground: var(--emphasis-foreground);
41
+ --color-emphasis-solid: var(--emphasis-solid);
42
+ --color-emphasis-solid-hover: var(--emphasis-solid-hover);
43
+ --color-emphasis-ring: var(--emphasis-ring);
44
+ --color-emphasis-on-solid: var(--emphasis-on-solid);
45
+ --color-info-surface: var(--info-surface);
46
+ --color-info-foreground: var(--info-foreground);
47
+ --color-info-link: var(--info-link);
48
+ --color-info-link-hover: var(--info-link-hover);
49
+ --color-success-surface: var(--success-surface);
50
+ --color-success-foreground: var(--success-foreground);
51
+ --color-danger-surface: var(--danger-surface);
52
+ --color-danger-foreground: var(--danger-foreground);
53
+ --color-danger-solid: var(--danger-solid);
54
+ --color-danger-solid-hover: var(--danger-solid-hover);
55
+ --radius-sm: calc(var(--radius) - 4px);
56
+ --radius-md: calc(var(--radius) - 2px);
57
+ --radius-lg: var(--radius);
58
+ --radius-xl: calc(var(--radius) + 4px);
59
+ --color-askewly-violet: var(--askewly-violet);
60
+ --color-askewly-orchid: var(--askewly-orchid);
61
+ --color-askewly-lavender: var(--askewly-lavender);
62
+ --color-askewly-sky: var(--askewly-sky);
63
+ --color-askewly-mint: var(--askewly-mint);
64
64
  }