Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-21 16:01:35 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity
09f2fb6538
cherry-studio/packages/ui/design-reference/CONVERSION_LOG.md
MyPrototypeWhat fe188ba8fb feat: enhance design token management and documentation 
- 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.
2025-10-30 19:40:19 +08:00

5.3 KiB
Raw Blame History

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. 单位错误

/* ❌ todocss.css */
--Font_weight--Regular: 400px;

/* ✅ design-tokens.css */
--cs-font-weight-regular: 400;

2. px → rem 转换

/* ❌ todocss.css */
--Spacing--md: 40px;

/* ✅ design-tokens.css */
--cs-size-md: 2.5rem;  /* 40px / 16 = 2.5rem */

3. 变量合并

/* ❌ todocss.css (冗余) */
--Spacing--md: 40px;
--Sizing--md: 40px;

/* ✅ design-tokens.css (合并) */
--cs-size-md: 2.5rem;

4. Dark Mode 分离

/* ❌ 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

✅ 验证清单

  • 所有 Primitive 颜色已转换
  • 所有语义化颜色已转换
  • 所有 UI 元素颜色已转换
  • Dark Mode 变量完整
  • 尺寸单位统一为 rem
  • Font Weight 单位已修正
  • Opacity 变量已废弃
  • Spacing/Sizing 已合并

📝 使用指南

如果设计师更新 todocss.css

  1. 对比此文档，找出新增/修改的变量
  2. 按照转换规则更新 design-tokens.css
  3. 验证 Light/Dark Mode 是否完整
  4. 更新此日志

验证转换正确性

# 检查 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"