vant 3.4.5 → 4.0.0-alpha.1

package/lib/stepper/index.less

@@ -1,19 +1,17 @@
-@import './var.less';
-
-:root {
-  --van-stepper-background-color: @stepper-background-color;
-  --van-stepper-button-icon-color: @stepper-button-icon-color;
-  --van-stepper-button-disabled-color: @stepper-button-disabled-color;
-  --van-stepper-button-disabled-icon-color: @stepper-button-disabled-icon-color;
-  --van-stepper-button-round-theme-color: @stepper-button-round-theme-color;
-  --van-stepper-input-width: @stepper-input-width;
-  --van-stepper-input-height: @stepper-input-height;
-  --van-stepper-input-font-size: @stepper-input-font-size;
-  --van-stepper-input-line-height: @stepper-input-line-height;
-  --van-stepper-input-text-color: @stepper-input-text-color;
-  --van-stepper-input-disabled-text-color: @stepper-input-disabled-text-color;
-  --van-stepper-input-disabled-background-color: @stepper-input-disabled-background-color;
-  --van-stepper-border-radius: @stepper-border-radius;
+body {
+  --van-stepper-background: var(--van-active-color);
+  --van-stepper-button-icon-color: var(--van-text-color);
+  --van-stepper-button-disabled-color: var(--van-background);
+  --van-stepper-button-disabled-icon-color: var(--van-gray-5);
+  --van-stepper-button-round-theme-color: var(--van-primary-color);
+  --van-stepper-input-width: 32px;
+  --van-stepper-input-height: 28px;
+  --van-stepper-input-font-size: var(--van-font-size-md);
+  --van-stepper-input-line-height: normal;
+  --van-stepper-input-text-color: var(--van-text-color);
+  --van-stepper-input-disabled-text-color: var(--van-text-color-3);
+  --van-stepper-input-disabled-background: var(--van-active-color);
+  --van-stepper-radius: var(--van-radius-md);
 }
 
 .van-stepper {
@@ -30,7 +28,7 @@
     padding: 0;
     color: var(--van-stepper-button-icon-color);
     vertical-align: middle;
-    background: var(--van-stepper-background-color);
+    background: var(--van-stepper-background);
     border: 0;
 
     &::before {
@@ -61,8 +59,7 @@
   }
 
   &__minus {
-    border-radius: var(--van-stepper-border-radius) 0 0
-      var(--van-stepper-border-radius);
+    border-radius: var(--van-stepper-radius) 0 0 var(--van-stepper-radius);
 
     &::after {
       display: none;
@@ -70,8 +67,7 @@
   }
 
   &__plus {
-    border-radius: 0 var(--van-stepper-border-radius)
-      var(--van-stepper-border-radius) 0;
+    border-radius: 0 var(--van-stepper-radius) var(--van-stepper-radius) 0;
   }
 
   &__input {
@@ -85,7 +81,7 @@
     line-height: var(--van-stepper-input-line-height);
     text-align: center;
     vertical-align: middle;
-    background: var(--van-stepper-background-color);
+    background: var(--van-stepper-background);
     border: 0;
     border-width: 1px 0;
     border-radius: 0;
@@ -93,7 +89,7 @@
 
     &:disabled {
       color: var(--van-stepper-input-disabled-text-color);
-      background-color: var(--van-stepper-input-disabled-background-color);
+      background-color: var(--van-stepper-input-disabled-background);
       // fix disabled color in iOS
       -webkit-text-fill-color: var(--van-stepper-input-disabled-text-color);
       opacity: 1;
@@ -126,7 +122,7 @@
 
     .van-stepper__minus {
       color: var(--van-stepper-button-round-theme-color);
-      background-color: var(--van-background-color-light);
+      background-color: var(--van-background-2);
       border: 1px solid var(--van-stepper-button-round-theme-color);
     }
   }

package/lib/steps/Steps.d.ts

@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     activeColor: StringConstructor;
     inactiveIcon: StringConstructor;
     inactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-step"[], "click-step", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickStep"[], "clickStep", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     inactiveIcon: StringConstructor;
     inactiveColor: StringConstructor;
 }>> & {
-    "onClick-step"?: ((...args: any[]) => any) | undefined;
+    onClickStep?: ((...args: any[]) => any) | undefined;
 }, {
     active: string | number;
     direction: StepsDirection;

package/lib/steps/Steps.js

@@ -44,7 +44,7 @@ const STEPS_KEY = Symbol(name);
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: stepsProps,
-  emits: ["click-step"],
+  emits: ["clickStep"],
   setup(props, {
     emit,
     slots
@@ -52,7 +52,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const {
       linkChildren
     } = (0, import_use.useChildren)(STEPS_KEY);
-    const onClickStep = (index) => emit("click-step", index);
+    const onClickStep = (index) => emit("clickStep", index);
     linkChildren({
       props,
       onClickStep

package/lib/steps/index.css

@@ -1 +1 @@
-:root{--van-steps-background-color: var(--van-background-color-light)}.van-steps{overflow:hidden;background-color:var(--van-steps-background-color)}.van-steps--horizontal{padding:10px 10px 0}.van-steps--horizontal .van-steps__items{position:relative;display:flex;margin:0 0 10px;padding-bottom:22px}.van-steps--vertical{padding:0 0 0 var(--van-padding-xl)}
+body{--van-steps-background: var(--van-background-2)}.van-steps{overflow:hidden;background-color:var(--van-steps-background)}.van-steps--horizontal{padding:10px 10px 0}.van-steps--horizontal .van-steps__items{position:relative;display:flex;margin:0 0 10px;padding-bottom:22px}.van-steps--vertical{padding:0 0 0 var(--van-padding-xl)}

package/lib/steps/index.d.ts

@@ -16,7 +16,7 @@ export declare const Steps: import("../utils").WithInstall<import("vue").DefineC
     activeColor: StringConstructor;
     inactiveIcon: StringConstructor;
     inactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-step"[], "click-step", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickStep"[], "clickStep", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -35,7 +35,7 @@ export declare const Steps: import("../utils").WithInstall<import("vue").DefineC
     inactiveIcon: StringConstructor;
     inactiveColor: StringConstructor;
 }>> & {
-    "onClick-step"?: ((...args: any[]) => any) | undefined;
+    onClickStep?: ((...args: any[]) => any) | undefined;
 }, {
     active: string | number;
     direction: import("./Steps").StepsDirection;

package/lib/steps/index.less

@@ -1,12 +1,10 @@
-@import './var.less';
-
-:root {
-  --van-steps-background-color: @steps-background-color;
+body {
+  --van-steps-background: var(--van-background-2);
 }
 
 .van-steps {
   overflow: hidden;
-  background-color: var(--van-steps-background-color);
+  background-color: var(--van-steps-background);
 
   &--horizontal {
     padding: 10px 10px 0;

package/lib/sticky/index.css

@@ -1 +1 @@
-:root{--van-sticky-z-index: 99}.van-sticky--fixed{position:fixed;z-index:var(--van-sticky-z-index)}
+body{--van-sticky-z-index: 99}.van-sticky--fixed{position:fixed;z-index:var(--van-sticky-z-index)}

package/lib/sticky/index.less

@@ -1,7 +1,5 @@
-@import './var.less';
-
-:root {
-  --van-sticky-z-index: @sticky-z-index;
+body {
+  --van-sticky-z-index: 99;
 }
 
 .van-sticky {

package/lib/style/animation.css

@@ -1 +1 @@
-@keyframes van-slide-up-enter{0%{transform:translateY(100%)}}@keyframes van-slide-up-leave{to{transform:translateY(100%)}}@keyframes van-slide-down-enter{0%{transform:translateY(-100%)}}@keyframes van-slide-down-leave{to{transform:translateY(-100%)}}@keyframes van-slide-left-enter{0%{transform:translate(-100%)}}@keyframes van-slide-left-leave{to{transform:translate(-100%)}}@keyframes van-slide-right-enter{0%{transform:translate(100%)}}@keyframes van-slide-right-leave{to{transform:translate(100%)}}@keyframes van-fade-in{0%{opacity:0}to{opacity:1}}@keyframes van-fade-out{0%{opacity:1}to{opacity:0}}@keyframes van-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.van-fade-enter-active{animation:var(--van-animation-duration-base) van-fade-in both var(--van-animation-timing-function-enter)}.van-fade-leave-active{animation:var(--van-animation-duration-base) van-fade-out both var(--van-animation-timing-function-leave)}.van-slide-up-enter-active{animation:van-slide-up-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-up-leave-active{animation:van-slide-up-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-down-enter-active{animation:van-slide-down-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-down-leave-active{animation:van-slide-down-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-left-enter-active{animation:van-slide-left-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-left-leave-active{animation:van-slide-left-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-right-enter-active{animation:van-slide-right-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-right-leave-active{animation:van-slide-right-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}
+@keyframes van-slide-up-enter{0%{transform:translateY(100%)}}@keyframes van-slide-up-leave{to{transform:translateY(100%)}}@keyframes van-slide-down-enter{0%{transform:translateY(-100%)}}@keyframes van-slide-down-leave{to{transform:translateY(-100%)}}@keyframes van-slide-left-enter{0%{transform:translate(-100%)}}@keyframes van-slide-left-leave{to{transform:translate(-100%)}}@keyframes van-slide-right-enter{0%{transform:translate(100%)}}@keyframes van-slide-right-leave{to{transform:translate(100%)}}@keyframes van-fade-in{0%{opacity:0}to{opacity:1}}@keyframes van-fade-out{0%{opacity:1}to{opacity:0}}@keyframes van-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.van-fade-enter-active{animation:var(--van-duration-base) van-fade-in both var(--van-ease-out)}.van-fade-leave-active{animation:var(--van-duration-base) van-fade-out both var(--van-ease-in)}.van-slide-up-enter-active{animation:van-slide-up-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-up-leave-active{animation:van-slide-up-leave var(--van-duration-base) both var(--van-ease-in)}.van-slide-down-enter-active{animation:van-slide-down-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-down-leave-active{animation:van-slide-down-leave var(--van-duration-base) both var(--van-ease-in)}.van-slide-left-enter-active{animation:van-slide-left-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-left-leave-active{animation:van-slide-left-leave var(--van-duration-base) both var(--van-ease-in)}.van-slide-right-enter-active{animation:van-slide-right-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-right-leave-active{animation:van-slide-right-leave var(--van-duration-base) both var(--van-ease-in)}

package/lib/style/animation.less

@@ -1,5 +1,3 @@
-@import './var';
-
 @keyframes van-slide-up-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -80,60 +78,58 @@
 
 .van-fade {
   &-enter-active {
-    animation: var(--van-animation-duration-base) van-fade-in both
-      var(--van-animation-timing-function-enter);
+    animation: var(--van-duration-base) van-fade-in both var(--van-ease-out);
   }
 
   &-leave-active {
-    animation: var(--van-animation-duration-base) van-fade-out both
-      var(--van-animation-timing-function-leave);
+    animation: var(--van-duration-base) van-fade-out both var(--van-ease-in);
   }
 }
 
 .van-slide-up {
   &-enter-active {
-    animation: van-slide-up-enter var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-enter);
+    animation: van-slide-up-enter var(--van-duration-base) both
+      var(--van-ease-out);
   }
 
   &-leave-active {
-    animation: van-slide-up-leave var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-leave);
+    animation: van-slide-up-leave var(--van-duration-base) both
+      var(--van-ease-in);
   }
 }
 
 .van-slide-down {
   &-enter-active {
-    animation: van-slide-down-enter var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-enter);
+    animation: van-slide-down-enter var(--van-duration-base) both
+      var(--van-ease-out);
   }
 
   &-leave-active {
-    animation: van-slide-down-leave var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-leave);
+    animation: van-slide-down-leave var(--van-duration-base) both
+      var(--van-ease-in);
   }
 }
 
 .van-slide-left {
   &-enter-active {
-    animation: van-slide-left-enter var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-enter);
+    animation: van-slide-left-enter var(--van-duration-base) both
+      var(--van-ease-out);
   }
 
   &-leave-active {
-    animation: van-slide-left-leave var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-leave);
+    animation: van-slide-left-leave var(--van-duration-base) both
+      var(--van-ease-in);
   }
 }
 
 .van-slide-right {
   &-enter-active {
-    animation: van-slide-right-enter var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-enter);
+    animation: van-slide-right-enter var(--van-duration-base) both
+      var(--van-ease-out);
   }
 
   &-leave-active {
-    animation: van-slide-right-leave var(--van-animation-duration-base) both
-      var(--van-animation-timing-function-leave);
+    animation: van-slide-right-leave var(--van-duration-base) both
+      var(--van-ease-in);
   }
 }

package/lib/style/base.css

@@ -1 +1 @@
-:root{--van-black: #000;--van-white: #fff;--van-gray-1: #f7f8fa;--van-gray-2: #f2f3f5;--van-gray-3: #ebedf0;--van-gray-4: #dcdee0;--van-gray-5: #c8c9cc;--van-gray-6: #969799;--van-gray-7: #646566;--van-gray-8: #323233;--van-red: #ee0a24;--van-blue: #1989fa;--van-orange: #ff976a;--van-orange-dark: #ed6a0c;--van-orange-light: #fffbe8;--van-green: #07c160;--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color: var(--van-blue);--van-success-color: var(--van-green);--van-danger-color: var(--van-red);--van-warning-color: var(--van-orange);--van-text-color: var(--van-gray-8);--van-text-color-2: var(--van-gray-6);--van-text-color-3: var(--van-gray-5);--van-text-link-color: #576b95;--van-active-color: var(--van-gray-2);--van-active-opacity: .6;--van-disabled-opacity: .5;--van-background-color: var(--van-gray-1);--van-background-color-light: var(--van-white);--van-padding-base: 4px;--van-padding-xs: 8px;--van-padding-sm: 12px;--van-padding-md: 16px;--van-padding-lg: 24px;--van-padding-xl: 32px;--van-font-size-xs: 10px;--van-font-size-sm: 12px;--van-font-size-md: 14px;--van-font-size-lg: 16px;--van-font-weight-bold: 500;--van-line-height-xs: 14px;--van-line-height-sm: 18px;--van-line-height-md: 20px;--van-line-height-lg: 22px;--van-base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;--van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;--van-animation-duration-base: .3s;--van-animation-duration-fast: .2s;--van-animation-timing-function-enter: ease-out;--van-animation-timing-function-leave: ease-in;--van-border-color: var(--van-gray-3);--van-border-width-base: 1px;--van-border-radius-sm: 2px;--van-border-radius-md: 4px;--van-border-radius-lg: 8px;--van-border-radius-max: 999px}html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif}a{text-decoration:none}input,button,textarea{color:inherit;font:inherit}a:focus,input:focus,button:focus,textarea:focus,[class*=van-]:focus{outline:none}ol,ul{margin:0;padding:0;list-style:none}@keyframes van-slide-up-enter{0%{transform:translateY(100%)}}@keyframes van-slide-up-leave{to{transform:translateY(100%)}}@keyframes van-slide-down-enter{0%{transform:translateY(-100%)}}@keyframes van-slide-down-leave{to{transform:translateY(-100%)}}@keyframes van-slide-left-enter{0%{transform:translate(-100%)}}@keyframes van-slide-left-leave{to{transform:translate(-100%)}}@keyframes van-slide-right-enter{0%{transform:translate(100%)}}@keyframes van-slide-right-leave{to{transform:translate(100%)}}@keyframes van-fade-in{0%{opacity:0}to{opacity:1}}@keyframes van-fade-out{0%{opacity:1}to{opacity:0}}@keyframes van-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.van-fade-enter-active{animation:var(--van-animation-duration-base) van-fade-in both var(--van-animation-timing-function-enter)}.van-fade-leave-active{animation:var(--van-animation-duration-base) van-fade-out both var(--van-animation-timing-function-leave)}.van-slide-up-enter-active{animation:van-slide-up-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-up-leave-active{animation:van-slide-up-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-down-enter-active{animation:van-slide-down-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-down-leave-active{animation:van-slide-down-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-left-enter-active{animation:van-slide-left-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-left-leave-active{animation:van-slide-left-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-right-enter-active{animation:van-slide-right-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-right-leave-active{animation:van-slide-right-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-clearfix:after{display:table;clear:both;content:""}.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}.van-safe-area-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.van-haptics-feedback{cursor:pointer}.van-haptics-feedback:active{opacity:var(--van-active-opacity)}[class*=van-hairline]:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--van-border-color);transform:scale(.5)}.van-hairline,.van-hairline--top,.van-hairline--left,.van-hairline--right,.van-hairline--bottom,.van-hairline--surround,.van-hairline--top-bottom{position:relative}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after,.van-hairline-unset--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
+body{--van-black: #000;--van-white: #fff;--van-gray-1: #f7f8fa;--van-gray-2: #f2f3f5;--van-gray-3: #ebedf0;--van-gray-4: #dcdee0;--van-gray-5: #c8c9cc;--van-gray-6: #969799;--van-gray-7: #646566;--van-gray-8: #323233;--van-red: #ee0a24;--van-blue: #1989fa;--van-orange: #ff976a;--van-orange-dark: #ed6a0c;--van-orange-light: #fffbe8;--van-green: #07c160;--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color: var(--van-blue);--van-success-color: var(--van-green);--van-danger-color: var(--van-red);--van-warning-color: var(--van-orange);--van-text-color: var(--van-gray-8);--van-text-color-2: var(--van-gray-6);--van-text-color-3: var(--van-gray-5);--van-link-color: #576b95;--van-active-color: var(--van-gray-2);--van-active-opacity: .6;--van-disabled-opacity: .5;--van-background: var(--van-gray-1);--van-background-2: var(--van-white);--van-background-3: var(--van-white);--van-padding-base: 4px;--van-padding-xs: 8px;--van-padding-sm: 12px;--van-padding-md: 16px;--van-padding-lg: 24px;--van-padding-xl: 32px;--van-font-bold: 600;--van-font-size-xs: 10px;--van-font-size-sm: 12px;--van-font-size-md: 14px;--van-font-size-lg: 16px;--van-line-height-xs: 14px;--van-line-height-sm: 18px;--van-line-height-md: 20px;--van-line-height-lg: 22px;--van-base-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;--van-price-font: avenir-heavy, "PingFang SC", helvetica neue, arial, sans-serif;--van-duration-base: .3s;--van-duration-fast: .2s;--van-ease-out: ease-out;--van-ease-in: ease-in;--van-border-color: var(--van-gray-3);--van-border-width: 1px;--van-radius-sm: 2px;--van-radius-md: 4px;--van-radius-lg: 8px;--van-radius-max: 999px}.van-theme-dark{--van-text-color: #f5f5f5;--van-text-color-2: #707070;--van-text-color-3: #4d4d4d;--van-border-color: #3a3a3c;--van-active-color: #3a3a3c;--van-background: #000;--van-background-2: #1c1c1e;--van-background-3: #37363b}html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:var(--van-base-font)}a{text-decoration:none}input,button,textarea{color:inherit;font:inherit}a:focus,input:focus,button:focus,textarea:focus,[class*=van-]:focus{outline:none}ol,ul{margin:0;padding:0;list-style:none}@keyframes van-slide-up-enter{0%{transform:translateY(100%)}}@keyframes van-slide-up-leave{to{transform:translateY(100%)}}@keyframes van-slide-down-enter{0%{transform:translateY(-100%)}}@keyframes van-slide-down-leave{to{transform:translateY(-100%)}}@keyframes van-slide-left-enter{0%{transform:translate(-100%)}}@keyframes van-slide-left-leave{to{transform:translate(-100%)}}@keyframes van-slide-right-enter{0%{transform:translate(100%)}}@keyframes van-slide-right-leave{to{transform:translate(100%)}}@keyframes van-fade-in{0%{opacity:0}to{opacity:1}}@keyframes van-fade-out{0%{opacity:1}to{opacity:0}}@keyframes van-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.van-fade-enter-active{animation:var(--van-duration-base) van-fade-in both var(--van-ease-out)}.van-fade-leave-active{animation:var(--van-duration-base) van-fade-out both var(--van-ease-in)}.van-slide-up-enter-active{animation:van-slide-up-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-up-leave-active{animation:van-slide-up-leave var(--van-duration-base) both var(--van-ease-in)}.van-slide-down-enter-active{animation:van-slide-down-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-down-leave-active{animation:van-slide-down-leave var(--van-duration-base) both var(--van-ease-in)}.van-slide-left-enter-active{animation:van-slide-left-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-left-leave-active{animation:van-slide-left-leave var(--van-duration-base) both var(--van-ease-in)}.van-slide-right-enter-active{animation:van-slide-right-enter var(--van-duration-base) both var(--van-ease-out)}.van-slide-right-leave-active{animation:van-slide-right-leave var(--van-duration-base) both var(--van-ease-in)}.van-clearfix:after{display:table;clear:both;content:""}.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}.van-safe-area-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.van-safe-area-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.van-haptics-feedback{cursor:pointer}.van-haptics-feedback:active{opacity:var(--van-active-opacity)}[class*=van-hairline]:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--van-border-color);transform:scale(.5)}.van-hairline,.van-hairline--top,.van-hairline--left,.van-hairline--right,.van-hairline--bottom,.van-hairline--surround,.van-hairline--top-bottom{position:relative}.van-hairline--top:after{border-top-width:var(--van-border-width)}.van-hairline--left:after{border-left-width:var(--van-border-width)}.van-hairline--right:after{border-right-width:var(--van-border-width)}.van-hairline--bottom:after{border-bottom-width:var(--van-border-width)}.van-hairline--top-bottom:after,.van-hairline-unset--top-bottom:after{border-width:var(--van-border-width) 0}.van-hairline--surround:after{border-width:var(--van-border-width)}

package/lib/style/base.less

@@ -2,7 +2,6 @@
  * Entry of basic styles
  */
 
-@import './var.less';
 @import './css-variables.less';
 @import './normalize.less';
 @import './animation.less';
@@ -26,6 +25,11 @@
   .multi-ellipsis(3);
 }
 
+.van-safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
 .van-safe-area-bottom {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
@@ -57,29 +61,29 @@
   }
 
   &--top::after {
-    border-top-width: @border-width-base;
+    border-top-width: var(--van-border-width);
   }
 
   &--left::after {
-    border-left-width: @border-width-base;
+    border-left-width: var(--van-border-width);
   }
 
   &--right::after {
-    border-right-width: @border-width-base;
+    border-right-width: var(--van-border-width);
   }
 
   &--bottom::after {
-    border-bottom-width: @border-width-base;
+    border-bottom-width: var(--van-border-width);
   }
 
   &,
   &-unset {
     &--top-bottom::after {
-      border-width: @border-width-base 0;
+      border-width: var(--van-border-width) 0;
     }
   }
 
   &--surround::after {
-    border-width: @border-width-base;
+    border-width: var(--van-border-width);
   }
 }

package/lib/style/css-variables.css

@@ -1 +1 @@
-:root{--van-black: #000;--van-white: #fff;--van-gray-1: #f7f8fa;--van-gray-2: #f2f3f5;--van-gray-3: #ebedf0;--van-gray-4: #dcdee0;--van-gray-5: #c8c9cc;--van-gray-6: #969799;--van-gray-7: #646566;--van-gray-8: #323233;--van-red: #ee0a24;--van-blue: #1989fa;--van-orange: #ff976a;--van-orange-dark: #ed6a0c;--van-orange-light: #fffbe8;--van-green: #07c160;--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color: var(--van-blue);--van-success-color: var(--van-green);--van-danger-color: var(--van-red);--van-warning-color: var(--van-orange);--van-text-color: var(--van-gray-8);--van-text-color-2: var(--van-gray-6);--van-text-color-3: var(--van-gray-5);--van-text-link-color: #576b95;--van-active-color: var(--van-gray-2);--van-active-opacity: .6;--van-disabled-opacity: .5;--van-background-color: var(--van-gray-1);--van-background-color-light: var(--van-white);--van-padding-base: 4px;--van-padding-xs: 8px;--van-padding-sm: 12px;--van-padding-md: 16px;--van-padding-lg: 24px;--van-padding-xl: 32px;--van-font-size-xs: 10px;--van-font-size-sm: 12px;--van-font-size-md: 14px;--van-font-size-lg: 16px;--van-font-weight-bold: 500;--van-line-height-xs: 14px;--van-line-height-sm: 18px;--van-line-height-md: 20px;--van-line-height-lg: 22px;--van-base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;--van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;--van-animation-duration-base: .3s;--van-animation-duration-fast: .2s;--van-animation-timing-function-enter: ease-out;--van-animation-timing-function-leave: ease-in;--van-border-color: var(--van-gray-3);--van-border-width-base: 1px;--van-border-radius-sm: 2px;--van-border-radius-md: 4px;--van-border-radius-lg: 8px;--van-border-radius-max: 999px}
+body{--van-black: #000;--van-white: #fff;--van-gray-1: #f7f8fa;--van-gray-2: #f2f3f5;--van-gray-3: #ebedf0;--van-gray-4: #dcdee0;--van-gray-5: #c8c9cc;--van-gray-6: #969799;--van-gray-7: #646566;--van-gray-8: #323233;--van-red: #ee0a24;--van-blue: #1989fa;--van-orange: #ff976a;--van-orange-dark: #ed6a0c;--van-orange-light: #fffbe8;--van-green: #07c160;--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color: var(--van-blue);--van-success-color: var(--van-green);--van-danger-color: var(--van-red);--van-warning-color: var(--van-orange);--van-text-color: var(--van-gray-8);--van-text-color-2: var(--van-gray-6);--van-text-color-3: var(--van-gray-5);--van-link-color: #576b95;--van-active-color: var(--van-gray-2);--van-active-opacity: .6;--van-disabled-opacity: .5;--van-background: var(--van-gray-1);--van-background-2: var(--van-white);--van-background-3: var(--van-white);--van-padding-base: 4px;--van-padding-xs: 8px;--van-padding-sm: 12px;--van-padding-md: 16px;--van-padding-lg: 24px;--van-padding-xl: 32px;--van-font-bold: 600;--van-font-size-xs: 10px;--van-font-size-sm: 12px;--van-font-size-md: 14px;--van-font-size-lg: 16px;--van-line-height-xs: 14px;--van-line-height-sm: 18px;--van-line-height-md: 20px;--van-line-height-lg: 22px;--van-base-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;--van-price-font: avenir-heavy, "PingFang SC", helvetica neue, arial, sans-serif;--van-duration-base: .3s;--van-duration-fast: .2s;--van-ease-out: ease-out;--van-ease-in: ease-in;--van-border-color: var(--van-gray-3);--van-border-width: 1px;--van-radius-sm: 2px;--van-radius-md: 4px;--van-radius-lg: 8px;--van-radius-max: 999px}.van-theme-dark{--van-text-color: #f5f5f5;--van-text-color-2: #707070;--van-text-color-3: #4d4d4d;--van-border-color: #3a3a3c;--van-active-color: #3a3a3c;--van-background: #000;--van-background-2: #1c1c1e;--van-background-3: #37363b}

package/lib/style/css-variables.less

@@ -1,75 +1,90 @@
-@import './var.less';
-
-:root {
+body {
   // Color Palette
-  --van-black: @black;
-  --van-white: @white;
-  --van-gray-1: @gray-1;
-  --van-gray-2: @gray-2;
-  --van-gray-3: @gray-3;
-  --van-gray-4: @gray-4;
-  --van-gray-5: @gray-5;
-  --van-gray-6: @gray-6;
-  --van-gray-7: @gray-7;
-  --van-gray-8: @gray-8;
-  --van-red: @red;
-  --van-blue: @blue;
-  --van-orange: @orange;
-  --van-orange-dark: @orange-dark;
-  --van-orange-light: @orange-light;
-  --van-green: @green;
+  --van-black: #000;
+  --van-white: #fff;
+  --van-gray-1: #f7f8fa;
+  --van-gray-2: #f2f3f5;
+  --van-gray-3: #ebedf0;
+  --van-gray-4: #dcdee0;
+  --van-gray-5: #c8c9cc;
+  --van-gray-6: #969799;
+  --van-gray-7: #646566;
+  --van-gray-8: #323233;
+  --van-red: #ee0a24;
+  --van-blue: #1989fa;
+  --van-orange: #ff976a;
+  --van-orange-dark: #ed6a0c;
+  --van-orange-light: #fffbe8;
+  --van-green: #07c160;
 
   // Gradient Colors
-  --van-gradient-red: @gradient-red;
-  --van-gradient-orange: @gradient-orange;
+  --van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+  --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
 
   // Component Colors
-  --van-primary-color: @primary-color;
-  --van-success-color: @success-color;
-  --van-danger-color: @danger-color;
-  --van-warning-color: @warning-color;
-  --van-text-color: @text-color;
-  --van-text-color-2: @text-color-2;
-  --van-text-color-3: @text-color-3;
-  --van-text-link-color: @text-link-color;
-  --van-active-color: @active-color;
-  --van-active-opacity: @active-opacity;
-  --van-disabled-opacity: @disabled-opacity;
-  --van-background-color: @background-color;
-  --van-background-color-light: @background-color-light;
+  --van-primary-color: var(--van-blue);
+  --van-success-color: var(--van-green);
+  --van-danger-color: var(--van-red);
+  --van-warning-color: var(--van-orange);
+  --van-text-color: var(--van-gray-8);
+  --van-text-color-2: var(--van-gray-6);
+  --van-text-color-3: var(--van-gray-5);
+  --van-link-color: #576b95;
+  --van-active-color: var(--van-gray-2);
+  --van-active-opacity: 0.6;
+  --van-disabled-opacity: 0.5;
+  --van-background: var(--van-gray-1);
+  --van-background-2: var(--van-white);
+  --van-background-3: var(--van-white);
 
   // Padding
-  --van-padding-base: @padding-base;
-  --van-padding-xs: @padding-xs;
-  --van-padding-sm: @padding-sm;
-  --van-padding-md: @padding-md;
-  --van-padding-lg: @padding-lg;
-  --van-padding-xl: @padding-xl;
+  --van-padding-base: 4px;
+  --van-padding-xs: 8px;
+  --van-padding-sm: 12px;
+  --van-padding-md: 16px;
+  --van-padding-lg: 24px;
+  --van-padding-xl: 32px;
 
   // Font
-  --van-font-size-xs: @font-size-xs;
-  --van-font-size-sm: @font-size-sm;
-  --van-font-size-md: @font-size-md;
-  --van-font-size-lg: @font-size-lg;
-  --van-font-weight-bold: @font-weight-bold;
-  --van-line-height-xs: @line-height-xs;
-  --van-line-height-sm: @line-height-sm;
-  --van-line-height-md: @line-height-md;
-  --van-line-height-lg: @line-height-lg;
-  --van-base-font-family: @base-font-family;
-  --van-price-integer-font-family: @price-integer-font-family;
+  --van-font-bold: 600;
+  --van-font-size-xs: 10px;
+  --van-font-size-sm: 12px;
+  --van-font-size-md: 14px;
+  --van-font-size-lg: 16px;
+  --van-line-height-xs: 14px;
+  --van-line-height-sm: 18px;
+  --van-line-height-md: 20px;
+  --van-line-height-lg: 22px;
+  /* stylelint-disable */
+  --van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --van-price-font: avenir-heavy, 'PingFang SC', helvetica neue, arial,
+    sans-serif;
+  /* stylelint-enable */
 
   // Animation
-  --van-animation-duration-base: @animation-duration-base;
-  --van-animation-duration-fast: @animation-duration-fast;
-  --van-animation-timing-function-enter: @animation-timing-function-enter;
-  --van-animation-timing-function-leave: @animation-timing-function-leave;
+  --van-duration-base: 0.3s;
+  --van-duration-fast: 0.2s;
+  --van-ease-out: ease-out;
+  --van-ease-in: ease-in;
 
   // Border
-  --van-border-color: @border-color;
-  --van-border-width-base: @border-width-base;
-  --van-border-radius-sm: @border-radius-sm;
-  --van-border-radius-md: @border-radius-md;
-  --van-border-radius-lg: @border-radius-lg;
-  --van-border-radius-max: @border-radius-max;
+  --van-border-color: var(--van-gray-3);
+  --van-border-width: 1px;
+  --van-radius-sm: 2px;
+  --van-radius-md: 4px;
+  --van-radius-lg: 8px;
+  --van-radius-max: 999px;
+}
+
+.van-theme-dark {
+  --van-text-color: #f5f5f5;
+  --van-text-color-2: #707070;
+  --van-text-color-3: #4d4d4d;
+  --van-border-color: #3a3a3c;
+  --van-active-color: #3a3a3c;
+  --van-background: #000;
+  --van-background-2: #1c1c1e;
+  --van-background-3: #37363b;
 }

package/lib/style/mixins/hairline.less

@@ -1,5 +1,3 @@
-@import '../var';
-
 .hairline-common() {
   position: absolute;
   box-sizing: border-box;

package/lib/style/normalize.css

@@ -1 +1 @@
-html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif}a{text-decoration:none}input,button,textarea{color:inherit;font:inherit}a:focus,input:focus,button:focus,textarea:focus,[class*=van-]:focus{outline:none}ol,ul{margin:0;padding:0;list-style:none}
+html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:var(--van-base-font)}a{text-decoration:none}input,button,textarea{color:inherit;font:inherit}a:focus,input:focus,button:focus,textarea:focus,[class*=van-]:focus{outline:none}ol,ul{margin:0;padding:0;list-style:none}

package/lib/style/normalize.less

@@ -1,12 +1,10 @@
-@import './var';
-
 html {
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
   margin: 0;
-  font-family: @base-font-family;
+  font-family: var(--van-base-font);
 }
 
 a {

package/lib/submit-bar/index.css

@@ -1 +1 @@
-:root{--van-submit-bar-height: 50px;--van-submit-bar-z-index: 100;--van-submit-bar-background-color: var(--van-background-color-light);--van-submit-bar-button-width: 110px;--van-submit-bar-price-color: var(--van-danger-color);--van-submit-bar-price-font-size: var(--van-font-size-sm);--van-submit-bar-price-integer-font-size: 20px;--van-submit-bar-price-font-family: var(--van-price-integer-font-family);--van-submit-bar-currency-font-size: var(--van-font-size-md);--van-submit-bar-text-color: var(--van-text-color);--van-submit-bar-text-font-size: var(--van-font-size-md);--van-submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm);--van-submit-bar-tip-font-size: var(--van-font-size-sm);--van-submit-bar-tip-line-height: 1.5;--van-submit-bar-tip-color: var(--van-orange-dark);--van-submit-bar-tip-background-color: var(--van-orange-light);--van-submit-bar-tip-icon-size: 12px;--van-submit-bar-button-height: 40px;--van-submit-bar-padding: 0 var(--van-padding-md)}.van-submit-bar{position:fixed;bottom:0;left:0;z-index:var(--van-submit-bar-z-index);width:100%;background:var(--van-submit-bar-background-color);-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:var(--van-submit-bar-tip-padding);color:var(--van-submit-bar-tip-color);font-size:var(--van-submit-bar-tip-font-size);line-height:var(--van-submit-bar-tip-line-height);background:var(--van-submit-bar-tip-background-color)}.van-submit-bar__tip-icon{margin-right:var(--van-padding-base);font-size:var(--van-submit-bar-tip-icon-size);vertical-align:middle}.van-submit-bar__tip-text{vertical-align:middle}.van-submit-bar__bar{display:flex;align-items:center;justify-content:flex-end;height:var(--van-submit-bar-height);padding:var(--van-submit-bar-padding);font-size:var(--van-submit-bar-text-font-size)}.van-submit-bar__text{flex:1;padding-right:var(--van-padding-sm);color:var(--van-submit-bar-text-color);text-align:right}.van-submit-bar__text span{display:inline-block}.van-submit-bar__suffix-label{margin-left:var(--van-padding-base);font-weight:var(--van-font-weight-bold)}.van-submit-bar__price{color:var(--van-submit-bar-price-color);font-weight:var(--van-font-weight-bold);font-size:var(--van-submit-bar-price-font-size);margin-left:var(--van-padding-base)}.van-submit-bar__price-integer{font-size:var(--van-submit-bar-price-integer-font-size);font-family:var(--van-submit-bar-price-font-family)}.van-submit-bar__button{width:var(--van-submit-bar-button-width);height:var(--van-submit-bar-button-height);font-weight:var(--van-font-weight-bold);border:none}.van-submit-bar__button--danger{background:var(--van-gradient-red)}
+body{--van-submit-bar-height: 50px;--van-submit-bar-z-index: 100;--van-submit-bar-background: var(--van-background-2);--van-submit-bar-button-width: 110px;--van-submit-bar-price-color: var(--van-danger-color);--van-submit-bar-price-font-size: var(--van-font-size-sm);--van-submit-bar-price-integer-font-size: 20px;--van-submit-bar-price-font: var(--van-price-font);--van-submit-bar-currency-font-size: var(--van-font-size-md);--van-submit-bar-text-color: var(--van-text-color);--van-submit-bar-text-font-size: var(--van-font-size-md);--van-submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm);--van-submit-bar-tip-font-size: var(--van-font-size-sm);--van-submit-bar-tip-line-height: 1.5;--van-submit-bar-tip-color: var(--van-orange-dark);--van-submit-bar-tip-background: var(--van-orange-light);--van-submit-bar-tip-icon-size: 12px;--van-submit-bar-button-height: 40px;--van-submit-bar-padding: 0 var(--van-padding-md)}.van-submit-bar{position:fixed;bottom:0;left:0;z-index:var(--van-submit-bar-z-index);width:100%;background:var(--van-submit-bar-background);-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:var(--van-submit-bar-tip-padding);color:var(--van-submit-bar-tip-color);font-size:var(--van-submit-bar-tip-font-size);line-height:var(--van-submit-bar-tip-line-height);background:var(--van-submit-bar-tip-background)}.van-submit-bar__tip-icon{margin-right:var(--van-padding-base);font-size:var(--van-submit-bar-tip-icon-size);vertical-align:middle}.van-submit-bar__tip-text{vertical-align:middle}.van-submit-bar__bar{display:flex;align-items:center;justify-content:flex-end;height:var(--van-submit-bar-height);padding:var(--van-submit-bar-padding);font-size:var(--van-submit-bar-text-font-size)}.van-submit-bar__text{flex:1;padding-right:var(--van-padding-sm);color:var(--van-submit-bar-text-color);text-align:right}.van-submit-bar__text span{display:inline-block}.van-submit-bar__suffix-label{margin-left:var(--van-padding-base);font-weight:var(--van-font-bold)}.van-submit-bar__price{color:var(--van-submit-bar-price-color);font-weight:var(--van-font-bold);font-size:var(--van-submit-bar-price-font-size);margin-left:var(--van-padding-base)}.van-submit-bar__price-integer{font-size:var(--van-submit-bar-price-integer-font-size);font-family:var(--van-submit-bar-price-font)}.van-submit-bar__button{width:var(--van-submit-bar-button-width);height:var(--van-submit-bar-button-height);font-weight:var(--van-font-bold);border:none}.van-submit-bar__button--danger{background:var(--van-gradient-red)}