sparkdesign 0.4.4 → 0.4.6

package/dist/theme-base.css

@@ -1,13 +1,12 @@
 /* ============================================
- * [POS]: src/tokens/theme-base.css - Tailwind v4 @theme 映射 + 动画 + 公共样式
- * [OUTPUT]: CSS 变量映射到 Tailwind 工具类
+ * [WHO]: Tailwind v4 `@theme` bridge, motion presets, scrollbar helpers — no palette hex here.
+ * [FROM]: Runtime vars from scale (`--font-size-*`, `--spacing-*`, `--radius-*`) and themes (`--token-color-*`).
+ * [TO]: Any bundle that imports tokens and needs Tailwind utilities resolved from CSS variables.
+ * [HERE]: src/tokens/theme-base.css — mapping contract only; literal colors live in `themes/*.css`.
  *
- * 此文件定义了 Token → Tailwind 的映射契约，不包含具体颜色值。
- * 颜色值由 themes/*.css 中的 [data-theme="xxx"] 块定义。
- *
- * 用户自定义主题时只需：
- * 1. 引入此文件（定义映射）
- * 2. 引入自己的主题 CSS（覆盖 --token-color-* 变量）
+ * [PROTOCOL]:
+ * 1. Do not embed theme colors in this file; define `--token-color-*` under `[data-theme]` in theme files.
+ * 2. Custom themes: import this for mappings, then add/override `--token-color-*` in your theme layer.
  * ============================================ */
 
 /* ============================================

package/dist/theme.css

@@ -11,7 +11,7 @@
  * ============================================ */
 
 @import "./theme-base.css";
-@import "./themes/light-qoder.css";
-@import "./themes/dark-qoder.css";
+@import "./themes/light-mint.css";
+@import "./themes/dark-mint.css";
 @import "./themes/light-parchment.css";
 @import "./themes/dark-parchment.css";

package/dist/themes/{dark-qoder.css → dark-mint.css}

@@ -1,5 +1,5 @@
 /* ============================================
- * Theme: Dark (暗色模式)
+ * Theme: Dark Mint (暗色模式)
  * 用户可复制此文件作为自定义主题模板
  * ============================================ */
 

package/dist/themes/{light-qoder.css → light-mint.css}

@@ -1,5 +1,5 @@
 /* ============================================
- * Theme: Light (亮色模式)
+ * Theme: Light Mint (亮色模式)
  * 用户可复制此文件作为自定义主题模板
  * ============================================ */
 

package/dist/tokens/AGENTS.md

@@ -0,0 +1,47 @@
+# src/tokens/
+
+> **P2** | Parent: [Root AGENTS.md](../../AGENTS.md)
+
+## Member list (CSS entrypoints)
+
+| Area | Files | Purpose |
+| ---- | ----- | ------- |
+| Bundle | `index.css` | Recommended full import |
+| Scale | `scale/`, `scale.css` (legacy) | Layout tokens (`data-style`) via config + computed + presets |
+| Theme bridge | `theme-base.css`, `theme.css` (legacy) | Tailwind `@theme` mappings, shared motion, scrollbar helpers |
+| Color packs | `themes/*.css` | Palette definitions (`--token-color-*`) |
+| Utilities | `scrollbar-utility.css` | Scrollbar styling helpers |
+
+---
+
+**Covenant:** whenever you add presets, themes, or rename token files, update this table and the root `AGENTS.md` if publishing behavior changes.
+
+---
+
+## Narrative
+
+### Two axes
+
+1. **`data-style`** — spacing, radii, typography presets (`scale/`).
+2. **`data-theme`** — color palettes independent from layout. Define **`--token-color-*`** in `:root` / `[data-theme]`, map to **`--color-*`** inside `@theme` without self-referential loops (critical for CLI consumers).
+
+### Authoring rules
+
+- Never create `@theme` entries such as `--color-primary: var(--color-primary)` — use `--token-color-*` as the source of truth.
+- Components consume **`var(--color-*)`** only; token files own the mapping.
+- When adding a preset or theme, cover spacing, radius, and font scales consistently.
+
+### Consumption modes
+
+| Mode | What happens | Consumer needs Tailwind? |
+| ---- | ------------- | ------------------------- |
+| npm package | `@tailwindcss/cli` emits `dist/sparkdesign.css` | No |
+| CLI copy | User `@import`s token CSS in their app | Tailwind v4 recommended |
+
+### Checklist
+
+- [ ] New `data-style` preset updates `scale/presets/`
+- [ ] New configurable knobs land in `scale/config.css` + `computed.css`
+- [ ] New theme file added under `themes/` and wired through `index.css`
+- [ ] Contrast checked for accessibility
+- [ ] This P2 file reflects the change

