Dark Mode: Workflow darkmode style (#11695)

web/app/components/workflow/block-selector/all-tools.tsx

@@ -43,23 +43,23 @@ const AllTools = ({
 
     return mergedTools.filter((toolWithProvider) => {
       return isMatchingKeywords(toolWithProvider.name, searchText)
-      || toolWithProvider.tools.some((tool) => {
-        return Object.values(tool.label).some((label) => {
-          return isMatchingKeywords(label, searchText)
+        || toolWithProvider.tools.some((tool) => {
+          return Object.values(tool.label).some((label) => {
+            return isMatchingKeywords(label, searchText)
+          })
         })
-      })
     })
   }, [activeTab, buildInTools, customTools, workflowTools, searchText])
   return (
     <div>
-      <div className='flex items-center px-3 h-8 space-x-1 bg-gray-25 border-b-[0.5px] border-black/[0.08] shadow-xs'>
+      <div className='flex items-center px-3 h-8 space-x-1 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
         {
           tabs.map(tab => (
             <div
               className={cn(
-                'flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer',
-                'text-xs font-medium text-gray-700',
-                activeTab === tab.key && 'bg-gray-200',
+                'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover-alt cursor-pointer',
+                'system-xs-medium text-text-tertiary',
+                activeTab === tab.key && 'system-xs-semibold bg-state-base-hover-alt text-text-primary',
               )}
               key={tab.key}
               onClick={() => setActiveTab(tab.key)}

web/app/components/workflow/block-selector/blocks.tsx

@@ -58,7 +58,7 @@ const Blocks = ({
       >
         {
           classification !== '-' && !!list.length && (
-            <div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
+            <div className='flex items-start px-3 h-[22px] text-xs font-medium text-text-tertiary'>
               {t(`workflow.tabs.${classification}`)}
             </div>
           )
@@ -68,7 +68,7 @@ const Blocks = ({
             <Tooltip
               key={block.type}
               position='right'
-              popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+              popupClassName='w-[200px]'
               popupContent={(
                 <div>
                   <BlockIcon
@@ -76,21 +76,21 @@ const Blocks = ({
                     className='mb-2'
                     type={block.type}
                   />
-                  <div className='mb-1 text-sm leading-5 text-gray-900'>{block.title}</div>
-                  <div className='text-xs text-gray-700 leading-[18px]'>{nodesExtraData[block.type].about}</div>
+                  <div className='mb-1 system-md-medium text-text-primary'>{block.title}</div>
+                  <div className='text-text-tertiary system-xs-regular'>{nodesExtraData[block.type].about}</div>
                 </div>
               )}
             >
               <div
                 key={block.type}
-                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
                 onClick={() => onSelect(block.type)}
               >
                 <BlockIcon
                   className='mr-2 shrink-0'
                   type={block.type}
                 />
-                <div className='text-sm text-gray-900'>{block.title}</div>
+                <div className='text-sm text-text-secondary'>{block.title}</div>
               </div>
             </Tooltip>
           ))
@@ -103,7 +103,7 @@ const Blocks = ({
     <div className='p-1'>
       {
         isEmpty && (
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
+          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
         )
       }
       {

web/app/components/workflow/block-selector/index-bar.tsx

@@ -47,9 +47,9 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
+    <div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-text-quaternary">
       {letters.map(letter => (
-        <div className="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
+        <div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
           {letter}
         </div>
       ))}

web/app/components/workflow/block-selector/index.tsx

@@ -25,6 +25,7 @@ import Input from '@/app/components/base/input'
 import {
   Plus02,
 } from '@/app/components/base/icons/src/vender/line/general'
+import classNames from '@/utils/classnames'
 
 type NodeSelectorProps = {
   open?: boolean
@@ -114,19 +115,21 @@ const NodeSelector: FC<NodeSelectorProps> = ({
               <div
                 className={`
                   flex items-center justify-center 
-                  w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10
+                  w-4 h-4 rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover cursor-pointer z-10
                   ${triggerClassName?.(open)}
                 `}
                 style={triggerStyle}
               >
-                <Plus02 className='w-2.5 h-2.5 text-white' />
+                <Plus02 className='w-2.5 h-2.5' />
               </div>
             )
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
-          <div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
+        <div className={
+          classNames(`rounded-lg border-[0.5px] backdrop-blur-[5px]
+          border-components-panel-border bg-components-panel-bg-blur shadow-lg`, popupClassName)}>
+          <div className='p-2 pb-1' onClick={e => e.stopPropagation()}>
             <Input
               showLeftIcon
               showClearIcon

web/app/components/workflow/block-selector/tabs.tsx

@@ -30,16 +30,16 @@ const Tabs: FC<TabsProps> = ({
     <div onClick={e => e.stopPropagation()}>
       {
         !noBlocks && (
-          <div className='flex items-center px-3 border-b-[0.5px] border-b-black/5'>
+          <div className='flex items-center px-3 border-b-[0.5px] border-divider-subtle'>
             {
               tabs.map(tab => (
                 <div
                   key={tab.key}
                   className={cn(
-                    'relative mr-4 h-[34px] text-[13px] leading-[34px] font-medium cursor-pointer',
+                    'relative mr-4 pt-1 pb-2 system-sm-medium cursor-pointer',
                     activeTab === tab.key
-                      ? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
-                      : 'text-gray-500',
+                      ? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
+                      : 'text-text-tertiary',
                   )}
                   onClick={() => onActiveTabChange(tab.key)}
                 >

web/app/components/workflow/block-selector/tools.tsx

@@ -45,7 +45,7 @@ const Blocks = ({
             <Tooltip
               key={tool.name}
               position='right'
-              popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+              popupClassName='w-[200px]'
               popupContent={(
                 <div>
                   <BlockIcon
@@ -54,13 +54,13 @@ const Blocks = ({
                     type={BlockEnum.Tool}
                     toolIcon={toolWithProvider.icon}
                   />
-                  <div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div>
-                  <div className='text-xs text-gray-700 leading-[18px]'>{tool.description[language]}</div>
+                  <div className='mb-1 system-md-medium text-text-primary'>{tool.label[language]}</div>
+                  <div className='system-xs-regular text-text-tertiary'>{tool.description[language]}</div>
                 </div>
               )}
             >
               <div
-                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
                 onClick={() => onSelect(BlockEnum.Tool, {
                   provider_id: toolWithProvider.id,
                   provider_type: toolWithProvider.type,
@@ -75,7 +75,7 @@ const Blocks = ({
                   type={BlockEnum.Tool}
                   toolIcon={toolWithProvider.icon}
                 />
-                <div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{tool.label[language]}</div>
+                <div className='text-sm text-text-secondary flex-1 min-w-0 truncate'>{tool.label[language]}</div>
               </div>
             </Tooltip>
           ))
@@ -100,7 +100,7 @@ const Blocks = ({
     <div className='p-1 max-w-[320px] max-h-[464px] overflow-y-auto'>
       {
         !tools.length && !showWorkflowEmpty && (
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
+          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
         )
       }
       {!tools.length && showWorkflowEmpty && (