@anyknown/ui 0.1.0 → 0.3.0

package/README.md

@@ -6,12 +6,12 @@ AnyKnown 全產品線共用的 design system,以 [StyleX](https://stylexjs.com)
 
 - `src/tokens.stylex.ts` — semantic tokens(color / font / text / space / radius / motion / shadow)。light 為預設,dark 跟隨 OS。**唯一真相**。
 - `src/tokens.css` — 同一組值的純 CSS variables(`--ak-*`),給非 StyleX 的使用端(desktop 的 Tailwind v4 `@theme` 直接引用)。import 路徑:`@anyknown/ui/tokens.css`。
-- `src/themes.stylex.ts` — `light` / `dark` theme,給有手動切換主題的 app(套在 root element)。
+- `src/themes.stylex.ts` — `light` / `dark` theme,給有手動切換主題的 app:`<div {...stylex.props(...light)}>`。**由 `pnpm gen:themes` 從 tokens 生成**,不要手改(`themes.test.ts` 會擋住不同步)。
 - `src/scrollbar.css` — 客製捲軸(全域套用)。StyleX 做不了 `::-webkit-scrollbar` 偽元素,所以獨立成 css 檔。
-- `src/components/` — 34 個元件,每個一個 folder(`<Name>.tsx` + `<Name>.test.tsx` + `prototype.html` + `NOTES.md`)。清單與共同決策見 [components/README.md](./src/components/README.md)。
-- `src/lib/` — 共用 hooks 與生成邏輯(reduced-motion、controllable state、clipboard、weave/yarn/loom 的 SVG path 生成、diff)。
+- `src/components/` — 34 個元件,每個一個 folder(`<Name>.tsx` + `<Name>.test.tsx`)。清單與共同決策見 [components/README.md](./src/components/README.md),定案理由與走過的彎路見 [components/COMPONENTS.md](./src/components/COMPONENTS.md)。
+- `src/lib/` — 共用 hooks 與生成邏輯(reduced-motion、controllable state、clipboard、diff、`styled` 與 `reset.control`)。織體幾何在 `weave.ts`(靜態)與 `silk.ts`(動態),規格見 [components/TEXTURE-GUIDE.md](./src/components/TEXTURE-GUIDE.md)。
 - `playground/` — demo app,**不進發佈產物**。
-- `site/` — 文檔網站(全部示範 + 每個元件的 NOTES + 指南),部署到 Cloudflare Workers,**不進發佈產物**。
+- `site/` — 文檔網站(全部示範 + 四份指南),部署到 Cloudflare Workers,**不進發佈產物**。
 
 ## 開發
 
@@ -21,20 +21,20 @@ pnpm check        # turbo run typecheck lint fmt:check(平行 + 快取)
 pnpm build        # dist:ESM + d.ts + tokens.css + scrollbar.css
 pnpm verify:pack  # build 後打包,從套件外部解析 exports map 每個入口
 pnpm playground   # http://localhost:5199,用打包後的 dist 渲染全部元件
-pnpm site         # http://localhost:5200,文檔網站(示範 + NOTES 文檔)
+pnpm site         # http://localhost:5200,文檔網站(示範 + 指南)
 pnpm site:test    # 文檔網站的 jsdom 冒煙測試
-pnpm site:deploy  # build 後 wrangler deploy 到 Cloudflare Workers(需先 wrangler login)
+pnpm site:deploy  # build 後 deploy 到 https://ui.anyknown.com(需先 wrangler login)
 ```
 
-playground 的 section id 與 `prototypes.html` 一致,可以並排對照實作與原型。
+playground 與文檔站用同一組 section id,`#/demo/<name>` 直接跳到該元件。
 
-`check` / `test` / `build` 等都由 [turborepo](https://turborepo.dev) 驅動(single-package 模式,設定在 `turbo.json`),快取推到自架的 remote cache `https://turbo.anyknown.com`(team `anyknown`)。要吃到遠端快取就 export token:
+`check` / `test` / `build` 等都由 [turborepo](https://turborepo.dev) 驅動(single-package 模式,設定在 `turbo.json`),快取推到自架的 remote cache `https://turbo.anyknown.com`(team `anyknown-ui`)。要吃到遠端快取就 export token:
 
 ```bash
 export TURBO_TOKEN=<token>   # 見 turbo-cache-worker/GITHUB-SECRETS.md
 ```
 
-沒設也不會壞,只是退回本機快取。`turbo.json` 裡 `build` / `lint` / `typecheck` / `test` 的 inputs 刻意排除了 `*.md` 與 `*.html`,所以改 NOTES 或 prototype 不會讓這些 task 重跑;`site:build` / `site:test` 用預設 inputs,因為文檔網站確實會讀 NOTES。
+沒設也不會壞,只是退回本機快取。`turbo.json` 裡 `build` / `lint` / `typecheck` / `test` 的 inputs 刻意排除了 `*.md`,所以改文件不會讓這些 task 重跑;`site:build` / `site:test` 用預設 inputs,因為文檔網站會讀那些 md。
 
 ## 發佈
 
@@ -43,7 +43,7 @@ export TURBO_TOKEN=<token>   # 見 turbo-cache-worker/GITHUB-SECRETS.md
 版本由 **git tag 決定**。推一個 `v*` tag 上去,`.github/workflows/release.yml` 跑完整條 gate 再 publish;tag 與 `package.json` 的 `version` 對不上會直接失敗,不會發出去。
 
 ```bash
-# 1. 改 package.json 的 version(semver;元件 API 有 breaking change 時同步更新該元件的 NOTES.md)
+# 1. 改 package.json 的 version(semver)
 # 2. commit + 打 tag + 推
 git commit -am "release: v0.2.0"
 git tag v0.2.0
@@ -52,17 +52,20 @@ git push origin main --tags
 
 CI 跑的是 `typecheck / lint / fmt:check / test / site:test` → `verify:pack` → `npm publish`。前五項走 turbo remote cache,PR 上跑過的多半直接命中;`verify:pack` 不快取,它就是要每次重打一次 tarball、從套件外部解析 exports map。
 
-publish 目前用 `NPM_TOKEN` secret 認證。npm 的 trusted publisher 只能綁在**已存在的套件**上,而 @anyknown/ui 的第一版就是這條 workflow 發的,所以 OIDC 要等套件上了 registry 才啟用得了 —— 綁好之後把 `release.yml` publish step 的 `env` 兩行拿掉就自動走回 OIDC(`id-token: write` 已經留著)。CI 用的是 `npm publish` 而不是 `pnpm publish` — pnpm 的 OIDC 支援還沒好([pnpm#9812](https://github.com/pnpm/pnpm/issues/9812))。
+publish 走 **npm trusted publishing (OIDC)**,repo 裡不存任何 npm 憑證 —— trusted publisher 綁在 npmjs.com 的 `@anyknown/ui` → `anyknown-com/ui` / `release.yml`。CI 用的是 `npm publish` 而不是 `pnpm publish`,因為 pnpm 的 OIDC 支援還沒好([pnpm#9812](https://github.com/pnpm/pnpm/issues/9812))。
 
-CI 驗不了的只剩視覺:發之前 `pnpm playground` 開一輪,對照 `prototypes.html` 看視覺與動效沒跑掉,順手開 macOS 的「減少動態效果」再看一次。
+v0.1.0 是本機手動發的:npm 的 trusted publisher 只能綁在**已存在的套件**上,第一版繞不掉。之後都走 tag。
 
-### 一次性設定
+CI 驗不了的只剩視覺:發之前 `pnpm playground` 開一輪看視覺與動效沒跑掉,順手開 macOS 的「減少動態效果」再看一次。
 
-repo 已經在 <https://github.com/anyknown-com/ui>(public),`NPM_TOKEN` secret 也設好了,v0.1.0 由 `release.yml` 發出。剩下兩件還沒做:
+### 基礎設施現況
 
-1. **在 npmjs.com 綁 trusted publisher**:package 頁 → Settings → Trusted publisher,填 organization `anyknown-com`、repository `ui`、workflow filename `release.yml`。綁完把 `release.yml` publish step 的 `env:` 兩行刪掉,認證就從 token 換回 OIDC,`NPM_TOKEN` secret 也可以移除。
-
-2. **設 `TURBO_TOKEN` secret**(repo → Settings → Secrets and variables → Actions)。`.env` 裡的 `TURBO_API_KEY` 對 `turbo.anyknown.com` 回 401(`anyknown` 與 `anyknown-ui` 兩個 slug 都試過),要先確認 cache worker 那邊認的是哪一把。沒設也不會壞,只是 CI 每次都跑冷的。`apiUrl` 與 `teamSlug` 已經寫死在 `turbo.json`,不用另外設 variable。
+| | |
+| --- | --- |
+| repo | <https://github.com/anyknown-com/ui>(public、MIT) |
+| npm | `@anyknown/ui`,trusted publisher 綁 `anyknown-com/ui` → `release.yml` |
+| 文檔站 | <https://ui.anyknown.com>(Cloudflare Workers) |
+| remote cache | `turbo.anyknown.com`,team `anyknown-ui`;token 在 repo secret `TURBO_TOKEN`,本機 `export TURBO_TOKEN=<token>`(worker 端的來源是 `anyknown-com/turbo-cache` 的 secret binding) |
 
 ## 在各 app 使用(Vite)
 
@@ -118,4 +121,4 @@ app 自己的樣式一律引用 tokens,不寫死色值。`playground/` 就是照
 pnpm add @fontsource-variable/newsreader @fontsource-variable/geist @fontsource-variable/geist-mono
 ```
 
-Texture(線/織的品牌語言)只用在等待、過渡、儀式時刻,精確區不加花 —— 準則見 [components/ROADMAP.md](./src/components/ROADMAP.md)。
+Texture(線/織的品牌語言)只用在等待、過渡、儀式時刻與主要互動面,精確區不加花 —— 規格與適配指引見 [components/TEXTURE-GUIDE.md](./src/components/TEXTURE-GUIDE.md)。

package/dist/themes.stylex.d.ts

@@ -1,5 +1,5 @@
 import * as stylex from "@stylexjs/stylex";
-export declare const light: stylex.Theme<stylex.VarGroup<Readonly<{
+export declare const lightColor: stylex.Theme<stylex.VarGroup<Readonly<{
     bg: string;
     surface: string;
     surfaceRaised: string;
@@ -17,13 +17,73 @@ export declare const light: stylex.Theme<stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;
     successHl: string;
     dangerHl: string;
 }>, symbol>, symbol>;
-export declare const dark: stylex.Theme<stylex.VarGroup<Readonly<{
+export declare const lightYarn: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const lightYarnSecondary: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const lightYarnGhost: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const lightYarnDanger: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const lightYarnSubtle: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>, symbol>;
+export declare const lightShadow: stylex.Theme<stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>, symbol>;
+export declare const darkColor: stylex.Theme<stylex.VarGroup<Readonly<{
     bg: string;
     surface: string;
     surfaceRaised: string;
@@ -41,9 +101,226 @@ export declare const dark: stylex.Theme<stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;
     successHl: string;
     dangerHl: string;
 }>, symbol>, symbol>;
+export declare const darkYarn: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const darkYarnSecondary: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const darkYarnGhost: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const darkYarnDanger: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>;
+export declare const darkYarnSubtle: stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>, symbol>;
+export declare const darkShadow: stylex.Theme<stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>, symbol>;
+/** 套在 root element 上:`<div {...stylex.props(...light)}>` */
+export declare const light: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>, symbol>];
+export declare const dark: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>, symbol>];

package/dist/themes.stylex.js

@@ -1,15 +1,18 @@
+// 這個檔案由 scripts/themes.mjs 從 tokens.stylex.ts 生成 —— 不要手改。
+// 重生成:pnpm gen:themes(themes.test.ts 會擋住不同步)
+//
+// 給有使用者切換主題的 app(例如 next-themes)。tokens 本身跟隨 OS,套上 theme 才會鎖定。
+// **要套就整組套**:只套 color 會讓布停在另一個主題,深色布配深色字。
 import * as stylex from "@stylexjs/stylex";
-import { color } from "./tokens.stylex.js";
-// Explicit themes for apps with a user-facing theme switch (e.g. next-themes).
-// Apply on the root element: <div {...stylex.props(dark)}>.
-export const light = stylex.createTheme(color, {
+import { color, yarn, yarnSecondary, yarnGhost, yarnDanger, yarnSubtle, shadow } from "./tokens.stylex.js";
+export const lightColor = stylex.createTheme(color, {
     bg: "#FAFAF6",
     surface: "#FFFFFF",
     surfaceRaised: "#FFFFFF",
     border: "#E3E0D5",
     borderStrong: "#C8C3B4",
     text: "#23211D",
-    textMuted: "#777165",
+    textMuted: "#635D52",
     textFaint: "#9C958A",
     accent: "#23705A",
     accentText: "#FCFCF9",
@@ -20,20 +23,80 @@ export const light = stylex.createTheme(color, {
     successSubtle: "#E7F0EB",
     warning: "#9A6A1B",
     warningSubtle: "#F5EBD9",
+    info: "#2C5C86",
+    infoSubtle: "#E4EDF5",
     focusRing: "#23705A",
     bone: "#ECE9DF",
     sheen: "#F6F4EC",
     successHl: "#C6E0C6",
     dangerHl: "#EFCEC3",
 });
-export const dark = stylex.createTheme(color, {
+export const lightYarn = stylex.createTheme(yarn, {
+    un: "#11362C",
+    sh: "#123C31",
+    y0: "#1E6250",
+    y1: "#216A55",
+    y2: "#23705A",
+    y3: "#28795F",
+    y4: "#2E8266",
+    hi: "#5CAA89",
+    shadow: "drop-shadow(0 1px 1.5px rgba(18, 60, 49, 0.3))",
+});
+export const lightYarnSecondary = stylex.createTheme(yarnSecondary, {
+    un: "#CBC5B4",
+    sh: "#C9C4B4",
+    y0: "#E4E0D3",
+    y1: "#E8E5D9",
+    y2: "#EDEAE0",
+    y3: "#F1EEE6",
+    y4: "#F5F3EC",
+    hi: "#FFFFFF",
+    shadow: "drop-shadow(0 1px 1.5px rgba(80, 74, 60, 0.22))",
+});
+export const lightYarnGhost = stylex.createTheme(yarnGhost, {
+    un: "transparent",
+    sh: "transparent",
+    y0: "#DCD8CA",
+    y1: "#DFDBCE",
+    y2: "#E3E0D5",
+    y3: "#E7E4D9",
+    y4: "#EBE8DE",
+    hi: "#C8C3B4",
+    shadow: "none",
+});
+export const lightYarnDanger = stylex.createTheme(yarnDanger, {
+    un: "#401209",
+    sh: "#4A170D",
+    y0: "#8F3122",
+    y1: "#A13928",
+    y2: "#B3402E",
+    y3: "#BC4F3C",
+    y4: "#C55E4A",
+    hi: "#E39781",
+    shadow: "drop-shadow(0 1px 1.5px rgba(74, 23, 13, 0.3))",
+});
+export const lightYarnSubtle = stylex.createTheme(yarnSubtle, {
+    un: "#CFE2D9",
+    sh: "#CBDFD5",
+    y0: "#DFEBE5",
+    y1: "#E3EEE8",
+    y2: "#E7F0EB",
+    y3: "#ECF3EF",
+    y4: "#F1F7F3",
+    hi: "#FFFFFF",
+});
+export const lightShadow = stylex.createTheme(shadow, {
+    popover: "0 8px 24px rgba(35, 33, 29, 0.1)",
+    raised: "0 1px 2px rgba(35, 33, 29, 0.08)",
+});
+export const darkColor = stylex.createTheme(color, {
     bg: "#181613",
     surface: "#201D18",
     surfaceRaised: "#282420",
     border: "#35302A",
     borderStrong: "#4A443C",
     text: "#EAE6DC",
-    textMuted: "#A59B8C",
+    textMuted: "#B0A697",
     textFaint: "#736A5D",
     accent: "#4FA184",
     accentText: "#14120F",
@@ -44,9 +107,88 @@ export const dark = stylex.createTheme(color, {
     successSubtle: "#22352E",
     warning: "#D9A254",
     warningSubtle: "#3A2F1D",
+    info: "#6FA3CE",
+    infoSubtle: "#1E2C38",
     focusRing: "#4FA184",
     bone: "#2A2620",
     sheen: "#35302A",
     successHl: "#2F4A2E",
     dangerHl: "#573328",
 });
+export const darkYarn = stylex.createTheme(yarn, {
+    un: "#173629",
+    sh: "#1B4437",
+    y0: "#3F8A70",
+    y1: "#47957A",
+    y2: "#4FA184",
+    y3: "#56A98B",
+    y4: "#5EB193",
+    hi: "#8FD2B4",
+    shadow: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
+});
+export const darkYarnSecondary = stylex.createTheme(yarnSecondary, {
+    un: "#0E0C09",
+    sh: "#15120E",
+    y0: "#2B2620",
+    y1: "#2F2A23",
+    y2: "#332E26",
+    y3: "#38322A",
+    y4: "#3D372E",
+    hi: "#5E5546",
+    shadow: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))",
+});
+export const darkYarnGhost = stylex.createTheme(yarnGhost, {
+    un: "transparent",
+    sh: "transparent",
+    y0: "#2A251F",
+    y1: "#2F2A23",
+    y2: "#35302A",
+    y3: "#39342D",
+    y4: "#3E3830",
+    hi: "#57503F",
+    shadow: "none",
+});
+export const darkYarnDanger = stylex.createTheme(yarnDanger, {
+    un: "#38130B",
+    sh: "#451A10",
+    y0: "#C25842",
+    y1: "#D0644E",
+    y2: "#DD7059",
+    y3: "#E17E68",
+    y4: "#E58C77",
+    hi: "#F4BCA9",
+    shadow: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
+});
+export const darkYarnSubtle = stylex.createTheme(yarnSubtle, {
+    un: "#141F1B",
+    sh: "#17231E",
+    y0: "#1D2E27",
+    y1: "#20312B",
+    y2: "#22352E",
+    y3: "#263A32",
+    y4: "#2A4038",
+    hi: "#3E5F50",
+});
+export const darkShadow = stylex.createTheme(shadow, {
+    popover: "0 8px 24px rgba(0, 0, 0, 0.4)",
+    raised: "0 1px 2px rgba(0, 0, 0, 0.3)",
+});
+/** 套在 root element 上:`<div {...stylex.props(...light)}>` */
+export const light = [
+    lightColor,
+    lightYarn,
+    lightYarnSecondary,
+    lightYarnGhost,
+    lightYarnDanger,
+    lightYarnSubtle,
+    lightShadow,
+];
+export const dark = [
+    darkColor,
+    darkYarn,
+    darkYarnSecondary,
+    darkYarnGhost,
+    darkYarnDanger,
+    darkYarnSubtle,
+    darkShadow,
+];

package/dist/tokens.css

@@ -14,7 +14,7 @@ html {
 	--ak-border: #e3e0d5;
 	--ak-border-strong: #c8c3b4;
 	--ak-text: #23211d;
-	--ak-text-muted: #777165;
+	--ak-text-muted: #635d52;
 	--ak-text-faint: #9c958a;
 	--ak-accent: #23705a;
 	--ak-accent-text: #fcfcf9;
@@ -25,6 +25,8 @@ html {
 	--ak-success-subtle: #e7f0eb;
 	--ak-warning: #9a6a1b;
 	--ak-warning-subtle: #f5ebd9;
+	--ak-info: #2c5c86;
+	--ak-info-subtle: #e4edf5;
 	--ak-focus-ring: #23705a;
 	--ak-bone: #ece9df;
 	--ak-sheen: #f6f4ec;
@@ -48,6 +50,7 @@ html {
 	--ak-motion-slow: 400ms;
 	--ak-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
 	--ak-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+	/* 過衝曲線:全站規則是「動畫不回彈」,沒有元件在用,新的也不要用 */
 	--ak-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -59,7 +62,7 @@ html {
 		--ak-border: #35302a;
 		--ak-border-strong: #4a443c;
 		--ak-text: #eae6dc;
-		--ak-text-muted: #a59b8c;
+		--ak-text-muted: #b0a697;
 		--ak-text-faint: #736a5d;
 		--ak-accent: #4fa184;
 		--ak-accent-text: #14120f;
@@ -70,6 +73,8 @@ html {
 		--ak-success-subtle: #22352e;
 		--ak-warning: #d9a254;
 		--ak-warning-subtle: #3a2f1d;
+		--ak-info: #6fa3ce;
+		--ak-info-subtle: #1e2c38;
 		--ak-focus-ring: #4fa184;
 		--ak-bone: #2a2620;
 		--ak-sheen: #35302a;
@@ -94,7 +99,7 @@ html {
 	--ak-border: #35302a;
 	--ak-border-strong: #4a443c;
 	--ak-text: #eae6dc;
-	--ak-text-muted: #a59b8c;
+	--ak-text-muted: #b0a697;
 	--ak-text-faint: #736a5d;
 	--ak-accent: #4fa184;
 	--ak-accent-text: #14120f;
@@ -105,5 +110,7 @@ html {
 	--ak-success-subtle: #22352e;
 	--ak-warning: #d9a254;
 	--ak-warning-subtle: #3a2f1d;
+	--ak-info: #6fa3ce;
+	--ak-info-subtle: #1e2c38;
 	--ak-focus-ring: #4fa184;
 }

package/dist/tokens.stylex.d.ts

@@ -17,6 +17,8 @@ export declare const color: stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;

package/dist/tokens.stylex.js

@@ -10,7 +10,7 @@ export const color = stylex.defineVars({
     border: { default: "#E3E0D5", [DARK]: "#35302A" },
     borderStrong: { default: "#C8C3B4", [DARK]: "#4A443C" },
     text: { default: "#23211D", [DARK]: "#EAE6DC" },
-    textMuted: { default: "#777165", [DARK]: "#A59B8C" },
+    textMuted: { default: "#635D52", [DARK]: "#B0A697" },
     textFaint: { default: "#9C958A", [DARK]: "#736A5D" },
     accent: { default: "#23705A", [DARK]: "#4FA184" },
     accentText: { default: "#FCFCF9", [DARK]: "#14120F" },
@@ -21,6 +21,8 @@ export const color = stylex.defineVars({
     successSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
     warning: { default: "#9A6A1B", [DARK]: "#D9A254" },
     warningSubtle: { default: "#F5EBD9", [DARK]: "#3A2F1D" },
+    info: { default: "#2C5C86", [DARK]: "#6FA3CE" },
+    infoSubtle: { default: "#E4EDF5", [DARK]: "#1E2C38" },
     focusRing: { default: "#23705A", [DARK]: "#4FA184" },
     bone: { default: "#ECE9DF", [DARK]: "#2A2620" },
     sheen: { default: "#F6F4EC", [DARK]: "#35302A" },
@@ -145,5 +147,7 @@ export const motion = stylex.defineVars({
     slow: "400ms",
     ease: "cubic-bezier(0.25, 0.1, 0.25, 1)",
     easeOut: "cubic-bezier(0.16, 1, 0.3, 1)",
+    // 過衝曲線。全站規則是「動畫不回彈」,所以這條目前沒有任何元件在用 ——
+    // 新元件不要挑它,滑動類一律 240ms easeOut。保留只是因為它已經在發佈的 API 裡。
     spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
 });

package/package.json

@@ -1,8 +1,16 @@
 {
 	"name": "@anyknown/ui",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"description": "AnyKnown design system — StyleX tokens, themes, and 34 components",
+	"homepage": "https://ui.anyknown.com",
+	"bugs": {
+		"url": "https://github.com/anyknown-com/ui/issues"
+	},
 	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/anyknown-com/ui.git"
+	},
 	"files": [
 		"dist",
 		"LICENSE"
@@ -34,12 +42,13 @@
 		"lint": "oxlint src",
 		"fmt": "oxfmt",
 		"fmt:check": "oxfmt --check",
+		"gen:themes": "node -e \"import('./scripts/themes.mjs').then(async m => (await import('node:fs')).writeFileSync('src/themes.stylex.ts', m.generate()))\" && oxfmt src/themes.stylex.ts",
 		"check": "turbo run typecheck lint fmt:check",
 		"test": "vitest run",
 		"playground": "vite --config playground/vite.config.ts",
 		"site": "vite --config site/vite.config.ts",
 		"site:test": "vitest run --config site/smoke.config.ts",
-		"site:build": "pnpm build && vite build --config site/vite.config.ts",
+		"site:build": "pnpm build && vite build --config site/vite.config.ts && node scripts/llms-txt.mjs",
 		"site:deploy": "pnpm site:build && npx wrangler deploy --config site/wrangler.jsonc",
 		"prepublishOnly": "pnpm check && pnpm test && pnpm verify:pack",
 		"verify:pack": "pnpm build && node scripts/verify-pack.mjs"

package/dist/lib/format.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/format.test.js

@@ -1,37 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { formatBytes, formatDuration } from "./format.js";
-describe("formatBytes", () => {
-    test("formats each unit", () => {
-        expect(formatBytes(512)).toBe("512 B");
-        expect(formatBytes(2400)).toBe("2.3 KB");
-        expect(formatBytes(2_400_000)).toBe("2.3 MB");
-        expect(formatBytes(40_000_000)).toBe("38 MB");
-    });
-    test("picks the unit after rounding, not before", () => {
-        expect(formatBytes(1_048_575)).toBe("1.0 MB");
-        expect(formatBytes(1_073_741_823)).toBe("1.0 GB");
-    });
-    test("survives degenerate input", () => {
-        expect(formatBytes(0)).toBe("0 B");
-        expect(formatBytes(0.5)).toBe("1 B");
-        expect(formatBytes(-1)).toBe("0 B");
-        expect(formatBytes(Number.NaN)).toBe("0 B");
-    });
-});
-describe("formatDuration", () => {
-    test("formats milliseconds, seconds and minutes", () => {
-        expect(formatDuration(300)).toBe("300ms");
-        expect(formatDuration(8100)).toBe("8.1s");
-        expect(formatDuration(125_000)).toBe("2m 5s");
-    });
-    test("never puts 60 in the seconds slot", () => {
-        expect(formatDuration(119_500)).toBe("2m 0s");
-        expect(formatDuration(3_599_999)).toBe("60m 0s");
-        expect(formatDuration(59_950)).toBe("1m 0s");
-    });
-    test("survives degenerate input", () => {
-        expect(formatDuration(0)).toBe("0ms");
-        expect(formatDuration(-1)).toBe("0ms");
-        expect(formatDuration(Number.NaN)).toBe("0ms");
-    });
-});