From 25023e452058294024b033bba230dd026346d86b Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Fri, 18 Oct 2024 02:36:18 -0700 Subject: [PATCH] refactor(floatbar): [floatbar] refactor theme vars --- .../floatbar/custom-style-composition-api.vue | 16 +++++----- .../pc/app/floatbar/custom-style.spec.ts | 8 ++--- .../demos/pc/app/floatbar/custom-style.vue | 16 +++++----- packages/theme/src/floatbar/index.less | 29 ++++++++--------- packages/theme/src/floatbar/vars.less | 32 ++++++------------- 5 files changed, 43 insertions(+), 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 index 3be2e21ae9..c3b4ca3a8a 100644 --- 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 @@ @@ -16,10 +16,10 @@ import { Floatbar as TinyFloatbar } from '@opentiny/vue' diff --git a/examples/sites/demos/pc/app/floatbar/custom-style.spec.ts b/examples/sites/demos/pc/app/floatbar/custom-style.spec.ts index 4c0da1f251..e4232727c6 100644 --- 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 index 1eea0e1938..44a2e492bf 100644 --- a/examples/sites/demos/pc/app/floatbar/custom-style.vue +++ b/examples/sites/demos/pc/app/floatbar/custom-style.vue @@ -1,10 +1,10 @@ @@ -22,10 +22,10 @@ export default { diff --git a/packages/theme/src/floatbar/index.less b/packages/theme/src/floatbar/index.less index f28df9f630..004a8e887d 100644 --- 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-Float-bar-border-radius); overflow: hidden; - background: var(--ti-float-bar-list-bg-color); + background: var(--tv-Float-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-Float-bar-list-text-color); + font-size: var(--tv-Float-bar-font-size); + min-width: 014px; + 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-Float-bar-li-margin-vertical) 0; + padding: 0 24px; &:hover { - background: var(--ti-float-bar-list-hover-bg-color); + background: rgba(0, 0, 0, 0.05) } a { width: 100%; height: 100%; - color: var(--ti-float-bar-list-text-color); + color: var(--tv-Float-bar-list-text-color); cursor: pointer; outline: none; &:hover, &:focus { - color: var(--ti-float-bar-list-hover-text-color); + color: var(--tv-Float-bar-list-hover-text-color); text-decoration: none; } } diff --git a/packages/theme/src/floatbar/vars.less b/packages/theme/src/floatbar/vars.less index 39426aac3c..fb5f796a1c 100644 --- a/packages/theme/src/floatbar/vars.less +++ b/packages/theme/src/floatbar/vars.less @@ -10,33 +10,19 @@ * */ -.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-Float-bar-border-radius: var(--tv-border-radius-lg); // 浮动块字号 - --ti-float-bar-font-size: var(--ti-common-font-size-base, 14px); + --tv-Float-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-Float-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-Float-bar-li-margin-vertical: var(--tv-space-md); + // 列表项文本色 - --ti-float-bar-list-text-color: var(--ti-common-color-text-primary, #191919); + --tv-Float-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-Float-bar-list-hover-text-color: var(--tv-color-text); }