@anyknown/ui 0.1.0

package/dist/themes.stylex.d.ts

@@ -0,0 +1,49 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const light: 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;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+}>, symbol>, symbol>;
+export declare const dark: 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;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+}>, symbol>, symbol>;

package/dist/themes.stylex.js

@@ -0,0 +1,52 @@
+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, {
+    bg: "#FAFAF6",
+    surface: "#FFFFFF",
+    surfaceRaised: "#FFFFFF",
+    border: "#E3E0D5",
+    borderStrong: "#C8C3B4",
+    text: "#23211D",
+    textMuted: "#777165",
+    textFaint: "#9C958A",
+    accent: "#23705A",
+    accentText: "#FCFCF9",
+    accentSubtle: "#E7F0EB",
+    danger: "#B3402E",
+    dangerSubtle: "#F7E7E3",
+    success: "#23705A",
+    successSubtle: "#E7F0EB",
+    warning: "#9A6A1B",
+    warningSubtle: "#F5EBD9",
+    focusRing: "#23705A",
+    bone: "#ECE9DF",
+    sheen: "#F6F4EC",
+    successHl: "#C6E0C6",
+    dangerHl: "#EFCEC3",
+});
+export const dark = stylex.createTheme(color, {
+    bg: "#181613",
+    surface: "#201D18",
+    surfaceRaised: "#282420",
+    border: "#35302A",
+    borderStrong: "#4A443C",
+    text: "#EAE6DC",
+    textMuted: "#A59B8C",
+    textFaint: "#736A5D",
+    accent: "#4FA184",
+    accentText: "#14120F",
+    accentSubtle: "#22352E",
+    danger: "#DD7059",
+    dangerSubtle: "#3D231E",
+    success: "#4FA184",
+    successSubtle: "#22352E",
+    warning: "#D9A254",
+    warningSubtle: "#3A2F1D",
+    focusRing: "#4FA184",
+    bone: "#2A2620",
+    sheen: "#35302A",
+    successHl: "#2F4A2E",
+    dangerHl: "#573328",
+});

package/dist/tokens.css

@@ -0,0 +1,109 @@
+/* Ledger tokens as plain CSS variables — for non-StyleX consumers
+ * (desktop uses Tailwind v4 @theme; reference these vars there).
+ * Source of truth: tokens.stylex.ts. Keep values in sync manually for now. */
+
+/* 展開/收合讓頁面長高時捲軸出現 → 置中內容左移;永遠留捲軸的位置。 */
+html {
+	scrollbar-gutter: stable;
+}
+
+:root {
+	--ak-bg: #fafaf6;
+	--ak-surface: #ffffff;
+	--ak-surface-raised: #ffffff;
+	--ak-border: #e3e0d5;
+	--ak-border-strong: #c8c3b4;
+	--ak-text: #23211d;
+	--ak-text-muted: #777165;
+	--ak-text-faint: #9c958a;
+	--ak-accent: #23705a;
+	--ak-accent-text: #fcfcf9;
+	--ak-accent-subtle: #e7f0eb;
+	--ak-danger: #b3402e;
+	--ak-danger-subtle: #f7e7e3;
+	--ak-success: #23705a;
+	--ak-success-subtle: #e7f0eb;
+	--ak-warning: #9a6a1b;
+	--ak-warning-subtle: #f5ebd9;
+	--ak-focus-ring: #23705a;
+	--ak-bone: #ece9df;
+	--ak-sheen: #f6f4ec;
+	--ak-success-hl: #c6e0c6;
+	--ak-danger-hl: #efcec3;
+
+	--ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
+	--ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
+
+	--ak-font-display: "Newsreader Variable", Georgia, "Times New Roman", serif;
+	--ak-font-body: "Geist Variable", system-ui, sans-serif;
+	--ak-font-mono: "Geist Mono Variable", ui-monospace, monospace;
+
+	--ak-radius-sm: 0.375rem;
+	--ak-radius-md: 0.5rem;
+	--ak-radius-lg: 0.75rem;
+	--ak-radius-xl: 1rem;
+
+	--ak-motion-fast: 120ms;
+	--ak-motion-normal: 200ms;
+	--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);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]) {
+		--ak-bg: #181613;
+		--ak-surface: #201d18;
+		--ak-surface-raised: #282420;
+		--ak-border: #35302a;
+		--ak-border-strong: #4a443c;
+		--ak-text: #eae6dc;
+		--ak-text-muted: #a59b8c;
+		--ak-text-faint: #736a5d;
+		--ak-accent: #4fa184;
+		--ak-accent-text: #14120f;
+		--ak-accent-subtle: #22352e;
+		--ak-danger: #dd7059;
+		--ak-danger-subtle: #3d231e;
+		--ak-success: #4fa184;
+		--ak-success-subtle: #22352e;
+		--ak-warning: #d9a254;
+		--ak-warning-subtle: #3a2f1d;
+		--ak-focus-ring: #4fa184;
+		--ak-bone: #2a2620;
+		--ak-sheen: #35302a;
+		--ak-success-hl: #2f4a2e;
+		--ak-danger-hl: #573328;
+
+		--ak-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.4);
+		--ak-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3);
+	}
+}
+
+[data-theme="dark"] {
+	--ak-bone: #2a2620;
+	--ak-sheen: #35302a;
+	--ak-success-hl: #2f4a2e;
+	--ak-danger-hl: #573328;
+	--ak-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.4);
+	--ak-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3);
+	--ak-bg: #181613;
+	--ak-surface: #201d18;
+	--ak-surface-raised: #282420;
+	--ak-border: #35302a;
+	--ak-border-strong: #4a443c;
+	--ak-text: #eae6dc;
+	--ak-text-muted: #a59b8c;
+	--ak-text-faint: #736a5d;
+	--ak-accent: #4fa184;
+	--ak-accent-text: #14120f;
+	--ak-accent-subtle: #22352e;
+	--ak-danger: #dd7059;
+	--ak-danger-subtle: #3d231e;
+	--ak-success: #4fa184;
+	--ak-success-subtle: #22352e;
+	--ak-warning: #d9a254;
+	--ak-warning-subtle: #3a2f1d;
+	--ak-focus-ring: #4fa184;
+}

