feat: Field, Card, Cell 组件样式变量化 (#2212)

* feat(Cell): cell组件样式调整

* feat(Field): field组件样式调整

* feat(Cell): Cell组件的样式调整

packages/cell/index.less

@@ -7,14 +7,14 @@
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  padding: 10px 15px;
+  .theme(padding, '@cell-vertical-padding @cell-horizontal-padding');
-  font-size: 14px;
+  .theme(font-size, '@cell-font-size');
-  line-height: 24px;
+  .theme(line-height, '@cell-line-height');
-  .theme(color, '@text-color');
+  .theme(color, '@cell-text-color');
-  .theme(background-color, '@white');
+  .theme(background-color, '@cell-background-color');
 
   &::after {
-    .hairline-bottom(@border-color, 15px);
+    .hairline-bottom(@border-color, @padding-md);
   }
 
   &--borderless::after {
@@ -22,21 +22,21 @@
   }
 
   &-group {
-    .theme(background-color, '@white');
+    .theme(background-color, '@cell-background-color');
   }
 
   &__label {
-    margin-top: 3px;
+    .theme(margin-top, '@cell-label-margin-top');
-    font-size: 12px;
+    .theme(font-size, '@cell-label-font-size');
-    line-height: 18px;
+    .theme(line-height, '@cell-label-line-height');
-    .theme(color, '@gray-dark');
+    .theme(color, '@cell-label-color');
   }
 
   &__value {
     overflow: hidden;
     text-align: right;
     vertical-align: middle;
-    .theme(color, '@gray-dark');
+    .theme(color, '@cell-value-color');
   }
 
   &__title,
@@ -52,8 +52,8 @@
   &__right-icon-wrap {
     display: flex;
     align-items: center;
-    height: 24px;
+    .theme(height, '@cell-line-height');
-    font-size: 16px;
+    .theme(font-size, '@cell-icon-size');
   }
 
   &__left-icon-wrap {
@@ -62,20 +62,20 @@
 
   &__right-icon-wrap {
     margin-left: 5px;
-    .theme(color, '@gray-dark');
+    .theme(color, '@cell-right-icon-color');
   }
 
   &__left-icon {
-    line-height: 24px;
     vertical-align: middle;
+    .theme(line-height, '@cell-line-height');
   }
 
   &__right-icon {
-    line-height: 24px;
+    .theme(line-height, '@cell-line-height');
   }
 
   &--clickable&--hover {
-    .theme(background-color, '@active-color');
+    .theme(background-color, '@cell-active-color');
   }
 
   &--required {
@@ -83,10 +83,10 @@
 
     &::before {
       position: absolute;
-      left: 7px;
-      font-size: 14px;
       content: '*';
-      .theme(color, '@red');
+      .theme(left, '@padding-xs');
+      .theme(font-size, '@cell-font-size');
+      .theme(color, '@cell-required-color');
     }
   }
 
@@ -95,15 +95,15 @@
   }
 
   &--large {
-    padding-top: 12px;
+    .theme(padding-top, '@cell-large-vertical-padding');
-    padding-bottom: 12px;
+    .theme(padding-bottom, '@cell-large-vertical-padding');
 
     .van-cell__title {
-      font-size: 16px;
+      .theme(font-size, '@cell-large-title-font-size');
     }
 
     .van-cell__label {
-      font-size: 14px;
+      .theme(font-size, '@cell-large-label-font-size');
     }
   }
 }

packages/common/style/var.less

@@ -118,6 +118,27 @@
 @card-origin-price-color: @gray-darker;
 @card-origin-price-font-size: @font-size-xs;
 
+// Cell
+@cell-font-size: @font-size-md;
+@cell-line-height: 24px;
+@cell-vertical-padding: 10px;
+@cell-horizontal-padding: @padding-md;
+@cell-text-color: @text-color;
+@cell-background-color: @white;
+@cell-border-color: @border-color;
+@cell-active-color: @active-color;
+@cell-required-color: @red;
+@cell-label-color: @gray-dark;
+@cell-label-font-size: @font-size-sm;
+@cell-label-line-height: 18px;
+@cell-label-margin-top: 3px;
+@cell-value-color: @gray-dark;
+@cell-icon-size: 16px;
+@cell-right-icon-color: @gray-dark;
+@cell-large-vertical-padding: @padding-sm;
+@cell-large-title-font-size: @font-size-lg;
+@cell-large-label-font-size: @font-size-md;
+
 // Checkbox
 @checkbox-size: 20px;
 @checkbox-border-color: @gray-light;
