Skip to content

Commit f0b6b92

Browse files
zzcrzzcr
authored
feat(svg): update svg resource file to adapt dark theme (#3223)
1 parent 1f45064 commit f0b6b92

File tree

22 files changed

+283
-138
lines changed

22 files changed

+283
-138
lines changed

‎examples/sites/demos/pc/app/alert/custom-class-composition-api.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ import { TinyAlert } from '@opentiny/vue'
1010

1111
<style scoped>
1212
.customClass {
13-
background-color: pink;
13+
background-color: var(--tv-color-bg-disabled-control-active);
1414
}
1515
</style>

‎examples/sites/demos/pc/app/alert/custom-class.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ test('基本用法', async ({ page }) => {
88
const alertBox = demo.locator('.customClass')
99

1010
// 颜色边框正确
11-
await expect(alertBox).toHaveCSS('background-color', 'rgb(255, 192, 203)')
11+
await expect(alertBox).toHaveCSS('background-color', 'rgb(179, 214, 255)')
1212
})

‎examples/sites/demos/pc/app/alert/custom-class.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ export default {
1616

1717
<style scoped>
1818
.customClass {
19-
background-color: pink;
19+
background-color: var(--tv-color-bg-disabled-control-active);
2020
}
2121
</style>

‎packages/theme-saas/src/svgs/radio.svg‎

Lines changed: 6 additions & 3 deletions
Loading

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,14 @@
5858
margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px);
5959
}
6060

61-
.@{alert-prefix-cls}__opration {
62-
// no need css
61+
.@{alert-prefix-cls}__opration a{
62+
color: var(--tv-Alert-opration-link-color);
63+
&:hover {
64+
color: var(--tv-Alert-opration-link-hover-color);
65+
text-decoration: underline;
66+
}
6367
}
68+
6469
}
6570

6671
/** close-icon 场景 */
@@ -96,6 +101,7 @@
96101
.@{alert-prefix-cls}__icon {
97102
font-size: var(--tv-Alert-icon-size-normal);
98103
}
104+
99105
.@{alert-prefix-cls}__description {
100106
// 由于close-icon是abs， 需要给出安全边距防止重叠
101107
margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px);
@@ -113,19 +119,24 @@
113119
fill: e(@icon);
114120
}
115121
}
122+
116123
&.@{alert-prefix-cls}--success {
117124
.color-theme-mixin(success);
118125
}
126+
119127
&.@{alert-prefix-cls}--error {
120128
.color-theme-mixin(error);
121129
}
130+
122131
&.@{alert-prefix-cls}--warning {
123132
.color-theme-mixin(warning);
124133
}
134+
125135
&.@{alert-prefix-cls}--info {
126136
.color-theme-mixin(info);
127137
}
138+
128139
&.@{alert-prefix-cls}--simple {
129140
.color-theme-mixin(simple);
130141
}
131-
}
142+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
// 警告的垂直外边距
3333
--tv-Alert-margin-y: 0;
3434