package/dist/tokens/index.css

@@ -1,22 +1,13 @@
 /* ============================================
- * [POS]: src/tokens/index.css - Token 系统统一入口
+ * [WHO]: Default token stack entry — wires scale, theme bridge, scrollbar helper, and built-in themes.
+ * [FROM]: `./scale.css`, `theme-base.css`, `themes/*.css`, `scrollbar-utility.css`.
+ * [TO]: Apps that want one import for layout + color tokens; CLI `init` / docs full-import path.
+ * [HERE]: src/tokens/index.css — bundle root; see `src/tokens/AGENTS.md` for cherry-pick imports.
  *
- * 引入方式：
- * 1. 全量引入（默认）: @import "./tokens/index.css";
- * 2. 按需引入:
- *    @import "./tokens/scale/config.css";    // 可配置基础变量
- *    @import "./tokens/scale/computed.css"; // 映射到实际变量
- *    @import "./tokens/theme-base.css";
- *    @import "./tokens/themes/light-qoder.css";
- *
- * 自定义布局配置：
- * @import "./tokens/scale/config.css";
- * @import "./tokens/scale/computed.css";
- * :root { --config-radius-default: 10px; }   // 覆盖配置
- *
- * 自定义颜色主题：
- * @import "./tokens/theme-base.css";
- * @import "./my-custom-theme.css";  // 定义 [data-theme="xxx"] { --token-color-*: ... }
+ * [PROTOCOL]:
+ * 1. When adding a new theme file, import it here and document in P2 `src/tokens/AGENTS.md`.
+ * 2. Custom layout: import `scale/config.css` + `scale/computed.css`, override `--config-*`, then theme layers.
+ * 3. Custom color only: `theme-base.css` + your `[data-theme]` file setting `--token-color-*`.
  * ============================================ */
 
 /* 布局风格 Token (data-style: neutral | compact | soft | sharp | dense) */
@@ -26,8 +17,8 @@
 @import "./theme-base.css";
 
 /* 内置主题 (data-theme) */
-@import "./themes/light-qoder.css";
-@import "./themes/dark-qoder.css";
+@import "./themes/light-mint.css";
+@import "./themes/dark-mint.css";
 @import "./themes/light-parchment.css";
 @import "./themes/dark-parchment.css";
 

package/dist/tokens/theme-base.css

@@ -1,13 +1,12 @@
 /* ============================================
- * [POS]: src/tokens/theme-base.css - Tailwind v4 @theme 映射 + 动画 + 公共样式
- * [OUTPUT]: CSS 变量映射到 Tailwind 工具类
+ * [WHO]: Tailwind v4 `@theme` bridge, motion presets, scrollbar helpers — no palette hex here.
+ * [FROM]: Runtime vars from scale (`--font-size-*`, `--spacing-*`, `--radius-*`) and themes (`--token-color-*`).
+ * [TO]: Any bundle that imports tokens and needs Tailwind utilities resolved from CSS variables.
+ * [HERE]: src/tokens/theme-base.css — mapping contract only; literal colors live in `themes/*.css`.
  *
- * 此文件定义了 Token → Tailwind 的映射契约，不包含具体颜色值。
- * 颜色值由 themes/*.css 中的 [data-theme="xxx"] 块定义。
- *
- * 用户自定义主题时只需：
- * 1. 引入此文件（定义映射）
- * 2. 引入自己的主题 CSS（覆盖 --token-color-* 变量）
+ * [PROTOCOL]:
+ * 1. Do not embed theme colors in this file; define `--token-color-*` under `[data-theme]` in theme files.
+ * 2. Custom themes: import this for mappings, then add/override `--token-color-*` in your theme layer.
  * ============================================ */
 
 /* ============================================

package/dist/tokens/theme.css

@@ -11,7 +11,7 @@
  * ============================================ */
 
 @import "./theme-base.css";
