From 4f8cdabef03938d628873e558e0752f8f8580366 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 16 Dec 2024 16:29:15 +0800
Subject: [PATCH] dark mode of model provider

---
 web/app/components/base/grid-mask/index.tsx   |  8 ++--
 .../model-provider-page/model-modal/Form.tsx  | 11 +++--
 .../model-provider-page/model-modal/Input.tsx |  8 ++--
 .../model-provider-page/model-modal/index.tsx | 21 ++++-----
 .../provider-added-card/add-model-button.tsx  |  6 +--
 .../provider-added-card/credential-panel.tsx  |  4 +-
 .../provider-added-card/index.tsx             |  6 +--
 .../provider-added-card/model-list-item.tsx   | 16 ++++---
 .../model-load-balancing-configs.tsx          | 24 +++++-----
 .../model-load-balancing-modal.tsx            | 12 ++---
 .../provider-added-card/priority-selector.tsx | 19 ++++----
 .../provider-added-card/priority-use-tip.tsx  |  4 +-
 .../provider-added-card/quota-panel.tsx       |  8 ++--
 .../provider-added-card/tab.tsx               | 45 -------------------
 14 files changed, 74 insertions(+), 118 deletions(-)
 delete mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/tab.tsx

diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx
index 876eb7f1de..0bf6625a83 100644
--- a/web/app/components/base/grid-mask/index.tsx
+++ b/web/app/components/base/grid-mask/index.tsx
@@ -36,8 +36,8 @@ const GridMask: FC<GridMaskProps> = ({
   const drawRecord = useCallback(() => {
     const canvas = canvasRef.current!
     const ctx = ctxRef.current!
-    const rowNumber = parseInt(`${canvas.width / 24}`)
-    const colNumber = parseInt(`${canvas.height / 24}`)
+    const rowNumber = Number.parseInt(`${canvas.width / 24}`)
+    const colNumber = Number.parseInt(`${canvas.height / 24}`)
 
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.beginPath()
@@ -82,9 +82,9 @@ const GridMask: FC<GridMaskProps> = ({
   }, [])
 
   return (
-    <div className={`relative bg-white ${wrapperClassName}`}>
+    <div className={`relative bg-components-panel-bg ${wrapperClassName}`}>
       <canvas ref={canvasRef} className={`absolute inset-0 w-full h-full ${canvasClassName}`} />
-      <div className={`absolute w-full h-full z-[1] bg-gradient-to-b from-white/80 to-white rounded-lg ${gradientClassName}`} />
+      <div className={`absolute w-full h-full z-[1] bg-gradient-to-b from-background-body to-background-gradient-mask-transparent rounded-lg ${gradientClassName}`} />
       <div className='relative z-[2]'>{children}</div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index abad9479ee..d6614a8692 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -20,6 +20,7 @@ import Radio from '@/app/components/base/radio'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
+import RadioE from '@/app/components/base/radio/ui'
 
 type FormProps = {
   className?: string
@@ -177,17 +178,15 @@ const Form: FC<FormProps> = ({
               }).map(option => (
                 <div
                   className={`
-                    flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
-                    ${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
+                    flex items-center gap-2 px-3 py-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer
+                    ${value[variable] === option.value && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border shadow-sm'}
                     ${disabled && '!cursor-not-allowed opacity-60'}
                   `}
                   onClick={() => handleFormChange(variable, option.value)}
                   key={`${variable}-${option.value}`}
                 >
-                  <div className={`
-                    flex justify-center items-center mr-2 w-4 h-4 border border-gray-300 rounded-full
-                    ${value[variable] === option.value && 'border-[5px] border-primary-600'}
-                  `} />
+                  <RadioE isChecked={value[variable] === option.value} />
+
                   <div className='system-sm-regular text-text-secondary'>{option.label[language] || option.label.en_US}</div>
                 </div>
               ))
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
index 041b44a507..f94b708bf3 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -41,11 +41,11 @@ const Input: FC<InputProps> = ({
       <input
         tabIndex={0}
         className={`
-          block px-3 w-full h-8 bg-components-input-bg-normal text-sm rounded-lg border border-transparent
+          block px-3 w-full h-8 bg-components-input-bg-normal text-sm text-components-input-text-filled rounded-lg border border-transparent
           appearance-none outline-none caret-primary-600
-          hover:border-[rgba(0,0,0,0.08)] hover:bg-state-hover-alt
-          focus:bg-white focus:border-gray-300 focus:shadow-xs
-          placeholder:text-sm placeholder:text-gray-400
+          hover:border-components-input-border-hover hover:bg-components-input-bg-hover
+          focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs
+          placeholder:text-sm placeholder:text-text-tertiary
           ${validated && 'pr-[30px]'}
           ${className}
         `}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 967bcccdca..14b737e0de 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -280,10 +280,10 @@ const ModelModal: FC<ModelModalProps> = ({
     <PortalToFollowElem open>
       <PortalToFollowElemContent className='w-full h-full z-[60]'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
             <div className='px-8 pt-8'>
               <div className='flex justify-between items-center mb-2'>
-                <div className='text-xl font-semibold text-gray-900'>{renderTitlePrefix()}</div>
+                <div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
                 <ProviderIcon provider={provider} />
               </div>
 
@@ -297,7 +297,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 isEditMode={isEditMode}
               />
 
-              <div className='mt-1 mb-4 border-t-[0.5px] border-t-gray-100' />
+              <div className='mt-1 mb-4 border-t-[0.5px] border-t-divider-regular' />
               <ModelLoadBalancingConfigs withSwitch {...{
                 draftConfig,
                 setDraftConfig,
@@ -306,7 +306,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 configurationMethod: configurateMethod,
               }} />
 
-              <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-white'>
+              <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-components-panel-bg'>
                 {
                   (provider.help && (provider.help.title || provider.help.url))
                     ? (
@@ -326,8 +326,9 @@ const ModelModal: FC<ModelModalProps> = ({
                   {
                     isEditMode && (
                       <Button
+                        variant='warning'
                         size='large'
-                        className='mr-2 text-[#D92D20]'
+                        className='mr-2'
                         onClick={() => setShowConfirm(true)}
                       >
                         {t('common.operation.remove')}
@@ -357,21 +358,21 @@ const ModelModal: FC<ModelModalProps> = ({
                 </div>
               </div>
             </div>
-            <div className='border-t-[0.5px] border-t-black/5'>
+            <div className='border-t-[0.5px] border-t-divider-regular'>
               {
                 (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
                   ? (
-                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
+                    <div className='flex px-[10px] py-3 bg-background-section-burn text-xs text-[#D92D20]'>
                       <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
                       {validatedStatusState.message}
                     </div>
                   )
                   : (
-                    <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
-                      <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                    <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
+                      <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
                       {t('common.modelProvider.encrypted.front')}
                       <a
-                        className='text-primary-600 mx-1'
+                        className='text-text-accent mx-1'
                         target='_blank' rel='noopener noreferrer'
                         href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
                       >
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
index cc8fa67efc..410ab1c090 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import cn from '@/utils/classnames'
 
 type AddModelButtonProps = {
   className?: string
@@ -14,10 +15,7 @@ const AddModelButton: FC<AddModelButtonProps> = ({
 
   return (
     <span
-      className={`
-        shrink-0 flex items-center px-1.5 h-6 text-xs font-medium text-gray-500 cursor-pointer
-      hover:bg-primary-50 hover:text-primary-600 rounded-md ${className}
-      `}
+      className={cn('shrink-0 flex items-center px-1.5 h-6 text-text-tertiary system-xs-medium cursor-pointer hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text rounded-md', className)}
       onClick={onClick}
     >
       <PlusCircle className='mr-1 w-3 h-3' />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index e7f865f198..f43b5359ab 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -66,8 +66,8 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
     <>
       {
         provider.provider_credential_schema && (
-          <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
-            <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 text-xs font-medium text-gray-500'>
+          <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border'>
+            <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 system-xs-medium-uppercase text-text-tertiary'>
               API-KEY
               <Indicator color={isCustomConfigured ? 'green' : 'red'} />
             </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index 4b7f128bca..a3dddf9435 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -122,7 +122,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
       </div>
       {
         collapsed && (
-          <div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-black/5 bg-white/30 text-xs font-medium text-gray-500'>
+          <div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-divider-subtle text-text-tertiary system-xs-medium'>
             {(showQuota || !notConfigured) && (
               <>
                 <div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'>
@@ -134,7 +134,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
                   {!loading && <RiArrowRightSLine className='w-4 h-4' />}
                 </div>
                 <div
-                  className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-white cursor-pointer'
+                  className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-components-button-ghost-bg-hover cursor-pointer'
                   onClick={handleOpenModelList}
                 >
                   {
@@ -154,7 +154,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
             {!showQuota && notConfigured && (
               <div className='flex items-center pl-1 pr-1.5 h-6'>
                 <RiInformation2Fill className='mr-1 w-4 h-4 text-text-accent' />
-                <span>{t('common.modelProvider.configureTip')}</span>
+                <span className='text-text-secondary system-xs-medium'>{t('common.modelProvider.configureTip')}</span>
               </div>
             )}
             {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 3fc73a62b2..6c4a3f575e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -49,7 +49,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
       key={model.model}
       className={classNames(
         'group flex items-center pl-2 pr-2.5 h-8 rounded-lg',
-        isConfigurable && 'hover:bg-gray-50',
+        isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover',
         model.deprecated && 'opacity-60',
       )}
     >
@@ -59,14 +59,14 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
         modelName={model.model}
       />
       <ModelName
-        className='grow text-sm font-normal text-gray-900'
+        className='grow system-md-regular text-text-secondary'
         modelItem={model}
         showModelType
         showMode
         showContextSize
       >
         {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
-          <ModelBadge className='ml-1 uppercase text-indigo-600 border-indigo-300'>
+          <ModelBadge className='ml-1 uppercase text-text-accent-secondary border-text-accent-secondary'>
             <Balance className='w-3 h-3 mr-0.5' />
             {t('common.modelProvider.loadBalancingHeadline')}
           </ModelBadge>
@@ -77,20 +77,22 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
           model.fetch_from === ConfigurationMethodEnum.customizableModel
             ? (isCurrentWorkspaceManager && (
               <Button
-                className='hidden group-hover:flex h-7'
+                size='small'
+                className='hidden group-hover:flex'
                 onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
               >
-                <Settings01 className='mr-[5px] w-3.5 h-3.5' />
+                <Settings01 className='mr-1 w-3.5 h-3.5' />
                 {t('common.modelProvider.config')}
               </Button>
             ))
             : (isCurrentWorkspaceManager && (modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status))
               ? (
                 <Button
-                  className='opacity-0 group-hover:opacity-100 h-[28px] transition-opacity'
+                  size='small'
+                  className='opacity-0 group-hover:opacity-100 transition-opacity'
                   onClick={() => onModifyLoadBalancing?.(model)}
                 >
-                  <Balance className='mr-1 w-[14px] h-[14px]' />
+                  <Balance className='mr-1 w-3.5 h-3.5' />
                   {t('common.modelProvider.configLoadBalancing')}
                 </Button>
               )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 94184076fd..2d5cf26257 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -145,19 +145,19 @@ const ModelLoadBalancingConfigs = ({
     <>
       <div
         className={classNames(
-          'min-h-16 bg-gray-50 border rounded-xl transition-colors',
-          (withSwitch || !draftConfig.enabled) ? 'border-gray-200' : 'border-primary-400',
+          'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
+          (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600',
           (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
           className,
         )}
         onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
       >
         <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
-          <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-primary-600 bg-indigo-50 border border-indigo-100 rounded-lg'>
+          <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-util-colors-blue-blue-600 bg-util-colors-indigo-indigo-50 border border-util-colors-indigo-indigo-100 rounded-lg'>
             <Balance className='w-4 h-4' />
           </div>
           <div className='grow'>
-            <div className='flex items-center gap-1 text-sm'>
+            <div className='flex items-center gap-1 text-sm text-text-primary'>
               {t('common.modelProvider.loadBalancing')}
               <Tooltip
                 popupContent={t('common.modelProvider.loadBalancingInfo')}
@@ -165,7 +165,7 @@ const ModelLoadBalancingConfigs = ({
                 triggerClassName='w-3 h-3'
               />
             </div>
-            <div className='text-xs text-gray-500'>{t('common.modelProvider.loadBalancingDescription')}</div>
+            <div className='text-xs text-text-tertiary'>{t('common.modelProvider.loadBalancingDescription')}</div>
           </div>
           {
             withSwitch && (
@@ -184,7 +184,7 @@ const ModelLoadBalancingConfigs = ({
             {draftConfig.configs.map((config, index) => {
               const isProviderManaged = config.name === '__inherit__'
               return (
-                <div key={config.id || index} className='group flex items-center px-3 h-10 bg-white border border-gray-200 rounded-lg shadow-xs'>
+                <div key={config.id || index} className='group flex items-center px-3 h-10 bg-components-panel-on-panel-item-bg border border-components-panel-border rounded-lg shadow-xs'>
                   <div className='grow flex items-center'>
                     <div className='flex items-center justify-center mr-2 w-3 h-3'>
                       {(config.in_cooldown && Boolean(config.ttl))
@@ -201,7 +201,7 @@ const ModelLoadBalancingConfigs = ({
                       {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
                     </div>
                     {isProviderManaged && (
-                      <span className='px-1 text-2xs uppercase text-gray-500 border border-black/8 rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
+                      <span className='px-1 text-2xs uppercase text-text-tertiary border border-divider-regular rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
                     )}
                   </div>
                   <div className='flex items-center gap-1'>
@@ -209,18 +209,18 @@ const ModelLoadBalancingConfigs = ({
                       <>
                         <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
                           <span
-                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
+                            className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
                             onClick={() => toggleEntryModal(index, config)}
                           >
                             <Edit02 className='w-4 h-4' />
                           </span>
                           <span
-                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
+                            className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
                             onClick={() => updateConfigEntry(index, () => undefined)}
                           >
                             <RiDeleteBinLine className='w-4 h-4' />
                           </span>
-                          <span className='mr-2 h-3 border-r border-r-gray-100' />
+                          <span className='mr-2 h-3 border-r border-r-divider-subtle' />
                         </div>
                       </>
                     )}
@@ -247,7 +247,7 @@ const ModelLoadBalancingConfigs = ({
         )}
         {
           draftConfig.enabled && draftConfig.configs.length < 2 && (
-            <div className='flex items-center px-6 h-[34px] text-xs text-gray-700 bg-black/2 border-t border-t-black/5'>
+            <div className='flex items-center px-6 h-[34px] text-xs text-text-secondary bg-components-panel-bg border-t border-t-divider-subtle'>
               <AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' />
               {t('common.modelProvider.loadBalancingLeastKeyWarning')}
             </div>
@@ -257,7 +257,7 @@ const ModelLoadBalancingConfigs = ({
 
       {!modelLoadBalancingEnabled && !IS_CE_EDITION && (
         <GridMask canvasClassName='!rounded-xl'>
-          <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-gray-200 rounded-xl shadow-md'>
+          <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-components-panel-border rounded-xl shadow-md'>
             <div
               className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
             >
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index edbb4665e9..bdc6b13c2c 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -119,7 +119,7 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
                 modelName={model!.model}
               />
               <ModelName
-                className='grow text-sm font-normal text-gray-900'
+                className='grow system-md-regular text-text-secondary'
                 modelItem={model!}
                 showModelType
                 showMode
@@ -137,20 +137,20 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
             <div className='py-2'>
               <div
                 className={classNames(
-                  'min-h-16 bg-gray-50 border rounded-xl transition-colors',
-                  draftConfig.enabled ? 'border-gray-200 cursor-pointer' : 'border-primary-400 cursor-default',
+                  'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
+                  draftConfig.enabled ? 'border-components-panel-border cursor-pointer' : 'border-util-colors-blue-blue-600 cursor-default',
                 )}
                 onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
               >
                 <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
-                  <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-white border rounded-lg'>
+                  <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-components-card-bg border border-components-card-border rounded-lg'>
                     {Boolean(model) && (
                       <ModelIcon className='shrink-0' provider={provider} modelName={model!.model} />
                     )}
                   </div>
                   <div className='grow'>
-                    <div className='text-sm'>{t('common.modelProvider.providerManaged')}</div>
-                    <div className='text-xs text-gray-500'>{t('common.modelProvider.providerManagedDescription')}</div>
+                    <div className='text-sm text-text-secondary'>{t('common.modelProvider.providerManaged')}</div>
+                    <div className='text-xs text-text-tertiary'>{t('common.modelProvider.providerManagedDescription')}</div>
                   </div>
                 </div>
               </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index 7e44011ead..e93c6636b5 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -8,6 +8,7 @@ import {
 } from '@remixicon/react'
 import { PreferredProviderTypeEnum } from '../declarations'
 import Button from '@/app/components/base/button'
+import cn from '@/utils/classnames'
 
 type SelectorProps = {
   value?: string
@@ -34,11 +35,11 @@ const Selector: FC<SelectorProps> = ({
       <Popover.Button>
         {
           ({ open }) => (
-            <Button className={`
-              px-0 w-6 h-6 bg-white rounded-md
-              ${open && '!bg-gray-100'}
-            `}>
-              <RiMoreFill className='w-3 h-3 text-gray-700' />
+            <Button className={cn(
+              'px-0 w-6 h-6 rounded-md',
+              open && 'bg-components-button-secondary-bg-hover',
+            )}>
+              <RiMoreFill className='w-3 h-3' />
             </Button>
           )
         }
@@ -49,18 +50,18 @@ const Selector: FC<SelectorProps> = ({
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
-        <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
+        <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
           <div className='p-1'>
-            <div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div>
+            <div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
             {
               options.map(option => (
                 <Popover.Button as={Fragment} key={option.key}>
                   <div
-                    className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                    className='flex items-center justify-between px-3 h-9 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
                     onClick={() => onSelect(option.key)}
                   >
                     <div className='grow'>{option.text}</div>
-                    {value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />}
+                    {value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
                   </div>
                 </Popover.Button>
               ))
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
index 24e91d2214..91e45ad1a3 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
@@ -9,8 +9,8 @@ const PriorityUseTip = () => {
     <Tooltip
       popupContent={t('common.modelProvider.priorityUsing') || ''}
     >
-      <div className='absolute -right-[5px] -top-[5px] bg-indigo-50 rounded-[5px] border-[0.5px] border-indigo-100 cursor-pointer'>
-        <ChevronDownDouble className='rotate-180 w-3 h-3 text-indigo-600' />
+      <div className='absolute -right-[5px] -top-[5px] bg-util-colors-indigo-indigo-50 rounded-[5px] border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer'>
+        <ChevronDownDouble className='rotate-180 w-3 h-3 text-util-colors-indigo-indigo-600' />
       </div>
     </Tooltip>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 0f5c265d52..8d0ea83d65 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -28,8 +28,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
   const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider)
 
   return (
-    <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
-      <div className='flex items-center mb-2 h-4 text-xs font-medium text-gray-500'>
+    <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border shadow-xs'>
+      <div className='flex items-center mb-2 h-4 system-xs-medium-uppercase text-text-tertiary'>
         {t('common.modelProvider.quota')}
         <Tooltip popupContent={
           openaiOrAnthropic
@@ -40,8 +40,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
       </div>
       {
         currentQuota && (
-          <div className='flex items-center h-4 text-xs text-gray-500'>
-            <span className='mr-0.5 text-sm font-semibold text-gray-700'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
+          <div className='flex items-center h-4 text-xs text-text-tertiary'>
+            <span className='mr-0.5 system-md-semibold-uppercase text-text-secondary'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
             {
               currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
             }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/tab.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/tab.tsx
deleted file mode 100644
index 5a533947d2..0000000000
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/tab.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { FC } from 'react'
-
-type TabProps = {
-  active: string
-  onSelect: (active: string) => void
-}
-const Tab: FC<TabProps> = ({
-  active,
-  onSelect,
-}) => {
-  const tabs = [
-    {
-      key: 'all',
-      text: 'All',
-    },
-    {
-      key: 'added',
-      text: 'Added',
-    },
-    {
-      key: 'build-in',
-      text: 'Build-in',
-    },
-  ]
-  return (
-    <div className='flex items-center'>
-      {
-        tabs.map(tab => (
-          <div
-            key={tab.key}
-            className={`
-              flex items-center mr-1 px-[5px] h-[18px] rounded-md text-xs cursor-pointer
-              ${active === tab.key ? 'bg-gray-200 font-medium text-gray-900' : 'text-gray-500 font-normal'}
-            `}
-            onClick={() => onSelect(tab.key)}
-          >
-            {tab.text}
-          </div>
-        ))
-      }
-    </div>
-  )
-}
-
-export default Tab