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
2025-03-06 18:44:51 -08:00 · 2025-03-06 18:44:51 -08:00 · cd468aceb1
parent 929995d4db
commit cd468aceb1
8 changed files with 33 additions and 29 deletions
--- a/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue
@ -17,9 +17,9 @@ import { TinyFloatbar } from '@opentiny/vue'
 .custom {
  position: static;
  width: 120px;
-  background-color: #dbdbdb;
+  background-color: gray;
 }
 .custom li:hover {
-  background: #fff;
+  background: darkgray;
 }
 </style>
--- a/examples/sites/demos/pc/app/floatbar/custom-style.spec.ts
+++ b/examples/sites/demos/pc/app/floatbar/custom-style.spec.ts
@ -7,8 +7,8 @@ test('自定义样式', async ({ page }) => {
  const floatbar = page.locator('.tiny-float-bar')
  const item = page.getByRole('listitem').filter({ hasText: '本地引入' })
  await expect(floatbar).toHaveClass(/custom/)
-  await expect(floatbar).toHaveCSS('background-color', 'rgb(219, 219, 219)')
+  await expect(floatbar).toHaveCSS('background-color', 'rgb(128, 128, 128)')
  await item.hover()
-  await expect(item).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(item).toHaveCSS('background-color', 'rgb(169, 169, 169)')
  await expect(item.locator('a')).toHaveCSS('color', 'rgb(25, 25, 25)')
 })
--- a/examples/sites/demos/pc/app/floatbar/custom-style.vue
+++ b/examples/sites/demos/pc/app/floatbar/custom-style.vue
@ -23,9 +23,9 @@ export default {
 .custom {
  position: static;
  width: 120px;
-  background-color: #dbdbdb;
+  background-color: gray;
 }
 .custom li:hover {
-  background: #fff;
+  background: darkgray;
 }
 </style>
--- a/examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue
@ -99,8 +99,8 @@ const colStyle = ({ viewRow, viewCol }) => {
  display: table-cell;
  font-size: 12px;
  background-color: var(--docs-color-bg);
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
  background-position:
    0 0,
    0 1px;
@ -111,8 +111,9 @@ const colStyle = ({ viewRow, viewCol }) => {
 }

 .vs-is-last-row > .vs-cell {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
  background-position:
    0 0,
    0 1px,
@ -125,8 +126,9 @@ const colStyle = ({ viewRow, viewCol }) => {
 }

 .vs-is-last-col.vs-cell {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
  background-position:
    0 0,
    0 1px,
@ -139,9 +141,9 @@ const colStyle = ({ viewRow, viewCol }) => {
 }

 .vs-is-last-row > .vs-is-last-col.vs-cell {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
  background-position:
    0 0,
    0 1px,
--- a/examples/sites/demos/pc/app/virtual-scroll-box/table.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/table.vue
@ -109,8 +109,8 @@ export default {
  display: table-cell;
  font-size: 12px;
  background-color: var(--docs-color-bg);
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 1px 100%);
  background-position:
    0 0,
    0 1px;
@ -121,8 +121,9 @@ export default {
 }

 .vs-is-last-row > .vs-cell {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%);
  background-position:
    0 0,
    0 1px,
@ -135,8 +136,9 @@ export default {
 }

 .vs-is-last-col.vs-cell {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
  background-position:
    0 0,
    0 1px,
@ -149,9 +151,9 @@ export default {
 }

 .vs-is-last-row > .vs-is-last-col.vs-cell {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
+  background-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 100%);
  background-position:
    0 0,
    0 1px,
--- a/packages/design/saas/src/milestone/index.ts
+++ b/packages/design/saas/src/milestone/index.ts
@ -9,7 +9,7 @@ export default {
        if (statusColor) {
          return {
            background: props.solid ? statusColor : '',
-            color: props.solid && !isCompleted ?  '#ffffff' : statusColor,
+            color: props.solid && !isCompleted ? '#ffffff' : statusColor,
            'border-color': statusColor
          }
        }
--- a/packages/theme/src/floatbar/index.less
+++ b/packages/theme/src/floatbar/index.less
@ -41,7 +41,7 @@
      padding: 0 24px;

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

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

        &:hover,
        &:focus {
-          color: var(--tv-Floatbar-list-hover-text-color);
+          color: var(--tv-Floatbar-list-text-color-hover);
          text-decoration: none;
        }
      }
--- a/packages/theme/src/floatbar/vars.less
+++ b/packages/theme/src/floatbar/vars.less
@ -18,11 +18,11 @@
  // 浮动块背景色
  --tv-Floatbar-bg-color: var(--tv-color-bg-2);
  // 选项悬浮背景色
-  --tv-Floatbar-list-bg-color: var(--tv-color-bg-hover);
+  --tv-Floatbar-list-bg-color-hover: var(--tv-color-bg-hover);
  // ul,li边距
  --tv-Floatbar-list-margin-x: var(--tv-space-md);
  // 列表项文本色
  --tv-Floatbar-list-text-color: var(--tv-color-text);
  // 列表项悬浮文本色
-  --tv-Floatbar-list-hover-text-color: var(--tv-color-text);
+  --tv-Floatbar-list-text-color-hover: var(--tv-color-text-hover);
 }