fix: dark theme in 4.0 (#20642)

* fix: rtl direction bug

* 📝 dark theme usage docs

* fix: sketch download

* fix: theme dark

* 📝 empty image

* fix: dark form with mixture components like picker, input

* 📝 update sketch release download

* fix: remove inline-menu sub shadow

components/button/index.en-US.md

@@ -64,6 +64,6 @@ Following the Ant Design specification, we will add one space between if Button
   margin-right: 0;
 }
 [data-theme="dark"] .site-button-ghost-wrapper {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.2);
 }
 </style>

components/button/index.zh-CN.md

@@ -66,6 +66,6 @@ subtitle: 按钮
   margin-right: 0;
 }
 [data-theme="dark"] .site-button-ghost-wrapper {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.2);
 }
 </style>

components/config-provider/demo/direction.md

@@ -611,3 +611,9 @@ ReactDOM.render(<App />, mountNode);
   margin-left: 20px;
 }
 ```
+
+<style>
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
+</style>

components/drawer/style/drawer.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 
 @drawer-prefix-cls: ~'@{ant-prefix}-drawer';
+@picker-prefix-cls: ~'@{ant-prefix}-picker';
 
 .@{drawer-prefix-cls} {
   position: fixed;
@@ -231,6 +232,13 @@
       box-shadow: @shadow-2;
     }
   }
+
+  // =================== Hook Components ===================
+  .@{picker-prefix-cls} {
+    &-clear {
+      background: @popover-background;
+    }
+  }
 }
 
 @keyframes antdDrawerFadeIn {

components/empty/index.en-US.md

@@ -30,8 +30,31 @@ Empty state placeholder.
 
 - Empty.PRESENTED_IMAGE_SIMPLE
 
-  <img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
+  <div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
 
 - Empty.PRESENTED_IMAGE_DEFAULT
 
-  <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">
+  <div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
+
+<style>
+  .site-empty-buildIn-img {
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  .site-empty-buildIn-simple {
+    width: 55px;
+    height: 35px;
+    background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
+  }
+  .site-empty-buildIn-default {
+    width: 121px;
+    height: 116px;
+    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
+  }
+  [data-theme="dark"] .site-empty-buildIn-simple {
+    background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/oQFqhkmNPw/a38d2cdb-a33d-407c-8f8e-e3429699175d.png");
+  }
+  [data-theme="dark"] .site-empty-buildIn-default {
+    background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
+  }
+</style>

components/empty/index.zh-CN.md

@@ -49,13 +49,13 @@ cols: 1
   }
   .site-empty-buildIn-default {
     width: 121px;
-    height: 100px;
+    height: 116px;
     background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
   }
   [data-theme="dark"] .site-empty-buildIn-simple {
     background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/oQFqhkmNPw/a38d2cdb-a33d-407c-8f8e-e3429699175d.png");
   }
   [data-theme="dark"] .site-empty-buildIn-default {
-    background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/5kgxi7xhMT/f6a34113-f417-44ea-a558-c3e50b4d441e.png");
+    background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
   }
 </style>

components/form/style/components.less

@@ -14,6 +14,9 @@
   .@{ant-prefix}-upload {
     background: transparent;
   }
+  .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
+    background: @background-color-light;
+  }
 
   input[type='radio'],
   input[type='checkbox'] {

components/form/style/index.less

@@ -139,6 +139,12 @@
     .@{ant-prefix}-input {
       padding-right: 24px;
     }
+    // https://github.com/ant-design/ant-design/issues/19884
+    .@{ant-prefix}-input-affix-wrapper {
+      .@{ant-prefix}-input-suffix {
+        padding-right: 18px;
+      }
+    }
 
     // Fix issue: https://github.com/ant-design/ant-design/issues/7854
     .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
@@ -153,8 +159,6 @@
     }
 
     .@{ant-prefix}-input-password-icon {
-      margin-right: 18px;
-
       .@{form-prefix-cls}-rtl & {
         margin-right: 0;
         margin-left: 18px;

components/input-number/style/index.less

@@ -3,6 +3,7 @@
 @import '../../input/style/mixin';
 
 @input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
 
 .@{input-number-prefix-cls} {
   .reset-component;
@@ -51,6 +52,10 @@
 
   &:hover {
     .hover(@input-number-hover-border-color);
+    & + .@{form-item-prefix-cls}-children-icon {
+      opacity: 0;
+      transition: opacity 0.24s linear 0.24s;
+    }
   }
 
   &-focused {

components/input/style/mixin.less

@@ -451,7 +451,7 @@
     z-index: 2;
     display: flex;
     align-items: center;
-    color: @input-color;
+    color: @input-icon-color;
     line-height: 0;
     transform: translateY(-50%);
 

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -830,7 +830,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
       class="ant-switch-inner"
     />
   </button>
-   Change Theme
+   Change Style
   <br />
   <br />
   <ul

components/menu/demo/switch-mode.md

@@ -47,7 +47,7 @@ class Sider extends React.Component {
       <div>
         <Switch onChange={this.changeMode} /> Change Mode
         <span className="ant-divider" style={{ margin: '0 1em' }} />
-        <Switch onChange={this.changeTheme} /> Change Theme
+        <Switch onChange={this.changeTheme} /> Change Style
         <br />
         <br />
         <Menu

components/menu/style/dark.less

@@ -20,7 +20,6 @@
 
   &-dark &-inline&-sub {
     background: @menu-dark-submenu-bg;
-    box-shadow: 0 2px 8px fade(@black, 45%) inset;
   }
 
   &-dark&-horizontal {

components/style/themes/dark.less

@@ -254,6 +254,7 @@
 // ---
 @input-bg: transparent;
 @input-placeholder-color: fade(@white, 30%);
+@input-icon-color: fade(@white, 30%);
 @input-number-handler-bg: transparent;
 @input-number-handler-active-bg: @item-hover-bg;
 @input-icon-hover-color: fade(@white, 85%);
@@ -272,10 +273,6 @@
 @cascader-menu-bg: @popover-background;
 @cascader-menu-border-color-split: @border-color-split;
 
-// Anchor
-// ---
-@anchor-bg: inherit;
-
 // Tooltip
 // ---
 // Tooltip background color

components/style/themes/default.less

@@ -344,6 +344,7 @@
 @input-padding-vertical-lg: 6px;
 @input-placeholder-color: hsv(0, 0, 75%);
 @input-color: @text-color;
+@input-icon-color: @input-color;
 @input-border-color: @border-color-base;
 @input-bg: @component-background;
 @input-number-hover-border-color: @input-hover-border-color;

components/table/index.zh-CN.md

@@ -121,7 +121,7 @@ const columns = [
 | className | 列样式类名 | string | - |
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |
 | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - |
-| defaultFilteredValue | 默认筛选值 | string\[] | - |  |
+| defaultFilteredValue | 默认筛选值 | string\[] | - |
 | defaultSortOrder | 默认排序顺序 | 'ascend' \| 'descend' | - |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | React.ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => React.ReactNode | - |
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |

components/transfer/index.zh-CN.md

@@ -26,7 +26,7 @@ title: Transfer
 | className | 自定义类 | string |  |  |
 | dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | [TransferItem](https://git.io/vMM64)\[] | \[] |  |
 | disabled | 是否禁用 | boolean | false |  |
-| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 |  | (inputValue, option): boolean |  |  |
+| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean |  |  |
 | footer | 底部渲染函数 | (props) => ReactNode |  |  |
 | listStyle | 两个穿梭框的自定义样式 | object\|({direction: 'left'\|'right'}) => object |  |  |
 | locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | `{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }` |  |

docs/react/customize-theme.en-US.md

@@ -104,13 +104,13 @@ Note: This way will load the styles of all components, regardless of your demand
 
 ![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ)
 
-include `antd/dist/antd.dark.less` in the style file:
+Method 1: include `antd/dist/antd.dark.less` in the style file:
 
 ```less
 @import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
 ```
 
-Another approach to using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
+Method 2: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
 
 ```diff
 const darkThemeVars = require('antd/dist/dark-theme');
