diff --git a/docs/spec/dark.md b/docs/spec/dark.md index 6f7d929a29..64e235ab4c 100644 --- a/docs/spec/dark.md +++ b/docs/spec/dark.md @@ -31,10 +31,20 @@ skip: true ### 基础色板 -TODO: Image + +```__react +import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; + +ReactDOM.render(, mountNode); +``` ### 色板生产工具 同样，我们也提供了一套暗色下的色板生成工具，需要选择你的主色以及页面的背景色，我们会为你生成一套暗色下的色板 -TODO: Panel +```__react +import ColorPaletteToolDark from '../../site/theme/template/Color/ColorPaletteToolDark'; + +ReactDOM.render(, mountNode); +``` + diff --git a/site/theme/en-US.js b/site/theme/en-US.js index cb5c72f37d..06f6868813 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -115,6 +115,7 @@ module.exports = { 'app.publish.old-version-guide': 'If you need documentation of older version, please visit ', 'app.publish.old-version-tips': ', or switch version with the select at header navigation.', 'app.docs.color.pick-primary': 'Pick your primary color', + 'app.docs.color.pick-background': 'Pick your background color', 'app.docs.components.icon.search.placeholder': 'Search icon here, click icon to copy code', 'app.docs.components.icon.outlined': 'Outlined', 'app.docs.components.icon.filled': 'Filled', diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less index 8ead62e1e1..563a81c145 100644 --- a/site/theme/static/colors.less +++ b/site/theme/static/colors.less @@ -24,6 +24,29 @@ .color-palettes { margin: 0 1%; + &-dark { + margin: 0; + padding: 0 28px; + background-color: #141414; + .color-title { + color: fade(@white, 85); + } + .color-description { + color: fade(@white, 45); + } + .color-palette { + margin: 45px 3.5% 45px 0; + &:nth-of-type(3n) { + margin-right: 0; + } + .main-color-item { + margin-right: 0; + &:hover { + margin-right: -8px; + } + } + } + } } .color-palette { display: inline-block; @@ -49,6 +72,9 @@ margin-left: 16px; color: @error-color; font-size: 13px; + &-dark { + margin-left: 0; + } } } } @@ -141,6 +167,21 @@ .color-palette-horizontal { width: 100%; + &-dark { + height: 303px; + padding: 32px 28px; + background-color: #141414; + .color-palette-picker { + margin-bottom: 0; + } + .color-palette-pick { + color: fade(@white, 65); + text-align: left; + &-hex { + color: fade(@white, 65); + } + } + } .main-color { display: flex; diff --git a/site/theme/template/Color/ColorBlock.jsx b/site/theme/template/Color/ColorBlock.jsx index eb75d8f789..c0fcd2aaea 100644 --- a/site/theme/template/Color/ColorBlock.jsx +++ b/site/theme/template/Color/ColorBlock.jsx @@ -4,10 +4,15 @@ import { message } from 'antd'; export default class ColorBlock extends Component { getTextStyle() { - const { color, index } = this.props; + const { color, index, dark } = this.props; + const colorMap = { + default: ['#fff', 'unset'], + dark: ['#314659', '#fff'], + } + const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default; return { background: color, - color: index > 5 ? '#fff' : 'unset', + color: index > 5 ? lastColor : firstColor, fontWeight: index === 6 ? 'bold' : 'normal', }; } diff --git a/site/theme/template/Color/ColorPaletteToolDark.jsx b/site/theme/template/Color/ColorPaletteToolDark.jsx new file mode 100644 index 0000000000..4f8ddc538d --- /dev/null +++ b/site/theme/template/Color/ColorPaletteToolDark.jsx @@ -0,0 +1,100 @@ +import React, { Component } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { Row, Col } from 'antd'; +import ColorPicker from './ColorPicker'; +import ColorPatterns from './ColorPatterns'; + +const primaryMinSaturation = 70; // 主色推荐最小饱和度 +const primaryMinBrightness = 70; // 主色推荐最小亮度 + +// eslint-disable-next-line +export default class ColorPaletteTool extends Component { + state = { + primaryColor: '#1890ff', + backgroundColor: '#141414', + primaryColorInstance: null, + // eslint-disable-next-line react/no-unused-state + backgroundColorInstance: null, + }; + + handleChangeColor = (e, color) => { + const value = e.target ? e.target.value : e; + this.setState({ + primaryColor: value, + primaryColorInstance: color, + }); + }; + + handleChangeBackgroundColor = (e, color) => { + const value = e.target ? e.target.value : e; + this.setState({ + backgroundColor: value, + // eslint-disable-next-line react/no-unused-state + backgroundColorInstance: color, + }); + } + + renderColorValidation() { + const { primaryColorInstance } = this.state; + let text = ''; + if (primaryColorInstance) { + if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) { + text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${( + primaryColorInstance.hsv.s * 100 + ).toFixed(2)}）`; + } + if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) { + text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${( + primaryColorInstance.hsv.v * 100 + ).toFixed(2)}）`; + } + } + return {text.trim()}; + } + + render() { + const { primaryColor, backgroundColor } = this.state; + return ( +
+
+ +
+
+ + +
+ +
+ + + + + + + {primaryColor} + + + + + +
+ +
+ + + + + + + {backgroundColor} + + + + + + {this.renderColorValidation()} +
+
+ ); + } +} diff --git a/site/theme/template/Color/ColorPalettes.jsx b/site/theme/template/Color/ColorPalettes.jsx index 5851c3645f..ef1906cb26 100644 --- a/site/theme/template/Color/ColorPalettes.jsx +++ b/site/theme/template/Color/ColorPalettes.jsx @@ -1,7 +1,10 @@ import React from 'react'; +import cls from 'classnames'; import Palette from './Palette'; -const ColorPalettes = () => { +const ColorPalettes = (props) => { + const { dark } = props; + const colors = [ { name: 'red', @@ -76,10 +79,13 @@ const ColorPalettes = () => { description: '明快、感性', }, ]; + const colorCls = cls('color-palettes', { + 'color-palettes-dark': !!dark, + }) return ( -
+
{colors.map(color => ( - + ))}
); diff --git a/site/theme/template/Color/ColorPatterns.jsx b/site/theme/template/Color/ColorPatterns.jsx index feaf6dcc21..6989b20215 100644 --- a/site/theme/template/Color/ColorPatterns.jsx +++ b/site/theme/template/Color/ColorPatterns.jsx @@ -1,9 +1,11 @@ import React from 'react'; import { generate } from '@ant-design/colors'; +import uniq from 'lodash/uniq'; import ColorBlock from './ColorBlock'; -export default function ColorPatterns({ color }) { - return generate(color).map((colorString, i) => ( - +export default function ColorPatterns({ color, dark, backgroundColor }) { + const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); + return uniq(colors).map((colorString, i) => ( + )); } diff --git a/site/theme/template/Color/Palette.jsx b/site/theme/template/Color/Palette.jsx index 2876b2436c..7862372864 100644 --- a/site/theme/template/Color/Palette.jsx +++ b/site/theme/template/Color/Palette.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { message } from 'antd'; import CopyToClipboard from 'react-copy-to-clipboard'; +import { presetDarkPalettes } from '@ant-design/colors'; const rgbToHex = rgbString => { const rgb = rgbString.match(/\d+/g); @@ -32,13 +33,20 @@ export default class Palette extends React.Component { const { showTitle, direction, + dark, color: { name, description, english, chinese, count = 10 }, } = this.props; const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette'; const colors = []; const colorName = `${english} / ${chinese}`; + const colorPaletteMap = { + dark: ['#fff', 'unset'], + default: ['rgba(0,0,0,0.85)', '#fff'], + } + const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default; for (let i = 1; i <= count; i += 1) { const colorText = `${name}-${i}`; + const defaultBgStyle = dark ? presetDarkPalettes[name][i - 1] : ''; colors.push( 6 : i > 5) ? '#fff' : 'unset', + color: (name === 'yellow' ? i > 6 : i > 5) ? firstColor : lastColor, fontWeight: i === 6 ? 'bold' : 'normal', + backgroundColor: defaultBgStyle, }} title="click to copy color" > diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index bfa2a795b9..84db01b39f 100644 --- a/site/theme/zh-CN.js +++ b/site/theme/zh-CN.js @@ -114,6 +114,7 @@ module.exports = { 'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ', 'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。', 'app.docs.color.pick-primary': '选择你的主色', + 'app.docs.color.pick-background': '选择你的背景色', 'app.docs.components.icon.search.placeholder': '在此搜索图标，点击图标可复制代码', 'app.docs.components.icon.outlined': '线框风格', 'app.docs.components.icon.filled': '实底风格',