vant 3.4.8 → 4.0.0-alpha.2

package/es/switch/index.less

@@ -1,17 +1,18 @@
-@import './var.less';
+body {
+  --van-switch-size: 26px;
+  --van-switch-width: calc(1.8em + 4px);
+  --van-switch-height: calc(1em + 4px);
+  --van-switch-node-size: 1em;
+  --van-switch-node-background: var(--van-white);
+  --van-switch-node-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05);
+  --van-switch-background: rgba(120, 120, 128, 0.16);
+  --van-switch-on-background: var(--van-primary-color);
+  --van-switch-duration: var(--van-duration-base);
+  --van-switch-disabled-opacity: var(--van-disabled-opacity);
+}
 
-:root {
-  --van-switch-size: @switch-size;
-  --van-switch-width: @switch-width;
-  --van-switch-height: @switch-height;
-  --van-switch-node-size: @switch-node-size;
-  --van-switch-node-background-color: @switch-node-background-color;
-  --van-switch-node-box-shadow: @switch-node-box-shadow;
-  --van-switch-background-color: @switch-background-color;
-  --van-switch-on-background-color: @switch-on-background-color;
-  --van-switch-transition-duration: @switch-transition-duration;
-  --van-switch-disabled-opacity: @switch-disabled-opacity;
-  --van-switch-border: @switch-border;
+.van-theme-dark {
+  --van-switch-background: rgba(120, 120, 128, 0.32);
 }
 
 .van-switch {
@@ -21,24 +22,23 @@
   width: var(--van-switch-width);
   height: var(--van-switch-height);
   font-size: var(--van-switch-size);
-  background: var(--van-switch-background-color);
-  border: var(--van-switch-border);
+  background: var(--van-switch-background);
   border-radius: var(--van-switch-node-size);
   cursor: pointer;
-  transition: background-color var(--van-switch-transition-duration);
+  transition: background-color var(--van-switch-duration);
 
   &__node {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 2px;
+    left: 2px;
     width: var(--van-switch-node-size);
     height: var(--van-switch-node-size);
     // https://github.com/youzan/vant/issues/9839
     font-size: inherit;
-    background: var(--van-switch-node-background-color);
+    background: var(--van-switch-node-background);
     border-radius: 100%;
-    box-shadow: var(--van-switch-node-box-shadow);
-    transition: transform var(--van-switch-transition-duration)
+    box-shadow: var(--van-switch-node-shadow);
+    transition: transform var(--van-switch-duration)
       cubic-bezier(0.3, 1.05, 0.4, 1.05);
   }
 
@@ -51,16 +51,16 @@
   }
 
   &--on {
-    background: var(--van-switch-on-background-color);
+    background: var(--van-switch-on-background);
 
     .van-switch__node {
       transform: translateX(
-        calc(var(--van-switch-width) - var(--van-switch-node-size))
+        calc(var(--van-switch-width) - var(--van-switch-node-size) - 4px)
       );
     }
 
     .van-switch__loading {
-      color: var(--van-switch-on-background-color);
+      color: var(--van-switch-on-background);
     }
   }
 

package/es/tabbar/index.css

@@ -1 +1 @@
-:root{--van-tabbar-height: 50px;--van-tabbar-z-index: 1;--van-tabbar-background-color: var(--van-background-color-light)}.van-tabbar{z-index:var(--van-tabbar-z-index);display:flex;box-sizing:content-box;width:100%;height:var(--van-tabbar-height);background:var(--van-tabbar-background-color)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}
+body{--van-tabbar-height: 50px;--van-tabbar-z-index: 1;--van-tabbar-background: var(--van-background-2)}.van-tabbar{z-index:var(--van-tabbar-z-index);display:flex;box-sizing:content-box;width:100%;height:var(--van-tabbar-height);background:var(--van-tabbar-background)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}

package/es/tabbar/index.less

@@ -1,9 +1,7 @@
-@import './var.less';
-
-:root {
-  --van-tabbar-height: @tabbar-height;
-  --van-tabbar-z-index: @tabbar-z-index;
-  --van-tabbar-background-color: @tabbar-background-color;
+body {
+  --van-tabbar-height: 50px;
+  --van-tabbar-z-index: 1;
+  --van-tabbar-background: var(--van-background-2);
 }
 
 .van-tabbar {
@@ -12,7 +10,7 @@
   box-sizing: content-box;
   width: 100%;
   height: var(--van-tabbar-height);
-  background: var(--van-tabbar-background-color);
+  background: var(--van-tabbar-background);
 
   &--fixed {
     position: fixed;

package/es/tabbar-item/index.css

@@ -1 +1 @@
-:root{--van-tabbar-item-font-size: var(--van-font-size-sm);--van-tabbar-item-text-color: var(--van-gray-7);--van-tabbar-item-active-color: var(--van-primary-color);--van-tabbar-item-active-background-color: var(--van-background-color-light);--van-tabbar-item-line-height: 1;--van-tabbar-item-icon-size: 22px;--van-tabbar-item-icon-margin-bottom: var(--van-padding-base)}.van-tabbar-item{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--van-tabbar-item-text-color);font-size:var(--van-tabbar-item-font-size);line-height:var(--van-tabbar-item-line-height);cursor:pointer}.van-tabbar-item__icon{margin-bottom:var(--van-tabbar-item-icon-margin-bottom);font-size:var(--van-tabbar-item-icon-size)}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon .van-badge{margin-top:var(--van-padding-base)}.van-tabbar-item__icon img{display:block;height:20px}.van-tabbar-item--active{color:var(--van-tabbar-item-active-color);background-color:var(--van-tabbar-item-active-background-color)}
+body{--van-tabbar-item-font-size: var(--van-font-size-sm);--van-tabbar-item-text-color: var(--van-text-color);--van-tabbar-item-active-color: var(--van-primary-color);--van-tabbar-item-active-background: var(--van-background-2);--van-tabbar-item-line-height: 1;--van-tabbar-item-icon-size: 22px;--van-tabbar-item-icon-margin-bottom: var(--van-padding-base)}.van-tabbar-item{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--van-tabbar-item-text-color);font-size:var(--van-tabbar-item-font-size);line-height:var(--van-tabbar-item-line-height);cursor:pointer}.van-tabbar-item__icon{margin-bottom:var(--van-tabbar-item-icon-margin-bottom);font-size:var(--van-tabbar-item-icon-size)}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon .van-badge{margin-top:var(--van-padding-base)}.van-tabbar-item__icon img{display:block;height:20px}.van-tabbar-item--active{color:var(--van-tabbar-item-active-color);background-color:var(--van-tabbar-item-active-background)}

package/es/tabbar-item/index.less

@@ -1,13 +1,11 @@
-@import './var.less';
-
-:root {
-  --van-tabbar-item-font-size: @tabbar-item-font-size;
-  --van-tabbar-item-text-color: @tabbar-item-text-color;
-  --van-tabbar-item-active-color: @tabbar-item-active-color;
-  --van-tabbar-item-active-background-color: @tabbar-item-active-background-color;
-  --van-tabbar-item-line-height: @tabbar-item-line-height;
-  --van-tabbar-item-icon-size: @tabbar-item-icon-size;
-  --van-tabbar-item-icon-margin-bottom: @tabbar-item-icon-margin-bottom;
+body {
+  --van-tabbar-item-font-size: var(--van-font-size-sm);
+  --van-tabbar-item-text-color: var(--van-text-color);
+  --van-tabbar-item-active-color: var(--van-primary-color);
+  --van-tabbar-item-active-background: var(--van-background-2);
+  --van-tabbar-item-line-height: 1;
+  --van-tabbar-item-icon-size: 22px;
+  --van-tabbar-item-icon-margin-bottom: var(--van-padding-base);
 }
 
 .van-tabbar-item {
@@ -41,6 +39,6 @@
 
   &--active {
     color: var(--van-tabbar-item-active-color);
-    background-color: var(--van-tabbar-item-active-background-color);
+    background-color: var(--van-tabbar-item-active-background);
   }
 }

package/es/tabs/Tabs.d.ts

@@ -88,7 +88,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "change" | "rendered" | "clickTab" | "update:active")[], "scroll" | "change" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     type: {
         type: PropType<TabsType>;
         default: TabsType;
@@ -132,11 +132,9 @@ declare const _default: import("vue").DefineComponent<{
     titleInactiveColor: StringConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
     onScroll?: ((...args: any[]) => any) | undefined;
-    onDisabled?: ((...args: any[]) => any) | undefined;
     onRendered?: ((...args: any[]) => any) | undefined;
-    "onClick-tab"?: ((...args: any[]) => any) | undefined;
+    onClickTab?: ((...args: any[]) => any) | undefined;
     "onUpdate:active"?: ((...args: any[]) => any) | undefined;
 }, {
     type: TabsType;

package/es/tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent, getCurrentInstance } from "vue";
+import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent } from "vue";
 import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from "../utils";
 import { scrollLeftTo, scrollTopTo } from "./utils";
 import { useRect, useChildren, useScrollParent, useEventListener, onMountedOrActivated } from "@vant/use";
@@ -38,21 +38,11 @@ const TABS_KEY = Symbol(name);
 var stdin_default = defineComponent({
   name,
   props: tabsProps,
-  emits: ["click", "change", "scroll", "disabled", "rendered", "click-tab", "update:active"],
+  emits: ["change", "scroll", "rendered", "clickTab", "update:active"],
   setup(props, {
     emit,
     slots
   }) {
-    var _a, _b;
-    if (process.env.NODE_ENV !== "production") {
-      const props2 = (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props;
-      if (props2 && "onClick" in props2) {
-        console.warn('[Vant] Tabs: "click" event is deprecated, using "click-tab" instead.');
-      }
-      if (props2 && "onDisabled" in props2) {
-        console.warn('[Vant] Tabs: "disabled" event is deprecated, using "click-tab" instead.');
-      }
-    }
     let tabHeight;
     let lockScroll;
     let stickyFixed;
@@ -78,8 +68,8 @@ var stdin_default = defineComponent({
       background: props.background
     }));
     const getTabName = (tab, index) => {
-      var _a2;
-      return (_a2 = tab.name) != null ? _a2 : index;
+      var _a;
+      return (_a = tab.name) != null ? _a : index;
     };
     const currentName = computed(() => {
       const activeTab = children[state.currentIndex];
@@ -181,9 +171,7 @@ var stdin_default = defineComponent({
         disabled
       } = children[index];
       const name2 = getTabName(children[index], index);
-      if (disabled) {
-        emit("disabled", name2, title);
-      } else {
+      if (!disabled) {
         callInterceptor(props.beforeChange, {
           args: [name2],
           done: () => {
@@ -191,10 +179,9 @@ var stdin_default = defineComponent({
             scrollToCurrentContent();
           }
         });
-        emit("click", name2, title);
         route(item);
       }
-      emit("click-tab", {
+      emit("clickTab", {
         name: name2,
         title,
         event,
@@ -255,7 +242,7 @@ var stdin_default = defineComponent({
       }
     };
     const renderHeader = () => {
-      var _a2, _b2;
+      var _a, _b;
       const {
         type,
         border
@@ -274,7 +261,7 @@ var stdin_default = defineComponent({
         }]),
         "style": navStyle.value,
         "aria-orientation": "horizontal"
-      }, [(_a2 = slots["nav-left"]) == null ? void 0 : _a2.call(slots), renderNav(), renderLine(), (_b2 = slots["nav-right"]) == null ? void 0 : _b2.call(slots)])]);
+      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]);
     };
     watch([() => props.color, windowWidth], setLine);
     watch(() => props.active, (value) => {
@@ -328,7 +315,7 @@ var stdin_default = defineComponent({
       scrollIntoView
     });
     return () => {
-      var _a2;
+      var _a;
       return _createVNode("div", {
         "ref": root,
         "class": bem([props.type])
@@ -338,10 +325,10 @@ var stdin_default = defineComponent({
         "onScroll": onStickyScroll
       }, {
         default: () => {
-          var _a3;
-          return [renderHeader(), (_a3 = slots["nav-bottom"]) == null ? void 0 : _a3.call(slots)];
+          var _a2;
+          return [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)];
         }
-      }) : [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)], _createVNode(TabsContent, {
+      }) : [renderHeader(), (_a = slots["nav-bottom"]) == null ? void 0 : _a.call(slots)], _createVNode(TabsContent, {
         "count": children.length,
         "inited": state.inited,
         "animated": props.animated,
@@ -352,8 +339,8 @@ var stdin_default = defineComponent({
         "onChange": setCurrentIndex
       }, {
         default: () => {
-          var _a3;
-          return [(_a3 = slots.default) == null ? void 0 : _a3.call(slots)];
+          var _a2;
+          return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
         }
       })]);
     };

package/es/tabs/index.css

@@ -1 +1 @@
-:root{--van-tab-text-color: var(--van-gray-7);--van-tab-active-text-color: var(--van-text-color);--van-tab-disabled-text-color: var(--van-text-color-3);--van-tab-font-size: var(--van-font-size-md);--van-tab-line-height: var(--van-line-height-md);--van-tabs-default-color: var(--van-danger-color);--van-tabs-line-height: 44px;--van-tabs-card-height: 30px;--van-tabs-nav-background-color: var(--van-background-color-light);--van-tabs-bottom-bar-width: 40px;--van-tabs-bottom-bar-height: 3px;--van-tabs-bottom-bar-color: var(--van-danger-color)}.van-tab{position:relative;display:flex;flex:1;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--van-padding-base);color:var(--van-tab-text-color);font-size:var(--van-tab-font-size);line-height:var(--van-tab-line-height);cursor:pointer}.van-tab--active{color:var(--van-tab-active-text-color);font-weight:var(--van-font-weight-bold)}.van-tab--disabled{color:var(--van-tab-disabled-text-color);cursor:not-allowed}.van-tab--grow{flex:1 0 auto;padding:0 var(--van-padding-sm)}.van-tab--shrink{flex:none;padding:0 var(--van-padding-xs)}.van-tab--card{color:var(--van-tabs-default-color);border-right:var(--van-border-width-base) solid var(--van-tabs-default-color)}.van-tab--card:last-child{border-right:none}.van-tab--card.van-tab--active{color:var(--van-white);background-color:var(--van-tabs-default-color)}.van-tab--card--disabled{color:var(--van-tab-disabled-text-color)}.van-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.van-tabs{position:relative}.van-tabs__wrap{overflow:hidden}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__nav{position:relative;display:flex;background:var(--van-tabs-nav-background-color);-webkit-user-select:none;user-select:none}.van-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-tabs__nav--complete::-webkit-scrollbar{display:none}.van-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.van-tabs__nav--line.van-tabs__nav--shrink,.van-tabs__nav--line.van-tabs__nav--complete{padding-right:var(--van-padding-xs);padding-left:var(--van-padding-xs)}.van-tabs__nav--card{box-sizing:border-box;height:var(--van-tabs-card-height);margin:0 var(--van-padding-md);border:var(--van-border-width-base) solid var(--van-tabs-default-color);border-radius:var(--van-border-radius-sm)}.van-tabs__nav--card.van-tabs__nav--shrink{display:inline-flex}.van-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:var(--van-tabs-bottom-bar-width);height:var(--van-tabs-bottom-bar-height);background:var(--van-tabs-bottom-bar-color);border-radius:var(--van-tabs-bottom-bar-height)}.van-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.van-tabs__content--animated{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:var(--van-tabs-line-height)}.van-tabs--card>.van-tabs__wrap{height:var(--van-tabs-card-height)}
+body{--van-tab-text-color: var(--van-gray-7);--van-tab-active-text-color: var(--van-text-color);--van-tab-disabled-text-color: var(--van-text-color-3);--van-tab-font-size: var(--van-font-size-md);--van-tab-line-height: var(--van-line-height-md);--van-tabs-default-color: var(--van-primary-color);--van-tabs-line-height: 44px;--van-tabs-card-height: 30px;--van-tabs-nav-background: var(--van-background-2);--van-tabs-bottom-bar-width: 40px;--van-tabs-bottom-bar-height: 3px;--van-tabs-bottom-bar-color: var(--van-primary-color)}.van-tab{position:relative;display:flex;flex:1;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--van-padding-base);color:var(--van-tab-text-color);font-size:var(--van-tab-font-size);line-height:var(--van-tab-line-height);cursor:pointer}.van-tab--active{color:var(--van-tab-active-text-color);font-weight:var(--van-font-bold)}.van-tab--disabled{color:var(--van-tab-disabled-text-color);cursor:not-allowed}.van-tab--grow{flex:1 0 auto;padding:0 var(--van-padding-sm)}.van-tab--shrink{flex:none;padding:0 var(--van-padding-xs)}.van-tab--card{color:var(--van-tabs-default-color);border-right:var(--van-border-width) solid var(--van-tabs-default-color)}.van-tab--card:last-child{border-right:none}.van-tab--card.van-tab--active{color:var(--van-white);background-color:var(--van-tabs-default-color)}.van-tab--card--disabled{color:var(--van-tab-disabled-text-color)}.van-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.van-tabs{position:relative}.van-tabs__wrap{overflow:hidden}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__nav{position:relative;display:flex;background:var(--van-tabs-nav-background);-webkit-user-select:none;user-select:none}.van-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-tabs__nav--complete::-webkit-scrollbar{display:none}.van-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.van-tabs__nav--line.van-tabs__nav--shrink,.van-tabs__nav--line.van-tabs__nav--complete{padding-right:var(--van-padding-xs);padding-left:var(--van-padding-xs)}.van-tabs__nav--card{box-sizing:border-box;height:var(--van-tabs-card-height);margin:0 var(--van-padding-md);border:var(--van-border-width) solid var(--van-tabs-default-color);border-radius:var(--van-border-radius-sm)}.van-tabs__nav--card.van-tabs__nav--shrink{display:inline-flex}.van-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:var(--van-tabs-bottom-bar-width);height:var(--van-tabs-bottom-bar-height);background:var(--van-tabs-bottom-bar-color);border-radius:var(--van-tabs-bottom-bar-height)}.van-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.van-tabs__content--animated{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:var(--van-tabs-line-height)}.van-tabs--card>.van-tabs__wrap{height:var(--van-tabs-card-height)}

package/es/tabs/index.d.ts

@@ -41,7 +41,7 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "change" | "rendered" | "clickTab" | "update:active")[], "scroll" | "change" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: import("vue").PropType<import("./types").TabsType>;
         default: import("./types").TabsType;
@@ -85,11 +85,9 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     titleInactiveColor: StringConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
     onScroll?: ((...args: any[]) => any) | undefined;
-    onDisabled?: ((...args: any[]) => any) | undefined;
     onRendered?: ((...args: any[]) => any) | undefined;
-    "onClick-tab"?: ((...args: any[]) => any) | undefined;
+    onClickTab?: ((...args: any[]) => any) | undefined;
     "onUpdate:active"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./types").TabsType;

package/es/tabs/index.less

@@ -1,18 +1,16 @@
-@import './var.less';
-
-:root {
-  --van-tab-text-color: @tab-text-color;
-  --van-tab-active-text-color: @tab-active-text-color;
-  --van-tab-disabled-text-color: @tab-disabled-text-color;
-  --van-tab-font-size: @tab-font-size;
-  --van-tab-line-height: @tab-line-height;
-  --van-tabs-default-color: @tabs-default-color;
-  --van-tabs-line-height: @tabs-line-height;
-  --van-tabs-card-height: @tabs-card-height;
-  --van-tabs-nav-background-color: @tabs-nav-background-color;
-  --van-tabs-bottom-bar-width: @tabs-bottom-bar-width;
-  --van-tabs-bottom-bar-height: @tabs-bottom-bar-height;
-  --van-tabs-bottom-bar-color: @tabs-bottom-bar-color;
+body {
+  --van-tab-text-color: var(--van-gray-7);
+  --van-tab-active-text-color: var(--van-text-color);
+  --van-tab-disabled-text-color: var(--van-text-color-3);
+  --van-tab-font-size: var(--van-font-size-md);
+  --van-tab-line-height: var(--van-line-height-md);
+  --van-tabs-default-color: var(--van-primary-color);
+  --van-tabs-line-height: 44px;
+  --van-tabs-card-height: 30px;
+  --van-tabs-nav-background: var(--van-background-2);
+  --van-tabs-bottom-bar-width: 40px;
+  --van-tabs-bottom-bar-height: 3px;
+  --van-tabs-bottom-bar-color: var(--van-primary-color);
 }
 
 .van-tab {
@@ -30,7 +28,7 @@
 
   &--active {
     color: var(--van-tab-active-text-color);
-    font-weight: var(--van-font-weight-bold);
+    font-weight: var(--van-font-bold);
   }
 
   &--disabled {
@@ -50,8 +48,7 @@
 
   &--card {
     color: var(--van-tabs-default-color);
-    border-right: var(--van-border-width-base) solid
-      var(--van-tabs-default-color);
+    border-right: var(--van-border-width) solid var(--van-tabs-default-color);
 
     &:last-child {
       border-right: none;
@@ -96,7 +93,7 @@
   &__nav {
     position: relative;
     display: flex;
-    background: var(--van-tabs-nav-background-color);
+    background: var(--van-tabs-nav-background);
     user-select: none;
 
     &--complete {
@@ -125,7 +122,7 @@
       box-sizing: border-box;
       height: var(--van-tabs-card-height);
       margin: 0 var(--van-padding-md);
-      border: var(--van-border-width-base) solid var(--van-tabs-default-color);
+      border: var(--van-border-width) solid var(--van-tabs-default-color);
       border-radius: var(--van-border-radius-sm);
     }
 

package/es/tag/index.css

@@ -1 +1 @@
-:root{--van-tag-padding: 0 var(--van-padding-base);--van-tag-text-color: var(--van-white);--van-tag-font-size: var(--van-font-size-sm);--van-tag-border-radius: 2px;--van-tag-line-height: 16px;--van-tag-medium-padding: 2px 6px;--van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);--van-tag-large-border-radius: var(--van-border-radius-md);--van-tag-large-font-size: var(--van-font-size-md);--van-tag-round-border-radius: var(--van-border-radius-max);--van-tag-danger-color: var(--van-danger-color);--van-tag-primary-color: var(--van-primary-color);--van-tag-success-color: var(--van-success-color);--van-tag-warning-color: var(--van-warning-color);--van-tag-default-color: var(--van-gray-6);--van-tag-plain-background-color: var(--van-background-color-light)}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-border-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-color)}.van-tag--danger.van-tag--plain{color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-color)}.van-tag--primary.van-tag--plain{color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-color)}.van-tag--success.van-tag--plain{color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-color)}.van-tag--warning.van-tag--plain{color:var(--van-tag-warning-color)}.van-tag--plain{background:var(--van-tag-plain-background-color);border-color:currentColor}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-border-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-border-radius) var(--van-tag-round-border-radius) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:var(--van-tag-round-border-radius)}.van-tag__close{margin-left:2px}
+body{--van-tag-padding: 0 var(--van-padding-base);--van-tag-text-color: var(--van-white);--van-tag-font-size: var(--van-font-size-sm);--van-tag-radius: 2px;--van-tag-line-height: 16px;--van-tag-medium-padding: 2px 6px;--van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);--van-tag-large-radius: var(--van-radius-md);--van-tag-large-font-size: var(--van-font-size-md);--van-tag-round-radius: var(--van-radius-max);--van-tag-danger-color: var(--van-danger-color);--van-tag-primary-color: var(--van-primary-color);--van-tag-success-color: var(--van-success-color);--van-tag-warning-color: var(--van-warning-color);--van-tag-default-color: var(--van-gray-6);--van-tag-plain-background: var(--van-background-2)}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-color)}.van-tag--danger.van-tag--plain{color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-color)}.van-tag--primary.van-tag--plain{color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-color)}.van-tag--success.van-tag--plain{color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-color)}.van-tag--warning.van-tag--plain{color:var(--van-tag-warning-color)}.van-tag--plain{background:var(--van-tag-plain-background);border-color:currentColor}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-radius) var(--van-tag-round-radius) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:var(--van-tag-round-radius)}.van-tag__close{margin-left:2px}