-@import "./themes/light-qoder.css";
-@import "./themes/dark-qoder.css";
+@import "./themes/light-mint.css";
+@import "./themes/dark-mint.css";
 @import "./themes/light-parchment.css";
 @import "./themes/dark-parchment.css";

package/dist/tokens/themes/dark-mint.css

@@ -0,0 +1,133 @@
+/* ============================================
+ * Theme: Dark Mint (暗色模式)
+ * 用户可复制此文件作为自定义主题模板
+ * ============================================ */
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* --- Primary --- */
+  --token-color-primary: #8EE5A1;
+  --token-color-primary-hover: #9BE6B3;
+  --token-color-primary-active: #73CD94;
+  --token-color-primary-bg: #14261C;
+  --token-color-primary-bg-hover: #1A2E21;
+  --token-color-primary-border: #335942;
+  --token-color-primary-border-hover: #407354;
+  --token-color-primary-text: #8EE5A1;
+  --token-color-primary-text-hover: #9BE6B3;
+  --token-color-primary-text-active: #73CD94;
+  --token-color-text-on-primary: #0D0D0D;
+
+  /* --- Text --- */
+  --token-color-text: #FAF9F5;
+  --token-color-text-secondary: #9C9D9E;
+  --token-color-text-tertiary: #7C7D7F;
+  --token-color-text-quaternary: #717374;
+  --token-color-text-base: #F0F2F3;
+
+  /* --- Border --- */
+  --token-color-border: #404040;
+  --token-color-border-secondary: #2A2A2A;
+  --token-color-border-tertiary: #262626;
+
+  /* --- Fill --- */
+  --token-color-fill: #454545;
+  --token-color-fill-secondary: #363636;
+  --token-color-fill-tertiary: #1A1A1A;
+  --token-color-fill-quaternary: #1A1A1A;
+  --token-color-fill-disable: #525252;
+
+  /* --- Background --- */
+  --token-color-bg-container: #0D0D0D;
+  --token-color-bg-elevated: #080808;
+  --token-color-bg-layout: #050505;
+  --token-color-bg-spotlight: #080808;
+  --token-color-bg-mask: rgba(0, 0, 0, 0.7);
+  /* PlanPart 点阵高亮遮罩渐变（随主题） */
+  --token-color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
+  --token-color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
+  --token-color-mask-shimmer-full: rgba(0, 0, 0, 1);
+  --token-color-bg-base: #000000;
+  --token-color-bg-highlight: #d0d0d0;
+  --token-color-bg-highlight-hover: #e0e0e0;
+
+  /* --- Semantic Colors --- */
+  --token-color-link: #8EE5A1;
+  --token-color-error: #FF4D4F;
+  --token-color-error-hover: #FF7875;
+  --token-color-error-bg: #4A1A1B;
+  --token-color-error-bg-hover: #5C2224;
+  --token-color-error-border: #663338;
+  --token-color-info: #0B83F1;
+  --token-color-info-hover: #5EBCFF;
+  --token-color-info-bg: #19080E;
+  --token-color-info-bg-hover: #220A12;
+  --token-color-info-border: #4F1C0E;
+  --token-color-success: #73CD94;
+  --token-color-success-hover: #8EE5A1;
+  --token-color-success-bg: #14261C;
+  --token-color-success-bg-hover: #1A2E21;
+  --token-color-success-border: #335942;
+  --token-color-warning: #FAAD14;
+  --token-color-warning-hover: #FFD666;
+  --token-color-warning-bg: #4A4019;
+  --token-color-warning-bg-hover: #5C4E1F;
+  --token-color-warning-border: #664D19;
+
+  /* --- Accent Colors --- */
+  --token-color-pink: #EC4899;
+  --token-color-pink-bg: #4A1C31;
+  --token-color-pink-bg-hover: #5C2440;
+  --token-color-purple: #615CED;
+  --token-color-purple-bg: #14160E;
+  --token-color-purple-bg-hover: #1C1E14;
+  --token-color-yellow: #FAC414;
+  --token-color-yellow-bg: #4A4030;
+  --token-color-yellow-bg-hover: #5C5040;
+  --token-color-orange: #FA8125;
+  --token-color-orange-bg: #4A1021;
+  --token-color-orange-bg-hover: #5C1429;
+  --token-color-teal: #14B8A6;
+  --token-color-teal-bg: #21080E;
+  --token-color-teal-bg-hover: #2E0E14;
+  --token-color-blue: #0090FF;
+  --token-color-blue-bg: #21120E;
+  --token-color-blue-bg-hover: #2E1A14;
+  --token-color-mauve: #8E8C99;
+  --token-color-mauve-bg: #0E0D0C;
+  --token-color-mauve-bg-hover: #1A1818;
+  --token-color-slate: #363636;
+  --token-color-slate-bg: #1a1a1a;
+  --token-color-slate-bg-hover: #262626;
+  --token-color-lavender: #B99DFF;
+  --token-color-lavender-bg: #131B0E;
+  --token-color-lavender-bg-hover: #1C2614;
+  --token-color-sage: #6BB394;
+  --token-color-sage-bg: #100C0D;
+  --token-color-sage-bg-hover: #1A1418;
+
+  /* --- Select 等组件 (input/ring/popover 等) --- */
+  --token-color-input: var(--token-color-border-tertiary);
+  --token-color-ring: var(--token-color-primary-border);
+  --token-color-popover: var(--token-color-bg-container);
+  --token-color-popover-foreground: var(--token-color-text);
+  --token-color-accent: var(--token-color-fill-secondary);
+  --token-color-accent-foreground: var(--token-color-text);
+  --token-color-muted: var(--token-color-fill-tertiary);
+  --token-color-muted-foreground: var(--token-color-text-secondary);
+  --token-color-background: var(--token-color-bg-base);
+
+  /* --- Diff --- */
+  --token-color-diff-insert: #73CD94;
+  --token-color-diff-insert-bg: #14261C;
+  --token-color-diff-remove: #FC6B83;
+  --token-color-diff-remove-bg: #1C2E2A;
+}
+
+/* SendButton: dark 模式下 normal 状态使用 success 色（与 light 下 bg-bg-highlight 区分） */
+[data-theme="dark"] .SendButton-send {
+  background-color: var(--token-color-success);
+}
+[data-theme="dark"] .SendButton-send:hover:not(:disabled) {
+  background-color: var(--token-color-success-hover);
+}

