Appearance
Color 颜色定义
CSS样式
全部 color 样式代码：
查看代码
:root {
/* 主题色 */
--bs-brand: #439FFF;
/* 辅助色 */
--bs-cyan: #00EEFF;
--bs-green: #00FFB7;
--bs-purple:#AA00FF;
/* 文字颜色 */
--bs-text-primary: #FFFFFF;
--bs-text-secondary:#A3C0E5;
/* 告警颜色 */
--bs-success: #00FF4D;
--bs-info: #247BFF;
--bs-warning: #FFC300;
--bs-danger: #FF1F47;
/* 背景色 */
--bs-bg-center:#072652;
--bs-bg-edge: #00102A;
/* 品牌梯度色 */
--bs-brand-1:#72B7FF;
--bs-brand-2:#439FFF;
--bs-brand-3:#1377FF;
--bs-brand-4:#133EF1;
--bs-brand-5:#000BDA;
/* 白色梯度色（文字） */
--bs-w-1:#FFFFFF;
--bs-w-2:#D8E4F4;
--bs-w-3:#A3C0E5;
--bs-w-4:#759DCF;
--bs-w-5:#426FA9;
}
.bs-top-line{height:2px;background:linear-gradient(180deg, rgba(1,19,47,0) 0%, #4D9BFF 55%, rgba(255,255,255,0) 100%);}
/* 大屏容器背景（中心/边缘） */
.bs-color-canvas{
background: radial-gradient(80% 80% at 50% 45%, var(--bs-bg-center) 0%, var(--bs-bg-edge) 70%);
}
/* 色环（纯SVG，不依赖字体/伪元素） */
.bs-ring{width:76px;height:76px;display:inline-flex;align-items:center;justify-content:center;}
.bs-ring svg{overflow:visible;filter: drop-shadow(0 0 10px rgba(67,159,255,.35));}
拆解明细
本页仅定义「大屏主题」的颜色 Token 与使用边界。组件开发时只允许引用 Token（CSS 变量），禁止在业务样式中直接写死色值（便于统一换肤与批量调整）。
1. 主题色与辅助色
- 主题色（Brand）：用于主视觉强调、关键数据高亮、核心图形（默认：
var(--bs-brand)）。 - 辅助色（Assist）：用于二级强调、装饰性图形、次级数据区分（默认：
var(--bs-assist-1)/var(--bs-assist-2)/var(--bs-assist-3)）。
2. 文字颜色
- 主文字：用于标题/关键指标（
var(--bs-text-primary)）。 - 次文字：用于说明、弱化信息（
var(--bs-text-secondary)）。 - 禁用/占位：用于不可用状态（
var(--bs-text-disabled)）。
3. 告警语义色
用于提示条、徽标、图表异常点等。语义色仅表达「状态」，不要用于普通装饰。
- 成功：
var(--bs-success) - 信息：
var(--bs-info) - 警告：
var(--bs-warning) - 危险：
var(--bs-danger)
4. 渐变色规则
- 渐变只用于“条形/进度/分区底”，不要在大面积背景铺满渐变（避免视觉噪音）。
- 渐变方向：进度条/条形图统一用水平渐变；分割线/强调线可使用垂直渐变（与 Layout 顶部分割线一致）。
- 渐变命名：
--bs-gradient-*，例如：--bs-gradient-brand、--bs-gradient-warning。
5. 背景色
- 大屏背景采用径向渐变：中心更亮、边缘更暗（
var(--bs-bg-center)/var(--bs-bg-edge)）。 - 容器面板底色使用半透明蓝：
rgba(149, 195, 255, 0.1)（对应--bs-panel-bg）。 - 发光内阴影：
inset 0 0 16px #63A7FF（对应--bs-panel-glow）。
6. 典型尺寸与排版
- 色块：140×66（用于色阶/色卡展示）。
- 色环：直径60（用于主/辅/语义色示意）。
- 色值文字：使用等宽/半等宽字体更易读（示例已统一为
font-variant-numeric: tabular-nums）。