mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
docs: improve display of color block in docs (#44790)
* chore: update blog style
* Revert "chore: update blog style"
This reverts commit afc0a1d927e59ee4f30ad3dcbec40e85785ff188.
* Revert "site: update docs styles (#39348)"
This reverts commit 4a803962eb.
# Conflicts:
# .dumi/theme/builtins/ColorChunk/index.tsx
# .dumi/theme/builtins/TokenTable/index.tsx
# docs/react/customize-theme.en-US.md
# docs/react/customize-theme.zh-CN.md
* chore: revert
* chore：revert
* chore: rename props
* chore: update
* chore(deps): add `dumi-plugin-color-chunk` plugin
* chore: update docs
* chore: update
* Update package.json
Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: 红 <wxh16144@qq.com>
* docs: pick #44945
Co-authored-by: RedJue <RedJue@users.noreply.github.com>
---------
Signed-off-by: 红 <wxh16144@qq.com>
Signed-off-by: 红 <wxh1220@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: RedJue <RedJue@users.noreply.github.com>
This commit is contained in:
红
GitHub
parent
e41026ab59
commit
a9d6422722
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||
|
||||
interface ColorChunkProps {
|
||||
children?: React.ReactNode;
|
||||
color?: ColorInput;
|
||||
value?: ColorInput;
|
||||
}
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
@ -27,12 +27,12 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
|
||||
const ColorChunk: React.FC<ColorChunkProps> = (props) => {
|
||||
const { styles } = useStyle();
|
||||
const { color, children } = props;
|
||||
const { value, children } = props;
|
||||
|
||||
const dotColor = React.useMemo(() => {
|
||||
const _color = new TinyColor(color).toHex8String();
|
||||
const _color = new TinyColor(value).toHex8String();
|
||||
return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
|
||||
}, [color]);
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<span className={styles.codeSpan}>
|
||||
|
||||
@ -78,7 +78,7 @@ export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefine
|
||||
typeof record.value === 'string' &&
|
||||
(record.value.startsWith('#') || record.value.startsWith('rgb'));
|
||||
if (isColor) {
|
||||
return <ColorChunk color={record.value}>{record.value}</ColorChunk>;
|
||||
return <ColorChunk value={record.value}>{record.value}</ColorChunk>;
|
||||
}
|
||||
return typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value;
|
||||
},
|
||||
|
||||
@ -6,6 +6,7 @@ import { version } from './package.json';
|
||||
import * as fs from 'fs-extra';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: ['dumi-plugin-color-chunk'],
|
||||
conventionRoutes: {
|
||||
// to avoid generate routes for .dumi/pages/index/components/xx
|
||||
exclude: [new RegExp('index/components/')],
|
||||
|
||||
@ -12,19 +12,19 @@ Before we start implementing, we need to understand a concept: color models. A c
|
||||
|
||||
### RGB Color Model
|
||||
|
||||
The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256<sup>3</sup> colors. These colors can form a cube, as shown in the following figure: 
|
||||
The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256<sup>3</sup> colors. These colors can form a cube, as shown in the following figure: 
|
||||
|
||||
In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `(255, 0, 0)`, green can be represented as `(0, 255, 0)`, and blue can be represented as `(0, 0, 255)`.
|
||||
In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `rgb(255, 0, 0)`, green can be represented as `rgb(0, 255, 0)`, and blue can be represented as `rgb(0, 0, 255)`.
|
||||
|
||||
### HSV/HSB Color Model
|
||||
|
||||
The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: 
|
||||
The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: 
|
||||
|
||||
In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `(0, 100, 100)`, green can be represented as `(120, 100, 100)`, and blue can be represented as `(240, 100, 100)`.
|
||||
In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `hsv(0, 100, 100)`, green can be represented as `hsv(120, 100, 100)`, and blue can be represented as `hsv(240, 100, 100)`.
|
||||
|
||||
### HEX Color Model
|
||||
|
||||
The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: 
|
||||
The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: 
|
||||
|
||||
This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers.
|
||||
|
||||
@ -111,3 +111,9 @@ So far, we have obtained a color picker with complete hue, saturation, and brigh
|
||||
## Summary
|
||||
|
||||
Through this development journey, I have gained a deeper understanding of color models and the development process of Ant Design. Thanks to the Ant Design team for giving me this opportunity, and thank you all for reading. If you are interested in the implementation details, you can check out the source code implementation at [@rc-component/color-picker](https://github.com/react-component/color-picker).
|
||||
|
||||
## References
|
||||
|
||||
- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
|
||||
- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
|
||||
- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg
|
||||
|
||||
@ -14,13 +14,13 @@ author: Redjue
|
||||
|
||||
`RGB` 色彩模型是通过三原色（红、绿、蓝）的不同组合来表示色彩的，每个原色的取值范围是 0-255，三原色的组合可以表示 256<sup>3</sup> 种颜色，这些颜色可以组成一个立方体，如下图所示： 
|
||||
|
||||
在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `(255, 0, 0)`，绿色可以表示为 `(0, 255, 0)`，蓝色可以表示为 `(0, 0, 255)`。
|
||||
在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `rgb(255, 0, 0)`，绿色可以表示为 `rgb(0, 255, 0)`，蓝色可以表示为 `rgb(0, 0, 255)`。
|
||||
|
||||
### HSV/HSB 色彩模型
|
||||
|
||||
`HSV` 色彩模型是通过色相（Hue）、饱和度（Saturation）、明度（Value）来表示色彩的，其中色相的取值范围是 0-360，饱和度和明度的取值范围是 0-100。HSV 色彩模型可以用一个圆锥体来表示，如下图所示： 
|
||||
|
||||
在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `(0, 100, 100)`，绿色可以表示为 `(120, 100, 100)`，蓝色可以表示为 `(240, 100, 100)`。
|
||||
在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `hsv(0, 100, 100)`，绿色可以表示为 `hsv(120, 100, 100)`，蓝色可以表示为 `hsv(240, 100, 100)`。
|
||||
|
||||
### HEX 色彩模型
|
||||
|
||||
@ -114,8 +114,6 @@ const alpha = (offset.x + centerOffsetX) / width;
|
||||
|
||||
## 图片来源
|
||||
|
||||
https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
|
||||
|
||||
https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
|
||||
|
||||
https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg
|
||||
- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
|
||||
- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
|
||||
- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg
|
||||
|
||||
@ -17,7 +17,7 @@ This document will help you upgrade from antd `4.x` version to antd `5.x` versio
|
||||
### Design specification
|
||||
|
||||
- Basic rounded corner adjustment, changed from `2px` to four layers of radius, which are `2px` `4px` `6px` and `8px`. For example, radius of default Button is modified from `2px` to `6px`.
|
||||
- Primary color adjustment, changed from <ColorChunk color="#1890ff" /></ColorChunk> to <ColorChunk color="#1677ff" /></ColorChunk>.
|
||||
- Primary color adjustment, changed from `#1890ff` to `#1677ff`.
|
||||
- Global shadow optimization, adjusted from three layers of shadows to two layers, which are used in common components (Card .e.g) and popup components (Dropdown .e.g).
|
||||
- Overall reduction in wireframe usage.
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ tag: Updated
|
||||
### 设计规范调整
|
||||
|
||||
- 基础圆角调整，由统一的 `2px` 改为四级圆角，分别为 `2px` `4px` `6px` `8px`，分别应用于不同场景，比如默认尺寸的 Button 的圆角调整为了 `6px`。
|
||||
- 主色调整，由 <ColorChunk color="#1890ff" /></ColorChunk> 改为 <ColorChunk color="#1677ff" /></ColorChunk>。
|
||||
- 主色调整，由 `#1890ff` 改为 `#1677ff`。
|
||||
- 整体阴影调整，由原本的三级阴影调整为两级，分别用于常驻页面的组件（如 Card）和交互反馈（如 Dropdown）。
|
||||
- 部分组件内间距调整。
|
||||
- 整体去线框化。
|
||||
|
||||
@ -46,19 +46,18 @@ If the above palettes do not meet your needs, you can choose a main color below,
|
||||
|
||||
We provide JavaScript usage for developers.
|
||||
|
||||
- **JavaScript**
|
||||
```bash
|
||||
npm install @ant-design/colors
|
||||
```
|
||||
|
||||
```
|
||||
npm install @ant-design/colors
|
||||
```
|
||||
```js
|
||||
import { blue } from '@ant-design/colors';
|
||||
|
||||
```js
|
||||
import { blue } from '@ant-design/colors';
|
||||
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
|
||||
console.log(blue.primary); // '#1890FF'
|
||||
```
|
||||
console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
|
||||
console.log(blue.primary); // '#1677FF'
|
||||
```
|
||||
|
||||
More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
|
||||
More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
|
||||
|
||||
---
|
||||
|
||||
@ -70,7 +69,7 @@ We provide JavaScript usage for developers.
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
|
||||
</ImagePreview>
|
||||
|
||||
The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is <ColorChunk color="#1890ff" /></ColorChunk>, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
|
||||
The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is `#1677ff`, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
|
||||
|
||||
### Functional Color
|
||||
|
||||
|
||||
@ -54,19 +54,18 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
|
||||
|
||||
我们为程序员提供了色板的 JavaScript 的使用方式。
|
||||
|
||||
- **JavaScript**
|
||||
```
|
||||
npm install @ant-design/colors
|
||||
```
|
||||
|
||||
```
|
||||
npm install @ant-design/colors
|
||||
```
|
||||
```js
|
||||
import { blue } from '@ant-design/colors';
|
||||
|
||||
```js
|
||||
import { blue } from '@ant-design/colors';
|
||||
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
|
||||
console.log(blue.primary); // '#1890FF'
|
||||
```
|
||||
console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
|
||||
console.log(blue.primary); // '#1677FF'
|
||||
```
|
||||
|
||||
更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
|
||||
更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
|
||||
|
||||
---
|
||||
|
||||
@ -78,7 +77,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
|
||||
</ImagePreview>
|
||||
|
||||
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 <ColorChunk color="#1890ff" /></ColorChunk>，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
|
||||
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1677ff`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
|
||||
|
||||
### 功能色
|
||||
|
||||
|
||||
@ -218,6 +218,7 @@
|
||||
"crypto": "^1.0.1",
|
||||
"dekko": "^0.2.1",
|
||||
"dumi": "^2.2.10",
|
||||
"dumi-plugin-color-chunk": "^1.0.2",
|
||||
"duplicate-package-checker-webpack-plugin": "^3.0.0",
|
||||
"esbuild-loader": "^4.0.0",
|
||||
"eslint": "^8.40.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user