sparkdesign 0.4.1 → 0.4.2

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 (17) hide show
  1. package/dist/tokens/CLAUDE.md +305 -0
  2. package/dist/tokens/scale/computed.css +103 -0
  3. package/dist/tokens/scale/config.css +110 -0
  4. package/dist/tokens/scale/index.css +30 -0
  5. package/dist/tokens/scale/presets/compact.css +30 -0
  6. package/dist/tokens/scale/presets/dense.css +64 -0
  7. package/dist/tokens/scale/presets/sharp.css +40 -0
  8. package/dist/tokens/scale/presets/soft.css +16 -0
  9. package/dist/tokens/scale.css +13 -0
  10. package/dist/tokens/scrollbar-utility.css +35 -0
  11. package/dist/tokens/theme-base.css +270 -0
  12. package/dist/tokens/theme.css +17 -0
  13. package/dist/tokens/themes/dark-parchment.css +133 -0
  14. package/dist/tokens/themes/dark-qoder.css +133 -0
  15. package/dist/tokens/themes/light-parchment.css +124 -0
  16. package/dist/tokens/themes/light-qoder.css +132 -0
  17. package/package.json +2 -2
package/dist/tokens/CLAUDE.md ADDED
@@ -0,0 +1,305 @@
1
+ # CLAUDE.md - Tokens 设计令牌模块
2
+
3
+ > 代码是机器相，文档是语义相，两相必须同构。
4
+ > 修改代码 → 检查 L3 → 检查 L2 → 检查 L1
5
+
6
+ ---
7
+
8
+ ## 模块概述
9
+
10
+ **tokens** 是设计系统的核心，定义双维度主题：布局风格 + 颜色主题。
11
+
12
+ ---
13
+
14
+ ## 目录结构
15
+
16
+ ```
17
+ tokens/
18
+ ├── index.css # 统一入口 (推荐)
19
+ ├── scale.css # [DEPRECATED] 向后兼容入口
20
+ ├── scale/ # 布局风格 token (data-style)
21
+ │ ├── config.css # 可配置基础变量 (用户可覆盖)
22
+ │ ├── computed.css # 映射到实际变量
23
+ │ ├── index.css # scale 统一入口
24
+ │ └── presets/ # 预设风格
25
+ │ ├── compact.css # 紧凑风格
26
+ │ ├── soft.css # 柔和风格
27
+ │ ├── sharp.css # 锐利风格
28
+ │ └── dense.css # 密集风格
29
+ ├── theme-base.css # @theme 映射 + 动画 + 公共样式
30
+ ├── theme.css # [DEPRECATED] 向后兼容入口
31
+ ├── scrollbar-utility.css # 滚动条工具样式
32
+ └── themes/ # 颜色主题文件 (可按需引入)
33
+ ├── light-qoder.css # Qoder 亮色 (默认)
34
+ ├── dark-qoder.css # Qoder 暗色
35
+ ├── light-parchment.css # 羊皮纸亮色
36
+ └── dark-parchment.css # 羊皮纸暗色
37
+ ```
38
+
39
+ ---
40
+
41
+ ## 双维度主题系统
42
+
43
+ ### 维度 1: 布局风格 (data-style)
44
+
45
+ | 风格 | 描述 | Spacing | Radius | Font Size |
46
+ |------|------|---------|--------|-----------|
47
+ | `neutral` | 平衡的标准 | 100% | 100% | 100% |
48
+ | `compact` | 优化效率 | 75% | 67% | -1px |
49
+ | `soft` | 舒适至上 | 150% | 150% | +10% |
50
+ | `sharp` | 几何精度 | 100% | 0 | 100% |
51
+ | `dense` | 信息密集 | 50% | 50% | -2px |
52
+
53
+ ### 维度 2: 颜色主题 (data-theme)
54
+
55
+ **主题**与**亮暗色**区分：`data-theme` 为颜色主题的机制（取值为主题名）；**亮色**与**暗色**为内置两套主题（`light` / `dark`），与布局风格 (data-style) 独立，可扩展自定义主题。
56
+
57
+ | 主题 | 描述 |
58
+ |------|------|
59
+ | `light` | 亮色（内置） |
60
+ | `dark` | 暗色（内置） |
61
+ | *自定义* | 可扩展 |
62
+
63
+ ---
64
+
65
+ ## scale/ - 布局风格令牌
66
+
67
+ ### 配置化架构
68
+
69
+ scale 模块采用双层设计，支持用户自定义配置：
70
+
71
+ 1. **config.css** - 定义可覆盖的基础变量 (`--config-*`)
72
+ 2. **computed.css** - 将配置映射到实际变量 (`--spacing-*`, `--radius-*`)
73
+ 3. **presets/** - 预设风格，覆盖部分配置
74
+
75
+ ### 用户自定义配置
76
+
77
+ ```css
78
+ /* 只引入配置层 + 计算层，不引入预设 */
79
+ @import "./tokens/scale/config.css";
80
+ @import "./tokens/scale/computed.css";
81
+
82
+ /* 覆盖配置 */
83
+ :root {
84
+ --config-radius-default: 10px; /* 自定义默认圆角 */
85
+ --config-spacing-4: 18px; /* 自定义间距 */
86
+ --config-font-size-base: 16px; /* 自定义基础字号 */
87
+ }
88
+ ```
89
+
90
+ ### 可配置变量列表
91
+
92
+ | 类别 | 变量前缀 | 示例 |
93
+ |------|---------|------|
94
+ | 间距 | `--config-spacing-*` | `--config-spacing-4: 16px` |
95
+ | 圆角 | `--config-radius-*` | `--config-radius-default: 6px` |
96
+ | 字号 | `--config-font-size-*` | `--config-font-size-base: 14px` |
97
+ | 动画 | `--config-motion-*` | `--config-motion-duration-base: 200ms` |
98
+ | 字体 | `--config-font-*` | `--config-font-mono: ...` |
99
+
100
+ ### 结构原则（只覆盖差异）
101
+
102
+ - **:root / neutral**：完整基准 scale
103
+ - **soft**：仅覆盖 `--radius`，继承 spacing 与 font
104
+ - **compact 与 sharp**：共用同一 spacing + font 块，再分别补 radius（compact 有圆角，sharp 直角 + 等宽字体）
105
+ - **dense**：独立完整 scale（与基准差异大，单独列出）
106
+
107
+ ### Token 类别
108
+
109
+ 1. **Spacing Scale**：`--spacing-0` 到 `--spacing-96`
110
+ 2. **Radius Scale**：`--radius-none` 到 `--radius-full`
111
+ 3. **Font Size Scale**：`--font-size-xs` 到 `--font-size-9xl`
112
+
113
+ ### 按钮与 spacing 的搭配关系
114
+
115
+ 按钮使用 `h-7/9/11` + `px-2/3/4`，各主题通过 scale 同时控制高度与左右 padding，使 **padding-x / height** 比例约在 0.28～0.36，视觉一致：
116
+
117
+ - **neutral**：28/36/44 + 8/12/16 → 比例 ~0.29 / 0.33 / 0.36
118
+ - **compact / sharp**：28/32/40 + 8/10/14 → 比例 ~0.29 / 0.31 / 0.35
119
+ - **dense**：24/28/32 + 6/8/12 → 比例 ~0.25 / 0.29 / 0.375
120
+
121
+ ### Tailwind 兼容
122
+
123
+ 所有 token 直接映射到 Tailwind 类名：
124
+
125
+ ```html
126
+ <!-- 直接使用 Tailwind 类名 -->
127
+ <div className="p-4 rounded-md text-base">
128
+ ```
129
+
130
+ ### 使用方式
131
+
132
+ ```html
133
+ <body data-style="soft">
134
+ <!-- spacing-4 = 24px (150% of 16px) -->
135
+ <!-- radius-md = 12px (150% of 6px) -->
136
+ </body>
137
+ ```
138
+
139
+ ---
140
+
141
+ ## theme-base.css - Tailwind 映射与公共样式
142
+
143
+ 此文件定义 Token → Tailwind 的映射契约，不包含具体颜色值。
144
+
145
+ ### 内容
146
+
147
+ 1. **@custom-variant dark**：定义 dark 变体选择器
148
+ 2. **@theme inline**：text/radius/spacing 映射（随 data-style 变化）
149
+ 3. **@theme**：颜色变量映射 `--color-*: var(--token-color-*)`
150
+ 4. **动画**：accordion-down/up/right/left
151
+ 5. **字体**：Seti 图标字体
152
+
153
+ ---
154
+
155
+ ## themes/*.css - 颜色主题文件
156
+
157
+ ### 命名与 @theme 无自引用
158
+
159
+ 颜色「源」变量在 `:root` / `[data-theme="..."]` 中统一使用 **`--token-color-*`** 命名；`@theme` 块内仅做**单向映射** `--color-*: var(--token-color-*)`，避免 `--color-xxx: var(--color-xxx)` 自循环导致按需引入（CLI init/add）时取不到值。
160
+
161
+ - **组件与样式**：继续使用公开 API `var(--color-primary)` 等，由 @theme 解析到 `--token-color-*`。
162
+ - **扩展新主题**：在主题块内定义 `--token-color-*`，不要在该主题块内再定义 `--color-*`。
163
+
164
+ ### Token 类别
165
+
166
+ 1. **Primary**：主色调
167
+ 2. **Text**：文本色（primary/secondary/tertiary/quaternary/base）
168
+ 3. **Border**：边框色（primary/secondary/tertiary）
169
+ 4. **Fill**：填充色（primary/secondary/tertiary/quaternary/disable）
170
+ 5. **Background**：背景色（container/elevated/layout/spotlight/mask/base/highlight）
171
+ 6. **Semantic**：语义色（link/error/info/success/warning）
172
+ 7. **Accent**：强调色（pink/purple/yellow/orange/teal/blue/mauve/slate/lavender/sage）
173
+ 8. **Diff**：diff 颜色（insert/remove）
174
+
175
+ ### 扩展新主题
176
+
177
+ **方式 1：创建独立文件**
178
+
179
+ ```css
180
+ /* my-custom-theme.css */
181
+ [data-theme="my-theme"] {
182
+ --token-color-primary: #3B82F6;
183
+ --token-color-primary-hover: #2563EB;
184
+ /* ... 覆盖需要的颜色变量 */
185
+ }
186
+ ```
187
+
188
+ 用户引入：
189
+ ```css
190
+ @import "./tokens/scale.css";
191
+ @import "./tokens/theme-base.css";
192
+ @import "./my-custom-theme.css";
193
+ ```
194
+
195
+ **方式 2：添加到 themes/ 目录**
196
+
197
+ 如果要作为内置主题，在 `themes/` 目录下创建新文件，并在 `index.css` 中添加引入。
198
+
199
+ ---
200
+
201
+ ## 引入方式
202
+
203
+ ### 1. 全量引入（推荐）
204
+
205
+ ```css
206
+ @import "./tokens/index.css";
207
+ ```
208
+
209
+ ### 2. 按需引入
210
+
211
+ ```css
212
+ /* 只需要 light/dark 主题 */
213
+ @import "./tokens/scale/index.css";
214
+ @import "./tokens/theme-base.css";
215
+ @import "./tokens/themes/light-qoder.css";
216
+ @import "./tokens/themes/dark-qoder.css";
217
+ ```
218
+
219
+ ### 3. 自定义布局配置
220
+
221
+ ```css
222
+ /* 使用自定义布局配置 */
223
+ @import "./tokens/scale/config.css";
224
+ @import "./tokens/scale/computed.css";
225
+ @import "./tokens/theme-base.css";
226
+ @import "./tokens/themes/light-qoder.css";
227
+
228
+ :root {
229
+ --config-radius-default: 10px; /* 覆盖配置 */
230
+ }
231
+ ```
232
+
233
+ ### 4. 自定义颜色主题
234
+
235
+ ```css
236
+ /* 使用自定义颜色主题 */
237
+ @import "./tokens/scale/index.css";
238
+ @import "./tokens/theme-base.css";
239
+ @import "./my-brand-theme.css";
240
+ ```
241
+
242
+ ---
243
+
244
+ ## 使用规范
245
+
246
+ ### 组件中使用 Token
247
+
248
+ ```tsx
249
+ // ✅ 正确 - 使用 CSS 变量
250
+ <div className="bg-[var(--color-primary)] text-[var(--color-text)]" />
251
+
252
+ // ❌ 错误 - 硬编码颜色
253
+ <div className="bg-[#1890FF] text-[#333]" />
254
+ ```
255
+
256
+ ### Tailwind v4 @theme 映射
257
+
258
+ `theme.css` 末尾的 `@theme` 块将 CSS 变量映射到 Tailwind 4 的原生 token 系统，支持：
259
+
260
+ ```tsx
261
+ // Tailwind 4 原生支持
262
+ <div className="bg-primary text-text" />
263
+ ```
264
+
265
+ ### 构建与消费模式
266
+
267
+ Token 文件同时服务两种消费模式：
268
+
269
+ | 模式 | token 文件作用 | 消费者 Tailwind 要求 |
270
+ |------|---------------|---------------------|
271
+ | **NPM 预编译**（当前） | `@tailwindcss/cli` 读取 → 编译进 `dist/qoder-design.css` | 不需要 |
272
+ | **按需引入**（CLI 复制源码） | 消费者 `@import` token 文件进自己的 CSS | 需要 Tailwind 4 |
273
+
274
+ `@theme` 块是两种模式的共用桥梁：NPM 模式下编译进预编译 CSS，按需引入模式下由消费者的 Tailwind 处理。
275
+
276
+ ---
277
+
278
+ ## L3 协议
279
+
280
+ ### scale/
281
+ - **config.css**：定义可覆盖的 `--config-*` 变量
282
+ - **computed.css**：映射 `--config-*` 到实际变量
283
+ - **presets/**：预设风格，只覆盖差异部分
284
+ - 新增风格需遵循 spacing/radius/font-size 三类完整性
285
+
286
+ ### theme-base.css
287
+ - 定义 @theme 映射，不包含具体颜色值
288
+ - 新增 Tailwind 映射时确保双向一致
289
+
290
+ ### themes/*.css
291
+ - 每个主题独立文件，便于按需引入
292
+ - 扩展主题时必须覆盖完整颜色类别
293
+ - 修改颜色值需确保对比度符合无障碍标准
294
+
295
+ ---
296
+
297
+ ## 开发检查清单
298
+
299
+ - [ ] 新增风格时更新 scale/presets/
300
+ - [ ] 新增配置项时更新 scale/config.css 和 scale/computed.css
301
+ - [ ] 新增颜色主题时创建 themes/*.css 并更新 index.css
302
+ - [ ] Token 命名遵循 `--token-color-{name}` 格式（颜色）
303
+ - [ ] Token 命名遵循 `--config-{category}-{name}` 格式（布局配置）
304
+ - [ ] 测试多主题切换
305
+ - [ ] L2 文档已更新（此文件）
package/dist/tokens/scale/computed.css ADDED
@@ -0,0 +1,103 @@
1
+ /* ============================================
2
+ * Scale Computed - 应用配置，产出实际变量
3
+ *
4
+ * 此文件将 --config-* 映射到 --spacing-* / --radius-* / --font-size-*
5
+ * 组件和样式使用这些实际变量，不直接使用 --config-*
6
+ * ============================================ */
7
+
8
+ :root,
9
+ [data-style="neutral"] {
10
+ /* ============================================
11
+ Spacing (从配置映射)
12
+ ============================================ */
13
+ --spacing: var(--config-spacing-1);
14
+ --spacing-0: var(--config-spacing-0);
15
+ --spacing-px: var(--config-spacing-px);
16
+ --spacing-0\.5: var(--config-spacing-0\.5);
17
+ --spacing-1: var(--config-spacing-1);
18
+ --spacing-1\.5: var(--config-spacing-1\.5);
19
+ --spacing-2: var(--config-spacing-2);
20
+ --spacing-2\.5: var(--config-spacing-2\.5);
21
+ --spacing-3: var(--config-spacing-3);
22
+ --spacing-3\.5: var(--config-spacing-3\.5);
23
+ --spacing-4: var(--config-spacing-4);
24
+ --spacing-5: var(--config-spacing-5);
25
+ --spacing-6: var(--config-spacing-6);
26
+ --spacing-7: var(--config-spacing-7);
27
+ --spacing-8: var(--config-spacing-8);
28
+ --spacing-9: var(--config-spacing-9);
29
+ --spacing-10: var(--config-spacing-10);
30
+ --spacing-11: var(--config-spacing-11);
31
+ --spacing-12: var(--config-spacing-12);
32
+ --spacing-14: var(--config-spacing-14);
33
+ --spacing-16: var(--config-spacing-16);
34
+ --spacing-20: var(--config-spacing-20);
35
+ --spacing-24: var(--config-spacing-24);
36
+ --spacing-28: var(--config-spacing-28);
37
+ --spacing-32: var(--config-spacing-32);
38
+ --spacing-36: var(--config-spacing-36);
39
+ --spacing-40: var(--config-spacing-40);
40
+ --spacing-44: var(--config-spacing-44);
41
+ --spacing-48: var(--config-spacing-48);
42
+ --spacing-52: var(--config-spacing-52);
43
+ --spacing-56: var(--config-spacing-56);
44
+ --spacing-60: var(--config-spacing-60);
45
+ --spacing-64: var(--config-spacing-64);
46
+ --spacing-72: var(--config-spacing-72);
47
+ --spacing-80: var(--config-spacing-80);
48
+ --spacing-96: var(--config-spacing-96);
49
+
50
+ /* ============================================
51
+ Radius (从配置映射)
52
+ ============================================ */
53
+ --radius-none: var(--config-radius-none);
54
+ --radius-sm: var(--config-radius-sm);
55
+ --radius-DEFAULT: var(--config-radius-default);
56
+ --radius-md: var(--config-radius-md);
57
+ --radius-lg: var(--config-radius-lg);
58
+ --radius-xl: var(--config-radius-xl);
59
+ --radius-2xl: var(--config-radius-2xl);
60
+ --radius-3xl: var(--config-radius-3xl);
61
+ --radius-full: var(--config-radius-full);
62
+ --radius: var(--radius-DEFAULT);
63
+
64
+ /* ============================================
65
+ Font Size (从配置映射)
66
+ ============================================ */
67
+ --font-size-xs: var(--config-font-size-xs);
68
+ --font-size-xs--line-height: var(--config-font-size-xs-lh);
69
+ --font-size-sm: var(--config-font-size-sm);
70
+ --font-size-sm--line-height: var(--config-font-size-sm-lh);
71
+ --font-size-base: var(--config-font-size-base);
72
+ --font-size-base--line-height: var(--config-font-size-base-lh);
73
+ --font-size-lg: var(--config-font-size-lg);
74
+ --font-size-lg--line-height: var(--config-font-size-lg-lh);
75
+ --font-size-xl: var(--config-font-size-xl);
76
+ --font-size-xl--line-height: var(--config-font-size-xl-lh);
77
+ --font-size-2xl: var(--config-font-size-2xl);
78
+ --font-size-2xl--line-height: var(--config-font-size-2xl-lh);
79
+ --font-size-3xl: var(--config-font-size-3xl);
80
+ --font-size-3xl--line-height: var(--config-font-size-3xl-lh);
81
+ --font-size-4xl: var(--config-font-size-4xl);
82
+ --font-size-4xl--line-height: var(--config-font-size-4xl-lh);
83
+ --font-size-5xl: var(--config-font-size-5xl);
84
+ --font-size-5xl--line-height: var(--config-font-size-5xl-lh);
85
+ --font-size-6xl: var(--config-font-size-6xl);
86
+ --font-size-6xl--line-height: var(--config-font-size-6xl-lh);
87
+ --font-size-7xl: var(--config-font-size-7xl);
88
+ --font-size-7xl--line-height: var(--config-font-size-7xl-lh);
89
+ --font-size-8xl: var(--config-font-size-8xl);
90
+ --font-size-8xl--line-height: var(--config-font-size-8xl-lh);
91
+ --font-size-9xl: var(--config-font-size-9xl);
92
+ --font-size-9xl--line-height: var(--config-font-size-9xl-lh);
93
+
94
+ /* ============================================
95
+ Motion (从配置映射)
96
+ ============================================ */
97
+ --motion-duration-fast: var(--config-motion-duration-fast);
98
+ --motion-duration-base: var(--config-motion-duration-base);
99
+ --motion-duration-slow: var(--config-motion-duration-slow);
100
+ --motion-ease-standard: var(--config-motion-ease-standard);
101
+ --motion-ease-emphasized: var(--config-motion-ease-emphasized);
102
+ --motion-ease-out: var(--config-motion-ease-out);
103
+ }
package/dist/tokens/scale/config.css ADDED
@@ -0,0 +1,110 @@
1
+ /* ============================================
2
+ * Scale Config - 可配置的布局基础变量
3
+ *
4
+ * 用户可覆盖这些变量来自定义布局风格：
5
+ * :root {
6
+ * --config-radius-default: 10px; // 自定义默认圆角
7
+ * --config-spacing-4: 18px; // 自定义 spacing-4
8
+ * }
9
+ * ============================================ */
10
+
11
+ :root {
12
+ /* ============================================
13
+ Spacing 配置 (Tailwind 兼容)
14
+ ============================================ */
15
+ --config-spacing-unit: 4px; /* 基础单位 */
16
+ --config-spacing-0: 0;
17
+ --config-spacing-px: 1px;
18
+ --config-spacing-0\.5: 2px;
19
+ --config-spacing-1: 4px;
20
+ --config-spacing-1\.5: 6px;
21
+ --config-spacing-2: 8px;
22
+ --config-spacing-2\.5: 10px;
23
+ --config-spacing-3: 12px;
24
+ --config-spacing-3\.5: 14px;
25
+ --config-spacing-4: 16px;
26
+ --config-spacing-5: 20px;
27
+ --config-spacing-6: 24px;
28
+ --config-spacing-7: 28px;
29
+ --config-spacing-8: 32px;
30
+ --config-spacing-9: 36px;
31
+ --config-spacing-10: 40px;
32
+ --config-spacing-11: 44px;
33
+ --config-spacing-12: 48px;
34
+ --config-spacing-14: 56px;
35
+ --config-spacing-16: 64px;
36
+ --config-spacing-20: 80px;
37
+ --config-spacing-24: 96px;
38
+ --config-spacing-28: 112px;
39
+ --config-spacing-32: 128px;
40
+ --config-spacing-36: 144px;
41
+ --config-spacing-40: 160px;
42
+ --config-spacing-44: 176px;
43
+ --config-spacing-48: 192px;
44
+ --config-spacing-52: 208px;
45
+ --config-spacing-56: 224px;
46
+ --config-spacing-60: 240px;
47
+ --config-spacing-64: 256px;
48
+ --config-spacing-72: 288px;
49
+ --config-spacing-80: 320px;
50
+ --config-spacing-96: 384px;
51
+
52
+ /* ============================================
53
+ Radius 配置
54
+ ============================================ */
55
+ --config-radius-none: 0;
56
+ --config-radius-sm: 4px;
57
+ --config-radius-default: 6px;
58
+ --config-radius-md: 6px;
59
+ --config-radius-lg: 8px;
60
+ --config-radius-xl: 12px;
61
+ --config-radius-2xl: 16px;
62
+ --config-radius-3xl: 24px;
63
+ --config-radius-full: 9999px;
64
+
65
+ /* ============================================
66
+ Font Size 配置
67
+ ============================================ */
68
+ --config-font-size-xs: 12px;
69
+ --config-font-size-xs-lh: 16px;
70
+ --config-font-size-sm: 14px;
71
+ --config-font-size-sm-lh: 20px;
72
+ --config-font-size-base: 14px;
73
+ --config-font-size-base-lh: 20px;
74
+ --config-font-size-lg: 16px;
75
+ --config-font-size-lg-lh: 24px;
76
+ --config-font-size-xl: 18px;
77
+ --config-font-size-xl-lh: 24px;
78
+ --config-font-size-2xl: 20px;
79
+ --config-font-size-2xl-lh: 24px;
80
+ --config-font-size-3xl: 24px;
81
+ --config-font-size-3xl-lh: 28px;
82
+ --config-font-size-4xl: 30px;
83
+ --config-font-size-4xl-lh: 32px;
84
+ --config-font-size-5xl: 36px;
85
+ --config-font-size-5xl-lh: 36px;
86
+ --config-font-size-6xl: 48px;
87
+ --config-font-size-6xl-lh: 1;
88
+ --config-font-size-7xl: 60px;
89
+ --config-font-size-7xl-lh: 1;
90
+ --config-font-size-8xl: 72px;
91
+ --config-font-size-8xl-lh: 1;
92
+ --config-font-size-9xl: 96px;
93
+ --config-font-size-9xl-lh: 1;
94
+
95
+ /* ============================================
96
+ Motion 配置
97
+ ============================================ */
98
+ --config-motion-duration-fast: 150ms;
99
+ --config-motion-duration-base: 200ms;
100
+ --config-motion-duration-slow: 300ms;
101
+ --config-motion-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
102
+ --config-motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
103
+ --config-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
104
+
105
+ /* ============================================
106
+ Font Family 配置
107
+ ============================================ */
108
+ --config-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
109
+ --config-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
110
+ }
package/dist/tokens/scale/index.css ADDED
@@ -0,0 +1,30 @@
1
+ /* ============================================
2
+ * Scale 布局风格系统 - 统一入口
3
+ *
4
+ * 引入方式：
5
+ * 1. 全量引入（推荐）: @import "./scale/index.css";
6
+ * 2. 按需引入:
7
+ * @import "./scale/config.css";
8
+ * @import "./scale/computed.css";
9
+ * @import "./scale/presets/compact.css";
10
+ *
11
+ * 自定义配置：
12
+ * @import "./scale/config.css";
13
+ * @import "./scale/computed.css";
14
+ * :root {
15
+ * --config-radius-default: 10px; // 自定义圆角
16
+ * --config-spacing-4: 18px; // 自定义间距
17
+ * }
18
+ * ============================================ */
19
+
20
+ /* 配置层：可覆盖的基础变量 */
21
+ @import "./config.css";
22
+
23
+ /* 计算层：映射到实际变量 */
24
+ @import "./computed.css";
25
+
26
+ /* 预设风格 */
27
+ @import "./presets/compact.css";
28
+ @import "./presets/soft.css";
29
+ @import "./presets/sharp.css";
30
+ @import "./presets/dense.css";
package/dist/tokens/scale/presets/compact.css ADDED
@@ -0,0 +1,30 @@
1
+ /* ============================================
2
+ * Preset: Compact - 紧凑风格
3
+ * 优化效率，适合信息密集场景
4
+ * ============================================ */
5
+
6
+ [data-style="compact"] {
7
+ /* Spacing (紧凑比例) */
8
+ --spacing-3: 10px;
9
+ --spacing-4: 14px;
10
+ --spacing-9: 32px;
11
+ --spacing-11: 40px;
12
+
13
+ /* Radius (略小) */
14
+ --radius-xl: 10px;
15
+ --radius-2xl: 12px;
16
+ --radius-3xl: 16px;
17
+
18
+ /* Font Size (略小) */
19
+ --font-size-sm: 12px;
20
+ --font-size-lg: 14px;
21
+ --font-size-xl: 16px;
22
+ --font-size-2xl: 18px;
23
+ --font-size-3xl: 22px;
24
+ --font-size-4xl: 28px;
25
+ --font-size-5xl: 34px;
26
+ --font-size-6xl: 44px;
27
+ --font-size-7xl: 56px;
28
+ --font-size-8xl: 64px;
29
+ --font-size-9xl: 88px;
30
+ }
package/dist/tokens/scale/presets/dense.css ADDED
@@ -0,0 +1,64 @@
1
+ /* ============================================
2
+ * Preset: Dense - 密集风格
3
+ * 信息密集，最大化内容展示
4
+ * ============================================ */
5
+
6
+ [data-style="dense"] {
7
+ /* Spacing (压缩比例) */
8
+ --spacing-2: 6px;
9
+ --spacing-2\.5: 8px;
10
+ --spacing-3: 8px;
11
+ --spacing-3\.5: 10px;
12
+ --spacing-4: 12px;
13
+ --spacing-5: 16px;
14
+ --spacing-6: 20px;
15
+ --spacing-7: 20px;
16
+ --spacing-8: 28px;
17
+ --spacing-9: 28px;
18
+ --spacing-10: 32px;
19
+ --spacing-11: 32px;
20
+ --spacing-12: 40px;
21
+ --spacing-14: 48px;
22
+ --spacing-16: 56px;
23
+ --spacing-20: 64px;
24
+ --spacing-24: 80px;
25
+ --spacing-28: 96px;
26
+ --spacing-32: 112px;
27
+ --spacing-36: 128px;
28
+ --spacing-40: 144px;
29
+ --spacing-44: 160px;
30
+ --spacing-48: 176px;
31
+ --spacing-52: 192px;
32
+ --spacing-56: 208px;
33
+ --spacing-60: 224px;
34
+ --spacing-64: 240px;
35
+ --spacing-72: 272px;
36
+ --spacing-80: 304px;
37
+ --spacing-96: 368px;
38
+
39
+ /* Radius (小圆角) */
40
+ --radius-sm: 2px;
41
+ --radius-DEFAULT: 4px;
42
+ --radius-md: 4px;
43
+ --radius-lg: 6px;
44
+ --radius-xl: 6px;
45
+ --radius-2xl: 8px;
46
+ --radius-3xl: 8px;
47
+ --radius: var(--radius-DEFAULT);
48
+
49
+ /* ChatInput 特殊配置 */
50
+ --chat-status-overlap: 4px;
51
+
52
+ /* Font Size (更小) */
53
+ --font-size-base: 12px;
54
+ --font-size-lg: 14px;
55
+ --font-size-xl: 14px;
56
+ --font-size-2xl: 16px;
57
+ --font-size-3xl: 18px;
58
+ --font-size-4xl: 22px;
59
+ --font-size-5xl: 28px;
60
+ --font-size-6xl: 36px;
61
+ --font-size-7xl: 44px;
62
+ --font-size-8xl: 56px;
63
+ --font-size-9xl: 72px;
64
+ }
package/dist/tokens/scale/presets/sharp.css ADDED
@@ -0,0 +1,40 @@
1
+ /* ============================================
2
+ * Preset: Sharp - 锐利风格
3
+ * 几何精度，无圆角 + 等宽字体
4
+ * ============================================ */
5
+
6
+ [data-style="sharp"] {
7
+ /* Spacing (与 compact 相同) */
8
+ --spacing-3: 10px;
9
+ --spacing-4: 14px;
10
+ --spacing-9: 32px;
11
+ --spacing-11: 40px;
12
+
13
+ /* Radius (全部为 0) */
14
+ --radius-sm: 0;
15
+ --radius-DEFAULT: 0;
16
+ --radius-md: 0;
17
+ --radius-lg: 0;
18
+ --radius-xl: 0;
19
+ --radius-2xl: 0;
20
+ --radius-3xl: 0;
21
+ --radius-full: 0;
22
+ --radius: 0;
23
+
24
+ /* Font (等宽字体) */
25
+ --font-sans: var(--config-font-mono);
26
+ font-family: var(--font-sans);
27
+
28
+ /* Font Size (与 compact 相同) */
29
+ --font-size-sm: 12px;
30
+ --font-size-lg: 14px;
31
+ --font-size-xl: 16px;
32
+ --font-size-2xl: 18px;
33
+ --font-size-3xl: 22px;
34
+ --font-size-4xl: 28px;
35
+ --font-size-5xl: 34px;
36
+ --font-size-6xl: 44px;
37
+ --font-size-7xl: 56px;
38
+ --font-size-8xl: 64px;
39
+ --font-size-9xl: 88px;
40
+ }
package/dist/tokens/scale/presets/soft.css ADDED
@@ -0,0 +1,16 @@
1
+ /* ============================================
2
+ * Preset: Soft - 柔和风格
3
+ * 舒适至上，适合阅读和休闲场景
4
+ * ============================================ */
5
+
6
+ [data-style="soft"] {
7
+ /* 只覆盖 Radius (大圆角) */
8
+ --radius-sm: 8px;
9
+ --radius-DEFAULT: 12px;
10
+ --radius-md: 12px;
11
+ --radius-lg: 16px;
12
+ --radius-xl: 20px;
13
+ --radius-2xl: 24px;
14
+ --radius-3xl: 28px;
15
+ --radius: var(--radius-DEFAULT);
16
+ }