fix(ui/tab,tab-item,tabs,tabs-items): suppotr darkmode & remove nerve…

…r used vaiable `tab-color`

packages/varlet-ui/src/tab/tab.less

@@ -1,12 +1,10 @@
-@tab-color: #fff;
 @tab-padding: 12px;
 @tab-active-color: var(--color-primary);
 @tab-inactive-color: #646566;
 @tab-disabled-color: var(--color-text-disabled);
 @tab-font-size: var(--font-size-md);
 
 :root {
-  --tab-color: @tab-color;
   --tab-padding: @tab-padding;
   --tab-active-color: @tab-active-color;
   --tab-inactive-color: @tab-inactive-color;
@@ -21,7 +19,6 @@
   flex: 1 0 auto;
   padding: 0 var(--tab-padding);
   font-size: var(--tab-font-size);
-  color: var(--tab-color);
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

packages/varlet-ui/src/tabs/docs/en-US.md

@@ -337,13 +337,12 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--tabs-padding` | `12px` |
 | `--tabs-indicator-size` | `2px` |
 | `--tabs-indicator-background` | `var(--color-primary)` |
-| `--tabs-background` | `#fff` |
+| `--tabs-background` | `transparent` |
 
 ### Tab Variables
 
 | Variable | Default |
 | --- | --- |
-| `--tab-color` | `#fff` |
 | `--tab-padding` | `12px` |
 | `--tab-active-color` | `var(--color-primary)` |
 | `--tab-inactive-color` | `#646566` |

packages/varlet-ui/src/tabs/docs/zh-CN.md

@@ -340,13 +340,12 @@ export default {
 | `--tabs-padding` | `12px` |
 | `--tabs-indicator-size` | `2px` |
 | `--tabs-indicator-background` | `var(--color-primary)` |
-| `--tabs-background` | `#fff` |
+| `--tabs-background` | `transparent` |
 
 ### Tab Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
-| `--tab-color` | `#fff` |
 | `--tab-padding` | `12px` |
 | `--tab-active-color` | `var(--color-primary)` |
 | `--tab-inactive-color` | `#646566` |

packages/varlet-ui/src/tabs/tabs.less

@@ -4,7 +4,7 @@
 @tabs-padding: 12px;
 @tabs-indicator-size: 2px;
 @tabs-indicator-background: var(--color-primary);
-@tabs-background: #fff;
+@tabs-background: 'transparent';
 
 :root {
   --tabs-item-horizontal-height: @tabs-item-horizontal-height;

packages/varlet-ui/src/themes/dark/index.ts

@@ -1,7 +1,6 @@
 import button from './button'
 import cell from './cell'
 import skeleton from './skeleton'
-import tabs from './tabs'
 import tab from './tab'
 import tabItem from './tab-item'
 import popup from './popup'
@@ -32,7 +31,6 @@ export default {
   ...button,
   ...cell,
   ...skeleton,
-  ...tabs,
   ...tab,
   ...tabItem,
   ...popup,

packages/varlet-ui/src/themes/dark/tab.ts

@@ -1,5 +1,3 @@
 export default {
-  '--tab-active-color': 'rgba(255, 255, 255, 1)',
   '--tab-inactive-color': 'rgba(255, 255, 255, .65)',
-  '--tab-disabled-color': 'rgba(255, 255, 255, .15)',
 }