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