@@ -126,7 +126,10 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: darkThemeVars,
++       modifyVars: {
++          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`
++          ...darkThemeVars,
++       },
 +       javascriptEnabled: true,
 +     },
     }],
@@ -135,6 +138,12 @@ module.exports = {
   // ...other config
 ```
 
+Method 3: If the project does not use Less, you can include `antd.dark.css` in the CSS file in full:
+
+```css
+@import '~antd/dist/antd.dark.css';
+```
+
 ## How to avoid modifying global styles?
 
 Currently ant-design is designed as a whole experience and modify global styles (eg `body` etc). If you need to integrate ant-design as a part of an existing website, it's likely you want to prevent ant-design to override global styles.

docs/react/customize-theme.zh-CN.md

@@ -104,13 +104,13 @@ module.exports = {
 
 ![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ)
 
-一种方式是在样式文件全量引入 `antd/dist/antd.dark.less`：
+方式一：是在样式文件全量引入 `antd/dist/antd.dark.less`：
 
 ```less
 @import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
 ```
 
-另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
+方式二：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
 
 ```diff
 const darkThemeVars = require('antd/dist/dark-theme');
@@ -126,7 +126,10 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: darkThemeVars,
++       modifyVars: {
++          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`
++          ...darkThemeVars,
++       },
 +       javascriptEnabled: true,
 +     },
     }],
