refactor(floatbar): [floatbar] refactor theme vars (#2302)

* refactor(floatbar): [floatbar] refactor theme vars * refactor(floatbar): [floatbar] refactor theme vars
opentiny · Oct 21, 2024 · 2aa0222 · 2aa0222
1 parent 84456e6
commit 2aa0222
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 58 deletions.
diff --git a/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue b/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue
@@ -1,10 +1,10 @@
 <template>
   <tiny-floatbar class="custom">
     <ul>
-      <li><a>Default-A</a></li>
-      <li><a>B</a></li>
-      <li><a>C</a></li>
-      <li><a>D</a></li>
+      <li><a>本地引入</a></li>
+      <li><a>按需引入</a></li>
+      <li><a>搜索引入</a></li>
+      <li><a>完整引入</a></li>
     </ul>
   </tiny-floatbar>
 </template>
@@ -16,10 +16,10 @@ import { Floatbar as TinyFloatbar } from '@opentiny/vue'
 <style scoped>
 .custom {
   position: static;
-  width: 200px;
-  background-color: rgb(222, 184, 135);
+  width: 120px;
+  background-color: #dbdbdb;
 }
-.custom li:hover a {
-  color: #fff;
+.custom li:hover {
+  background: #fff;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/floatbar/custom-style.spec.ts b/examples/sites/demos/pc/app/floatbar/custom-style.spec.ts
@@ -5,10 +5,10 @@ test('自定义样式', async ({ page }) => {
   await page.goto('floatbar#custom-style')
 
   const floatbar = page.locator('.tiny-float-bar')
-  const item = page.getByRole('listitem').filter({ hasText: 'Default-A' })
+  const item = page.getByRole('listitem').filter({ hasText: '本地引入' })
   await expect(floatbar).toHaveClass(/custom/)
-  await expect(floatbar).toHaveCSS('background-color', 'rgb(222, 184, 135)')
+  await expect(floatbar).toHaveCSS('background-color', 'rgb(219, 219, 219)')
   await item.hover()
-  await expect(item).toHaveCSS('background-color', 'rgba(24, 144, 255, 0.06)')
-  await expect(item.locator('a')).toHaveCSS('color', 'rgb(255, 255, 255)')
+  await expect(item).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(item.locator('a')).toHaveCSS('color', 'rgb(25, 25, 25)')
 })
diff --git a/examples/sites/demos/pc/app/floatbar/custom-style.vue b/examples/sites/demos/pc/app/floatbar/custom-style.vue
@@ -1,10 +1,10 @@
 <template>
   <tiny-floatbar class="custom">
     <ul>
-      <li><a>Default-A</a></li>
-      <li><a>B</a></li>
-      <li><a>C</a></li>
-      <li><a>D</a></li>
+      <li><a>本地引入</a></li>
+      <li><a>按需引入</a></li>
+      <li><a>搜索引入</a></li>
+      <li><a>完整引入</a></li>
     </ul>
   </tiny-floatbar>
 </template>
@@ -22,10 +22,10 @@ export default {
 <style scoped>
 .custom {
   position: static;
-  width: 200px;
-  background-color: rgb(222, 184, 135);
+  width: 120px;
+  background-color: #dbdbdb;
 }
-.custom li:hover a {
-  color: #fff;
+.custom li:hover {
+  background: #fff;
 }
 </style>
diff --git a/packages/theme/src/floatbar/index.less b/packages/theme/src/floatbar/index.less
@@ -17,44 +17,43 @@
 @float-bar-prefix-cls: ~'@{css-prefix}float-bar';
 
 .@{float-bar-prefix-cls} {
-  .component-css-vars-floatbar();
+  .inject-Floatbar-vars();
 
   position: fixed;
   top: 50%;
   right: 10px;
   z-index: 99999;
-  border: 1px solid var(--ti-float-bar-border-color);
-  box-shadow: var(--ti-float-bar-box-shadow);
-  border-radius: var(--ti-float-bar-border-radius);
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);;
+  border-radius: var(--tv-Floatbar-bar-border-radius);
   overflow: hidden;
-  background: var(--ti-float-bar-list-bg-color);
+  background: var(--tv-Floatbar-bar-list-bg-color);
 
   ul {
-    padding: var(--ti-float-bar-ul-padding-vertical) var(--ti-float-bar-ul-padding-horizontal);
     li {
       display: block;
-      color: var(--ti-float-bar-list-text-color);
-      font-size: var(--ti-float-bar-font-size);
-      min-width: var(--ti-float-bar-list-item-min-width);
-      min-height: var(--ti-float-bar-list-item-min-height);
-      line-height: var(--ti-float-bar-list-line-height);
+      color: var(--tv-Floatbar-bar-list-text-color);
+      font-size: var(--tv-Floatbar-bar-font-size);
+      min-width: 104px;
+      min-height: 32px;
+      line-height: 32px;
       text-align: center;
-      margin: var(--ti-float-bar-li-margin-vertical) var(--ti-float-bar-li-margin-horizontal);
+      margin: var(--tv-Floatbar-bar-li-margin-v) 0;
+      padding: 0 24px;
 
       &:hover {
-        background: var(--ti-float-bar-list-hover-bg-color);
+        background: #ededed
       }
 
       a {
         width: 100%;
         height: 100%;
-        color: var(--ti-float-bar-list-text-color);
+        color: var(--tv-Floatbar-bar-list-text-color);
         cursor: pointer;
         outline: none;
 
         &:hover,
         &:focus {
-          color: var(--ti-float-bar-list-hover-text-color);
+          color: var(--tv-Floatbar-bar-list-hover-text-color);
           text-decoration: none;
         }
       }

diff --git a/packages/theme/src/floatbar/vars.less b/packages/theme/src/floatbar/vars.less
@@ -10,33 +10,18 @@
 *
 */
 
-.component-css-vars-floatbar() {
-  // 浮动块边框色
-  --ti-float-bar-border-color: unset;
+.inject-Floatbar-vars() {
+
   // 浮动块圆角
-  --ti-float-bar-border-radius: var(--ti-common-border-radius-4, 8px);
+  --tv-Floatbar-bar-border-radius: var(--tv-border-radius-lg);
   // 浮动块字号
-  --ti-float-bar-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Floatbar-bar-font-size: var(--tv-font-size-md);
   // 浮动块背景色
-  --ti-float-bar-list-bg-color: var(--ti-common-color-bg-navigation, #ffffff);
-  // 浮动块阴影:
-  --ti-float-bar-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+  --tv-Floatbar-bar-list-bg-color: var(--tv-color-bg-secondary);
   // ul,li边距
-  --ti-float-bar-ul-padding-vertical: var(--ti-common-space-2x, 8px);
-  --ti-float-bar-ul-padding-horizontal: var(--ti-common-space-0, 0px);
-  --ti-float-bar-li-margin-vertical: var(--ti-common-space-2x, 8px);
-  --ti-float-bar-li-margin-horizontal: var(--ti-common-space-0, 0px);
-
-  // 列表项最小高度
-  --ti-float-bar-list-item-min-height: var(--ti-common-size-height-normal, 32px);
-  // 列表项最小宽度
-  --ti-float-bar-list-item-min-width: var(--ti-common-size-width-normal, 104px);
-  // 列表项行高
-  --ti-float-bar-list-line-height: var(--ti-common-size-height-normal, 32px);
+  --tv-Floatbar-bar-li-margin-v: var(--tv-space-md);
   // 列表项文本色
-  --ti-float-bar-list-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-Floatbar-bar-list-text-color: var(--tv-color-text);
   // 列表项悬浮文本色
-  --ti-float-bar-list-hover-text-color: var(--ti-common-color-primary-normal, #191919);
-  // 列表项悬浮背景色
-  --ti-float-bar-list-hover-bg-color: rgba(0, 0, 0, 0.05);
+  --tv-Floatbar-bar-list-hover-text-color: var(--tv-color-text);
 }