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.

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>