package/dist/tokens.stylex.d.ts

@@ -0,0 +1,126 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const color: 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;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+}>, symbol>;
+export declare const yarn: stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>;
+export declare const yarnSecondary: stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>;
+export declare const yarnGhost: stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>;
+export declare const yarnDanger: stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>;
+export declare const yarnSubtle: stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>;
+export declare const shadow: stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>;
+export declare const font: stylex.VarGroup<Readonly<{
+    display: string;
+    body: string;
+    mono: string;
+}>, symbol>;
+export declare const text: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    display: string;
+    code: string;
+    leadingTight: string;
+    leadingSnug: string;
+    leadingNormal: string;
+    leadingRelaxed: string;
+}>, symbol>;
+export declare const space: stylex.VarGroup<Readonly<{
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}>, symbol>;
+export declare const radius: stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}>, symbol>;
+export declare const motion: stylex.VarGroup<Readonly<{
+    fast: string;
+    normal: string;
+    slow: string;
+    ease: string;
+    easeOut: string;
+    spring: string;
+}>, symbol>;

package/dist/tokens.stylex.js

@@ -0,0 +1,149 @@
+import * as stylex from "@stylexjs/stylex";
+// Semantic tokens for all AnyKnown products — direction B "Ledger":
+// warm paper ground, ink text, viridian accent. Light is the primary mode;
+// dark follows the OS unless a theme from themes.stylex.ts is applied.
+const DARK = "@media (prefers-color-scheme: dark)";
+export const color = stylex.defineVars({
+    bg: { default: "#FAFAF6", [DARK]: "#181613" },
+    surface: { default: "#FFFFFF", [DARK]: "#201D18" },
+    surfaceRaised: { default: "#FFFFFF", [DARK]: "#282420" },
+    border: { default: "#E3E0D5", [DARK]: "#35302A" },
+    borderStrong: { default: "#C8C3B4", [DARK]: "#4A443C" },
+    text: { default: "#23211D", [DARK]: "#EAE6DC" },
+    textMuted: { default: "#777165", [DARK]: "#A59B8C" },
+    textFaint: { default: "#9C958A", [DARK]: "#736A5D" },
+    accent: { default: "#23705A", [DARK]: "#4FA184" },
+    accentText: { default: "#FCFCF9", [DARK]: "#14120F" },
+    accentSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
+    danger: { default: "#B3402E", [DARK]: "#DD7059" },
+    dangerSubtle: { default: "#F7E7E3", [DARK]: "#3D231E" },
+    success: { default: "#23705A", [DARK]: "#4FA184" },
+    successSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
+    warning: { default: "#9A6A1B", [DARK]: "#D9A254" },
+    warningSubtle: { default: "#F5EBD9", [DARK]: "#3A2F1D" },
+    focusRing: { default: "#23705A", [DARK]: "#4FA184" },
+    bone: { default: "#ECE9DF", [DARK]: "#2A2620" },
+    sheen: { default: "#F6F4EC", [DARK]: "#35302A" },
+    successHl: { default: "#C6E0C6", [DARK]: "#2F4A2E" },
+    dangerHl: { default: "#EFCEC3", [DARK]: "#573328" },
+});
+// 織體紗線階(TEXTURE-GUIDE §3.4):un 底紗、sh 縫隙陰影、y0–y4 面紗(深→淺)、hi 挑面亮紗、
+// shadow 是整塊布的落影(§3.3「實心感落地」,掛在元件的 CSS filter 上)
+export const yarn = stylex.defineVars({
+    un: { default: "#11362C", [DARK]: "#173629" },
+    sh: { default: "#123C31", [DARK]: "#1B4437" },
+    y0: { default: "#1E6250", [DARK]: "#3F8A70" },
+    y1: { default: "#216A55", [DARK]: "#47957A" },
+    y2: { default: "#23705A", [DARK]: "#4FA184" },
+    y3: { default: "#28795F", [DARK]: "#56A98B" },
+    y4: { default: "#2E8266", [DARK]: "#5EB193" },
+    hi: { default: "#5CAA89", [DARK]: "#8FD2B4" },
+    shadow: {
+        default: "drop-shadow(0 1px 1.5px rgba(18, 60, 49, 0.3))",
+        [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
+    },
+});
+// secondary(淺色布)、ghost(疏織)、danger(§3.4 原則從 danger 衍生)、
+// subtle(accent-subtle 色系,tabs pills 取景窗用)
+export const yarnSecondary = stylex.defineVars({
+    un: { default: "#CBC5B4", [DARK]: "#0E0C09" },
+    sh: { default: "#C9C4B4", [DARK]: "#15120E" },
+    y0: { default: "#E4E0D3", [DARK]: "#2B2620" },
+    y1: { default: "#E8E5D9", [DARK]: "#2F2A23" },
+    y2: { default: "#EDEAE0", [DARK]: "#332E26" },
+    y3: { default: "#F1EEE6", [DARK]: "#38322A" },
+    y4: { default: "#F5F3EC", [DARK]: "#3D372E" },
+    hi: { default: "#FFFFFF", [DARK]: "#5E5546" },
+    shadow: {
+        default: "drop-shadow(0 1px 1.5px rgba(80, 74, 60, 0.22))",
+        [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))",
+    },
+});
+export const yarnGhost = stylex.defineVars({
+    un: { default: "transparent", [DARK]: "transparent" },
+    sh: { default: "transparent", [DARK]: "transparent" },
+    y0: { default: "#DCD8CA", [DARK]: "#2A251F" },
+    y1: { default: "#DFDBCE", [DARK]: "#2F2A23" },
+    y2: { default: "#E3E0D5", [DARK]: "#35302A" },
+    y3: { default: "#E7E4D9", [DARK]: "#39342D" },
+    y4: { default: "#EBE8DE", [DARK]: "#3E3830" },
+    hi: { default: "#C8C3B4", [DARK]: "#57503F" },
+    shadow: { default: "none", [DARK]: "none" },
+});
+export const yarnDanger = stylex.defineVars({
+    un: { default: "#401209", [DARK]: "#38130B" },
+    sh: { default: "#4A170D", [DARK]: "#451A10" },
+    y0: { default: "#8F3122", [DARK]: "#C25842" },
+    y1: { default: "#A13928", [DARK]: "#D0644E" },
+    y2: { default: "#B3402E", [DARK]: "#DD7059" },
+    y3: { default: "#BC4F3C", [DARK]: "#E17E68" },
+    y4: { default: "#C55E4A", [DARK]: "#E58C77" },
+    hi: { default: "#E39781", [DARK]: "#F4BCA9" },
+    shadow: {
+        default: "drop-shadow(0 1px 1.5px rgba(74, 23, 13, 0.3))",
+        [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
+    },
+});
+export const yarnSubtle = stylex.defineVars({
+    un: { default: "#CFE2D9", [DARK]: "#141F1B" },
+    sh: { default: "#CBDFD5", [DARK]: "#17231E" },
+    y0: { default: "#DFEBE5", [DARK]: "#1D2E27" },
+    y1: { default: "#E3EEE8", [DARK]: "#20312B" },
+    y2: { default: "#E7F0EB", [DARK]: "#22352E" },
+    y3: { default: "#ECF3EF", [DARK]: "#263A32" },
+    y4: { default: "#F1F7F3", [DARK]: "#2A4038" },
+    hi: { default: "#FFFFFF", [DARK]: "#3E5F50" },
+});
+export const shadow = stylex.defineVars({
+    popover: {
+        default: "0 8px 24px rgba(35, 33, 29, 0.1)",
+        [DARK]: "0 8px 24px rgba(0, 0, 0, 0.4)",
+    },
+    raised: {
+        default: "0 1px 2px rgba(35, 33, 29, 0.08)",
+        [DARK]: "0 1px 2px rgba(0, 0, 0, 0.3)",
+    },
+});
+export const font = stylex.defineVars({
+    display: "'Newsreader Variable', Georgia, 'Times New Roman', serif",
+    body: "'Geist Variable', system-ui, sans-serif",
+    mono: "'Geist Mono Variable', ui-monospace, monospace",
+});
+export const text = stylex.defineVars({
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.375rem",
+    xxl: "1.75rem",
+    display: "2.25rem",
+    code: "0.8125rem",
+    leadingTight: "1.2",
+    leadingSnug: "1.4",
+    leadingNormal: "1.5",
+    leadingRelaxed: "1.6",
+});
+export const space = stylex.defineVars({
+    xxs: "0.25rem",
+    xs: "0.5rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    xxl: "3rem",
+});
+export const radius = stylex.defineVars({
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    full: "9999px",
+});
+export const motion = stylex.defineVars({
+    fast: "120ms",
+    normal: "200ms",
+    slow: "400ms",
+    ease: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    easeOut: "cubic-bezier(0.16, 1, 0.3, 1)",
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+});

package/package.json

@@ -0,0 +1,81 @@
+{
+	"name": "@anyknown/ui",
+	"version": "0.1.0",
+	"description": "AnyKnown design system — StyleX tokens, themes, and 34 components",
+	"license": "MIT",
+	"files": [
+		"dist",
+		"LICENSE"
+	],
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./tokens.stylex": {
+			"types": "./dist/tokens.stylex.d.ts",
+			"default": "./dist/tokens.stylex.js"
+		},
+		"./themes.stylex": {
+			"types": "./dist/themes.stylex.d.ts",
+			"default": "./dist/themes.stylex.js"
+		},
+		"./tokens.css": "./dist/tokens.css",
+		"./scrollbar.css": "./dist/scrollbar.css"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/esm-extensions.mjs && cp src/tokens.css src/scrollbar.css dist/",
+		"typecheck": "tsc --noEmit",
+		"lint": "oxlint src",
+		"fmt": "oxfmt",
+		"fmt:check": "oxfmt --check",
+		"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: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"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.7.0",
+		"@stylexjs/stylex": "^0.19.0",
+		"diff": "^9.0.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^8.0.1",
+		"@stylexjs/babel-plugin": "0.19.0",
+		"@stylexjs/postcss-plugin": "0.19.0",
+		"@testing-library/jest-dom": "^7.0.1",
+		"@testing-library/react": "^16.3.3",
+		"@testing-library/user-event": "^14.6.6",
+		"@types/babel__core": "^7.20.5",
+		"@types/node": "^26.4.0",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.5",
+		"@vitejs/plugin-react": "^6.1.0",
+		"@vitest/coverage-v8": "^4.1.11",
+		"autoprefixer": "^10.5.4",
+		"jsdom": "^30.0.1",
+		"marked": "^18.0.11",
+		"oxfmt": "^0.65.0",
+		"oxlint": "^1.80.0",
+		"postcss": "^8.5.26",
+		"react-dom": "^19.2.8",
+		"turbo": "^2.10.9",
+		"typescript": "^5.9.0",
+		"vite": "^8.2.2",
+		"vitest": "^4.1.11"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0"
+	},
+	"packageManager": "pnpm@10.30.3"
+}