Skip to content

Commit cd468ac

Browse files
Youyou-smilesYouyou-smiles
authored
feat(floatbar): [floatbar] Adapt to dark themes (#3045)
* feat(floatbar): [floatbar] Adapt to dark themes * feat(floatbar): [floatbar] Revise inspection comments * feat(floatbar): [floatbar] Adapt to dark themes * feat(floatbar): [floatbar] Revise inspection comments * feat(floatbar): [floatbar] Revise inspection comments
1 parent 929995d commit cd468ac

File tree

8 files changed

+33
-29
lines changed

8 files changed

+33
-29
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import { TinyFloatbar } from '@opentiny/vue'
1717
.custom {
1818
position: static;
1919
width: 120px;
20-
background-color: #dbdbdb;
20+
background-color: gray;
2121
}
2222
.custom li:hover {
23-
background: #fff;
23+
background: darkgray;
2424
}
2525
</style>

‎examples/sites/demos/pc/app/floatbar/custom-style.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ test('自定义样式', async ({ page }) => {
77
const floatbar = page.locator('.tiny-float-bar')
88
const item = page.getByRole('listitem').filter({ hasText: '本地引入' })
99
await expect(floatbar).toHaveClass(/custom/)
10-
await expect(floatbar).toHaveCSS('background-color', 'rgb(219, 219, 219)')
10+
await expect(floatbar).toHaveCSS('background-color', 'rgb(128, 128, 128)')
1111
await item.hover()
12-
await expect(item).toHaveCSS('background-color', 'rgb(255, 255, 255)')
12+
await expect(item).toHaveCSS('background-color', 'rgb(169, 169, 169)')
1313
await expect(item.locator('a')).toHaveCSS('color', 'rgb(25, 25, 25)')
1414
})

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export default {
2323
.custom {
2424
position: static;
2525
width: 120px;
26-
background-color: #dbdbdb;
26+
background-color: gray;
2727
}
2828
.custom li:hover {
29-
background: #fff;
29+
background: darkgray;
3030
}
3131
</style>

‎examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ const colStyle = ({ viewRow, viewCol }) => {
9999
display: table-cell;
100100
font-size: 12px;
101101
background-color: var(--docs-color-bg);
102-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
103-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
102+
background-image:
103+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
104104
background-position:
105105
0 0,
106106
0 1px;
@@ -111,8 +111,9 @@ const colStyle = ({ viewRow, viewCol }) => {
111111
}
112112
113113
.vs-is-last-row > .vs-cell {
114-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
115-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
114+
background-image:
115+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
116+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
116117
background-position:
117118
0 0,
118119
0 1px,
@@ -125,8 +126,9 @@ const colStyle = ({ viewRow, viewCol }) => {
125126
}
126127
127128
.vs-is-last-col.vs-cell {
128-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
129-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
129+
background-image:
130+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
131+
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
130132
background-position:
131133
0 0,
132134
0 1px,
@@ -139,9 +141,9 @@ const colStyle = ({ viewRow, viewCol }) => {
139141
}
140142
141143
.vs-is-last-row > .vs-is-last-col.vs-cell {
142-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
143-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
144-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
144+
background-image:
145+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
146+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
145147
background-position:
146148
0 0,
147149
0 1px,

‎examples/sites/demos/pc/app/virtual-scroll-box/table.vue

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ export default {
109109
display: table-cell;
110110
font-size: 12px;
111111
background-color: var(--docs-color-bg);
112-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
113-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
112+
background-image:
113+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
114114
background-position:
115115
0 0,
116116
0 1px;
@@ -121,8 +121,9 @@ export default {
121121
}
122122
123123
.vs-is-last-row > .vs-cell {
124-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
125-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
124+
background-image:
125+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
126+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
126127
background-position:
127128
0 0,
128129
0 1px,
@@ -135,8 +136,9 @@ export default {
135136
}
136137
137138
.vs-is-last-col.vs-cell {
138-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
139-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
139+
background-image:
140+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
141+
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
140142
background-position:
141143
0 0,
142144
0 1px,
@@ -149,9 +151,9 @@ export default {
149151
}
150152
151153
.vs-is-last-row > .vs-is-last-col.vs-cell {
152-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
153-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
154-
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
154+
background-image:
155+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
156+
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
155157
background-position:
156158
0 0,
157159
0 1px,

‎packages/design/saas/src/milestone/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default {
99
if (statusColor) {
1010
return {
1111
background: props.solid ? statusColor : '',
12-
color: props.solid && !isCompleted ? '#ffffff' : statusColor,
12+
color: props.solid && !isCompleted ? '#ffffff' : statusColor,
1313
'border-color': statusColor
1414
}
1515
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
padding: 0 24px;
4242

4343
&:hover {
44-
background: var(--tv-Floatbar-list-bg-color)
44+
background: var(--tv-Floatbar-list-bg-color-hover)
4545
}
4646

4747
a {
@@ -53,7 +53,7 @@
5353

5454
&:hover,
5555
&:focus {
56-
color: var(--tv-Floatbar-list-hover-text-color);
56+
color: var(--tv-Floatbar-list-text-color-hover);
5757
text-decoration: none;
5858
}
5959
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
// 浮动块背景色
1919
--tv-Floatbar-bg-color: var(--tv-color-bg-2);
2020
// 选项悬浮背景色
21-
--tv-Floatbar-list-bg-color: var(--tv-color-bg-hover);
21+
--tv-Floatbar-list-bg-color-hover: var(--tv-color-bg-hover);
2222
// ul,li边距
2323
--tv-Floatbar-list-margin-x: var(--tv-space-md);
2424
// 列表项文本色
2525
--tv-Floatbar-list-text-color: var(--tv-color-text);
2626
// 列表项悬浮文本色
27-
--tv-Floatbar-list-hover-text-color: var(--tv-color-text);
27+
--tv-Floatbar-list-text-color-hover: var(--tv-color-text-hover);
2828
}

0 commit comments

Comments
 (0)