Feat: workflow dark mode (#17785)

web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx

@@ -68,9 +68,9 @@ const AddVariable = ({
           >
             <Plus02
               className={cn(
-                'h-2.5 w-2.5 text-gray-500',
-                'group-hover/addvariable:text-white',
-                open && '!text-white',
+                'h-2.5 w-2.5 text-text-tertiary',
+                'group-hover/addvariable:text-text-primary',
+                open && '!text-text-primary',
               )}
             />
           </div>

web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx

@@ -82,17 +82,17 @@ const NodeGroupItem = ({
     <div
       className={cn(
         'relative rounded-lg border-[1.5px] border-transparent px-1.5 pb-1.5 pt-1',
-        showSelectionBorder && '!border-dashed !border-gray-300 bg-black/[0.02]',
-        showSelectedBorder && '!border-primary-600 !bg-primary-50',
+        showSelectionBorder && '!border-dashed !border-divider-subtle bg-state-base-hover',
+        showSelectedBorder && '!border-text-accent !bg-util-colors-blue-blue-50',
       )}
       onMouseEnter={() => groupEnabled && handleGroupItemMouseEnter(item.targetHandleId)}
       onMouseLeave={handleGroupItemMouseLeave}
     >
-      <div className='flex h-4 items-center justify-between text-[10px] font-medium text-gray-500'>
+      <div className='flex h-4 items-center justify-between text-[10px] font-medium text-text-tertiary'>
         <span
           className={cn(
             'grow truncate uppercase',
-            showSelectedBorder && 'text-primary-600',
+            showSelectedBorder && 'text-text-accent',
           )}
           title={item.title}
         >
@@ -100,7 +100,7 @@ const NodeGroupItem = ({
         </span>
         <div className='flex items-center'>
           <span className='ml-2 shrink-0'>{item.type}</span>
-          <div className='ml-2 mr-1 h-2.5 w-[1px] bg-gray-200'></div>
+          <div className='ml-2 mr-1 h-2.5 w-[1px] bg-divider-regular'></div>
           <AddVariable
             availableVars={availableVars}
             variableAssignerNodeId={item.variableAssignerNodeId}
@@ -113,7 +113,7 @@ const NodeGroupItem = ({
         !item.variables.length && (
           <div
             className={cn(
-              'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-[10px] font-normal uppercase text-gray-400',
+              'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-[10px] font-normal uppercase text-text-tertiary',
               (showSelectedBorder || showSelectionBorder) && '!bg-black/[0.02]',
             )}
           >

web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx

@@ -64,7 +64,7 @@ const NodeVariableItem = ({
       <div
         className={cn(
           'system-xs-medium ml-0.5 shrink truncate text-text-accent',
-          isEnv && 'text-gray-900',
+          isEnv && 'text-text-primary',
           isException && 'text-text-warning',
           isChatVar && 'text-util-colors-teal-teal-700',
         )}
@@ -77,7 +77,7 @@ const NodeVariableItem = ({
   return (
     <div className={cn(
       'relative flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg p-[3px] pl-[5px]',
-      showBorder && '!bg-black/[0.02]',
+      showBorder && '!bg-state-base-hover',
       className,
     )}>
       <div className='flex w-0 grow items-center'>
@@ -86,12 +86,12 @@ const NodeVariableItem = ({
             <>
               <div className='shrink-0 p-[1px]'>
                 <VarBlockIcon
-                  className='!text-gray-900'
+                  className='!text-text-primary'
                   type={node.data.type}
                 />
               </div>
               <div
-                className='mx-0.5 shrink-[1000] truncate text-xs font-medium text-gray-700'
+                className='mx-0.5 shrink-[1000] truncate text-xs font-medium text-text-secondary'
                 title={node?.data.title}
               >
                 {node?.data.title}

web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx

@@ -132,7 +132,7 @@ const VarGroupItem: FC<Props> = ({
           </div>
           {canRemove && (
             <div
-              className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-gray-500 hover:bg-[#FEE4E2] hover:text-[#D92D20] group-hover:block'
+              className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:block'
               onClick={onRemove}
             >
               <RiDeleteBinLine

web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx

@@ -75,7 +75,6 @@ const VarList: FC<Props> = ({
           />
           {!readonly && (
             <RemoveButton
-              className='!bg-gray-100 !p-2 hover:!bg-gray-200'
               onClick={handleVarRemove(index)}
             />
           )}

web/app/components/workflow/nodes/variable-assigner/panel.tsx

@@ -99,22 +99,20 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
       {isEnableGroup && (
         <>
           <Split />
-          <div>
-            <OutputVars>
-              <>
-                {inputs.advanced_settings?.groups.map((item, index) => (
-                  <VarItem
-                    key={index}
-                    name={`${item.group_name}.output`}
-                    type={item.output_type}
-                    description={t(`${i18nPrefix}.outputVars.varDescribe`, {
-                      groupName: item.group_name,
-                    })}
-                  />
-                ))}
-              </>
-            </OutputVars>
-          </div>
+          <OutputVars>
+            <>
+              {inputs.advanced_settings?.groups.map((item, index) => (
+                <VarItem
+                  key={index}
+                  name={`${item.group_name}.output`}
+                  type={item.output_type}
+                  description={t(`${i18nPrefix}.outputVars.varDescribe`, {
+                    groupName: item.group_name,
+                  })}
+                />
+              ))}
+            </>
+          </OutputVars>
         </>
       )}
       <RemoveEffectVarConfirm