颜色
Color 组件的文档，以紧凑网格或分组表格布局显示十六进制、RGB 和 RGBA 色块，并可按主题设置不同的值
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>颜色格式
该组件接受十六进制、RGB 和 RGBA 值：
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 }。