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/profile-setting/mcp/edit-mcp-dialog.tsx

@@ -133,7 +133,7 @@ export function EditMcpDialog({
               onClick={handleTest}
             >
               <RefreshCw
-                className={cn('text-background-checked', {
+                className={cn('text-accent-primary', {
                   'animate-spin': testLoading,
                 })}
               />

web/src/pages/profile-setting/mcp/index.tsx

@@ -33,9 +33,9 @@ export default function McpServer() {
 
   return (
     <section className="p-4 w-full">
-      <div className="text-text-title text-2xl">MCP Servers</div>
+      <div className="text-text-primary text-2xl">MCP Servers</div>
       <section className="flex items-center justify-between pb-5">
-        <div className="text-text-sub-title">
+        <div className="text-text-secondary">
           Customize the list of MCP servers
         </div>
         <div className="flex gap-5">

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -36,7 +36,7 @@ export function McpCard({
     <Card key={data.id} className="w-64">
       <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between pb-2">
-          <h3 className="text-lg font-semibold line-clamp-1">{data.name}</h3>
+          <h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>
           <div className="space-x-4">
             <McpDropdown mcpId={data.id} showEditModal={showEditModal}>
               <MoreButton></MoreButton>
@@ -52,10 +52,10 @@ export function McpCard({
         </section>
         <div className="flex justify-between items-end">
           <div className="w-full">
-            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-sub-title">
+            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-secondary">
               {toolLength} cached tools
             </div>
-            <p className="text-sm text-text-sub-title">
+            <p className="text-sm text-text-secondary">
               {formatDate(data.update_date)}
             </p>
           </div>

web/src/pages/profile-setting/mcp/mcp-dropdown.tsx

@@ -43,7 +43,7 @@ export function McpDropdown({
         <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
             onSelect={(e) => {
               e.preventDefault();
             }}

web/src/pages/profile-setting/mcp/tool-card.tsx

@@ -10,7 +10,7 @@ export function McpToolCard({ data }: McpToolCardProps) {
     <Card>
       <CardContent className="p-2.5 pt-2 group">
         <h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
-        <div className="text-xs font-normal mb-3 text-text-sub-title">
+        <div className="text-xs font-normal mb-3 text-text-secondary">
           {data.description}
         </div>
       </CardContent>