颜色
Color 组件以色板形式展示颜色，适用于记录设计系统、品牌指南或任何颜色规范。
Color 以可点击复制的色块显示十六进制、RGB 和 RGBA 值。它提供两种布局变体：紧凑网格和分组表格，并内置浅色和深色模式支持。
在以下情况下使用 Color：
- 记录包含品牌颜色的设计系统
- 展示浅色和深色模式的主题颜色
- 显示颜色刻度（primary-100 到 primary-900）
- 分享包含十六进制/RGB 值的品牌指南
用法
<Color>
<ColorItem name="Primary" value="#635BFF" />
</Color>紧凑变体
默认布局以响应式网格显示颜色：
Primary
#3b82f6Success
#22c55eWarning
#f59e0bError
#ef4444<Color>
<ColorItem name="Primary" value="#3b82f6" />
<ColorItem name="Success" value="#22c55e" />
<ColorItem name="Warning" value="#f59e0b" />
<ColorItem name="Error" value="#ef4444" />
</Color>表格变体
将颜色分组到带标签的行中，以便整理色板：
Brand Colors
Primary
#3b82f6Secondary
#6366f1Feedback Colors
Success
#22c55eError
#ef4444<Color variant="table">
<ColorRow title="Brand Colors">
<ColorItem name="Primary" value="#3b82f6" />
<ColorItem name="Secondary" value="#6366f1" />
</ColorRow>
<ColorRow title="Feedback Colors">
<ColorItem name="Success" value="#22c55e" />
<ColorItem name="Error" value="#ef4444" />
</ColorRow>
</Color>颜色命名约定
| 模式 | 示例 | 用途 |
|---|---|---|
| 语义化 | success, error, warning | 反馈颜色 |
| 数值刻度 | primary-500, gray-100 | 色板 |
| 描述性 | brand-blue, accent-gold | 品牌颜色 |
主题感知颜色
通过传入包含 light 和 dark 属性的对象，为浅色和深色模式定义不同的颜色：
Theme
Background
#ffffffTheme
Foreground
#171717Theme
Border
#e5e5e5<Color>
<ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
<ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
<ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>颜色格式
该组件支持标准 CSS 颜色格式：
Hex
#3b82f6RGB
rgb(59, 130, 246)RGBA
rgba(59, 130, 246, 0.8)<Color>
<ColorItem name="Hex" value="#3b82f6" />
<ColorItem name="RGB" value="rgb(59, 130, 246)" />
<ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>属性
Color
布局样式：compact（网格）或 table（分组行）。
ColorItem 或 ColorRow 元素。
ColorRow
显示在行上方的标签。
ColorItem 元素。
ColorItem
颜色的显示名称。
CSS 字符串形式的颜色值；对于主题感知颜色，则使用 { light: string, dark: string }。