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

@@ -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}
         >

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 ? (

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',

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}

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}
   />
 ));

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,
     )}
   >

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',

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}`)}

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

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,

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>

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,
         )}
       >

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`}

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

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

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>

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,
                 },
               )}

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">

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))',

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);
   }
 }