35+
// 描述链接文本色
36+
--tv-Alert-opration-link-color: var(--tv-color-text-link, #1476ff);
37+
// 描述链接hover文本色
38+
--tv-Alert-opration-link-hover-color: var(--tv-color-text-link, #1476ff);
39+
3540
//-------------------------------------------------------alert-icon 场景：-----------------------------------
3641

3742
// 警告的图标大小

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -150,11 +150,14 @@
150150
}
151151

152152
&__input {
153-
.@{checkbox-prefix-cls}__inner{
153+
.@{checkbox-prefix-cls}__inner {
154154
svg {
155155
font-size: var(--tv-Checkbox-icon-size);
156156
}
157-
.icon-checked-sur,.icon-halfselect {
157+
.icon-checked-sur,
158+
.icon-halfselect {
159+
fill: var(--tv-Checkbox-bg-color-active);
160+
158161
path:first-child {
159162
fill: var(--tv-Checkbox-bg-color-active);
160163
}
@@ -178,8 +181,11 @@
178181
}
179182
}
180183
&__input.is-disabled {
181-
.@{checkbox-prefix-cls}__inner{
182-
.icon-checked-sur,.icon-halfselect{
184+
.@{checkbox-prefix-cls}__inner {
185+
.icon-checked-sur,
186+
.icon-halfselect {
187+
fill: var(--tv-Checkbox-checked-disabled-bg-color);
188+
183189
path:first-child {
184190
fill: var(--tv-Checkbox-checked-disabled-bg-color);
185191
}
@@ -188,11 +194,15 @@
188194
}
189195
}
190196
.icon-check {
197+
fill: var(--tv-Checkbox-bg-color-disabled);
198+
191199
path:first-child {
192200
fill: var(--tv-Checkbox-bg-color-disabled);
193201
}
194-
path:last-child {
195-
fill: var(--tv-Checkbox-checked-disabled-border-color);
202+
&:hover {
203+
path:last-child {
204+
fill: var(--tv-Checkbox-unchecked-border-color);
205+
}
196206
}
197207
}
198208
}

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

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,13 @@
4646
transform: translate(-50%, -50%);
4747
fill: var(--tv-Grid-checkbox-icon-color);
4848
font-size: var(--tv-Grid-checkbox-icon-size);
49-
49+
path:last-child {
50+
fill: var(--tv-Grid-unchecked-border-color);
51+
}
5052
&:hover {
51-
fill: var(--tv-Grid-checkbox-icon-color-hover);
53+
path:last-child {
54+
fill: var(--tv-Grid-unchecked-border-color-hover);
55+
}
5256
}
5357

5458
&.icon-checked-sur {
@@ -69,13 +73,16 @@
6973

7074
&.icon-checked-sur {
7175
display: block;
72-
fill: var(--tv-Grid-checkbox-icon-color-selected);
76+
fill: var(--tv-Grid-bg-color-active);
77+
path:last-child {
78+
fill: var(--tv-Grid-border-color-inverse);
79+
}
7380
}
7481
}
7582
}
7683

7784
&:not(:checked) + .@{grid-checkbox-prefix-cls}__icon {
78-
> svg {
85+
.icon-check {
7986
path:first-child {
8087
fill: transparent;
8188
}
@@ -90,11 +97,11 @@
9097
border: none;
9198

9299
> svg {
93-
fill: var(--tv-Grid-checkbox-icon-color-selected);
94-
border-radius: var(--tv-Grid-checkbox-border-radius);
95-
96-
path:first-child {
97-
fill: var(--tv-Grid-checkbox-icon-color-selected);
100+
&.icon-half-select {
101+
fill: var(--tv-Grid-bg-color-active);
102+
path:last-child {
103+
fill: var(--tv-Grid-border-color-inverse);
104+
}
98105
}
99106
}
100107
}
@@ -109,16 +116,7 @@
109116
& + .@{grid-checkbox-prefix-cls}__icon {
110117
> svg {
111118
fill: var(--tv-Grid-checkbox-border-color-disabled);
112-
113-
path {
114-
fill: var(--tv-Grid-icon-color-disabled);
115-
}
116-
117-
path:first-of-type {
118-
fill: var(--tv-Grid-checkbox-bg-color-disabled);
119-
}
120119
}
121-
122120
& + .@{grid-checkbox-prefix-cls}__label {
123121
color: var(--tv-Grid-checkbox-border-color-disabled);
124122
}
@@ -129,7 +127,7 @@
129127
fill: var(--tv-Grid-checkbox-border-color-disabled);
130128

131129
path:first-child {
132-
fill: var(--tv-Grid-checkbox-border-color-disabled);
130+
fill: var(--tv-Grid-checked-disabled-bg-color);
133131
}
134132
}
135133
}
@@ -147,6 +145,16 @@
147145
}
148146
}
149147
}
148+
&.is__disabled > input:not(:checked) + .tiny-grid-checkbox__icon .icon-check {
149+
path:first-child {
150+
fill: var(--tv-Grid-bg-color-disable);
151+
}
152+
&:hover {
153+
path:last-child {
154+
fill: var(--tv-Grid-unchecked-border-color);
155+
}
156+
}
157+
}
150158

151159
& &__label {
152160
padding-left: 5px;

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
--tv-Grid-cell-border-color-selected: var(--tv-color-border-active, #191919);
105105
// -------多选框相关样式-------
106106
// 多选框图标大小
107-
--tv-Grid-checkbox-icon-size: calc(var(--tv-icon-size, 16px) + 2px);
107+
--tv-Grid-checkbox-icon-size: var(--tv-icon-size, 16px);
108108
// 多选框图标颜色
109109
--tv-Grid-checkbox-icon-color: var(--tv-color-border, #c2c2c2);
110110
// 多选框图标悬浮颜色
@@ -230,4 +230,24 @@
230230
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
231231
// 表格无数据背景图片
232232
--tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
233+
// 边框模式复选框禁用边框色
234+
--tv-Grid-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
235+
// 复选框过滤器模式底色
236+
--tv-Grid-bg-color-filter: var(--tv-color-bg-gray-2, #e6e6e6);
237+
// 复选框全选半选选中背景色
238+
--tv-Grid-bg-color-active: var(--tv-color-bg-active-control, #1476ff);
239+
// 复选框全选半选选中边框色
240+
--tv-Grid-border-color-inverse: var(--tv-color-text-inverse, #ffffff);
241+
// 复选框未选边框色
242+
--tv-Grid-unchecked-border-color: var(--tv-color-border, #c2c2c2);
243+
// 复选框未选边框hover色
244+
--tv-Grid-unchecked-border-color-hover: var(--tv-color-border-active, #191919);
245+
// 复选框选中禁用背景色
246+
--tv-Grid-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled, #dbdbdb);
247+
// 复选框选中禁用边框色
248+
--tv-Grid-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
249+
// 复选框禁用反白色
250+
--tv-Grid-icon-inverse-disabled: var(--tv-color-icon-inverse);
251+
// 默认复选框未选中禁用背景色
252+
--tv-Grid-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
233253
}

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

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,20 @@
4949
.checked-sur.tiny-svg,
5050
.halfselect.tiny-svg {
5151
fill: var(--tv-Option-icon-color-checked);
52+
path:first-child {
53+
fill: var(--tv-Option-icon-color-checked);
54+
}
55+
path:last-child {
56+
fill: var(--tv-Option-icon-inverse-disabled);
57+
}
58+
}
59+
.check.tiny-svg {
60+
path:first-child {
61+
fill: transparent;
62+
}
63+
path:last-child {
64+
fill: var(--tv-Option-unchecked-border-color);
65+
}
5266
}
5367

5468
// 文本区域
@@ -97,18 +111,23 @@
97111
.tiny-svg {
98112
&.checked-sur,
99113
&.halfselect {
100-
fill: var(--tv-Option-icon-color-checked-disabled);
101-
102-
path:nth-of-type(2) {
103-
fill: var(--tv-Option-icon-color-checked-disabled-inverse);
114+
fill: var(--tv-Option-checked-disabled-bg-color);
115+
path:first-child {
116+
fill: var(--tv-Option-bg-color-active);
117+
}
118+
path:last-child {
119+
fill: var(--tv-Option-icon-inverse-disabled);
104120
}
105121
}
106122

107123
&.check {
108-
fill: var(--tv-Option-icon-color-unchecked-disabled); /* #bfbfbf */
109-
110-
path:first-of-type {
111-
fill: var(--tv-Option-icon-bg-color-disabled);
124+
path:first-child {
125+
fill: var(--tv-Option-bg-color-disabled);
126+
}
127+
&:hover {
128+
path:last-child {
129+
fill: var(--tv-Option-unchecked-border-color);
130+
}
112131
}
113132
}
114133
}

0 commit comments

Comments
 (0)