mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-24 10:40:07 +08:00
fe188ba8fb
- Added new design token files including design-tokens.css and theme.css to standardize styling across the UI. - Introduced a conversion log (CONVERSION_LOG.md) detailing the migration from todocss.css to design-tokens.css, including variable updates and deprecations. - Updated package.json to include new CSS files for easier imports. - Enhanced README.md to provide clear guidelines on the design reference and usage of design tokens. - Improved globals.css to integrate with the new design token structure and ensure consistency in styling.
215 lines
5.3 KiB
Markdown
215 lines
5.3 KiB
Markdown
# todocss.css → design-tokens.css 转换日志
|
|
|
|
## ✅ 已转换的变量
|
|
|
|
### 基础颜色 (Primitive Colors)
|
|
- ✅ Neutral (50-950)
|
|
- ✅ Zinc (50-950)
|
|
- ✅ Red (50-950)
|
|
- ✅ Orange (50-950)
|
|
- ✅ Amber (50-950)
|
|
- ✅ Yellow (50-950)
|
|
- ✅ Lime (50-950) - 品牌主色
|
|
- ✅ Green (50-950)
|
|
- ✅ Emerald (50-950)
|
|
- ✅ Purple (50-950)
|
|
- ✅ Blue (50-950)
|
|
- ✅ Black & White
|
|
|
|
### 语义化颜色 (Semantic Colors)
|
|
- ✅ `--cs-primary` (Lime 500)
|
|
- ✅ `--cs-destructive` (Red 500)
|
|
- ✅ `--cs-success` (Green 500)
|
|
- ✅ `--cs-warning` (Amber 500)
|
|
- ✅ `--cs-background` (Zinc 50/900)
|
|
- ✅ `--cs-foreground` 系列 (main, secondary, muted)
|
|
- ✅ `--cs-border` 系列 (default, hover, active)
|
|
- ✅ `--cs-ring` (Focus)
|
|
|
|
### 容器颜色
|
|
- ✅ `--cs-card` (White/Black)
|
|
- ✅ `--cs-popover` (White/Black)
|
|
- ✅ `--cs-sidebar` (White/Black)
|
|
|
|
### UI 元素细分颜色 (新增补充)
|
|
- ✅ **Modal / Overlay**
|
|
- `--cs-modal-backdrop`
|
|
- `--cs-modal-thumb`
|
|
- `--cs-modal-thumb-hover`
|
|
|
|
- ✅ **Icon**
|
|
- `--cs-icon-default`
|
|
- `--cs-icon-hover`
|
|
|
|
- ✅ **Input / Select**
|
|
- `--cs-input-background`
|
|
- `--cs-input-border`
|
|
- `--cs-input-border-hover`
|
|
- `--cs-input-border-focus`
|
|
|
|
- ✅ **Primary Button**
|
|
- `--cs-primary-button-background`
|
|
- `--cs-primary-button-text`
|
|
- `--cs-primary-button-background-hover`
|
|
- `--cs-primary-button-background-active`
|
|
- `--cs-primary-button-background-2nd`
|
|
- `--cs-primary-button-background-3rd`
|
|
|
|
- ✅ **Secondary Button**
|
|
- `--cs-secondary-button-background`
|
|
- `--cs-secondary-button-text`
|
|
- `--cs-secondary-button-background-hover`
|
|
- `--cs-secondary-button-background-active`
|
|
- `--cs-secondary-button-border`
|
|
|
|
- ✅ **Ghost Button**
|
|
- `--cs-ghost-button-background`
|
|
- `--cs-ghost-button-text`
|
|
- `--cs-ghost-button-background-hover`
|
|
- `--cs-ghost-button-background-active`
|
|
|
|
### 尺寸系统
|
|
- ✅ Spacing/Sizing 合并为 `--cs-size-*` (5xs ~ 8xl)
|
|
- ✅ Border Radius (4xs ~ 3xl, round)
|
|
- ✅ Border Width (sm, md, lg)
|
|
|
|
### 字体排版
|
|
- ✅ Font Families (Heading, Body)
|
|
- ✅ Font Weights (修正单位错误: 400px → 400)
|
|
- ✅ Font Sizes (Body & Heading)
|
|
- ✅ Line Heights (Body & Heading)
|
|
- ✅ Paragraph Spacing
|
|
|
|
---
|
|
|
|
## ❌ 已废弃的变量
|
|
|
|
### Opacity 变量 (全部废弃)
|
|
使用 Tailwind 的 `/modifier` 语法替代：
|
|
|
|
| todocss.css | 替代方案 |
|
|
|-------------|---------|
|
|
| `--Opacity--Red--Red-80` | `bg-cs-destructive/80` |
|
|
| `--Opacity--Green--Green-60` | `bg-cs-success/60` |
|
|
| `--Opacity--White--White-10` | `bg-white/10` |
|
|
|
|
**原因**: Tailwind v4 原生支持透明度修饰符，无需单独定义变量。
|
|
|
|
---
|
|
|
|
## 🔧 关键修正
|
|
|
|
### 1. 单位错误
|
|
```css
|
|
/* ❌ todocss.css */
|
|
--Font_weight--Regular: 400px;
|
|
|
|
/* ✅ design-tokens.css */
|
|
--cs-font-weight-regular: 400;
|
|
```
|
|
|
|
### 2. px → rem 转换
|
|
```css
|
|
/* ❌ todocss.css */
|
|
--Spacing--md: 40px;
|
|
|
|
/* ✅ design-tokens.css */
|
|
--cs-size-md: 2.5rem; /* 40px / 16 = 2.5rem */
|
|
```
|
|
|
|
### 3. 变量合并
|
|
```css
|
|
/* ❌ todocss.css (冗余) */
|
|
--Spacing--md: 40px;
|
|
--Sizing--md: 40px;
|
|
|
|
/* ✅ design-tokens.css (合并) */
|
|
--cs-size-md: 2.5rem;
|
|
```
|
|
|
|
### 4. Dark Mode 分离
|
|
```css
|
|
/* ❌ todocss.css (Light 和 Dark 都在 :root) */
|
|
:root {
|
|
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--50);
|
|
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--900); /* 后面覆盖 */
|
|
}
|
|
|
|
/* ✅ design-tokens.css (正确分离) */
|
|
:root {
|
|
--cs-background: var(--cs-zinc-50);
|
|
}
|
|
|
|
.dark {
|
|
--cs-background: var(--cs-zinc-900);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 变量统计
|
|
|
|
| 分类 | todocss.css | design-tokens.css | 说明 |
|
|
|------|-------------|-------------------|------|
|
|
| Primitive Colors | ~250 | ~250 | 完整保留 |
|
|
| Semantic Colors | ~20 | ~20 | 完整转换 |
|
|
| UI Element Colors | ~30 | ~30 | ✅ 已补充完整 |
|
|
| Opacity Variables | ~50 | 0 | 废弃，用 `/modifier` |
|
|
| Spacing/Sizing | 32 | 16 | 合并去重 |
|
|
| Typography | ~50 | ~50 | 修正单位 |
|
|
| **总计** | ~430 | ~390 | 优化 40 个变量 |
|
|
|
|
---
|
|
|
|
## 🎨 Dark Mode 变量对比
|
|
|
|
| Light Mode | Dark Mode | 变量名 |
|
|
|-----------|-----------|-------|
|
|
| Zinc 50 | Zinc 900 | `--cs-background` |
|
|
| Black 90% | White 90% | `--cs-foreground` |
|
|
| Black 60% | White 60% | `--cs-foreground-secondary` |
|
|
| Black 10% | White 10% | `--cs-border` |
|
|
| White | Black | `--cs-card` |
|
|
| White | Black | `--cs-popover` |
|
|
| White | Black | `--cs-sidebar` |
|
|
| White | Black | `--cs-input-background` |
|
|
| Black 40% | Black 6% | `--cs-modal-backdrop` |
|
|
| Black 20% | White 20% | `--cs-modal-thumb` |
|
|
| Black 5% | White 10% | `--cs-secondary` |
|
|
| Black 0% | White 0% | `--cs-ghost-button-background` |
|
|
|
|
---
|
|
|
|
## ✅ 验证清单
|
|
|
|
- [x] 所有 Primitive 颜色已转换
|
|
- [x] 所有语义化颜色已转换
|
|
- [x] 所有 UI 元素颜色已转换
|
|
- [x] Dark Mode 变量完整
|
|
- [x] 尺寸单位统一为 rem
|
|
- [x] Font Weight 单位已修正
|
|
- [x] Opacity 变量已废弃
|
|
- [x] Spacing/Sizing 已合并
|
|
|
|
---
|
|
|
|
## 📝 使用指南
|
|
|
|
### 如果设计师更新 todocss.css
|
|
|
|
1. 对比此文档，找出新增/修改的变量
|
|
2. 按照转换规则更新 `design-tokens.css`
|
|
3. 验证 Light/Dark Mode 是否完整
|
|
4. 更新此日志
|
|
|
|
### 验证转换正确性
|
|
|
|
```bash
|
|
# 检查 Light Mode 变量数量
|
|
grep -c "^ --cs-" packages/ui/src/styles/design-tokens.css
|
|
|
|
# 检查 Dark Mode 覆盖数量
|
|
grep -c "^ --cs-" packages/ui/src/styles/design-tokens.css | grep -A 100 ".dark"
|
|
```
|
|
|