refactor(tabs): [tabs] refactor the Tabs Theme (#2270)

* refactor(tabs): [tabs] 重构tabs主题

* refactor(tabs): [tabs] 修复测试用例报错

examples/sites/demos/pc/app/tabs/basic-usage.spec.ts

@@ -15,13 +15,13 @@ test('基本用法', async ({ page }) => {
   await expect(tabItems).toHaveCount(4)
   await expect(tabItems).toHaveClass([/is-top/, /is-top is-active/, /is-top/, /is-top/])
   await expect(content).toHaveText(/数据组件/)
-  await expect(activeBar).toHaveCSS('width', '56px')
+  await expect(activeBar).toHaveCSS('width', '64px')
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 96, 0)')
   await item1.click()
   await expect(item1).toHaveClass(/is-active/)
-  await expect(activeBar).toHaveCSS('width', '56px')
+  await expect(activeBar).toHaveCSS('width', '64px')
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await expect(item1).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(item1).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(content).toHaveText(/表单组件/)
 
   // 禁用

examples/sites/demos/pc/app/tabs/size.spec.ts

@@ -8,9 +8,9 @@ test('小尺寸', async ({ page }) => {
   const headerBox = container.locator('.tiny-tabs .tiny-tabs__nav-scroll')
 
   await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
-  await expect(headerBox.nth(0)).toHaveCSS('font-size', '16px')
+  await expect(headerBox.nth(0)).toHaveCSS('font-size', '12px')
   await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
-  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '14px')
+  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '16px')
   await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
   await expect(headerBox.nth(2).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
 })

examples/sites/demos/pc/app/tabs/tab-style-bordercard.spec.ts

@@ -11,10 +11,10 @@ test('bordercard类型', async ({ page }) => {
   const firstItem = tabItems.first()
   const item5 = tabItems.nth(3)
   const content = tabs.getByRole('tabpanel')
-  const activeBgColor = 'rgb(238, 240, 245)'
+  const activeBgColor = 'rgb(245, 245, 245)'
 
   await expect(tabs).toHaveClass(/tiny-tabs--border-card/)
-  await expect(tabHeader).toHaveCSS('background-color', 'rgb(70, 76, 89)')
+  await expect(tabHeader).toHaveCSS('background-color', 'rgb(255, 255, 255)')
   await expect(tabItems).toHaveCount(5)
   await expect(tabItems).toHaveClass([/is-top is-active/, /is-top/, /is-top/, /is-top/, /is-top/])
   await expect(firstItem).toHaveCSS('background-color', activeBgColor)

examples/sites/demos/pc/app/tabs/tab-style-card.spec.ts

@@ -10,7 +10,7 @@ test('card类型', async ({ page }) => {
   const firstItem = tabItems.first()
   const item5 = tabItems.nth(4)
   const content = tabs.getByRole('tabpanel')
-  const borderValue = '1px solid rgb(223, 225, 230)'
+  const borderValue = '1px solid rgb(240, 240, 240)'
 
   await expect(tabs).toHaveClass(/tiny-tabs--card/)
   await expect(tabItems).toHaveCount(5)

examples/sites/demos/pc/webdoc/theme-en.md

@@ -155,9 +155,9 @@ If the original format is `--ti-pager-primary-color:red;`, manually replace it w
 
 `Special circumstances`:
 
-Example 3: Query the special variable table. It is similar to a variable that contains the `border` field. If the new variable to be split contains `border-weight (border thickness), border-style (border style), and border-color (border color)`, For example, `--ti-tabs-item-active-border`is split into`--ti-tabs-item-active-border-weight，--ti-tabs-item-active-border-style, --ti-tabs-item-active-border-color`;
+Example 3: Query the special variable table. It is similar to a variable that contains the `border` field. If the new variable to be split contains `border-weight (border thickness), border-style (border style), and border-color (border color)`, For example, `--tv-Tabs-item-active-border`is split into`--tv-Tabs-item-active-border-weight，--tv-Tabs-item-active-border-style, --tv-Tabs-item-active-border-color`;
 
-If the original style is `--ti-tabs-item-active-border: 1px solid red;`, manually replace it with `--ti-tabs-item-active-border-weight: 1px; --ti-tabs-item-active-border-style: solid; --ti-tabs-item-active-border-color: red;`.
+If the original style is `--tv-Tabs-item-active-border: 1px solid red;`, manually replace it with `--tv-Tabs-item-active-border-weight: 1px; --tv-Tabs-item-active-border-style: solid; --tv-Tabs-item-active-border-color: red;`.
 
 Example 4: If the variable split from `--ti-radio-button-checked-hover-color` contains the `box-shadow` field, you need to write the `box-shadow` style separately.
 
@@ -307,20 +307,20 @@ The mapping table of special variables is attached. There are 48 special variabl
     "--ti-switch-checked-disabled-border-color"
   ],
   "--ti-switch-dot-size": ["--ti-switch-dot-size-height-width", "--ti-switch-dot-position-left"],
-  "--ti-tabs-item-active-border": [
-    "--ti-tabs-item-active-border-weight",
-    "--ti-tabs-item-active-border-style",
-    "--ti-tabs-item-active-border-color"
+  "--tv-Tabs-item-active-border": [
+    "--tv-Tabs-item-active-border-weight",
+    "--tv-Tabs-item-active-border-style",
+    "--tv-Tabs-item-active-border-color"
   ],
-  "--ti-tabs-item-border-bottom": [
-    "--ti-tabs-item-bottom-border-weight",
-    "--ti-tabs-item-bottom-border-style",
-    "--ti-tabs-item-bottom-border-color"
+  "--tv-Tabs-item-border-bottom": [
+    "--tv-Tabs-item-bottom-border-weight",
+    "--tv-Tabs-item-bottom-border-style",
+    "--tv-Tabs-item-bottom-border-color"
   ],
-  "--ti-tabs-icon-close-margin": [
-    "--ti-tabs-icon-close-margin-vertical",
-    "--ti-tabs-icon-close-margin-right",
-    "--ti-tabs-icon-close-margin-left"
+  "--tv-Tabs-icon-close-margin": [
+    "--tv-Tabs-icon-close-margin-vertical",
+    "--tv-Tabs-icon-close-margin-right",
+    "--tv-Tabs-icon-close-margin-left"
   ],
   "--ti-tooltip-padding": ["--ti-tooltip-padding-vertical", "--ti-tooltip-padding-horizontal"],
   "--ti-upload-list-picture-card-item-bgcolor": [

examples/sites/src/views/components/components.vue

@@ -772,10 +772,10 @@ export default defineComponent({
   }
 
   .docs-content-tabs {
-    --ti-tabs-heigh: 48px;
-    --ti-tabs-item-font-size: 18px;
-    --ti-tabs-header-font-active-text-color: #2f5bea;
-    --ti-tabs-item-active-border-color: #2f5bea;
+    --tv-Tabs-heigh: 48px;
+    --tv-Tabs-item-font-size: 18px;
+    --tv-Tabs-header-font-active-text-color: #2f5bea;
+    --tv-Tabs-item-active-border-color: #2f5bea;
 
     flex: 1;
     transition: all ease-in-out 0.3s;

packages/theme/src/bulletin-board/index.less

@@ -115,7 +115,7 @@
           bottom: 0;
           width: 100%;
           height: 1px;
-          background-color: var(--ti-tabs-border-color);
+          background-color: var(--tv-Tabs-border-color);
           z-index: 1;
         }
 

packages/theme/src/tabs/aurora-theme.js

@@ -1,17 +1,16 @@
 export const tinyTabsAuroraTheme = {
-  'ti-tabs-header-font-weight-active': 'var(--ti-common-font-weight-7)',
-  'ti-tabs-dark-margin-top': 'var(--ti-common-space-0)',
-  'ti-tabs-dark-bg-color-active': 'var(--ti-common-bg-minor-active)',
-  'ti-tabs-header-dark-bg-color': 'var(--ti-common-color-selected-background)',
-  'ti-tabs-dark-first-margin-left': 'var(--ti-common-space-0)',
-  'ti-tabs-content-font-size': 'var(--ti-common-font-size-base)',
-  'ti-tabs-item-card-border-color': 'var(--ti-common-color-line-normal)',
-  'ti-tabs-item-top-right-border-weight': 'var(--ti-common-size-0)',
-  'ti-tabs-dark-bg-color-hover': 'none',
-  'ti-tabs-dark-text-color-hover': 'var(--ti-common-color-primary-normal)',
-  'ti-tabs-dark-text-color-active': 'var(--ti-common-color-primary-normal)',
-  'ti-tabs-dark-border-weight': 'var(--ti-common-border-weight-normal)',
-  'ti-tabs-item-padding-horizontal': 'var(--ti-common-space-6x)',
-  'ti-tabs-item-margin-right': 'var(--ti-common-space-6x)',
-  'ti-tabs-header-separator-height': 'var(--ti-common-space-3x)'
+  'tv-Tabs-header-font-weight-active': 'var(--ti-common-font-weight-7)',
+  'tv-Tabs-dark-margin-top': 'var(--ti-common-space-0)',
+  'tv-Tabs-dark-bg-color-active': 'var(--ti-common-bg-minor-active)',
+  'tv-Tabs-header-dark-bg-color': 'var(--ti-common-color-selected-background)',
+  'tv-Tabs-dark-first-margin-left': 'var(--ti-common-space-0)',
+  'tv-Tabs-item-card-border-color': 'var(--ti-common-color-line-normal)',
+  'tv-Tabs-item-top-right-border-weight': 'var(--ti-common-size-0)',
+  'tv-Tabs-dark-bg-color-hover': 'none',
+  'tv-Tabs-dark-text-color-hover': 'var(--ti-common-color-primary-normal)',
+  'tv-Tabs-dark-text-color-active': 'var(--ti-common-color-primary-normal)',
+  'tv-Tabs-dark-border-weight': 'var(--ti-common-border-weight-normal)',
+  'tv-Tabs-item-padding-horizontal': 'var(--ti-common-space-6x)',
+  'tv-Tabs-item-margin-right': 'var(--ti-common-space-6x)',
+  'tv-Tabs-header-separator-height': 'var(--ti-common-space-3x)'
 }