diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index b233ea57f..ac0a34dda 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -182,7 +182,6 @@ const GlobalStyle: React.FC = () => { .markdown strong, .markdown b { font-weight: 500; - color: ${token.colorErrorText}; } .markdown .dumi-default-source-code { diff --git a/docs/blog/chart-classification-palette-design-guide.md b/docs/blog/chart-classification-palette-design-guide.md index ba52a0d35..59ae6c089 100644 --- a/docs/blog/chart-classification-palette-design-guide.md +++ b/docs/blog/chart-classification-palette-design-guide.md @@ -101,7 +101,7 @@ OBCharts 色板设计的过程可以分为以下几个步骤：① 确定主题 为了传递出科技、专业和可靠的感受，OceanBase 的 logo 确定了 3 个品牌色「橙」「蓝」「绿」，「蓝色」代表科技，「绿色」代表生活或生机，「橙色」代表希望和美好的未来。 -![1-最终确定版.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/44APQahoJX4AAAAAAAAAAAAADv3-AQBr/original) +![1-最终确定版.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/o9ueQYIDjnkAAAAAAAAAAAAADv3-AQBr/original) OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工具产品的复杂场景。OBCharts 是 OBUI 生长出来的可视化图表，为了让图表和界面更好的融合，图表色板会采用 OBUI 的 3 个主题色。 diff --git a/docs/spec/chart-color.md b/docs/spec/chart-color.md index 6b8c12e1e..b1f23ab6a 100644 --- a/docs/spec/chart-color.md +++ b/docs/spec/chart-color.md @@ -67,7 +67,7 @@ OB Charts 的颜色定义旨在传递 OceanBase科技且富有生机的品牌调 基础色板共 10 色，当图例数量 <= 10 个时，使用基础色板，并按照色板顺序展示图表，色板参数如下： -| 序号 | 颜色 | 名称 | 色值 | 色值 | +| 序号 | 颜色 | 名称 | HEX 色值 | HSL 色值 | | --- | --- | --- | --- | --- | | 1 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/kYiURIajuBYAAAAAAAAAAAAADv3-AQBr/original) | 蔚蓝色 | #3D88F2 | H:215 S:75 B:95 | | 2 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/iDTDRpmJo8QAAAAAAAAAAAAADv3-AQBr/original) | 翡翠绿 | #41D9A6 | H:160 S:70 B:85 | @@ -84,7 +84,7 @@ OB Charts 的颜色定义旨在传递 OceanBase科技且富有生机的品牌调 图表中如果有超过 10 个图例的场景，则需要用到延伸色板，延伸色板共 20 色，是在基础色基础上调整 60% 不透明度的实色，穿插在基础色中使用，从而实现明暗交替；当图例数量 > 10 个时，需使用延伸色板，并按照色板顺序展示图表，色板参数如下： -| 序号 | 颜色 | 名称 | 色值 | 色值 | +| 序号 | 颜色 | 名称 | HEX 色值 | HSL 色值 | | --- | --- | --- | --- | --- | | 1 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/egkJRL9xU3wAAAAAAAAAAAAADv3-AQBr/original) | 蔚蓝色 | #3D88F2 | H:215 S:75 B:95 | | 2 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/FlaZT5y4R_YAAAAAAAAAAAAADv3-AQBr/original) | 浅蔚蓝 | #8BB8F7 | H:215 S:44 B:97 | diff --git a/docs/spec/navigation.md b/docs/spec/navigation.md index d96bcf230..dce9fa817 100644 --- a/docs/spec/navigation.md +++ b/docs/spec/navigation.md @@ -8,17 +8,17 @@ title: Navigation 导航 ## 设计原则 -#### 清晰 +### 清晰 明确告知用户当前所在位置与提供的内容，让用户不会在复杂的导航结构中迷失。 -#### 高效 +### 高效 - 合理组织信息结构，避免过多的导航选项，提升用户查找效率。 - 导航标签贴合用户认知，让用户可快速理解。 - 提供便捷高效的导航操作路径，让用户3步之内可达。 -#### 可扩展 +### 可扩展 考虑未来发展并提供扩展空间，为用户提供稳定的使用体验。 @@ -34,7 +34,7 @@ title: Navigation 导航 4. 分隔线 5. 文本标签 -#### 图标 +### 图标 一级侧边导航图标为必要元素，二级及以上页面的侧边导航图标为可选元素，同一级导航图标风格需保持一致。 @@ -49,7 +49,7 @@ title: Navigation 导航 -#### 分隔线 +### 分隔线 用于分隔产品功能的不同逻辑分组，当功能存在多层级嵌套关系时，分隔线则代表功能的一级分组。同一组功能菜单项建议不超过7个，超出时建议对菜单项进一步分组，降低记忆成本，提升检索效率。 @@ -64,7 +64,7 @@ title: Navigation 导航 -#### 文本标签 +### 文本标签 菜单文本标签应尽量简洁，避免使用冗长或复杂的词语，菜单文案应由1~2个词组成，菜单项间彼此互斥，差异越明显用户决策越容易。 @@ -79,7 +79,7 @@ title: Navigation 导航 -#### 信息层级 +### 信息层级 信息层级组织深度上建议不超过3级，尽可能让用户3步抵达目标对象。对于层级深且较为重要或高频的操作，建议提供快捷入口，提升操作效率。 @@ -96,13 +96,13 @@ title: Navigation 导航 ## 导航类型 -#### 顶部导航 +### 顶部导航 位于页面顶部，可展示产品全局性标识信息，并提供全局性的实用工具、服务和快捷操作，如通知、帮助、语言切换、用户信息等。 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/S21-Q6Xo4Y4AAAAAAAAAAAAADv3-AQBr/original) -#### 侧边导航 +### 侧边导航 侧边导航较顶部横向导航更灵活，易于向下扩展，且允许的文本标签长度较长，适合承载信息层级多、操作切换频率高的管理操作。根据使用形态可分为图标加文本标签式导航、文本标签式导航、图标式导航三种。 @@ -110,7 +110,7 @@ title: Navigation 导航 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/dk18Q5eO-xcAAAAAAAAAAAAADv3-AQBr/original) -#### 返回导航 +### 返回导航 在标题前增加返回按钮，单击后返回进入前的页面，适用于信息结构较扁平的下钻场景。当信息层普遍是≥3级时，可结合面包屑一同使用，为用户提供更清晰的导航路径，同一产品内面包屑显示规则建议保持一致。 @@ -140,13 +140,13 @@ title: Navigation 导航 提供产品中相关导航的最佳实践。 -#### 全局组合导航 +### 全局组合导航 将顶部导航和侧边导航组合使用，通过顶部导航承载全局性的工具和服务，通过侧边导航承载产品核心功能架构，为产品后续发展提供高扩展性的导航框架。 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/GnlOTJ89t3YAAAAAAAAAAAAADv3-AQBr/original) -#### 子站点下钻导航 +### 子站点下钻导航 一种嵌入式子站点导航模式，进入子站点后，鼠标移入侧边图标导航可自动展开，便于用户快捷切换功能。常见的适用场景： @@ -162,7 +162,7 @@ title: Navigation 导航 -#### 页面下钻导航 +### 页面下钻导航 通过页标题返回导航，告知用户当前位置并提供便捷返回能力，适用于信息层级较浅的场景。 diff --git a/docs/spec/page-container.md b/docs/spec/page-container.md index 48c785df5..80f5038b0 100644 --- a/docs/spec/page-container.md +++ b/docs/spec/page-container.md @@ -23,7 +23,7 @@ title: PageContainer 页容器 3. 页签 4. 操作区 -#### 面包屑 +### 面包屑 存在3级及以上的层级结构，并需要告知用户信息层级关系时可使用面包屑导航。L1 级别和L2级别默认不显示面包屑，建议下钻3级及以上时显示面包屑，同一产品内的面包屑显示规则需保持一致。 @@ -38,7 +38,7 @@ title: PageContainer 页容器 -#### 页标题 +### 页标题 可承载页面标题、页面级的快捷操作及使用引导信息，如页面刷新、标题编辑、状态等。在页面下钻场景中，可在标题前增加 返回 箭头，承载导航功能。除编辑器等对空间诉求强、希望获得沉浸式编辑体验的特殊场景外，其它页面均需存在页标题。 @@ -53,7 +53,7 @@ title: PageContainer 页容器 -#### 页签 +### 页签 存在多个子页面，且子页面存在需通过卡片形态区分不同信息区块时，可使用子页面页签。如各页签均为单卡片信息区块时，从提升信息内容整体性角度考虑，不建议使用页面级页签，建议使用区块级页签。 @@ -68,7 +68,7 @@ title: PageContainer 页容器 -#### 操作区 +### 操作区 可承载数据筛选和页面级的操作，根据所属关系将操作区置于页面级操作区或子页面操作区中，两者不可同时存在。页头区需使用Large尺寸组件。 @@ -93,13 +93,13 @@ title: PageContainer 页容器 2. 间距 3. 卡片 -#### 间距 +### 间距 内容距离页头需保留16px间距，内容卡片与内容区容器右、下、左间距均为24px，内容卡片之间间距为16px。 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/F0F4RaJe9PIAAAAAAAAAAAAADv3-AQBr/original) -#### 卡片投影 +### 卡片投影 内容卡片需使用投影，以增强与内容区容器的空间距离，**默认使用一级投影样式**。 diff --git a/docs/spec/product-graphic.md b/docs/spec/product-graphic.md index 90f67a681..52f6c59bf 100644 --- a/docs/spec/product-graphic.md +++ b/docs/spec/product-graphic.md @@ -10,11 +10,11 @@ title: Product graphic 产品缺省图 ## 设计原则 -#### 品牌理念 +### 品牌理念 通过情感化的品牌色彩，传达不同页面状态下的情绪，给予用户明确的反馈，确保在各种情况下都能保持专业度和用户互动性。蓝，黄，绿的配色则是继承于 OB 的品牌色。蓝色代表科技，寓意专业可靠，同时象征着生命之源-海洋。绿色代表生活，有了它的加入，可以为生活增添更多可能与生机。黄色代表未来，寓意对技术的不懈探索，象征更加美好的未来。![22.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/KtpxQK6e5T4AAAAAAAAAAAAADv3-AQBr/original) -#### 设计方法 +### 设计方法 OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮廓包裹插画，由品牌蓝及延展色组成单色图标，配合中性色，实现不同场景的层级区分。 @@ -70,7 +70,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -#### 圆角 +### 圆角 正常情况下所有圆角统一为 2px 的倍数使用。只有在圆角特别小的情况下且 2px 圆角无法满足小圆角的诉求时，可将圆角设置成 1px 。 @@ -106,15 +106,15 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 3. 地面 4. 底色 -#### 符号展示 +### 符号展示
- +
图标必须位于缺省图最上层
- +
插画主体不能遮挡图标
@@ -123,11 +123,11 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 在OB实际应用中，缺省图共分为三大类型，通过颜色和大小进行使用划分。 -#### 色彩缺省图 +### 色彩缺省图 ![缺省图合集.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/58pJTpPL87AAAAAAAAAAAAAADv3-AQBr/original) -##### 颜色规范 +#### 颜色规范 插画主色为品牌蓝，可根据情况向上下延展一个色阶使用（占比60%-70%）；辅色为白色，根据情况向上延展两个色阶使用（占比30%-20%）；点缀色为橙色、红色（占比10%）。 @@ -147,7 +147,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -##### 无内容提示 +#### 无内容提示 无内容提示的底色轮廓边界为176px\*176px，插画内容可超出轮廓范围，不可超出画板范围。 @@ -177,7 +177,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -##### 结果反馈 +#### 结果反馈 底色轮廓尺寸为144px\*128px，图标外轮廓尺寸为176px\*176px，需在直径为88px-96px圆内绘制，两者重合后整体尺寸为160px\*144px。 @@ -211,7 +211,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -##### 暂无数据 +#### 暂无数据 底色轮廓尺寸为 144px\*128px，图标外轮廓尺寸为 176px\*176px，需在直径为 88px-96px 圆内绘制， @@ -247,7 +247,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -##### 新功能开通 +#### 新功能开通 插画尺寸为176px\*112px，外轮廓无强制要求，使用矩形为外轮廓时，需保证圆角为18px。 @@ -267,11 +267,11 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -#### 单色缺省图 +### 单色缺省图 ![缺省图规范2-63.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Y1UIRJCjFnEAAAAAAAAAAAAADv3-AQBr/original) -##### 颜色规范 +#### 颜色规范 单色图标插画主色为品牌蓝【0181FD】（占比20-30%），点缀色为品牌蓝的延展色以及白色（占比70-80%） @@ -286,7 +286,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -##### 绘制规范 +#### 绘制规范 主体高度为 144px，主体宽度需在 144px - 120px 的范围内绘制；图标轮廓尺寸为 176px\*176px，需在直径为 88-96px 的圆内绘制。为保证缺省图插画，整体大小层级的视觉统一，建议绘制完成后根据实际情况需要 **等比缩放至 70% 左右** 大小使用。 @@ -320,11 +320,11 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -#### 中性色缺省图 +### 中性色缺省图 ![缺省图规范2-64.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/UT-zRJLbDQoAAAAAAAAAAAAADv3-AQBr/original) -##### 颜色规范 +#### 颜色规范 图标主色为中性色「F8FAFE」，可根据情况向上延展两个色阶使用（占比90%），点缀色为品牌蓝以及白色（占比10%）。 @@ -339,7 +339,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -##### 绘制规范 +#### 绘制规范 主体高度为 144px，主体宽度需在 140px-112px 的范围内绘制。为保证缺省图插画，整体大小层级的视觉统一，建议绘制完成后根据实际情况可 **等比缩放至 50% 左右** 大小使用。 @@ -365,23 +365,23 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮 -### 使用案例 +## 使用案例 提供产品中相关缺省图的最佳实践。 -#### 色彩缺省图 +### 色彩缺省图 在整个页面数据或内容为空时作为主视觉引导插图，为用户行为提供视觉指引。 -![截屏2024-08-06 14.30.59.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/FFijSpO_zLsAAAAAAAAAAAAADv3-AQBr/original) +![截屏2024-08-06 14.30.59.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/aK9CT4xUXJIAAAAAAAAAAAAADv3-AQBr/original) -#### 单色缺省图 +### 单色缺省图 在需要对用户进行教育，新手引导时，作为品牌视觉元素，帮助用户聚焦任务场景。 ![2 1 实例列表 创建完成引导@3x.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/0Ft4QIrM97wAAAAAAAAAAAAADv3-AQBr/original) -#### 中性色缺省图 +### 中性色缺省图 在次级下拉菜单数据或内容为空时，作为主要视觉元素，与用户进行交流。 diff --git a/docs/spec/system-color.md b/docs/spec/system-color.md index 7ca3b768a..9a8f6499e 100644 --- a/docs/spec/system-color.md +++ b/docs/spec/system-color.md @@ -30,7 +30,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 渐变色为双色渐变色，应用于主按钮，默认渐变色为 1 号色（Gradient1），Hex 值为#002BFF～#0080FF； -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-29 上午10.58.06.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/4v89Q47F968AAAAAAAAAAAAADv3-AQBr/original)-Gradient1 | #002BFF～#0080FF | H：230 S：100 L：50～H：210 S：100 L：50 | 默认（default） | | ![截屏2023-03-29 上午11.04.00.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/BM3nS6POGiAAAAAAAAAAAAAADv3-AQBr/original)-Gradient2 | #1AA0FF～#1A53FF | H：205 S：100 L：55～H：225 S：100 L：55 | 悬浮（hover） | @@ -41,7 +41,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 信息色为单色，是产品中最核心、使用最高频的颜色。用于强调信息、引导操作，在很大程度上决定了产品整体的基调和风格。应用于文字按钮、页签、单选等场景，OBUI 的默认信息色为 Blue-5，Hex值为 #006AFF。 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-27 下午5.34.23.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/gV39T6JHJFoAAAAAAAAAAAAADv3-AQBr/original)-Blue1 | #EAF1FF | H：220 S：100 L：96 | 填充（fill） | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/V1q9S4Kx_vUAAAAAAAAAAAAADv3-AQBr/original)-Blue2 | #D6E4FF | H：220 S：100 L：92 | 标签描边（tag border） | @@ -74,7 +74,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 成功色 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.05.17.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/kEjtRp3QpAkAAAAAAAAAAAAADv3-AQBr/original)-Green1 | #EEF8F5 | H：160 S：40 L：95 | 填充（fill） | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/5RpyQJkbsnQAAAAAAAAAAAAADv3-AQBr/original)-Green2 | #DBF0E9 | H：160 S：40 L：90 | 标签描边（tag border） | @@ -85,7 +85,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 警告色-低风险 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.13.42.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/LQ1wTZRsNlgAAAAAAAAAAAAADv3-AQBr/original)-Gold 1 | #FFF5E5 | H：36 S：100 L：95 | 填充（fill） | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/PTaERp_POuMAAAAAAAAAAAAADv3-AQBr/original)-Gold 2 | #FFE7C2 | H：36 S：100 L：88 | 标签描边（tag border） | @@ -96,7 +96,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 警告色-中风险 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/pPI0S4_S3REAAAAAAAAAAAAADv3-AQBr/original)-Orange1 | #FFEEE5 | H：20 S：100 L：95 | 填充（fill） | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/9c1rSYbGxZ8AAAAAAAAAAAAADv3-AQBr/original)-Orange2 | #FFDDCC | H：20 S：100 L：90 | 标签描边（tag border） | @@ -107,7 +107,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 错误色-高风险 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.19.56.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/hxHqT77y5X0AAAAAAAAAAAAADv3-AQBr/original)-Red1 | #FFEBEB | H：360 S：100 L：96 | 填充（fill） | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/0rcXR7MoVqMAAAAAAAAAAAAADv3-AQBr/original)-Red2 | #FFD6D6 | H：360 S：100 L：92 | 标签描边（tag border） | @@ -118,7 +118,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 错误色-非常严重 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/_C33RKlNM4EAAAAAAAAAAAAADv3-AQBr/original)-Fuchsia1 | #FAEBEF | H：345 S：58 L：95 | 填充（fill） | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/J_dyQKh98-cAAAAAAAAAAAAADv3-AQBr/original)-Fuchsia2 | #F4D7DE | H：345 S：58 L：90 | 标签描边（tag border） | @@ -135,7 +135,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 文本色 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.39.05.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/vv79S4DauLIAAAAAAAAAAAAADv3-AQBr/original)-Gray8 | #132039 | H：220 S：50 L：15 | 一级文本：页容器一、二级标题、表单标题、正文 | | ![截屏2023-03-28 下午4.35.51.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/KaV6TZqf5eQAAAAAAAAAAAAADv3-AQBr/original)-Gray7 | #5C6B8A | H：220 S：20 L：45 | 二级文本：表头文字、Tab 未选中、基础信息标题文本 | @@ -144,14 +144,14 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 边框色 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.34.00.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/1UmESq56mWQAAAAAAAAAAAAADv3-AQBr/original)-Gray4 | #CDD5E4 | H：220 S：30 L：85 | 一级边框色：按钮描边、组件边框 | | ![截屏2023-03-28 下午4.31.51.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/j8qnRJIYt-0AAAAAAAAAAAAADv3-AQBr/original)-Gray3 | #E2E8F3 | H：220 S：40 L：92 | 二级边框色：分割线 | ### 填充色 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.35.51.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/tlrpTKZdXocAAAAAAAAAAAAADv3-AQBr/original)-Gray7 | #5C6B8A | H：220 S：20 L：45 | 线性图标色 | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/d1CmQ4x_RWsAAAAAAAAAAAAADv3-AQBr/original)-Gray6 | #8592AD | H：220 S：20 L：60 | 开关关闭色 | @@ -161,7 +161,7 @@ OBUI 主题色包含渐变色和信息色两部分内容。 ### 背景色 -| 颜色 | 色值 | 色值 | 应用场景 | +| 颜色 | HEX 色值 | HSL 色值 | 应用场景 | | --- | --- | --- | --- | | ![截屏2023-03-28 下午4.39.05.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/31ySR7XgIjIAAAAAAAAAAAAADv3-AQBr/original)-Gray8 | #132039(60%) | H：220 S：50 L：15 Alpha：60 | 弹窗、抽屉等组件的底部蒙层 | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/kb9FR6ginHQAAAAAAAAAAAAADv3-AQBr/original)-Gray2 | #F3F6FC | H：220 S：60 L：97 | 页面底色 | diff --git a/docs/spec/typography.md b/docs/spec/typography.md index bdb63d763..ccd8a8566 100644 --- a/docs/spec/typography.md +++ b/docs/spec/typography.md @@ -9,7 +9,7 @@ order: 3 OBUI 字体选择的原则主要分为三点。 -#### 细节清晰 +### 细节清晰 选择字体时，注意相似字形的区分，如字母“I”“l”和数字“1”，以免影响可读性。 @@ -24,7 +24,7 @@ OBUI 字体选择的原则主要分为三点。 -#### 多种字重和样式 +### 多种字重和样式 拥有多种字重、样式、宽度的字体能给设计师更多灵活性，实际应用时便于区分信息层级。 @@ -39,7 +39,7 @@ OBUI 字体选择的原则主要分为三点。 -#### 等宽字体 +### 等宽字体 涉及到数据展示，尽量使用等宽字体，可以保证页面的整洁和可读性。 @@ -58,7 +58,7 @@ OBUI 字体选择的原则主要分为三点。 OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体选用开源字体 Inter。Inter 拥有干净的线条和优秀的可读性，是一种可变字体，能够适应不同屏幕尺寸和分辨率。 -#### 中文字体家族 +### 中文字体家族 主字体苹方(苹果系统字体) @@ -68,7 +68,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体 -apple-system, Noto Sans, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; -#### 英文字体家族 +### 英文字体家族 主字体 Inter @@ -96,7 +96,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体 -#### 代码字体家族 +### 代码字体家族 主字体Consolas @@ -106,7 +106,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体 Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace； -#### 数字字体 +### 数字字体 数据表格为主要场景。为了更方便用户对比数据，采用等宽字体 Helvetica Neue 进行展示。 @@ -131,19 +131,19 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体 由于中英文字体差异，字重也有所区别。 -#### 中文 +### 中文 使用 regular 以及 medium 的两种字重，分别对应代码中的 400 和 500。 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/y4ZVT5bljk4AAAAAAAAAAAAADv3-AQBr/original) -#### 英文 +### 英文 使用 regular 以及 semibold 两种字重，分别对应代码中的 400 和 600。 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/mF9SQbdAMdkAAAAAAAAAAAAADv3-AQBr/original) -#### 数字 +### 数字 主应用场景为数据表，不涉及信息层级的区分，只使用一种字重 regular，对应代码中的400。 @@ -153,7 +153,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体 提供产品中字号和字重的最佳实践。 -#### 一级标题 +### 一级标题
@@ -166,7 +166,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体
-#### 二级标题 +### 二级标题
@@ -179,7 +179,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体
-#### 表格标题 +### 表格标题