fix(pro:search): replace spacing with theme tokens (#1793)

packages/pro/search/style/panel.less

@@ -27,7 +27,7 @@
     flex-direction: column;
 
     &-inner {
-      padding: 4px 0;
+      padding: var(--ix-padding-size-xs) 0;
     }
 
     &-auto-height {

packages/pro/search/style/quick-select.less

@@ -7,16 +7,16 @@
   }
 
   &-panel {
-    padding: 12px 8px 0;
+    padding: var(--ix-padding-size-md) var(--ix-padding-size-md) 0;
 
     @shortcust-padding: 8px;
     &-shortcuts {
       position: relative;
       width: 100%;
       display: flex;
       flex-wrap: wrap;
-      padding: 0 @shortcust-padding 4px @shortcust-padding;
-      margin-bottom: 8px;
+      padding: 0 @shortcust-padding var(--ix-padding-size-xs) @shortcust-padding;
+      margin-bottom: var(--ix-padding-size-md);
 
       &::after {
         content: ' ';
@@ -34,30 +34,30 @@
       display: flex;
       align-items: stretch;
       justify-content: flex-start;
-      padding: 0 0 12px;
+      padding: 0 0 var(--ix-padding-size-md);
     }
     &-item-separator {
       width: 1px;
-      margin: 0 4px;
+      margin: 0 var(--ix-padding-size-xs);
       flex-shrink: 0;
     }
   }
   &-shortcut {
-    margin-bottom: 8px;
-    height: 24px;
-    padding: 2px 8px;
+    margin-bottom: var(--ix-margin-size-sm);
+    height: var(--ix-height-sm);
+    padding: 2px var(--ix-padding-size-sm);
     display: flex;
     align-items: center;
     border: var(--ix-line-width) var(--ix-line-type) var(--ix-color-border-secondary);
     border-radius: 2px;
     cursor: pointer;
     &:not(&:last-child) {
-      margin-right: 8px;
+      margin-right: var(--ix-margin-size-sm);
     }
 
     &-icon {
-      font-size: 16px;
-      margin-right: 4px;
+      font-size: var(--ix-font-size-icon);
+      margin-right: var(--ix-margin-size-xs);
       color: var(--ix-color-icon-info);
     }
   }
@@ -72,8 +72,7 @@
     &-header {
       position: relative;
       width: 100%;
-      height: 24px;
-      padding: 0 8px;
+      padding: 0 var(--ix-padding-size-sm) var(--ix-padding-size-xs) var(--ix-padding-size-sm);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -83,25 +82,25 @@
     }
     &-label {
       height: 100%;
-      max-width: calc(100% - 24px);
+      max-width: calc(100% - var(--ix-height-sm));
       color: var(--ix-color-text-info);
       .ellipsis();
     }
     &-search-bar {
       position: absolute;
       right: 0;
-      height: 24px;
-      width: 24px;
+      height: var(--ix-height-sm);
+      width: var(--ix-height-sm);
       display: flex;
       align-items: center;
       justify-content: flex-end;
       background-color: @pro-search-background-color;
-      border: 1px solid transparent;
+      border: var(--ix-line-width) solid transparent;
       transition: all var(--ix-motion-duration-fast) var(--ix-motion-ease-in-out);
 
       &-opened {
         width: 100%;
-        border: 1px solid @pro-search-border-color;
+        border: var(--ix-line-width) var(--ix-line-type) @pro-search-border-color;
         border-radius: @pro-search-border-radius;
       }
     }
@@ -116,8 +115,8 @@
       transition: none;
     }
     &-search-icon {
-      width: 24px;
-      font-size: 16px;
+      width: var(--ix-height-sm);
+      font-size: var(--ix-font-size-icon);
       flex-shrink: 0;
       color: var(--ix-color-icon);
       cursor: pointer;
@@ -132,9 +131,9 @@
     .@{pro-search-prefix}-select-panel {
       min-height: 230px;
       .@{select-option-prefix} {
-        padding: 8px;
+        padding: var(--ix-padding-size-sm);
         &-selected:not(&-disabled) {
-          border-radius: 2px;
+          border-radius: var(--ix-border-radius-sm);
         }
       }
     }
@@ -144,12 +143,12 @@
     }
     .@{pro-search-prefix}-date-picker-panel {
       width: 493px;
-      padding: 0 8px;
+      padding: var(--ix-padding-size-sm) var(--ix-padding-size-sm) 0 var(--ix-padding-size-sm);
       &-body {
-        padding: 0 0 8px;
+        padding: 0 0 var(--ix-padding-size-sm);
       }
       .@{pro-search-prefix}-panel-footer {
-        padding: 8px 0 0;
+        padding: var(--ix-padding-size-sm) 0 0;
       }
     }
   }

packages/pro/search/style/variables.less

@@ -14,7 +14,7 @@
 @pro-search-disabled-color: var(--ix-color-text-disabled);
 @pro-search-disabled-background-color: var(--ix-control-bg-color-disabled);
 
-@pro-search-placeholder-padding-horizontal: 12px;
+@pro-search-placeholder-padding-horizontal: var(--ix-padding-size-md);
 
 @pro-search-clear-icon-font-size: var(--ix-font-size-icon);
 @pro-search-clear-icon-width: var(--ix-font-size-icon);
@@ -36,7 +36,7 @@
 
 @pro-search-item-tag-color: var(--ix-pro-search-tag-color);
 @pro-search-item-tag-background-color: var(--ix-pro-search-tag-bg-color);
-@pro-search-item-tag-border-radius: 2px;
+@pro-search-item-tag-border-radius: var(--ix-border-radius-sm);
 @pro-search-item-tag-padding: 2px 4px 2px 8px;
 @pro-search-item-tag-disabled-border-color: var(--ix-color-border);
 @pro-search-item-tag-disabled-color: var(--ix-pro-search-tag-color-disabled);
@@ -51,11 +51,11 @@
 
 @pro-search-overlay-padding: 0;
 
-@pro-search-panel-footer-border-width: 1px;
-@pro-search-panel-footer-border-style: solid;
+@pro-search-panel-footer-border-width: var(--ix-line-width);
+@pro-search-panel-footer-border-style: var(--ix-line-type);
 @pro-search-panel-footer-border-color: var(--ix-color-separator);
-@pro-search-panel-footer-padding-horizontal: 12px;
-@pro-search-panel-footer-padding-vertical: 8px;
+@pro-search-panel-footer-padding-horizontal: var(--ix-padding-size-md);
+@pro-search-panel-footer-padding-vertical: var(--ix-padding-size-sm);
 @pro-search-panel-footer-button-margin: var(--ix-margin-size-md);
 
 @pro-search-date-picker-panel-body-padding: var(--ix-padding-size-lg);