From 4757db1b6be2436568c1d2efe70797c081676919 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 26 Nov 2024 14:18:42 +0800
Subject: [PATCH] refactor: use css var

---
 .../common/retrieval-method-config/index.tsx  |  3 ++-
 .../common/retrieval-method-info/index.tsx    |  2 +-
 web/app/components/datasets/create/index.tsx  |  2 +-
 .../datasets/create/step-two/index.tsx        | 14 +++++------
 .../datasets/create/step-two/inputs.tsx       |  2 +-
 .../datasets/create/step-two/option-card.tsx  |  8 +++----
 .../datasets/create/stepper/index.tsx         |  8 +++----
 .../datasets/create/stepper/step.tsx          | 24 +++++++++++++++----
 .../detail/batch-modal/csv-downloader.tsx     |  2 +-
 .../documents/detail/metadata/index.tsx       |  2 +-
 .../documents/detail/segment-add/index.tsx    |  4 ++--
 .../hit-testing/modify-retrieval-modal.tsx    |  2 +-
 .../datasets/settings/form/index.tsx          |  2 +-
 13 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index 5a17b73569..6509ed995c 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -17,6 +17,7 @@ import {
   RerankingModeEnum,
   WeightedScoreEnum,
 } from '@/models/datasets'
+import Badge from '@/app/components/base/badge'
 
 type Props = {
   value: RetrievalConfig
@@ -103,7 +104,7 @@ const RetrievalMethodConfig: FC<Props> = ({
           title={
             <div className='flex items-center space-x-1'>
               <div>{t('dataset.retrieval.hybrid_search.title')}</div>
-              <div className='flex h-full items-center px-1.5 rounded-md border border-[#296cff] text-xs font-medium text-[#296cff] text-[10px]'>{t('dataset.retrieval.hybrid_search.recommend')}</div>
+              <Badge text={t('dataset.retrieval.hybrid_search.recommend')} className='border-text-accent-secondary text-text-accent-secondary ml-2' uppercase />
             </div>
           }
           description={t('dataset.retrieval.hybrid_search.description')} isActive={
diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index 7d9b999c53..5b30675652 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -32,7 +32,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
   return (
     <div className='space-y-2'>
       <RadioCard
-        icon={<Icon className='w-4 h-4 text-[#7839EE]' />}
+        icon={<Icon className='w-4 h-4 text-util-colors-purple-purple-600' />}
         title={t(`dataset.retrieval.${type}.title`)}
         description={t(`dataset.retrieval.${type}.description`)}
         noRadio
diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx
index 3829abe27b..f2f869b704 100644
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@@ -124,7 +124,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
   return (
     <div className='flex flex-col' style={{ height: 'calc(100vh - 56px)' }}>
       <div className="grow bg-white flex flex-col max-h-full h-full">
-        <Topbar activeStepIndex={step - 1} />
+        <Topbar activeIndex={step - 1} />
         <div className={step === 1 ? 'block h-full max-h-full overflow-auto' : 'hidden'}>
           <StepOne
             hasConnection={hasConnection}
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 88f7661a03..dc5258e509 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -61,7 +61,7 @@ import { IS_CE_EDITION } from '@/config'
 import Switch from '@/app/components/base/switch'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
-  return <label className='text-[#354052] text-xs font-semibold leading-none'>{props.children}</label>
+  return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
 }
 
 const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
@@ -779,7 +779,7 @@ const StepTwo = ({
                     <TextLabel>
                       {t('datasetCreation.stepTwo.childChunkForRetrieval')}
                     </TextLabel>
-                    <div className='flex gap-2'>
+                    <div className='flex gap-2 mt-2'>
                       <DelimiterInput
                         value={parentChildConfig.child.delimiter}
                         onChange={e => setParentChildConfig({
@@ -841,7 +841,7 @@ const StepTwo = ({
                       setIndexType(IndexingType.QUALIFIED)
                   }}
                 >
-                  <div className='h-8 p-1.5 bg-white rounded-lg border border-[#101828]/10 justify-center items-center inline-flex absolute left-5 top-[18px]'>
+                  <div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
                     <Image src={indexMethodIcon.high_quality} alt='Gold Icon' width={20} height={20} />
                   </div>
                   {!hasSetIndexType && <span className={cn(s.radio)} />}
@@ -872,7 +872,7 @@ const StepTwo = ({
                   )}
                   onClick={changeToEconomicalType}
                 >
-                  <div className='h-8 p-1.5 bg-white rounded-lg border border-[#101828]/10 justify-center items-center inline-flex absolute left-5 top-[18px]'>
+                  <div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
                     <Image src={indexMethodIcon.economical} alt='Economical Icon' width={20} height={20} />
                   </div>
                   {!hasSetIndexType && <span className={cn(s.radio)} />}
@@ -886,7 +886,7 @@ const StepTwo = ({
             {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
               <div className='mt-2 text-xs text-gray-500 font-medium'>
                 {t('datasetCreation.stepTwo.indexSettingTip')}
-                <Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
+                <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
               </div>
             )}
             {IS_CE_EDITION && indexType === IndexingType.QUALIFIED && (
@@ -931,7 +931,7 @@ const StepTwo = ({
                 {!!datasetId && (
                   <div className='mt-2 text-xs text-gray-500 font-medium'>
                     {t('datasetCreation.stepTwo.indexSettingTip')}
-                    <Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
+                    <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
                   </div>
                 )}
               </div>
@@ -943,7 +943,7 @@ const StepTwo = ({
                   <div className={s.label}>
                     <div className='shrink-0 mr-4'>{t('datasetSettings.form.retrievalSetting.title')}</div>
                     <div className='leading-[18px] text-xs font-normal text-gray-500'>
-                      <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+                      <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
                       {t('datasetSettings.form.retrievalSetting.longDescription')}
                     </div>
                   </div>
diff --git a/web/app/components/datasets/create/step-two/inputs.tsx b/web/app/components/datasets/create/step-two/inputs.tsx
index 899f5b120c..7a35db9153 100644
--- a/web/app/components/datasets/create/step-two/inputs.tsx
+++ b/web/app/components/datasets/create/step-two/inputs.tsx
@@ -7,7 +7,7 @@ import type { InputNumberProps } from '@/app/components/base/input-number'
 import { InputNumber } from '@/app/components/base/input-number'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
-  return <label className='text-[#354052] text-xs font-semibold leading-none'>{props.children}</label>
+  return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
 }
 
 const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 96263d51a0..5aa398f0f2 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -27,7 +27,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   )}>
     <div className='size-14 flex items-center justify-center relative overflow-hidden'>
       {isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
-      <div className='size-8 rounded-lg border p-1.5 shadow border-[#101828]/10 justify-center flex bg-white'>
+      <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-white'>
         {icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />}
       </div>
     </div>
@@ -35,8 +35,8 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       className='absolute left-4 -bottom-1.5'
     />
     <div className='flex-1 space-y-1 py-3 pr-4'>
-      <div className='text-[#354052] text-sm font-semibold leading-tight'>{title}</div>
-      <div className='text-[#676f83] text-xs font-normal leading-none'>{description}</div>
+      <div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
+      <div className='text-text-tertiary text-xs font-normal leading-none'>{description}</div>
     </div>
   </div>
 }
@@ -57,7 +57,7 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
   return <div
     className={classNames(
       'rounded-xl overflow-hidden',
-      isActive ? 'border-[#296cff] bg-white' : 'border-[#e9ebf0] bg-[#FCFCFD]',
+      isActive ? 'border-components-option-card-option-selected-border bg-components-panel-bg' : 'border-components-option-card-option-border bg-components-option-card-option-bg',
       className,
     )}
     style={{
diff --git a/web/app/components/datasets/create/stepper/index.tsx b/web/app/components/datasets/create/stepper/index.tsx
index b416215c26..4c120e4d48 100644
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@@ -4,7 +4,7 @@ import { StepperStep } from './step'
 
 export type StepperProps = {
   steps: Step[]
-  activeStepIndex: number
+  activeIndex: number
 }
 
 function join<T, R = T>(array: T[], sep: R): Array<T | R> {
@@ -17,18 +17,18 @@ function join<T, R = T>(array: T[], sep: R): Array<T | R> {
 }
 
 export const Stepper: FC<StepperProps> = (props) => {
-  const { steps, activeStepIndex } = props
+  const { steps, activeIndex } = props
   return <div className='flex items-center gap-3'>
     {join(
       steps.map((step, index) => (
         <StepperStep
           key={index}
           {...step}
-          isActive={index === activeStepIndex}
+          activeIndex={activeIndex}
           index={index}
         />
       )),
-      <div className="w-4 h-px bg-[#101828]/30" />,
+      <div className="w-4 h-px bg-text-quaternary" />,
     )}
   </div>
 }
diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index 8ab77650d5..ff0dd066ab 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -7,27 +7,41 @@ export type Step = {
 
 export type StepperStepProps = Step & {
   index: number
-  isActive: boolean
+  activeIndex: number
 }
 
 export const StepperStep: FC<StepperStepProps> = (props) => {
-  const { name, isActive, index } = props
+  const { name, activeIndex, index } = props
+  const isActive = index === activeIndex
+  const isDisabled = activeIndex < index
   const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
   return <div className='flex items-center gap-2'>
     <div className={classNames(
       'h-5 px-2 py-1 rounded-3xl flex-col justify-center items-center gap-2 inline-flex',
-      isActive ? 'bg-[#296cff]' : 'border border-[#101828]/30',
+      isActive
+        ? 'bg-state-accent-solid'
+        : !isDisabled
+          ? 'border border-text-tertiary'
+          : 'border border-divider-deep',
     )}>
       <div className={classNames(
         'text-center text-[10px] font-semibold uppercase leading-3',
-        isActive ? 'text-white' : 'text-[#676f83]',
+        isActive
+          ? 'text-white'
+          : !isDisabled
+            ? 'text-text-tertiary'
+            : 'text-text-tertiary/30',
       )}>
         {label}
       </div>
     </div>
     <div className={classNames(
       ' text-xs font-medium uppercase leading-none',
-      isActive ? 'text-[#155aef]' : 'text-[#676f83]',
+      isActive
+        ? 'text-text-accent'
+        : !isDisabled
+          ? 'text-text-tertiary'
+          : 'text-text-tertiary/30',
     )}>{name}</div>
   </div>
 }
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
index 36216aa7c8..d340f90deb 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
@@ -97,7 +97,7 @@ const CSVDownload: FC<{ docForm: DocForm }> = ({ docForm }) => {
         bom={true}
         data={getTemplate()}
       >
-        <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
+        <div className='flex items-center h-[18px] space-x-1 text-text-accent text-xs font-medium'>
           <DownloadIcon className='w-3 h-3 mr-1' />
           {t('datasetDocuments.list.batchModal.template')}
         </div>
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 27b1c27db6..6c1d749a28 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -352,7 +352,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
                       ·
                       <div
                         onClick={() => { setShowDocTypes(true) }}
-                        className='cursor-pointer hover:text-[#155EEF]'
+                        className='cursor-pointer hover:text-text-accent'
                       >
                         {t('common.operation.change')}
                       </div>
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index 486154e859..c1cb0629ed 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -50,14 +50,14 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
           <div className='inline-flex items-center mr-2 px-3 py-[6px] text-gray-700 bg-[#F6FEF9] rounded-lg border border-black/5'>
             <CheckCircle className='mr-2 w-4 h-4 text-[#039855]' />
             <span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.completed')}</span>
-            <span className='pl-2 font-medium text-[13px] leading-[18px] text-[#155EEF] cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+            <span className='pl-2 font-medium text-[13px] leading-[18px] text-text-accent cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
           </div>
         )}
         {importStatus === ProcessStatus.ERROR && (
           <div className='inline-flex items-center mr-2 px-3 py-[6px] text-red-600 bg-red-100 rounded-lg border border-black/5'>
             <RiErrorWarningFill className='mr-2 w-4 h-4 text-[#D92D20]' />
             <span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.error')}</span>
-            <span className='pl-2 font-medium text-[13px] leading-[18px] text-[#155EEF] cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+            <span className='pl-2 font-medium text-[13px] leading-[18px] text-text-accent cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
           </div>
         )}
       </>
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index 1fc5b68d67..f4f1d05598 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -77,7 +77,7 @@ const ModifyRetrievalModal: FC<Props> = ({
         <div className='text-base font-semibold text-gray-900'>
           <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
           <div className='leading-[18px] text-xs font-normal text-gray-500'>
-            <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+            <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
             {t('datasetSettings.form.retrievalSetting.description')}
           </div>
         </div>
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index b93ebd0115..7ce31986c1 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -305,7 +305,7 @@ const Form = () => {
             <div>
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
               <div className='leading-[18px] text-xs font-normal text-gray-500'>
-                <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+                <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
                 {t('datasetSettings.form.retrievalSetting.description')}
               </div>
             </div>