Skip to content

Commit b21a4ce

Browse files
wuyiping0628wuyiping0628
authored
fix(grid): [grid] add dark theme (#3040)
* fix(grid): [grid] add dark theme * fix(grid): [grid] add dark theme * fix(grid): [grid] add dark theme
1 parent 08123d6 commit b21a4ce

File tree

9 files changed

+50
-19
lines changed

9 files changed

+50
-19
lines changed

‎examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function rowClassName({ rowIndex }) {
102102
background: red !important;
103103
}
104104
.tiny-grid :deep(.row__drag-disable) {
105-
background: #f1f1f1 !important;
105+
background: var(--tv-color-bg-disabled) !important;
106106
}
107107
.only-me-can-drag {
108108
cursor: move;

‎examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default {
112112
background: red !important;
113113
}
114114
.tiny-grid :deep(.row__drag-disable) {
115-
background: #f1f1f1 !important;
115+
background: var(--tv-color-bg-disabled) !important;
116116
}
117117
.only-me-can-drag {
118118
cursor: move;

‎packages/theme/src/grid/checkbox.less‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,14 @@
7373
}
7474
}
7575
}
76+
77+
&:not(:checked) + .@{grid-checkbox-prefix-cls}__icon {
78+
> svg {
79+
path:first-child {
80+
fill: transparent;
81+
}
82+
}
83+
}
7684
}
7785

7886
&.is__indeterminate {
@@ -84,6 +92,10 @@
8492
> svg {
8593
fill: var(--tv-Grid-checkbox-icon-color-selected);
8694
border-radius: var(--tv-Grid-checkbox-border-radius);
95+
96+
path:first-child {
97+
fill: var(--tv-Grid-checkbox-icon-color-selected);
98+
}
8799
}
88100
}
89101
}

‎packages/theme/src/grid/filter.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
margin: 0;
7373
width: 100%;
7474
padding: 12px 8px 8px;
75-
border-bottom: solid 1px var(--tv-Grid-divider-color);
75+
border-bottom: solid 1px var(--tv-Grid-border-color-divider);
7676

