From fe188ba8fb24ef8ec126e72070a291800d54acbb Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Thu, 30 Oct 2025 19:40:19 +0800 Subject: [PATCH] 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. --- .../ui/design-reference/CONVERSION_LOG.md | 214 +++++ packages/ui/design-reference/README.md | 26 + packages/ui/design-reference/todocss.css | 870 ++++++++++++++++++ packages/ui/package.json | 5 +- packages/ui/src/styles/design-tokens.css | 561 +++++++++++ packages/ui/src/styles/globals.css | 235 ++--- packages/ui/src/styles/theme.css | 242 +++++ 7 files changed, 2046 insertions(+), 107 deletions(-) create mode 100644 packages/ui/design-reference/CONVERSION_LOG.md create mode 100644 packages/ui/design-reference/README.md create mode 100644 packages/ui/design-reference/todocss.css create mode 100644 packages/ui/src/styles/design-tokens.css create mode 100644 packages/ui/src/styles/theme.css diff --git a/packages/ui/design-reference/CONVERSION_LOG.md b/packages/ui/design-reference/CONVERSION_LOG.md new file mode 100644 index 0000000000..f9f26e7fb9 --- /dev/null +++ b/packages/ui/design-reference/CONVERSION_LOG.md @@ -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" +``` + diff --git a/packages/ui/design-reference/README.md b/packages/ui/design-reference/README.md new file mode 100644 index 0000000000..ea12d034ac --- /dev/null +++ b/packages/ui/design-reference/README.md @@ -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/` 中的文件 + diff --git a/packages/ui/design-reference/todocss.css b/packages/ui/design-reference/todocss.css new file mode 100644 index 0000000000..0f7ed153db --- /dev/null +++ b/packages/ui/design-reference/todocss.css @@ -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; +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 790acc9bea..8ebc28aabf 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -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" } diff --git a/packages/ui/src/styles/design-tokens.css b/packages/ui/src/styles/design-tokens.css new file mode 100644 index 0000000000..268abf58d0 --- /dev/null +++ b/packages/ui/src/styles/design-tokens.css @@ -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); +} + diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css index 02687bd0b8..64b5dcb2b4 100644 --- a/packages/ui/src/styles/globals.css +++ b/packages/ui/src/styles/globals.css @@ -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 { diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css new file mode 100644 index 0000000000..72c25465f5 --- /dev/null +++ b/packages/ui/src/styles/theme.css @@ -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); +} +