feat: support theme variables

packages/action-sheet/index.less

@@ -2,14 +2,14 @@
 @import '../common/style/theme.less';
 
 .van-action-sheet {
-  max-height: @action-sheet-max-height !important;
+  .theme(max-height, '@action-sheet-max-height') !important;
   .theme(color, '@action-sheet-item-text-color');
 
   &__item,
   &__cancel {
-    font-size: @action-sheet-item-font-size;
-    line-height: @action-sheet-item-height;
     text-align: center;
+    .theme(font-size, '@action-sheet-item-font-size');
+    .theme(line-height, '@action-sheet-item-height');
     .theme(background-color, '@action-sheet-item-background');
 
     &--hover {
@@ -18,12 +18,12 @@
   }
 
   &__cancel {
-    height: @action-sheet-item-height;
+    .theme(height, '@action-sheet-item-height');
 
     &::before {
       display: block;
-      height: @action-sheet-cancel-padding-top;
       content: ' ';
+      .theme(height, '@action-sheet-cancel-padding-top');
       .theme(background-color, '@action-sheet-cancel-padding-color');
     }
   }
@@ -37,33 +37,33 @@
   }
 
   &__subname {
-    margin-left: @padding-base;
+    .theme(margin-left, '@padding-base');
-    font-size: @action-sheet-subname-font-size;
+    .theme(font-size, '@action-sheet-subname-font-size');
     .theme(color, '@action-sheet-subname-color');
   }
 
   &__header {
-    font-weight: @font-weight-bold;
-    font-size: @action-sheet-header-font-size;
-    line-height: @action-sheet-header-height;
     text-align: center;
+    .theme(font-weight, '@font-weight-bold');
+    .theme(font-size, '@action-sheet-header-font-size');
+    .theme(line-height, '@action-sheet-header-height');
   }
 
   &__description {
-    padding: @padding-md;
-    color: @action-sheet-description-color;
-    font-size: @action-sheet-description-font-size;
-    line-height: @action-sheet-description-line-height;
     text-align: center;
+    .theme(padding, '@padding-md');
+    .theme(color, '@action-sheet-description-color');
+    .theme(font-size, '@action-sheet-description-font-size');
+    .theme(line-height, '@action-sheet-description-line-height');
   }
 
   &__close {
     position: absolute !important;
     top: 0;
     right: 0;
-    padding: @action-sheet-close-icon-padding;
-    font-size: @action-sheet-close-icon-size !important;
     line-height: inherit !important;
+    .theme(padding, '@action-sheet-close-icon-padding');
+    .theme(font-size, '@action-sheet-close-icon-size') !important;
     .theme(color, '@action-sheet-close-icon-color');
   }
 }

packages/button/index.less

@@ -5,18 +5,18 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  height: @button-default-height;
   padding: 0;
-  font-size: @button-default-font-size;
-  line-height: @button-default-line-height;
   text-align: center;
   vertical-align: middle;
-  transition: opacity @animation-duration-fast;
-  .theme(border-radius, '@button-border-radius');
-
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
 
