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/canvas/node/agent-node.tsx

@@ -89,7 +89,7 @@ function InnerAgentNode({
           {(isGotoMethod ||
             exceptionMethod === AgentExceptionMethod.Comment) && (
             <div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
-              <span className="text-text-sub-title">On Failure</span>
+              <span className="text-text-secondary">On Failure</span>
               <span className="truncate flex-1 text-right">
                 {t(`flow.${exceptionMethod}`)}
               </span>
@@ -101,7 +101,7 @@ function InnerAgentNode({
             type="source"
             position={Position.Right}
             isConnectable={isConnectable}
-            className="!bg-text-delete-red"
+            className="!bg-state-error"
             style={{ ...RightHandleStyle, top: 94 }}
             nodeId={id}
             id={NodeHandleId.AgentException}

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -68,7 +68,7 @@ function AccordionOperators() {
   return (
     <Accordion
       type="multiple"
-      className="px-2 text-text-title max-h-[45vh] overflow-auto"
+      className="px-2 text-text-primary max-h-[45vh] overflow-auto"
       defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
     >
       <AccordionItem value="item-1">

web/src/pages/agent/canvas/node/handle.tsx

@@ -28,7 +28,7 @@ export function CommonHandle({
       <Handle
         {...props}
         className={cn(
-          'inline-flex justify-center items-center !bg-background-checked !size-4 !rounded-sm !border-none ',
+          'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
           className,
         )}
         onClick={(e) => {

web/src/pages/agent/canvas/node/node-wrapper.tsx

@@ -8,7 +8,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
     <section
       className={cn(
         'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
-        { 'border border-background-checked': selected },
+        { 'border border-accent-primary': selected },
         className,
       )}
     >

web/src/pages/agent/canvas/node/switch-node.tsx

@@ -48,7 +48,7 @@ const ConditionBlock = ({
         {items.map((x, idx) => (
           <div key={idx}>
             <section className="flex justify-between gap-2 items-center text-xs p-1">
-              <div className="flex-1 truncate text-background-checked">
+              <div className="flex-1 truncate text-accent-primary">
                 {getLabel(x?.cpn_id)}
               </div>
               <span>{renderOperatorIcon(x?.operator)}</span>
@@ -81,11 +81,11 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
                 <section className="flex flex-col text-xs">
                   <div className="text-right">
                     <span>{getConditionKey(idx, positions.length)}</span>
-                    <div className="text-text-sub-title">
+                    <div className="text-text-secondary">
                       {idx < positions.length - 1 && position.text}
                     </div>
                   </div>
-                  <span className="text-background-checked">
+                  <span className="text-accent-primary">
                     {idx < positions.length - 1 &&
                       position.condition?.logical_operator?.toUpperCase()}
                   </span>