@@ -146,6 +167,17 @@
 @count-down-font-size: @font-size-md;
 @count-down-line-height: 20px;
 
+// Field
+@field-input-text-color: @text-color;
+@field-input-error-text-color: @red;
+@field-input-disabled-text-color: @gray-dark;
+@field-placeholder-text-color: @gray-dark;
+@field-clear-icon-color: @gray;
+@field-icon-container-color: @gray-dark;
+@field-error-message-color: @red;
+@field-error-message-text-font-size: @font-size-sm;
+@field-text-area-min-height: 18px;
+
 // Image
 @image-placeholder-text-color: @gray-dark;
 @image-placeholder-font-size: @font-size-md;
@@ -304,4 +336,4 @@
 @dropdown-menu-title-disabled-text-color: @gray-dark;
 @dropdown-menu-title-padding: 0 @padding-xs;
 @dropdown-menu-title-line-height: 18px;
-@dropdown-menu-option-active-color: @blue;
+@dropdown-menu-option-active-color: @blue;

packages/field/index.less

@@ -7,8 +7,8 @@
     align-items: center;
 
     &--textarea {
-      min-height: 24px;
       line-height: 1.2em;
+      .theme(min-height, '@cell-line-height');
     }
 
     &--textarea&--ios {
@@ -21,8 +21,6 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
-    height: 24px;
-    min-height: 24px;
     margin: 0;
     padding: 0;
     line-height: inherit;
@@ -30,21 +28,23 @@
     background-color: transparent;
     border: 0;
     resize: none;
-    .theme(color, '@text-color');
+    .theme(color, '@field-input-text-color');
+    .theme(height, '@cell-line-height');
+    .theme(min-height, '@cell-line-height');
 
     &--textarea {
-      height: 18px;
+      .theme(height, '@field-text-area-min-height');
-      min-height: 18px;
+      .theme(min-height, '@field-text-area-min-height');
     }
 
     &--error {
-      .theme(color, '@red');
+      .theme(color, '@field-input-error-text-color');
     }
 
     &--disabled {
       background-color: transparent;
       opacity: 1;
-      .theme(color, '@gray-dark');
+      .theme(color, '@field-input-disabled-text-color');
     }
 
     &--center {
@@ -62,25 +62,25 @@
     right: 0;
     left: 0;
     pointer-events: none;
-    .theme(color, '@gray-dark');
+    .theme(color, '@field-placeholder-text-color');
 
     &--error {
-      .theme(color, '@red');
+      .theme(color, '@field-error-message-color');
     }
   }
 
   &__icon-root {
     display: flex;
     align-items: center;
-    min-height: 24px;
+    .theme(min-height, '@cell-line-height');
   }
 
   &__clear-root,
   &__icon-container {
-    margin-right: -10px;
-    padding: 0 10px;
     line-height: inherit;
     vertical-align: middle;
+    .theme(padding, '0 @padding-xs');
+    .theme(margin-right, '-@padding-xs');
   }
 
   &__clear-root,
@@ -90,11 +90,11 @@
   }
 
   &__clear-root {
-    .theme(color, '@gray');
+    .theme(color, '@field-clear-icon-color');
   }
 
   &__icon-container {
-    .theme(color, '@gray-dark');
+    .theme(color, '@field-icon-container-color');
 
     &:empty {
       display: none;
@@ -102,7 +102,7 @@
   }
 
   &__button {
-    padding-left: 10px;
+    .theme(padding-left, '@padding-xs');
 
     &:empty {
       display: none;
@@ -110,9 +110,9 @@
   }
 
   &__error-message {
-    font-size: 12px;
     text-align: left;
-    .theme(color, '@red');
+    .theme(font-size, '@field-error-message-text-font-size');
+    .theme(color, '@field-error-message-color');
 
     &--center {
       text-align: center;