diff --git a/components/button/style/index.less b/components/button/style/index.less index 28237ee43f..32fccf33b5 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -170,9 +170,9 @@ } &-background-ghost { - color: @component-background; - background: transparent !important; - border-color: @component-background; + color: @btn-default-ghost-color; + background: @btn-default-ghost-bg !important; + border-color: @btn-default-ghost-border; } &-background-ghost&-primary { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index e3b0b6df83..90531b968b 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -32,16 +32,30 @@ &:hover, &:focus { - .button-color( - @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` - ); + & when (@theme = dark) { + .button-color( + @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` + ); + } + & when not (@theme = dark) { + .button-color( + @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` + ); + } } &:active, &.active { - .button-color( - @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` - ); + & when (@theme = dark) { + .button-color( + @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` + ); + } + & when not (@theme = dark) { + .button-color( + @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` + ); + } } .button-disabled(); @@ -52,17 +66,27 @@ &:hover, &:focus { - .button-color( - ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5) - ` - ); + & when (@theme = dark) { + .button-color(@primary-5; @background; @primary-5); + } + & when not (@theme = dark) { + .button-color( + ~`colorPalette('@{btn-primary-bg}', 5) `; @background; + ~`colorPalette('@{btn-primary-bg}', 5) ` + ); + } } &:active, &.active { - .button-color( - ~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7) - ` - ); + & when (@theme = dark) { + .button-color(@primary-7; @background; @primary-7); + } + & when not (@theme = dark) { + .button-color( + ~`colorPalette('@{btn-primary-bg}', 7) `; @background; + ~`colorPalette('@{btn-primary-bg}', 7) ` + ); + } } .button-disabled(); } @@ -72,19 +96,47 @@ &:hover, &:focus { & when (@border = transparent) { - .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent); + & when (@theme = dark) { + .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent); + } + & when not (@theme = dark) { + .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent); + } } & when not(@border = transparent) { - .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); + & when (@theme = dark) { + .button-color( + ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) ` + ); + } + & when not (@theme = dark) { + .button-color( + ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) ` + ); + } } } &:active, &.active { & when (@border = transparent) { - .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent); + & when (@theme = dark) { + .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent); + } + & when not (@theme = dark) { + .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent); + } } & when not(@border = transparent) { - .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); + & when (@theme = dark) { + .button-color( + ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) ` + ); + } + & when not (@theme = dark) { + .button-color( + ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) ` + ); + } } } .button-disabled(); diff --git a/components/card/style/index.less b/components/card/style/index.less index c32343a3eb..674c37f421 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -19,6 +19,8 @@ &-hoverable { cursor: pointer; + transition: box-shadow 0.3s border-color 0.3s; + &:hover { border-color: @card-hover-border; box-shadow: @card-shadow; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 95eddf8dce..6a5c452399 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -28,7 +28,7 @@ position: relative; display: inline-block; - background-color: @component-background; + background-color: @cascader-bg; border-radius: @border-radius-base; outline: 0; cursor: pointer; @@ -127,7 +127,7 @@ z-index: @zindex-dropdown; font-size: @cascader-dropdown-font-size; white-space: nowrap; - background: @component-background; + background: @cascader-menu-bg; border-radius: @border-radius-base; box-shadow: @box-shadow-base; @@ -168,7 +168,7 @@ overflow: auto; vertical-align: top; list-style: none; - border-right: @border-width-base @border-style-base @border-color-split; + border-right: @border-width-base @border-style-base @cascader-menu-border-color-split; -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857 &:first-child { @@ -203,7 +203,7 @@ &, &:hover { font-weight: @select-item-selected-font-weight; - background-color: @background-color-light; + background-color: @cascader-item-selected-bg; } } &-expand { diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 8d48082a72..d4b91c756c 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -47,7 +47,7 @@ display: block; width: @checkbox-size; height: @checkbox-size; - background-color: @checkbox-check-color; + background-color: @checkbox-check-bg; border: @checkbox-border-width @border-style-base @border-color-base; border-radius: @border-radius-sm; // Fix IE checked style diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 6af4c81b18..411597c4b9 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -5,6 +5,7 @@ .@{comment-prefix-cls} { position: relative; + background-color: @comment-bg; &-inner { display: flex; diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 04e1149789..fc287a89fb 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -153,6 +153,9 @@ background-color: @component-background; background-clip: padding-box; border: @border-width-base @border-style-base @border-color-inverse; + & when (@theme = dark) { + border-color: @black; + } border-radius: @border-radius-base; outline: none; box-shadow: @box-shadow-base; diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 0a7b6f4dce..1d7e593735 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -81,7 +81,7 @@ z-index: 2; color: @disabled-color; font-size: @font-size-base; - background: @input-bg; + background: @component-background; cursor: pointer; opacity: 0; pointer-events: none; diff --git a/components/divider/style/index.less b/components/divider/style/index.less index def841f5db..49c5a48c9a 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -62,33 +62,33 @@ &-horizontal&-with-text-left { &::before { top: 50%; - width: 5%; + width: @divider-orientation-margin; } &::after { top: 50%; - width: 95%; + width: 100% - @divider-orientation-margin; } } &-horizontal&-with-text-right { &::before { top: 50%; - width: 95%; + width: 100% - @divider-orientation-margin; } &::after { top: 50%; - width: 5%; + width: @divider-orientation-margin; } } &-inner-text { display: inline-block; - padding: 0 24px; + padding: 0 @divider-text-padding; } &-dashed { background: none; - border-color: @border-color-split; + border-color: @divider-color; border-style: dashed; border-width: 1px 0 0; } diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 20eac54f36..f28ad981b2 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -141,7 +141,7 @@ position: relative; z-index: 1; overflow: auto; - background-color: @component-background; + background-color: @drawer-bg; background-clip: padding-box; border: 0; } @@ -181,14 +181,14 @@ position: relative; padding: @drawer-header-padding; color: @text-color; - background: @component-background; + background: @drawer-bg; border-bottom: @border-width-base @border-style-base @border-color-split; border-radius: @border-radius-base @border-radius-base 0 0; } &-header-no-title { color: @text-color; - background: @component-background; + background: @drawer-bg; } &-body { diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 0caf3e9cd3..835adb3219 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -14,9 +14,9 @@ &::before { position: absolute; - top: -7px; + top: -@popover-distance + @popover-arrow-width; right: 0; - bottom: -7px; + bottom: -@popover-distance + @popover-arrow-width; left: -7px; z-index: -9999; opacity: 0.0001; @@ -52,7 +52,7 @@ padding: @dropdown-edge-child-vertical-padding 0; text-align: left; list-style-type: none; - background-color: @component-background; + background-color: @dropdown-menu-bg; background-clip: padding-box; border-radius: @border-radius-base; outline: none; @@ -111,6 +111,9 @@ padding: @dropdown-vertical-padding @control-padding-horizontal; color: @text-color; transition: all 0.3s; + &:hover { + color: @text-color; + } } &:first-child { @@ -192,7 +195,7 @@ &, .@{dropdown-prefix-cls}-menu-submenu-arrow-icon { color: @disabled-color; - background-color: @component-background; + background-color: @dropdown-menu-submenu-disabled-bg; cursor: not-allowed; } } diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx index 0f2f23b602..86c9bf9ff6 100644 --- a/components/empty/simple.tsx +++ b/components/empty/simple.tsx @@ -3,7 +3,7 @@ import { defaultConfigProvider } from '../config-provider'; const Simple = () => { const { getPrefixCls } = inject('configProvider', defaultConfigProvider); - const prefixCls = getPrefixCls('empty-img-default'); + const prefixCls = getPrefixCls('empty-img-simple'); return ( diff --git a/components/input/style/index.less b/components/input/style/index.less index 0cf0ed2020..9430990202 100644 --- a/components/input/style/index.less +++ b/components/input/style/index.less @@ -33,7 +33,7 @@ transition: all 0.3s; &:hover { - color: #333; + color: @input-icon-hover-color; } } diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index 62217f6265..384f14af84 100644 --- a/components/input/style/search-input.less +++ b/components/input/style/search-input.less @@ -11,7 +11,7 @@ cursor: pointer; transition: all 0.3s; &:hover { - color: fade(@black, 80%); + color: @input-icon-hover-color; } } diff --git a/components/list/__tests__/__snapshots__/empty.test.js.snap b/components/list/__tests__/__snapshots__/empty.test.js.snap index 8c546d8770..f113aee45b 100644 --- a/components/list/__tests__/__snapshots__/empty.test.js.snap +++ b/components/list/__tests__/__snapshots__/empty.test.js.snap @@ -9,12 +9,12 @@ exports[`List renders empty list 1`] = `
-
+
- - + + - +
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap index 1107dbca8a..c3f2195192 100644 --- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap +++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap @@ -623,12 +623,12 @@ exports[`Locale Provider should display the text as ar 1`] = `
-
+
- - + + - +
@@ -648,12 +648,12 @@ exports[`Locale Provider should display the text as ar 1`] = `
-
+
- - + + - +
@@ -1092,12 +1092,12 @@ exports[`Locale Provider should display the text as ar 1`] = `
-
+
- - + + - +
@@ -1165,12 +1165,12 @@ exports[`Locale Provider should display the text as bg 1`] = `
-
+
- - + + - +
@@ -1190,12 +1190,12 @@ exports[`Locale Provider should display the text as bg 1`] = `
-
+
- - + + - +
@@ -1634,12 +1634,12 @@ exports[`Locale Provider should display the text as bg 1`] = `
-
+
- - + + - +
@@ -1707,12 +1707,12 @@ exports[`Locale Provider should display the text as ca 1`] = `
-
+
- - + + - +
@@ -1732,12 +1732,12 @@ exports[`Locale Provider should display the text as ca 1`] = `
-
+
- - + + - +
@@ -2176,12 +2176,12 @@ exports[`Locale Provider should display the text as ca 1`] = `
-
+
- - + + - +
@@ -2249,12 +2249,12 @@ exports[`Locale Provider should display the text as cs 1`] = `
-
+
- - + + - +
@@ -2274,12 +2274,12 @@ exports[`Locale Provider should display the text as cs 1`] = `
-
+
- - + + - +
@@ -2718,12 +2718,12 @@ exports[`Locale Provider should display the text as cs 1`] = `
-
+
- - + + - +
@@ -2791,12 +2791,12 @@ exports[`Locale Provider should display the text as da 1`] = `
-
+
- - + + - +
@@ -2816,12 +2816,12 @@ exports[`Locale Provider should display the text as da 1`] = `
-
+
- - + + - +
@@ -3260,12 +3260,12 @@ exports[`Locale Provider should display the text as da 1`] = `
-
+
- - + + - +
@@ -3333,12 +3333,12 @@ exports[`Locale Provider should display the text as de 1`] = `
-
+
- - + + - +
@@ -3358,12 +3358,12 @@ exports[`Locale Provider should display the text as de 1`] = `
-
+
- - + + - +
@@ -3802,12 +3802,12 @@ exports[`Locale Provider should display the text as de 1`] = `
-
+
- - + + - +
@@ -3875,12 +3875,12 @@ exports[`Locale Provider should display the text as el 1`] = `
-
+
- - + + - +
@@ -3900,12 +3900,12 @@ exports[`Locale Provider should display the text as el 1`] = `
-
+
- - + + - +
@@ -4344,12 +4344,12 @@ exports[`Locale Provider should display the text as el 1`] = `
-
+
- - + + - +
@@ -4417,12 +4417,12 @@ exports[`Locale Provider should display the text as en 1`] = `
-
+
- - + + - +
@@ -4442,12 +4442,12 @@ exports[`Locale Provider should display the text as en 1`] = `
-
+
- - + + - +
@@ -4886,12 +4886,12 @@ exports[`Locale Provider should display the text as en 1`] = `
-
+
- - + + - +
@@ -4959,12 +4959,12 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
-
+
- - + + - +
@@ -4984,12 +4984,12 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
-
+
- - + + - +
@@ -5428,12 +5428,12 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
-
+
- - + + - +
@@ -5501,12 +5501,12 @@ exports[`Locale Provider should display the text as es 1`] = `
-
+
- - + + - +
@@ -5526,12 +5526,12 @@ exports[`Locale Provider should display the text as es 1`] = `
-
+
- - + + - +
@@ -5970,12 +5970,12 @@ exports[`Locale Provider should display the text as es 1`] = `
-
+
- - + + - +
@@ -6043,12 +6043,12 @@ exports[`Locale Provider should display the text as et 1`] = `
-
+
- - + + - +
@@ -6068,12 +6068,12 @@ exports[`Locale Provider should display the text as et 1`] = `
-
+
- - + + - +
@@ -6512,12 +6512,12 @@ exports[`Locale Provider should display the text as et 1`] = `
-
+
- - + + - +
@@ -6585,12 +6585,12 @@ exports[`Locale Provider should display the text as fa 1`] = `
-
+
- - + + - +
@@ -6610,12 +6610,12 @@ exports[`Locale Provider should display the text as fa 1`] = `
-
+
- - + + - +
@@ -7054,12 +7054,12 @@ exports[`Locale Provider should display the text as fa 1`] = `
-
+
- - + + - +
@@ -7127,12 +7127,12 @@ exports[`Locale Provider should display the text as fi 1`] = `
-
+
- - + + - +
@@ -7152,12 +7152,12 @@ exports[`Locale Provider should display the text as fi 1`] = `
-
+
- - + + - +
@@ -7596,12 +7596,12 @@ exports[`Locale Provider should display the text as fi 1`] = `
-
+
- - + + - +
@@ -7669,12 +7669,12 @@ exports[`Locale Provider should display the text as fr 1`] = `
-
+
- - + + - +
@@ -7694,12 +7694,12 @@ exports[`Locale Provider should display the text as fr 1`] = `
-
+
- - + + - +
@@ -8138,12 +8138,12 @@ exports[`Locale Provider should display the text as fr 1`] = `
-
+
- - + + - +
@@ -8211,12 +8211,12 @@ exports[`Locale Provider should display the text as fr 2`] = `
-
+
- - + + - +
@@ -8236,12 +8236,12 @@ exports[`Locale Provider should display the text as fr 2`] = `
-
+
- - + + - +
@@ -8680,12 +8680,12 @@ exports[`Locale Provider should display the text as fr 2`] = `
-
+
- - + + - +
@@ -8753,12 +8753,12 @@ exports[`Locale Provider should display the text as he 1`] = `
-
+
- - + + - +
@@ -8778,12 +8778,12 @@ exports[`Locale Provider should display the text as he 1`] = `
-
+
- - + + - +
@@ -9222,12 +9222,12 @@ exports[`Locale Provider should display the text as he 1`] = `
-
+
- - + + - +
@@ -9295,12 +9295,12 @@ exports[`Locale Provider should display the text as hi 1`] = `
-
+
- - + + - +
@@ -9320,12 +9320,12 @@ exports[`Locale Provider should display the text as hi 1`] = `
-
+
- - + + - +
@@ -9764,12 +9764,12 @@ exports[`Locale Provider should display the text as hi 1`] = `
-
+
- - + + - +
@@ -9837,12 +9837,12 @@ exports[`Locale Provider should display the text as hr 1`] = `
-
+
- - + + - +
@@ -9862,12 +9862,12 @@ exports[`Locale Provider should display the text as hr 1`] = `
-
+
- - + + - +
@@ -10306,12 +10306,12 @@ exports[`Locale Provider should display the text as hr 1`] = `
-
+
- - + + - +
@@ -10379,12 +10379,12 @@ exports[`Locale Provider should display the text as hu 1`] = `
-
+
- - + + - +
@@ -10404,12 +10404,12 @@ exports[`Locale Provider should display the text as hu 1`] = `
-
+
- - + + - +
@@ -10848,12 +10848,12 @@ exports[`Locale Provider should display the text as hu 1`] = `
-
+
- - + + - +
@@ -10921,12 +10921,12 @@ exports[`Locale Provider should display the text as hy 1`] = `
-
+
- - + + - +
@@ -10946,12 +10946,12 @@ exports[`Locale Provider should display the text as hy 1`] = `
-
+
- - + + - +
@@ -11390,12 +11390,12 @@ exports[`Locale Provider should display the text as hy 1`] = `
-
+
- - + + - +
@@ -11463,12 +11463,12 @@ exports[`Locale Provider should display the text as id 1`] = `
-
+
- - + + - +
@@ -11488,12 +11488,12 @@ exports[`Locale Provider should display the text as id 1`] = `
-
+
- - + + - +
@@ -11932,12 +11932,12 @@ exports[`Locale Provider should display the text as id 1`] = `
-
+
- - + + - +
@@ -12005,12 +12005,12 @@ exports[`Locale Provider should display the text as is 1`] = `
-
+
- - + + - +
@@ -12030,12 +12030,12 @@ exports[`Locale Provider should display the text as is 1`] = `
-
+
- - + + - +
@@ -12474,12 +12474,12 @@ exports[`Locale Provider should display the text as is 1`] = `
-
+
- - + + - +
@@ -12547,12 +12547,12 @@ exports[`Locale Provider should display the text as it 1`] = `
-
+
- - + + - +
@@ -12572,12 +12572,12 @@ exports[`Locale Provider should display the text as it 1`] = `
-
+
- - + + - +
@@ -13016,12 +13016,12 @@ exports[`Locale Provider should display the text as it 1`] = `
-
+
- - + + - +
@@ -13089,12 +13089,12 @@ exports[`Locale Provider should display the text as ja 1`] = `
-
+
- - + + - +
@@ -13114,12 +13114,12 @@ exports[`Locale Provider should display the text as ja 1`] = `
-
+
- - + + - +
@@ -13558,12 +13558,12 @@ exports[`Locale Provider should display the text as ja 1`] = `
-
+
- - + + - +
@@ -13631,12 +13631,12 @@ exports[`Locale Provider should display the text as kn 1`] = `
-
+
- - + + - +
@@ -13656,12 +13656,12 @@ exports[`Locale Provider should display the text as kn 1`] = `
-
+
- - + + - +
@@ -14100,12 +14100,12 @@ exports[`Locale Provider should display the text as kn 1`] = `
-
+
- - + + - +
@@ -14173,12 +14173,12 @@ exports[`Locale Provider should display the text as ko 1`] = `
-
+
- - + + - +
@@ -14198,12 +14198,12 @@ exports[`Locale Provider should display the text as ko 1`] = `
-
+
- - + + - +
@@ -14642,12 +14642,12 @@ exports[`Locale Provider should display the text as ko 1`] = `
-
+
- - + + - +
@@ -14715,12 +14715,12 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
-
+
- - + + - +
@@ -14740,12 +14740,12 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
-
+
- - + + - +
@@ -15184,12 +15184,12 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
-
+
- - + + - +
@@ -15257,12 +15257,12 @@ exports[`Locale Provider should display the text as lv 1`] = `
-
+
- - + + - +
@@ -15282,12 +15282,12 @@ exports[`Locale Provider should display the text as lv 1`] = `
-
+
- - + + - +
@@ -15726,12 +15726,12 @@ exports[`Locale Provider should display the text as lv 1`] = `
-
+
- - + + - +
@@ -15799,12 +15799,12 @@ exports[`Locale Provider should display the text as mk 1`] = `
-
+
- - + + - +
@@ -15824,12 +15824,12 @@ exports[`Locale Provider should display the text as mk 1`] = `
-
+
- - + + - +
@@ -16268,12 +16268,12 @@ exports[`Locale Provider should display the text as mk 1`] = `
-
+
- - + + - +
@@ -16341,12 +16341,12 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
-
+
- - + + - +
@@ -16366,12 +16366,12 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
-
+
- - + + - +
@@ -16810,12 +16810,12 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
-
+
- - + + - +
@@ -16883,12 +16883,12 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
-
+
- - + + - +
@@ -16908,12 +16908,12 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
-
+
- - + + - +
@@ -17352,12 +17352,12 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
-
+
- - + + - +
@@ -17425,12 +17425,12 @@ exports[`Locale Provider should display the text as nb 1`] = `
-
+
- - + + - +
@@ -17450,12 +17450,12 @@ exports[`Locale Provider should display the text as nb 1`] = `
-
+
- - + + - +
@@ -17894,12 +17894,12 @@ exports[`Locale Provider should display the text as nb 1`] = `
-
+
- - + + - +
@@ -17967,12 +17967,12 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
-
+
- - + + - +
@@ -17992,12 +17992,12 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
-
+
- - + + - +
@@ -18436,12 +18436,12 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
-
+
- - + + - +
@@ -18509,12 +18509,12 @@ exports[`Locale Provider should display the text as nl 1`] = `
-
+
- - + + - +
@@ -18534,12 +18534,12 @@ exports[`Locale Provider should display the text as nl 1`] = `
-
+
- - + + - +
@@ -18978,12 +18978,12 @@ exports[`Locale Provider should display the text as nl 1`] = `
-
+
- - + + - +
@@ -19051,12 +19051,12 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
-
+
- - + + - +
@@ -19076,12 +19076,12 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
-
+
- - + + - +
@@ -19520,12 +19520,12 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
-
+
- - + + - +
@@ -19593,12 +19593,12 @@ exports[`Locale Provider should display the text as pl 1`] = `
-
+
- - + + - +
@@ -19618,12 +19618,12 @@ exports[`Locale Provider should display the text as pl 1`] = `
-
+
- - + + - +
@@ -20062,12 +20062,12 @@ exports[`Locale Provider should display the text as pl 1`] = `
-
+
- - + + - +
@@ -20135,12 +20135,12 @@ exports[`Locale Provider should display the text as pt 1`] = `
-
+
- - + + - +
@@ -20160,12 +20160,12 @@ exports[`Locale Provider should display the text as pt 1`] = `
-
+
- - + + - +
@@ -20604,12 +20604,12 @@ exports[`Locale Provider should display the text as pt 1`] = `
-
+
- - + + - +
@@ -20677,12 +20677,12 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
-
+
- - + + - +
@@ -20702,12 +20702,12 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
-
+
- - + + - +
@@ -21146,12 +21146,12 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
-
+
- - + + - +
@@ -21219,12 +21219,12 @@ exports[`Locale Provider should display the text as ro 1`] = `
-
+
- - + + - +
@@ -21244,12 +21244,12 @@ exports[`Locale Provider should display the text as ro 1`] = `
-
+
- - + + - +
@@ -21688,12 +21688,12 @@ exports[`Locale Provider should display the text as ro 1`] = `
-
+
- - + + - +
@@ -21761,12 +21761,12 @@ exports[`Locale Provider should display the text as ru 1`] = `
-
+
- - + + - +
@@ -21786,12 +21786,12 @@ exports[`Locale Provider should display the text as ru 1`] = `
-
+
- - + + - +
@@ -22230,12 +22230,12 @@ exports[`Locale Provider should display the text as ru 1`] = `
-
+
- - + + - +
@@ -22303,12 +22303,12 @@ exports[`Locale Provider should display the text as sk 1`] = `
-
+
- - + + - +
@@ -22328,12 +22328,12 @@ exports[`Locale Provider should display the text as sk 1`] = `
-
+
- - + + - +
@@ -22772,12 +22772,12 @@ exports[`Locale Provider should display the text as sk 1`] = `
-
+
- - + + - +
@@ -22845,12 +22845,12 @@ exports[`Locale Provider should display the text as sl 1`] = `
-
+
- - + + - +
@@ -22870,12 +22870,12 @@ exports[`Locale Provider should display the text as sl 1`] = `
-
+
- - + + - +
@@ -23314,12 +23314,12 @@ exports[`Locale Provider should display the text as sl 1`] = `
-
+
- - + + - +
@@ -23387,12 +23387,12 @@ exports[`Locale Provider should display the text as sr 1`] = `
-
+
- - + + - +
@@ -23412,12 +23412,12 @@ exports[`Locale Provider should display the text as sr 1`] = `
-
+
- - + + - +
@@ -23856,12 +23856,12 @@ exports[`Locale Provider should display the text as sr 1`] = `
-
+
- - + + - +
@@ -23929,12 +23929,12 @@ exports[`Locale Provider should display the text as sv 1`] = `
-
+
- - + + - +
@@ -23954,12 +23954,12 @@ exports[`Locale Provider should display the text as sv 1`] = `
-
+
- - + + - +
@@ -24398,12 +24398,12 @@ exports[`Locale Provider should display the text as sv 1`] = `
-
+
- - + + - +
@@ -24471,12 +24471,12 @@ exports[`Locale Provider should display the text as ta 1`] = `
-
+
- - + + - +
@@ -24496,12 +24496,12 @@ exports[`Locale Provider should display the text as ta 1`] = `
-
+
- - + + - +
@@ -24940,12 +24940,12 @@ exports[`Locale Provider should display the text as ta 1`] = `
-
+
- - + + - +
@@ -25013,12 +25013,12 @@ exports[`Locale Provider should display the text as th 1`] = `
-
+
- - + + - +
@@ -25038,12 +25038,12 @@ exports[`Locale Provider should display the text as th 1`] = `
-
+
- - + + - +
@@ -25482,12 +25482,12 @@ exports[`Locale Provider should display the text as th 1`] = `
-
+
- - + + - +
@@ -25555,12 +25555,12 @@ exports[`Locale Provider should display the text as tr 1`] = `
-
+
- - + + - +
@@ -25580,12 +25580,12 @@ exports[`Locale Provider should display the text as tr 1`] = `
-
+
- - + + - +
@@ -26024,12 +26024,12 @@ exports[`Locale Provider should display the text as tr 1`] = `
-
+
- - + + - +
@@ -26097,12 +26097,12 @@ exports[`Locale Provider should display the text as uk 1`] = `
-
+
- - + + - +
@@ -26122,12 +26122,12 @@ exports[`Locale Provider should display the text as uk 1`] = `
-
+
- - + + - +
@@ -26566,12 +26566,12 @@ exports[`Locale Provider should display the text as uk 1`] = `
-
+
- - + + - +
@@ -26639,12 +26639,12 @@ exports[`Locale Provider should display the text as vi 1`] = `
-
+
- - + + - +
@@ -26664,12 +26664,12 @@ exports[`Locale Provider should display the text as vi 1`] = `
-
+
- - + + - +
@@ -27108,12 +27108,12 @@ exports[`Locale Provider should display the text as vi 1`] = `
-
+
- - + + - +
@@ -27181,12 +27181,12 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
-
+
- - + + - +
@@ -27206,12 +27206,12 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
-
+
- - + + - +
@@ -27650,12 +27650,12 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
-
+
- - + + - +
@@ -27723,12 +27723,12 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
-
+
- - + + - +
@@ -27748,12 +27748,12 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
-
+
- - + + - +
@@ -28192,12 +28192,12 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
-
+
- - + + - +
diff --git a/components/mentions/style/index.less b/components/mentions/style/index.less index 2e94912eb7..0432803fbf 100644 --- a/components/mentions/style/index.less +++ b/components/mentions/style/index.less @@ -60,6 +60,9 @@ border: none; outline: none; resize: none; + & when (@theme = dark) { + background-color: transparent; + } .placeholder(); &:read-only { @@ -95,7 +98,7 @@ box-sizing: border-box; font-size: @font-size-base; font-variant: initial; - background-color: @component-background; + background-color: @mentions-dropdown-bg; border-radius: @border-radius-base; outline: none; box-shadow: @box-shadow-base; @@ -144,7 +147,7 @@ &:hover { color: @disabled-color; - background-color: @component-background; + background-color: @mentions-dropdown-menu-item-hover-bg; cursor: not-allowed; } } diff --git a/components/message/style/index.less b/components/message/style/index.less index 8460ed2a66..cc9ccbad91 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -24,7 +24,7 @@ &-notice-content { display: inline-block; padding: @message-notice-content-padding; - background: @component-background; + background: @message-notice-content-bg; border-radius: @border-radius-base; box-shadow: @shadow-2; pointer-events: all; diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 0c0c5193ce..8e32bc6114 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -36,7 +36,7 @@ &-content { position: relative; - background-color: @component-background; + background-color: @modal-content-bg; background-clip: padding-box; border: 0; border-radius: @border-radius-base; diff --git a/components/notification/style/index.less b/components/notification/style/index.less index e7743e0e40..04d7f24a4d 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -39,7 +39,7 @@ padding: @notification-padding; overflow: hidden; line-height: 1.5; - background: @component-background; + background: @notification-bg; border-radius: @border-radius-base; box-shadow: @shadow-2; diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index a2db88a3d7..63a72a6c27 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -41,7 +41,7 @@ text-align: center; vertical-align: middle; list-style: none; - background-color: @component-background; + background-color: @pagination-item-bg; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; outline: 0; @@ -180,7 +180,7 @@ height: 100%; font-size: 12px; text-align: center; - background-color: @component-background; + background-color: @pagination-item-link-bg; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; outline: none; @@ -264,7 +264,7 @@ margin-right: 8px; padding: 0 6px; text-align: center; - background-color: @component-background; + background-color: @pagination-item-input-bg; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; outline: none; @@ -350,10 +350,10 @@ } &-active { - background: darken(@disabled-bg, 10%); + background: @pagination-item-disabled-bg-active; border-color: transparent; a { - color: #fff; + color: @pagination-item-disabled-color-active; } } } diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap index 3cb72f9b17..4fc06c8d72 100644 --- a/components/progress/__tests__/__snapshots__/index.test.js.snap +++ b/components/progress/__tests__/__snapshots__/index.test.js.snap @@ -6,10 +6,10 @@ exports[`Progress render format 1`] = ` + a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"> + a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"> 50%
`; diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 0ba670a514..118732db82 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -18,7 +18,8 @@ export default defineComponent({ type: 'line', percent: 0, showInfo: true, - trailColor: '#f3f3f3', + // null for different theme definition + trailColor: null, size: 'default', gapDegree: 0, strokeLinecap: 'round', diff --git a/components/radio/style/index.less b/components/radio/style/index.less index bfd5d453df..49dfe4ef42 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -69,8 +69,8 @@ @radio-dot-size: @radio-size - 8px; position: absolute; - top: ((@radio-size - @radio-dot-size) / 2) - 1px; - left: ((@radio-size - @radio-dot-size) / 2) - 1px; + top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width; + left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width; display: table; width: @radio-dot-size; height: @radio-dot-size; @@ -93,7 +93,7 @@ background-color: @radio-button-bg; border-color: @border-color-base; border-style: solid; - border-width: 1px; + border-width: @radio-border-width; border-radius: 100px; transition: all @radio-duration; } @@ -128,7 +128,7 @@ border-color: @border-color-base !important; cursor: not-allowed; &::after { - background-color: fade(@black, 20%); + background-color: @radio-dot-disabled-color; } } @@ -265,16 +265,16 @@ span.@{radio-prefix-cls} + * { } .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) { - color: @component-background; + color: @radio-solid-checked-color; background: @radio-dot-color; border-color: @radio-dot-color; &:hover { - color: @component-background; + color: @radio-solid-checked-color; background: @radio-button-hover-color; border-color: @radio-button-hover-color; } &:active { - color: @component-background; + color: @radio-solid-checked-color; background: @radio-button-active-color; border-color: @radio-button-active-color; } @@ -301,8 +301,8 @@ span.@{radio-prefix-cls} + * { } &-disabled&-checked { - color: @text-color-inverse; - background-color: tint(@black, 90%); + color: @radio-disabled-button-checked-color; + background-color: @radio-disabled-button-checked-bg; border-color: @border-color-base; box-shadow: none; } diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 99df0dcfb2..33ca7baf57 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -19,8 +19,6 @@ @error-title-color: @error-color; @error-description-color: @error-color; @error-tail-color: @wait-tail-color; -@steps-background: @component-background; -@steps-nav-arrow-color: fade(@black, 25%); @steps-nav-active-color: @primary-color; @steps-icon-size: 32px; diff --git a/components/style/color/colors.less b/components/style/color/colors.less index 86c5697f64..51540bf459 100644 --- a/components/style/color/colors.less +++ b/components/style/color/colors.less @@ -1,145 +1,158 @@ @import 'colorPalette'; // color palettes +@blue-base: #1890ff; @blue-1: color(~`colorPalette('@{blue-6}', 1) `); @blue-2: color(~`colorPalette('@{blue-6}', 2) `); @blue-3: color(~`colorPalette('@{blue-6}', 3) `); @blue-4: color(~`colorPalette('@{blue-6}', 4) `); @blue-5: color(~`colorPalette('@{blue-6}', 5) `); -@blue-6: #1890ff; +@blue-6: @blue-base; @blue-7: color(~`colorPalette('@{blue-6}', 7) `); @blue-8: color(~`colorPalette('@{blue-6}', 8) `); @blue-9: color(~`colorPalette('@{blue-6}', 9) `); @blue-10: color(~`colorPalette('@{blue-6}', 10) `); +@purple-base: #722ed1; @purple-1: color(~`colorPalette('@{purple-6}', 1) `); @purple-2: color(~`colorPalette('@{purple-6}', 2) `); @purple-3: color(~`colorPalette('@{purple-6}', 3) `); @purple-4: color(~`colorPalette('@{purple-6}', 4) `); @purple-5: color(~`colorPalette('@{purple-6}', 5) `); -@purple-6: #722ed1; +@purple-6: @purple-base; @purple-7: color(~`colorPalette('@{purple-6}', 7) `); @purple-8: color(~`colorPalette('@{purple-6}', 8) `); @purple-9: color(~`colorPalette('@{purple-6}', 9) `); @purple-10: color(~`colorPalette('@{purple-6}', 10) `); +@cyan-base: #13c2c2; @cyan-1: color(~`colorPalette('@{cyan-6}', 1) `); @cyan-2: color(~`colorPalette('@{cyan-6}', 2) `); @cyan-3: color(~`colorPalette('@{cyan-6}', 3) `); @cyan-4: color(~`colorPalette('@{cyan-6}', 4) `); @cyan-5: color(~`colorPalette('@{cyan-6}', 5) `); -@cyan-6: #13c2c2; +@cyan-6: @cyan-base; @cyan-7: color(~`colorPalette('@{cyan-6}', 7) `); @cyan-8: color(~`colorPalette('@{cyan-6}', 8) `); @cyan-9: color(~`colorPalette('@{cyan-6}', 9) `); @cyan-10: color(~`colorPalette('@{cyan-6}', 10) `); +@green-base: #52c41a; @green-1: color(~`colorPalette('@{green-6}', 1) `); @green-2: color(~`colorPalette('@{green-6}', 2) `); @green-3: color(~`colorPalette('@{green-6}', 3) `); @green-4: color(~`colorPalette('@{green-6}', 4) `); @green-5: color(~`colorPalette('@{green-6}', 5) `); -@green-6: #52c41a; +@green-6: @green-base; @green-7: color(~`colorPalette('@{green-6}', 7) `); @green-8: color(~`colorPalette('@{green-6}', 8) `); @green-9: color(~`colorPalette('@{green-6}', 9) `); @green-10: color(~`colorPalette('@{green-6}', 10) `); +@magenta-base: #eb2f96; @magenta-1: color(~`colorPalette('@{magenta-6}', 1) `); @magenta-2: color(~`colorPalette('@{magenta-6}', 2) `); @magenta-3: color(~`colorPalette('@{magenta-6}', 3) `); @magenta-4: color(~`colorPalette('@{magenta-6}', 4) `); @magenta-5: color(~`colorPalette('@{magenta-6}', 5) `); -@magenta-6: #eb2f96; +@magenta-6: @magenta-base; @magenta-7: color(~`colorPalette('@{magenta-6}', 7) `); @magenta-8: color(~`colorPalette('@{magenta-6}', 8) `); @magenta-9: color(~`colorPalette('@{magenta-6}', 9) `); @magenta-10: color(~`colorPalette('@{magenta-6}', 10) `); // alias of magenta +@pink-base: #eb2f96; @pink-1: color(~`colorPalette('@{pink-6}', 1) `); @pink-2: color(~`colorPalette('@{pink-6}', 2) `); @pink-3: color(~`colorPalette('@{pink-6}', 3) `); @pink-4: color(~`colorPalette('@{pink-6}', 4) `); @pink-5: color(~`colorPalette('@{pink-6}', 5) `); -@pink-6: #eb2f96; +@pink-6: @pink-base; @pink-7: color(~`colorPalette('@{pink-6}', 7) `); @pink-8: color(~`colorPalette('@{pink-6}', 8) `); @pink-9: color(~`colorPalette('@{pink-6}', 9) `); @pink-10: color(~`colorPalette('@{pink-6}', 10) `); +@red-base: #f5222d; @red-1: color(~`colorPalette('@{red-6}', 1) `); @red-2: color(~`colorPalette('@{red-6}', 2) `); @red-3: color(~`colorPalette('@{red-6}', 3) `); @red-4: color(~`colorPalette('@{red-6}', 4) `); @red-5: color(~`colorPalette('@{red-6}', 5) `); -@red-6: #f5222d; +@red-6: @red-base; @red-7: color(~`colorPalette('@{red-6}', 7) `); @red-8: color(~`colorPalette('@{red-6}', 8) `); @red-9: color(~`colorPalette('@{red-6}', 9) `); @red-10: color(~`colorPalette('@{red-6}', 10) `); +@orange-base: #fa8c16; @orange-1: color(~`colorPalette('@{orange-6}', 1) `); @orange-2: color(~`colorPalette('@{orange-6}', 2) `); @orange-3: color(~`colorPalette('@{orange-6}', 3) `); @orange-4: color(~`colorPalette('@{orange-6}', 4) `); @orange-5: color(~`colorPalette('@{orange-6}', 5) `); -@orange-6: #fa8c16; +@orange-6: @orange-base; @orange-7: color(~`colorPalette('@{orange-6}', 7) `); @orange-8: color(~`colorPalette('@{orange-6}', 8) `); @orange-9: color(~`colorPalette('@{orange-6}', 9) `); @orange-10: color(~`colorPalette('@{orange-6}', 10) `); +@yellow-base: #fadb14; @yellow-1: color(~`colorPalette('@{yellow-6}', 1) `); @yellow-2: color(~`colorPalette('@{yellow-6}', 2) `); @yellow-3: color(~`colorPalette('@{yellow-6}', 3) `); @yellow-4: color(~`colorPalette('@{yellow-6}', 4) `); @yellow-5: color(~`colorPalette('@{yellow-6}', 5) `); -@yellow-6: #fadb14; +@yellow-6: @yellow-base; @yellow-7: color(~`colorPalette('@{yellow-6}', 7) `); @yellow-8: color(~`colorPalette('@{yellow-6}', 8) `); @yellow-9: color(~`colorPalette('@{yellow-6}', 9) `); @yellow-10: color(~`colorPalette('@{yellow-6}', 10) `); +@volcano-base: #fa541c; @volcano-1: color(~`colorPalette('@{volcano-6}', 1) `); @volcano-2: color(~`colorPalette('@{volcano-6}', 2) `); @volcano-3: color(~`colorPalette('@{volcano-6}', 3) `); @volcano-4: color(~`colorPalette('@{volcano-6}', 4) `); @volcano-5: color(~`colorPalette('@{volcano-6}', 5) `); -@volcano-6: #fa541c; +@volcano-6: @volcano-base; @volcano-7: color(~`colorPalette('@{volcano-6}', 7) `); @volcano-8: color(~`colorPalette('@{volcano-6}', 8) `); @volcano-9: color(~`colorPalette('@{volcano-6}', 9) `); @volcano-10: color(~`colorPalette('@{volcano-6}', 10) `); +@geekblue-base: #2f54eb; @geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `); @geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `); @geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `); @geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `); @geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `); -@geekblue-6: #2f54eb; +@geekblue-6: @geekblue-base; @geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `); @geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `); @geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `); @geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `); +@lime-base: #a0d911; @lime-1: color(~`colorPalette('@{lime-6}', 1) `); @lime-2: color(~`colorPalette('@{lime-6}', 2) `); @lime-3: color(~`colorPalette('@{lime-6}', 3) `); @lime-4: color(~`colorPalette('@{lime-6}', 4) `); @lime-5: color(~`colorPalette('@{lime-6}', 5) `); -@lime-6: #a0d911; +@lime-6: @lime-base; @lime-7: color(~`colorPalette('@{lime-6}', 7) `); @lime-8: color(~`colorPalette('@{lime-6}', 8) `); @lime-9: color(~`colorPalette('@{lime-6}', 9) `); @lime-10: color(~`colorPalette('@{lime-6}', 10) `); +@gold-base: #faad14; @gold-1: color(~`colorPalette('@{gold-6}', 1) `); @gold-2: color(~`colorPalette('@{gold-6}', 2) `); @gold-3: color(~`colorPalette('@{gold-6}', 3) `); @gold-4: color(~`colorPalette('@{gold-6}', 4) `); @gold-5: color(~`colorPalette('@{gold-6}', 5) `); -@gold-6: #faad14; +@gold-6: @gold-base; @gold-7: color(~`colorPalette('@{gold-6}', 7) `); @gold-8: color(~`colorPalette('@{gold-6}', 8) `); @gold-9: color(~`colorPalette('@{gold-6}', 9) `); diff --git a/components/style/core/base.less b/components/style/core/base.less index e1041a3c03..5f0bf81049 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -1,510 +1,17 @@ -/* stylelint-disable at-rule-no-unknown */ - -// Reboot -// -// Normalization of HTML elements, manually forked from Normalize.css to remove -// styles targeting irrelevant browsers while applying new styles. -// -// Normalize is licensed MIT. https://github.com/necolas/normalize.css - -// HTML & Body reset -@{html-selector}, -body { - .square(100%); -} - -// remove the clear button of a text input control in IE10+ -input::-ms-clear, -input::-ms-reveal { - display: none; -} - -// Document -// -// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. -// 2. Change the default font family in all browsers. -// 3. Correct the line height in all browsers. -// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. - -*, -*::before, -*::after { - box-sizing: border-box; // 1 -} - -@{html-selector} { - font-family: sans-serif; // 2 - line-height: 1.15; // 3 - -webkit-text-size-adjust: 100%; // 4 - -ms-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: fade(@black, 0%); // 6 -} - -// IE10+ doesn't honor `` in some cases. -@-ms-viewport { - width: device-width; -} - -// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) -article, -aside, -dialog, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section { - display: block; -} - -// Body -// -// 1. remove the margin in all browsers. -// 2. As a best practice, apply a default `body-background`. - -body { - margin: 0; // 1 - color: @text-color; - font-size: @font-size-base; - font-family: @font-family; - font-variant: @font-variant-base; - line-height: @line-height-base; - background-color: @body-background; // 2 - font-feature-settings: @font-feature-settings-base; -} - -// Suppress the focus outline on elements that cannot be accessed via keyboard. -// This prevents an unwanted focus outline from appearing around elements that -// might still respond to pointer events. -// -// Credit: https://github.com/suitcss/base -[tabindex='-1']:focus { - outline: none !important; -} - -// Content grouping -// -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. - -hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 -} - -// -// Typography -// - -// remove top margins from headings -// -// By default, `

`-`

` all receive top and bottom margins. We nuke the top -// margin for easier control within type scales as it avoids margin collapsing. -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: 0.5em; - color: @heading-color; - font-weight: 500; -} - -// Reset margins on paragraphs -// -// Similarly, the top margin on `

`s get reset. However, we also reset the -// bottom margin to use `em` units instead of `em`. -p { - margin-top: 0; - margin-bottom: 1em; -} - -// Abbreviations -// -// 1. remove the bottom border in Firefox 39-. -// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. -// 3. Add explicit cursor to indicate changed behavior. -// 4. Duplicate behavior to the data-* attribute for our tooltip plugin - -abbr[title], -abbr[data-original-title] { - // 4 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 - border-bottom: 0; // 1 - cursor: help; // 3 -} - -address { - margin-bottom: 1em; - font-style: normal; - line-height: inherit; -} - -input[type='text'], -input[type='password'], -input[type='number'], -textarea { - -webkit-appearance: none; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1em; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 500; -} - -dd { - margin-bottom: 0.5em; - margin-left: 0; // Undo browser default -} - -blockquote { - margin: 0 0 1em; -} - -dfn { - font-style: italic; // Add the correct font style in Android 4.3- -} - -b, -strong { - font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari -} - -small { - font-size: 80%; // Add the correct font size in all browsers -} - -// -// Prevent `sub` and `sup` elements from affecting the line height in -// all browsers. -// - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} - -// -// Links -// - -a { - color: @link-color; - text-decoration: @link-decoration; - background-color: transparent; // remove the gray background on active links in IE 10. - outline: none; - cursor: pointer; - transition: color 0.3s; - -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+. - - &:hover { - color: @link-hover-color; +// Config global less under antd +[class^=~'@{ant-prefix}-'], +[class*=~' @{ant-prefix}-'] { + // remove the clear button of a text input control in IE10+ + &::-ms-clear, + input::-ms-clear, + input::-ms-reveal { + display: none; } - &:active { - color: @link-active-color; + &, + *, + *::before, + *::after { + box-sizing: border-box; // 1 } - - &:active, - &:hover { - text-decoration: @link-hover-decoration; - outline: 0; - } - - &[disabled] { - color: @disabled-color; - cursor: not-allowed; - pointer-events: none; - } -} - -// -// Code -// - -pre, -code, -kbd, -samp { - font-size: 1em; // Correct the odd `em` font sizing in all browsers. - font-family: @code-family; -} - -pre { - // remove browser default top margin - margin-top: 0; - // Reset browser default of `1em` to use `em`s - margin-bottom: 1em; - // Don't allow content to break outside - overflow: auto; -} - -// -// Figures -// -figure { - // Apply a consistent margin strategy (matches our type styles). - margin: 0 0 1em; -} - -// -// Images and content -// - -img { - vertical-align: middle; - border-style: none; // remove the border on images inside links in IE 10-. -} - -svg:not(:root) { - overflow: hidden; // Hide the overflow in IE -} - -// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. -// -// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 -// DON'T remove the click delay when `` is present. -// However, they DO support emoving the click delay via `touch-action: manipulation`. -// See: -// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch -// * http://caniuse.com/#feat=css-touch-action -// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay - -a, -area, -button, -[role='button'], -input:not([type='range']), -label, -select, -summary, -textarea { - touch-action: manipulation; -} - -// -// Tables -// - -table { - border-collapse: collapse; // Prevent double borders -} - -caption { - padding-top: 0.75em; - padding-bottom: 0.3em; - color: @text-color-secondary; - text-align: left; - caption-side: bottom; -} - -th { - // Matches default `` alignment by inheriting from the ``, or the - // closest parent with a set `text-align`. - text-align: inherit; -} - -// -// Forms -// - -input, -button, -select, -optgroup, -textarea { - margin: 0; // remove the margin in Firefox and Safari - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; -} - -button, -input { - overflow: visible; // Show the overflow in Edge -} - -button, -select { - text-transform: none; // remove the inheritance of text transform in Firefox -} - -// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` -// controls in Android 4. -// 2. Correct the inability to style clickable types in iOS and Safari. -button, -@{html-selector} [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; // 2 -} - -// remove inner border and padding from Firefox, but don't restore the outline like Normalize. -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type='radio'], -input[type='checkbox'] { - box-sizing: border-box; // 1. Add the correct box sizing in IE 10- - padding: 0; // 2. remove the padding in IE 10- -} - -input[type='date'], -input[type='time'], -input[type='datetime-local'], -input[type='month'] { - // remove the default appearance of temporal inputs to avoid a Mobile Safari - // bug where setting a custom line-height prevents text from being vertically - // centered within the input. - // See https://bugs.webkit.org/show_bug.cgi?id=139848 - // and https://github.com/twbs/bootstrap/issues/11266 - -webkit-appearance: listbox; -} - -textarea { - overflow: auto; // remove the default vertical scrollbar in IE. - // Textareas should really only resize vertically so they don't break their (horizontal) containers. - resize: vertical; -} - -fieldset { - // Browsers set a default `min-width: min-content;` on fieldsets, - // unlike e.g. `

`s, which have `min-width: 0;` by default. - // So we reset that to ensure fieldsets behave more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359 - // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements - min-width: 0; - margin: 0; - // Reset the default outline behavior of fieldsets so they don't affect page layout. - padding: 0; - border: 0; -} - -// 1. Correct the text wrapping in Edge and IE. -// 2. Correct the color inheritance from `fieldset` elements in IE. -legend { - display: block; - width: 100%; - max-width: 100%; // 1 - margin-bottom: 0.5em; - padding: 0; - color: inherit; // 2 - font-size: 1.5em; - line-height: inherit; - white-space: normal; // 1 -} - -progress { - vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. -} - -// Correct the cursor style of incement and decement buttons in Chrome. -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} - -[type='search'] { - // This overrides the extra rounded corners on search inputs in iOS so that our - // `.form-control` class can properly style them. Note that this cannot simply - // be added to `.form-control` as it's not specific enough. For details, see - // https://github.com/twbs/bootstrap/issues/11586. - outline-offset: -2px; // 2. Correct the outline style in Safari. - -webkit-appearance: none; -} - -// -// remove the inner padding and cancel buttons in Chrome and Safari on macOS. -// - -[type='search']::-webkit-search-cancel-button, -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// 1. Correct the inability to style clickable types in iOS and Safari. -// 2. Change font properties to `inherit` in Safari. -// - -::-webkit-file-upload-button { - font: inherit; // 2 - -webkit-appearance: button; // 1 -} - -// -// Correct element displays -// - -output { - display: inline-block; -} - -summary { - display: list-item; // Add the correct display in all browsers -} - -template { - display: none; // Add the correct display in IE -} - -// Always hide an element with the `hidden` HTML attribute (from PureCSS). -// Needed for proper display in IE 10-. -[hidden] { - display: none !important; -} - -mark { - padding: 0.2em; - background-color: @yellow-1; -} - -::selection { - color: @text-color-inverse; - background: @text-selection-bg; -} - -// Utility classes -.clearfix { - .clearfix(); } diff --git a/components/style/core/global.less b/components/style/core/global.less new file mode 100644 index 0000000000..1b3e8d2849 --- /dev/null +++ b/components/style/core/global.less @@ -0,0 +1,501 @@ +/* stylelint-disable at-rule-no-unknown */ + +// Reboot +// +// Normalization of HTML elements, manually forked from Normalize.css to remove +// styles targeting irrelevant browsers while applying new styles. +// +// Normalize is licensed MIT. https://github.com/necolas/normalize.css + +// HTML & Body reset +@{html-selector}, +body { + .square(100%); +} + +// remove the clear button of a text input control in IE10+ +input::-ms-clear, +input::-ms-reveal { + display: none; +} + +// Document +// +// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. +// 2. Change the default font family in all browsers. +// 3. Correct the line height in all browsers. +// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. +// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so +// we force a non-overlapping, non-auto-hiding scrollbar to counteract. +// 6. Change the default tap highlight to be completely transparent in iOS. + +*, +*::before, +*::after { + box-sizing: border-box; // 1 +} + +@{html-selector} { + font-family: sans-serif; // 2 + line-height: 1.15; // 3 + -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 + -ms-overflow-style: scrollbar; // 5 + -webkit-tap-highlight-color: fade(@black, 0%); // 6 +} + +// IE10+ doesn't honor `` in some cases. +@-ms-viewport { + width: device-width; +} + +// Body +// +// 1. remove the margin in all browsers. +// 2. As a best practice, apply a default `body-background`. + +body { + margin: 0; // 1 + color: @text-color; + font-size: @font-size-base; + font-family: @font-family; + font-variant: @font-variant-base; + line-height: @line-height-base; + background-color: @body-background; // 2 + font-feature-settings: @font-feature-settings-base; +} + +// Suppress the focus outline on elements that cannot be accessed via keyboard. +// This prevents an unwanted focus outline from appearing around elements that +// might still respond to pointer events. +// +// Credit: https://github.com/suitcss/base +[tabindex='-1']:focus { + outline: none !important; +} + +// Content grouping +// +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. + +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 +} + +// +// Typography +// + +// remove top margins from headings +// +// By default, `

`-`

` all receive top and bottom margins. We nuke the top +// margin for easier control within type scales as it avoids margin collapsing. +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0.5em; + color: @heading-color; + font-weight: 500; +} + +// Reset margins on paragraphs +// +// Similarly, the top margin on `

`s get reset. However, we also reset the +// bottom margin to use `em` units instead of `em`. +p { + margin-top: 0; + margin-bottom: 1em; +} + +// Abbreviations +// +// 1. remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Duplicate behavior to the data-* attribute for our tooltip plugin + +abbr[title], +abbr[data-original-title] { + // 4 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 + border-bottom: 0; // 1 + cursor: help; // 3 +} + +address { + margin-bottom: 1em; + font-style: normal; + line-height: inherit; +} + +input[type='text'], +input[type='password'], +input[type='number'], +textarea { + -webkit-appearance: none; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1em; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +dt { + font-weight: 500; +} + +dd { + margin-bottom: 0.5em; + margin-left: 0; // Undo browser default +} + +blockquote { + margin: 0 0 1em; +} + +dfn { + font-style: italic; // Add the correct font style in Android 4.3- +} + +b, +strong { + font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari +} + +small { + font-size: 80%; // Add the correct font size in all browsers +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} + +// +// Links +// + +a { + color: @link-color; + text-decoration: @link-decoration; + background-color: transparent; // remove the gray background on active links in IE 10. + outline: none; + cursor: pointer; + transition: color 0.3s; + -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+. + + &:hover { + color: @link-hover-color; + } + + &:active { + color: @link-active-color; + } + + &:active, + &:hover { + text-decoration: @link-hover-decoration; + outline: 0; + } + + // https://github.com/ant-design/ant-design/issues/22503 + &:focus { + text-decoration: @link-focus-decoration; + outline: @link-focus-outline; + } + + &[disabled] { + color: @disabled-color; + cursor: not-allowed; + pointer-events: none; + } +} + +// +// Code +// + +pre, +code, +kbd, +samp { + font-size: 1em; // Correct the odd `em` font sizing in all browsers. + font-family: @code-family; +} + +pre { + // remove browser default top margin + margin-top: 0; + // Reset browser default of `1em` to use `em`s + margin-bottom: 1em; + // Don't allow content to break outside + overflow: auto; +} + +// +// Figures +// +figure { + // Apply a consistent margin strategy (matches our type styles). + margin: 0 0 1em; +} + +// +// Images and content +// + +img { + vertical-align: middle; + border-style: none; // remove the border on images inside links in IE 10-. +} + +svg:not(:root) { + overflow: hidden; // Hide the overflow in IE +} + +// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. +// +// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 +// DON'T remove the click delay when `` is present. +// However, they DO support emoving the click delay via `touch-action: manipulation`. +// See: +// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch +// * http://caniuse.com/#feat=css-touch-action +// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay + +a, +area, +button, +[role='button'], +input:not([type='range']), +label, +select, +summary, +textarea { + touch-action: manipulation; +} + +// +// Tables +// + +table { + border-collapse: collapse; // Prevent double borders +} + +caption { + padding-top: 0.75em; + padding-bottom: 0.3em; + color: @text-color-secondary; + text-align: left; + caption-side: bottom; +} + +th { + // Matches default `` alignment by inheriting from the ``, or the + // closest parent with a set `text-align`. + text-align: inherit; +} + +// +// Forms +// + +input, +button, +select, +optgroup, +textarea { + margin: 0; // remove the margin in Firefox and Safari + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; +} + +button, +input { + overflow: visible; // Show the overflow in Edge +} + +button, +select { + text-transform: none; // remove the inheritance of text transform in Firefox +} + +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS and Safari. +button, +@{html-selector} [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 +} + +// remove inner border and padding from Firefox, but don't restore the outline like Normalize. +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type='radio'], +input[type='checkbox'] { + box-sizing: border-box; // 1. Add the correct box sizing in IE 10- + padding: 0; // 2. remove the padding in IE 10- +} + +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { + // remove the default appearance of temporal inputs to avoid a Mobile Safari + // bug where setting a custom line-height prevents text from being vertically + // centered within the input. + // See https://bugs.webkit.org/show_bug.cgi?id=139848 + // and https://github.com/twbs/bootstrap/issues/11266 + -webkit-appearance: listbox; +} + +textarea { + overflow: auto; // remove the default vertical scrollbar in IE. + // Textareas should really only resize vertically so they don't break their (horizontal) containers. + resize: vertical; +} + +fieldset { + // Browsers set a default `min-width: min-content;` on fieldsets, + // unlike e.g. `

`s, which have `min-width: 0;` by default. + // So we reset that to ensure fieldsets behave more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359 + // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements + min-width: 0; + margin: 0; + // Reset the default outline behavior of fieldsets so they don't affect page layout. + padding: 0; + border: 0; +} + +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. +legend { + display: block; + width: 100%; + max-width: 100%; // 1 + margin-bottom: 0.5em; + padding: 0; + color: inherit; // 2 + font-size: 1.5em; + line-height: inherit; + white-space: normal; // 1 +} + +progress { + vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. +} + +// Correct the cursor style of incement and decement buttons in Chrome. +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} + +[type='search'] { + // This overrides the extra rounded corners on search inputs in iOS so that our + // `.form-control` class can properly style them. Note that this cannot simply + // be added to `.form-control` as it's not specific enough. For details, see + // https://github.com/twbs/bootstrap/issues/11586. + outline-offset: -2px; // 2. Correct the outline style in Safari. + -webkit-appearance: none; +} + +// +// remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// + +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + font: inherit; // 2 + -webkit-appearance: button; // 1 +} + +// +// Correct element displays +// + +output { + display: inline-block; +} + +summary { + display: list-item; // Add the correct display in all browsers +} + +template { + display: none; // Add the correct display in IE +} + +// Always hide an element with the `hidden` HTML attribute (from PureCSS). +// Needed for proper display in IE 10-. +[hidden] { + display: none !important; +} + +mark { + padding: 0.2em; + background-color: @yellow-1; +} + +::selection { + color: @text-color-inverse; + background: @text-selection-bg; +} + +// Utility classes +.clearfix { + .clearfix(); +} diff --git a/components/style/core/index.less b/components/style/core/index.less index bce88707da..c493947e81 100644 --- a/components/style/core/index.less +++ b/components/style/core/index.less @@ -1,4 +1,5 @@ @import '../mixins/index'; @import 'base'; +@import 'global'; @import 'iconfont'; @import 'motion'; diff --git a/components/style/dark.less b/components/style/dark.less new file mode 100644 index 0000000000..d268da201e --- /dev/null +++ b/components/style/dark.less @@ -0,0 +1,2 @@ +@import './themes/dark.less'; +@import './core/index'; diff --git a/components/style/themes/dark.less b/components/style/themes/dark.less index baf03782bd..1a104b10b8 100644 --- a/components/style/themes/dark.less +++ b/components/style/themes/dark.less @@ -409,7 +409,6 @@ // Skeleton // --- -@skeleton-color: #303030; @skeleton-to-color: fade(@white, 16%); // Alert diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4c8e2cb589..4a5816dc9f 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -41,6 +41,8 @@ @body-background: #fff; // Base background color for most components @component-background: #fff; +// Popover background color +@popover-background: @component-background; @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; @@ -92,6 +94,8 @@ @link-active-color: color(~`colorPalette('@{link-color}', 7) `); @link-decoration: none; @link-hover-decoration: none; +@link-focus-decoration: none; +@link-focus-outline: 0; // Animation @ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); @@ -164,6 +168,10 @@ @btn-disable-bg: @disabled-bg; @btn-disable-border: @border-color-base; +@btn-default-ghost-color: @component-background; +@btn-default-ghost-bg: transparent; +@btn-default-ghost-border: @component-background; + @btn-padding-base: 0 @padding-md - 1px; @btn-font-size-lg: @font-size-lg; @btn-font-size-sm: @font-size-base; @@ -184,10 +192,13 @@ @btn-group-border: @primary-5; +@btn-text-hover-bg: rgba(0, 0, 0, 0.018); + // Checkbox @checkbox-size: 16px; @checkbox-color: @primary-color; @checkbox-check-color: #fff; +@checkbox-check-bg: @checkbox-check-color; @checkbox-border-width: @border-width-base; // Descriptions @@ -202,15 +213,26 @@ @descriptions-item-label-colon-margin-left: 2px; @descriptions-extra-color: @text-color; +// Divider +@divider-text-padding: 1em; +@divider-orientation-margin: 5%; +@divider-color: rgba(0, 0, 0, 6%); + // Dropdown @dropdown-selected-color: @primary-color; +@dropdown-menu-submenu-disabled-bg: @component-background; // Empty @empty-font-size: @font-size-base; // Radio @radio-size: 16px; +@radio-top: 0px; +@radio-border-width: 1px; +@radio-dot-size: @radio-size - 8px; @radio-dot-color: @primary-color; +@radio-dot-disabled-color: fade(@black, 20%); +@radio-solid-checked-color: @component-background; // Radio buttons @radio-button-bg: @btn-default-bg; @@ -218,6 +240,9 @@ @radio-button-color: @btn-default-color; @radio-button-hover-color: @primary-5; @radio-button-active-color: @primary-7; +@radio-disabled-button-checked-bg: tint(@black, 90%); +@radio-disabled-button-checked-color: @disabled-color; +@radio-wrapper-margin-right: 8px; // Media queries breakpoints // Extra small screen / phone @@ -299,6 +324,7 @@ @collapse-panel-border-radius: @border-radius-base; //Dropdown +@dropdown-menu-bg: @component-background; @dropdown-vertical-padding: 5px; @dropdown-edge-child-vertical-padding: 4px; @dropdown-font-size: @font-size-base; @@ -331,6 +357,7 @@ @input-padding-vertical-lg: 6.5px; @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; @@ -342,6 +369,12 @@ @input-hover-border-color: @primary-5; @input-disabled-bg: @disabled-bg; @input-outline-offset: 0 0; +@input-icon-hover-color: fade(@black, 85%); + +// Mentions +// --- +@mentions-dropdown-bg: @component-background; +@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg; // Select // --- @@ -367,6 +400,13 @@ @select-multiple-item-disabled-color: #bfbfbf; @select-multiple-item-disabled-border-color: @select-border-color; +// Cascader +// --- +@cascader-bg: @component-background; +@cascader-item-selected-bg: @primary-1; +@cascader-menu-bg: @component-background; +@cascader-menu-border-color-split: @border-color-split; + // Cascader // ---- @cascader-dropdown-vertical-padding: @dropdown-vertical-padding; @@ -416,6 +456,7 @@ @modal-body-padding: 24px; @modal-header-bg: @component-background; @modal-header-border-color-split: @border-color-split; +@modal-content-bg: @component-background; @modal-heading-color: @heading-color; @modal-footer-bg: transparent; @modal-footer-border-color-split: @border-color-split; @@ -531,6 +572,7 @@ // Comment // --- +@comment-bg: inherit; @comment-padding-base: 16px 0; @comment-nest-indent: 44px; @comment-font-size-base: @font-size-base; @@ -588,15 +630,21 @@ @switch-sm-checked-margin-left: -(@switch-sm-height - 3px); @switch-disabled-opacity: 0.4; @switch-color: @primary-color; +@switch-bg: @component-background; @switch-shadow-color: fade(#00230b, 20%); // Pagination // --- +@pagination-item-bg: @component-background; @pagination-item-size: 32px; @pagination-item-size-sm: 24px; @pagination-font-family: Arial; @pagination-font-weight-active: 500; @pagination-item-bg-active: @component-background; +@pagination-item-link-bg: @component-background; +@pagination-item-disabled-color-active: @white; +@pagination-item-disabled-bg-active: darken(@disabled-bg, 10%); +@pagination-item-input-bg: @component-background; // PageHeader // --- @@ -656,16 +704,19 @@ // Skeleton // --- @skeleton-color: #f2f2f2; +@skeleton-to-color: shade(@skeleton-color, 5%); // Transfer // --- @transfer-header-height: 40px; @transfer-disabled-bg: @disabled-bg; @transfer-list-height: 200px; +@transfer-item-hover-bg: @item-hover-bg; // Message // --- @message-notice-content-padding: 10px 16px; +@message-notice-content-bg: @component-background; // Motion // --- @@ -707,6 +758,7 @@ // --- @drawer-header-padding: 16px 24px; @drawer-body-padding: 24px; +@drawer-bg: @component-background; // Timeline // --- @@ -731,3 +783,13 @@ @image-preview-operation-size: 18px; @image-preview-operation-color: @text-color-dark; @image-preview-operation-disabled-color: fade(@image-preview-operation-color, 45%); + +// Steps +@steps-nav-arrow-color: fade(@black, 25%); +@steps-background: @component-background; + +// Notification +// --- +@notification-bg: @component-background; +@notification-padding-vertical: 16px; +@notification-padding-horizontal: 24px; diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 065cbb3b27..f6093eaa0a 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -36,7 +36,7 @@ left: 1px; width: @switch-height - 4px; height: @switch-height - 4px; - background-color: @component-background; + background-color: @switch-bg; border-radius: 18px; cursor: pointer; transition: all @switch-duration @ease-in-out-circ; diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap index 5d8b6612f4..07c2c050cf 100644 --- a/components/table/__tests__/__snapshots__/empty.test.js.snap +++ b/components/table/__tests__/__snapshots__/empty.test.js.snap @@ -60,12 +60,12 @@ exports[`Table renders empty table 1`] = `
-
+
- - + + - +
@@ -226,12 +226,12 @@ exports[`Table renders empty table with fixed columns 1`] = `
-
+
- - + + - +
@@ -359,12 +359,12 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
-
+
- - + + - +
diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index ec046a9004..6d7c5814be 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -26,6 +26,7 @@ } &-input { + background: @input-bg; width: 100%; max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px; margin: 0; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index af3679829d..ce75e43b73 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -127,7 +127,7 @@ } &-item:not(&-item-disabled):hover { - background-color: @item-hover-bg; + background-color: @transfer-item-hover-bg; cursor: pointer; } diff --git a/package.json b/package.json index 752a84b666..5715ccc6b5 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "pre-publish": "node ./scripts/prepub", "prettier": "prettier -c --write '**/*'", "pretty-quick": "pretty-quick", - "dist": "node antd-tools/cli/run.js dist", + "dist": "node --max_old_space_size=6144 antd-tools/cli/run.js dist", "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.ts,.tsx ./components", "lint:site": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./antdv-demo", "lint:docs": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.md ./antdv-demo/docs/**/demo/**", @@ -133,6 +133,7 @@ "gulp-typescript": "^6.0.0-alpha.1", "html-webpack-plugin": "^3.2.0", "husky": "^4.0.0", + "ignore-emit-webpack-plugin": "^2.0.6", "istanbul-instrumenter-loader": "^3.0.0", "jest": "^26.0.0", "jest-environment-jsdom-fifteen": "^1.0.2", @@ -144,6 +145,7 @@ "less": "^4.0.0", "less-loader": "^7.0.0", "less-plugin-npm-import": "^2.1.0", + "less-vars-to-js": "^1.3.0", "lint-staged": "^10.0.0", "markdown-it-anchor": "^5.3.0", "marked": "0.3.18", diff --git a/scripts/dark-vars.js b/scripts/dark-vars.js new file mode 100644 index 0000000000..04ca9e47d5 --- /dev/null +++ b/scripts/dark-vars.js @@ -0,0 +1,18 @@ +/** + * convert dark.less into js vars + * + * const darkVars = require('./dark-vars'); + */ +const fs = require('fs'); +const path = require('path'); +const lessToJs = require('less-vars-to-js'); + +const stylePath = path.join(__dirname, '..', 'components', 'style'); +const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8'); + +const darkPaletteLess = lessToJs(darkLess, { + stripPrefix: true, + resolveVariables: false, +}); + +module.exports = darkPaletteLess; diff --git a/scripts/default-vars.js b/scripts/default-vars.js new file mode 100644 index 0000000000..31f2901909 --- /dev/null +++ b/scripts/default-vars.js @@ -0,0 +1,19 @@ +/** + * convert default.less into js vars + * + * const darkVars = require('./default-vars'); + */ +const fs = require('fs'); +const path = require('path'); +const lessToJs = require('less-vars-to-js'); + +const stylePath = path.join(__dirname, '..', 'components', 'style'); +const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8'); +const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8'); + +const defaultPaletteLess = lessToJs(`${colorLess}${defaultLess}`, { + stripPrefix: true, + resolveVariables: false, +}); + +module.exports = defaultPaletteLess; diff --git a/scripts/prepub.js b/scripts/prepub.js index 6fa371692e..77f8122ed5 100644 --- a/scripts/prepub.js +++ b/scripts/prepub.js @@ -6,44 +6,141 @@ const fs = require('fs'); const path = require('path'); const packageInfo = require('../package.json'); +const defaultVars = require('./default-vars'); +const darkVars = require('./dark-vars'); -if (fs.existsSync(path.join(__dirname, '../lib'))) { - // Build package.json version to lib/version/index.js - // prevent json-loader needing in user-side - const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js'); - const versionFileContent = fs.readFileSync(versionFilePath).toString(); - fs.writeFileSync( - versionFilePath, - versionFileContent.replace( - `require('../../package.json')`, - `{ version: '${packageInfo.version}' }`, - ), - ); - console.log('Wrote version into lib/version/index.js'); +function generateVersionFile() { + if (fs.existsSync(path.join(__dirname, '../lib'))) { + // Build package.json version to lib/version/index.js + // prevent json-loader needing in user-side + const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js'); + const versionFileContent = fs.readFileSync(versionFilePath).toString(); + fs.writeFileSync( + versionFilePath, + versionFileContent.replace( + `require('../../package.json')`, + `{ version: '${packageInfo.version}' }`, + ), + ); + console.log('Wrote version into lib/version/index.js'); + } } -if (fs.existsSync(path.join(__dirname, '../dist'))) { - // Build a entry less file to dist/antd.less - const componentsPath = path.join(process.cwd(), 'components'); - let componentsLessContent = ''; - - // Build components in one file: lib/style/components.less - fs.readdir(componentsPath, function(err, files) { - files.forEach(function(file) { - if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) { - componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`; - } +function generateThemeFileContent(theme) { + return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n +module.exports = { + ...defaultTheme, + ...${theme}ThemeSingle +}`; +} + +// We need compile additional content for antd user +function finalizeCompile() { + if (fs.existsSync(path.join(__dirname, '../lib'))) { + // Build a entry less file to dist/antd.less + const componentsPath = path.join(process.cwd(), 'components'); + let componentsLessContent = ''; + // Build components in one file: lib/style/components.less + fs.readdir(componentsPath, (err, files) => { + files.forEach(file => { + if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) { + componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`; + } + }); + fs.writeFileSync( + path.join(process.cwd(), 'lib', 'style', 'components.less'), + componentsLessContent, + ); }); + } +} + +function buildThemeFile(theme, vars) { + // Build less entry file: dist/antd.${theme}.less + if (theme !== 'default') { + fs.writeFileSync( + path.join(process.cwd(), 'dist', `antd.${theme}.less`), + `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`, + ); + // eslint-disable-next-line no-console + console.log(`Built a entry less file to dist/antd.${theme}.less`); + } else { fs.writeFileSync( - path.join(process.cwd(), 'lib', 'style', 'components.less'), - componentsLessContent, + path.join(process.cwd(), 'dist', `default-theme.js`), + `module.exports = ${JSON.stringify(vars, null, 2)};\n`, ); + return; + } + + // Build ${theme}.js: dist/${theme}-theme.js, for less-loader + + fs.writeFileSync( + path.join(process.cwd(), 'dist', `theme.js`), + `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`, + { + flag: 'a', + }, + ); + + fs.writeFileSync( + path.join(process.cwd(), 'dist', `${theme}-theme.js`), + generateThemeFileContent(theme), + ); + // eslint-disable-next-line no-console + console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`); +} + +function finalizeDist() { + if (fs.existsSync(path.join(__dirname, '../dist'))) { // Build less entry file: dist/antd.less fs.writeFileSync( path.join(process.cwd(), 'dist', 'antd.less'), '@import "../lib/style/index.less";\n@import "../lib/style/components.less";', ); - }); - console.log('Built a entry less file to dist/antd.less'); + // eslint-disable-next-line no-console + fs.writeFileSync( + path.join(process.cwd(), 'dist', 'theme.js'), + `const defaultTheme = require('./default-theme.js');\n`, + ); + // eslint-disable-next-line no-console + console.log('Built a entry less file to dist/antd.less'); + buildThemeFile('default', defaultVars); + buildThemeFile('dark', darkVars); + // buildThemeFile('compact', compactVars); + fs.writeFileSync( + path.join(process.cwd(), 'dist', `theme.js`), + ` +function getThemeVariables(options = {}) { + let themeVar = { + 'hack': \`true;@import "\${require.resolve('ant-design-vue/lib/style/color/colorPalette.less')}";\`, + ...defaultTheme + }; + if(options.dark) { + themeVar = { + ...themeVar, + ...darkThemeSingle + } + } + if(options.compact){ + themeVar = { + ...themeVar + } + } + return themeVar; +} + +module.exports = { + darkThemeSingle, + getThemeVariables +}`, + { + flag: 'a', + }, + ); + } } + +generateVersionFile(); +finalizeCompile(); +finalizeDist(); diff --git a/webpack.build.conf.js b/webpack.build.conf.js index 0a46bdef6f..1da4ffd917 100644 --- a/webpack.build.conf.js +++ b/webpack.build.conf.js @@ -1,5 +1,7 @@ // This config is for building dist files const getWebpackConfig = require('./antd-tools/getWebpackConfig'); +const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin'); +const darkVars = require('./scripts/dark-vars'); const { webpack } = getWebpackConfig; // noParse still leave `require('./locale' + name)` in dist files // ignore is better @@ -36,4 +38,34 @@ if (process.env.RUN_ENV === 'PRODUCTION') { }); } -module.exports = webpackConfig; +const webpackDarkConfig = getWebpackConfig(false); + +webpackDarkConfig.forEach(config => { + ignoreMomentLocale(config); + externalMoment(config); + + // rename default entry to ${theme} entry + Object.keys(config.entry).forEach(entryName => { + config.entry[entryName.replace('antd', `antd.dark`)] = config.entry[entryName]; + delete config.entry[entryName]; + }); + + // apply ${theme} less variables + config.module.rules.forEach(rule => { + // filter less rule + if (rule.test instanceof RegExp && rule.test.test('.less')) { + const lessRule = rule.use[rule.use.length - 1]; + if (lessRule.options.lessOptions) { + lessRule.options.lessOptions.modifyVars = darkVars; + } else { + lessRule.options.modifyVars = darkVars; + } + } + }); + + const themeReg = new RegExp(`dark(.min)?\\.js(\\.map)?`); + // ignore emit ${theme} entry js & js.map file + config.plugins.push(new IgnoreEmitPlugin(themeReg)); +}); + +module.exports = webpackConfig.concat(webpackDarkConfig);