Feat: Replace color variables according to design draft #3221 (#9305)

### What problem does this PR solve?

Feat: Replace color variables according to design draft #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/bulk-operate-bar.tsx

           {list.map((x) => (
             <li
               key={x.id}
-              className={cn({ ['text-text-delete-red']: isDeleteItem(x.id) })}
+              className={cn({ ['text-state-error']: isDeleteItem(x.id) })}
             >
               <ConfirmDeleteDialog
                 hidden={!isDeleteItem(x.id)}

web/src/components/confirm-delete-dialog.tsx

             {t('common.cancel')}
           </AlertDialogCancel>
           <AlertDialogAction
-            className="bg-text-delete-red text-text-title"
+            className="bg-state-error text-text-primary"
             onClick={onOk}
           >
             {t('common.ok')}

web/src/components/list-filter-bar/filter-popover.tsx

                     name={x.field}
                     render={({ field }) => {
                       return (
-                        <div className="flex items-center justify-between text-text-title text-xs">
+                        <div className="flex items-center justify-between text-text-primary text-xs">
                           <FormItem
                             key={item.id}
                             className="flex flex-row  space-x-3 space-y-0 items-center "

web/src/components/list-filter-bar/index.tsx

     <Button variant="secondary" {...props} ref={ref}>
       <span
         className={cn({
-          'text-text-title': count > 0,
+          'text-text-primary': count > 0,
           'text-text-sub-title-invert': count === 0,
         })}
       >

web/src/components/next-message-item/uploaded-message-files.tsx

           )}
           <div className="text-xs max-w-20">
             <div className="truncate">{file.name}</div>
-            <p className="text-text-sub-title pt-1">{formatBytes(file.size)}</p>
+            <p className="text-text-secondary pt-1">{formatBytes(file.size)}</p>
           </div>
         </div>
       ))}

web/src/components/prompt-editor/index.tsx

           }
           placeholder={
             <div
-              className="absolute top-10 left-2 text-text-sub-title"
+              className="absolute top-10 left-2 text-text-secondary"
               data-xxx
             >
               {placeholder || t('common.pleaseInput')}

web/src/components/ui/breadcrumb.tsx

   <li
     ref={ref}
     className={cn(
-      'inline-flex items-center gap-1.5 text-text-sub-title',
+      'inline-flex items-center gap-1.5 text-text-secondary',
       className,
     )}
     {...props}

web/src/components/ui/dual-range-slider.tsx

       {...props}
     >
       <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-        <SliderPrimitive.Range className="absolute h-full bg-background-checked" />
+        <SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
       </SliderPrimitive.Track>
       {initialValue.map((value, index) => (
         <React.Fragment key={index}>
-          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-background-checked bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
+          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
             {label && (
               <span
                 className={cn(

web/src/components/ui/ragflow-pagination.tsx

               <PaginationItem
                 key={page}
                 className={cn({
-                  ['bg-background-header-bar rounded-md text-text-title']:
+                  ['bg-bg-card rounded-md text-text-primary']:
                     currentPage === page,
                 })}
               >
           options={sizeChangerOptions}
           value={currentPageSize}
           onChange={handlePageSizeChange}
-          triggerClassName="bg-background-header-bar"
+          triggerClassName="bg-bg-card"
         ></RAGFlowSelect>
       )}
     </section>

web/src/components/ui/segmented.tsx

   return (
     <div
       className={cn(
-        'flex items-center rounded-3xl p-1 gap-2 bg-background-header-bar px-5 py-2.5',
+        'flex items-center rounded-3xl p-1 gap-2 bg-bg-card px-5 py-2.5',
         className,
       )}
     >
           <div
             key={actualValue}
             className={cn(
-              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer text-text-badge',
+              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer',
               {
-                'bg-text-title': selectedValue === actualValue,
-                'text-text-title-invert': selectedValue === actualValue,
+                'bg-text-primary': selectedValue === actualValue,
+                'text-bg-base': selectedValue === actualValue,
               },
             )}
             onClick={() => handleOnChange(actualValue)}

web/src/components/ui/sidebar.tsx

         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
         className,
       )}
+      type="button"
       {...props}
     />
   );

web/src/components/ui/switch.tsx

 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-checked data-[state=unchecked]:bg-text-sub-title',
+      'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-primary data-[state=unchecked]:bg-text-sub-title',
       className,
     )}
     {...props}

web/src/components/ui/table.tsx

   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-normal text-text-sub-title [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-normal text-text-secondary [&:has([role=checkbox])]:pr-0',
       className,
     )}
     {...props}
   <td
     ref={ref}
     className={cn(
-      'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-title font-normal',
+      'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-primary font-normal',
       className,
     )}
     {...props}

web/src/components/ui/tabs.tsx

   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-title data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
       className,
     )}
     {...props}

