fix: add prefix/suffix color token in Select/Cascader/TreeSelect (#2720)

* fix: add prefix/suffix color token in Select/Cascader/TreeSelect

* fix: change token name

packages/semi-foundation/cascader/cascader.scss

@@ -246,6 +246,9 @@ $module: #{$prefix}-cascader;
 
         &-text {
             margin: 0 $spacing-cascader_text-marginX;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
+            color: $color-cascader_prefix_suffix_text-default;
         }
 
         &-icon {

packages/semi-foundation/cascader/variables.scss

@@ -43,6 +43,8 @@ $color-cascader_danger-border-focus: var(--semi-color-danger); // 级联选择
 $color-cascader_danger-bg-active: var(--semi-color-danger-light-active); // 级联选择触发器危险背景颜色 - 按下
 $color-cascader_danger-border-active: var(--semi-color-danger-light-active); // 级联选择触发器危险描边颜色 - 按下
 
+$color-cascader_prefix_suffix_text-default: var(--semi-color-text-2); // 级联选择前后缀文字颜色
+
 $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距

packages/semi-foundation/select/select.scss

@@ -309,6 +309,9 @@ $overflowList: #{$prefix}-overflow-list;
 
         &-text {
             margin: $spacing-select_prefix_suffix_text-marginY $spacing-select_prefix_suffix_text-marginX;
+            color: $color-select_prefix_suffix_text-default;
+            @include font-size-regular;
+            font-weight: $font-weight-bold;
         }
 
         &-icon {

packages/semi-foundation/select/variables.scss

@@ -59,6 +59,8 @@ $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
 
+$color-select_prefix_suffix_text-default: var(--semi-color-text-2); // 选择器输入框前后缀文本颜色
+
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小
 $height-select_large: $height-control-large; // 选择器输入框高度 - 大尺寸

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -337,6 +337,9 @@ $module: #{$prefix}-tree-select;
         @include all-center;
 
         &-text {
+            color: $color-treeSelect_prefix_suffix_text-default;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
             margin: $spacing-treeSelect_prefix_text-marginY $spacing-treeSelect_prefix_text-marginX;
         }
 

packages/semi-foundation/treeSelect/variables.scss

@@ -85,6 +85,7 @@ $color-treeSelect_inputTrigger-border-default: none; // 带搜索的树选择器
 $color-treeSelect_inputTrigger-bg-default: transparent; // 带搜索的树选择器触发器背景颜色
 $color-treeSelect_insertLabel-text-default: var(--semi-color-text-2); // 带搜索的树前缀标签文本颜色
 $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文本字重
+$color-treeSelect_prefix_suffix_text-default: var(--semi-color-text-2); // 带搜索的树选择器前后缀文本颜色
 
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -2398,14 +2398,6 @@ export const SearchInTopSlot = () => {
   );
 }
 
-export const suffix = () => {
-  return (<Cascader
-    suffix={<IconGift />}
-    style={{ width: 300 }}
-    treeData={treeData1}
-    placeholder="请选择所在地区"
-  />);
-}
 
 export const EmptyContent = () => {
   return (
@@ -2496,4 +2488,27 @@ export const PlaceHolderChange = () => {
       />
     </div>
   )
-} 
+} 
+
+export const PrefixSuffix = () => {
+  return (
+    <>
+      <Cascader
+        prefix={<IconGift />}
+        suffix={<IconGift />}
+        style={{ width: 300 }}
+        treeData={treeData1}
+        placeholder="请选择所在地区"
+      />
+      <br /><br />
+      <Cascader
+        prefix={"Prefix"}
+        suffix={"Prefix"}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        placeholder="请选择所在地区"
+        filterTreeNode
+      />
+    </>
+  )
+}

packages/semi-ui/select/_story/select.stories.jsx

@@ -402,6 +402,16 @@ export const WithPrefixSuffixInsetLabelShowClearShowArrow = () => (
       prefix={<IconSearch />}
       suffix={<IconGift></IconGift>}
     ></Select>
+    <Select
+      style={{
+        width: '250px',
+      }}
+      motion={false}
+      filter
+      optionList={options}
+      prefix={"Prefix"}
+      suffix={"Suffix"}
+    ></Select>
     <h4>insetLabel</h4>
     <Select
       style={{

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -567,7 +567,7 @@ export const PrefixSuffixInsetLabel = () => (
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
       treeData={treeData2}
       filterTreeNode
-      prefix={<span>1234</span>}
+      prefix={'1234'}
       treeNodeFilterProp="value"
       placeholder="Please select"
     />