Color

设计系统使用 Radix UI colors (opens in a new tab) 来 确保可访问性 (opens in a new tab)并 轻松保持一致的代码/设计 (opens in a new tab)。

此外，为了使与 Tailwind CSS (opens in a new tab) 的集成和明/暗模式切换的实现变得容易，设计系统利用 windy-radix-palette (opens in a new tab) Tailwind CSS 插件，该插件将Radix UI颜色添加为支持暗夜模式的 Tailwind 样式。

Scales

以下是整个设计系统中使用的 Radix UI 颜色范围。您可以在 Radix UI 官网 (opens in a new tab) 上找到完整的颜色样式表。

Gray - none

默认色阶，标记为 none 。

Blue - primary

标有 primary 的原色阶。

Red - fail

失败状态的色阶，标记为 fail 。

Green - success

成功状态的色阶，标记为 success 。

Yellow - warning

警告状态的色阶，标记为 warning 。

Orange - orange

橙色色标，标记为 orange 。