chore(Search): enrich css vars (#3264)

Author: anlyyao

src/search/README.en-US.md

@@ -62,12 +62,15 @@ Name | Default Value | Description
 -- | -- | --
 --td-search-action-color | @brand-color | - 
 --td-search-bg-color | @bg-color-secondarycontainer | - 
---td-search-clear-icon-color | @font-gray-3 | - 
+--td-search-clear-icon-color | @text-color-placeholder | - 
+--td-search-clear-icon-font-size | 48rpx | - 
 --td-search-font-size | @font-size-m | - 
 --td-search-height | 80rpx | - 
---td-search-icon-color | @font-gray-3 | - 
---td-search-label-color | @font-gray-1 | - 
+--td-search-icon-color | @text-color-placeholder | - 
+--td-search-icon-font-size | 48rpx | - 
+--td-search-label-color | @text-color-primary | - 
 --td-search-padding | 16rpx 24rpx | - 
---td-search-placeholder-color | @font-gray-3 | - 
+--td-search-placeholder-color | @text-color-placeholder | - 
+--td-search-result-high-light-color | @brand-color | - 
 --td-search-square-radius | @radius-default | - 
---td-search-text-color | @font-gray-1 | -
+--td-search-text-color | @text-color-primary | - 

src/search/README.md

@@ -108,15 +108,17 @@ t-class-left | 左侧图标样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述
 -- | -- | --
---td-search-action-color | @brand-color | -
---td-search-bg-color | @bg-color-secondarycontainer | -
---td-search-clear-icon-color | @font-gray-3 | -
---td-search-font-size | @font-size-m | -
---td-search-height | 80rpx | -
---td-search-icon-color | @font-gray-3 | -
---td-search-label-color | @font-gray-1 | -
---td-search-padding | 16rpx 24rpx | -
---td-search-placeholder-color | @font-gray-3 | -
---td-search-result-high-light-color | @brand-color | -
---td-search-square-radius | @radius-default | -
---td-search-text-color | @font-gray-1 | -
+--td-search-action-color | @brand-color | - 
+--td-search-bg-color | @bg-color-secondarycontainer | - 
+--td-search-clear-icon-color | @text-color-placeholder | - 
+--td-search-clear-icon-font-size | 48rpx | - 
+--td-search-font-size | @font-size-m | - 
+--td-search-height | 80rpx | - 
+--td-search-icon-color | @text-color-placeholder | - 
+--td-search-icon-font-size | 48rpx | - 
+--td-search-label-color | @text-color-primary | - 
+--td-search-padding | 16rpx 24rpx | - 
+--td-search-placeholder-color | @text-color-placeholder | - 
+--td-search-result-high-light-color | @brand-color | - 
+--td-search-square-radius | @radius-default | - 
+--td-search-text-color | @text-color-primary | - 

src/search/search.less

@@ -8,10 +8,12 @@
 @search-padding: var(--td-search-padding, 16rpx 24rpx);
 @search-placeholder-color: var(--td-search-placeholder-color, @text-color-placeholder);
 @search-icon-color: var(--td-search-icon-color, @text-color-placeholder);
+@search-icon-font-size: var(--td-search-icon-font-size, 48rpx);
 @search-square-radius: var(--td-search-square-radius, @radius-default);
 @search-round-radius: calc(@search-height / 2);
 @search-action-color: var(--td-search-action-color, @brand-color);
 @search-clear-icon-color: var(--td-search-clear-icon-color, @text-color-placeholder);
+@search-clear-icon-font-size: var(--td-search-clear-icon-font-size, 48rpx);
 @search-result-high-light-color: var(--td-search-result-high-light-color, @brand-color);
 
 .@{prefix}-search {
@@ -62,13 +64,14 @@
 
     .@{prefix}-icon {
       color: @search-icon-color;
+      font-size: @search-icon-font-size;
     }
   }
 
   &__clear {
     position: relative;
     margin-left: 10px;
-    font-size: 48rpx;
+    font-size: @search-clear-icon-font-size;
     color: @search-clear-icon-color;
     .hotspot-expanded();
   }

src/search/search.wxml

@@ -10,7 +10,6 @@
     <t-icon
       wx:if="{{leftIcon}}"
       name="{{leftIcon}}"
-      size="48rpx"
       class="{{prefix}}-icon {{prefix}}-class-left"
       aria-hidden="{{true}}"
     />