Skip to content

Commit

Permalink
improve(docs): Style for spec and blog
Browse files Browse the repository at this point in the history
  • Loading branch information
@dengfuping
dengfuping committed Sep 2, 2024
1 parent 474fbfa commit 4f7765d
Show file tree
Hide file tree
Showing 16 changed files with 247 additions and 303 deletions.
13 changes: 8 additions & 5 deletions .dumi/rehypePlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,15 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
if (!node.properties) return;
node.properties.className ??= [];
(node.properties.className as string[]).push('component-api-table');
} else if (node.type === 'element' && (node.tagName === 'Link' || node.tagName === 'a')) {
const href = (node.properties?.href || node.properties?.to) as string;
// 外部链接新开标签页跳转
if (href?.startsWith('http')) {
node.properties!.target = '_blank';
}
// node.properties!.sourceType = tagName;
// node.tagName = 'LocaleLink';
}
// else if (node.type === 'element' && (node.tagName === 'Link' || node.tagName === 'a')) {
// const { tagName } = node;
// node.properties!.sourceType = tagName;
// node.tagName = 'LocaleLink';
// }
// else if (node.type === 'element' && node.tagName === 'video') {
// node.tagName = 'VideoPlayer';
// }
Expand Down
2 changes: 1 addition & 1 deletion .dumi/theme/builtins/Caution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ const useStyle = () => {
export default function Caution({}: CautionProps) {
const styles = useStyle();

return <span css={styles.do}>Caution</span>;
return <div css={styles.do}>Caution</div>;
}
2 changes: 1 addition & 1 deletion .dumi/theme/builtins/Do.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ const useStyle = () => {
export default function Do({}: DoProps) {
const styles = useStyle();

return <span css={styles.do}>Do</span>;
return <div css={styles.do}>Do</div>;
}
2 changes: 1 addition & 1 deletion .dumi/theme/builtins/Donot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ const useStyle = () => {
export default function Do({}: DonotProps) {
const styles = useStyle();

return <span css={styles.do}>Don't</span>;
return <div css={styles.do}>Don't</div>;
}
21 changes: 9 additions & 12 deletions .dumi/theme/common/styles/Markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,13 @@ const GlobalStyle: React.FC = () => {
line-height: 1.5;
}
// 非段落图片最大宽度: 100% - 32px
.markdown img {
max-width: calc(100% - 32px);
max-width: 100%;
max-height: 100%;
}
// 段落图片最大宽度: 100%
.markdown p > img {
max-width: 100%;
.markdown > div[style^='display: flex'] {
gap: 32px;
}
// 暂时去掉段落图片的阴影
Expand All @@ -47,12 +45,10 @@ const GlobalStyle: React.FC = () => {
.markdown .image-description {
color: ${token.colorTextDescription};
margin-right: 16px;
}
.markdown .image-description-center {
color: ${token.colorTextDescription};
margin-right: 16px;
text-align: center;
}
Expand Down Expand Up @@ -186,6 +182,7 @@ const GlobalStyle: React.FC = () => {
.markdown strong,
.markdown b {
font-weight: 500;
color: ${token.colorErrorText};
}
.markdown .dumi-default-source-code {
Expand Down Expand Up @@ -350,15 +347,15 @@ const GlobalStyle: React.FC = () => {
font-weight: 500;
white-space: nowrap;
background: rgba(0, 0, 0, 0.02);
border-width: 1px 1px 2px;
border-width: 1px 1px 1px;
}
tbody tr {
transition: all 0.3s;
&:hover {
background: rgba(60, 90, 100, 0.04);
}
// &:hover {
// background: rgba(60, 90, 100, 0.04);
// }
}
}
Expand All @@ -373,7 +370,7 @@ const GlobalStyle: React.FC = () => {
border-width: 0 1px;
th {
border-width: 1px 0 2px;
border-width: 1px 0 1px;
}
td {
Expand Down
84 changes: 47 additions & 37 deletions docs/blog/chart-classification-palette-design-guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,31 +20,27 @@ title: 图表分类色板设计方法

### 常用配色方法

常用的色环配色法，有「邻近色配色法」「对比色配色法」「互补色配色法」「分裂互补色」「三角配色」「四分配色」等等。:::tips
常用的色环配色法，有「邻近色配色法」「对比色配色法」「互补色配色法」「分裂互补色」「三角配色」「四分配色」等等。

- 邻近色：在色相环中，相差 15°的颜色为邻近色，凡在 60°范围内的颜色都属于邻近色的范围。邻近色之间往往是我中有你，你中有我，色彩之间比较和谐。
- 对比色：在色相环中，角度相差 120°-180°之间的色彩。
- 互补色：在色相环中成 180°角的两种颜色，互为补色，当这两种颜色彼此相邻放置时，它们会为这两种特定颜色创造最强烈的对比度。
- 分裂互补色：也叫等腰三角形配色，以互补色为中心，左右15°- 60°区间内的颜色。:::
- 分裂互补色：也叫等腰三角形配色，以互补色为中心，左右15°- 60°区间内的颜色。

<div style="display: flex; justify-content: space-between">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/5-Z9QIRe6nsAAAAAAAAAAAAADv3-AQBr/original" />
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/ZtKwRZNGQKMAAAAAAAAAAAAADv3-AQBr/original" />
</div>
</div>
![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/5-Z9QIRe6nsAAAAAAAAAAAAADv3-AQBr/original)

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/ZtKwRZNGQKMAAAAAAAAAAAAADv3-AQBr/original)

竞品的颜色色相会根据自身的业务特性和要传递的品牌调性选择合适的配色方法，除了「Grafana」是比较标准的邻近色配色，其他竞品没有严谨的规律可寻，但可以找到大致的配色方向，比如：「AntV」和「Tableau」更像是分裂互补色配色，「Echarts」更偏向于四分法配色。

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/DB47SZJbLgkAAAAAAAAAAAAADv3-AQBr/original)

配色方案除了设计师发挥自身的经验价值，还可以利用配色工具让方案更加科学，这里推荐给大家两个好用的配色工具，分别是[「Adobe Color」](https://color.adobe.com/zh/create/color-wheel)和[「Paletton」](http://paletton.com/#uid=703101kl6lPhAQkk2vSnjcbop3Ykm9lG3nsycJpjuWi1Sde2klzD09LrHgcwwq1NJuaXxkOmeQNQ7rAgfrX0m9T0Cn)。「Adobe Color」支持的配色方法很多，覆盖了上述所有配色方法，「Paletton」支持的方法相对基础，目前有邻近色、对比色和四分色三个配色模式，如：分裂互补色、三角配色等可以通过手动调节来完成。

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/n0GjRaGBMuYAAAAAAAAAAAAADv3-AQBr/original)

Adobe Color 配色方法
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/n0GjRaGBMuYAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">Adobe Color 配色方法</div>
</div>

## 图表配色原则

Expand Down Expand Up @@ -198,11 +194,13 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/p36BSIBT32sAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">图2
<div class="image-description">图2</div>
</div>
</div>

橙红色与警告色相近，避免产生歧义，可将橙红色明度饱和度降低作为新的颜色（图3）；为了能拉开色彩差距，让色相分布更均匀，再插入了一个色相为320的颜色（图4），可得到完整色板。</div>
橙红色与警告色相近，避免产生歧义，可将橙红色明度饱和度降低作为新的颜色（图3）；为了能拉开色彩差距，让色相分布更均匀，再插入了一个色相为320的颜色（图4），可得到完整色板。

</div>
<div style="display: flex">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/e7CvTocrTR8AAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">图3</div>
Expand All @@ -213,27 +211,32 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工
</div>
</div>

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/9_VNRJmASNIAAAAAAAAAAAAADv3-AQBr/original)

完整色板
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/9_VNRJmASNIAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">完整色板</div>
</div>

### 可读性验证

#### 明暗交替

通过工具 ColorLab 进行验证，在 LAB 色彩空间下，基本符合明暗交替原则。

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Y2tpTKyEwaIAAAAAAAAAAAAADv3-AQBr/original)
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/Y2tpTKyEwaIAAAAAAAAAAAAADv3-AQBr/original" style="width: 415px" />

#### 视障可读

符合明暗交替的原则，视障人群（色弱色盲人群）可辨别色板颜色。

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/bpNMSIQMNqMAAAAAAAAAAAAADv3-AQBr/original)

1.普通人群视觉效果

2.色弱人群视觉效果
<div style="display: flex">
<div style="flex: 1">
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/bpNMSIQMNqMAAAAAAAAAAAAADv3-AQBr/original" />
</div>
<div class="image-description" style="width: 130px">
<div style="margin-bottom: 16px">1.普通人群视觉效果</div>
<div>2.色弱人群视觉效果</div>
</div>
</div>

#### 欧氏距离

Expand All @@ -250,35 +253,42 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/HXrOT6BRa7sAAAAAAAAAAAAADv3-AQBr/original" />
</div>
</div>
<br />
<div style="display: flex; justify-content: space-between">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/L4DBTqhAUbAAAAAAAAAAAAAADv3-AQBr/original" />
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/I55rTpNNSDMAAAAAAAAAAAAADv3-AQBr/original" />
</div>
</div>
<br />
<div style="display: flex; justify-content: space-between">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/Mqy9SqIKnLgAAAAAAAAAAAAADv3-AQBr/original" />
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/QY9mToqPEAUAAAAAAAAAAAAADv3-AQBr/original" />
</div>
</div>

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/QY9mToqPEAUAAAAAAAAAAAAADv3-AQBr/original)

**参考文档**
## 参考文档

Material 色彩与设计科学 <https://material.io/blog/science-of-color-design>
Material 色彩与设计科学 https://material.io/blog/science-of-color-design

Material 色彩体系 <https://m3.material.io/styles/color/the-color-system/key-colors-tones>
Material 色彩体系 https://m3.material.io/styles/color/the-color-system/key-colors-tones

京东色彩构建 <https://www.uisdc.com/color-system>
京东色彩构建 https://www.uisdc.com/color-system

Adobe 调色板 <https://color.adobe.com/zh/explore?page=7>
Adobe 调色板 https://color.adobe.com/zh/explore?page=7

Paletton 配色工具 <http://paletton.com/#uid=54e1a0kr0pdobS5pLzuq+enoy6j>
Paletton 配色工具 http://paletton.com/#uid=54e1a0kr0pdobS5pLzuq+enoy6j

Tableau 博客 <https://www.tableau.com/blog/colors-upgrade-tableau-10-56782>
Tableau 博客 https://www.tableau.com/blog/colors-upgrade-tableau-10-56782

色相环比较 <http://www.handprint.com/HP/WCL/vismixmap.html#harris>
色相环比较 http://www.handprint.com/HP/WCL/vismixmap.html#harris

色彩空间 <http://www.handprint.com/HP/WCL/color7.html#CIELAB>
色彩空间 http://www.handprint.com/HP/WCL/color7.html#CIELAB

色彩体验 <http://www.handprint.com/CE/book.html>
色彩体验 http://www.handprint.com/CE/book.html
46 changes: 27 additions & 19 deletions docs/blog/chart-semantic-palette-design-guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ title: 图表语义色板设计推导

由于 OBUI 功能色饱和度明度偏高，不适合用在图表中，因此将颜色的饱和度收敛至65-75范围内，使色彩更加柔和；中性色本身属于灰色范畴，不需要在此环节调整饱和度。

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/HjITR6ncSUkAAAAAAAAAAAAADv3-AQBr/original)
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/HjITR6ncSUkAAAAAAAAAAAAADv3-AQBr/original" style="width: 432px" />

## 生成色阶

将上述颜色作为基准色，用 ColorLab 工具生成10色色阶，可得出如下色板：

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/GbdgQagxaNMAAAAAAAAAAAAADv3-AQBr/original)
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/GbdgQagxaNMAAAAAAAAAAAAADv3-AQBr/original" style="width: 432px" />