web/src/layouts/next-header.tsx

           className="size-10 mr-[12]"
           onClick={handleLogoClick}
         />
-        <div className="flex items-center gap-1.5 text-text-sub-title">
+        <div className="flex items-center gap-1.5 text-text-secondary">
           <Github className="size-3.5" />
           <span className=" text-base">21.5k stars</span>
         </div>
             className="size-8 cursor-pointer"
             onClick={navigateToProfile}
           ></RAGFlowAvatar>
-          <Badge className="h-5 w-8 absolute font-normal p-0 justify-center -right-8 -top-2 text-text-title-invert bg-gradient-to-l from-[#42D7E7] to-[#478AF5]">
+          <Badge className="h-5 w-8 absolute font-normal p-0 justify-center -right-8 -top-2 text-bg-base bg-gradient-to-l from-[#42D7E7] to-[#478AF5]">
             Pro
           </Badge>
         </div>

web/src/layouts/next.tsx

 
 export default function NextLayout() {
   return (
-    <section className="h-full flex flex-col text-colors-text-neutral-strong">
+    <section className="h-full flex flex-col">
       <Header></Header>
       <Outlet />
     </section>

web/src/pages/agent/canvas/edge/index.tsx

         path={edgePath}
         markerEnd={markerEnd}
         style={{ ...style, ...selectedStyle, ...highlightStyle }}
-        className="text-text-sub-title"
+        className="text-text-secondary"
       />
 
       <EdgeLabelRenderer>
         >
           <button
             className={cn(
-              'size-3.5 border border-text-delete-red text-text-delete-red rounded-full leading-none',
+              'size-3.5 border border-state-error text-state-error rounded-full leading-none',
               'invisible',
               { visible },
             )}

web/src/pages/agent/canvas/node/agent-node.tsx

           {(isGotoMethod ||
             exceptionMethod === AgentExceptionMethod.Comment) && (
             <div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
-              <span className="text-text-sub-title">On Failure</span>
+              <span className="text-text-secondary">On Failure</span>
               <span className="truncate flex-1 text-right">
                 {t(`flow.${exceptionMethod}`)}
               </span>
             type="source"
             position={Position.Right}
             isConnectable={isConnectable}
-            className="!bg-text-delete-red"
+            className="!bg-state-error"
             style={{ ...RightHandleStyle, top: 94 }}
             nodeId={id}
             id={NodeHandleId.AgentException}

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

   return (
     <Accordion
       type="multiple"
-      className="px-2 text-text-title max-h-[45vh] overflow-auto"
+      className="px-2 text-text-primary max-h-[45vh] overflow-auto"
       defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
     >
       <AccordionItem value="item-1">

web/src/pages/agent/canvas/node/handle.tsx

       <Handle
         {...props}
         className={cn(
-          'inline-flex justify-center items-center !bg-background-checked !size-4 !rounded-sm !border-none ',
+          'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
           className,
         )}
         onClick={(e) => {

web/src/pages/agent/canvas/node/node-wrapper.tsx

     <section
       className={cn(
         'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
-        { 'border border-background-checked': selected },
+        { 'border border-accent-primary': selected },
         className,
       )}
     >

web/src/pages/agent/canvas/node/switch-node.tsx

         {items.map((x, idx) => (
           <div key={idx}>
             <section className="flex justify-between gap-2 items-center text-xs p-1">
-              <div className="flex-1 truncate text-background-checked">
+              <div className="flex-1 truncate text-accent-primary">
                 {getLabel(x?.cpn_id)}
               </div>
               <span>{renderOperatorIcon(x?.operator)}</span>
                 <section className="flex flex-col text-xs">
                   <div className="text-right">
                     <span>{getConditionKey(idx, positions.length)}</span>
-                    <div className="text-text-sub-title">
+                    <div className="text-text-secondary">
                       {idx < positions.length - 1 && position.text}
                     </div>
                   </div>
-                  <span className="text-background-checked">
+                  <span className="text-accent-primary">
                     {idx < positions.length - 1 &&
                       position.condition?.logical_operator?.toUpperCase()}
                   </span>

web/src/pages/agent/embed-dialog/index.tsx

             {t('embedIntoSite', { keyPrefix: 'common' })}
           </DialogTitle>
         </DialogHeader>
-        <section className="w-full overflow-auto space-y-5 text-sm text-text-sub-title">
+        <section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
           <Form {...form}>
             <form className="space-y-5">
               <FormField
             <CopyToClipboard text={token}></CopyToClipboard>
           </div>
           <a
-            className="cursor-pointer text-background-checked inline-block"
+            className="cursor-pointer text-accent-primary inline-block"
             href={
               isAgent
                 ? 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-agent'

web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx

           {!isEmpty(data) ? (
             <div
               className={cn('mt-4 rounded-md border', {
-                [`border-text-delete-red`]: !isEmpty(data._ERROR),
+                [`border-state-error`]: !isEmpty(data._ERROR),
               })}
             >
               <div className="flex justify-between p-2">

web/src/pages/agent/form/agent-form/agent-tools.tsx

   }, [deleteRecord, record]);
 
   return (
-    <div className="flex items-center gap-2 text-text-sub-title">
+    <div className="flex items-center gap-2 text-text-secondary">
       <PencilLine
         className="size-4 cursor-pointer"
         data-tool={record}
 
   return (
     <section className="space-y-2.5">
-      <span className="text-text-sub-title">Tools</span>
+      <span className="text-text-secondary">Tools</span>
       <ul className="space-y-2">
         {toolNames.map((x) => (
           <ToolCard key={x}>
 
   return (
     <section className="space-y-2.5">
-      <span className="text-text-sub-title">Agents</span>
+      <span className="text-text-secondary">Agents</span>
       <ul className="space-y-2">
         {subBottomAgentNodeIds.map((id) => {
           const currentNode = getNode(id);

web/src/pages/agent/form/code-form/next-variable.tsx

                 </FormItem>
               )}
             />
-            <Separator className="w-3 text-text-sub-title" />
+            <Separator className="w-3 text-text-secondary" />
             <FormField
               control={form.control}
               name={`${name}.${index}.type`}
 }
 
 export function VariableTitle({ title }: { title: ReactNode }) {
-  return <div className="font-medium text-text-title pb-2">{title}</div>;
+  return <div className="font-medium text-text-primary pb-2">{title}</div>;
 }
 
 export function DynamicInputVariable({

web/src/pages/agent/form/components/output.tsx

         {list.map((x, idx) => (
           <li
             key={idx}
-            className="bg-background-highlight text-background-checked rounded-sm px-2 py-1"
+            className="bg-background-highlight text-accent-primary rounded-sm px-2 py-1"
           >
-            {x.title}: <span className="text-text-sub-title">{x.type}</span>
+            {x.title}: <span className="text-text-secondary">{x.type}</span>
           </li>
         ))}
       </ul>

web/src/pages/agent/form/components/prompt-editor/index.tsx

           placeholder={
             <div
               className={cn(
-                'absolute top-1 left-2 text-text-sub-title pointer-events-none',
+                'absolute top-1 left-2 text-text-secondary pointer-events-none',
                 {
                   'truncate w-[90%]': !multiLine,
                 },

web/src/pages/agent/form/iteration-form/dynamic-output.tsx

                 </FormItem>
               )}
             />
-            <Separator className="w-3 text-text-sub-title" />
+            <Separator className="w-3 text-text-secondary" />
             <FormField
               control={form.control}
               name={`${name}.${index}.ref`}
 }
 
 export function VariableTitle({ title }: { title: ReactNode }) {
-  return <div className="font-medium text-text-title pb-2">{title}</div>;
+  return <div className="font-medium text-text-primary pb-2">{title}</div>;
 }
 
 export function DynamicOutput({ node }: IProps) {

web/src/pages/agent/form/switch-form/index.tsx

                         <SelectWithSearch
                           {...field}
                           options={finalOptions}
-                          triggerClassName="text-background-checked bg-transparent border-none truncate"
+                          triggerClassName="text-accent-primary bg-transparent border-none truncate"
                         ></SelectWithSearch>
                       </FormControl>
                       <FormMessage />
               <div className="flex justify-between items-center">
                 <section>
                   <span>{index === 0 ? 'IF' : 'ELSEIF'}</span>
-                  <div className="text-text-sub-title">Case {index + 1}</div>
+                  <div className="text-text-secondary">Case {index + 1}</div>
                 </section>
                 {index !== 0 && (
                   <Button

web/src/pages/agent/form/tool-form/mcp-form/index.tsx

           </CardHeader>
           <CardContent className="p-0 text-sm">
             <span className="pr-2"> URL:</span>
-            <a href={data.url} className="text-background-checked">
+            <a href={data.url} className="text-accent-primary">
               {data.url}
             </a>
           </CardContent>

web/src/pages/agent/form/tool-form/mcp-form/mcp-card.tsx

         {children}
         <section>
           <div className="pb-3 text-sm">{data.name}</div>
-          <p className="text-text-sub-title text-xs">{data.description}</p>
+          <p className="text-text-secondary text-xs">{data.description}</p>
         </section>
       </CardContent>
     </Card>

web/src/pages/agent/index.tsx

               </BreadcrumbItem>
             </BreadcrumbList>
           </Breadcrumb>
-          <div className="text-xs text-text-sub-title translate-y-3">
+          <div className="text-xs text-text-secondary translate-y-3">
             {t('flow.autosaved')} {time}
           </div>
         </section>

web/src/pages/agent/log-sheet/toolTimelineItem.tsx

                             ] ?? changeToolName(tool.tool_name)}
                           </span>
                         )}
-                        <span className="text-text-sub-title text-xs">
+                        <span className="text-text-secondary text-xs">
                           {/* 0:00
                           {x.data.elapsed_time?.toString().slice(0, 6)} */}
                         </span>
                         <span
                           className={cn(
-                            'border-background  -end-1 -top-1 size-2 rounded-full bg-dot-green',
+                            'border-background  -end-1 -top-1 size-2 rounded-full bg-state--success',
                           )}
                         >
                           <span className="sr-only">Online</span>

web/src/pages/agent/log-sheet/workFlowTimeline.tsx

             >
               <TimelineHeader>
                 <TimelineSeparator
-                  className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-background-checked"
+                  className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-accent-primary"
                   style={{
                     background:
                       x.data.component_type === 'Agent'
                               ] ??
                                 nodeLabel)}
                           </span>
-                          <span className="text-text-sub-title text-xs">
+                          <span className="text-text-secondary text-xs">
                             {x.data.elapsed_time?.toString().slice(0, 6)}
                           </span>
                           <span
                             className={cn(
                               'border-background  -end-1 -top-1 size-2 rounded-full',
-                              { 'bg-dot-green': isEmpty(x.data.error) },
-                              { 'bg-dot-red': !isEmpty(x.data.error) },
+                              { 'bg-state--success': isEmpty(x.data.error) },
+                              { 'bg-state--error': !isEmpty(x.data.error) },
                             )}
                           >
                             <span className="sr-only">Online</span>

web/src/pages/agent/operator-icon.tsx

 
   if (name === Operator.Begin) {
     return (
-      <div className="inline-block p-1 bg-background-checked rounded-sm">
+      <div className="inline-block p-1 bg-accent-primary rounded-sm">
         <HousePlus className="rounded size-3" />
       </div>
     );

web/src/pages/agent/version-dialog/index.tsx

                   <section className="flex justify-between">
                     <div>
                       <div className="pb-1 truncate">{agent?.title}</div>
-                      <p className="text-text-sub-title text-xs">
+                      <p className="text-text-secondary text-xs">
                         Created: {formatDate(agent?.create_date)}
                       </p>
                     </div>

web/src/pages/agents/agent-card.tsx

             <h3 className="text-lg font-semibold mb-2 line-clamp-1">
               {data.title}
             </h3>
-            <p className="text-xs text-text-sub-title">{data.description}</p>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">{data.description}</p>
+            <p className="text-xs text-text-secondary">
               {formatDate(data.update_time)}
             </p>
           </div>

web/src/pages/agents/agent-dropdown.tsx

         <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
             onSelect={(e) => {
               e.preventDefault();
             }}

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/csv-preview.tsx

               {data.headers.map((header, index) => (
                 <th
                   key={`header-${index}`}
-                  className="px-6 py-3 text-left text-sm font-medium text-text-title"
+                  className="px-6 py-3 text-left text-sm font-medium text-text-primary"
                 >
                   {header}
                 </th>

web/src/pages/dataset/dataset-title.tsx

   return (
     <div className="pb-5">
       <div className="text-2xl font-semibold">{title}</div>
-      <p className="text-text-sub-title pt-2">{description}</p>
+      <p className="text-text-secondary pt-2">{description}</p>
     </div>
   );
 }

web/src/pages/dataset/sidebar/index.tsx

           name={data.name}
           className="size-16"
         ></RAGFlowAvatar>
-        <div className=" text-text-sub-title text-xs space-y-1">
-          <h3 className="text-lg font-semibold line-clamp-1 text-text-title">
+        <div className=" text-text-secondary text-xs space-y-1">
+          <h3 className="text-lg font-semibold line-clamp-1 text-text-primary">
             {data.name}
           </h3>
           <div className="flex justify-between">
                 'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
                 {
                   'bg-bg-card': active,
-                  'text-text-title': active,
+                  'text-text-primary': active,
                 },
               )}
               onClick={handleMenuClick(item.key)}

web/src/pages/dataset/testing/index.tsx

         <section className="flex divide-x h-full">
           <div className="p-4 flex-1">
             <div className="flex justify-between pb-2.5">
-              <span className="text-text-title font-semibold text-2xl">
+              <span className="text-text-primary font-semibold text-2xl">
                 Test setting
               </span>
               {/* <Button variant={'outline'} onClick={addCount}>

web/src/pages/dataset/testing/testing-result.tsx

   return (
     <div className="p-4 flex-1">
       <div className="flex justify-between pb-2.5">
-        <span className="text-text-title font-semibold text-2xl">
+        <span className="text-text-primary font-semibold text-2xl">
           Test results
         </span>
         <FilterPopover

web/src/pages/datasets/dataset-card.tsx

             <h3 className="text-lg font-semibold mb-2 line-clamp-1">
               {dataset.name}
             </h3>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">
               {dataset.doc_num} files
             </p>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">
               {formatDate(dataset.update_time)}
             </p>
           </div>
       className="bg-colors-background-inverse-weak w-40"
       onClick={navigateToDatasetList}
     >
-      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
+      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>
     </Card>

web/src/pages/datasets/dataset-dropdown.tsx

         <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
             onSelect={(e) => {
               e.preventDefault();
             }}

web/src/pages/home/application-card.tsx

             <h3 className="text-sm font-normal line-clamp-1 mb-1">
               {app.title}
             </h3>
-            <p className="text-xs font-normal text-text-sub-title">
+            <p className="text-xs font-normal text-text-secondary">
               {formatDate(app.update_time)}
             </p>
           </div>
 export function SeeAllAppCard({ click }: SeeAllAppCardProps) {
   return (
     <Card className="w-64 min-h-[76px]" onClick={click}>
-      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
+      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>
     </Card>

web/src/pages/home/banner.tsx

   const { t } = useTranslation();
   return (
     <section className="text-5xl pt-10 pb-14 font-bold">
-      <span className="text-text-title">{t('header.welcome')}</span>
+      <span className="text-text-primary">{t('header.welcome')}</span>
       <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
         RAGFlow
       </span>

web/src/pages/next-chats/chat-card.tsx

             <h3 className="text-lg font-semibold mb-2 line-clamp-1 truncate">
               {data.name}
             </h3>
-            <p className="text-xs text-text-sub-title">{data.description}</p>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">{data.description}</p>
+            <p className="text-xs text-text-secondary">
               {formatDate(data.update_time)}
             </p>
           </div>

web/src/pages/next-chats/chat-dropdown.tsx

         <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
             onSelect={(e) => {
               e.preventDefault();
             }}

web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx

               onClick={handleTest}
             >
               <RefreshCw
-                className={cn('text-background-checked', {
+                className={cn('text-accent-primary', {
                   'animate-spin': testLoading,
                 })}
               />

web/src/pages/profile-setting/mcp/index.tsx

 
   return (
     <section className="p-4 w-full">
-      <div className="text-text-title text-2xl">MCP Servers</div>
+      <div className="text-text-primary text-2xl">MCP Servers</div>
       <section className="flex items-center justify-between pb-5">
-        <div className="text-text-sub-title">
+        <div className="text-text-secondary">
           Customize the list of MCP servers
         </div>
         <div className="flex gap-5">

web/src/pages/profile-setting/mcp/mcp-card.tsx

     <Card key={data.id} className="w-64">
       <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between pb-2">
-          <h3 className="text-lg font-semibold line-clamp-1">{data.name}</h3>
+          <h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>
           <div className="space-x-4">
             <McpDropdown mcpId={data.id} showEditModal={showEditModal}>
               <MoreButton></MoreButton>
         </section>
         <div className="flex justify-between items-end">
           <div className="w-full">
-            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-sub-title">
+            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-secondary">
               {toolLength} cached tools
             </div>
-            <p className="text-sm text-text-sub-title">
+            <p className="text-sm text-text-secondary">
               {formatDate(data.update_date)}
             </p>
           </div>

web/src/pages/profile-setting/mcp/mcp-dropdown.tsx

         <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
             onSelect={(e) => {
               e.preventDefault();
             }}

web/src/pages/profile-setting/mcp/tool-card.tsx

     <Card>
       <CardContent className="p-2.5 pt-2 group">
         <h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
-        <div className="text-xs font-normal mb-3 text-text-sub-title">
+        <div className="text-xs font-normal mb-3 text-text-secondary">
           {data.description}
         </div>
       </CardContent>

web/tailwind.config.js

         'colors-text-inverse-strong': 'var(--colors-text-inverse-strong)',
         'colors-text-persist-light': 'var(--colors-text-persist-light)',
         'colors-text-inverse-weak': 'var(--colors-text-inverse-weak)',
-        'text-delete-red': 'var(--text-delete-red)',
 
         'background-badge': 'var(--background-badge)',
         'text-badge': 'var(--text-badge)',
         'background-header-bar': 'var(--background-header-bar)',
         'background-card': 'var(--background-card)',
         'background-note': 'var(--background-note)',
-        'background-checked': 'var(--background-checked)',
         'background-highlight': 'var(--background-highlight)',
 
         'input-border': 'var(--input-border)',
-        'dot-green': 'var(--dot-green)',
-        'dot-red': 'var(--dot-red)',
 
         /* design colors */
 
         'border-button': 'var(--border-button)',
         'accent-primary': 'var(--accent-primary)',
         'bg-accent': 'var(--bg-accent)',
-        'state--success': 'var(--state--success)',
-        'state--warning': 'var(--state--warning)',
-        'state--error': 'var(--state--error)',
+        'state-success': 'var(--state-success)',
+        'state-warning': 'var(--state-warning)',
+        'state-error': 'var(--state-error)',
         'team-group': 'var(--team-group)',
         'team-member': 'var(--team-member)',
         'team-department': 'var(--team-department)',

web/tailwind.css

     --colors-text-inverse-strong: rgba(255, 255, 255, 1);
     --colors-text-persist-light: rgba(255, 255, 255, 1);
     --colors-text-inverse-weak: rgba(184, 181, 203, 1);
-    --text-delete-red: rgba(216, 73, 75, 1);
 
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
 
     --background-note: rgba(22, 22, 24, 0.1);
 
-    --background-checked: rgba(76, 164, 231, 1);
     --background-highlight: rgba(76, 164, 231, 0.1);
 
     --input-border: rgba(22, 22, 24, 0.2);
-    --dot-green: rgba(59, 160, 92, 1);
-    --dot-red: rgba(216, 73, 75, 1);
 
     /* design colors */
 
     /* Output Variables Box */
     --bg-accent: rgba(76, 164, 231, 0.05);
 
-    --state--success: #3ba05c;
-    --state--warning: #faad14;
+    --state-success: #3ba05c;
+    --state-warning: #faad14;
     --state-error: #d8494b;
 
     --team-group: #5ab77e;
     --colors-text-inverse-strong: rgba(17, 16, 23, 1);
     --colors-text-persist-light: rgba(255, 255, 255, 1);
     --colors-text-inverse-weak: rgba(84, 80, 106, 1);
-    --text-delete-red: rgba(216, 73, 75, 1);
 
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
 
     --background-card: rgba(255, 255, 255, 0.05);
     --background-note: rgba(255, 255, 255, 0.05);
-    --background-checked: rgba(76, 164, 231, 1);
 
     --background-highlight: rgba(76, 164, 231, 0.1);
 
     --input-border: rgba(255, 255, 255, 0.2);
 
-    --dot-green: rgba(59, 160, 92, 1);
-    --dot-red: rgba(216, 73, 75, 1);
-
     /* design colors */
 
     --bg-base: #161618;
     @apply border-border;
   }
   body {
-    @apply bg-text-title-invert text-foreground;
+    @apply bg-bg-base text-text-primary;
     font-feature-settings:
       'rlig' 1,
       'calt' 1;