From 23062cb27a65941a5d2c6d53ced238795e7a7dea Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 7 Aug 2025 13:59:33 +0800
Subject: [PATCH] Feat: Configure colors according to the design draft#3221
 (#9301)

### What problem does this PR solve?

Feat: Configure colors according to the design draft#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/edit-tag/index.tsx         |  6 +--
 .../components/next-message-item/index.tsx    |  2 +-
 web/src/components/ui/badge.tsx               |  2 +-
 web/src/components/ui/button.tsx              |  5 +--
 web/src/components/ui/card.tsx                |  5 +--
 web/src/components/ui/table.tsx               |  2 +-
 web/src/locales/en.ts                         |  2 +-
 .../pages/agent/canvas/node/agent-node.tsx    |  4 +-
 .../agent/canvas/node/categorize-node.tsx     |  4 +-
 .../node/dropdown/next-step-dropdown.tsx      |  2 +-
 web/src/pages/agent/embed-dialog/index.tsx    |  2 +-
 .../agent/form/agent-form/agent-tools.tsx     |  2 +-
 .../pages/agent/form/switch-form/index.tsx    |  2 +-
 .../agent/log-sheet/toolTimelineItem.tsx      |  2 +-
 .../agent/log-sheet/workFlowTimeline.tsx      |  2 +-
 .../components/chunk-result-bar/index.tsx     | 11 ++---
 web/src/pages/dataset/sidebar/index.tsx       |  2 +-
 web/src/pages/next-chats/chat/sessions.tsx    |  2 +-
 web/tailwind.config.js                        | 22 ++++++++++
 web/tailwind.css                              | 44 +++++++++++++++++++
 20 files changed, 92 insertions(+), 33 deletions(-)

diff --git a/web/src/components/edit-tag/index.tsx b/web/src/components/edit-tag/index.tsx
index 44bea7296..94013ceac 100644
--- a/web/src/components/edit-tag/index.tsx
+++ b/web/src/components/edit-tag/index.tsx
@@ -58,7 +58,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
         <HoverCardTrigger>
           <div
             key={tag}
-            className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-background-card"
+            className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card"
           >
             <div className="flex gap-2 items-center">
               <div className="max-w-80 overflow-hidden text-ellipsis">
@@ -90,7 +90,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
         <Input
           ref={inputRef}
           type="text"
-          className="h-8 bg-background-card"
+          className="h-8 bg-bg-card"
           value={inputValue}
           onChange={handleInputChange}
           onBlur={handleInputConfirm}
@@ -103,7 +103,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
       ) : (
         <Button
           variant="dashed"
-          className="w-fit flex items-center justify-center gap-2 bg-background-card"
+          className="w-fit flex items-center justify-center gap-2 bg-bg-card"
           onClick={showInput}
           style={tagPlusStyle}
         >
diff --git a/web/src/components/next-message-item/index.tsx b/web/src/components/next-message-item/index.tsx
index 6aeca0c4f..0cba41d4e 100644
--- a/web/src/components/next-message-item/index.tsx
+++ b/web/src/components/next-message-item/index.tsx
@@ -226,7 +226,7 @@ function MessageItem({
                   ? styles.messageTextDark
                   : styles.messageText]: isAssistant,
                 [styles.messageUserText]: !isAssistant,
-                'bg-background-card': !isAssistant,
+                'bg-bg-card': !isAssistant,
               })}
             >
               {item.data ? (
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index 961594f96..df1adb278 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -11,7 +11,7 @@ const badgeVariants = cva(
         default:
           'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
-          'border-transparent bg-background-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
+          'border-transparent bg-bg-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground',
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 44eeb6458..0853aac74 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -15,8 +15,7 @@ const buttonVariants = cva(
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
           'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-background-card text-secondary-foreground hover:bg-secondary/80',
+        secondary: 'bg-bg-card text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         tertiary:
@@ -52,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Comp
         className={cn(
-          'bg-background-card',
+          'bg-bg-card',
           buttonVariants({ variant, size, className }),
         )}
         ref={ref}
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 3e6e7f5f7..7c2c813ee 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      'rounded-lg  bg-background-card  text-card-foreground shadow-sm',
-      className,
-    )}
+    className={cn('rounded-lg  bg-bg-card  shadow-sm', className)}
     {...props}
   />
 ));
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
index 5316a3aa3..3c99af510 100644
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -8,7 +8,7 @@ const Table = React.forwardRef<
 >(({ className, rootClassName, ...props }, ref) => (
   <div
     className={cn(
-      'relative w-full overflow-auto rounded-2xl bg-background-card',
+      'relative w-full overflow-auto rounded-2xl bg-bg-card',
       rootClassName,
     )}
   >
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 083e2fe4d..10a185431 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -1028,7 +1028,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
         '30d': '30 days',
       },
       publish: 'API',
-      exeSQL: 'ExeSQL',
+      exeSQL: 'Execute SQL',
       exeSQLDescription:
         'A component that performs SQL queries on a relational database, supporting querying from MySQL, PostgreSQL, or MariaDB.',
       dbType: 'Database Type',
diff --git a/web/src/pages/agent/canvas/node/agent-node.tsx b/web/src/pages/agent/canvas/node/agent-node.tsx
index 7435628bd..d73bc0b6d 100644
--- a/web/src/pages/agent/canvas/node/agent-node.tsx
+++ b/web/src/pages/agent/canvas/node/agent-node.tsx
@@ -83,12 +83,12 @@ function InnerAgentNode({
         ></Handle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
         <section className="flex flex-col gap-2">
-          <div className={'bg-background-card rounded-sm p-1'}>
+          <div className={'bg-bg-card rounded-sm p-1'}>
             <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
           </div>
           {(isGotoMethod ||
             exceptionMethod === AgentExceptionMethod.Comment) && (
-            <div className="bg-background-card rounded-sm p-1 flex justify-between gap-2">
+            <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="truncate flex-1 text-right">
                 {t(`flow.${exceptionMethod}`)}
diff --git a/web/src/pages/agent/canvas/node/categorize-node.tsx b/web/src/pages/agent/canvas/node/categorize-node.tsx
index 4747b71b2..a54136b5a 100644
--- a/web/src/pages/agent/canvas/node/categorize-node.tsx
+++ b/web/src/pages/agent/canvas/node/categorize-node.tsx
@@ -31,13 +31,13 @@ export function InnerCategorizeNode({
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
 
         <section className="flex flex-col gap-2">
-          <div className={'bg-background-card rounded-sm px-1'}>
+          <div className={'bg-bg-card rounded-sm px-1'}>
             <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
           </div>
           {positions.map((position) => {
             return (
               <div key={position.uuid}>
-                <div className={'bg-background-card rounded-sm p-1 truncate'}>
+                <div className={'bg-bg-card rounded-sm p-1 truncate'}>
                   {position.name}
                 </div>
                 <CommonHandle
diff --git a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
index e8950fafb..6a0ff0d17 100644
--- a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
@@ -42,7 +42,7 @@ function OperatorItemList({ operators }: OperatorItemProps) {
             <TooltipTrigger asChild>
               <DropdownMenuItem
                 key={x}
-                className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
+                className="hover:bg-bg-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
                 onClick={addCanvasNode(x, {
                   nodeId,
                   id,
diff --git a/web/src/pages/agent/embed-dialog/index.tsx b/web/src/pages/agent/embed-dialog/index.tsx
index 3875355a7..52506bd66 100644
--- a/web/src/pages/agent/embed-dialog/index.tsx
+++ b/web/src/pages/agent/embed-dialog/index.tsx
@@ -145,7 +145,7 @@ function EmbedDialog({
             {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
             <span className="ml-1 inline-block">ID</span>
           </div>
-          <div className="bg-background-card rounded-lg flex justify-between p-2">
+          <div className="bg-bg-card rounded-lg flex justify-between p-2">
             <span>{token} </span>
             <CopyToClipboard text={token}></CopyToClipboard>
           </div>
diff --git a/web/src/pages/agent/form/agent-form/agent-tools.tsx b/web/src/pages/agent/form/agent-form/agent-tools.tsx
index 079297e0b..d7713352a 100644
--- a/web/src/pages/agent/form/agent-form/agent-tools.tsx
+++ b/web/src/pages/agent/form/agent-form/agent-tools.tsx
@@ -36,7 +36,7 @@ export function ToolCard({
       <li
         {...props}
         className={cn(
-          'flex bg-background-card p-1 rounded-sm justify-between',
+          'flex bg-bg-card p-1 rounded-sm justify-between',
           className,
         )}
       >
diff --git a/web/src/pages/agent/form/switch-form/index.tsx b/web/src/pages/agent/form/switch-form/index.tsx
index d78fffb60..deda99538 100644
--- a/web/src/pages/agent/form/switch-form/index.tsx
+++ b/web/src/pages/agent/form/switch-form/index.tsx
@@ -133,7 +133,7 @@ function ConditionCards({
                 },
               )}
             >
-              <section className="p-2 bg-background-card flex justify-between items-center">
+              <section className="p-2 bg-bg-card flex justify-between items-center">
                 <FormField
                   control={form.control}
                   name={`${name}.${index}.cpn_id`}
diff --git a/web/src/pages/agent/log-sheet/toolTimelineItem.tsx b/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
index a143447d0..035476a15 100644
--- a/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
+++ b/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
@@ -135,7 +135,7 @@ const ToolTimelineItem = ({
                 <Accordion
                   type="single"
                   collapsible
-                  className="bg-background-card px-3"
+                  className="bg-bg-card px-3"
                 >
                   <AccordionItem value={idx.toString()}>
                     <AccordionTrigger
diff --git a/web/src/pages/agent/log-sheet/workFlowTimeline.tsx b/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
index c0fc70051..75fa4fb5a 100644
--- a/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
+++ b/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
@@ -254,7 +254,7 @@ export const WorkFlowTimeline = ({
                   <Accordion
                     type="single"
                     collapsible
-                    className="bg-background-card px-3"
+                    className="bg-bg-card px-3"
                   >
                     <AccordionItem value={idx.toString()}>
                       <AccordionTrigger
diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
index e80e9f0e4..6441fc1b1 100644
--- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
+++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
@@ -61,7 +61,7 @@ export default ({
   };
   return (
     <div className="flex pr-[25px]">
-      <div className="flex items-center gap-4 bg-background-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
+      <div className="flex items-center gap-4 bg-bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
         {textSelectOptions.map((option) => (
           <div
             key={option.value}
@@ -76,7 +76,7 @@ export default ({
       </div>
       <div className="ml-auto"></div>
       <Input
-        className="bg-background-card text-muted-foreground"
+        className="bg-bg-card text-muted-foreground"
         style={{ width: 200 }}
         placeholder={t('search')}
         icon={<SearchOutlined />}
@@ -86,7 +86,7 @@ export default ({
       <div className="w-[20px]"></div>
       <Popover>
         <PopoverTrigger asChild>
-          <Button className="bg-background-card text-muted-foreground hover:bg-card">
+          <Button className="bg-bg-card text-muted-foreground hover:bg-card">
             <ListFilter />
           </Button>
         </PopoverTrigger>
@@ -95,10 +95,7 @@ export default ({
         </PopoverContent>
       </Popover>
       <div className="w-[20px]"></div>
-      <Button
-        onClick={() => createChunk()}
-        className="bg-background-card text-primary"
-      >
+      <Button onClick={() => createChunk()} className="bg-bg-card text-primary">
         <Plus size={44} />
       </Button>
     </div>
diff --git a/web/src/pages/dataset/sidebar/index.tsx b/web/src/pages/dataset/sidebar/index.tsx
index f3b65c71b..b872213fb 100644
--- a/web/src/pages/dataset/sidebar/index.tsx
+++ b/web/src/pages/dataset/sidebar/index.tsx
@@ -84,7 +84,7 @@ export function SideBar({ refreshCount }: PropType) {
               className={cn(
                 'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
                 {
-                  'bg-background-card': active,
+                  'bg-bg-card': active,
                   'text-text-title': active,
                 },
               )}
diff --git a/web/src/pages/next-chats/chat/sessions.tsx b/web/src/pages/next-chats/chat/sessions.tsx
index 1be31e771..fb7780e6c 100644
--- a/web/src/pages/next-chats/chat/sessions.tsx
+++ b/web/src/pages/next-chats/chat/sessions.tsx
@@ -40,7 +40,7 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
             key={x.id}
             onClick={handleCardClick(x.id, x.is_new)}
             className={cn('cursor-pointer bg-transparent', {
-              'bg-background-card': conversationId === x.id,
+              'bg-bg-card': conversationId === x.id,
             })}
           >
             <CardContent className="px-3 py-2 flex justify-between items-center group">
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index d319649de..c8ab34460 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -58,6 +58,28 @@ module.exports = {
         'dot-green': 'var(--dot-green)',
         'dot-red': 'var(--dot-red)',
 
+        /* design colors */
+
+        'bg-base': 'var(--bg-base)',
+        'bg-card': 'var(--bg-card)',
+        'text-primary': 'var(--text-primary)',
+        'text-disabled': 'var(--text-disabled)',
+        'text-input-tip': 'var(--text-input-tip)',
+        'border-default': 'var(--border-default)',
+        'border-accent': 'var(--border-accent)',
+        '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)',
+        'team-group': 'var(--team-group)',
+        'team-member': 'var(--team-member)',
+        'team-department': 'var(--team-department)',
+        'bg-group': 'var(--bg-group)',
+        'bg-member': 'var(--bg-member)',
+        'bg-department': 'var(--bg-department)',
+
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
diff --git a/web/tailwind.css b/web/tailwind.css
index 5319fe028..9ab7dca6c 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -93,6 +93,38 @@
     --input-border: rgba(22, 22, 24, 0.2);
     --dot-green: rgba(59, 160, 92, 1);
     --dot-red: rgba(216, 73, 75, 1);
+
+    /* design colors */
+
+    --bg-base: #f6f6f7;
+    /* card color , dividing line */
+    --bg-card: rgba(0, 0, 0, 0.05);
+    /* Button ,Body text, Input completed text */
+    --text-primary: #161618;
+    --text-secondary: #75787a;
+    --text-disabled: #b2b5b7;
+    /* input placeholder color */
+    --text-input-tip: #b2b5b7;
+    /* Input  default color */
+    --border-default: rgba(0, 0, 0, 0.2);
+    /* Input accent color */
+    --border-accent: #000000;
+    --border-button: rgba(0, 0, 0, 0.1);
+    /* Regulators, parsing, switches, variables */
+    --accent-primary: #4ca4e7;
+    /* Output Variables Box */
+    --bg-accent: rgba(76, 164, 231, 0.05);
+
+    --state--success: #3ba05c;
+    --state--warning: #faad14;
+    --state-error: #d8494b;
+
+    --team-group: #5ab77e;
+    --team-member: #5c96c8;
+    --team-department: #8866d3;
+    --bg-group: rgba(90, 183, 126, 0.1);
+    --bg-member: rgba(92, 150, 200, 0.1);
+    --bg-department: rgba(136, 102, 211, 0.1);
   }
 
   .dark {
@@ -207,6 +239,18 @@
 
     --dot-green: rgba(59, 160, 92, 1);
     --dot-red: rgba(216, 73, 75, 1);
+
+    /* design colors */
+
+    --bg-base: #161618;
+    --bg-card: rgba(255, 255, 255, 0.05);
+    --text-primary: #f6f6f7;
+    --text-secondary: #b2b5b7;
+    --text-disabled: #75787a;
+    --text-input-tip: #75787a;
+    --border-default: rgba(255, 255, 255, 0.2);
+    --border-accent: #ffffff;
+    --border-button: rgba(255, 255, 255, 0.1);
   }
 }