## 定义色板

Expand All @@ -39,12 +39,12 @@ title: 图表语义色板设计推导
| 语义色板 | 色值 | 名称 | 色号 | 语义 | 表达含义 |
| --- | --- | --- | --- | --- | --- |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/A1UUTqdajt0AAAAAAAAAAAAADv3-AQBr/original) | 9DAAC6 | 灰 | 4 | 中性的 | 表示：默认的、其他、剩余、失效的 |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/JF3UQLMU4z4AAAAAAAAAAAAADv3-AQBr/original) | 3983ED | 蓝 | 7 | | 表示：常规的、常态的、默认的 |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/JF3UQLMU4z4AAAAAAAAAAAAADv3-AQBr/original) | 3983ED | 蓝 | 7 | 中性的 | 表示：常规的、常态的、默认的 |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/LJwkRqOXqckAAAAAAAAAAAAADv3-AQBr/original) | 42C79B | 绿 | 7 | 正向的 | 表示：成功的、安全的、可行的、可获得的 |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/pspsSqsFZVwAAAAAAAAAAAAADv3-AQBr/original) | F9B048 | 黄 | 7 | 负向的 | 表示：提醒、注意、警示、低风险（严重等级 1） |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/MPigSIef6nEAAAAAAAAAAAAADv3-AQBr/original) | F97A3B | 橙 | 7 | | 表示：警告、严重、中风险（严重等级 2） |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/xbRkS4Dl-XoAAAAAAAAAAAAADv3-AQBr/original) | E5363B | 红 | 7 | | 表示：危险、失败、严重、错误（严重等级 3） |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Q0JxTLe8LyIAAAAAAAAAAAAADv3-AQBr/original) | 89273F | 紫红 | 7 | | 表示：非常严重、高风险、停服（严重等级 4） |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/MPigSIef6nEAAAAAAAAAAAAADv3-AQBr/original) | F97A3B | 橙 | 7 | 负向的 | 表示：警告、严重、中风险（严重等级 2） |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/xbRkS4Dl-XoAAAAAAAAAAAAADv3-AQBr/original) | E5363B | 红 | 7 | 负向的 | 表示：危险、失败、严重、错误（严重等级 3） |
| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Q0JxTLe8LyIAAAAAAAAAAAAADv3-AQBr/original) | 89273F | 紫红 | 7 | 负向的 | 表示：非常严重、高风险、停服（严重等级 4） |

