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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 70 additions & 18 deletions
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 4 additions & 4 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 6 additions & 6 deletions
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

Lines changed: 3 additions & 3 deletions
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 {

0 commit comments

Comments
 (0)