package/es/tag/index.less

@@ -1,22 +1,20 @@
-@import './var.less';
-
-:root {
-  --van-tag-padding: @tag-padding;
-  --van-tag-text-color: @tag-text-color;
-  --van-tag-font-size: @tag-font-size;
-  --van-tag-border-radius: @tag-border-radius;
-  --van-tag-line-height: @tag-line-height;
-  --van-tag-medium-padding: @tag-medium-padding;
-  --van-tag-large-padding: @tag-large-padding;
-  --van-tag-large-border-radius: @tag-large-border-radius;
-  --van-tag-large-font-size: @tag-large-font-size;
-  --van-tag-round-border-radius: @tag-round-border-radius;
-  --van-tag-danger-color: @tag-danger-color;
-  --van-tag-primary-color: @tag-primary-color;
-  --van-tag-success-color: @tag-success-color;
-  --van-tag-warning-color: @tag-warning-color;
-  --van-tag-default-color: @tag-default-color;
-  --van-tag-plain-background-color: @tag-plain-background-color;
+body {
+  --van-tag-padding: 0 var(--van-padding-base);
+  --van-tag-text-color: var(--van-white);
+  --van-tag-font-size: var(--van-font-size-sm);
+  --van-tag-radius: 2px;
+  --van-tag-line-height: 16px;
+  --van-tag-medium-padding: 2px 6px;
+  --van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);
+  --van-tag-large-radius: var(--van-radius-md);
+  --van-tag-large-font-size: var(--van-font-size-md);
+  --van-tag-round-radius: var(--van-radius-max);
+  --van-tag-danger-color: var(--van-danger-color);
+  --van-tag-primary-color: var(--van-primary-color);
+  --van-tag-success-color: var(--van-success-color);
+  --van-tag-warning-color: var(--van-warning-color);
+  --van-tag-default-color: var(--van-gray-6);
+  --van-tag-plain-background: var(--van-background-2);
 }
 
 .van-tag {
@@ -27,7 +25,7 @@
   color: var(--van-tag-text-color);
   font-size: var(--van-tag-font-size);
   line-height: var(--van-tag-line-height);
-  border-radius: var(--van-tag-border-radius);
+  border-radius: var(--van-tag-radius);
 
   &--default {
     background: var(--van-tag-default-color);
@@ -70,7 +68,7 @@
   }
 
   &--plain {
-    background: var(--van-tag-plain-background-color);
+    background: var(--van-tag-plain-background);
     border-color: currentColor;
 
     &::before {
@@ -94,12 +92,11 @@
   &--large {
     padding: var(--van-tag-large-padding);
     font-size: var(--van-tag-large-font-size);
-    border-radius: var(--van-tag-large-border-radius);
+    border-radius: var(--van-tag-large-radius);
   }
 
   &--mark {
-    border-radius: 0 var(--van-tag-round-border-radius)
-      var(--van-tag-round-border-radius) 0;
+    border-radius: 0 var(--van-tag-round-radius) var(--van-tag-round-radius) 0;
 
     &::after {
       display: block;
@@ -109,7 +106,7 @@
   }
 
   &--round {
-    border-radius: var(--van-tag-round-border-radius);
+    border-radius: var(--van-tag-round-radius);
   }
 
   &__close {