## 应用效果

Expand All @@ -53,23 +53,29 @@ title: 图表语义色板设计推导
<div style="display: flex">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/VTN5QIxxOBQAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">兼容性概览</div>
<div class="image-description-center">兼容性概览</div>
</div>
</div>

<div style="display: flex">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/9VjQS451mokAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">慢 SQL 指标</div>
<div class="image-description-center">慢 SQL 指标</div>
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/UyA2RYne-mwAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">资源水位</div>
<div class="image-description-center">资源水位</div>
</div>
</div>

<div style="display: flex">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/A0EURoKFHY0AAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">备份任务状态</div>
<div class="image-description-center">备份任务状态</div>
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/AvhzQYaFvGQAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">迁移任务状态</div>
<div class="image-description-center">迁移任务状态</div>
</div>
</div>

Expand All @@ -78,21 +84,23 @@ title: 图表语义色板设计推导
<div style="display: flex">
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/C58-RbypfJcAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">异常数据点标记</div>
<div class="image-description-center">异常数据点标记</div>
</div>
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/MtSZTY-YrLcAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description">异常检测标记</div>
<div class="image-description-center">异常检测标记</div>
</div>
</div>

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/KrdvS7IctOoAAAAAAAAAAAAADv3-AQBr/original)

CPU 使用率

![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/wfgeSJlUTqMAAAAAAAAAAAAADv3-AQBr/original)
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/KrdvS7IctOoAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description-center">CPU 使用率</div>
</div>

CPU 消耗比
<div>
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/wfgeSJlUTqMAAAAAAAAAAAAADv3-AQBr/original" />
<div class="image-description-center">CPU 消耗比</div>
</div>

<style>
table tr td img {
Expand Down
Loading

0 comments on commit 4f7765d

Please sign in to comment.