主题色板
OpenSumi 的色板基于Ant Design 色板演变，分为中性色板、主色色板、功能色板
- 中性色板：包含从白到黑的 10 个颜色和 n 个透明度颜色，用于界面中的面板、分割线、文本...同时，中性色板具备偏色方案的生成
- 主色色板：包含了由浅至深的 10 个颜色，用于高亮强调界面中的元素。OpenSumi 默认的主色为蓝色系，可根据不同的主题配色调整主色色相
- 功能色板：OpenSumi 的功能色延用了Ant Design 的功能色，代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等，功能色不会随着主色的变化而变化
- 不含有透明度的颜色以 6 位数十六进制表示，例如 #FFFFFF
- 含有透明度的颜色加上 alpha 属性为 8 位数十六进制表示，例如 #FFFFFF1A，其中 1A 表示 10% 透明度
透明度并不是推荐用色方案，使用的场景需要符合：该元素频繁出现在不同色的底色上面，如 hover 态、tag 标签
常用透明度参照表：
| 透明度 | 5% | 10% | 15% | 20% | 25% | 30% | 35% | 40% | 45% | 50% | 55% | 60% | 65% | 70% | 75% | 80% | 85% | 90% | 95% |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 十六进制 | 0D | 1A | 26 | 33 | 40 | 4D | 59 | 66 | 73 | 80 | 8C | 99 | A6 | B3 | BF | CC | D9 | E6 | F2 |
其他透明度可通过色彩工具转换
OpenSumi 官方提供深色和浅色两套主题，不同的主题会有不同的中性色板、主色色板和功能色色板
中性色板
OpenSumi 的深色主题的中性色板是带有偏色的，色相跟主色的色相保持一致，浅色主题的中性色板不带有偏色
中性色板还包括了一组带有透明度的白色色板，用于反白场景
主色色板
OpenSumi 的主色色板在深浅主题存在差异，源于环境色的影响
功能色色板
功能色包含了「状态色」和「Git 色」，截取了完整色板中会应用到的色号，避免干扰信息影响选择，排列顺序同主色色板，若要增加按照此规则产出
在主题切换中色板与色板之间是有一定的对应关系的，并非一一对应，但是具有一定的基础规则
| 场景类型 | 场景描述 | 深色色板编号 | 浅色色板编号 |
|---|---|---|---|
| 面板 | 中间代码编辑区 | dark-idegrey-1 | |
| #202224 | light-idegrey-1 | ||
| #FFFFFF | |||
| 面板 | 左右侧功能面板及编辑区标题条 | dark-idegrey-3 | |
| #2C3033 | light-idegrey-3 | ||
| #F2F2F2 | |||
| 面板 | 顶部和左右侧菜单面板 | dark-idegrey-4 | |
| #35393D | light-idegrey-4 | ||
| #ECECEC | |||
| 面板 | 左侧功能面板的分组条 | dark-idegrey-5 | |
| #43484D | light-idegrey-5 | ||
| #E0E0E0 | |||
| 面板 | 浮层面板 | dark-idegrey-4 | |
| #35393D | light-idegrey-1 | ||
| #FFFFFF | |||
| 文本 | 加重高亮色 | dark-idegrey-10 | |
| #FFFFFF | light-idegrey-10 | ||
| #262626 | |||
| 文本 | 默认色 | dark-idegrey-9 | |
| #D7DBDE | light-idegrey-9 | ||
| #4D4D4D | |||
| 文本 | 说明描述色 | dark-idegrey-7 | |
| #868C91 | light-idegrey-7 | ||
| #999999 | |||
| 文本 | 失效色 | dark-idegrey-6 | |
| #5F656B | light-idegrey-6 | ||
| #CCCCCC | |||
| 功能 | 菜单栏激活项背景色 | dark-idegrey-3 | |
| #2C3033 | light-idegrey-5 | ||
| #E0E0E0 | |||
| 分割线 | 面板与面板之间的分割线 | ||
| 浅色系表单描边 | dark-idegrey-2 | ||
| #252729 | light-idegrey-5 | ||
| #E0E0E0 | |||
| 分割线 | 通用组件元素的分割线 | ||
| （面板底色不固定的组件） | opacity(dark-idegrey-6,25) | ||
| #5F656B40 | opacity(light-idegrey-6,25) | ||
| #CCCCCC40 | |||
| 底色 | 列表 hover 色 | opacity(dark-idegrey-6,25) | |
| #5F656B40 | opacity(light-idegrey-6,25) | ||
| #CCCCCC40 | |||
| 底色 | input、select 底色 | opacity(dark-black,25) | |
| #00000040 | light-idegrey-1 | ||
| #FFFFFF |
| 场景 | 深色色板编号 | 浅色色板编号 |
|---|---|---|
| 选中但失焦 | opacity(dark-ideblue-6,25) | |
| #167CDB40 | opacity(light-ideblue-4,25) | |
| #6EB6FA40 | ||
| 菜单拖动时浮层底色 | dark-ideblue-4 | |
| #1F507D | light-ideblue-2 | |
| #CCE7FF | ||
| 列表选中 | dark-ideblue-5 | |
| #1A66AC | light-ideblue-7 | |
| #0D75D6 | ||
| tab 选中 | dark-ideblue-6 | |
| #167CDB | light-ideblue-6 | |
| #1785EB |
| 场景类型 | 场景描述 | 深色色板编号 | 浅色色板编号 |
|---|---|---|---|
| 错误/失败/停止 | 文字、icon | dark-red-7 | |
| #DB4345 | light-red-6 | ||
| #F5222D | |||
| 标签底色 | opacity(dark-red-6,25) | ||
| #D21F2840 | opacity(light-red-4,25) | ||
| #FF787540 | |||
| 警告/提醒/强调 | 文字、icon | dark-gold-7 | |
| #DBA936 | light-gold-6 | ||
| #FAAD14 | |||
| 标签底色 | opacity(dark-gold-6,25) | ||
| #D7951340 | opacity(light-gold-4,25) | ||
| #FFD66640 | |||
| 成功/完成/开始 | 文字、icon | dark-green-7 | |
| #64B436 | light-green-6 | ||
| #73D13D | |||
| 标签底色 | opacity(dark-green-6,25) | ||
| #D7951340 | opacity(light-green-4,25) | ||
| #95DE6440 | |||
| 提示/说明/强调 | 文字、icon | dark-ideblue-7 | |
| #3895EB | light-ideblue-6 | ||
| #1785EB | |||
| 标签底色 | opacity(dark-ideblue-6,25) | ||
| #167CDB40 | opacity(light-ideblue-4,25) | ||
| #6EB6FA40 | |||
| 弱说明/弱提示 | 文字、icon | dark-idegrey-7 | |
| #868C91 | light-idegrey-7 | ||
| #999999 | |||
| 标签底色 | opacity(dark-idegrey-6,25) | ||
| #5F656B40 | opacity(light-idegrey-6,25) | ||
| #CCCCCC40 |
功能> 色> 场景> 示例> ：>
