Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 11:44:28 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: enhance design token management and documentation

Browse Source 
- 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.
This commit is contained in:
MyPrototypeWhat 2025-10-30 19:40:19 +08:00
parent cf008ca22e
commit fe188ba8fb
7 changed files with 2046 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
packages/ui/design-reference/CONVERSION_LOG.md Normal file
View File

@ -0,0 +1,214 @@
# 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"
```

26
packages/ui/design-reference/README.md Normal file
View File

@ -0,0 +1,26 @@
# Design Reference
本文件夹包含设计师提供的原始设计令牌文件，仅作为参考使用。
## 文件说明
### todocss.css
- **来源**：设计师提供的原始设计令牌
- **状态**：已转换为 `src/styles/design-tokens.css`
- **用途**：
- 追溯设计决策
- 验证转换正确性
- 设计师更新时作为对比基准
## 转换规则
原始文件 → 生产文件的转换规则参见：
- [DESIGN_SYSTEM.md](../DESIGN_SYSTEM.md)
- [USAGE_GUIDE.md](../USAGE_GUIDE.md)
## 注意事项
⚠️ **请勿直接使用此文件夹中的文件**
- 这些文件仅供参考
- 实际使用请导入 `src/styles/` 中的文件

870
packages/ui/design-reference/todocss.css Normal file
View File

@ -0,0 +1,870 @@
:root {
/* Typography: Desktop mode */
--Font_family--Heading: Inter;
--Font_weight--Regular: 400px;
--Font_size--Heading--2xl: 60px;
--Font_size--Heading--xl: 48px;
--Font_size--Heading--lg: 40px;
--Font_size--Heading--md: 32px;
--Font_size--Heading--sm: 24px;
--Font_size--Heading--xs: 20px;
--Line_height--Heading--xl: 80px;
--Line_height--Body--lg: 28px;
--Line_height--Body--md: 24px;
--Line_height--Body--sm: 24px;
--Line_height--Body--xs: 20px;
--Paragraph_spacing--Body--lg: 18px;
--Paragraph_spacing--Body--md: 16px;
--Paragraph_spacing--Body--sm: 14px;
--Paragraph_spacing--Body--xs: 12px;
--Line_height--Heading--lg: 60px;
--Line_height--Heading--md: 48px;
--Line_height--Heading--sm: 40px;
--Line_height--Heading--xs: 32px;
--Font_size--Body--lg: 18px;
--Font_size--Body--md: 16px;
--Font_size--Body--sm: 14px;
--Font_size--Body--xs: 12px;
--Font_weight--Italic: 400px;
--Font_weight--Medium: 500px;
--Font_weight--Bold: 700px;
--Font_family--Body: Inter;
--Paragraph_spacing--Heading--2xl: 60px;
--Paragraph_spacing--Heading--xl: 48px;
--Paragraph_spacing--Heading--lg: 40px;
--Paragraph_spacing--Heading--md: 32px;
--Paragraph_spacing--Heading--sm: 24px;
--Paragraph_spacing--Heading--xs: 20px;
--typography_components--h1--font-family: Inter;
--typography_components--h2--font-family: Inter;
--typography_components--h2--font-size: 30px;
--typography_components--h2--line-height: 36px;
--typography_components--h2--font-weight: 600;
--typography_components--h2--letter-spacing: -0.4000000059604645px;
--typography_components--h1--font-size: 36px;
--typography_components--h1--font-size-lg: 48px;
--typography_components--h1--line-height: 40px;
--typography_components--h1--font-weight: 800;
--typography_components--h1--letter-spacing: -0.4000000059604645px;
--typography_components--h3--font-family: Inter;
--typography_components--h3--font-size: 24px;
--typography_components--h3--line-height: 32px;
--typography_components--h3--font-weight: 600;
--typography_components--h3--letter-spacing: -0.4000000059604645px;
--typography_components--h4--font-family: Inter;
--typography_components--h4--font-size: 20px;
--typography_components--h4--line-height: 28px;
--typography_components--h4--font-weight: 600;
--typography_components--h4--letter-spacing: -0.4000000059604645px;
--typography_components--p--font-family: Inter;
--typography_components--p--font-size: 16px;
--typography_components--p--line-height: 28px;
--typography_components--p--font-weight: 400;
--typography_components--p--letter-spacing: 0px;
--typography_components--blockquote--font-family: Inter;
--typography_components--blockquote--font-size: 16px;
--typography_components--blockquote--line-height: 24px;
--typography_components--blockquote--letter-spacing: 0px;
--typography_components--blockquote--font-style: italic;
--typography_components--list--font-family: Inter;
--typography_components--list--font-size: 16px;
--typography_components--list--line-height: 28px;
--typography_components--list--letter-spacing: 0px;
--typography_components--inline_code--font-family: Menlo;
--typography_components--inline_code--font-size: 14px;
--typography_components--inline_code--line-height: 20px;
--typography_components--inline_code--font-weight: 600;
--typography_components--inline_code--letter-spacing: 0px;
--typography_components--lead--font-family: Inter;
--typography_components--lead--font-size: 20px;
--typography_components--lead--line-height: 28px;
--typography_components--lead--font-weight: 400;
--typography_components--lead--letter-spacing: 0px;
--typography_components--large--font-family: Inter;
--typography_components--large--font-size: 18px;
--typography_components--large--line-height: 28px;
--typography_components--large--font-weight: 600;
--typography_components--large--letter-spacing: 0px;
--typography_components--small--font-family: Inter;
--typography_components--small--font-size: 14px;
--typography_components--small--line-height: 14px;
--typography_components--small--font-weight: 500;
--typography_components--table--font-family: Inter;
--typography_components--table--font-size: 16px;
--typography_components--table--font-weight: 400;
--typography_components--table--font-weight-bold: 700;
--typography_components--table--letter-spacing: 0px;
/* Spacing and sizing: Desktop */
--Border_width--sm: 1px;
--Border_width--md: 2px;
--Border_width--lg: 3px;
--Radius--4xs: 4px;
--Radius--3xs: 8px;
--Radius--2xs: 12px;
--Radius--xs: 16px;
--Radius--sm: 24px;
--Radius--md: 32px;
--Radius--lg: 40px;
--Radius--xl: 48px;
--Radius--2xl: 56px;
--Radius--3xl: 64px;
--Radius--round: 999px;
--Spacing--5xs: 4px;
--Spacing--4xs: 8px;
--Spacing--3xs: 12px;
--Spacing--2xs: 16px;
--Spacing--xs: 24px;
--Spacing--sm: 32px;
--Spacing--md: 40px;
--Spacing--lg: 48px;
--Spacing--xl: 56px;
--Spacing--2xl: 64px;
--Spacing--3xl: 72px;
--Spacing--4xl: 80px;
--Spacing--5xl: 88px;
--Spacing--6xl: 96px;
--Spacing--7xl: 104px;
--Spacing--8xl: 112px;
--Sizing--5xs: 4px;
--Sizing--4xs: 8px;
--Sizing--3xs: 12px;
--Sizing--2xs: 16px;
--Sizing--xs: 24px;
--Sizing--sm: 32px;
--Sizing--md: 40px;
--Sizing--lg: 48px;
--Sizing--xl: 56px;
--Sizing--2xl: 64px;
--Sizing--3xl: 72px;
--Sizing--4xl: 80px;
--Sizing--5xl: 88px;
/* Color: Light mode */
--Opacity--Red--Red-100: var(--Primitive--Red--600);
--Opacity--Red--Red-80: hsla(0, 72%, 51%, 0.8);
--Opacity--Red--Red-60: hsla(0, 72%, 51%, 0.6);
--Opacity--Red--Red-40: hsla(0, 72%, 51%, 0.4);
--Opacity--Red--Red-20: hsla(0, 72%, 51%, 0.2);
--Opacity--Red--Red-10: hsla(0, 72%, 51%, 0.1);
--Opacity--Green--Green-100: var(--Primitive--Green--600);
--Opacity--Green--Green-80: hsla(142, 76%, 36%, 0.8);
--Opacity--Green--Green-60: hsla(142, 76%, 36%, 0.6);
--Opacity--Green--Green-40: hsla(142, 76%, 36%, 0.4);
--Opacity--Green--Green-20: hsla(142, 76%, 36%, 0.2);
--Opacity--Green--Green-10: hsla(142, 76%, 36%, 0.1);
--Opacity--Yellow--Yellow-100: var(--Primitive--Amber--400);
--Opacity--Yellow--Yellow-80: hsla(48, 96%, 53%, 0.8);
--Opacity--Yellow--Yellow-60: hsla(48, 96%, 53%, 0.6);
--Opacity--Yellow--Yellow-40: hsla(48, 96%, 53%, 0.4);
--Opacity--Yellow--Yellow-20: hsla(48, 96%, 53%, 0.2);
--Opacity--Yellow--Yellow-10: hsla(48, 96%, 53%, 0.1);
--Opacity--Violet--Violet-100: var(--Primitive--Violet--500);
--Opacity--Violet--Violet-80: hsla(258, 90%, 66%, 0.8);
--Opacity--Violet--Violet-60: hsla(258, 90%, 66%, 0.6);
--Opacity--Violet--Violet-40: hsla(258, 90%, 66%, 0.4);
--Opacity--Violet--Violet-20: hsla(258, 90%, 66%, 0.2);
--Opacity--Violet--Violet-10: hsla(258, 90%, 66%, 0.1);
--Opacity--Indigo--Indigo-100: var(--Primitive--Indigo--500);
--Opacity--Indigo--Indigo-80: hsla(239, 84%, 67%, 0.8);
--Opacity--Indigo--Indigo-60: hsla(239, 84%, 67%, 0.6);
--Opacity--Indigo--Indigo-40: hsla(239, 84%, 67%, 0.4);
--Opacity--Indigo--Indigo-20: hsla(239, 84%, 67%, 0.2);
--Opacity--Indigo--Indigo-10: hsla(239, 84%, 67%, 0.1);
--Opacity--Blue--Blue-100: var(--Primitive--Blue--500);
--Opacity--Blue--Blue-80: hsla(217, 91%, 60%, 0.8);
--Opacity--Blue--Blue-60: hsla(217, 91%, 60%, 0.6);
--Opacity--Blue--Blue-40: hsla(217, 91%, 60%, 0.4);
--Opacity--Blue--Blue-20: hsla(217, 91%, 60%, 0.2);
--Opacity--Blue--Blue-10: hsla(217, 91%, 60%, 0.1);
--Opacity--Grey--Grey-100: var(--Primitive--Gray--500);
--Opacity--Grey--Grey-80: hsla(220, 9%, 46%, 0.8);
--Opacity--Grey--Grey-60: hsla(220, 9%, 46%, 0.6);
--Opacity--Grey--Grey-40: hsla(220, 9%, 46%, 0.4);
--Opacity--Grey--Grey-20: hsla(220, 9%, 46%, 0.2);
--Opacity--Grey--Grey-10: hsla(220, 9%, 46%, 0.1);
--Opacity--White--White-100: var(--Primitive--White);
--Opacity--White--White-80: hsla(0, 0%, 100%, 0.8);
--Opacity--White--White-60: hsla(0, 0%, 100%, 0.6);
--Opacity--White--White-40: hsla(0, 0%, 100%, 0.4);
--Opacity--White--White-20: hsla(0, 0%, 100%, 0.2);
--Opacity--White--White-10: hsla(0, 0%, 100%, 0.1);
--Opacity--White--White-0: hsla(0, 0%, 100%, 0);
--Status--Error--colorErrorBg: var(--color--Red--50);
--Status--Error--colorErrorBgHover: var(--color--Red--100);
--Status--Error--colorErrorBorder: var(--color--Red--200);
--Status--Error--colorErrorBorderHover: var(--color--Red--300);
--Status--Error--colorErrorBase: var(--color--Red--500);
--Status--Error--colorErrorActive: var(--color--Red--600);
--Status--Error--colorErrorTextHover: var(--color--Red--700);
--Status--Error--colorErrorText: var(--color--Red--800);
--Status--Success--colorSuccessBg: var(--color--Green--50);
--Status--Success--colorSuccessBgHover: var(--color--Green--100);
--Status--Success--colorSuccessBase: var(--color--Green--500);
--Status--Success--colorSuccessTextHover: var(--color--Green--700);
--Status--Warning--colorWarningBg: var(--color--Yellow--50);
--Status--Warning--colorWarningBgHover: var(--color--Yellow--100);
--Status--Warning--colorWarningBase: var(--color--Yellow--500);
--Status--Warning--colorWarningActive: var(--color--Yellow--600);
--Status--Warning--colorWarningTextHover: var(--color--Yellow--700);
--Primitive--Black: hsla(0, 0%, 0%, 1);
--Primitive--White: hsla(0, 0%, 100%, 1);
--Brand--Base_Colors--Primary: var(--Primitive--Lime--500);
--Primitive--Neutral--50: hsla(0, 0%, 98%, 1);
--Primitive--Neutral--100: hsla(0, 0%, 96%, 1);
--Primitive--Neutral--200: hsla(0, 0%, 90%, 1);
--Primitive--Neutral--300: hsla(0, 0%, 83%, 1);
--Primitive--Neutral--400: hsla(0, 0%, 64%, 1);
--Primitive--Neutral--500: hsla(0, 0%, 45%, 1);
--Primitive--Neutral--600: hsla(215, 14%, 34%, 1);
--Primitive--Neutral--700: hsla(0, 0%, 25%, 1);
--Primitive--Neutral--800: hsla(0, 0%, 15%, 1);
--Primitive--Neutral--900: hsla(0, 0%, 9%, 1);
--Primitive--Neutral--950: hsla(0, 0%, 4%, 1);
--Primitive--Stone--50: hsla(60, 9%, 98%, 1);
--Primitive--Stone--100: hsla(60, 5%, 96%, 1);
--Primitive--Stone--200: hsla(20, 6%, 90%, 1);
--Primitive--Stone--300: hsla(24, 6%, 83%, 1);
--Primitive--Stone--400: hsla(24, 5%, 64%, 1);
--Primitive--Stone--500: hsla(25, 5%, 45%, 1);
--Primitive--Stone--600: hsla(33, 5%, 32%, 1);
--Primitive--Stone--700: hsla(30, 6%, 25%, 1);
--Primitive--Stone--800: hsla(12, 6%, 15%, 1);
--Primitive--Stone--900: hsla(24, 10%, 10%, 1);
--Primitive--Stone--950: hsla(20, 14%, 4%, 1);
--Primitive--Zinc--50: hsla(0, 0%, 98%, 1);
--Primitive--Zinc--100: hsla(240, 5%, 96%, 1);
--Primitive--Zinc--200: hsla(240, 6%, 90%, 1);
--Primitive--Zinc--300: hsla(240, 5%, 84%, 1);
--Primitive--Zinc--400: hsla(240, 5%, 65%, 1);
--Primitive--Zinc--500: hsla(240, 4%, 46%, 1);
--Primitive--Zinc--600: hsla(240, 5%, 34%, 1);
--Primitive--Zinc--700: hsla(240, 5%, 26%, 1);
--Primitive--Zinc--800: hsla(240, 4%, 16%, 1);
--Primitive--Zinc--900: hsla(240, 6%, 10%, 1);
--Primitive--Zinc--950: hsla(240, 10%, 4%, 1);
--Primitive--Slate--50: hsla(210, 40%, 98%, 1);
--Primitive--Slate--100: hsla(210, 40%, 96%, 1);
--Primitive--Slate--200: hsla(214, 32%, 91%, 1);
--Primitive--Slate--300: hsla(213, 27%, 84%, 1);
--Primitive--Slate--400: hsla(215, 20%, 65%, 1);
--Primitive--Slate--500: hsla(215, 16%, 47%, 1);
--Primitive--Slate--600: hsla(215, 19%, 35%, 1);
--Primitive--Slate--700: hsla(215, 25%, 27%, 1);
--Primitive--Slate--800: hsla(217, 33%, 17%, 1);
--Primitive--Slate--900: hsla(222, 47%, 11%, 1);
--Primitive--Slate--950: hsla(229, 84%, 5%, 1);
--Primitive--Gray--50: hsla(210, 20%, 98%, 1);
--Primitive--Gray--100: hsla(220, 14%, 96%, 1);
--Primitive--Gray--200: hsla(220, 13%, 91%, 1);
--Primitive--Gray--300: hsla(216, 12%, 84%, 1);
--Primitive--Gray--400: hsla(218, 11%, 65%, 1);
--Primitive--Gray--500: hsla(220, 9%, 46%, 1);
--Primitive--Gray--600: hsla(0, 0%, 32%, 1);
--Primitive--Gray--700: hsla(217, 19%, 27%, 1);
--Primitive--Gray--800: hsla(215, 28%, 17%, 1);
--Primitive--Gray--900: hsla(221, 39%, 11%, 1);
--Primitive--Gray--950: hsla(224, 71%, 4%, 1);
--Primitive--Red--50: hsla(0, 86%, 97%, 1);
--Primitive--Red--100: hsla(0, 93%, 94%, 1);
--Primitive--Red--200: hsla(0, 96%, 89%, 1);
--Primitive--Red--300: hsla(0, 94%, 82%, 1);
--Primitive--Red--400: hsla(0, 91%, 71%, 1);
--Primitive--Red--500: hsla(0, 84%, 60%, 1);
--Primitive--Red--600: hsla(0, 72%, 51%, 1);
--Primitive--Red--700: hsla(0, 74%, 42%, 1);
--Primitive--Red--800: hsla(0, 70%, 35%, 1);
--Primitive--Red--900: hsla(0, 63%, 31%, 1);
--Primitive--Red--950: hsla(0, 75%, 15%, 1);
--Primitive--Orange--50: hsla(33, 100%, 96%, 1);
--Primitive--Orange--100: hsla(34, 100%, 92%, 1);
--Primitive--Orange--200: hsla(32, 98%, 83%, 1);
--Primitive--Orange--300: hsla(31, 97%, 72%, 1);
--Primitive--Orange--400: hsla(27, 96%, 61%, 1);
--Primitive--Orange--500: hsla(25, 95%, 53%, 1);
--Primitive--Orange--600: hsla(21, 90%, 48%, 1);
--Primitive--Orange--700: hsla(17, 88%, 40%, 1);
--Primitive--Orange--800: hsla(15, 79%, 34%, 1);
--Primitive--Orange--900: hsla(15, 75%, 28%, 1);
--Primitive--Orange--950: hsla(13, 81%, 15%, 1);
--Primitive--Amber--50: hsla(48, 100%, 96%, 1);
--Primitive--Amber--100: hsla(48, 96%, 89%, 1);
--Primitive--Amber--200: hsla(48, 97%, 77%, 1);
--Primitive--Amber--300: hsla(46, 97%, 65%, 1);
--Primitive--Amber--400: hsla(43, 96%, 56%, 1);
--Primitive--Amber--500: hsla(38, 92%, 50%, 1);
--Primitive--Amber--600: hsla(32, 95%, 44%, 1);
--Primitive--Amber--700: hsla(26, 90%, 37%, 1);
--Primitive--Amber--800: hsla(23, 83%, 31%, 1);
--Primitive--Amber--900: hsla(22, 78%, 26%, 1);
--Primitive--Amber--950: hsla(21, 92%, 14%, 1);
--Primitive--Yellow--50: hsla(55, 92%, 95%, 1);
--Primitive--Yellow--100: hsla(55, 97%, 88%, 1);
--Primitive--Yellow--200: hsla(53, 98%, 77%, 1);
--Primitive--Yellow--300: hsla(50, 98%, 64%, 1);
--Primitive--Yellow--400: hsla(48, 96%, 53%, 1);
--Primitive--Yellow--500: hsla(45, 93%, 47%, 1);
--Primitive--Yellow--600: hsla(41, 96%, 40%, 1);
--Primitive--Yellow--700: hsla(35, 92%, 33%, 1);
--Primitive--Yellow--800: hsla(32, 81%, 29%, 1);
--Primitive--Yellow--900: hsla(28, 73%, 26%, 1);
--Primitive--Yellow--950: hsla(26, 83%, 14%, 1);
--Primitive--Lime--50: hsla(78, 92%, 95%, 1);
--Primitive--Lime--100: hsla(80, 89%, 89%, 1);
--Primitive--Lime--200: hsla(81, 88%, 80%, 1);
--Primitive--Lime--300: hsla(82, 85%, 67%, 1);
--Primitive--Lime--400: hsla(83, 78%, 55%, 1);
--Primitive--Lime--500: hsla(84, 81%, 44%, 1);
--Primitive--Lime--600: hsla(85, 85%, 35%, 1);
--Primitive--Lime--700: hsla(86, 78%, 27%, 1);
--Primitive--Lime--800: hsla(86, 69%, 23%, 1);
--Primitive--Lime--900: hsla(88, 61%, 20%, 1);
--Primitive--Lime--950: hsla(89, 80%, 10%, 1);
--Primitive--Green--50: hsla(138, 76%, 97%, 1);
--Primitive--Green--100: hsla(141, 84%, 93%, 1);
--Primitive--Green--200: hsla(141, 79%, 85%, 1);
--Primitive--Green--300: hsla(142, 77%, 73%, 1);
--Primitive--Green--400: hsla(142, 69%, 58%, 1);
--Primitive--Green--500: hsla(142, 71%, 45%, 1);
--Primitive--Green--600: hsla(142, 76%, 36%, 1);
--Primitive--Green--700: hsla(142, 72%, 29%, 1);
--Primitive--Green--800: hsla(143, 64%, 24%, 1);
--Primitive--Green--900: hsla(144, 61%, 20%, 1);
--Primitive--Green--950: hsla(145, 80%, 10%, 1);
--Primitive--Emerald--50: hsla(152, 81%, 96%, 1);
--Primitive--Emerald--100: hsla(149, 80%, 90%, 1);
--Primitive--Emerald--200: hsla(152, 76%, 80%, 1);
--Primitive--Emerald--300: hsla(156, 72%, 67%, 1);
--Primitive--Emerald--400: hsla(158, 64%, 52%, 1);
--Primitive--Emerald--500: hsla(160, 84%, 39%, 1);
--Primitive--Emerald--600: hsla(161, 94%, 30%, 1);
--Primitive--Emerald--700: hsla(163, 94%, 24%, 1);
--Primitive--Emerald--800: hsla(163, 88%, 20%, 1);
--Primitive--Emerald--900: hsla(164, 86%, 16%, 1);
--Primitive--Emerald--950: hsla(166, 91%, 9%, 1);
--Primitive--Teal--50: hsla(166, 76%, 97%, 1);
--Primitive--Teal--100: hsla(167, 85%, 89%, 1);
--Primitive--Teal--200: hsla(168, 84%, 78%, 1);
--Primitive--Teal--300: hsla(171, 77%, 64%, 1);
--Primitive--Teal--400: hsla(172, 66%, 50%, 1);
--Primitive--Teal--500: hsla(173, 80%, 40%, 1);
--Primitive--Teal--600: hsla(175, 84%, 32%, 1);
--Primitive--Teal--700: hsla(175, 77%, 26%, 1);
--Primitive--Teal--800: hsla(176, 69%, 22%, 1);
--Primitive--Teal--900: hsla(176, 61%, 19%, 1);
--Primitive--Teal--950: hsla(179, 84%, 10%, 1);
--Primitive--Cyan--50: hsla(183, 100%, 96%, 1);
--Primitive--Cyan--100: hsla(185, 96%, 90%, 1);
--Primitive--Cyan--200: hsla(186, 94%, 82%, 1);
--Primitive--Cyan--300: hsla(187, 92%, 69%, 1);
--Primitive--Cyan--400: hsla(188, 86%, 53%, 1);
--Primitive--Cyan--500: hsla(189, 94%, 43%, 1);
--Primitive--Cyan--600: hsla(192, 91%, 36%, 1);
--Primitive--Cyan--700: hsla(193, 82%, 31%, 1);
--Primitive--Cyan--800: hsla(194, 70%, 27%, 1);
--Primitive--Cyan--900: hsla(196, 64%, 24%, 1);
--Primitive--Cyan--950: hsla(197, 79%, 15%, 1);
--Primitive--Sky--50: hsla(204, 100%, 97%, 1);
--Primitive--Sky--100: hsla(204, 94%, 94%, 1);
--Primitive--Sky--200: hsla(201, 94%, 86%, 1);
--Primitive--Sky--300: hsla(199, 95%, 74%, 1);
--Primitive--Sky--400: hsla(198, 93%, 60%, 1);
--Primitive--Sky--500: hsla(199, 89%, 48%, 1);
--Primitive--Sky--600: hsla(200, 98%, 39%, 1);
--Primitive--Sky--700: hsla(201, 96%, 32%, 1);
--Primitive--Sky--800: hsla(201, 90%, 27%, 1);
--Primitive--Sky--900: hsla(202, 80%, 24%, 1);
--Primitive--Sky--950: hsla(204, 80%, 16%, 1);
--Primitive--Blue--50: hsla(214, 100%, 97%, 1);
--Primitive--Blue--100: hsla(214, 95%, 93%, 1);
--Primitive--Blue--200: hsla(213, 97%, 87%, 1);
--Primitive--Blue--300: hsla(212, 96%, 78%, 1);
--Primitive--Blue--400: hsla(213, 94%, 68%, 1);
--Primitive--Blue--500: hsla(217, 91%, 60%, 1);
--Primitive--Blue--600: hsla(221, 83%, 53%, 1);
--Primitive--Blue--700: hsla(224, 76%, 48%, 1);
--Primitive--Blue--800: hsla(226, 71%, 40%, 1);
--Primitive--Blue--900: hsla(224, 64%, 33%, 1);
--Primitive--Blue--950: hsla(226, 57%, 21%, 1);
--Primitive--Indigo--50: hsla(226, 100%, 97%, 1);
--Primitive--Indigo--100: hsla(226, 100%, 94%, 1);
--Primitive--Indigo--200: hsla(228, 96%, 89%, 1);
--Primitive--Indigo--300: hsla(230, 94%, 82%, 1);
--Primitive--Indigo--400: hsla(234, 89%, 74%, 1);
--Primitive--Indigo--500: hsla(239, 84%, 67%, 1);
--Primitive--Indigo--600: hsla(243, 75%, 59%, 1);
--Primitive--Indigo--700: hsla(245, 58%, 51%, 1);
--Primitive--Indigo--800: hsla(244, 55%, 41%, 1);
--Primitive--Indigo--900: hsla(242, 47%, 34%, 1);
--Primitive--Indigo--950: hsla(244, 47%, 20%, 1);
--Primitive--Violet--50: hsla(250, 100%, 98%, 1);
--Primitive--Violet--100: hsla(251, 91%, 95%, 1);
--Primitive--Violet--200: hsla(251, 95%, 92%, 1);
--Primitive--Violet--300: hsla(253, 95%, 85%, 1);
--Primitive--Violet--400: hsla(255, 92%, 76%, 1);
--Primitive--Violet--500: hsla(258, 90%, 66%, 1);
--Primitive--Violet--600: hsla(262, 83%, 58%, 1);
--Primitive--Violet--700: hsla(263, 70%, 50%, 1);
--Primitive--Violet--800: hsla(263, 69%, 42%, 1);
--Primitive--Violet--900: hsla(264, 67%, 35%, 1);
--Primitive--Violet--950: hsla(262, 78%, 23%, 1);
--Primitive--Purple--50: hsla(270, 100%, 98%, 1);
--Primitive--Purple--100: hsla(269, 100%, 95%, 1);
--Primitive--Purple--200: hsla(269, 100%, 92%, 1);
--Primitive--Purple--300: hsla(269, 97%, 85%, 1);
--Primitive--Purple--400: hsla(270, 95%, 75%, 1);
--Primitive--Purple--500: hsla(271, 91%, 65%, 1);
--Primitive--Purple--600: hsla(271, 81%, 56%, 1);
--Primitive--Purple--700: hsla(272, 72%, 47%, 1);
--Primitive--Purple--800: hsla(273, 67%, 39%, 1);
--Primitive--Purple--900: hsla(274, 66%, 32%, 1);
--Primitive--Purple--950: hsla(274, 87%, 21%, 1);
--Primitive--Fuchsia--50: hsla(289, 100%, 98%, 1);
--Primitive--Fuchsia--100: hsla(287, 100%, 95%, 1);
--Primitive--Fuchsia--200: hsla(288, 96%, 91%, 1);
--Primitive--Fuchsia--300: hsla(291, 93%, 83%, 1);
--Primitive--Fuchsia--400: hsla(292, 91%, 73%, 1);
--Primitive--Fuchsia--500: hsla(292, 84%, 61%, 1);
--Primitive--Fuchsia--600: hsla(293, 69%, 49%, 1);
--Primitive--Fuchsia--700: hsla(295, 72%, 40%, 1);
--Primitive--Fuchsia--800: hsla(295, 70%, 33%, 1);
--Primitive--Fuchsia--900: hsla(297, 64%, 28%, 1);
--Primitive--Fuchsia--950: hsla(297, 90%, 16%, 1);
--Primitive--Pink--50: hsla(327, 73%, 97%, 1);
--Primitive--Pink--100: hsla(326, 78%, 95%, 1);
--Primitive--Pink--200: hsla(326, 85%, 90%, 1);
--Primitive--Pink--300: hsla(327, 87%, 82%, 1);
--Primitive--Pink--400: hsla(329, 86%, 70%, 1);
--Primitive--Pink--500: hsla(330, 81%, 60%, 1);
--Primitive--Pink--600: hsla(333, 71%, 51%, 1);
--Primitive--Pink--700: hsla(335, 78%, 42%, 1);
--Primitive--Pink--800: hsla(336, 74%, 35%, 1);
--Primitive--Pink--900: hsla(336, 69%, 30%, 1);
--Primitive--Pink--950: hsla(336, 84%, 17%, 1);
--Primitive--Rose--50: hsla(356, 100%, 97%, 1);
--Primitive--Rose--100: hsla(356, 100%, 95%, 1);
--Primitive--Rose--200: hsla(353, 96%, 90%, 1);
--Primitive--Rose--300: hsla(353, 96%, 82%, 1);
--Primitive--Rose--400: hsla(351, 95%, 71%, 1);
--Primitive--Rose--500: hsla(350, 89%, 60%, 1);
--Primitive--Rose--600: hsla(347, 77%, 50%, 1);
--Primitive--Rose--700: hsla(345, 83%, 41%, 1);
--Primitive--Rose--800: hsla(343, 80%, 35%, 1);
--Primitive--Rose--900: hsla(342, 75%, 30%, 1);
--Primitive--Rose--950: hsla(343, 88%, 16%, 1);
--Brand--Base_Colors--Destructive: var(--Primitive--Red--500);
--Brand--Base_Colors--Success: var(--Primitive--Green--500);
--Brand--Base_Colors--Warning: var(--Primitive--Amber--500);
--Brand--Base_Colors--White: var(--Primitive--White);
--Brand--Base_Colors--Black: var(--Primitive--Black);
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--50); /*页面背景色：应用在整个页面的最底层。*/
--Brand--Semantic_Colors--Background-subtle: hsla(
0,
0%,
0%,
0.02
); /*细微背景色：用于需要与主背景有微弱区分的区域，如代码块背景。*/
--Brand--Semantic_Colors--Foreground: hsla(0, 0%, 0%, 0.9); /*主要前景/文字色：用于正文、标题等。*/
--Brand--Semantic_Colors--Foreground-secondary: hsla(0, 0%, 0%, 0.6); /*次要前景/文字色：用于辅助性文本、描述。*/
--Brand--Semantic_Colors--Foreground-muted: hsla(0, 0%, 0%, 0.4); /*静默前景/文字色：用于禁用状态的文字、占位符。*/
--Brand--Semantic_Colors--Border: hsla(0, 0%, 0%, 0.1); /*默认边框色：用于卡片、输入框、分隔线。*/
--Brand--Semantic_Colors--Border-hover: hsla(0, 0%, 0%, 0.2); /*激活边框色：用于元素被按下或激活时的边框。*/
--Brand--Semantic_Colors--Border-active: hsla(0, 0%, 0%, 0.3); /*激活边框色：用于元素被按下或激活时的边框。*/
--Brand--Semantic_Colors--Ring: hsla(
84,
81%,
44%,
0.4
); /*聚焦环颜色：用于输入框等元素在聚焦 (Focus) 状态下的外发光。*/
--Brand--UI_Element_Colors--Modal--Backdrop: hsla(0, 0%, 0%, 0.4);
--Brand--UI_Element_Colors--Modal--Thumb: hsla(0, 0%, 0%, 0.2);
--Brand--UI_Element_Colors--Modal--Thumb_Hover: hsla(0, 0%, 0%, 0.3);
--Brand--UI_Element_Colors--Icon--Default: var(--Brand--Semantic_Colors--Foreground-secondary);
--Brand--UI_Element_Colors--Icon--Hover: var(--Brand--Semantic_Colors--Foreground);
--Brand--UI_Element_Colors--Input_Select--Background: var(--Brand--Base_Colors--White);
--Brand--UI_Element_Colors--Input_Select--Border: var(--Brand--Semantic_Colors--Border);
--Brand--UI_Element_Colors--Input_Select--Border_Hover: var(--Brand--Semantic_Colors--Border-hover);
--Brand--UI_Element_Colors--Input_Select--Border_Focus: var(--Brand--Base_Colors--Primary);
--Brand--UI_Element_Colors--Primary_Button--Background: var(--Brand--Base_Colors--Primary);
--Brand--UI_Element_Colors--Card_Container--Background: var(--Brand--Base_Colors--White);
--Brand--UI_Element_Colors--Card_Container--Border: var(--Brand--Semantic_Colors--Border);
--Brand--UI_Element_Colors--Ghost_Button--Background: hsla(0, 0%, 0%, 0);
--Brand--UI_Element_Colors--Ghost_Button--Text: var(--Brand--Semantic_Colors--Foreground);
--Brand--UI_Element_Colors--Ghost_Button--Background_Hover: hsla(0, 0%, 0%, 0.05);
--Brand--UI_Element_Colors--Ghost_Button--Background_Active: hsla(0, 0%, 0%, 0.1);
--Brand--UI_Element_Colors--Secondary_Button--Background: hsla(0, 0%, 0%, 0.05);
--Brand--UI_Element_Colors--Secondary_Button--Text: var(--Brand--Semantic_Colors--Foreground);
--Brand--UI_Element_Colors--Secondary_Button--Background_Hover: hsla(0, 0%, 0%, 0.85);
--Brand--UI_Element_Colors--Secondary_Button--Background_Active: hsla(0, 0%, 0%, 0.7);
--Brand--UI_Element_Colors--Secondary_Button--Border: var(--Brand--Semantic_Colors--Border);
--Brand--UI_Element_Colors--Primary_Button--Text: var(--Brand--Base_Colors--White);
--Brand--UI_Element_Colors--Primary_Button--Background_Hover: hsla(84, 81%, 44%, 0.85);
--Brand--UI_Element_Colors--Primary_Button--2nd_Background: hsla(84, 81%, 44%, 0.1);
--Brand--UI_Element_Colors--Primary_Button--3rd_Background: hsla(84, 81%, 44%, 0.05);
--Brand--UI_Element_Colors--Primary_Button--Background_Active: hsla(84, 81%, 44%, 0.7);
--Boolean: false;
/* Color: Dark mode */
--Opacity--Red--Red-100: var(--Primitive--Red--600);
--Opacity--Red--Red-80: hsla(0, 72%, 51%, 0.8);
--Opacity--Red--Red-60: hsla(0, 72%, 51%, 0.6);
--Opacity--Red--Red-40: hsla(0, 72%, 51%, 0.4);
--Opacity--Red--Red-20: hsla(0, 72%, 51%, 0.2);
--Opacity--Red--Red-10: hsla(0, 72%, 51%, 0.1);
--Opacity--Green--Green-100: var(--Primitive--Green--600);
--Opacity--Green--Green-80: hsla(142, 76%, 36%, 0.8);
--Opacity--Green--Green-60: hsla(142, 76%, 36%, 0.6);
--Opacity--Green--Green-40: hsla(142, 76%, 36%, 0.4);
--Opacity--Green--Green-20: hsla(142, 76%, 36%, 0.2);
--Opacity--Green--Green-10: hsla(142, 76%, 36%, 0.1);
--Opacity--Yellow--Yellow-100: var(--Primitive--Yellow--400);
--Opacity--Yellow--Yellow-80: hsla(48, 96%, 53%, 0.8);
--Opacity--Yellow--Yellow-60: hsla(48, 96%, 53%, 0.6);
--Opacity--Yellow--Yellow-40: hsla(48, 96%, 53%, 0.4);
--Opacity--Yellow--Yellow-20: hsla(48, 96%, 53%, 0.2);
--Opacity--Yellow--Yellow-10: hsla(48, 96%, 53%, 0.1);
--Opacity--Violet--Violet-100: var(--Primitive--Violet--500);
--Opacity--Violet--Violet-80: hsla(258, 90%, 66%, 0.8);
--Opacity--Violet--Violet-60: hsla(258, 90%, 66%, 0.6);
--Opacity--Violet--Violet-40: hsla(258, 90%, 66%, 0.4);
--Opacity--Violet--Violet-20: hsla(258, 90%, 66%, 0.2);
--Opacity--Violet--Violet-10: hsla(258, 90%, 66%, 0.1);
--Opacity--Indigo--Indigo-100: var(--Primitive--Indigo--500);
--Opacity--Indigo--Indigo-80: hsla(239, 84%, 67%, 0.8);
--Opacity--Indigo--Indigo-60: hsla(239, 84%, 67%, 0.6);
--Opacity--Indigo--Indigo-40: hsla(239, 84%, 67%, 0.4);
--Opacity--Indigo--Indigo-20: hsla(239, 84%, 67%, 0.2);
--Opacity--Indigo--Indigo-10: hsla(239, 84%, 67%, 0.1);
--Opacity--Blue--Blue-100: var(--Primitive--Blue--500);
--Opacity--Blue--Blue-80: hsla(217, 91%, 60%, 0.8);
--Opacity--Blue--Blue-60: hsla(217, 91%, 60%, 0.6);
--Opacity--Blue--Blue-40: hsla(217, 91%, 60%, 0.4);
--Opacity--Blue--Blue-20: hsla(217, 91%, 60%, 0.2);
--Opacity--Blue--Blue-10: hsla(217, 91%, 60%, 0.1);
--Opacity--Grey--Grey-100: var(--Primitive--Gray--500);
--Opacity--Grey--Grey-80: hsla(220, 9%, 46%, 0.8);
--Opacity--Grey--Grey-60: hsla(220, 9%, 46%, 0.6);
--Opacity--Grey--Grey-40: hsla(220, 9%, 46%, 0.4);
--Opacity--Grey--Grey-20: hsla(220, 9%, 46%, 0.2);
--Opacity--Grey--Grey-10: hsla(220, 9%, 46%, 0.1);
--Opacity--White--White-100: var(--Primitive--White);
--Opacity--White--White-80: hsla(0, 0%, 100%, 0.8);
--Opacity--White--White-60: hsla(0, 0%, 100%, 0.6);
--Opacity--White--White-40: hsla(0, 0%, 100%, 0.4);
--Opacity--White--White-20: hsla(0, 0%, 100%, 0.2);
--Opacity--White--White-10: hsla(0, 0%, 100%, 0.1);
--Opacity--White--White-0: hsla(0, 0%, 100%, 0);
--Status--Error--colorErrorBg: var(--color--Red--900);
--Status--Error--colorErrorBgHover: var(--color--Red--800);
--Status--Error--colorErrorBorder: var(--color--Red--700);
--Status--Error--colorErrorBorderHover: var(--color--Red--600);
--Status--Error--colorErrorBase: var(--color--Red--400);
--Status--Error--colorErrorActive: var(--color--Red--300);
--Status--Error--colorErrorTextHover: var(--color--Red--200);
--Status--Error--colorErrorText: var(--color--Red--100);
--Status--Success--colorSuccessBg: var(--color--Green--900);
--Status--Success--colorSuccessBgHover: var(--color--Green--800);
--Status--Success--colorSuccessBase: var(--color--Green--400);
--Status--Success--colorSuccessTextHover: var(--color--Green--200);
--Status--Warning--colorWarningBg: var(--color--Yellow--900);
--Status--Warning--colorWarningBgHover: var(--color--Yellow--800);
--Status--Warning--colorWarningBase: var(--color--Yellow--400);
--Status--Warning--colorWarningActive: var(--color--Yellow--300);
--Status--Warning--colorWarningTextHover: var(--color--Yellow--200);
--Primitive--Black: hsla(0, 0%, 0%, 1);
--Primitive--White: hsla(0, 0%, 100%, 1);
--Brand--Base_Colors--Primary: var(--Primitive--Lime--500);
--Primitive--Neutral--50: hsla(0, 0%, 98%, 1);
--Primitive--Neutral--100: hsla(0, 0%, 96%, 1);
--Primitive--Neutral--200: hsla(0, 0%, 90%, 1);
--Primitive--Neutral--300: hsla(0, 0%, 83%, 1);
--Primitive--Neutral--400: hsla(0, 0%, 64%, 1);
--Primitive--Neutral--500: hsla(0, 0%, 45%, 1);
--Primitive--Neutral--600: hsla(215, 14%, 34%, 1);
--Primitive--Neutral--700: hsla(0, 0%, 25%, 1);
--Primitive--Neutral--800: hsla(0, 0%, 15%, 1);
--Primitive--Neutral--900: hsla(0, 0%, 9%, 1);
--Primitive--Neutral--950: hsla(0, 0%, 4%, 1);
--Primitive--Stone--50: hsla(60, 9%, 98%, 1);
--Primitive--Stone--100: hsla(60, 5%, 96%, 1);
--Primitive--Stone--200: hsla(20, 6%, 90%, 1);
--Primitive--Stone--300: hsla(24, 6%, 83%, 1);
--Primitive--Stone--400: hsla(24, 5%, 64%, 1);
--Primitive--Stone--500: hsla(25, 5%, 45%, 1);
--Primitive--Stone--600: hsla(33, 5%, 32%, 1);
--Primitive--Stone--700: hsla(30, 6%, 25%, 1);
--Primitive--Stone--800: hsla(12, 6%, 15%, 1);
--Primitive--Stone--900: hsla(24, 10%, 10%, 1);
--Primitive--Stone--950: hsla(20, 14%, 4%, 1);
--Primitive--Zinc--50: hsla(0, 0%, 98%, 1);
--Primitive--Zinc--100: hsla(240, 5%, 96%, 1);
--Primitive--Zinc--200: hsla(240, 6%, 90%, 1);
--Primitive--Zinc--300: hsla(240, 5%, 84%, 1);
--Primitive--Zinc--400: hsla(240, 5%, 65%, 1);
--Primitive--Zinc--500: hsla(240, 4%, 46%, 1);
--Primitive--Zinc--600: hsla(240, 5%, 34%, 1);
--Primitive--Zinc--700: hsla(240, 5%, 26%, 1);
--Primitive--Zinc--800: hsla(240, 4%, 16%, 1);
--Primitive--Zinc--900: hsla(240, 6%, 10%, 1);
--Primitive--Zinc--950: hsla(240, 10%, 4%, 1);
--Primitive--Slate--50: hsla(210, 40%, 98%, 1);
--Primitive--Slate--100: hsla(210, 40%, 96%, 1);
--Primitive--Slate--200: hsla(214, 32%, 91%, 1);
--Primitive--Slate--300: hsla(213, 27%, 84%, 1);
--Primitive--Slate--400: hsla(215, 20%, 65%, 1);
--Primitive--Slate--500: hsla(215, 16%, 47%, 1);
--Primitive--Slate--600: hsla(215, 19%, 35%, 1);
--Primitive--Slate--700: hsla(215, 25%, 27%, 1);
--Primitive--Slate--800: hsla(217, 33%, 17%, 1);
--Primitive--Slate--900: hsla(222, 47%, 11%, 1);
--Primitive--Slate--950: hsla(229, 84%, 5%, 1);
--Primitive--Gray--50: hsla(210, 20%, 98%, 1);
--Primitive--Gray--100: hsla(220, 14%, 96%, 1);
--Primitive--Gray--200: hsla(220, 13%, 91%, 1);
--Primitive--Gray--300: hsla(216, 12%, 84%, 1);
--Primitive--Gray--400: hsla(218, 11%, 65%, 1);
--Primitive--Gray--500: hsla(220, 9%, 46%, 1);
--Primitive--Gray--600: hsla(0, 0%, 32%, 1);
--Primitive--Gray--700: hsla(217, 19%, 27%, 1);
--Primitive--Gray--800: hsla(215, 28%, 17%, 1);
--Primitive--Gray--900: hsla(221, 39%, 11%, 1);
--Primitive--Gray--950: hsla(224, 71%, 4%, 1);
--Primitive--Red--50: hsla(0, 86%, 97%, 1);
--Primitive--Red--100: hsla(0, 93%, 94%, 1);
--Primitive--Red--200: hsla(0, 96%, 89%, 1);
--Primitive--Red--300: hsla(0, 94%, 82%, 1);
--Primitive--Red--400: hsla(0, 91%, 71%, 1);
--Primitive--Red--500: hsla(0, 84%, 60%, 1);
--Primitive--Red--600: hsla(0, 72%, 51%, 1);
--Primitive--Red--700: hsla(0, 74%, 42%, 1);
--Primitive--Red--800: hsla(0, 70%, 35%, 1);
--Primitive--Red--900: hsla(0, 63%, 31%, 1);
--Primitive--Red--950: hsla(0, 75%, 15%, 1);
--Primitive--Orange--50: hsla(33, 100%, 96%, 1);
--Primitive--Orange--100: hsla(34, 100%, 92%, 1);
--Primitive--Orange--200: hsla(32, 98%, 83%, 1);
--Primitive--Orange--300: hsla(31, 97%, 72%, 1);
--Primitive--Orange--400: hsla(27, 96%, 61%, 1);
--Primitive--Orange--500: hsla(25, 95%, 53%, 1);
--Primitive--Orange--600: hsla(21, 90%, 48%, 1);
--Primitive--Orange--700: hsla(17, 88%, 40%, 1);
--Primitive--Orange--800: hsla(15, 79%, 34%, 1);
--Primitive--Orange--900: hsla(15, 75%, 28%, 1);
--Primitive--Orange--950: hsla(13, 81%, 15%, 1);
--Primitive--Amber--50: hsla(48, 100%, 96%, 1);
--Primitive--Amber--100: hsla(48, 96%, 89%, 1);
--Primitive--Amber--200: hsla(48, 97%, 77%, 1);
--Primitive--Amber--300: hsla(46, 97%, 65%, 1);
--Primitive--Amber--400: hsla(43, 96%, 56%, 1);
--Primitive--Amber--500: hsla(38, 92%, 50%, 1);
--Primitive--Amber--600: hsla(32, 95%, 44%, 1);
--Primitive--Amber--700: hsla(26, 90%, 37%, 1);
--Primitive--Amber--800: hsla(23, 83%, 31%, 1);
--Primitive--Amber--900: hsla(22, 78%, 26%, 1);
--Primitive--Amber--950: hsla(21, 92%, 14%, 1);
--Primitive--Yellow--50: hsla(55, 92%, 95%, 1);
--Primitive--Yellow--100: hsla(55, 97%, 88%, 1);
--Primitive--Yellow--200: hsla(53, 98%, 77%, 1);
--Primitive--Yellow--300: hsla(50, 98%, 64%, 1);
--Primitive--Yellow--400: hsla(48, 96%, 53%, 1);
--Primitive--Yellow--500: hsla(45, 93%, 47%, 1);
--Primitive--Yellow--600: hsla(41, 96%, 40%, 1);
--Primitive--Yellow--700: hsla(35, 92%, 33%, 1);
--Primitive--Yellow--800: hsla(32, 81%, 29%, 1);
--Primitive--Yellow--900: hsla(28, 73%, 26%, 1);
--Primitive--Yellow--950: hsla(26, 83%, 14%, 1);
--Primitive--Lime--50: hsla(78, 92%, 95%, 1);
--Primitive--Lime--100: hsla(80, 89%, 89%, 1);
--Primitive--Lime--200: hsla(81, 88%, 80%, 1);
--Primitive--Lime--300: hsla(82, 85%, 67%, 1);
--Primitive--Lime--400: hsla(83, 78%, 55%, 1);
--Primitive--Lime--500: hsla(84, 81%, 44%, 1);
--Primitive--Lime--600: hsla(85, 85%, 35%, 1);
--Primitive--Lime--700: hsla(86, 78%, 27%, 1);
--Primitive--Lime--800: hsla(86, 69%, 23%, 1);
--Primitive--Lime--900: hsla(88, 61%, 20%, 1);
--Primitive--Lime--950: hsla(89, 80%, 10%, 1);
--Primitive--Green--50: hsla(138, 76%, 97%, 1);
--Primitive--Green--100: hsla(141, 84%, 93%, 1);
--Primitive--Green--200: hsla(141, 79%, 85%, 1);
--Primitive--Green--300: hsla(142, 77%, 73%, 1);
--Primitive--Green--400: hsla(142, 69%, 58%, 1);
--Primitive--Green--500: hsla(142, 71%, 45%, 1);
--Primitive--Green--600: hsla(142, 76%, 36%, 1);
--Primitive--Green--700: hsla(142, 72%, 29%, 1);
--Primitive--Green--800: hsla(143, 64%, 24%, 1);
--Primitive--Green--900: hsla(144, 61%, 20%, 1);
--Primitive--Green--950: hsla(145, 80%, 10%, 1);
--Primitive--Emerald--50: hsla(152, 81%, 96%, 1);
--Primitive--Emerald--100: hsla(149, 80%, 90%, 1);
--Primitive--Emerald--200: hsla(152, 76%, 80%, 1);
--Primitive--Emerald--300: hsla(156, 72%, 67%, 1);
--Primitive--Emerald--400: hsla(158, 64%, 52%, 1);
--Primitive--Emerald--500: hsla(160, 84%, 39%, 1);
--Primitive--Emerald--600: hsla(161, 94%, 30%, 1);
--Primitive--Emerald--700: hsla(163, 94%, 24%, 1);
--Primitive--Emerald--800: hsla(163, 88%, 20%, 1);
--Primitive--Emerald--900: hsla(164, 86%, 16%, 1);
--Primitive--Emerald--950: hsla(166, 91%, 9%, 1);
--Primitive--Teal--50: hsla(166, 76%, 97%, 1);
--Primitive--Teal--100: hsla(167, 85%, 89%, 1);
--Primitive--Teal--200: hsla(168, 84%, 78%, 1);
--Primitive--Teal--300: hsla(171, 77%, 64%, 1);
--Primitive--Teal--400: hsla(172, 66%, 50%, 1);
--Primitive--Teal--500: hsla(173, 80%, 40%, 1);
--Primitive--Teal--600: hsla(175, 84%, 32%, 1);
--Primitive--Teal--700: hsla(175, 77%, 26%, 1);
--Primitive--Teal--800: hsla(176, 69%, 22%, 1);
--Primitive--Teal--900: hsla(176, 61%, 19%, 1);
--Primitive--Teal--950: hsla(179, 84%, 10%, 1);
--Primitive--Cyan--50: hsla(183, 100%, 96%, 1);
--Primitive--Cyan--100: hsla(185, 96%, 90%, 1);
--Primitive--Cyan--200: hsla(186, 94%, 82%, 1);
--Primitive--Cyan--300: hsla(187, 92%, 69%, 1);
--Primitive--Cyan--400: hsla(188, 86%, 53%, 1);
--Primitive--Cyan--500: hsla(189, 94%, 43%, 1);
--Primitive--Cyan--600: hsla(192, 91%, 36%, 1);
--Primitive--Cyan--700: hsla(193, 82%, 31%, 1);
--Primitive--Cyan--800: hsla(194, 70%, 27%, 1);
--Primitive--Cyan--900: hsla(196, 64%, 24%, 1);
--Primitive--Cyan--950: hsla(197, 79%, 15%, 1);
--Primitive--Sky--50: hsla(204, 100%, 97%, 1);
--Primitive--Sky--100: hsla(204, 94%, 94%, 1);
--Primitive--Sky--200: hsla(201, 94%, 86%, 1);
--Primitive--Sky--300: hsla(199, 95%, 74%, 1);
--Primitive--Sky--400: hsla(198, 93%, 60%, 1);
--Primitive--Sky--500: hsla(199, 89%, 48%, 1);
--Primitive--Sky--600: hsla(200, 98%, 39%, 1);
--Primitive--Sky--700: hsla(201, 96%, 32%, 1);
--Primitive--Sky--800: hsla(201, 90%, 27%, 1);
--Primitive--Sky--900: hsla(202, 80%, 24%, 1);
--Primitive--Sky--950: hsla(204, 80%, 16%, 1);
--Primitive--Blue--50: hsla(214, 100%, 97%, 1);
--Primitive--Blue--100: hsla(214, 95%, 93%, 1);
--Primitive--Blue--200: hsla(213, 97%, 87%, 1);
--Primitive--Blue--300: hsla(212, 96%, 78%, 1);
--Primitive--Blue--400: hsla(213, 94%, 68%, 1);
--Primitive--Blue--500: hsla(217, 91%, 60%, 1);
--Primitive--Blue--600: hsla(221, 83%, 53%, 1);
--Primitive--Blue--700: hsla(224, 76%, 48%, 1);
--Primitive--Blue--800: hsla(226, 71%, 40%, 1);
--Primitive--Blue--900: hsla(224, 64%, 33%, 1);
--Primitive--Blue--950: hsla(226, 57%, 21%, 1);
--Primitive--Indigo--50: hsla(226, 100%, 97%, 1);
--Primitive--Indigo--100: hsla(226, 100%, 94%, 1);
--Primitive--Indigo--200: hsla(228, 96%, 89%, 1);
--Primitive--Indigo--300: hsla(230, 94%, 82%, 1);
--Primitive--Indigo--400: hsla(234, 89%, 74%, 1);
--Primitive--Indigo--500: hsla(239, 84%, 67%, 1);
--Primitive--Indigo--600: hsla(243, 75%, 59%, 1);
--Primitive--Indigo--700: hsla(245, 58%, 51%, 1);
--Primitive--Indigo--800: hsla(244, 55%, 41%, 1);
--Primitive--Indigo--900: hsla(242, 47%, 34%, 1);
--Primitive--Indigo--950: hsla(244, 47%, 20%, 1);
--Primitive--Violet--50: hsla(250, 100%, 98%, 1);
--Primitive--Violet--100: hsla(251, 91%, 95%, 1);
--Primitive--Violet--200: hsla(251, 95%, 92%, 1);
--Primitive--Violet--300: hsla(253, 95%, 85%, 1);
--Primitive--Violet--400: hsla(255, 92%, 76%, 1);
--Primitive--Violet--500: hsla(258, 90%, 66%, 1);
--Primitive--Violet--600: hsla(262, 83%, 58%, 1);
--Primitive--Violet--700: hsla(263, 70%, 50%, 1);
--Primitive--Violet--800: hsla(263, 69%, 42%, 1);
--Primitive--Violet--900: hsla(264, 67%, 35%, 1);
--Primitive--Violet--950: hsla(262, 78%, 23%, 1);
--Primitive--Purple--50: hsla(270, 100%, 98%, 1);
--Primitive--Purple--100: hsla(269, 100%, 95%, 1);
--Primitive--Purple--200: hsla(269, 100%, 92%, 1);
--Primitive--Purple--300: hsla(269, 97%, 85%, 1);
--Primitive--Purple--400: hsla(270, 95%, 75%, 1);
--Primitive--Purple--500: hsla(271, 91%, 65%, 1);
--Primitive--Purple--600: hsla(271, 81%, 56%, 1);
--Primitive--Purple--700: hsla(272, 72%, 47%, 1);
--Primitive--Purple--800: hsla(273, 67%, 39%, 1);
--Primitive--Purple--900: hsla(274, 66%, 32%, 1);
--Primitive--Purple--950: hsla(274, 87%, 21%, 1);
--Primitive--Fuchsia--50: hsla(289, 100%, 98%, 1);
--Primitive--Fuchsia--100: hsla(287, 100%, 95%, 1);
--Primitive--Fuchsia--200: hsla(288, 96%, 91%, 1);
--Primitive--Fuchsia--300: hsla(291, 93%, 83%, 1);
--Primitive--Fuchsia--400: hsla(292, 91%, 73%, 1);
--Primitive--Fuchsia--500: hsla(292, 84%, 61%, 1);
--Primitive--Fuchsia--600: hsla(293, 69%, 49%, 1);
--Primitive--Fuchsia--700: hsla(295, 72%, 40%, 1);
--Primitive--Fuchsia--800: hsla(295, 70%, 33%, 1);
--Primitive--Fuchsia--900: hsla(297, 64%, 28%, 1);
--Primitive--Fuchsia--950: hsla(297, 90%, 16%, 1);
--Primitive--Pink--50: hsla(327, 73%, 97%, 1);
--Primitive--Pink--100: hsla(326, 78%, 95%, 1);
--Primitive--Pink--200: hsla(326, 85%, 90%, 1);
--Primitive--Pink--300: hsla(327, 87%, 82%, 1);
--Primitive--Pink--400: hsla(329, 86%, 70%, 1);
--Primitive--Pink--500: hsla(330, 81%, 60%, 1);
--Primitive--Pink--600: hsla(333, 71%, 51%, 1);
--Primitive--Pink--700: hsla(335, 78%, 42%, 1);
--Primitive--Pink--800: hsla(336, 74%, 35%, 1);
--Primitive--Pink--900: hsla(336, 69%, 30%, 1);
--Primitive--Pink--950: hsla(336, 84%, 17%, 1);
--Primitive--Rose--50: hsla(356, 100%, 97%, 1);
--Primitive--Rose--100: hsla(356, 100%, 95%, 1);
--Primitive--Rose--200: hsla(353, 96%, 90%, 1);
--Primitive--Rose--300: hsla(353, 96%, 82%, 1);
--Primitive--Rose--400: hsla(351, 95%, 71%, 1);
--Primitive--Rose--500: hsla(350, 89%, 60%, 1);
--Primitive--Rose--600: hsla(347, 77%, 50%, 1);
--Primitive--Rose--700: hsla(345, 83%, 41%, 1);
--Primitive--Rose--800: hsla(343, 80%, 35%, 1);
--Primitive--Rose--900: hsla(342, 75%, 30%, 1);
--Primitive--Rose--950: hsla(343, 88%, 16%, 1);
--Brand--Base_Colors--Destructive: var(--Primitive--Red--500);
--Brand--Base_Colors--Success: var(--Primitive--Green--500);
--Brand--Base_Colors--Warning: var(--Primitive--Amber--500);
--Brand--Base_Colors--White: var(--Primitive--White);
--Brand--Base_Colors--Black: var(--Primitive--Black);
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--900); /*页面背景色：应用在整个页面的最底层。*/
--Brand--Semantic_Colors--Background-subtle: hsla(
0,
0%,
100%,
0.02
); /*细微背景色：用于需要与主背景有微弱区分的区域，如代码块背景。*/
--Brand--Semantic_Colors--Foreground: hsla(0, 0%, 100%, 0.9); /*主要前景/文字色：用于正文、标题等。*/
--Brand--Semantic_Colors--Foreground-secondary: hsla(0, 0%, 100%, 0.6); /*次要前景/文字色：用于辅助性文本、描述。*/
--Brand--Semantic_Colors--Foreground-muted: hsla(0, 0%, 100%, 0.4); /*静默前景/文字色：用于禁用状态的文字、占位符。*/
--Brand--Semantic_Colors--Border: hsla(0, 0%, 100%, 0.1); /*默认边框色：用于卡片、输入框、分隔线。*/
--Brand--Semantic_Colors--Border-hover: hsla(0, 0%, 100%, 0.2); /*激活边框色：用于元素被按下或激活时的边框。*/
--Brand--Semantic_Colors--Border-active: hsla(0, 0%, 100%, 0.3); /*激活边框色：用于元素被按下或激活时的边框。*/
--Brand--Semantic_Colors--Ring: hsla(
84,
81%,
44%,
0.4
); /*聚焦环颜色：用于输入框等元素在聚焦 (Focus) 状态下的外发光。*/
--Brand--UI_Element_Colors--Modal--Backdrop: hsla(0, 0%, 0%, 0.06);
--Brand--UI_Element_Colors--Modal--Thumb: hsla(0, 0%, 100%, 0.2);
--Brand--UI_Element_Colors--Modal--Thumb_Hover: hsla(0, 0%, 100%, 0.3);
--Brand--UI_Element_Colors--Icon--Default: var(--Brand--Semantic_Colors--Foreground-secondary);
--Brand--UI_Element_Colors--Icon--Hover: var(--Brand--Semantic_Colors--Foreground);
--Brand--UI_Element_Colors--Input_Select--Background: var(--Brand--Base_Colors--Black);
--Brand--UI_Element_Colors--Input_Select--Border: var(--Brand--Semantic_Colors--Border);
--Brand--UI_Element_Colors--Input_Select--Border_Hover: var(--Brand--Semantic_Colors--Border-hover);
--Brand--UI_Element_Colors--Input_Select--Border_Focus: var(--Brand--Base_Colors--Primary);
--Brand--UI_Element_Colors--Primary_Button--Background: var(--Brand--Base_Colors--Primary);
--Brand--UI_Element_Colors--Card_Container--Background: var(--Brand--Base_Colors--Black);
--Brand--UI_Element_Colors--Card_Container--Border: var(--Brand--Semantic_Colors--Border);
--Brand--UI_Element_Colors--Ghost_Button--Background: hsla(0, 0%, 100%, 0);
--Brand--UI_Element_Colors--Ghost_Button--Text: var(--Brand--Semantic_Colors--Foreground);
--Brand--UI_Element_Colors--Ghost_Button--Background_Hover: var(--Opacity--White--White-10);
--Brand--UI_Element_Colors--Ghost_Button--Background_Active: hsla(0, 0%, 100%, 0.15);
--Brand--UI_Element_Colors--Secondary_Button--Background: var(--Opacity--White--White-10);
--Brand--UI_Element_Colors--Secondary_Button--Text: var(--Brand--Semantic_Colors--Foreground);
--Brand--UI_Element_Colors--Secondary_Button--Background_Hover: var(--Opacity--White--White-20);
--Brand--UI_Element_Colors--Secondary_Button--Background_Active: hsla(0, 0%, 100%, 0.25);
--Brand--UI_Element_Colors--Secondary_Button--Border: var(--Brand--Semantic_Colors--Border);
--Brand--UI_Element_Colors--Primary_Button--Text: var(--Brand--Base_Colors--White);
--Brand--UI_Element_Colors--Primary_Button--Background_Hover: hsla(84, 81%, 44%, 0.85);
--Brand--UI_Element_Colors--Primary_Button--2nd_Background: hsla(84, 81%, 44%, 0.1);
--Brand--UI_Element_Colors--Primary_Button--3rd_Background: hsla(84, 81%, 44%, 0.05);
--Brand--UI_Element_Colors--Primary_Button--Background_Active: hsla(84, 81%, 44%, 0.7);
--Boolean: false;
}

5
packages/ui/package.json
View File

@ -124,7 +124,10 @@
"import": "./dist/utils/index.mjs",
"require": "./dist/utils/index.js",
"default": "./dist/utils/index.js"
}
},
"./styles/design-tokens.css": "./src/styles/design-tokens.css",
"./styles/theme.css": "./src/styles/theme.css",
"./styles/globals.css": "./src/styles/globals.css"
},
"packageManager": "yarn@4.9.1"
}

561
packages/ui/src/styles/design-tokens.css Normal file
View File

@ -0,0 +1,561 @@
/**
* CherryStudio Design Tokens
*
* 基于 todocss.css 转换的设计令牌
* - 所有变量使用 --cs-* 前缀（CherryStudio）
* - 合并重复的 Spacing/Sizing
* - 修正错误（如 font-weight 单位）
* - 删除 Opacity 变量（使用 Tailwind 修饰符）
* - 正确分离 Light/Dark Mode
*/
:root {
/* ==================== */
/* Primitive Colors - Light Mode */
/* ==================== */
/* Neutral */
--cs-neutral-50: hsla(0, 0%, 98%, 1);
--cs-neutral-100: hsla(0, 0%, 96%, 1);
--cs-neutral-200: hsla(0, 0%, 90%, 1);
--cs-neutral-300: hsla(0, 0%, 83%, 1);
--cs-neutral-400: hsla(0, 0%, 64%, 1);
--cs-neutral-500: hsla(0, 0%, 45%, 1);
--cs-neutral-600: hsla(215, 14%, 34%, 1);
--cs-neutral-700: hsla(0, 0%, 25%, 1);
--cs-neutral-800: hsla(0, 0%, 15%, 1);
--cs-neutral-900: hsla(0, 0%, 9%, 1);
--cs-neutral-950: hsla(0, 0%, 4%, 1);
/* Stone */
--cs-stone-50: hsla(60, 9%, 98%, 1);
--cs-stone-100: hsla(60, 5%, 96%, 1);
--cs-stone-200: hsla(20, 6%, 90%, 1);
--cs-stone-300: hsla(24, 6%, 83%, 1);
--cs-stone-400: hsla(24, 5%, 64%, 1);
--cs-stone-500: hsla(25, 5%, 45%, 1);
--cs-stone-600: hsla(33, 5%, 32%, 1);
--cs-stone-700: hsla(30, 6%, 25%, 1);
--cs-stone-800: hsla(12, 6%, 15%, 1);
--cs-stone-900: hsla(24, 10%, 10%, 1);
--cs-stone-950: hsla(20, 14%, 4%, 1);
/* Zinc */
--cs-zinc-50: hsla(0, 0%, 98%, 1);
--cs-zinc-100: hsla(240, 5%, 96%, 1);
--cs-zinc-200: hsla(240, 6%, 90%, 1);
--cs-zinc-300: hsla(240, 5%, 84%, 1);
--cs-zinc-400: hsla(240, 5%, 65%, 1);
--cs-zinc-500: hsla(240, 4%, 46%, 1);
--cs-zinc-600: hsla(240, 5%, 34%, 1);
--cs-zinc-700: hsla(240, 5%, 26%, 1);
--cs-zinc-800: hsla(240, 4%, 16%, 1);
--cs-zinc-900: hsla(240, 6%, 10%, 1);
--cs-zinc-950: hsla(240, 10%, 4%, 1);
/* Slate */
--cs-slate-50: hsla(210, 40%, 98%, 1);
--cs-slate-100: hsla(210, 40%, 96%, 1);
--cs-slate-200: hsla(214, 32%, 91%, 1);
--cs-slate-300: hsla(213, 27%, 84%, 1);
--cs-slate-400: hsla(215, 20%, 65%, 1);
--cs-slate-500: hsla(215, 16%, 47%, 1);
--cs-slate-600: hsla(215, 19%, 35%, 1);
--cs-slate-700: hsla(215, 25%, 27%, 1);
--cs-slate-800: hsla(217, 33%, 17%, 1);
--cs-slate-900: hsla(222, 47%, 11%, 1);
--cs-slate-950: hsla(229, 84%, 5%, 1);
/* Gray */
--cs-gray-50: hsla(210, 20%, 98%, 1);
--cs-gray-100: hsla(220, 14%, 96%, 1);
--cs-gray-200: hsla(220, 13%, 91%, 1);
--cs-gray-300: hsla(216, 12%, 84%, 1);
--cs-gray-400: hsla(218, 11%, 65%, 1);
--cs-gray-500: hsla(220, 9%, 46%, 1);
--cs-gray-600: hsla(0, 0%, 32%, 1);
--cs-gray-700: hsla(217, 19%, 27%, 1);
--cs-gray-800: hsla(215, 28%, 17%, 1);
--cs-gray-900: hsla(221, 39%, 11%, 1);
--cs-gray-950: hsla(224, 71%, 4%, 1);
/* Red */
--cs-red-50: hsla(0, 86%, 97%, 1);
--cs-red-100: hsla(0, 93%, 94%, 1);
--cs-red-200: hsla(0, 96%, 89%, 1);
--cs-red-300: hsla(0, 94%, 82%, 1);
--cs-red-400: hsla(0, 91%, 71%, 1);
--cs-red-500: hsla(0, 84%, 60%, 1);
--cs-red-600: hsla(0, 72%, 51%, 1);
--cs-red-700: hsla(0, 74%, 42%, 1);
--cs-red-800: hsla(0, 70%, 35%, 1);
--cs-red-900: hsla(0, 63%, 31%, 1);
--cs-red-950: hsla(0, 75%, 15%, 1);
/* Orange */
--cs-orange-50: hsla(33, 100%, 96%, 1);
--cs-orange-100: hsla(34, 100%, 92%, 1);
--cs-orange-200: hsla(32, 98%, 83%, 1);
--cs-orange-300: hsla(31, 97%, 72%, 1);
--cs-orange-400: hsla(27, 96%, 61%, 1);
--cs-orange-500: hsla(25, 95%, 53%, 1);
--cs-orange-600: hsla(21, 90%, 48%, 1);
--cs-orange-700: hsla(17, 88%, 40%, 1);
--cs-orange-800: hsla(15, 79%, 34%, 1);
--cs-orange-900: hsla(15, 75%, 28%, 1);
--cs-orange-950: hsla(13, 81%, 15%, 1);
/* Amber */
--cs-amber-50: hsla(48, 100%, 96%, 1);
--cs-amber-100: hsla(48, 96%, 89%, 1);
--cs-amber-200: hsla(48, 97%, 77%, 1);
--cs-amber-300: hsla(46, 97%, 65%, 1);
--cs-amber-400: hsla(43, 96%, 56%, 1);
--cs-amber-500: hsla(38, 92%, 50%, 1);
--cs-amber-600: hsla(32, 95%, 44%, 1);
--cs-amber-700: hsla(26, 90%, 37%, 1);
--cs-amber-800: hsla(23, 83%, 31%, 1);
--cs-amber-900: hsla(22, 78%, 26%, 1);
--cs-amber-950: hsla(21, 92%, 14%, 1);
/* Yellow */
--cs-yellow-50: hsla(55, 92%, 95%, 1);
--cs-yellow-100: hsla(55, 97%, 88%, 1);
--cs-yellow-200: hsla(53, 98%, 77%, 1);
--cs-yellow-300: hsla(50, 98%, 64%, 1);
--cs-yellow-400: hsla(48, 96%, 53%, 1);
--cs-yellow-500: hsla(45, 93%, 47%, 1);
--cs-yellow-600: hsla(41, 96%, 40%, 1);
--cs-yellow-700: hsla(35, 92%, 33%, 1);
--cs-yellow-800: hsla(32, 81%, 29%, 1);
--cs-yellow-900: hsla(28, 73%, 26%, 1);
--cs-yellow-950: hsla(26, 83%, 14%, 1);
/* Lime (品牌主色) */
--cs-lime-50: hsla(78, 92%, 95%, 1);
--cs-lime-100: hsla(80, 89%, 89%, 1);
--cs-lime-200: hsla(81, 88%, 80%, 1);
--cs-lime-300: hsla(82, 85%, 67%, 1);
--cs-lime-400: hsla(83, 78%, 55%, 1);
--cs-lime-500: hsla(84, 81%, 44%, 1);
--cs-lime-600: hsla(85, 85%, 35%, 1);
--cs-lime-700: hsla(86, 78%, 27%, 1);
--cs-lime-800: hsla(86, 69%, 23%, 1);
--cs-lime-900: hsla(88, 61%, 20%, 1);
--cs-lime-950: hsla(89, 80%, 10%, 1);
/* Green */
--cs-green-50: hsla(138, 76%, 97%, 1);
--cs-green-100: hsla(141, 84%, 93%, 1);
--cs-green-200: hsla(141, 79%, 85%, 1);
--cs-green-300: hsla(142, 77%, 73%, 1);
--cs-green-400: hsla(142, 69%, 58%, 1);
--cs-green-500: hsla(142, 71%, 45%, 1);
--cs-green-600: hsla(142, 76%, 36%, 1);
--cs-green-700: hsla(142, 72%, 29%, 1);
--cs-green-800: hsla(143, 64%, 24%, 1);
--cs-green-900: hsla(144, 61%, 20%, 1);
--cs-green-950: hsla(145, 80%, 10%, 1);
/* Emerald */
--cs-emerald-50: hsla(152, 81%, 96%, 1);
--cs-emerald-100: hsla(149, 80%, 90%, 1);
--cs-emerald-200: hsla(152, 76%, 80%, 1);
--cs-emerald-300: hsla(156, 72%, 67%, 1);
--cs-emerald-400: hsla(158, 64%, 52%, 1);
--cs-emerald-500: hsla(160, 84%, 39%, 1);
--cs-emerald-600: hsla(161, 94%, 30%, 1);
--cs-emerald-700: hsla(163, 94%, 24%, 1);
--cs-emerald-800: hsla(163, 88%, 20%, 1);
--cs-emerald-900: hsla(164, 86%, 16%, 1);
--cs-emerald-950: hsla(166, 91%, 9%, 1);
/* Teal */
--cs-teal-50: hsla(166, 76%, 97%, 1);
--cs-teal-100: hsla(167, 85%, 89%, 1);
--cs-teal-200: hsla(168, 84%, 78%, 1);
--cs-teal-300: hsla(171, 77%, 64%, 1);
--cs-teal-400: hsla(172, 66%, 50%, 1);
--cs-teal-500: hsla(173, 80%, 40%, 1);
--cs-teal-600: hsla(175, 84%, 32%, 1);
--cs-teal-700: hsla(175, 77%, 26%, 1);
--cs-teal-800: hsla(176, 69%, 22%, 1);
--cs-teal-900: hsla(176, 61%, 19%, 1);
--cs-teal-950: hsla(179, 84%, 10%, 1);
/* Cyan */
--cs-cyan-50: hsla(183, 100%, 96%, 1);
--cs-cyan-100: hsla(185, 96%, 90%, 1);
--cs-cyan-200: hsla(186, 94%, 82%, 1);
--cs-cyan-300: hsla(187, 92%, 69%, 1);
--cs-cyan-400: hsla(188, 86%, 53%, 1);
--cs-cyan-500: hsla(189, 94%, 43%, 1);
--cs-cyan-600: hsla(192, 91%, 36%, 1);
--cs-cyan-700: hsla(193, 82%, 31%, 1);
--cs-cyan-800: hsla(194, 70%, 27%, 1);
--cs-cyan-900: hsla(196, 64%, 24%, 1);
--cs-cyan-950: hsla(197, 79%, 15%, 1);
/* Sky */
--cs-sky-50: hsla(204, 100%, 97%, 1);
--cs-sky-100: hsla(204, 94%, 94%, 1);
--cs-sky-200: hsla(201, 94%, 86%, 1);
--cs-sky-300: hsla(199, 95%, 74%, 1);
--cs-sky-400: hsla(198, 93%, 60%, 1);
--cs-sky-500: hsla(199, 89%, 48%, 1);
--cs-sky-600: hsla(200, 98%, 39%, 1);
--cs-sky-700: hsla(201, 96%, 32%, 1);
--cs-sky-800: hsla(201, 90%, 27%, 1);
--cs-sky-900: hsla(202, 80%, 24%, 1);
--cs-sky-950: hsla(204, 80%, 16%, 1);
/* Blue */
--cs-blue-50: hsla(214, 100%, 97%, 1);
--cs-blue-100: hsla(214, 95%, 93%, 1);
--cs-blue-200: hsla(213, 97%, 87%, 1);
--cs-blue-300: hsla(212, 96%, 78%, 1);
--cs-blue-400: hsla(213, 94%, 68%, 1);
--cs-blue-500: hsla(217, 91%, 60%, 1);
--cs-blue-600: hsla(221, 83%, 53%, 1);
--cs-blue-700: hsla(224, 76%, 48%, 1);
--cs-blue-800: hsla(226, 71%, 40%, 1);
--cs-blue-900: hsla(224, 64%, 33%, 1);
--cs-blue-950: hsla(226, 57%, 21%, 1);
/* Indigo */
--cs-indigo-50: hsla(226, 100%, 97%, 1);
--cs-indigo-100: hsla(226, 100%, 94%, 1);
--cs-indigo-200: hsla(228, 96%, 89%, 1);
--cs-indigo-300: hsla(230, 94%, 82%, 1);
--cs-indigo-400: hsla(234, 89%, 74%, 1);
--cs-indigo-500: hsla(239, 84%, 67%, 1);
--cs-indigo-600: hsla(243, 75%, 59%, 1);
--cs-indigo-700: hsla(245, 58%, 51%, 1);
--cs-indigo-800: hsla(244, 55%, 41%, 1);
--cs-indigo-900: hsla(242, 47%, 34%, 1);
--cs-indigo-950: hsla(244, 47%, 20%, 1);
/* Violet */
--cs-violet-50: hsla(250, 100%, 98%, 1);
--cs-violet-100: hsla(251, 91%, 95%, 1);
--cs-violet-200: hsla(251, 95%, 92%, 1);
--cs-violet-300: hsla(253, 95%, 85%, 1);
--cs-violet-400: hsla(255, 92%, 76%, 1);
--cs-violet-500: hsla(258, 90%, 66%, 1);
--cs-violet-600: hsla(262, 83%, 58%, 1);
--cs-violet-700: hsla(263, 70%, 50%, 1);
--cs-violet-800: hsla(263, 69%, 42%, 1);
--cs-violet-900: hsla(264, 67%, 35%, 1);
--cs-violet-950: hsla(262, 78%, 23%, 1);
/* Purple */
--cs-purple-50: hsla(270, 100%, 98%, 1);
--cs-purple-100: hsla(269, 100%, 95%, 1);
--cs-purple-200: hsla(269, 100%, 92%, 1);
--cs-purple-300: hsla(269, 97%, 85%, 1);
--cs-purple-400: hsla(270, 95%, 75%, 1);
--cs-purple-500: hsla(271, 91%, 65%, 1);
--cs-purple-600: hsla(271, 81%, 56%, 1);
--cs-purple-700: hsla(272, 72%, 47%, 1);
--cs-purple-800: hsla(273, 67%, 39%, 1);
--cs-purple-900: hsla(274, 66%, 32%, 1);
--cs-purple-950: hsla(274, 87%, 21%, 1);
/* Fuchsia */
--cs-fuchsia-50: hsla(289, 100%, 98%, 1);
--cs-fuchsia-100: hsla(287, 100%, 95%, 1);
--cs-fuchsia-200: hsla(288, 96%, 91%, 1);
--cs-fuchsia-300: hsla(291, 93%, 83%, 1);
--cs-fuchsia-400: hsla(292, 91%, 73%, 1);
--cs-fuchsia-500: hsla(292, 84%, 61%, 1);
--cs-fuchsia-600: hsla(293, 69%, 49%, 1);
--cs-fuchsia-700: hsla(295, 72%, 40%, 1);
--cs-fuchsia-800: hsla(295, 70%, 33%, 1);
--cs-fuchsia-900: hsla(297, 64%, 28%, 1);
--cs-fuchsia-950: hsla(297, 90%, 16%, 1);
/* Pink */
--cs-pink-50: hsla(327, 73%, 97%, 1);
--cs-pink-100: hsla(326, 78%, 95%, 1);
--cs-pink-200: hsla(326, 85%, 90%, 1);
--cs-pink-300: hsla(327, 87%, 82%, 1);
--cs-pink-400: hsla(329, 86%, 70%, 1);
--cs-pink-500: hsla(330, 81%, 60%, 1);
--cs-pink-600: hsla(333, 71%, 51%, 1);
--cs-pink-700: hsla(335, 78%, 42%, 1);
--cs-pink-800: hsla(336, 74%, 35%, 1);
--cs-pink-900: hsla(336, 69%, 30%, 1);
--cs-pink-950: hsla(336, 84%, 17%, 1);
/* Rose */
--cs-rose-50: hsla(356, 100%, 97%, 1);
--cs-rose-100: hsla(356, 100%, 95%, 1);
--cs-rose-200: hsla(353, 96%, 90%, 1);
--cs-rose-300: hsla(353, 96%, 82%, 1);
--cs-rose-400: hsla(351, 95%, 71%, 1);
--cs-rose-500: hsla(350, 89%, 60%, 1);
--cs-rose-600: hsla(347, 77%, 50%, 1);
--cs-rose-700: hsla(345, 83%, 41%, 1);
--cs-rose-800: hsla(343, 80%, 35%, 1);
--cs-rose-900: hsla(342, 75%, 30%, 1);
--cs-rose-950: hsla(343, 88%, 16%, 1);
/* Black & White */
--cs-black: hsla(0, 0%, 0%, 1);
--cs-white: hsla(0, 0%, 100%, 1);
/* ==================== */
/* Semantic Tokens - Light Mode */
/* ==================== */
/* Brand Colors */
--cs-primary: var(--cs-lime-500);
--cs-destructive: var(--cs-red-500);
--cs-success: var(--cs-green-500);
--cs-warning: var(--cs-amber-500);
/* Background & Foreground */
--cs-background: var(--cs-zinc-50);
--cs-background-subtle: hsla(0, 0%, 0%, 0.02);
--cs-foreground: hsla(0, 0%, 0%, 0.9);
--cs-foreground-secondary: hsla(0, 0%, 0%, 0.6);
--cs-foreground-muted: hsla(0, 0%, 0%, 0.4);
/* Card & Popover */
--cs-card: var(--cs-white);
--cs-popover: var(--cs-white);
/* Border */
--cs-border: hsla(0, 0%, 0%, 0.1);
--cs-border-hover: hsla(0, 0%, 0%, 0.2);
--cs-border-active: hsla(0, 0%, 0%, 0.3);
/* Ring (Focus) */
--cs-ring: hsla(84, 81%, 44%, 0.4);
/* UI Element Colors */
--cs-secondary: hsla(0, 0%, 0%, 0.05); /* Secondary Button Background */
--cs-secondary-hover: hsla(0, 0%, 0%, 0.85);
--cs-secondary-active: hsla(0, 0%, 0%, 0.7);
--cs-muted: hsla(0, 0%, 0%, 0.05); /* Muted/Subtle Background */
--cs-accent: hsla(0, 0%, 0%, 0.05); /* Accent Background */
--cs-ghost-hover: hsla(0, 0%, 0%, 0.05); /* Ghost Button Hover */
--cs-ghost-active: hsla(0, 0%, 0%, 0.1); /* Ghost Button Active */
/* Sidebar */
--cs-sidebar: var(--cs-white);
--cs-sidebar-accent: hsla(0, 0%, 0%, 0.05);
/* ==================== */
/* UI 元素细分颜色 */
/* ==================== */
/* Modal / Overlay */
--cs-modal-backdrop: hsla(0, 0%, 0%, 0.4);
--cs-modal-thumb: hsla(0, 0%, 0%, 0.2);
--cs-modal-thumb-hover: hsla(0, 0%, 0%, 0.3);
/* Icon */
--cs-icon-default: var(--cs-foreground-secondary);
--cs-icon-hover: var(--cs-foreground);
/* Input / Select */
--cs-input-background: var(--cs-white);
--cs-input-border: var(--cs-border);
--cs-input-border-hover: var(--cs-border-hover);
--cs-input-border-focus: var(--cs-primary);
/* Primary Button */
--cs-primary-button-background: var(--cs-primary);
--cs-primary-button-text: var(--cs-white);
--cs-primary-button-background-hover: hsla(84, 81%, 44%, 0.85);
--cs-primary-button-background-active: hsla(84, 81%, 44%, 0.7);
--cs-primary-button-background-2nd: hsla(84, 81%, 44%, 0.1);
--cs-primary-button-background-3rd: hsla(84, 81%, 44%, 0.05);
/* Secondary Button */
--cs-secondary-button-background: var(--cs-secondary);
--cs-secondary-button-text: var(--cs-foreground);
--cs-secondary-button-background-hover: hsla(0, 0%, 0%, 0.85);
--cs-secondary-button-background-active: hsla(0, 0%, 0%, 0.7);
--cs-secondary-button-border: var(--cs-border);
/* Ghost Button */
--cs-ghost-button-background: hsla(0, 0%, 0%, 0);
--cs-ghost-button-text: var(--cs-foreground);
--cs-ghost-button-background-hover: var(--cs-ghost-hover);
--cs-ghost-button-background-active: var(--cs-ghost-active);
/* ==================== */
/* Spacing & Sizing (合并) */
/* ==================== */
--cs-size-5xs: 0.25rem; /* 4px */
--cs-size-4xs: 0.5rem; /* 8px */
--cs-size-3xs: 0.75rem; /* 12px */
--cs-size-2xs: 1rem; /* 16px */
--cs-size-xs: 1.5rem; /* 24px */
--cs-size-sm: 2rem; /* 32px */
--cs-size-md: 2.5rem; /* 40px */
--cs-size-lg: 3rem; /* 48px */
--cs-size-xl: 3.5rem; /* 56px */
--cs-size-2xl: 4rem; /* 64px */
--cs-size-3xl: 4.5rem; /* 72px */
--cs-size-4xl: 5rem; /* 80px */
--cs-size-5xl: 5.5rem; /* 88px */
--cs-size-6xl: 6rem; /* 96px */
--cs-size-7xl: 6.5rem; /* 104px */
--cs-size-8xl: 7rem; /* 112px */
/* ==================== */
/* Border Radius */
/* ==================== */
--cs-radius-4xs: 0.25rem; /* 4px */
--cs-radius-3xs: 0.5rem; /* 8px */
--cs-radius-2xs: 0.75rem; /* 12px */
--cs-radius-xs: 1rem; /* 16px */
--cs-radius-sm: 1.5rem; /* 24px */
--cs-radius-md: 2rem; /* 32px */
--cs-radius-lg: 2.5rem; /* 40px */
--cs-radius-xl: 3rem; /* 48px */
--cs-radius-2xl: 3.5rem; /* 56px */
--cs-radius-3xl: 4rem; /* 64px */
--cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
/* Border Width */
--cs-border-width-sm: 1px; /* 1px */
--cs-border-width-md: 2px; /* 2px */
--cs-border-width-lg: 3px; /* 3px */
/* ==================== */
/* Typography */
/* ==================== */
/* Font Families */
--cs-font-family-heading: Inter;
--cs-font-family-body: Inter;
/* Font Weights (修正单位错误) */
--cs-font-weight-regular: 400;
--cs-font-weight-medium: 500;
--cs-font-weight-bold: 700;
/* Font Sizes - Body */
--cs-font-size-body-xs: 0.75rem; /* 12px */
--cs-font-size-body-sm: 0.875rem; /* 14px */
--cs-font-size-body-md: 1rem; /* 16px */
--cs-font-size-body-lg: 1.125rem; /* 18px */
/* Font Sizes - Heading */
--cs-font-size-heading-xs: 1.25rem; /* 20px */
--cs-font-size-heading-sm: 1.5rem; /* 24px */
--cs-font-size-heading-md: 2rem; /* 32px */
--cs-font-size-heading-lg: 2.5rem; /* 40px */
--cs-font-size-heading-xl: 3rem; /* 48px */
--cs-font-size-heading-2xl: 3.75rem; /* 60px */
/* Line Heights - Body */
--cs-line-height-body-xs: 1.25rem; /* 20px */
--cs-line-height-body-sm: 1.5rem; /* 24px */
--cs-line-height-body-md: 1.5rem; /* 24px */
--cs-line-height-body-lg: 1.75rem; /* 28px */
/* Line Heights - Heading */
--cs-line-height-heading-xs: 2rem; /* 32px */
--cs-line-height-heading-sm: 2.5rem; /* 40px */
--cs-line-height-heading-md: 3rem; /* 48px */
--cs-line-height-heading-lg: 3.75rem; /* 60px */
--cs-line-height-heading-xl: 5rem; /* 80px */
/* Paragraph Spacing */
--cs-paragraph-spacing-body-xs: 0.75rem; /* 12px */
--cs-paragraph-spacing-body-sm: 0.875rem; /* 14px */
--cs-paragraph-spacing-body-md: 1rem; /* 16px */
--cs-paragraph-spacing-body-lg: 1.125rem; /* 18px */
--cs-paragraph-spacing-heading-xs: 1.25rem; /* 20px */
--cs-paragraph-spacing-heading-sm: 1.5rem; /* 24px */
--cs-paragraph-spacing-heading-md: 2rem; /* 32px */
--cs-paragraph-spacing-heading-lg: 2.5rem; /* 40px */
--cs-paragraph-spacing-heading-xl: 3rem; /* 48px */
--cs-paragraph-spacing-heading-2xl: 3.75rem; /* 60px */
}
/* ==================== */
/* Dark Mode */
/* ==================== */
.dark {
/* Background & Foreground */
--cs-background: var(--cs-zinc-900);
--cs-background-subtle: hsla(0, 0%, 100%, 0.02);
--cs-foreground: hsla(0, 0%, 100%, 0.9);
--cs-foreground-secondary: hsla(0, 0%, 100%, 0.6);
--cs-foreground-muted: hsla(0, 0%, 100%, 0.4);
/* Card & Popover */
--cs-card: var(--cs-black);
--cs-popover: var(--cs-black);
/* Border */
--cs-border: hsla(0, 0%, 100%, 0.1);
--cs-border-hover: hsla(0, 0%, 100%, 0.2);
--cs-border-active: hsla(0, 0%, 100%, 0.3);
/* Ring (Focus) - 保持不变 */
--cs-ring: hsla(84, 81%, 44%, 0.4);
/* UI Element Colors - Dark Mode */
--cs-secondary: hsla(0, 0%, 100%, 0.1); /* Secondary Button Background */
--cs-secondary-hover: hsla(0, 0%, 100%, 0.2);
--cs-secondary-active: hsla(0, 0%, 100%, 0.25);
--cs-muted: hsla(0, 0%, 100%, 0.1); /* Muted/Subtle Background */
--cs-accent: hsla(0, 0%, 100%, 0.1); /* Accent Background */
--cs-ghost-hover: hsla(0, 0%, 100%, 0.1); /* Ghost Button Hover */
--cs-ghost-active: hsla(0, 0%, 100%, 0.15); /* Ghost Button Active */
/* Sidebar */
--cs-sidebar: var(--cs-black);
--cs-sidebar-accent: hsla(0, 0%, 100%, 0.1);
/* ==================== */
/* UI 元素细分颜色 (Dark Mode) */
/* ==================== */
/* Modal / Overlay */
--cs-modal-backdrop: hsla(0, 0%, 0%, 0.06);
--cs-modal-thumb: hsla(0, 0%, 100%, 0.2);
--cs-modal-thumb-hover: hsla(0, 0%, 100%, 0.3);
/* Icon */
--cs-icon-default: var(--cs-foreground-secondary);
--cs-icon-hover: var(--cs-foreground);
/* Input / Select */
--cs-input-background: var(--cs-black);
--cs-input-border: var(--cs-border);
--cs-input-border-hover: var(--cs-border-hover);
--cs-input-border-focus: var(--cs-primary);
/* Primary Button - 保持不变 */
--cs-primary-button-background: var(--cs-primary);
--cs-primary-button-text: var(--cs-white);
--cs-primary-button-background-hover: hsla(84, 81%, 44%, 0.85);
--cs-primary-button-background-active: hsla(84, 81%, 44%, 0.7);
--cs-primary-button-background-2nd: hsla(84, 81%, 44%, 0.1);
--cs-primary-button-background-3rd: hsla(84, 81%, 44%, 0.05);
/* Secondary Button */
--cs-secondary-button-background: var(--cs-secondary);
--cs-secondary-button-text: var(--cs-foreground);
--cs-secondary-button-background-hover: hsla(0, 0%, 100%, 0.2);
--cs-secondary-button-background-active: hsla(0, 0%, 100%, 0.25);
--cs-secondary-button-border: var(--cs-border);
/* Ghost Button */
--cs-ghost-button-background: hsla(0, 0%, 100%, 0);
--cs-ghost-button-text: var(--cs-foreground);
--cs-ghost-button-background-hover: var(--cs-ghost-hover);
--cs-ghost-button-background-active: var(--cs-ghost-active);
}

235
packages/ui/src/styles/globals.css
View File

@ -1,116 +1,139 @@
/**
* CherryStudio Globals CSS
*
* 主包专用：完整样式 + Tailwind 覆盖
* - 引入 theme.css（包含所有 cs-* 前缀类）
* - 覆盖 Tailwind 标准命名（bg-primary 等）
*/
@import 'tailwindcss';
@import 'tw-animate-css';
@import './theme.css'; /* 已包含 design-tokens.css 和所有 cs-* 工具类 */
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
/* ==================== */
/* 覆盖 Tailwind 标准命名（仅主包使用） */
/* 注意：cs-* 前缀类已由 theme.css 提供，此处不重复定义 */
/* ==================== */
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
}
@theme {
/* ==================== */
/* 语义化颜色（覆盖 Tailwind 标准命名） */
/* ==================== */
--color-primary: var(--cs-primary);
--color-primary-foreground: var(--cs-white);
--color-destructive: var(--cs-destructive);
--color-destructive-foreground: var(--cs-white);
--color-background: var(--cs-background);
--color-foreground: var(--cs-foreground);
--color-card: var(--cs-card);
--color-card-foreground: var(--cs-foreground);
--color-popover: var(--cs-popover);
--color-popover-foreground: var(--cs-foreground);
--color-secondary: var(--cs-secondary);
--color-secondary-foreground: var(--cs-foreground);
--color-muted: var(--cs-muted);
--color-muted-foreground: var(--cs-foreground-secondary);
--color-accent: var(--cs-accent);
--color-accent-foreground: var(--cs-foreground);
--color-border: var(--cs-border);
--color-input: var(--cs-border);
--color-ring: var(--cs-ring);
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
/* 图表颜色 */
--color-chart-1: var(--cs-blue-500);
--color-chart-2: var(--cs-emerald-500);
--color-chart-3: var(--cs-purple-500);
--color-chart-4: var(--cs-amber-500);
--color-chart-5: var(--cs-orange-500);
/* 侧边栏 */
--color-sidebar: var(--cs-sidebar);
--color-sidebar-foreground: var(--cs-foreground);
--color-sidebar-primary: var(--cs-primary);
--color-sidebar-primary-foreground: var(--cs-white);
--color-sidebar-accent: var(--cs-sidebar-accent);
--color-sidebar-accent-foreground: var(--cs-foreground);
--color-sidebar-border: var(--cs-border);
--color-sidebar-ring: var(--cs-ring);
/* ==================== */
/* Primitive 颜色（标准命名，覆盖 Tailwind） */
/* ==================== */
/* Red */
--color-red-50: var(--cs-red-50);
--color-red-100: var(--cs-red-100);
--color-red-200: var(--cs-red-200);
--color-red-300: var(--cs-red-300);
--color-red-400: var(--cs-red-400);
--color-red-500: var(--cs-red-500);
--color-red-600: var(--cs-red-600);
--color-red-700: var(--cs-red-700);
--color-red-800: var(--cs-red-800);
--color-red-900: var(--cs-red-900);
--color-red-950: var(--cs-red-950);
/* Lime */
--color-lime-50: var(--cs-lime-50);
--color-lime-100: var(--cs-lime-100);
--color-lime-200: var(--cs-lime-200);
--color-lime-300: var(--cs-lime-300);
--color-lime-400: var(--cs-lime-400);
--color-lime-500: var(--cs-lime-500);
--color-lime-600: var(--cs-lime-600);
--color-lime-700: var(--cs-lime-700);
--color-lime-800: var(--cs-lime-800);
--color-lime-900: var(--cs-lime-900);
--color-lime-950: var(--cs-lime-950);
/* Green */
--color-green-500: var(--cs-green-500);
/* Amber */
--color-amber-500: var(--cs-amber-500);
/* Blue */
--color-blue-500: var(--cs-blue-500);
/* Emerald */
--color-emerald-500: var(--cs-emerald-500);
/* Purple */
--color-purple-500: var(--cs-purple-500);
/* Orange */
--color-orange-500: var(--cs-orange-500);
/* Zinc */
--color-zinc-50: var(--cs-zinc-50);
--color-zinc-500: var(--cs-zinc-500);
--color-zinc-900: var(--cs-zinc-900);
/* 其他常用颜色 */
--color-slate-500: var(--cs-slate-500);
--color-gray-500: var(--cs-gray-500);
--color-black: var(--cs-black);
--color-white: var(--cs-white);
/* ==================== */
/* Spacing & Radius（标准命名，覆盖 Tailwind） */
/* ==================== */
--spacing-xs: var(--cs-size-xs);
--spacing-sm: var(--cs-size-sm);
--spacing-md: var(--cs-size-md);
--spacing-lg: var(--cs-size-lg);
--spacing-xl: var(--cs-size-xl);
--spacing-2xl: var(--cs-size-2xl);
--radius-xs: var(--cs-radius-xs);
--radius-sm: var(--cs-radius-sm);
--radius-md: var(--cs-radius-md);
--radius-lg: var(--cs-radius-lg);
--radius-xl: var(--cs-radius-xl);
--radius-2xl: var(--cs-radius-2xl);
}
@layer base {

242
packages/ui/src/styles/theme.css Normal file
View File

@ -0,0 +1,242 @@
/**
* CherryStudio Theme - 生成 cs-* 前缀工具类
*
* 用途：
* - npm 包用户安全导入（不覆盖用户的标准 Tailwind 命名）
* - UI 库组件内部使用（确保自包含）
*
* 生成的工具类示例：
* - bg-cs-primary, text-cs-primary
* - bg-cs-destructive, border-cs-destructive
* - p-cs-md, gap-cs-lg, m-cs-xs
* - rounded-cs-md, rounded-cs-lg
*/
@import './design-tokens.css';
@theme {
/* ==================== */
/* 语义化颜色（生成 bg-cs-primary 等） */
/* ==================== */
--color-cs-primary: var(--cs-primary);
--color-cs-destructive: var(--cs-destructive);
--color-cs-success: var(--cs-success);
--color-cs-warning: var(--cs-warning);
--color-cs-background: var(--cs-background);
--color-cs-foreground: var(--cs-foreground);
--color-cs-foreground-secondary: var(--cs-foreground-secondary);
--color-cs-foreground-muted: var(--cs-foreground-muted);
--color-cs-border: var(--cs-border);
--color-cs-border-hover: var(--cs-border-hover);
--color-cs-border-active: var(--cs-border-active);
--color-cs-ring: var(--cs-ring);
--color-cs-card: var(--cs-card);
--color-cs-popover: var(--cs-popover);
--color-cs-sidebar: var(--cs-sidebar);
--color-cs-secondary: var(--cs-secondary);
--color-cs-muted: var(--cs-muted);
--color-cs-accent: var(--cs-accent);
--color-cs-sidebar-accent: var(--cs-sidebar-accent);
/* ==================== */
/* Primitive 颜色（完整色阶） */
/* ==================== */
/* Neutral */
--color-cs-neutral-50: var(--cs-neutral-50);
--color-cs-neutral-100: var(--cs-neutral-100);
--color-cs-neutral-200: var(--cs-neutral-200);
--color-cs-neutral-300: var(--cs-neutral-300);
--color-cs-neutral-400: var(--cs-neutral-400);
--color-cs-neutral-500: var(--cs-neutral-500);
--color-cs-neutral-600: var(--cs-neutral-600);
--color-cs-neutral-700: var(--cs-neutral-700);
--color-cs-neutral-800: var(--cs-neutral-800);
--color-cs-neutral-900: var(--cs-neutral-900);
--color-cs-neutral-950: var(--cs-neutral-950);
/* Zinc */
--color-cs-zinc-50: var(--cs-zinc-50);
--color-cs-zinc-100: var(--cs-zinc-100);
--color-cs-zinc-200: var(--cs-zinc-200);
--color-cs-zinc-300: var(--cs-zinc-300);
--color-cs-zinc-400: var(--cs-zinc-400);
--color-cs-zinc-500: var(--cs-zinc-500);
--color-cs-zinc-600: var(--cs-zinc-600);
--color-cs-zinc-700: var(--cs-zinc-700);
--color-cs-zinc-800: var(--cs-zinc-800);
--color-cs-zinc-900: var(--cs-zinc-900);
--color-cs-zinc-950: var(--cs-zinc-950);
/* Red */
--color-cs-red-50: var(--cs-red-50);
--color-cs-red-100: var(--cs-red-100);
--color-cs-red-200: var(--cs-red-200);
--color-cs-red-300: var(--cs-red-300);
--color-cs-red-400: var(--cs-red-400);
--color-cs-red-500: var(--cs-red-500);
--color-cs-red-600: var(--cs-red-600);
--color-cs-red-700: var(--cs-red-700);
--color-cs-red-800: var(--cs-red-800);
--color-cs-red-900: var(--cs-red-900);
--color-cs-red-950: var(--cs-red-950);
/* Lime (品牌主色) */
--color-cs-lime-50: var(--cs-lime-50);
--color-cs-lime-100: var(--cs-lime-100);
--color-cs-lime-200: var(--cs-lime-200);
--color-cs-lime-300: var(--cs-lime-300);
--color-cs-lime-400: var(--cs-lime-400);
--color-cs-lime-500: var(--cs-lime-500);
--color-cs-lime-600: var(--cs-lime-600);
--color-cs-lime-700: var(--cs-lime-700);
--color-cs-lime-800: var(--cs-lime-800);
--color-cs-lime-900: var(--cs-lime-900);
--color-cs-lime-950: var(--cs-lime-950);
/* Green */
--color-cs-green-50: var(--cs-green-50);
--color-cs-green-100: var(--cs-green-100);
--color-cs-green-200: var(--cs-green-200);
--color-cs-green-300: var(--cs-green-300);
--color-cs-green-400: var(--cs-green-400);
--color-cs-green-500: var(--cs-green-500);
--color-cs-green-600: var(--cs-green-600);
--color-cs-green-700: var(--cs-green-700);
--color-cs-green-800: var(--cs-green-800);
--color-cs-green-900: var(--cs-green-900);
--color-cs-green-950: var(--cs-green-950);
/* Amber */
--color-cs-amber-50: var(--cs-amber-50);
--color-cs-amber-100: var(--cs-amber-100);
--color-cs-amber-200: var(--cs-amber-200);
--color-cs-amber-300: var(--cs-amber-300);
--color-cs-amber-400: var(--cs-amber-400);
--color-cs-amber-500: var(--cs-amber-500);
--color-cs-amber-600: var(--cs-amber-600);
--color-cs-amber-700: var(--cs-amber-700);
--color-cs-amber-800: var(--cs-amber-800);
--color-cs-amber-900: var(--cs-amber-900);
--color-cs-amber-950: var(--cs-amber-950);
/* Blue */
--color-cs-blue-50: var(--cs-blue-50);
--color-cs-blue-100: var(--cs-blue-100);
--color-cs-blue-200: var(--cs-blue-200);
--color-cs-blue-300: var(--cs-blue-300);
--color-cs-blue-400: var(--cs-blue-400);
--color-cs-blue-500: var(--cs-blue-500);
--color-cs-blue-600: var(--cs-blue-600);
--color-cs-blue-700: var(--cs-blue-700);
--color-cs-blue-800: var(--cs-blue-800);
--color-cs-blue-900: var(--cs-blue-900);
--color-cs-blue-950: var(--cs-blue-950);
/* Emerald */
--color-cs-emerald-50: var(--cs-emerald-50);
--color-cs-emerald-100: var(--cs-emerald-100);
--color-cs-emerald-200: var(--cs-emerald-200);
--color-cs-emerald-300: var(--cs-emerald-300);
--color-cs-emerald-400: var(--cs-emerald-400);
--color-cs-emerald-500: var(--cs-emerald-500);
--color-cs-emerald-600: var(--cs-emerald-600);
--color-cs-emerald-700: var(--cs-emerald-700);
--color-cs-emerald-800: var(--cs-emerald-800);
--color-cs-emerald-900: var(--cs-emerald-900);
--color-cs-emerald-950: var(--cs-emerald-950);
/* Purple */
--color-cs-purple-50: var(--cs-purple-50);
--color-cs-purple-100: var(--cs-purple-100);
--color-cs-purple-200: var(--cs-purple-200);
--color-cs-purple-300: var(--cs-purple-300);
--color-cs-purple-400: var(--cs-purple-400);
--color-cs-purple-500: var(--cs-purple-500);
--color-cs-purple-600: var(--cs-purple-600);
--color-cs-purple-700: var(--cs-purple-700);
--color-cs-purple-800: var(--cs-purple-800);
--color-cs-purple-900: var(--cs-purple-900);
--color-cs-purple-950: var(--cs-purple-950);
/* Orange */
--color-cs-orange-50: var(--cs-orange-50);
--color-cs-orange-100: var(--cs-orange-100);
--color-cs-orange-200: var(--cs-orange-200);
--color-cs-orange-300: var(--cs-orange-300);
--color-cs-orange-400: var(--cs-orange-400);
--color-cs-orange-500: var(--cs-orange-500);
--color-cs-orange-600: var(--cs-orange-600);
--color-cs-orange-700: var(--cs-orange-700);
--color-cs-orange-800: var(--cs-orange-800);
--color-cs-orange-900: var(--cs-orange-900);
--color-cs-orange-950: var(--cs-orange-950);
/* 其他颜色（按需添加） */
--color-cs-slate-500: var(--cs-slate-500);
--color-cs-gray-500: var(--cs-gray-500);
--color-cs-indigo-500: var(--cs-indigo-500);
--color-cs-violet-500: var(--cs-violet-500);
--color-cs-cyan-500: var(--cs-cyan-500);
--color-cs-sky-500: var(--cs-sky-500);
--color-cs-teal-500: var(--cs-teal-500);
--color-cs-fuchsia-500: var(--cs-fuchsia-500);
--color-cs-pink-500: var(--cs-pink-500);
--color-cs-rose-500: var(--cs-rose-500);
--color-cs-yellow-500: var(--cs-yellow-500);
/* Black & White */
--color-cs-black: var(--cs-black);
--color-cs-white: var(--cs-white);
/* ==================== */
/* Spacing（生成 p-cs-md, gap-cs-lg 等） */
/* ==================== */
--spacing-cs-5xs: var(--cs-size-5xs);
--spacing-cs-4xs: var(--cs-size-4xs);
--spacing-cs-3xs: var(--cs-size-3xs);
--spacing-cs-2xs: var(--cs-size-2xs);
--spacing-cs-xs: var(--cs-size-xs);
--spacing-cs-sm: var(--cs-size-sm);
--spacing-cs-md: var(--cs-size-md);
--spacing-cs-lg: var(--cs-size-lg);
--spacing-cs-xl: var(--cs-size-xl);
--spacing-cs-2xl: var(--cs-size-2xl);
--spacing-cs-3xl: var(--cs-size-3xl);
--spacing-cs-4xl: var(--cs-size-4xl);
--spacing-cs-5xl: var(--cs-size-5xl);
--spacing-cs-6xl: var(--cs-size-6xl);
--spacing-cs-7xl: var(--cs-size-7xl);
--spacing-cs-8xl: var(--cs-size-8xl);
/* ==================== */
/* Border Radius（生成 rounded-cs-md 等） */
/* ==================== */
--radius-cs-4xs: var(--cs-radius-4xs);
--radius-cs-3xs: var(--cs-radius-3xs);
--radius-cs-2xs: var(--cs-radius-2xs);
--radius-cs-xs: var(--cs-radius-xs);
--radius-cs-sm: var(--cs-radius-sm);
--radius-cs-md: var(--cs-radius-md);
--radius-cs-lg: var(--cs-radius-lg);
--radius-cs-xl: var(--cs-radius-xl);
--radius-cs-2xl: var(--cs-radius-2xl);
--radius-cs-3xl: var(--cs-radius-3xl);
--radius-cs-round: var(--cs-radius-round);
/* ==================== */
/* Border Width（生成 border-cs-md 等） */
/* ==================== */
--border-width-cs-sm: var(--cs-border-width-sm);
--border-width-cs-md: var(--cs-border-width-md);
--border-width-cs-lg: var(--cs-border-width-lg);
}