+  .theme(height, '@button-default-height');
+  .theme(font-size, '@button-default-font-size');
+  .theme(line-height, '@button-default-line-height');
+  .theme(transition, 'opacity @animation-duration-fast');
+  .theme(border-radius, '@button-border-radius');
+
   &::before {
     position: absolute;
     top: 50%;
@@ -98,30 +98,30 @@
 
   &--large {
     width: 100%;
-    height: @button-large-height;
+    .theme(height, '@button-large-height');
-    line-height: @button-large-line-height;
+    .theme(line-height, '@button-large-line-height');
   }
 
   &--normal {
     padding: 0 15px;
-    font-size: @button-normal-font-size;
+    .theme(font-size, '@button-normal-font-size');
   }
 
   &--small {
-    min-width: @button-small-min-width;
+    .theme(min-width, '@button-small-min-width');
-    height: @button-small-height;
+    .theme(height, '@button-small-height');
-    padding: 0 @padding-xs;
+    .theme(padding, '0 @padding-xs');
-    font-size: @button-small-font-size;
+    .theme(font-size, '@button-small-font-size');
-    line-height: @button-small-line-height;
+    .theme(line-height, '@button-small-line-height');
   }
 
   // mini图标默认宽度50px，文字不能超过4个
   &--mini {
     display: inline-block;
-    min-width: @button-mini-min-width;
+    .theme(min-width, '@button-mini-min-width');
-    height: @button-mini-height;
+    .theme(height, '@button-mini-height');
-    font-size: @button-mini-font-size;
+    .theme(font-size, '@button-mini-font-size');
-    line-height: @button-mini-line-height;
+    .theme(line-height, '@button-mini-line-height');
 
     & + .van-button--mini {
       margin-left: 5px;
@@ -142,7 +142,7 @@
   }
 
   &--disabled {
-    opacity: @button-disabled-opacity;
+    .theme(opacity, '@button-disabled-opacity');
   }
 
   &__text {

packages/card/index.less

@@ -4,8 +4,8 @@
 .van-card {
   position: relative;
   box-sizing: border-box;
-  padding: @card-padding;
+  .theme(padding, '@card-padding');
-  font-size: @card-font-size;
+  .theme(font-size, '@card-font-size');
   .theme(color, '@card-text-color');
   .theme(background-color, '@card-background-color');
 
@@ -21,9 +21,9 @@
   &__thumb {
     position: relative;
     flex: none;
-    width: @card-thumb-size;
+    .theme(width, '@card-thumb-size');
-    height: @card-thumb-size;
+    .theme(height, '@card-thumb-size');
-    margin-right: @padding-xs;
+    .theme(margin-right, '@padding-xs');
 
     &:empty {
       display: none;
@@ -48,11 +48,11 @@
 
   &__title {
     font-weight: bold;
-    line-height: @card-title-line-height;
+    .theme(line-height, '@card-title-line-height');
   }
 
   &__desc {
-    line-height: @card-desc-line-height;
+    .theme(line-height, '@card-desc-line-height');
     .theme(color, '@card-desc-color');
   }
 
@@ -69,8 +69,8 @@
   &__origin-price {
     display: inline-block;
     margin-left: 5px;
-    font-size: @card-origin-price-font-size;
     text-decoration: line-through;
+    .theme(font-size, '@card-origin-price-font-size');
     .theme(color, '@card-origin-price-color');
   }
 

packages/count-down/index.less

@@ -1,7 +1,8 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-count-down {
-  color: @count-down-text-color;
+  .theme(color, '@count-down-text-color');
-  font-size: @count-down-font-size;
+  .theme(font-size, '@count-down-font-size');
-  line-height: @count-down-line-height;
+  .theme(line-height, '@count-down-line-height');
 }

packages/divider/index.less

@@ -1,16 +1,18 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-divider {
   display: flex;
   align-items: center;
-  margin: @divider-margin;
-  color: @divider-text-color;
-  font-size: @divider-font-size;
-  line-height: @divider-line-height;
-  border-color: @divider-border-color;
   border-style: solid;
   border-width: 0;
 
+  .theme(margin, '@divider-margin');
+  .theme(color, '@divider-text-color');
+  .theme(font-size, '@divider-font-size');
+  .theme(line-height, '@divider-line-height');
+  .theme(border-color, '@divider-border-color');
+
   &::before,
   &::after {
     display: block;
@@ -41,24 +43,24 @@
   &--left,
   &--right {
     &::before {
-      margin-right: @divider-content-padding;
+      .theme(margin-right, '@divider-content-padding');
     }
 
     &::after {
-      margin-left: @divider-content-padding;
       content: '';
+      .theme(margin-left, '@divider-content-padding');
     }
   }
 
   &--left {
     &::before {
-      max-width: @divider-content-left-width;
+      .theme(max-width, '@divider-content-left-width');
     }
   }
 
   &--right {
     &::after {
-      max-width: @divider-content-right-width;
+      .theme(max-width, '@divider-content-right-width');
     }
   }
 }

packages/goods-action-button/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 :host {
   flex: 1;
@@ -7,9 +8,9 @@
 .van-goods-action-button {
   height: 36px !important;
   font-weight: 500 !important;
-  font-size: @font-size-md !important;
   line-height: 34px !important;
   border: none !important;
+  .theme(font-size, '@font-size-md') !important;
 
   &--first {
     display: block !important;

packages/image/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-image {
   position: relative;
@@ -30,8 +31,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: @image-placeholder-text-color;
+    .theme(color, '@image-placeholder-text-color');
-    font-size: @image-placeholder-font-size;
+    .theme(font-size, '@image-placeholder-font-size');
-    background-color: @image-placeholder-background-color;
+    .theme(background-color, '@image-placeholder-background-color');
   }
 }

packages/slider/index.less

@@ -9,17 +9,17 @@
   // use pseudo element to expand click area
   &::before {
     position: absolute;
-    top: -@padding-xs;
     right: 0;
-    bottom: -@padding-xs;
     left: 0;
     content: '';
+    .theme(top, '-@padding-xs');
+    .theme(bottom, '-@padding-xs');
   }
 
   &__bar {
     position: relative;
     border-radius: inherit;
-    transition: width @animation-duration-fast;
+    .theme(transition, 'width @animation-duration-fast');
     .theme(background-color, '@blue');
   }