色彩

Birdpaper UI 的色彩体系由 功能色 与 中性色 组成：功能色传达状态与语义，中性色支撑文本、背景、边框等基础界面。浅色 / 深色模式各有一套变量，支持主题切换。

点击色块复制 · 悬停查看完整色值

功能色

品牌、成功、警告、危险四个语义色系，每系 10 阶，用于状态与反馈。

主题色--bp-primary-6#165DFF

主色 · 6

中性色

文本、背景、边框与分割线的基础色阶，使用频率最高。

色阶使用规范

按用途划分层级，保证语义一致、可预期。

01

浅底

色阶 1 – 2

背景色、标签底色

02

边框

色阶 3 – 4

边框、分割线

03

辅助

色阶 5

hover 态、辅助元素

04

主色

色阶 6

主要图标、文本、按钮

05

交互

色阶 7 – 8

hover / active 态

06

深色

色阶 9 – 10

深色文本、深色背景

变量用法

优先使用语义变量；需要透明度时用 RGB 通道变量。

token.css

/* 基础用法 */
color: var(--bp-primary-6);

/* 带透明度 */
background: rgba(var(--bp-primary-6-rgb), 0.1);

dark.css

/* 浅色模式 */
--bp-primary-6: #165dff;

/* 深色模式（色阶方向反转） */
--bp-primary-dark-6: #3c7eff;

深色模式变量带 -dark- 中缀；组件库会通过 CSS 变量自动适配，业务侧通常无需手动切换。