From 13ef4bbf61654b752442e89850739787e1b16c47 Mon Sep 17 00:00:00 2001
From: Mminamiyama <minamiyama@qq.com>
Date: Thu, 3 Jul 2025 01:07:15 +0800
Subject: [PATCH] style(config-var): update styling classes to use design
 system tokens

Replace hardcoded color classes with design system tokens for better consistency and maintainability. Changes include updating background, text, and border colors to use standardized tokens.
---
 .../configuration/config-var/select-var-type.tsx    | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
index f82e931882..485f9932f3 100644
--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import {
   PortalToFollowElem,
@@ -28,11 +27,11 @@ type ItemProps = {
 const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
   return (
     <div
-      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-gray-50'
+      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
       onClick={() => onClick(value)}
     >
-      {Icon ? <Icon className='h-4 w-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='h-4 w-4 text-gray-500' />}
-      <div className='ml-2 truncate text-xs text-gray-600'>{text}</div>
+      {Icon ? <Icon className='h-4 w-4 text-text-secondary' /> : <InputVarTypeIcon type={type!} className='h-4 w-4 text-text-secondary' />}
+      <div className='ml-2 truncate text-xs text-text-primary'>{text}</div>
     </div>
   )
 }
@@ -57,17 +56,17 @@ const SelectVarType: FC<Props> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <OperationBtn type='add' className={cn(open && 'bg-gray-200')} />
+        <OperationBtn type='add' />
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className='min-w-[192px] rounded-lg border border-gray-200 bg-white shadow-lg'>
+        <div className='min-w-[192px] rounded-lg border border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
           <div className='p-1'>
             <SelectItem type={InputVarType.textInput} value='string' text={t('appDebug.variableConfig.string')} onClick={handleChange}></SelectItem>
             <SelectItem type={InputVarType.paragraph} value='paragraph' text={t('appDebug.variableConfig.paragraph')} onClick={handleChange}></SelectItem>
             <SelectItem type={InputVarType.select} value='select' text={t('appDebug.variableConfig.select')} onClick={handleChange}></SelectItem>
             <SelectItem type={InputVarType.number} value='number' text={t('appDebug.variableConfig.number')} onClick={handleChange}></SelectItem>
           </div>
-          <div className='h-[1px] bg-gray-100'></div>
+          <div className='h-[1px] border-t border-components-panel-border'></div>
           <div className='p-1'>
             <SelectItem Icon={ApiConnection} value='api' text={t('appDebug.variableConfig.apiBasedVar')} onClick={handleChange}></SelectItem>
           </div>