package/dist/tokens/themes/light-mint.css

@@ -0,0 +1,132 @@
+/* ============================================
+ * Theme: Light Mint (亮色模式)
+ * 用户可复制此文件作为自定义主题模板
+ * ============================================ */
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  /* --- Primary --- */
+  --token-color-primary: #8EE5A1;
+  --token-color-primary-hover: #73CD94;
+  --token-color-primary-active: #5CB870;
+  --token-color-primary-bg: #F1FAF3;
+  --token-color-primary-bg-hover: #E6F7EC;
+  --token-color-primary-border: #CDEFD9;
+  --token-color-primary-border-hover: #B3E6C7;
+  --token-color-primary-text: #141414;
+  --token-color-primary-text-hover: #73CD94;
+  --token-color-primary-text-active: #5CB870;
+  --token-color-text-on-primary: #FDFDFD;
+
+  /* --- Text --- */
+  --token-color-text: #141414;
+  --token-color-text-secondary: #636261;
+  --token-color-text-tertiary: #838280;
+  --token-color-text-quaternary: #8E8C8B;
+  --token-color-text-base: #0F0D0C;
+
+  /* --- Border --- */
+  --token-color-border: #BCBBBA;
+  --token-color-border-secondary: #DDDDDD;
+  --token-color-border-tertiary: #E6E6E6;
+
+  /* --- Fill --- */
+  --token-color-fill: #DFDFDF;
+  --token-color-fill-secondary: #EFEFEF;
+  --token-color-fill-tertiary: #F9F9F9;
+  --token-color-fill-quaternary: #FCFCFC;
+  --token-color-fill-disable: #DAD9D8;
+
+  /* --- Background --- */
+  --token-color-bg-container: #FFFFFF;
+  --token-color-bg-elevated: #F9F9F9;
+  --token-color-bg-layout: #FDFDFD;
+  --token-color-bg-spotlight: #FAFAFA;
+  --token-color-bg-mask: rgba(0, 0, 0, 0.5);
+  /* PlanPart 点阵高亮遮罩渐变（随主题） */
+  --token-color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
+  --token-color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
+  --token-color-mask-shimmer-full: rgba(0, 0, 0, 1);
+  --token-color-bg-base: #FFFFFF;
+  --token-color-bg-highlight: #080807;
+  --token-color-bg-highlight-hover: #1a1a1a;
+
+  /* --- Shadow (输入框等浮层，1～4 级与 primary/secondary/tertiary/quaternary 一致，与 data-theme 无关) --- */
+  --token-color-shadow-primary: rgba(0, 0, 0, 0.02);
+  --token-color-shadow-secondary: rgba(0, 0, 0, 0.035);
+  --token-color-shadow-tertiary: rgba(0, 0, 0, 0.055);
+  --token-color-shadow-quaternary: rgba(0, 0, 0, 0.075);
+
+  /* --- Semantic Colors --- */
+  --token-color-link: #5CB870;
+  --token-color-error: #FF4D4F;
+  --token-color-error-hover: #FF7875;
+  --token-color-error-bg: #FFF2F0;
+  --token-color-error-bg-hover: #FFE4E0;
+  --token-color-error-border: #FFCCC7;
+  --token-color-info: #0B83F1;
+  --token-color-info-hover: #5EBCFF;
+  --token-color-info-bg: #E6F7FF;
+  --token-color-info-bg-hover: #D0EFFF;
+  --token-color-info-border: #B0E3FF;
+  --token-color-success: #73CD94;
+  --token-color-success-hover: #8EE5A1;
+  --token-color-success-bg: #F1FAF3;
+  --token-color-success-bg-hover: #E6F7EC;
+  --token-color-success-border: #CDEFD9;
+  --token-color-warning: #FAAD14;
+  --token-color-warning-hover: #FFD666;
+  --token-color-warning-bg: #FFFBE6;
+  --token-color-warning-bg-hover: #FFF3CF;
+  --token-color-warning-border: #FFE5BF;
+
+  /* --- Accent Colors --- */
+  --token-color-pink: #EC4899;
+  --token-color-pink-bg: #F9E3F3;
+  --token-color-pink-bg-hover: #F5D4EB;
+  --token-color-purple: #615CED;
+  --token-color-purple-bg: #EBE9FF;
+  --token-color-purple-bg-hover: #DDDAFF;
+  --token-color-yellow: #FAC414;
+  --token-color-yellow-bg: #FFF3CF;
+  --token-color-yellow-bg-hover: #FFE9A8;
+  --token-color-orange: #FA8125;
+  --token-color-orange-bg: #FFEFDE;
+  --token-color-orange-bg-hover: #FFE3C7;
+  --token-color-teal: #14B8A6;
+  --token-color-teal-bg: #DEF7F1;
+  --token-color-teal-bg-hover: #CAF0E8;
+  --token-color-blue: #0090FF;
+  --token-color-blue-bg: #DEEDFF;
+  --token-color-blue-bg-hover: #C8E3FF;
+  --token-color-mauve: #8E8C99;
+  --token-color-mauve-bg: #F1F2F3;
+  --token-color-mauve-bg-hover: #E4E5E7;
+  --token-color-slate: #404040;
+  --token-color-slate-bg: #FAFAFA;
+  --token-color-slate-bg-hover: #EFEFEF;
+  --token-color-lavender: #B99DFF;
+  --token-color-lavender-bg: #ECE4FF;
+  --token-color-lavender-bg-hover: #E0D4FF;
+  --token-color-sage: #6BB394;
+  --token-color-sage-bg: #EFF3F2;
+  --token-color-sage-bg-hover: #E2EAE8;
+
+  /* --- Select 等组件 (input/ring/popover 等) --- */
+  --token-color-input: var(--token-color-border-tertiary);
+  --token-color-ring: var(--token-color-primary-border);
+  --token-color-popover: var(--token-color-bg-container);
+  --token-color-popover-foreground: var(--token-color-text);
+  --token-color-accent: var(--token-color-fill-secondary);
+  --token-color-accent-foreground: var(--token-color-text);
+  --token-color-muted: var(--token-color-fill-tertiary);
+  --token-color-muted-foreground: var(--token-color-text-secondary);
+  --token-color-background: var(--token-color-bg-base);
+
+  /* --- Diff --- */
+  --token-color-diff-insert: #A6DCBA;
+  --token-color-diff-insert-bg: #D9EBE0;
+  --token-color-diff-remove: #FC6B83;
+  --token-color-diff-remove-bg: #E3D1D5;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkdesign",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "type": "module",
   "description": "Modern React Design System with dual-dimension theme system",
   "keywords": [
@@ -21,11 +21,11 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/components/index.d.ts",
+      "types": "./dist/src/components/index.d.ts",
       "import": "./dist/spark-design.es.js",
       "require": "./dist/spark-design.cjs.js"
     },