@@ -135,6 +138,12 @@ module.exports = {
   // ...other config
 ```
 
+方式三：如果项目不使用 Less，可在 CSS 文件中，全量引入 `antd.dark.css`：
+
+```css
+@import '~antd/dist/antd.dark.css';
+```
+
 ## 没有生效？
 
 注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。

docs/spec/download.en-US.md

@@ -7,7 +7,7 @@ title: Resources
 Please find below some of the design resources and tools about Ant Design that we consider valuable. More of this is still being collected.
 
 <div class="resource-cards">
-  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.3.12.0.sketch" class="resource-card">
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.4.0.Beta.sketch" class="resource-card">
     <div class="resource-card-icon">
       <img width="65" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XsDPQrwQZwEAAAAAAAAAAABkARQnAQ">
     </div>

docs/spec/download.zh-CN.md

@@ -9,7 +9,7 @@ title: 设计资源
 - 新版本 Sketch Symbols 组件反馈地址：[🦜 反馈地址](https://www.yuque.com/kitchen/topics/51)
 
 <div class="resource-cards">
-  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.3.12.0.sketch" class="resource-card">
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.4.0.Beta.sketch" class="resource-card">
     <div class="resource-card-icon">
       <img width="65" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XsDPQrwQZwEAAAAAAAAAAABkARQnAQ">
     </div>

site/theme/static/common.less

@@ -176,9 +176,6 @@ a {
 }
 
 #_hj_feedback_container {
-  > div {
-    left: 0;
-  }
   .path1::before {
     color: @primary-color !important;
   }
@@ -206,9 +203,4 @@ a {
     box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
       0 9px 28px 8px rgba(0, 0, 0, 0.05);
   }
-
-  .ant-row-rtl & {
-    right: auto;
-    left: 32px;
-  }
 }

site/theme/static/index.less

@@ -24,3 +24,4 @@
 @import './nprogress';
 @import './contributors';
 @import './dark.less';
+@import './rtl.less';

site/theme/static/rtl.less

@@ -0,0 +1,11 @@
+[data-direction='rtl'] {
+  #_hj_feedback_container {
+    > div {
+      left: 32px;
+    }
+  }
+  .fixed-widgets {
+    right: auto;
+    left: 32px;
+  }
+}

site/theme/template/Layout/index.jsx

@@ -208,7 +208,7 @@ export default class Layout extends React.Component {
     return (
       <HelmetProvider context={helmetContext}>
         <Helmet encodeSpecialCharacters={false}>
-          <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} />
+          <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} data-direction={direction} />
           <title>{title}</title>
           <link
             rel="apple-touch-icon-precomposed"