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/pages/agent/form/components/output.tsx

@@ -22,9 +22,9 @@ export function Output({ list }: OutputProps) {
         {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

@@ -160,7 +160,7 @@ export function PromptEditor({
           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,
                 },