Skip to content

Commit b07190e

Browse files
zkwolfzkwolf
authored
feat: dark theme (#3410)
* chore: update style * chore: add dark css build * test: update snapshot * chore: remove compact var * chore: update style * test: update snapshot
1 parent b7943b3 commit b07190e

File tree

41 files changed

+1564
-1247
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1564
-1247
lines changed

‎components/button/style/index.less

+3-3
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,9 @@
170170
}
171171

172172
&-background-ghost {
173-
color: @component-background;
174-
background: transparent !important;
175-
border-color: @component-background;
173+
color: @btn-default-ghost-color;
174+
background: @btn-default-ghost-bg !important;
175+
border-color: @btn-default-ghost-border;
176176
}
177177

178178
&-background-ghost&-primary {

‎components/button/style/mixin.less

+70-18
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,30 @@
3232

3333
&:hover,
3434
&:focus {
35-
.button-color(
36-
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
37-
);
35+
& when (@theme = dark) {
36+
.button-color(
37+
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
38+
);
39+
}
40+
& when not (@theme = dark) {
41+
.button-color(
42+
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
43+
);
44+
}
3845
}
3946

4047
&:active,
4148
&.active {
42-
.button-color(
43-
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
44-
);
49+
& when (@theme = dark) {
50+
.button-color(
51+
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
52+
);
53+
}
54+
& when not (@theme = dark) {
55+
.button-color(
56+
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
57+
);
58+
}
4559
}
4660

4761
.button-disabled();
@@ -52,17 +66,27 @@
5266

5367
&:hover,
5468
&:focus {
55-
.button-color(
56-
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
57-
`
58-
);
69+
& when (@theme = dark) {
70+
.button-color(@primary-5; @background; @primary-5);
71+
}
72+
& when not (@theme = dark) {
73+
.button-color(
74+
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
75+
~`colorPalette('@{btn-primary-bg}', 5) `
76+
);
77+
}
5978
}
6079
&:active,
6180
&.active {
62-
.button-color(
63-
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
64-
`
65-
);
81+
& when (@theme = dark) {
82+
.button-color(@primary-7; @background; @primary-7);
83+
}
84+
& when not (@theme = dark) {
85+
.button-color(
86+
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
87+
~`colorPalette('@{btn-primary-bg}', 7) `
88+
);
89+
}
6690
}
6791
.button-disabled();
6892
}
@@ -72,19 +96,47 @@
7296
&:hover,
7397
&:focus {
7498
& when (@border = transparent) {
75-
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
99+
& when (@theme = dark) {
100+
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
101+
}
102+
& when not (@theme = dark) {
103+
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
104+
}
76105
}
77106
& when not(@border = transparent) {
78-
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
107+
& when (@theme = dark) {
108+
.button-color(
109+
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
110+
);
111+
}
112+
& when not (@theme = dark) {
113+
.button-color(
114+
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
115+
);
116+
}
79117
}
80118
}
81119
&:active,
82120
&.active {
83121
& when (@border = transparent) {
84-
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
122+
& when (@theme = dark) {
123+
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
124+
}
125+
& when not (@theme = dark) {
126+
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
127+
}
85128
}
86129
& when not(@border = transparent) {
87-
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
130+
& when (@theme = dark) {
131+
.button-color(
132+
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
133+
);
134+
}
135+
& when not (@theme = dark) {
136+
.button-color(
137+
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
138+
);
139+
}
88140
}
89141
}
90142
.button-disabled();

‎components/card/style/index.less

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919

