vant 3.4.5 → 4.0.0-alpha.1

package/lib/dialog/index.less

@@ -1,25 +1,23 @@
-@import './var.less';
-
-:root {
-  --van-dialog-width: @dialog-width;
-  --van-dialog-small-screen-width: @dialog-small-screen-width;
-  --van-dialog-font-size: @dialog-font-size;
-  --van-dialog-transition: @dialog-transition;
-  --van-dialog-border-radius: @dialog-border-radius;
-  --van-dialog-background-color: @dialog-background-color;
-  --van-dialog-header-font-weight: @dialog-header-font-weight;
-  --van-dialog-header-line-height: @dialog-header-line-height;
-  --van-dialog-header-padding-top: @dialog-header-padding-top;
-  --van-dialog-header-isolated-padding: @dialog-header-isolated-padding;
-  --van-dialog-message-padding: @dialog-message-padding;
-  --van-dialog-message-font-size: @dialog-message-font-size;
-  --van-dialog-message-line-height: @dialog-message-line-height;
-  --van-dialog-message-max-height: @dialog-message-max-height;
-  --van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color;
-  --van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top;
-  --van-dialog-button-height: @dialog-button-height;
-  --van-dialog-round-button-height: @dialog-round-button-height;
-  --van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color;
+body {
+  --van-dialog-width: 320px;
+  --van-dialog-small-screen-width: 90%;
+  --van-dialog-font-size: var(--van-font-size-lg);
+  --van-dialog-transition: var(--van-duration-base);
+  --van-dialog-radius: 16px;
+  --van-dialog-background: var(--van-background-2);
+  --van-dialog-header-font-weight: var(--van-font-bold);
+  --van-dialog-header-line-height: 24px;
+  --van-dialog-header-padding-top: 26px;
+  --van-dialog-header-isolated-padding: var(--van-padding-lg) 0;
+  --van-dialog-message-padding: var(--van-padding-lg);
+  --van-dialog-message-font-size: var(--van-font-size-md);
+  --van-dialog-message-line-height: var(--van-line-height-md);
+  --van-dialog-message-max-height: 60vh;
+  --van-dialog-has-title-message-text-color: var(--van-gray-7);
+  --van-dialog-has-title-message-padding-top: var(--van-padding-xs);
+  --van-dialog-button-height: 48px;
+  --van-dialog-round-button-height: 36px;
+  --van-dialog-confirm-button-text-color: var(--van-primary-color);
 }
 
 .van-dialog {
@@ -28,8 +26,8 @@
   width: var(--van-dialog-width);
   overflow: hidden;
   font-size: var(--van-dialog-font-size);
-  background: var(--van-dialog-background-color);
-  border-radius: var(--van-dialog-border-radius);
+  background: var(--van-dialog-background);
+  border-radius: var(--van-dialog-radius);
   backface-visibility: hidden; // avoid blurry text after scale animation
   transition: var(--van-dialog-transition);
   transition-property: transform, opacity;
@@ -39,6 +37,7 @@
   }
 
   &__header {
+    color: var(--van-text-color);
     padding-top: var(--van-dialog-header-padding-top);
     font-weight: var(--van-dialog-header-font-weight);
     line-height: var(--van-dialog-header-line-height);
@@ -58,6 +57,7 @@
   }
 
   &__message {
+    color: var(--van-text-color);
     flex: 1;
     max-height: var(--van-dialog-message-max-height);
     padding: 26px var(--van-dialog-message-padding);

package/lib/divider/index.css

@@ -1 +1 @@
-:root{--van-divider-margin: var(--van-padding-md) 0;--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width-base) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}
+body{--van-divider-margin: var(--van-padding-md) 0;--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}

package/lib/divider/index.less

@@ -1,14 +1,12 @@
-@import './var.less';
-
-:root {
-  --van-divider-margin: @divider-margin;
-  --van-divider-text-color: @divider-text-color;
-  --van-divider-font-size: @divider-font-size;
-  --van-divider-line-height: @divider-line-height;
-  --van-divider-border-color: @divider-border-color;
-  --van-divider-content-padding: @divider-content-padding;
-  --van-divider-content-left-width: @divider-content-left-width;
-  --van-divider-content-right-width: @divider-content-right-width;
+body {
+  --van-divider-margin: var(--van-padding-md) 0;
+  --van-divider-text-color: var(--van-text-color-2);
+  --van-divider-font-size: var(--van-font-size-md);
+  --van-divider-line-height: 24px;
+  --van-divider-border-color: var(--van-border-color);
+  --van-divider-content-padding: var(--van-padding-md);
+  --van-divider-content-left-width: 10%;
+  --van-divider-content-right-width: 10%;
 }
 
 .van-divider {
@@ -30,7 +28,7 @@
     height: 1px;
     border-color: inherit;
     border-style: inherit;
-    border-width: var(--van-border-width-base) 0 0;
+    border-width: var(--van-border-width) 0 0;
   }
 
   &::before {

package/lib/dropdown-item/index.css

@@ -1 +1 @@
-:root{--van-dropdown-item-z-index: 10}.van-dropdown-item{position:fixed;right:0;left:0;z-index:var(--van-dropdown-item-z-index);overflow:hidden}.van-dropdown-item__icon{display:block;line-height:inherit}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active,.van-dropdown-item__option--active .van-dropdown-item__icon{color:var(--van-dropdown-menu-option-active-color)}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__content{position:absolute;max-height:var(--van-dropdown-menu-content-max-height)}
+body{--van-dropdown-item-z-index: 10}.van-dropdown-item{position:fixed;right:0;left:0;z-index:var(--van-dropdown-item-z-index);overflow:hidden}.van-dropdown-item__icon{display:block;line-height:inherit}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active,.van-dropdown-item__option--active .van-dropdown-item__icon{color:var(--van-dropdown-menu-option-active-color)}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__content{position:absolute;max-height:var(--van-dropdown-menu-content-max-height)}

package/lib/dropdown-item/index.less

@@ -1,8 +1,5 @@
-@import './var.less';
-@import '../dropdown-menu/var.less';
-
-:root {
-  --van-dropdown-item-z-index: @dropdown-item-z-index;
+body {
+  --van-dropdown-item-z-index: 10;
 }
 
 .van-dropdown-item {

package/lib/dropdown-menu/index.css

@@ -1 +1 @@
-:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background-color: var(--van-background-color-light);--van-dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-danger-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-danger-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background-color);box-shadow:var(--van-dropdown-menu-box-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
+body{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}

package/lib/dropdown-menu/index.less

@@ -1,18 +1,15 @@
-@import './var.less';
-@import '../dropdown-item/var.less';
-
-:root {
-  --van-dropdown-menu-height: @dropdown-menu-height;
-  --van-dropdown-menu-background-color: @dropdown-menu-background-color;
-  --van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
-  --van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
-  --van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
-  --van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
-  --van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
-  --van-dropdown-menu-title-padding: @dropdown-menu-title-padding;
-  --van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
-  --van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
-  --van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
+body {
+  --van-dropdown-menu-height: 48px;
+  --van-dropdown-menu-background: var(--van-background-2);
+  --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
+  --van-dropdown-menu-title-font-size: 15px;
+  --van-dropdown-menu-title-text-color: var(--van-text-color);
+  --van-dropdown-menu-title-active-text-color: var(--van-primary-color);
+  --van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);
+  --van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
+  --van-dropdown-menu-title-line-height: var(--van-line-height-lg);
+  --van-dropdown-menu-option-active-color: var(--van-primary-color);
+  --van-dropdown-menu-content-max-height: 80%;
 }
 
 .van-dropdown-menu {
@@ -22,8 +19,8 @@
     position: relative;
     display: flex;
     height: var(--van-dropdown-menu-height);
-    background: var(--van-dropdown-menu-background-color);
-    box-shadow: var(--van-dropdown-menu-box-shadow);
+    background: var(--van-dropdown-menu-background);
+    box-shadow: var(--van-dropdown-menu-shadow);
 
     &--opened {
       z-index: calc(var(--van-dropdown-item-z-index) + 1);

package/lib/empty/index.css

@@ -1 +1 @@
-:root{--van-empty-padding: var(--van-padding-xl) 0;--van-empty-image-size: 160px;--van-empty-description-margin-top: var(--van-padding-md);--van-empty-description-padding: 0 60px;--van-empty-description-color: var(--van-text-color-2);--van-empty-description-font-size: var(--van-font-size-md);--van-empty-description-line-height: var(--van-line-height-md);--van-empty-bottom-margin-top: 24px}.van-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--van-empty-padding)}.van-empty__image{width:var(--van-empty-image-size);height:var(--van-empty-image-size)}.van-empty__image img{width:100%;height:100%}.van-empty__description{margin-top:var(--van-empty-description-margin-top);padding:var(--van-empty-description-padding);color:var(--van-empty-description-color);font-size:var(--van-empty-description-font-size);line-height:var(--van-empty-description-line-height)}.van-empty__bottom{margin-top:var(--van-empty-bottom-margin-top)}
+body{--van-empty-padding: var(--van-padding-xl) 0;--van-empty-image-size: 160px;--van-empty-description-margin-top: var(--van-padding-md);--van-empty-description-padding: 0 60px;--van-empty-description-color: var(--van-text-color-2);--van-empty-description-font-size: var(--van-font-size-md);--van-empty-description-line-height: var(--van-line-height-md);--van-empty-bottom-margin-top: 24px}.van-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--van-empty-padding)}.van-empty__image{width:var(--van-empty-image-size);height:var(--van-empty-image-size)}.van-empty__image img{width:100%;height:100%}.van-empty__description{margin-top:var(--van-empty-description-margin-top);padding:var(--van-empty-description-padding);color:var(--van-empty-description-color);font-size:var(--van-empty-description-font-size);line-height:var(--van-empty-description-line-height)}.van-empty__bottom{margin-top:var(--van-empty-bottom-margin-top)}

package/lib/empty/index.less

@@ -1,14 +1,12 @@
-@import './var.less';
-
-:root {
-  --van-empty-padding: @empty-padding;
-  --van-empty-image-size: @empty-image-size;
-  --van-empty-description-margin-top: @empty-description-margin-top;
-  --van-empty-description-padding: @empty-description-padding;
-  --van-empty-description-color: @empty-description-color;
-  --van-empty-description-font-size: @empty-description-font-size;
-  --van-empty-description-line-height: @empty-description-line-height;
-  --van-empty-bottom-margin-top: @empty-bottom-margin-top;
+body {
+  --van-empty-padding: var(--van-padding-xl) 0;
+  --van-empty-image-size: 160px;
+  --van-empty-description-margin-top: var(--van-padding-md);
+  --van-empty-description-padding: 0 60px;
+  --van-empty-description-color: var(--van-text-color-2);
+  --van-empty-description-font-size: var(--van-font-size-md);
+  --van-empty-description-line-height: var(--van-line-height-md);
+  --van-empty-bottom-margin-top: 24px;
 }
 
 .van-empty {

package/lib/field/Field.d.ts

@@ -206,7 +206,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "click-input" | "click-left-icon" | "click-right-icon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "click-input" | "click-left-icon" | "click-right-icon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     icon: StringConstructor;
     size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -292,9 +292,9 @@ declare const _default: import("vue").DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onKeypress?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
-    "onClick-input"?: ((...args: any[]) => any) | undefined;
-    "onClick-left-icon"?: ((...args: any[]) => any) | undefined;
-    "onClick-right-icon"?: ((...args: any[]) => any) | undefined;
+    onClickInput?: ((...args: any[]) => any) | undefined;
+    onClickLeftIcon?: ((...args: any[]) => any) | undefined;
+    onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: FieldType;

package/lib/field/Field.js

@@ -84,7 +84,7 @@ const fieldProps = (0, import_utils.extend)({}, import_Cell.cellSharedProps, fie
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: fieldProps,
-  emits: ["blur", "focus", "clear", "keypress", "click-input", "click-left-icon", "click-right-icon", "update:modelValue"],
+  emits: ["blur", "focus", "clear", "keypress", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -258,9 +258,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       (0, import_vue2.nextTick)(adjustTextareaSize);
       (0, import_utils.resetScroll)();
     };
-    const onClickInput = (event) => emit("click-input", event);
-    const onClickLeftIcon = (event) => emit("click-left-icon", event);
-    const onClickRightIcon = (event) => emit("click-right-icon", event);
+    const onClickInput = (event) => emit("clickInput", event);
+    const onClickLeftIcon = (event) => emit("clickLeftIcon", event);
+    const onClickRightIcon = (event) => emit("clickRightIcon", event);
     const onClear = (event) => {
       (0, import_utils.preventDefault)(event);
       emit("update:modelValue", "");

package/lib/field/index.css

@@ -1 +1 @@
-:root{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-gray-7);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required:before{margin-right:2px;color:var(--van-field-required-mark-color);content:"*"}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}
+body{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-text-color);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required:before{margin-right:2px;color:var(--van-field-required-mark-color);content:"*"}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}

package/lib/field/index.d.ts

@@ -80,7 +80,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "click-input" | "click-left-icon" | "click-right-icon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "click-input" | "click-left-icon" | "click-right-icon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -166,9 +166,9 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     onBlur?: ((...args: any[]) => any) | undefined;
     onKeypress?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
-    "onClick-input"?: ((...args: any[]) => any) | undefined;
-    "onClick-left-icon"?: ((...args: any[]) => any) | undefined;
-    "onClick-right-icon"?: ((...args: any[]) => any) | undefined;
+    onClickInput?: ((...args: any[]) => any) | undefined;
+    onClickLeftIcon?: ((...args: any[]) => any) | undefined;
+    onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./types").FieldType;

package/lib/field/index.less

@@ -1,26 +1,23 @@
-@import './var.less';
-@import '../cell/var.less';
-
-:root {
-  --van-field-label-width: @field-label-width;
-  --van-field-label-color: @field-label-color;
-  --van-field-label-margin-right: @field-label-margin-right;
-  --van-field-input-text-color: @field-input-text-color;
-  --van-field-input-error-text-color: @field-input-error-text-color;
-  --van-field-input-disabled-text-color: @field-input-disabled-text-color;
-  --van-field-placeholder-text-color: @field-placeholder-text-color;
-  --van-field-icon-size: @field-icon-size;
-  --van-field-clear-icon-size: @field-clear-icon-size;
-  --van-field-clear-icon-color: @field-clear-icon-color;
-  --van-field-right-icon-color: @field-right-icon-color;
-  --van-field-error-message-color: @field-error-message-color;
-  --van-field-error-message-font-size: @field-error-message-font-size;
-  --van-field-text-area-min-height: @field-text-area-min-height;
-  --van-field-word-limit-color: @field-word-limit-color;
-  --van-field-word-limit-font-size: @field-word-limit-font-size;
-  --van-field-word-limit-line-height: @field-word-limit-line-height;
-  --van-field-disabled-text-color: @field-disabled-text-color;
-  --van-field-required-mark-color: @field-required-mark-color;
+body {
+  --van-field-label-width: 6.2em;
+  --van-field-label-color: var(--van-text-color);
+  --van-field-label-margin-right: var(--van-padding-sm);
+  --van-field-input-text-color: var(--van-text-color);
+  --van-field-input-error-text-color: var(--van-danger-color);
+  --van-field-input-disabled-text-color: var(--van-text-color-3);
+  --van-field-placeholder-text-color: var(--van-text-color-3);
+  --van-field-icon-size: 16px;
+  --van-field-clear-icon-size: 16px;
+  --van-field-clear-icon-color: var(--van-gray-5);
+  --van-field-right-icon-color: var(--van-gray-6);
+  --van-field-error-message-color: var(--van-danger-color);
+  --van-field-error-message-font-size: 12px;
+  --van-field-text-area-min-height: 60px;
+  --van-field-word-limit-color: var(--van-gray-7);
+  --van-field-word-limit-font-size: var(--van-font-size-sm);
+  --van-field-word-limit-line-height: 16px;
+  --van-field-disabled-text-color: var(--van-text-color-3);
+  --van-field-required-mark-color: var(--van-red);
 }
 
 .van-field {

package/lib/grid-item/index.css

@@ -1 +1 @@
-:root{--van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);--van-grid-item-content-background-color: var(--van-background-color-light);--van-grid-item-content-active-color: var(--van-active-color);--van-grid-item-icon-size: 28px;--van-grid-item-text-color: var(--van-gray-7);--van-grid-item-text-font-size: var(--van-font-size-sm)}.van-grid-item{position:relative;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__icon{font-size:var(--van-grid-item-icon-size)}.van-grid-item__text{color:var(--van-grid-item-text-color);font-size:var(--van-grid-item-text-font-size);line-height:1.5;word-break:break-all}.van-grid-item__icon+.van-grid-item__text{margin-top:var(--van-padding-xs)}.van-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--van-grid-item-content-padding);background:var(--van-grid-item-content-background-color)}.van-grid-item__content:after{z-index:1;border-width:0 var(--van-border-width-base) var(--van-border-width-base) 0}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 var(--van-padding-xs)}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 var(--van-padding-xs)}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 var(--van-padding-xs) 0 0}.van-grid-item__content--surround:after{border-width:var(--van-border-width-base)}.van-grid-item__content--clickable{cursor:pointer}.van-grid-item__content--clickable:active{background-color:var(--van-grid-item-content-active-color)}
+body{--van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);--van-grid-item-content-background: var(--van-background-2);--van-grid-item-content-active-color: var(--van-active-color);--van-grid-item-icon-size: 28px;--van-grid-item-text-color: var(--van-text-color);--van-grid-item-text-font-size: var(--van-font-size-sm)}.van-grid-item{position:relative;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__icon{font-size:var(--van-grid-item-icon-size)}.van-grid-item__text{color:var(--van-grid-item-text-color);font-size:var(--van-grid-item-text-font-size);line-height:1.5;word-break:break-all}.van-grid-item__icon+.van-grid-item__text{margin-top:var(--van-padding-xs)}.van-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--van-grid-item-content-padding);background:var(--van-grid-item-content-background)}.van-grid-item__content:after{z-index:1;border-width:0 var(--van-border-width) var(--van-border-width) 0}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 var(--van-padding-xs)}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 var(--van-padding-xs)}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 var(--van-padding-xs) 0 0}.van-grid-item__content--surround:after{border-width:var(--van-border-width)}.van-grid-item__content--clickable{cursor:pointer}.van-grid-item__content--clickable:active{background-color:var(--van-grid-item-content-active-color)}