7777
.@{grid-prefix-cls}__filter-search {
7878
margin-bottom: 4px;
@@ -208,7 +208,7 @@
208208
&.filter-option__btns {
209209
padding: 10px 0;
210210
margin: 0 10px;
211-
border-top: 1px solid var(--tv-Grid-divider-color);
211+
border-top: 1px solid var(--tv-Grid-border-color-divider);
212212
text-align: center;
213213
height: auto;
214214
}

‎packages/theme/src/grid/input.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
padding: 4px 8px;
3232
width: 100%;
3333
color: var(--tv-Grid-text-color);
34-
border: 1px solid var(--tv-Grid-divider-color);
34+
border: 1px solid var(--tv-Grid-border-color-divider);
3535
background-color: #fff;
3636

3737
&:focus {

‎packages/theme/src/grid/menu.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
.@{grid-menu-prefix-cls}__clild-wrapper {
4141
margin: 0;
4242
list-style-type: none;
43-
border-bottom: 1px solid var(--tv-Grid-divider-color);
43+
border-bottom: 1px solid var(--tv-Grid-border-color-divider);
4444

4545
&:last-child {
4646
border: 0;

‎packages/theme/src/grid/radio.less‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
margin: 1px;
5454
border: 1px solid var(--tv-Grid-radio-icon-color-selected);
5555
border-radius: 100%;
56-
background: #fff;
56+
background: transparent;
5757

5858
&::after {
5959
content: '';
@@ -75,12 +75,24 @@
7575
&.icon-radio-selected {
7676
display: none;
7777
}
78+
79+
path:last-child {
80+
fill: transparent;
81+
}
7882
}
7983

8084
& + .@{grid-radio-prefix-cls}__label {
8185
color: var(--tv-Grid-text-color);
8286
}
8387
}
88+
89+
&:not(:checked) + .@{grid-radio-prefix-cls}__icon {
90+
> svg {
91+
path:last-child {
92+
fill: transparent;
93+
}
94+
}
95+
}
8496
}
8597

8698
&.is__disabled {

‎packages/theme/src/grid/table.less‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -295,12 +295,12 @@
295295
&:before {
296296
top: 0;
297297
z-index: 2;
298-
border-top: 1px solid var(--tv-Grid-divider-color);
298+
border-top: 1px solid var(--tv-Grid-border-color-divider);
299299
}
300300

301301
&:after {
302302
bottom: 0;
303-
border-bottom: 1px solid var(--tv-Grid-divider-color);
303+
border-bottom: 1px solid var(--tv-Grid-border-color-divider);
304304
}
305305

306306
.@{grid-prefix-cls}__header {
@@ -312,8 +312,8 @@
312312
.@{grid-prefix-cls}-header__column,
313313
.@{grid-prefix-cls}-body__column,
314314
.@{grid-prefix-cls}-footer__column {
315-
background-image: linear-gradient(-90deg, var(--tv-Grid-divider-color), var(--tv-Grid-divider-color)),
316-
linear-gradient(-180deg, var(--tv-Grid-divider-color), var(--tv-Grid-divider-color));
315+
background-image: linear-gradient(-90deg, var(--tv-Grid-border-color-divider), var(--tv-Grid-border-color-divider)),
316+
linear-gradient(-180deg, var(--tv-Grid-border-color-divider), var(--tv-Grid-border-color-divider));
317317
background-repeat: no-repeat;
318318
background-size:
319319
1px 100%,
@@ -341,12 +341,12 @@
341341

342342
&:before {
343343
left: 0;
344-
border-left: 1px solid var(--tv-Grid-divider-color);
344+
border-left: 1px solid var(--tv-Grid-border-color-divider);
345345
}
346346

347347
&:after {
348348
right: 0;
349-
border-right: 1px solid var(--tv-Grid-divider-color);
349+
border-right: 1px solid var(--tv-Grid-border-color-divider);
350350
}
351351
}
352352
}
@@ -390,7 +390,7 @@
390390
}
391391

392392
& &__footer-wrapper {
393-
border-top: 1px solid var(--tv-Grid-divider-color);
393+
border-top: 1px solid var(--tv-Grid-border-color-divider);
394394
border-bottom: none;
395395
overflow: hidden !important;
396396

@@ -444,7 +444,7 @@
444444
& &-footer__column {
445445
// 默认文字居左对齐
446446
text-align: left;
447-
border-bottom: 1px solid var(--tv-Grid-divider-color);
447+
border-bottom: 1px solid var(--tv-Grid-border-color-divider);
448448

449449
.DefaultTdPadding();
450450

@@ -692,7 +692,7 @@
692692

693693
// 展开行td
694694
& &-body__expanded-column {
695-
border-bottom: 1px solid var(--tv-Grid-divider-color);
695+
border-bottom: 1px solid var(--tv-Grid-border-color-divider);
696696
}
697697

698698
& &-body__expanded-cell {
@@ -831,6 +831,7 @@
831831

832832
svg {
833833
font-size: var(--tv-Grid-icon-size);
834+
fill: var(--tv-Grid-text-color);
834835
}
835836
}
836837
}
@@ -952,7 +953,8 @@
952953
width: 100%;
953954
color: var(--tv-Grid-text-color);
954955
border-radius: var(--tv-Grid-input-border-radius);
955-
border: 1px solid var(--tv-Grid-divider-color);
956+
border: 1px solid var(--tv-Grid-border-color-divider);
957+
background-color: var(--tv-Grid-Input-bg-color);
956958

957959
&:focus {
958960
border: 1px solid var(--tv-Grid-input-border-color-hover);
@@ -964,6 +966,7 @@
964966
height: var(--tv-Grid-input-height);
965967
line-height: normal;
966968
color: var(--tv-Grid-text-color);
969+
background-color: var(--tv-Grid-Input-bg-color);
967970

968971
.@{input-prefix-cls} {
969972
width: 100%;
@@ -1063,7 +1066,7 @@
10631066
margin-right: 1.5rem;
10641067
font-size: 0.875rem;
10651068
cursor: pointer;
1066-
color: #161e26;
1069+
color: var(--tv-Grid-column-anchor-text-color);
10671070

10681071
&:last-child {
10691072
margin-right: 0px;

‎packages/theme/src/grid/vars.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
// 表格图标禁用颜色
3737
--tv-Grid-icon-color-disabled: var(--tv-color-icon-disabled);
3838
// 表格分割线颜色
39-
--tv-Grid-divider-color: var(--tv-color-border-divider);
39+
--tv-Grid-border-color-divider: var(--tv-color-border-divider);
4040
// 表格边框颜色
4141
--tv-Grid-border-color: var(--tv-color-border);
4242
// 表格边框激活态颜色
@@ -154,6 +154,8 @@
154154
--tv-Grid-toolbar-btn-icon-border-color-hover: var(--tv-color-border-hover);
155155
// 工具栏图标按钮边框圆角
156156
--tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-md);
157+
// 工具栏字体颜色
158+
--tv-Grid-column-anchor-text-color: var(--tv-color-text);
157159
// -------mini/small表格-------
158160
// mini表格表头高度
159161
--tv-Grid-header-height-mini: var(--tv-size-height-sm);
@@ -176,6 +178,8 @@
176178
--tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);
177179
// 内置输入框高度
178180
--tv-Grid-input-height: var(--tv-size-height-md);
181+
// 内置输入框背景色
182+
--tv-Grid-Input-bg-color: var(--tv-color-bg-secondary);
179183
// 内置输入框边框圆角
180184
--tv-Grid-input-border-radius: var(--tv-border-radius-md);
181185
// 内置输入框悬浮边框颜色

0 commit comments

Comments
 (0)