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>