package/lib/grid-item/index.less

@@ -1,12 +1,10 @@
-@import './var.less';
-
-:root {
-  --van-grid-item-content-padding: @grid-item-content-padding;
-  --van-grid-item-content-background-color: @grid-item-content-background-color;
-  --van-grid-item-content-active-color: @grid-item-content-active-color;
-  --van-grid-item-icon-size: @grid-item-icon-size;
-  --van-grid-item-text-color: @grid-item-text-color;
-  --van-grid-item-text-font-size: @grid-item-text-font-size;
+body {
+  --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
+  --van-grid-item-content-background: var(--van-background-2);
+  --van-grid-item-content-active-color: var(--van-active-color);
+  --van-grid-item-icon-size: 28px;
+  --van-grid-item-text-color: var(--van-text-color);
+  --van-grid-item-text-font-size: var(--van-font-size-sm);
 }
 
 .van-grid-item {
@@ -39,12 +37,11 @@
     box-sizing: border-box;
     height: 100%;
     padding: var(--van-grid-item-content-padding);
-    background: var(--van-grid-item-content-background-color);
+    background: var(--van-grid-item-content-background);
 
     &::after {
       z-index: 1;
-      border-width: 0 var(--van-border-width-base) var(--van-border-width-base)
-        0;
+      border-width: 0 var(--van-border-width) var(--van-border-width) 0;
     }
 
     &--square {
@@ -85,7 +82,7 @@
 
     &--surround {
       &::after {
-        border-width: var(--van-border-width-base);
+        border-width: var(--van-border-width);
       }
     }
 

package/lib/image/index.css

@@ -1 +1 @@
-:root{--van-image-placeholder-text-color: var(--van-text-color-2);--van-image-placeholder-font-size: var(--van-font-size-md);--van-image-placeholder-background-color: var(--van-background-color);--van-image-loading-icon-size: 32px;--van-image-loading-icon-color: var(--van-gray-4);--van-image-error-icon-size: 32px;--van-image-error-icon-color: var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-border-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image__img,.van-image__error,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background:var(--van-image-placeholder-background-color)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}
+body{--van-image-placeholder-text-color: var(--van-text-color-2);--van-image-placeholder-font-size: var(--van-font-size-md);--van-image-placeholder-background: var(--van-background);--van-image-loading-icon-size: 32px;--van-image-loading-icon-color: var(--van-gray-4);--van-image-error-icon-size: 32px;--van-image-error-icon-color: var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image__img,.van-image__error,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background:var(--van-image-placeholder-background)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}

package/lib/image/index.less

@@ -1,13 +1,11 @@
-@import './var.less';
-
-:root {
-  --van-image-placeholder-text-color: @image-placeholder-text-color;
-  --van-image-placeholder-font-size: @image-placeholder-font-size;
-  --van-image-placeholder-background-color: @image-placeholder-background-color;
-  --van-image-loading-icon-size: @image-loading-icon-size;
-  --van-image-loading-icon-color: @image-loading-icon-color;
-  --van-image-error-icon-size: @image-error-icon-size;
-  --van-image-error-icon-color: @image-error-icon-color;
+body {
+  --van-image-placeholder-text-color: var(--van-text-color-2);
+  --van-image-placeholder-font-size: var(--van-font-size-md);
+  --van-image-placeholder-background: var(--van-background);
+  --van-image-loading-icon-size: 32px;
+  --van-image-loading-icon-color: var(--van-gray-4);
+  --van-image-error-icon-size: 32px;
+  --van-image-error-icon-color: var(--van-gray-4);
 }
 
 .van-image {
@@ -16,7 +14,7 @@
 
   &--round {
     overflow: hidden;
-    border-radius: var(--van-border-radius-max);
+    border-radius: var(--van-radius-max);
 
     .van-image__img {
       border-radius: inherit;
@@ -42,7 +40,7 @@
     justify-content: center;
     color: var(--van-image-placeholder-text-color);
     font-size: var(--van-image-placeholder-font-size);
-    background: var(--van-image-placeholder-background-color);
+    background: var(--van-image-placeholder-background);
   }
 
   &__loading-icon {

package/lib/image-preview/index.css

@@ -1 +1 @@
-:root{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background-color: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background-color)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
+body{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}

package/lib/image-preview/index.less

@@ -1,15 +1,13 @@
-@import './var.less';
-
-:root {
-  --van-image-preview-index-text-color: @image-preview-index-text-color;
-  --van-image-preview-index-font-size: @image-preview-index-font-size;
-  --van-image-preview-index-line-height: @image-preview-index-line-height;
-  --van-image-preview-index-text-shadow: @image-preview-index-text-shadow;
-  --van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
-  --van-image-preview-close-icon-size: @image-preview-close-icon-size;
-  --van-image-preview-close-icon-color: @image-preview-close-icon-color;
-  --van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
-  --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
+body {
+  --van-image-preview-index-text-color: var(--van-white);
+  --van-image-preview-index-font-size: var(--van-font-size-md);
+  --van-image-preview-index-line-height: var(--van-line-height-md);
+  --van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);
+  --van-image-preview-overlay-background: rgba(0, 0, 0, 0.9);
+  --van-image-preview-close-icon-size: 22px;
+  --van-image-preview-close-icon-color: var(--van-gray-5);
+  --van-image-preview-close-icon-margin: var(--van-padding-md);
+  --van-image-preview-close-icon-z-index: 1;
 }
 
 .van-image-preview {
@@ -80,7 +78,7 @@
   }
 
   &__overlay {
-    background: var(--van-image-preview-overlay-background-color);
+    background: var(--van-image-preview-overlay-background);
   }
 
   &__close-icon {

package/lib/index-anchor/index.css

@@ -1 +1 @@
-:root{--van-index-anchor-z-index: 1;--van-index-anchor-padding: 0 var(--van-padding-md);--van-index-anchor-text-color: var(--van-text-color);--van-index-anchor-font-weight: var(--van-font-weight-bold);--van-index-anchor-font-size: var(--van-font-size-md);--van-index-anchor-line-height: 32px;--van-index-anchor-background-color: transparent;--van-index-anchor-sticky-text-color: var(--van-danger-color);--van-index-anchor-sticky-background-color: var(--van-background-color-light)}.van-index-anchor{z-index:var(--van-index-anchor-z-index);box-sizing:border-box;padding:var(--van-index-anchor-padding);color:var(--van-index-anchor-text-color);font-weight:var(--van-index-anchor-font-weight);font-size:var(--van-index-anchor-font-size);line-height:var(--van-index-anchor-line-height);background:var(--van-index-anchor-background-color)}.van-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--van-index-anchor-sticky-text-color);background:var(--van-index-anchor-sticky-background-color)}
+body{--van-index-anchor-z-index: 1;--van-index-anchor-padding: 0 var(--van-padding-md);--van-index-anchor-text-color: var(--van-text-color);--van-index-anchor-font-weight: var(--van-font-bold);--van-index-anchor-font-size: var(--van-font-size-md);--van-index-anchor-line-height: 32px;--van-index-anchor-background: transparent;--van-index-anchor-sticky-text-color: var(--van-primary-color);--van-index-anchor-sticky-background: var(--van-background-2)}.van-index-anchor{z-index:var(--van-index-anchor-z-index);box-sizing:border-box;padding:var(--van-index-anchor-padding);color:var(--van-index-anchor-text-color);font-weight:var(--van-index-anchor-font-weight);font-size:var(--van-index-anchor-font-size);line-height:var(--van-index-anchor-line-height);background:var(--van-index-anchor-background)}.van-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--van-index-anchor-sticky-text-color);background:var(--van-index-anchor-sticky-background)}

package/lib/index-anchor/index.less

@@ -1,15 +1,13 @@
-@import './var.less';
-
-:root {
-  --van-index-anchor-z-index: @index-anchor-z-index;
-  --van-index-anchor-padding: @index-anchor-padding;
-  --van-index-anchor-text-color: @index-anchor-text-color;
-  --van-index-anchor-font-weight: @index-anchor-font-weight;
-  --van-index-anchor-font-size: @index-anchor-font-size;
-  --van-index-anchor-line-height: @index-anchor-line-height;
-  --van-index-anchor-background-color: @index-anchor-background-color;
-  --van-index-anchor-sticky-text-color: @index-anchor-sticky-text-color;
-  --van-index-anchor-sticky-background-color: @index-anchor-sticky-background-color;
+body {
+  --van-index-anchor-z-index: 1;
+  --van-index-anchor-padding: 0 var(--van-padding-md);
+  --van-index-anchor-text-color: var(--van-text-color);
+  --van-index-anchor-font-weight: var(--van-font-bold);
+  --van-index-anchor-font-size: var(--van-font-size-md);
+  --van-index-anchor-line-height: 32px;
+  --van-index-anchor-background: transparent;
+  --van-index-anchor-sticky-text-color: var(--van-primary-color);
+  --van-index-anchor-sticky-background: var(--van-background-2);
 }
 
 .van-index-anchor {
@@ -20,7 +18,7 @@
   font-weight: var(--van-index-anchor-font-weight);
   font-size: var(--van-index-anchor-font-size);
   line-height: var(--van-index-anchor-line-height);
-  background: var(--van-index-anchor-background-color);
+  background: var(--van-index-anchor-background);
 
   &--sticky {
     position: fixed;
@@ -28,6 +26,6 @@
     right: 0;
     left: 0;
     color: var(--van-index-anchor-sticky-text-color);
-    background: var(--van-index-anchor-sticky-background-color);
+    background: var(--van-index-anchor-sticky-background);
   }
 }