fix: form、cascader、pagination、table等十余个组件css变量无效（#613）

AntmJS · Feb 2, 2024 · aac7a0f · aac7a0f
1 parent 30d9449
commit aac7a0f
Show file tree

Hide file tree

Showing 37 changed files with 633 additions and 870 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/packages/vantui/src/button/index.less b/packages/vantui/src/button/index.less
@@ -34,7 +34,7 @@
   vertical-align: bottom;
 
   &:active:not(&--disabled) {
-    opacity: @button-active-opacity;
+    .theme(opacity, '@button-active-opacity');
   }
 
   .theme(line-height, '@button-line-height');
@@ -145,7 +145,7 @@
 
   &__loading-text,
   &__icon + &__text:not(:empty) {
-    margin-left: @padding-base;
+    .theme(margin-left, '@padding-base');
   }
 
   &__icon {

diff --git a/packages/vantui/src/cascader/index.less b/packages/vantui/src/cascader/index.less
@@ -15,7 +15,8 @@
       border-radius: 4px;
       position: absolute;
       bottom: -10px;
-      background-color: @cascader-item-active-color;
+
+      .theme(background-color, '@cascader-item-active-color');
     }
   }
 }
@@ -31,31 +32,41 @@
 
 .van-cascader {
   width: 100%;
-  font-size: @cascader-font-size;
-  line-height: @cascader-line-height;
+
+  .theme(font-size, '@cascader-font-size');
+
+  .theme(line-height, '@cascader-line-height');
 
   &__title {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: @cascader-title-padding;
+
+    .theme(padding, '@cascader-title-padding');
+
     text-align: center;
     font-weight: bold;
-    line-height: @cascader-title-line-height;
+
+    .theme(line-height, '@cascader-title-line-height');
+
     color: #1a1a1a;
-    font-size: @cascader-title-font-size;
+
+    .theme(font-size, '@cascader-title-font-size');
   }
 
   .van-tabs__titles {
-    padding: @cascader-tabs-item-padding;
+    .theme(padding, '@cascader-tabs-item-padding');
+
     background: #ffffff;
   }
 
   .van-tabs__titles-item {
     flex: initial;
     min-width: auto;
     width: auto;
-    padding: @cascader-tabs-item-padding;
+
+    .theme(padding, '@cascader-tabs-item-padding');
+
     white-space: nowrap;
   }
 
@@ -69,19 +80,25 @@
     margin: 0;
     width: 100%;
     // padding-top: @cascader-pane-paddingTop;
-    // height: @cascader-pane-height;
+    //
+    .theme(height, '@cascader-pane-height');
+
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
 
   &-item {
     display: flex;
     align-items: center;
-    padding: @cascader-item-padding;
+
+    .theme(padding, '@cascader-item-padding');
+
     margin: 0;
     cursor: pointer;
-    font-size: @cascader-item-font-size;
-    color: @cascader-item-color;
+
+    .theme(font-size, '@cascader-item-font-size');
+
+    .theme(color, '@cascader-item-color');
 
     &.disabled {
       opacity: 0.6;
@@ -90,12 +107,13 @@
 
     &.active {
       &:not(.disabled) {
-        color: @cascader-item-active-color;
+        .theme(color, '@cascader-item-active-color');
       }
 
       .van-cascader-item__icon-check {
         visibility: visible;
-        color: @cascader-item-active-color;
+
+        .theme(color, '@cascader-item-active-color');
       }
     }
   }

diff --git a/packages/vantui/src/checkbox/index.less b/packages/vantui/src/checkbox/index.less
@@ -7,7 +7,7 @@
   user-select: none;
 
   &--horizontal {
-    margin-right: @padding-sm;
+    .theme(margin-right, '@padding-sm');
   }
 
   &__icon-wrap,

diff --git a/packages/vantui/src/circle/index.less b/packages/vantui/src/circle/index.less
@@ -4,7 +4,8 @@
   position: relative;
   display: inline-block;
   text-align: center;
-  font-size: @circle-font-color;
+
+  .theme(font-size, '@circle-font-color');
 
   &__text {
     position: absolute;

diff --git a/packages/vantui/src/dialog/index.less b/packages/vantui/src/dialog/index.less
@@ -52,8 +52,9 @@
     }
 
     &--round-button {
-      padding-bottom: @padding-md;
-      color: @text-color;
+      .theme(padding-bottom, '@padding-md');
+
+      .theme(color, '@text-color');
     }
 
     &--left {
@@ -80,12 +81,14 @@
 
   &__confirm {
     border: 0 !important;
-    color: @dialog-confirm-button-color;
+
+    .theme(color, '@dialog-confirm-button-color');
   }
 
   &__cancel {
     border: 0 !important;
-    color: @dialog-cancel-button-color;
+
+    .theme(color, '@dialog-cancel-button-color');
   }
 
   &-bounce-enter {

diff --git a/packages/vantui/src/dropdown-item/index.less b/packages/vantui/src/dropdown-item/index.less
@@ -20,12 +20,14 @@
 
   &--up {
     top: 0;
-    z-index: @dropdown-z-index;
+
+    .theme(z-index, '@dropdown-z-index');
   }
 
   &--down {
     bottom: 0;
-    z-index: @dropdown-z-index;
+
+    .theme(z-index, '@dropdown-z-index');
   }
 
   &__icon {

diff --git a/packages/vantui/src/ellipsis/index.less b/packages/vantui/src/ellipsis/index.less
@@ -8,8 +8,10 @@
     overflow: auto;
     white-space: unset;
     text-overflow: unset;
-    font-size: @ellipsis-font-size;
-    line-height: @ellipsis-line-height;
+
+    .theme(font-size, '@ellipsis-font-size');
+
+    .theme(line-height, '@ellipsis-line-height');
   }
 
   .van-ellipsis-hidden {
@@ -20,7 +22,9 @@
 
   .van-ellipsis-action {
     padding-left: 10px;
-    color: @ellipsis-primary-color;
-    font-size: @ellipsis-action-font-size;
+
+    .theme(color, '@ellipsis-primary-color');
+
+    .theme(font-size, '@ellipsis-action-font-size');
   }
 }
diff --git a/packages/vantui/src/empty/index.less b/packages/vantui/src/empty/index.less
@@ -6,11 +6,13 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: @empty-padding;
+
+  .theme(padding, '@empty-padding');
 
   &__image {
-    width: @empty-image-size;
-    height: @empty-image-size;
+    .theme(width, '@empty-image-size');
+
+    .theme(height, '@empty-image-size');
 
     &:empty {
       display: none;
@@ -27,11 +29,15 @@
   }
 
   &__description {
-    margin-top: @empty-description-margin-top;
-    padding: @empty-description-padding;
-    color: @empty-description-color;
-    font-size: @empty-description-font-size;
-    line-height: @empty-description-line-height;
+    .theme(margin-top, '@empty-description-margin-top');
+
+    .theme(padding, '@empty-description-padding');
+
+    .theme(color, '@empty-description-color');
+
+    .theme(font-size, '@empty-description-font-size');
+
+    .theme(line-height, '@empty-description-line-height');
 
     &:empty {
       display: none;
@@ -43,6 +49,6 @@
   }
 
   &__bottom {
-    margin-top: @empty-bottom-margin-top;
+    .theme(margin-top, '@empty-bottom-margin-top');
   }
 }
diff --git a/packages/vantui/src/field/index.less b/packages/vantui/src/field/index.less
@@ -42,13 +42,14 @@
     background-color: transparent;
     border: 0;
     resize: none;
-    font-size: @field-font-size;
+
+    .theme(font-size, '@field-font-size');
 
     textarea,
     .taro-textarea,
     input,
     .weui-input {
-      font-size: @field-font-size;
+      .theme(font-size, '@field-font-size');
     }
 
     input,
@@ -80,7 +81,8 @@
       opacity: 1;
       .theme(color, '@field-input-disabled-text-color');
 
-      -webkit-text-fill-color: @field-input-disabled-text-color; // 修复input textarea 在disabled情况下文字无法展示的问题
+      .theme(-webkit-text-fill-color, '@field-input-disabled-text-color');
+      // 修复input textarea 在disabled情况下文字无法展示的问题
     }
 
     &--center {
@@ -185,9 +187,10 @@
 
 .van-field__placeholder {
   pointer-events: none;
-  color: @field-placeholder-text-color;
+
+  .theme(color, '@field-placeholder-text-color');
 
   &--error {
-    color: @field-error-message-color;
+    .theme(color, '@field-error-message-color');
   }
 }
diff --git a/packages/vantui/src/form-item/index.less b/packages/vantui/src/form-item/index.less
@@ -2,20 +2,23 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .vant-form-formItem {
-  line-height: @form-line-height;
+  .theme(line-height, '@form-line-height');
+
   height: auto;
   display: flex;
   overflow: hidden;
   margin: 0 @form-space-horizontal;
   padding: @form-space-vertical 0;
-  background-color: @form-background-color;
+
+  .theme(background-color, '@form-background-color');
 
   &-bottom-border {
-    border-bottom: @form-border-bottom;
+    .theme(border-bottom, '@form-border-bottom');
   }
 
   &-wrapper {
-    background-color: @form-background-color;
+    .theme(background-color, '@form-background-color');
+
     box-sizing: border-box;
   }
 
@@ -28,7 +31,7 @@
     flex-direction: column;
 
     .vant-form-formItem-controll-item {
-      margin-top: @form-vertical-controll-margin-top;
+      .theme(margin-top, '@form-vertical-controll-margin-top');
     }
 
     .vant-form-label {
@@ -37,9 +40,12 @@
   }
 
   &-controll {
-    color: @form-controll-color;
-    margin-left: @form-controll-margin-left;
-    font-size: @form-controll-font-size;
+    .theme(color, '@form-controll-color');
+
+    .theme(margin-left, '@form-controll-margin-left');
+
+    .theme(font-size, '@form-controll-font-size');
+
     flex: 1;
     /* stylelint-disable-next-line no-descending-specificity */
     &-item {
@@ -53,11 +59,15 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .vant-form-label {
-  width: @form-label-width;
-  font-size: @form-label-font-size;
+  .theme(width, '@form-label-width');
+
+  .theme(font-size, '@form-label-font-size');
+
   flex: none;
   box-sizing: border-box;
-  color: @form-label-color;
+
+  .theme(color, '@form-label-color');
+
   text-align: left;
   word-wrap: break-word;
   display: flex;
@@ -70,15 +80,19 @@
 }
 
 .vant-form-message {
-  font-size: @form-message-font-size;
-  color: @form-message-color;
+  .theme(font-size, '@form-message-font-size');
+
+  .theme(color, '@form-message-color');
+
   height: 0;
   transition: all 0.4s;
   visibility: hidden;
 }
 
 .vant-form-message-show {
   height: 30px;
-  margin-top: @form-message-margin-top;
+
+  .theme(margin-top, '@form-message-margin-top');
+
   visibility: visible;
 }