docs: dark color tool (#21101)

* docs: dark color tool

* tweak: locale

* fix: lint

* fix: dark

* fix: color unset

* fix: style

* fix: primary minSaturation

* fix: lint

* fix: padding

* fix: height

* fix: colors

docs/spec/dark.md

@@ -31,10 +31,20 @@ skip: true
 
 ### 基础色板
 
-TODO: Image
+
+```__react
+import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
+
+ReactDOM.render(<ColorPalettes dark />, mountNode);
+```
 
 ### 色板生产工具
 
 同样，我们也提供了一套暗色下的色板生成工具，需要选择你的主色以及页面的背景色，我们会为你生成一套暗色下的色板
 
-TODO: Panel
+```__react
+import ColorPaletteToolDark from '../../site/theme/template/Color/ColorPaletteToolDark';
+
+ReactDOM.render(<ColorPaletteToolDark />, mountNode);
+```
+

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',

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;

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',
     };
   }

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 <span className="color-palette-picker-validation color-palette-picker-validation-dark">{text.trim()}</span>;
+  }
+
+  render() {
+    const { primaryColor, backgroundColor } = this.state;
+    return (
+      <div className="color-palette-horizontal color-palette-horizontal-dark">
+        <div className="main-color">
+          <ColorPatterns color={primaryColor} dark backgroundColor={backgroundColor} />
+        </div>
+        <div className="color-palette-picker">
+          <Row>
+            <Col span={12}>
+              <div className="color-palette-pick">
+                <FormattedMessage id="app.docs.color.pick-primary" />
+              </div>
+              <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+                <Row>
+                  <Col span={18}>
+                    <ColorPicker type="chrome" color={primaryColor} onChange={this.handleChangeColor} />
+                  </Col>
+                  <Col span={6}>
+                    <span className="color-palette-pick-hex">{primaryColor}</span>
+                  </Col>
+                </Row>
+              </span>
+            </Col>
+            <Col span={12}>
+              <div className="color-palette-pick">
+                <FormattedMessage id="app.docs.color.pick-background" />
+              </div>
+              <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+                <Row>
+                  <Col span={18}>
+                    <ColorPicker type="chrome" color={backgroundColor} onChange={this.handleChangeBackgroundColor} />
+                  </Col>
+                  <Col span={6}>
+                    <span className="color-palette-pick-hex">{backgroundColor}</span>
+                  </Col>
+                </Row>
+              </span>
+            </Col>
+          </Row>
+          {this.renderColorValidation()}
+        </div>
+      </div>
+    );
+  }
+}

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 (
-    <div className="color-palettes">
+    <div className={colorCls}>
       {colors.map(color => (
-        <Palette key={color.name} color={color} showTitle />
+        <Palette key={color.name} color={color} dark={dark} showTitle />
       ))}
     </div>
   );

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) => (
-    <ColorBlock color={colorString} index={i + 1} key={colorString} />
+export default function ColorPatterns({ color, dark, backgroundColor }) {
+  const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
+  return uniq(colors).map((colorString, i) => (
+    <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
   ));
 }

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(
         <CopyToClipboard
           text={this.hexColors ? this.hexColors[colorText] : ''}
@@ -52,8 +60,9 @@ export default class Palette extends React.Component {
             }}
             className={`main-color-item palette-${name}-${i}`}
             style={{
-              color: (name === 'yellow' ? i > 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"
           >

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': '实底风格',