Merge pull request #16775 from ant-design/doc-antd-colors

docs: 📝 Add Programmatic Usage of antd colors
This commit is contained in:
偏右 2019-05-24 16:31:44 +08:00 committed by GitHub
commit 2a3918e462
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 0 deletions

View File

@ -52,6 +52,37 @@ import ColorPaletteTool from '../../site/theme/template/Color/ColorPaletteTool';
ReactDOM.render(<ColorPaletteTool />, mountNode);
```
### Programmatic Usage
We provide Less and JavaScript usage for developers.
- **Less**
```less
@import '~antd/lib/style/themes/default.less', .selector {
color: @blue-5;
background-color: @gold-2;
}
```
Color less variables: [color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less).
<br />
- **JavaScript**
```
npm install @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'
```
More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
---
## Product-level Color System

View File

@ -60,6 +60,37 @@ import ColorPaletteTool from '../../site/theme/template/Color/ColorPaletteTool';
ReactDOM.render(<ColorPaletteTool />, mountNode);
```
### 在代码中使用色板
我们为程序员提供了色板的 Less 和 JavaScript 的使用方式。
- **Less**
```less
@import '~antd/lib/style/themes/default.less', .selector {
color: @blue-5;
background-color: @gold-2;
}
```
所有色板变量列表:[color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less)。
<br />
- **JavaScript**
```
npm install @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'
```
更多使用方式:[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
---
## 产品级色彩体系