From cb528da8ed2d2e469bbb4349301d6b286b631fdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BF=A1=E9=91=AB-King?= <45808948@qq.com> Date: Fri, 3 Jan 2020 19:00:01 +0800 Subject: [PATCH] fix: dark theme in 4.0 (#20642) * fix: rtl direction bug * :memo: dark theme usage docs * fix: sketch download * fix: theme dark * :memo: empty image * fix: dark form with mixture components like picker, input * :memo: update sketch release download * fix: remove inline-menu sub shadow --- components/button/index.en-US.md | 2 +- components/button/index.zh-CN.md | 2 +- components/config-provider/demo/direction.md | 6 +++++ components/drawer/style/drawer.less | 8 ++++++ components/empty/index.en-US.md | 27 +++++++++++++++++-- components/empty/index.zh-CN.md | 4 +-- components/form/style/components.less | 3 +++ components/form/style/index.less | 8 ++++-- components/input-number/style/index.less | 5 ++++ components/input/style/mixin.less | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/menu/demo/switch-mode.md | 2 +- components/menu/style/dark.less | 1 - components/style/themes/dark.less | 5 +--- components/style/themes/default.less | 1 + components/table/index.zh-CN.md | 2 +- components/transfer/index.zh-CN.md | 2 +- docs/react/customize-theme.en-US.md | 15 ++++++++--- docs/react/customize-theme.zh-CN.md | 15 ++++++++--- docs/spec/download.en-US.md | 2 +- docs/spec/download.zh-CN.md | 2 +- site/theme/static/common.less | 8 ------ site/theme/static/index.less | 1 + site/theme/static/rtl.less | 11 ++++++++ site/theme/template/Layout/index.jsx | 2 +- 25 files changed, 103 insertions(+), 35 deletions(-) create mode 100644 site/theme/static/rtl.less diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 24e2ad64e9..13bb82acb0 100644 --- a/components/button/index.en-US.md +++ b/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); } diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 1f3635f5be..33bbde76a8 100644 --- a/components/button/index.zh-CN.md +++ b/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); } diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md index 50a4070780..fb4f66c1fd 100644 --- a/components/config-provider/demo/direction.md +++ b/components/config-provider/demo/direction.md @@ -611,3 +611,9 @@ ReactDOM.render(, mountNode); margin-left: 20px; } ``` + + diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 680e38f352..c6b09ffe0b 100644 --- a/components/drawer/style/drawer.less +++ b/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 { diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md index e72e373406..0fcaebd62a 100644 --- a/components/empty/index.en-US.md +++ b/components/empty/index.en-US.md @@ -30,8 +30,31 @@ Empty state placeholder. - Empty.PRESENTED_IMAGE_SIMPLE - +
- Empty.PRESENTED_IMAGE_DEFAULT - +
+ + diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index d4cfb197bf..eebbb7b92d 100644 --- a/components/empty/index.zh-CN.md +++ b/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"); } diff --git a/components/form/style/components.less b/components/form/style/components.less index 284883ced8..d388b0151f 100644 --- a/components/form/style/components.less +++ b/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'] { diff --git a/components/form/style/index.less b/components/form/style/index.less index d526108c1e..0a182f0d00 100644 --- a/components/form/style/index.less +++ b/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; diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index e071f852e4..f9fe8b3b86 100644 --- a/components/input-number/style/index.less +++ b/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 { diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 5f94d63d39..a9e995beea 100644 --- a/components/input/style/mixin.less +++ b/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%); diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap index d274c9d49c..7661dba0c0 100644 --- a/components/menu/__tests__/__snapshots__/demo.test.js.snap +++ b/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" /> - Change Theme + Change Style