Functional Colors

    功能色 Token 系统，用于表达不同状态的语义化颜色，包括错误、警告和成功三种状态，每个状态包含 5 个色阶。

    基础用法

    Tip

    点击色块可复制 token 名称，每个状态包含 5 个色阶（从浅到深）

    Error
    Token
    1
    2
    3
    4
    5
    Warning
    Token
    1
    2
    3
    4
    5
    Success
    Token
    1
    2
    3
    4
    5

    色阶系统

    功能色采用 5 级色阶系统，从浅色背景到深色文本，确保在不同场景下都有良好的视觉对比度：

    • Level 1：最浅色，用于背景色和强调区域
    • Level 2：浅色，用于边框、分隔线等
    • Level 3：中等色，用于主要内容
    • Level 4：深色，用于文本和图标
    • Level 5：最深色，用于标题和重要信息
    简化形式

    Level 3（默认色级）可使用简化形式的 token：

    • error-3 可简写为 error
    • warning-3 可简写为 warning
    • success-3 可简写为 success
    例如：bg-error-3 等同于 bg-error

    颜色规范

    Error（错误色）

    用于表达错误、失败、危险等负面状态的红色系。

    TokenValue使用场景
    error-1#fff3f0错误提示背景、浅色区域
    error-2#ffb0a1错误图标、浅色边框
    error-3 / error#ff3325错误按钮、主要错误信息
    error-4#d91c16错误文本、深色内容
    error-5#b30909错误标题、重要错误提示

    Warning（警告色）

    用于表达警告、注意等中性状态的橙色系。

    TokenValue使用场景
    warning-1#fff8e6警告提示背景、浅色区域
    warning-2#ffd37a警告图标、浅色边框
    warning-3 / warning#ff9100警告按钮、主要警告信息
    warning-4#d97400警告文本、深色内容
    warning-5#b35900警告标题、重要警告提示

    Success（成功色）

    用于表达成功、完成等正面状态的绿色系。

    TokenValue使用场景
    success-1#dff7eb成功提示背景、浅色区域
    success-2#6adeac成功图标、浅色边框
    success-3 / success#00b87a成功按钮、主要成功信息
    success-4#009166成功文本、深色内容
    success-5#006b4f成功标题、重要成功提示

    使用建议

    选择合适的色阶

    // 背景色使用 Level 1
<div className="bg-error-1 text-error-5">
  错误提示框
</div>

// 边框使用 Level 2
<div className="border border-warning-2">
  警告信息
</div>

// 按钮使用 Level 3（可使用简化形式）
<button className="bg-success-3 text-white">确认</button>
<button className="bg-success text-white">确认</button> // 等同于上面的写法

// 文本使用 Level 4 或 Level 5
<span className="text-error-4">错误文本</span>
<span className="text-error-5 font-semibold">重要错误</span>

    状态图标

    // 成功图标
<SuccessIcon className="text-success-2" />
<SuccessIcon className="text-success-3" />

// 警告图标
<WarningIcon className="text-warning-2" />
<WarningIcon className="text-warning-3" />

// 错误图标
<ErrorIcon className="text-error-2" />
<ErrorIcon className="text-error-3" />