-    "./style": "./dist/qoder-design.css",
+    "./style": "./dist/sparkdesign.css",
     "./theme.css": "./dist/theme.css",
     "./scale.css": "./dist/scale.css",
     "./katex.css": "./dist/katex.css",
@@ -45,14 +45,16 @@
   ],
   "scripts": {
     "dev": "vite",
+    "codemod:p3-headers": "node scripts/codemod-p3-dip-headers.mjs",
+    "i18n:p3-en": "node scripts/translate-p3-headers-en.mjs",
     "gen:registry-meta": "node scripts/generate-registry-meta.mjs",
     "check:registry-meta": "node scripts/generate-registry-meta.mjs --check && node scripts/validate-registry-meta.mjs registry && node scripts/validate-registry-meta.mjs cli",
     "check:registry": "node scripts/check-registry-sync.mjs",
         "check:showcase": "node scripts/check-showcase-sync.mjs",
             "gen:demo": "node scripts/gen-demo.mjs",
-    "build": "vite build && npx @tailwindcss/cli -i src/lib.css -o dist/qoder-design.css --minify && tsc -p tsconfig.lib.json && npm run build:cli",
+    "build": "vite build && npx @tailwindcss/cli -i src/lib.css -o dist/sparkdesign.css --minify && tsc -p tsconfig.lib.json && npm run build:cli",
     "build:cli": "cd cli && npm run build",
-    "build:css": "npx @tailwindcss/cli -i src/lib.css -o dist/qoder-design.css --minify",
+    "build:css": "npx @tailwindcss/cli -i src/lib.css -o dist/sparkdesign.css --minify",
     "build:watch": "vite build --watch",
     "preview": "vite preview",
     "lint": "eslint .",
@@ -64,6 +66,10 @@
     "test:e2e:ui": "playwright test --ui",
     "size": "size-limit",
     "size:why": "size-limit --why",
+    "test:smoke": "node scripts/smoke-test-cli.mjs",
+    "test:smoke:vite": "node scripts/smoke-test-cli.mjs vite",
+    "test:smoke:next": "node scripts/smoke-test-cli.mjs nextjs",
+    "test:smoke:add": "node scripts/smoke-test-cli.mjs pure-add",
     "prepublishOnly": "node scripts/generate-registry-meta.mjs && npm run build && node scripts/sync-registry-to-cli.mjs && npm run check:registry-meta"
   },
   "peerDependencies": {

package/cli/registry/tokens/themes/dark-qoder.css

@@ -1,132 +0,0 @@
-/* ============================================
- * Theme: Dark (暗色模式)
- * 复制此文件作为自定义主题模板
- * ============================================ */
-
-[data-theme="dark"] {
-  color-scheme: dark;
-  /* --- Primary --- */
-  --color-primary: #8EE5A1;
-  --color-primary-hover: #9BE6B3;
-  --color-primary-active: #73CD94;
-  --color-primary-bg: #14261C;
-  --color-primary-bg-hover: #1A2E21;
-  --color-primary-border: #335942;
-  --color-primary-border-hover: #407354;
-  --color-primary-text: #8EE5A1;
-  --color-primary-text-hover: #9BE6B3;
-  --color-primary-text-active: #73CD94;
-  --color-text-on-primary: #0D0D0D;
-
-  /* --- Text --- */
-  --color-text: #FAF9F5;
-  --color-text-secondary: #9C9D9E;
-  --color-text-tertiary: #7C7D7F;
-  --color-text-quaternary: #717374;
-  --color-text-base: #F0F2F3;
-
-  /* --- Border --- */
-  --color-border: #404040;
-  --color-border-secondary: #2A2A2A;
-  --color-border-tertiary: #262626;
-
-  /* --- Fill --- */
-  --color-fill: #454545;
-  --color-fill-secondary: #363636;
-  --color-fill-tertiary: #1A1A1A;
-  --color-fill-quaternary: #1A1A1A;
-  --color-fill-disable: #525252;
-
-  /* --- Background --- */
-  --color-bg-container: #0D0D0D;
-  --color-bg-elevated: #080808;
-  --color-bg-layout: #050505;
-  --color-bg-spotlight: #080808;
-  --color-bg-mask: rgba(0, 0, 0, 0.7);
-  --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
-  --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
-  --color-mask-shimmer-full: rgba(0, 0, 0, 1);
-  --color-bg-base: #000000;
-  --color-bg-highlight: #d0d0d0;
-  --color-bg-highlight-hover: #e0e0e0;
-
-  /* --- Semantic Colors --- */
-  --color-link: #8EE5A1;
-  --color-error: #FF4D4F;
-  --color-error-hover: #FF7875;
-  --color-error-bg: #4A1A1B;
-  --color-error-bg-hover: #5C2224;
-  --color-error-border: #663338;
-  --color-info: #0B83F1;
-  --color-info-hover: #5EBCFF;
-  --color-info-bg: #19080E;
-  --color-info-bg-hover: #220A12;
-  --color-info-border: #4F1C0E;
-  --color-success: #73CD94;
-  --color-success-hover: #8EE5A1;
-  --color-success-bg: #14261C;
-  --color-success-bg-hover: #1A2E21;
-  --color-success-border: #335942;
-  --color-warning: #FAAD14;
-  --color-warning-hover: #FFD666;
-  --color-warning-bg: #4A4019;
-  --color-warning-bg-hover: #5C4E1F;
-  --color-warning-border: #664D19;
-
-  /* --- Accent Colors --- */
-  --color-pink: #EC4899;
-  --color-pink-bg: #4A1C31;
-  --color-pink-bg-hover: #5C2440;
-  --color-purple: #615CED;
-  --color-purple-bg: #14160E;
-  --color-purple-bg-hover: #1C1E14;
-  --color-yellow: #FAC414;
-  --color-yellow-bg: #4A4030;
-  --color-yellow-bg-hover: #5C5040;
-  --color-orange: #FA8125;
-  --color-orange-bg: #4A1021;
-  --color-orange-bg-hover: #5C1429;
-  --color-teal: #14B8A6;
-  --color-teal-bg: #21080E;
-  --color-teal-bg-hover: #2E0E14;
-  --color-blue: #0090FF;
-  --color-blue-bg: #21120E;
-  --color-blue-bg-hover: #2E1A14;
-  --color-mauve: #8E8C99;
-  --color-mauve-bg: #0E0D0C;
-  --color-mauve-bg-hover: #1A1818;
-  --color-slate: #363636;
-  --color-slate-bg: #1a1a1a;
-  --color-slate-bg-hover: #262626;
-  --color-lavender: #B99DFF;
-  --color-lavender-bg: #131B0E;
-  --color-lavender-bg-hover: #1C2614;
-  --color-sage: #6BB394;
-  --color-sage-bg: #100C0D;
-  --color-sage-bg-hover: #1A1418;
-
-  /* --- Component aliases --- */
-  --color-input: var(--color-border-tertiary);
-  --color-ring: var(--color-primary-border);
-  --color-popover: var(--color-bg-container);
-  --color-popover-foreground: var(--color-text);
-  --color-accent: var(--color-fill-secondary);
-  --color-accent-foreground: var(--color-text);
-  --color-muted: var(--color-fill-tertiary);
-  --color-muted-foreground: var(--color-text-secondary);
-  --color-background: var(--color-bg-base);
-
-  /* --- Diff --- */
-  --color-diff-insert: #73CD94;
-  --color-diff-insert-bg: #14261C;
-  --color-diff-remove: #FC6B83;
-  --color-diff-remove-bg: #1C2E2A;
-}
-
-/* SendButton: dark 模式下 normal 状态使用 success 色 */
-[data-theme="dark"] .SendButton-send {
-  background-color: var(--color-success);
-}
-[data-theme="dark"] .SendButton-send:hover:not(:disabled) {
-  background-color: var(--color-success-hover);
-}