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