Functional Colors

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

    基础用法

    Tip

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

    Error
    Token
    error-1
    #fff3f0
    error-2
    #ffb0a1
    error-3
    #ff3325
    error-4
    #d91c16
    error-5
    #b30909
    Warning
    Token
    warning-1
    #fff8e6
    warning-2
    #ffd37a
    warning-3
    #ff9100
    warning-4
    #d97400
    warning-5
    #b35900
    Success
    Token
    success-1
    #dff7eb
    success-2
    #6adeac
    success-3
    #00b87a
    success-4
    #009166
    success-5
    #006b4f

    色阶系统

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

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

    颜色规范

    Error（错误色）

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

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

    Warning（警告色）

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

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

    Success（成功色）

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

    TokenValue使用场景
    success-1#dff7eb成功提示背景、浅色区域
    success-2#6adeac成功图标、浅色边框
    success-3#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>

// 文本使用 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" />