2020
&-hoverable {
2121
cursor: pointer;
22+
transition: box-shadow 0.3s border-color 0.3s;
23+
2224
&:hover {
2325
border-color: @card-hover-border;
2426
box-shadow: @card-shadow;

‎components/cascader/style/index.less

+4-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
position: relative;
3030
display: inline-block;
31-
background-color: @component-background;
31+
background-color: @cascader-bg;
3232
border-radius: @border-radius-base;
3333
outline: 0;
3434
cursor: pointer;
@@ -127,7 +127,7 @@
127127
z-index: @zindex-dropdown;
128128
font-size: @cascader-dropdown-font-size;
129129
white-space: nowrap;
130-
background: @component-background;
130+
background: @cascader-menu-bg;
131131
border-radius: @border-radius-base;
132132
box-shadow: @box-shadow-base;
133133

@@ -168,7 +168,7 @@
168168
overflow: auto;
169169
vertical-align: top;
170170
list-style: none;
171-
border-right: @border-width-base @border-style-base @border-color-split;
171+
border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
172172
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
173173

174174
&:first-child {
@@ -203,7 +203,7 @@
203203
&,
204204
&:hover {
205205
font-weight: @select-item-selected-font-weight;
206-
background-color: @background-color-light;
206+
background-color: @cascader-item-selected-bg;
207207
}
208208
}
209209
&-expand {

‎components/checkbox/style/mixin.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
display: block;
4848
width: @checkbox-size;
4949
height: @checkbox-size;
50-
background-color: @checkbox-check-color;
50+
background-color: @checkbox-check-bg;
5151
border: @checkbox-border-width @border-style-base @border-color-base;
5252
border-radius: @border-radius-sm;
5353
// Fix IE checked style

‎components/comment/style/index.less

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
.@{comment-prefix-cls} {
77
position: relative;
8+
background-color: @comment-bg;
89

910
&-inner {
1011
display: flex;

‎components/date-picker/style/Calendar.less

+3
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,9 @@
153153
background-color: @component-background;
154154
background-clip: padding-box;
155155
border: @border-width-base @border-style-base @border-color-inverse;
156+
& when (@theme = dark) {
157+
border-color: @black;
158+
}
156159
border-radius: @border-radius-base;
157160
outline: none;
158161
box-shadow: @box-shadow-base;

‎components/date-picker/style/Picker.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
z-index: 2;
8282
color: @disabled-color;
8383
font-size: @font-size-base;
84-
background: @input-bg;
84+
background: @component-background;
8585
cursor: pointer;
8686
opacity: 0;
8787
pointer-events: none;

‎components/divider/style/index.less

+6-6
Original file line numberDiff line numberDiff line change
@@ -62,33 +62,33 @@
6262
&-horizontal&-with-text-left {
6363
&::before {
6464
top: 50%;
65-
width: 5%;
65+
width: @divider-orientation-margin;
6666
}
6767
&::after {
6868
top: 50%;
69-
width: 95%;
69+
width: 100% - @divider-orientation-margin;
7070
}
7171
}
7272

7373
&-horizontal&-with-text-right {
7474
&::before {
7575
top: 50%;
76-
width: 95%;
76+
width: 100% - @divider-orientation-margin;
7777
}
7878
&::after {
7979
top: 50%;
80-
width: 5%;
80+
width: @divider-orientation-margin;
8181
}
8282
}
8383

8484
&-inner-text {
8585
display: inline-block;
86-
padding: 0 24px;
86+
padding: 0 @divider-text-padding;
8787
}
8888

8989
&-dashed {
9090
background: none;
91-
border-color: @border-color-split;
91+
border-color: @divider-color;
9292
border-style: dashed;
9393
border-width: 1px 0 0;
9494
}

‎components/drawer/style/drawer.less

+3-3
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@
141141
position: relative;
142142
z-index: 1;
143143
overflow: auto;
144-
background-color: @component-background;
144+
background-color: @drawer-bg;
145145
background-clip: padding-box;
146146
border: 0;
147147
}
@@ -181,14 +181,14 @@
181181
position: relative;
182182
padding: @drawer-header-padding;
183183
color: @text-color;
184-
background: @component-background;
184+
background: @drawer-bg;
185185
border-bottom: @border-width-base @border-style-base @border-color-split;
186186
border-radius: @border-radius-base @border-radius-base 0 0;
187187
}
188188

189189
&-header-no-title {
190190
color: @text-color;
191-
background: @component-background;
191+
background: @drawer-bg;
192192
}
193193

194194
&-body {

‎components/dropdown/style/index.less

+7-4
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414

1515
&::before {
1616
position: absolute;
17-
top: -7px;
17+
top: -@popover-distance + @popover-arrow-width;
1818
right: 0;
19-
bottom: -7px;
19+
bottom: -@popover-distance + @popover-arrow-width;
2020
left: -7px;
2121
z-index: -9999;
2222
opacity: 0.0001;
@@ -52,7 +52,7 @@
5252
padding: @dropdown-edge-child-vertical-padding 0;
5353
text-align: left;
5454
list-style-type: none;
55-
background-color: @component-background;
55+
background-color: @dropdown-menu-bg;
5656
background-clip: padding-box;
5757
border-radius: @border-radius-base;
5858
outline: none;
@@ -111,6 +111,9 @@
111111
padding: @dropdown-vertical-padding @control-padding-horizontal;
112112
color: @text-color;
113113
transition: all 0.3s;
114+
&:hover {
115+
color: @text-color;
116+
}
114117
}
115118

116119
&:first-child {
@@ -192,7 +195,7 @@
192195
&,
193196
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
194197
color: @disabled-color;
195-
background-color: @component-background;
198+
background-color: @dropdown-menu-submenu-disabled-bg;
196199
cursor: not-allowed;
197200
}
198201
}

‎components/empty/simple.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defaultConfigProvider } from '../config-provider';
33

44
const Simple = () => {
55
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
6-
const prefixCls = getPrefixCls('empty-img-default');
6+
const prefixCls = getPrefixCls('empty-img-simple');
77

88
return (
99
<svg class={prefixCls} width="64" height="41" viewBox="0 0 64 41">

‎components/input/style/index.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
transition: all 0.3s;
3434

3535
&:hover {
36-
color: #333;
36+
color: @input-icon-hover-color;
3737
}
3838
}
3939

‎components/input/style/search-input.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
cursor: pointer;
1212
transition: all 0.3s;
1313
&:hover {
14-
color: fade(@black, 80%);
14+
color: @input-icon-hover-color;
1515
}
1616
}
1717

‎components/list/__tests__/__snapshots__/empty.test.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ exports[`List renders empty list 1`] = `
99
<div class="ant-spin-container">
1010
<div class="ant-list-empty-text">
1111
<div class="ant-empty ant-empty-normal">
12-
<div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
12+
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
1313
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
14-
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
15-
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
14+
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
15+
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
1616
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
17-
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
17+
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
1818
</g>
1919
</g>
2020
</svg></div>

0 commit comments

Comments
 (0)