Color 色彩
uvx-ui 色板由品牌色（功能色）、文本语义色、表面背景色与边框/禁用色组成，全部以 CSS 变量（--uvx-*）形式提供，内置亮色、暗色两套取值。组件与自定义样式均通过变量取色，可自动跟随明暗主题切换。
功能色
品牌功能色用于表达操作与状态语义，组件普遍通过 type 属性消费这组颜色。
| 变量 | 亮色值 | 暗色值 | 用途说明 |
|---|---|---|---|
--uvx-primary | #3c9cff | #398ade | 品牌主色，用于主要操作按钮、选中态、强调内容 |
--uvx-success | #5ac725 | #53c21d | 成功色，用于操作成功、完成状态 |
--uvx-warning | #f9ae3d | #f1a532 | 警告色，用于警示提醒 |
--uvx-error | #f56c6c | #e45656 | 错误色，用于失败提示、危险操作 |
--uvx-info | #909399 | #767a82 | 信息色，用于中性提示 |
theme.scss 中还为每个功能色定义了一组禁用态与浅色背景的 SCSS 变量，供自定义扩展使用（当前内置组件未直接消费）：
| SCSS 变量 | 色值 | 用途说明 |
|---|---|---|
$uvx-primary-disabled | #9acafc | 主色禁用态 |
$uvx-primary-light | #ecf5ff | 主色浅色背景 |
$uvx-success-disabled | #a9e08f | 成功色禁用态 |
$uvx-success-light | #f5fff0 | 成功色浅色背景 |
$uvx-warning-disabled | #f9d39b | 警告色禁用态 |
$uvx-warning-light | #fdf6ec | 警告色浅色背景 |
$uvx-error-disabled | #f7b2b2 | 错误色禁用态 |
$uvx-error-light | #fef0f0 | 错误色浅色背景 |
$uvx-info-disabled | #c4c6c9 | 信息色禁用态 |
$uvx-info-light | #f4f4f5 | 信息色浅色背景 |
文字颜色
文本语义色按信息层级划分，从主要文字到占位文字逐级变浅。
| 变量 | 亮色值 | 暗色值 | 用途说明 |
|---|---|---|---|
--uvx-text-main | #303133 | #f5f5f5 | 主要文字，用于标题、重点内容 |
--uvx-text-content | #606266 | #d8d8d8 | 常规文字，用于正文内容 |
--uvx-text-tips | #909399 | #a8a8a8 | 次要文字，用于辅助说明、次要信息 |
--uvx-text-placeholder | #c0c4cc | #6e6e6e | 占位文字，用于输入框占位符等占位场景 |
背景颜色
表面色构成页面与容器的层级背景。
| 变量 | 亮色值 | 暗色值 | 用途说明 |
|---|---|---|---|
--uvx-page | #ffffff | #000000 | 页面背景 |
--uvx-container | #f7f8fa | #1f1f1f | 容器背景，用于卡片、单元格等内容容器 |
--uvx-hover | #f2f3f5 | #2a2a2a | 悬停背景，用于按压、悬停高亮态 |
边框与禁用色
| 变量 | 亮色值 | 暗色值 | 用途说明 |
|---|---|---|---|
--uvx-border | #ebedf0 | #3a3a3a | 边框色，用于分割线、组件描边 |
--uvx-disabled | #dedede | #383838 | 禁用色，用于禁用态背景 |
--uvx-switch-border | rgba(0, 0, 0, 0.12) | rgba(255, 255, 255, 0.12) | 辅助变量，开关、标签栏等组件的半透明边框色 |
--uvx-shadow | rgba(0, 0, 0, 0.25) | rgba(255, 255, 255, 0.25) | 辅助变量，组件阴影色（如开关滑块投影） |
使用须知
- 组件通过
type属性消费品牌色与文本语义色。以uvx-text为例，type支持primary、success、warning、error、info五个品牌色和main、content、tips三个文本语义色，其余组件见各自文档。 - 文本语义色按信息层级选用：
main用于标题与重点内容，content用于正文，tips用于辅助说明，--uvx-text-placeholder用于占位场景。 - 全部颜色变量的亮色取值定义在
.uvx-light类下、暗色取值定义在.uvx-dark类下，由uvx-page根据当前主题自动挂载。页面使用uvx-page包裹即可自动联动暗黑模式，无需手动判断；APP 端跟随应用/系统主题，WEB 与小程序端跟随宿主主题。示例中的uvx-theme悬浮按钮即主题切换入口。 - 自定义样式直接引用变量即可，例如
background-color: var(--uvx-primary)。变量由uvx-page根节点挂载，请确保使用变量的节点位于uvx-page内部。