feat: update styling for dataset creation components and replace error message background

web/app/components/datasets/create/embedding-process/index.tsx

@@ -253,9 +253,9 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
   return (
     <>
       <div className="h-5 flex items-center mb-3">
-        <div className="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
+        <div className="flex items-center justify-between text-text-secondary font-medium text-sm mr-2">
           {isEmbedding && <div className='flex items-center'>
-            <RiLoader2Fill className='size-4 mr-1 animate-spin' />
+            <RiLoader2Fill className='size-4 mr-1 animate-spin text-text-secondary' />
             {t('datasetDocuments.embedding.processing')}
           </div>}
           {isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
@@ -304,7 +304,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 />
               )}
               <div className="grow flex items-center gap-1 w-0" title={getSourceName(indexingStatusDetail.id)}>
-                <div className="text-xs truncate">
+                <div className="system-xs-medium text-text-secondary truncate">
                   {getSourceName(indexingStatusDetail.id)}
                 </div>
                 {

web/app/components/datasets/create/step-three/index.tsx

@@ -34,8 +34,8 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
                 <div className="flex gap-4">
                   <AppIcon {...creationCache?.dataset} className="size-14 text-2xl self-center" />
                   <div className="grow flex flex-col gap-1">
-                    <div className="text-[13px] leading-6 font-semibold">{t('datasetCreation.stepThree.label')}</div>
+                    <div className="text-[13px] leading-6 font-semibold text-text-secondary">{t('datasetCreation.stepThree.label')}</div>
-                    <div className="w-full px-3 py-2 text-[13px] leading-4 bg-components-input-bg-normal rounded-lg truncate">{datasetName || creationCache?.dataset?.name}</div>
+                    <div className="w-full px-3 py-2 text-[13px] leading-4 bg-components-input-bg-normal rounded-lg truncate text-components-input-text-filled">{datasetName || creationCache?.dataset?.name}</div>
                   </div>
                 </div>
               </div>

web/app/components/datasets/create/step-two/index.tsx

@@ -581,7 +581,7 @@ const StepTwo = ({
   return (
     <div className='flex w-full h-full'>
       <div className={cn('relative h-full w-1/2 py-6 overflow-y-auto', isMobile ? 'px-4' : 'px-12')}>
-        <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
+        <div className={'system-md-semibold text-text-secondary mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
         {((isInUpload && [ChunkingMode.text, ChunkingMode.qa].includes(currentDataset!.doc_form))
           || isUploadInEmptyDataset
           || isInInit)
@@ -832,10 +832,10 @@ const StepTwo = ({
             </div>
           </OptionCard>}
         <Divider className='my-5' />
-        <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
+        <div className={'system-md-semibold text-text-secondary mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
         <div className='flex items-center gap-2'>
           {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
-            <OptionCard className='flex-1'
+            <OptionCard className='flex-1 self-stretch'
               title={<div className='flex items-center'>
                 {t('datasetCreation.stepTwo.qualified')}
                 <Badge className={cn('ml-1 h-[18px]', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>
@@ -889,7 +889,7 @@ const StepTwo = ({
                 placement={'top'}
               >
                 <PortalToFollowElemTrigger asChild>
-                  <OptionCard className='flex-1'
+                  <OptionCard className='flex-1 self-stretch'
                     title={t('datasetCreation.stepTwo.economical')}
                     description={t('datasetCreation.stepTwo.economicalTip')}
                     icon={<Image src={indexMethodIcon.economical} alt='' />}
@@ -916,11 +916,11 @@ const StepTwo = ({
         </div>
         {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
           <div className='mt-2 h-10 p-2 flex items-center gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border overflow-hidden bg-components-panel-bg-blur backdrop-blur-[5px] shadow-xs'>
-            <div className='absolute top-0 left-0 right-0 bottom-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
+            <div className='absolute top-0 left-0 right-0 bottom-0 bg-dataset-warning-message-bg opacity-40'></div>
             <div className='p-1'>
               <AlertTriangle className='size-4 text-text-warning-secondary' />
             </div>
-            <span className='system-xs-medium'>{t('datasetCreation.stepTwo.highQualityTip')}</span>
+            <span className='system-xs-medium text-text-primary'>{t('datasetCreation.stepTwo.highQualityTip')}</span>
           </div>
         )}
         {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
@@ -932,7 +932,7 @@ const StepTwo = ({
         {/* Embedding model */}
         {indexType === IndexingType.QUALIFIED && (
           <div className='mt-5'>
-            <div className={cn('system-md-semibold mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
+            <div className={cn('system-md-semibold text-text-secondary mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
             <ModelSelector
               readonly={isModelAndRetrievalConfigDisabled}
               triggerClassName={isModelAndRetrievalConfigDisabled ? 'opacity-50' : ''}
@@ -956,7 +956,7 @@ const StepTwo = ({
           {!isModelAndRetrievalConfigDisabled
             ? (
               <div className={'mb-1'}>
-                <div className='system-md-semibold mb-0.5'>{t('datasetSettings.form.retrievalSetting.title')}</div>
+                <div className='system-md-semibold text-text-secondary mb-0.5'>{t('datasetSettings.form.retrievalSetting.title')}</div>
                 <div className='body-xs-regular text-text-tertiary'>
                   <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')}

web/app/components/datasets/create/step-two/option-card.tsx

@@ -34,7 +34,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       </div>
     </div>
     <TriangleArrow
-      className='absolute left-4 -bottom-1.5 text-components-panel-bg'
+      className={classNames('absolute left-4 -bottom-1.5 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='text-text-secondary system-md-semibold'>{title}</div>

web/app/components/datasets/create/website/base/error-message.tsx

@@ -16,7 +16,7 @@ const ErrorMessage: FC<Props> = ({
   errorMsg,
 }) => {
   return (
-    <div className={cn(className, 'py-2 px-4 border-t border-divider-subtle bg-dataset-crawler-error-message-bg')}>
+    <div className={cn(className, 'py-2 px-4 border-t border-divider-subtle bg-dataset-warning-message-bg opacity-40')}>
       <div className='flex items-center h-5'>
         <AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
         <div className='system-md-medium text-text-warning'>{title}</div>

web/tailwind.config.js

@@ -107,7 +107,7 @@ const config = {
         'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
         'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
         'dataset-chunk-list-mask-bg': 'var(--color-dataset-chunk-list-mask-bg)',
-        'dataset-crawler-error-message-bg': 'var(--color-dataset-crawler-error-message-bg)',
+        'dataset-warning-message-bg': 'var(--color-dataset-warning-message-bg)',
       },
       lineClamp: {
         '20': '20',

web/themes/manual-dark.css

@@ -32,5 +32,5 @@ html[data-theme="dark"] {
     rgba(24, 24, 27, 0.08) 0%,
     rgba(0, 0, 0, 0) 100%
   );
-  --color-dataset-crawler-error-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+  --color-dataset-warning-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
 }

web/themes/manual-light.css

@@ -32,5 +32,5 @@ html[data-theme="light"] {
     rgba(200, 206, 218, 0.2) 0%,
     rgba(255, 255, 255, 0) 100%
   );
-  --color-dataset-crawler-error-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
+  --color-dataset-warning-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
 }