From 91f90884363596474b4bec3aab778d430245b172 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Wed, 29 Oct 2025 16:51:57 +0800 Subject: [PATCH] feat: add design system documentation and todocss.css file - Introduced a comprehensive design system document outlining integration strategies for Tailwind CSS v4, usage guidelines, and UI library balance strategies. - Added todocss.css file containing typography, spacing, sizing, and color variables for the design system. - Established naming conventions and core transformation rules for design tokens to enhance consistency and usability across the UI components. --- packages/ui/DESIGN_SYSTEM.md | 368 +++++++++++++++ packages/ui/todocss.css | 851 +++++++++++++++++++++++++++++++++++ 2 files changed, 1219 insertions(+) create mode 100644 packages/ui/DESIGN_SYSTEM.md create mode 100644 packages/ui/todocss.css diff --git a/packages/ui/DESIGN_SYSTEM.md b/packages/ui/DESIGN_SYSTEM.md new file mode 100644 index 0000000000..61d9d65456 --- /dev/null +++ b/packages/ui/DESIGN_SYSTEM.md @@ -0,0 +1,368 @@ +# Cherry Studio Design System 集成方案 + +本文档聚焦三个核心问题： + +1. **如何将 todocss.css 集成到 Tailwind CSS v4** +2. **如何在项目中使用集成后的设计系统** +3. **如何平衡 UI 库和主包的需求** + +--- + +## 一、集成策略 + +### 1.1 文件架构 + +``` +todocss.css (设计师提供) + ↓ 转换 & 优化 +design-tokens.css (--ds-* 变量) + ↓ @theme inline 映射 +globals.css (cs-* 工具类) + ↓ 开发者使用 +React Components +``` + +### 1.2 核心转换规则 + +#### 变量简化 + +```css +/* todocss.css */ +--Brand--Base_Colors--Primary: hsla(84, 81%, 44%, 1); + +/* ↓ 转换为 design-tokens.css */ +--ds-primary: hsla(84, 81%, 44%, 1); + +/* ↓ 映射到 globals.css */ +@theme inline { + --color-cs-primary: var(--ds-primary); +} + +/* ↓ 生成工具类 */ +bg-cs-primary, text-cs-primary, border-cs-primary +``` + +#### 去除冗余 + +- **间距/尺寸合并**: `--Spacing--md` 和 `--Sizing--md` 值相同 → 统一为 `--ds-size-md` +- **透明度废弃**: `--Opacity--Red--Red-80` → 使用 `bg-cs-destructive/80` +- **错误修正**: `--Font_weight--Regular: 400px` → `--ds-font-weight-regular: 400` + +### 1.3 命名规范 + +| 层级 | 前缀 | 示例 | 用途 | +|------|------|------|------| +| 设计令牌 | `--ds-*` | `--ds-primary` | 定义值 | +| Tailwind 映射 | `--color-cs-*` | `--color-cs-primary` | 生成工具类 | +| 工具类 | `cs-*` | `bg-cs-primary` | 开发者使用 | + +#### Tailwind v4 映射规则 + +| 变量前缀 | 生成的工具类 | +|----------|-------------| +| `--color-cs-*` | `bg-*`, `text-*`, `border-*`, `fill-*` | +| `--spacing-cs-*` | `p-*`, `m-*`, `gap-*` | +| `--size-cs-*` | `w-*`, `h-*`, `size-*` | +| `--radius-cs-*` | `rounded-*` | +| `--font-size-cs-*` | `text-*` | + +### 1.4 为什么使用 @theme inline + +```css +/* ❌ @theme - 静态编译，不支持运行时主题切换 */ +@theme { + --color-primary: var(--ds-primary); +} + +/* ✅ @theme inline - 保留变量引用，支持运行时切换 */ +@theme inline { + --color-cs-primary: var(--ds-primary); +} +``` + +**关键差异**：`@theme inline` 使 CSS 变量在运行时动态解析，实现明暗主题切换。 + +--- + +## 二、项目使用指南 + +### 2.1 在 UI 库中使用 + +#### 文件结构 + +``` +packages/ui/ +├── src/styles/ +│ ├── design-tokens.css # 核心变量定义 +│ └── globals.css # Tailwind 集成 +└── package.json # 导出配置 +``` + +#### globals.css 示例 + +```css +@import 'tailwindcss'; +@import './design-tokens.css'; + +@theme inline { + /* 颜色 */ + --color-cs-primary: var(--ds-primary); + --color-cs-bg: var(--ds-background); + --color-cs-fg: var(--ds-foreground); + + /* 间距 */ + --spacing-cs-xs: var(--ds-size-xs); + --spacing-cs-sm: var(--ds-size-sm); + --spacing-cs-md: var(--ds-size-md); + + /* 尺寸 */ + --size-cs-xs: var(--ds-size-xs); + --size-cs-sm: var(--ds-size-sm); + + /* 圆角 */ + --radius-cs-sm: var(--ds-radius-sm); + --radius-cs-md: var(--ds-radius-md); +} + +@custom-variant dark (&:is(.dark *)); +``` + +#### 组件中使用 + +```tsx +// packages/ui/src/components/Button.tsx +export const Button = ({ children }) => ( + +) +``` + +### 2.2 在主项目中使用 + +#### 导入 UI 库样式 + +```css +/* src/renderer/src/assets/styles/tailwind.css */ +@import 'tailwindcss' source('../../../../renderer'); +@import '@cherrystudio/ui/styles/globals.css'; + +@custom-variant dark (&:is(.dark *)); +``` + +#### 覆盖或扩展变量 + +```css +/* src/renderer/src/assets/styles/tailwind.css */ +@import '@cherrystudio/ui/styles/globals.css'; + +/* 主项目特定覆盖 */ +:root { + --ds-primary: #custom-color; /* 覆盖 UI 库的主题色 */ +} +``` + +#### 在主项目组件中使用 + +```tsx +// src/renderer/src/pages/Home.tsx +export const Home = () => ( +
+ +
+) +``` + +### 2.3 主题切换实现 + +```tsx +// App.tsx +import { useState } from 'react' + +export function App() { + const [theme, setTheme] = useState<'light' | 'dark'>('light') + + return ( +
+ + {/* 所有子组件自动响应主题 */} +
+ ) +} +``` + +### 2.4 透明度修饰符 + +```tsx +
+``` + +--- + +## 三、UI 库与主包平衡策略 + +### 3.1 UI 库职责 + +**目标**：提供可复用、可定制的基础设计系统 + +```json +// packages/ui/package.json +{ + "exports": { + "./styles/design-tokens.css": "./src/styles/design-tokens.css", + "./styles/globals.css": "./src/styles/globals.css" + } +} +``` + +**原则**： + +- ✅ 定义通用的设计令牌（`--ds-*`） +- ✅ 提供默认的 Tailwind 映射（`--color-cs-*`） +- ✅ 保持变量语义化，不包含业务逻辑 +- ❌ 不包含主项目特定的颜色或尺寸 + +### 3.2 主包职责 + +**目标**：导入 UI 库，根据业务需求扩展或覆盖 + +```css +/* src/renderer/src/assets/styles/tailwind.css */ +@import '@cherrystudio/ui/styles/globals.css'; + +/* 主项目扩展 */ +@theme inline { + --color-cs-brand-accent: #ff6b6b; /* 新增颜色 */ +} + +/* 主项目覆盖 */ +:root { + --ds-primary: #custom-primary; /* 覆盖 UI 库的主题色 */ +} +``` + +**原则**： + +- ✅ 导入 UI 库的 `globals.css` +- ✅ 通过覆盖 `--ds-*` 变量定制主题 +- ✅ 添加项目特定的 `--color-cs-*` 映射 +- ✅ 保留向后兼容的旧变量（如 `color.css`） + +### 3.3 向后兼容方案 + +#### 保留旧变量 + +```css +/* src/renderer/src/assets/styles/color.css */ +:root { + --color-primary: #00b96b; /* 旧变量 */ + --color-background: #181818; /* 旧变量 */ +} + +/* 映射到新系统 */ +:root { + --ds-primary: var(--color-primary); + --ds-background: var(--color-background); +} +``` + +#### 渐进式迁移 + +```tsx +// 阶段 1：旧代码继续工作 +
旧代码
+ +// 阶段 2：新代码使用工具类 +
新代码
+ +// 阶段 3：逐步替换旧代码 +``` + +### 3.4 冲突处理 + +| 场景 | 策略 | +|------|------| +| UI 库与 Tailwind 默认类冲突 | 使用 `cs-` 前缀隔离 | +| 主包需要覆盖 UI 库颜色 | 覆盖 `--ds-*` 变量 | +| 主包需要新增颜色 | 添加新的 `--color-cs-*` 映射 | +| 旧变量与新系统共存 | 通过 `var()` 映射到 `--ds-*` | + +### 3.5 独立发布 UI 库 + +```json +// packages/ui/package.json +{ + "name": "@cherrystudio/ui", + "exports": { + "./styles/design-tokens.css": "./src/styles/design-tokens.css", + "./styles/globals.css": "./src/styles/globals.css" + }, + "peerDependencies": { + "tailwindcss": "^4.1.13" + } +} +``` + +**外部项目使用**： +```css +/* 其他项目的 tailwind.css */ +@import 'tailwindcss'; +@import '@cherrystudio/ui/styles/globals.css'; + +/* 覆盖主题色 */ +:root { + --ds-primary: #your-brand-color; +} +``` + +--- + +## 四、完整映射示例 + +### todocss.css → design-tokens.css + +| todocss.css | design-tokens.css | 说明 | +|-------------|-------------------|------| +| `--Brand--Base_Colors--Primary` | `--ds-primary` | 简化命名 | +| `--Spacing--md` + `--Sizing--md` | `--ds-size-md` | 合并重复 | +| `--Opacity--Red--Red-80` | *(删除)* | 使用 `/80` 修饰符 | +| `--Font_weight--Regular: 400px` | `--ds-font-weight-regular: 400` | 修正错误 | +| `--Brand--UI_Element_Colors--Primary_Button--Background` | `--ds-btn-primary` | 简化语义 | + +### design-tokens.css → globals.css → 工具类 + +| design-tokens.css | globals.css | 工具类 | +|-------------------|-------------|--------| +| `--ds-primary` | `--color-cs-primary` | `bg-cs-primary` | +| `--ds-size-md` | `--spacing-cs-md` | `p-cs-md` | +| `--ds-size-md` | `--size-cs-md` | `w-cs-md` | +| `--ds-radius-lg` | `--radius-cs-lg` | `rounded-cs-lg` | + +--- + +## 五、关键决策记录 + +1. **使用 `@theme inline`** - 支持运行时主题切换 +2. **`cs-` 前缀** - 命名空间隔离，避免冲突 +3. **合并 Spacing/Sizing** - 消除冗余 +4. **废弃 Opacity 变量** - 使用 Tailwind 的 `/modifier` 语法 +5. **双层变量系统** - `--ds-*` (定义) → `--color-cs-*` (映射) +6. **共存策略** - Tailwind 默认类 + `cs-` 品牌类 diff --git a/packages/ui/todocss.css b/packages/ui/todocss.css new file mode 100644 index 0000000000..860e442fe0 --- /dev/null +++ b/packages/ui/todocss.css @@ -0,0 +1,851 @@ +: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; + +}