sparkdesign 0.4.0 → 0.4.2

package/dist/themes/light-parchment.css

@@ -0,0 +1,124 @@
+/* ============================================
+ * Theme: Light Parchment (羊皮纸亮色 - Figma 导入)
+ * 用户可复制此文件作为自定义主题模板
+ * ============================================ */
+
+[data-theme="light-parchment"] {
+  /* --- Primary --- */
+  --token-color-primary: #202116;
+  --token-color-primary-hover: #3D3930;
+  --token-color-primary-active: #3D3930;
+  --token-color-primary-bg: #F0EDE7;
+  --token-color-primary-bg-hover: #E8E4DC;
+  --token-color-primary-border: #D4CFC6;
+  --token-color-primary-border-hover: #C4BEB4;
+  --token-color-primary-text: #202116;
+  --token-color-primary-text-hover: #3D3930;
+  --token-color-primary-text-active: #3D3930;
+  --token-color-text-on-primary: #FAF9F6;
+
+  /* --- Text --- */
+  --token-color-text: #202116;
+  --token-color-text-secondary: #4A463C;
+  --token-color-text-tertiary: #6B665C;
+  --token-color-text-quaternary: #8A857A;
+  --token-color-text-base: #202116;
+
+  /* --- Border --- */
+  --token-color-border: #D4CFC6;
+  --token-color-border-secondary: #E5E1D9;
+  --token-color-border-tertiary: #EDE9E2;
+
+  /* --- Fill --- */
+  --token-color-fill: #F5F0E7;
+  --token-color-fill-secondary: #EDE8E0;
+  --token-color-fill-tertiary: #F7F4EF;
+  --token-color-fill-quaternary: #FAF9F6;
+  --token-color-fill-disable: #E0DCD4;
+
+  /* --- Background --- */
+  --token-color-bg-container: #FAF9F6;
+  --token-color-bg-elevated: #F7F4EF;
+  --token-color-bg-layout: #FDFCFA;
+  --token-color-bg-spotlight: #FAF9F6;
+  --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: #202116;
+  --token-color-bg-highlight-hover: #2D2A22;
+
+  /* --- Semantic Colors --- */
+  --token-color-link: #5B4A3A;
+  --token-color-error: #FF4D4F;
+  --token-color-error-hover: #FF7875;
+  --token-color-error-bg: #FFF2F0;
+  --token-color-error-bg-hover: #FFF1F0;
+  --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: #5A7A5E;
+  --token-color-success-hover: #6B8F71;
+  --token-color-success-bg: #EEF2ED;
+  --token-color-success-bg-hover: #E4EBE2;
+  --token-color-success-border: #C5D4C4;
+  --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: #1E293B;
+  --token-color-slate-bg: #E2E8F0;
+  --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/dist/themes/light-qoder.css

@@ -0,0 +1,132 @@
+/* ============================================
+ * Theme: Light (亮色模式)
+ * 用户可复制此文件作为自定义主题模板
+ * ============================================ */
+
+: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/dist/tokens/CLAUDE.md

@@ -0,0 +1,305 @@
+# CLAUDE.md - Tokens 设计令牌模块
+
+> 代码是机器相，文档是语义相，两相必须同构。
+> 修改代码 → 检查 L3 → 检查 L2 → 检查 L1
+
+---
+
+## 模块概述
+
+**tokens** 是设计系统的核心，定义双维度主题：布局风格 + 颜色主题。
+
+---
+
+## 目录结构
+
+```
+tokens/
+├── index.css              # 统一入口 (推荐)
+├── scale.css              # [DEPRECATED] 向后兼容入口
+├── scale/                 # 布局风格 token (data-style)
+│   ├── config.css         # 可配置基础变量 (用户可覆盖)
+│   ├── computed.css       # 映射到实际变量
+│   ├── index.css          # scale 统一入口
+│   └── presets/           # 预设风格
+│       ├── compact.css    # 紧凑风格
+│       ├── soft.css       # 柔和风格
+│       ├── sharp.css      # 锐利风格
+│       └── dense.css      # 密集风格
+├── theme-base.css         # @theme 映射 + 动画 + 公共样式
+├── theme.css              # [DEPRECATED] 向后兼容入口
+├── scrollbar-utility.css  # 滚动条工具样式
+└── themes/                # 颜色主题文件 (可按需引入)
+    ├── light-qoder.css     # Qoder 亮色 (默认)
+    ├── dark-qoder.css      # Qoder 暗色
+    ├── light-parchment.css # 羊皮纸亮色
+    └── dark-parchment.css  # 羊皮纸暗色
+```
+
+---
+
+## 双维度主题系统
+
+### 维度 1: 布局风格 (data-style)
+
+| 风格 | 描述 | Spacing | Radius | Font Size |
+|------|------|---------|--------|-----------|
+| `neutral` | 平衡的标准 | 100% | 100% | 100% |
+| `compact` | 优化效率 | 75% | 67% | -1px |
+| `soft` | 舒适至上 | 150% | 150% | +10% |
+| `sharp` | 几何精度 | 100% | 0 | 100% |
+| `dense` | 信息密集 | 50% | 50% | -2px |
+
+### 维度 2: 颜色主题 (data-theme)
+
+**主题**与**亮暗色**区分：`data-theme` 为颜色主题的机制（取值为主题名）；**亮色**与**暗色**为内置两套主题（`light` / `dark`），与布局风格 (data-style) 独立，可扩展自定义主题。
+
+| 主题 | 描述 |
+|------|------|
+| `light` | 亮色（内置） |
+| `dark` | 暗色（内置） |
+| *自定义* | 可扩展 |
+
+---
+
+## scale/ - 布局风格令牌
+
+### 配置化架构
+
+scale 模块采用双层设计，支持用户自定义配置：
+
+1. **config.css** - 定义可覆盖的基础变量 (`--config-*`)
+2. **computed.css** - 将配置映射到实际变量 (`--spacing-*`, `--radius-*`)
+3. **presets/** - 预设风格，覆盖部分配置
+
+### 用户自定义配置
+
+```css
+/* 只引入配置层 + 计算层，不引入预设 */
+@import "./tokens/scale/config.css";
+@import "./tokens/scale/computed.css";
+
+/* 覆盖配置 */
+:root {
+  --config-radius-default: 10px;   /* 自定义默认圆角 */
+  --config-spacing-4: 18px;        /* 自定义间距 */
+  --config-font-size-base: 16px;   /* 自定义基础字号 */
+}
+```
+
+### 可配置变量列表
+
+| 类别 | 变量前缀 | 示例 |
+|------|---------|------|
+| 间距 | `--config-spacing-*` | `--config-spacing-4: 16px` |
+| 圆角 | `--config-radius-*` | `--config-radius-default: 6px` |
+| 字号 | `--config-font-size-*` | `--config-font-size-base: 14px` |
+| 动画 | `--config-motion-*` | `--config-motion-duration-base: 200ms` |
+| 字体 | `--config-font-*` | `--config-font-mono: ...` |
+
+### 结构原则（只覆盖差异）
+
+- **:root / neutral**：完整基准 scale
+- **soft**：仅覆盖 `--radius`，继承 spacing 与 font
+- **compact 与 sharp**：共用同一 spacing + font 块，再分别补 radius（compact 有圆角，sharp 直角 + 等宽字体）
+- **dense**：独立完整 scale（与基准差异大，单独列出）
+
+### Token 类别
+
+1. **Spacing Scale**：`--spacing-0` 到 `--spacing-96`
+2. **Radius Scale**：`--radius-none` 到 `--radius-full`
+3. **Font Size Scale**：`--font-size-xs` 到 `--font-size-9xl`
+
+### 按钮与 spacing 的搭配关系
+
+按钮使用 `h-7/9/11` + `px-2/3/4`，各主题通过 scale 同时控制高度与左右 padding，使 **padding-x / height** 比例约在 0.28～0.36，视觉一致：
+
+- **neutral**：28/36/44 + 8/12/16 → 比例 ~0.29 / 0.33 / 0.36
+- **compact / sharp**：28/32/40 + 8/10/14 → 比例 ~0.29 / 0.31 / 0.35
+- **dense**：24/28/32 + 6/8/12 → 比例 ~0.25 / 0.29 / 0.375
+
+### Tailwind 兼容
+
+所有 token 直接映射到 Tailwind 类名：
+
+```html
+<!-- 直接使用 Tailwind 类名 -->
+<div className="p-4 rounded-md text-base">
+```
+
+### 使用方式
+
+```html
+<body data-style="soft">
+  <!-- spacing-4 = 24px (150% of 16px) -->
+  <!-- radius-md = 12px (150% of 6px) -->
+</body>
+```
+
+---
+
+## theme-base.css - Tailwind 映射与公共样式
+
+此文件定义 Token → Tailwind 的映射契约，不包含具体颜色值。
+
+### 内容
+
+1. **@custom-variant dark**：定义 dark 变体选择器
+2. **@theme inline**：text/radius/spacing 映射（随 data-style 变化）
+3. **@theme**：颜色变量映射 `--color-*: var(--token-color-*)`
+4. **动画**：accordion-down/up/right/left
+5. **字体**：Seti 图标字体
+
+---
+
+## themes/*.css - 颜色主题文件
+
+### 命名与 @theme 无自引用
+
+颜色「源」变量在 `:root` / `[data-theme="..."]` 中统一使用 **`--token-color-*`** 命名；`@theme` 块内仅做**单向映射** `--color-*: var(--token-color-*)`，避免 `--color-xxx: var(--color-xxx)` 自循环导致按需引入（CLI init/add）时取不到值。
+
+- **组件与样式**：继续使用公开 API `var(--color-primary)` 等，由 @theme 解析到 `--token-color-*`。
+- **扩展新主题**：在主题块内定义 `--token-color-*`，不要在该主题块内再定义 `--color-*`。
+
+### Token 类别
+
+1. **Primary**：主色调
+2. **Text**：文本色（primary/secondary/tertiary/quaternary/base）
+3. **Border**：边框色（primary/secondary/tertiary）
+4. **Fill**：填充色（primary/secondary/tertiary/quaternary/disable）
+5. **Background**：背景色（container/elevated/layout/spotlight/mask/base/highlight）
+6. **Semantic**：语义色（link/error/info/success/warning）
+7. **Accent**：强调色（pink/purple/yellow/orange/teal/blue/mauve/slate/lavender/sage）
+8. **Diff**：diff 颜色（insert/remove）
+
+### 扩展新主题
+
+**方式 1：创建独立文件**
+
+```css
+/* my-custom-theme.css */
+[data-theme="my-theme"] {
+  --token-color-primary: #3B82F6;
+  --token-color-primary-hover: #2563EB;
+  /* ... 覆盖需要的颜色变量 */
+}
+```
+
+用户引入：
+```css
+@import "./tokens/scale.css";
+@import "./tokens/theme-base.css";
+@import "./my-custom-theme.css";
+```
+
+**方式 2：添加到 themes/ 目录**
+
+如果要作为内置主题，在 `themes/` 目录下创建新文件，并在 `index.css` 中添加引入。
+
+---
+
+## 引入方式
+
+### 1. 全量引入（推荐）
+
+```css
+@import "./tokens/index.css";
+```
+
+### 2. 按需引入
+
+```css
+/* 只需要 light/dark 主题 */
+@import "./tokens/scale/index.css";
+@import "./tokens/theme-base.css";
+@import "./tokens/themes/light-qoder.css";
+@import "./tokens/themes/dark-qoder.css";
+```
+
+### 3. 自定义布局配置
+
+```css
+/* 使用自定义布局配置 */
+@import "./tokens/scale/config.css";
+@import "./tokens/scale/computed.css";
+@import "./tokens/theme-base.css";
+@import "./tokens/themes/light-qoder.css";
+
+:root {
+  --config-radius-default: 10px;  /* 覆盖配置 */
+}
+```
+
+### 4. 自定义颜色主题
+
+```css
+/* 使用自定义颜色主题 */
+@import "./tokens/scale/index.css";
+@import "./tokens/theme-base.css";
+@import "./my-brand-theme.css";
+```
+
+---
+
+## 使用规范
+
+### 组件中使用 Token
+
+```tsx
+// ✅ 正确 - 使用 CSS 变量
+<div className="bg-[var(--color-primary)] text-[var(--color-text)]" />
+
+// ❌ 错误 - 硬编码颜色
+<div className="bg-[#1890FF] text-[#333]" />
+```
+
+### Tailwind v4 @theme 映射
+
+`theme.css` 末尾的 `@theme` 块将 CSS 变量映射到 Tailwind 4 的原生 token 系统，支持：
+
+```tsx
+// Tailwind 4 原生支持
+<div className="bg-primary text-text" />
+```
+
+### 构建与消费模式
+
+Token 文件同时服务两种消费模式：
+
+| 模式 | token 文件作用 | 消费者 Tailwind 要求 |
+|------|---------------|---------------------|
+| **NPM 预编译**（当前） | `@tailwindcss/cli` 读取 → 编译进 `dist/qoder-design.css` | 不需要 |
+| **按需引入**（CLI 复制源码） | 消费者 `@import` token 文件进自己的 CSS | 需要 Tailwind 4 |
+
+`@theme` 块是两种模式的共用桥梁：NPM 模式下编译进预编译 CSS，按需引入模式下由消费者的 Tailwind 处理。
+
+---
+
+## L3 协议
+
+### scale/
+- **config.css**：定义可覆盖的 `--config-*` 变量
+- **computed.css**：映射 `--config-*` 到实际变量
+- **presets/**：预设风格，只覆盖差异部分
+- 新增风格需遵循 spacing/radius/font-size 三类完整性
+
+### theme-base.css
+- 定义 @theme 映射，不包含具体颜色值
+- 新增 Tailwind 映射时确保双向一致
+
+### themes/*.css
+- 每个主题独立文件，便于按需引入
+- 扩展主题时必须覆盖完整颜色类别
+- 修改颜色值需确保对比度符合无障碍标准
+
+---
+
+## 开发检查清单
+
+- [ ] 新增风格时更新 scale/presets/
+- [ ] 新增配置项时更新 scale/config.css 和 scale/computed.css
+- [ ] 新增颜色主题时创建 themes/*.css 并更新 index.css
+- [ ] Token 命名遵循 `--token-color-{name}` 格式（颜色）
+- [ ] Token 命名遵循 `--config-{category}-{name}` 格式（布局配置）
+- [ ] 测试多主题切换
+- [ ] L2 文档已更新（此文件）

package/dist/tokens/index.css

@@ -0,0 +1,35 @@
+/* ============================================
+ * [POS]: src/tokens/index.css - Token 系统统一入口
+ *
+ * 引入方式：
+ * 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-*: ... }
+ * ============================================ */
+
+/* 布局风格 Token (data-style: neutral | compact | soft | sharp | dense) */
+@import "./scale.css";
+
+/* Tailwind @theme 映射 + 动画 + 公共样式 */
+@import "./theme-base.css";
+
+/* 内置主题 (data-theme) */
+@import "./themes/light-qoder.css";
+@import "./themes/dark-qoder.css";
+@import "./themes/light-parchment.css";
+@import "./themes/dark-parchment.css";
+
+/* 滚动条工具样式 */
+@import "./scrollbar-utility.css";

package/dist/tokens/scale/computed.css

@@ -0,0 +1,103 @@
+/* ============================================
+ * Scale Computed - 应用配置，产出实际变量
+ *
+ * 此文件将 --config-* 映射到 --spacing-* / --radius-* / --font-size-*
+ * 组件和样式使用这些实际变量，不直接使用 --config-*
+ * ============================================ */
+
+:root,
+[data-style="neutral"] {
+  /* ============================================
+     Spacing (从配置映射)
+     ============================================ */
+  --spacing: var(--config-spacing-1);
+  --spacing-0: var(--config-spacing-0);
+  --spacing-px: var(--config-spacing-px);
+  --spacing-0\.5: var(--config-spacing-0\.5);
+  --spacing-1: var(--config-spacing-1);
+  --spacing-1\.5: var(--config-spacing-1\.5);
+  --spacing-2: var(--config-spacing-2);
+  --spacing-2\.5: var(--config-spacing-2\.5);
+  --spacing-3: var(--config-spacing-3);
+  --spacing-3\.5: var(--config-spacing-3\.5);
+  --spacing-4: var(--config-spacing-4);
+  --spacing-5: var(--config-spacing-5);
+  --spacing-6: var(--config-spacing-6);
+  --spacing-7: var(--config-spacing-7);
+  --spacing-8: var(--config-spacing-8);
+  --spacing-9: var(--config-spacing-9);
+  --spacing-10: var(--config-spacing-10);
+  --spacing-11: var(--config-spacing-11);
+  --spacing-12: var(--config-spacing-12);
+  --spacing-14: var(--config-spacing-14);
+  --spacing-16: var(--config-spacing-16);
+  --spacing-20: var(--config-spacing-20);
+  --spacing-24: var(--config-spacing-24);
+  --spacing-28: var(--config-spacing-28);
+  --spacing-32: var(--config-spacing-32);
+  --spacing-36: var(--config-spacing-36);
+  --spacing-40: var(--config-spacing-40);
+  --spacing-44: var(--config-spacing-44);
+  --spacing-48: var(--config-spacing-48);
+  --spacing-52: var(--config-spacing-52);
+  --spacing-56: var(--config-spacing-56);
+  --spacing-60: var(--config-spacing-60);
+  --spacing-64: var(--config-spacing-64);
+  --spacing-72: var(--config-spacing-72);
+  --spacing-80: var(--config-spacing-80);
+  --spacing-96: var(--config-spacing-96);
+
+  /* ============================================
+     Radius (从配置映射)
+     ============================================ */
+  --radius-none: var(--config-radius-none);
+  --radius-sm: var(--config-radius-sm);
+  --radius-DEFAULT: var(--config-radius-default);
+  --radius-md: var(--config-radius-md);
+  --radius-lg: var(--config-radius-lg);
+  --radius-xl: var(--config-radius-xl);
+  --radius-2xl: var(--config-radius-2xl);
+  --radius-3xl: var(--config-radius-3xl);
+  --radius-full: var(--config-radius-full);
+  --radius: var(--radius-DEFAULT);
+
+  /* ============================================
+     Font Size (从配置映射)
+     ============================================ */
+  --font-size-xs: var(--config-font-size-xs);
+  --font-size-xs--line-height: var(--config-font-size-xs-lh);
+  --font-size-sm: var(--config-font-size-sm);
+  --font-size-sm--line-height: var(--config-font-size-sm-lh);
+  --font-size-base: var(--config-font-size-base);
+  --font-size-base--line-height: var(--config-font-size-base-lh);
+  --font-size-lg: var(--config-font-size-lg);
+  --font-size-lg--line-height: var(--config-font-size-lg-lh);
+  --font-size-xl: var(--config-font-size-xl);
+  --font-size-xl--line-height: var(--config-font-size-xl-lh);
+  --font-size-2xl: var(--config-font-size-2xl);
+  --font-size-2xl--line-height: var(--config-font-size-2xl-lh);
+  --font-size-3xl: var(--config-font-size-3xl);
+  --font-size-3xl--line-height: var(--config-font-size-3xl-lh);
+  --font-size-4xl: var(--config-font-size-4xl);
+  --font-size-4xl--line-height: var(--config-font-size-4xl-lh);
+  --font-size-5xl: var(--config-font-size-5xl);
+  --font-size-5xl--line-height: var(--config-font-size-5xl-lh);
+  --font-size-6xl: var(--config-font-size-6xl);
+  --font-size-6xl--line-height: var(--config-font-size-6xl-lh);
+  --font-size-7xl: var(--config-font-size-7xl);
+  --font-size-7xl--line-height: var(--config-font-size-7xl-lh);
+  --font-size-8xl: var(--config-font-size-8xl);
+  --font-size-8xl--line-height: var(--config-font-size-8xl-lh);
+  --font-size-9xl: var(--config-font-size-9xl);
+  --font-size-9xl--line-height: var(--config-font-size-9xl-lh);
+
+  /* ============================================
+     Motion (从配置映射)
+     ============================================ */
+  --motion-duration-fast: var(--config-motion-duration-fast);
+  --motion-duration-base: var(--config-motion-duration-base);
+  --motion-duration-slow: var(--config-motion-duration-slow);
+  --motion-ease-standard: var(--config-motion-ease-standard);
+  --motion-ease-emphasized: var(--config-motion-ease-emphasized);
+  --motion-ease-out: var(--config-motion-ease-out);
+}