Skip to content

Commit 74606af

Browse files
wuyiping0628wuyiping0628
authored
fix(theme): [grid,switch] update dark theme (#3242)
1 parent 466796a commit 74606af

25 files changed

+34
-40
lines changed

‎examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,6 @@ const cellClassName = ({ rowIndex, columnIndex }) => {
112112
font-size: 16px;
113113
padding: 15px;
114114
font-weight: bolder;
115-
color: #444;
115+
color: var(--tv-color-text, #191919);
116116
}
117117
</style>

‎examples/sites/demos/pc/app/grid/custom-style/body-style.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,6 @@ export default {
121121
font-size: 16px;
122122
padding: 15px;
123123
font-weight: bolder;
124-
color: #444;
124+
color: var(--tv-color-text, #191919);
125125
}
126126
</style>

‎examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const footerClassName = () => {
147147
font-size: 16px;
148148
padding: 15px;
149149
font-weight: bolder;
150-
color: #444;
150+
color: var(--tv-color-text, #191919);
151151
}
152152
.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
153153
background-color: #2db7f5;

‎examples/sites/demos/pc/app/grid/custom-style/footer-style.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export default {
156156
font-size: 16px;
157157
padding: 15px;
158158
font-weight: bolder;
159-
color: #444;
159+
color: var(--tv-color-text, #191919);
160160
}
161161
.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
162162
background-color: #2db7f5;

‎examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const headerClassName = () => {
106106
font-size: 16px;
107107
padding: 15px;
108108
font-weight: bolder;
109-
color: #444;
109+
color: var(--tv-color-text, #191919);
110110
}
111111
.header-style :deep(.tiny-grid-header__row.header__row--red) {
112112
background-color: palevioletred;

‎examples/sites/demos/pc/app/grid/custom-style/header-style.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export default {
114114
font-size: 16px;
115115
padding: 15px;
116116
font-weight: bolder;
117-
color: #444;
117+
color: var(--tv-color-text, #191919);
118118
}
119119
.header-style :deep(.tiny-grid-header__row.header__row--red) {
120120
background-color: palevioletred;

‎examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<script setup>
3131
import { ref } from 'vue'
32-
import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
32+
import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
3333
3434
const tableData = ref([
3535
{
@@ -107,6 +107,6 @@ const multiSortMethod = ({ $table, tableData, sortColumns }) => {
107107
font-size: 16px;
108108
padding: 15px;
109109
font-weight: bolder;
110-
color: #444;
110+
color: var(--tv-color-text, #191919);
111111
}
112112
</style>

‎examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,6 @@ export default {
118118
font-size: 16px;
119119
padding: 15px;
120120
font-weight: bolder;
121-
color: #444;
121+
color: var(--tv-color-text, #191919);
122122
}
123123
</style>

‎examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,6 @@ const tableData = ref([
9898
font-size: 16px;
9999
padding: 15px;
100100
font-weight: bolder;
101-
color: #444;
101+
color: var(--tv-color-text, #191919);
102102
}
103103
</style>

‎examples/sites/demos/pc/app/grid/edit/editing.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,6 @@ export default {
107107
font-size: 16px;
108108
padding: 15px;
109109
font-weight: bolder;
110-
color: #444;
110+
color: var(--tv-color-text, #191919);
111111
}
112112
</style>

‎examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,6 @@ const addRow = () => {
9696
font-size: 16px;
9797
padding: 15px;
9898
font-weight: bolder;
99-
color: var(--tv-color-text-secondary, #191919);
99+
color: var(--tv-color-text, #191919);
100100
}
101101
</style>

‎examples/sites/demos/pc/app/grid/edit/status-of-editing.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,6 @@ export default {
105105
font-size: 16px;
106106
padding: 15px;
107107
font-weight: bolder;
108-
color: var(--tv-color-text-secondary, #191919);
108+
color: var(--tv-color-text, #191919);
109109
}
110110
</style>

‎examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,6 @@ const tableData = ref([
9797
font-size: 16px;
9898
padding: 15px;
9999
font-weight: bolder;
100-
color: #444;
100+
color: var(--tv-color-text, #191919);
101101
}
102102
</style>

‎examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,6 @@ export default {
106106
font-size: 16px;
107107
padding: 15px;
108108
font-weight: bolder;
109-
color: #444;
109+
color: var(--tv-color-text, #191919);
110110
}
111111
</style>

‎examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,6 @@ const cancelRowEvent = (row) => {
133133
font-size: 16px;
134134
padding: 15px;
135135
font-weight: bolder;
136-
color: #444;
136+
color: var(--tv-color-text, #191919);
137137
}
138138
</style>

‎examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,6 @@ export default {
140140
font-size: 16px;
141141
padding: 15px;
142142
font-weight: bolder;
143-
color: #444;
143+
color: var(--tv-color-text, #191919);
144144
}
145145
</style>

‎examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,6 @@ const tableData = ref([
7272
font-size: 16px;
7373
padding: 15px;
7474
font-weight: bolder;
75-
color: #444;
75+
color: var(--tv-color-text, #191919);
7676
}
7777
</style>

‎examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,6 @@ export default {
6060
font-size: 16px;
6161
padding: 15px;
6262
font-weight: bolder;
63-
color: #444;
63+
color: var(--tv-color-text, #191919);
6464
}
6565
</style>

‎examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,6 @@ const toolbarButtonClickEvent = ({ code, $grid }) => {
7979
font-size: 16px;
8080
padding: 15px;
8181
font-weight: bolder;
82-
color: #444;
82+
color: var(--tv-color-text, #191919);
8383
}
8484
</style>

‎examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,6 @@ export default {
8787
font-size: 16px;
8888
padding: 15px;
8989
font-weight: bolder;
90-
color: #444;
90+
color: var(--tv-color-text, #191919);
9191
}
9292
</style>

‎examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue

+2-9
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<tiny-grid-column field="telephone" title="telephone" :editor="{}">
1515
<template #edit="scope">
1616
<div>
17-
<input class="grid-editor-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
17+
<input class="tiny-grid-default-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
1818
</div>
1919
</template>
2020
</tiny-grid-column>
@@ -40,7 +40,7 @@ const CustomInput = {
4040
}
4141
},
4242
render() {
43-
return <input value={this.modelValue} class="grid-editor-input" onChange={this.change} onInput={this.input} />
43+
return <input value={this.modelValue} class="tiny-grid-default-input" onChange={this.change} onInput={this.input} />
4444
}
4545
}
4646
@@ -171,10 +171,3 @@ function slotOnInput(e, scope) {
171171
scope.$table.updateStatus(scope, e.target.value)
172172
}
173173
</script>
174-
175-
<style scoped>
176-
:deep(.tiny-grid) .col__edit .grid-editor-input {
177-
width: 100%;
178-
height: 100%;
179-
}
180-
</style>

‎examples/sites/demos/pc/app/grid/validation/custcomp.vue

+2-9
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<tiny-grid-column field="telephone" title="telephone" :editor="{}">
1515
<template #edit="scope">
1616
<div>
17-
<input class="grid-editor-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
17+
<input class="tiny-grid-default-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
1818
</div>
1919
</template>
2020
</tiny-grid-column>
@@ -39,7 +39,7 @@ const CustomInput = {
3939
}
4040
},
4141
render() {
42-
return <input value={this.modelValue} class="grid-editor-input" onChange={this.change} onInput={this.input} />
42+
return <input value={this.modelValue} class="tiny-grid-default-input" onChange={this.change} onInput={this.input} />
4343
}
4444
}
4545
@@ -182,10 +182,3 @@ export default {
182182
}
183183
}
184184
</script>
185-
186-
<style scoped>
187-
:deep(.tiny-grid) .col__edit .grid-editor-input {
188-
width: 100%;
189-
height: 100%;
190-
}
191-
</style>

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

+4
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,10 @@
485485

486486
svg {
487487
fill: var(--tv-Grid-icon-color);
488+
489+
&:hover {
490+
fill: var(--tv-Grid-icon-color-hover);
491+
}
488492
}
489493

490494
// 文字居中

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@
223223
// 内置select的下拉框选中状态背景色
224224
--tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
225225
// 加载中背景色
226-
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
226+
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask-block, rgba(255, 255, 255, 70%));
227227
// 表格无数据背景图片
228228
--tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
229229
// 边框模式复选框禁用边框色

‎packages/theme/src/switch/index.less

+4
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,8 @@
128128
&&-checked&.mini &__button {
129129
left: var(--tv-Switch-mini-button-left);
130130
}
131+
132+
.disabled &__button {
133+
background-color: var(--tv-color-bg-inverse-disabled);
134+
}
131135
}

0 commit comments

Comments
 (0)