feat: workflow note dark theme (#12932)

web/app/components/workflow/note-node/constants.ts

@@ -4,39 +4,39 @@ export const CUSTOM_NOTE_NODE = 'custom-note'
 
 export const THEME_MAP: Record<string, { outer: string; title: string; bg: string; border: string }> = {
   [NoteTheme.blue]: {
-    outer: '#2E90FA',
+    outer: 'border-util-colors-blue-blue-500',
-    title: '#D1E9FF',
+    title: 'bg-util-colors-blue-blue-100',
-    bg: '#EFF8FF',
+    bg: 'bg-util-colors-blue-blue-50',
-    border: '#84CAFF',
+    border: 'border-util-colors-blue-blue-300',
   },
   [NoteTheme.cyan]: {
-    outer: '#06AED4',
+    outer: 'border-util-colors-cyan-cyan-500',
-    title: '#CFF9FE',
+    title: 'bg-util-colors-cyan-cyan-100',
-    bg: '#ECFDFF',
+    bg: 'bg-util-colors-cyan-cyan-50',
-    border: '#67E3F9',
+    border: 'border-util-colors-cyan-cyan-300',
   },
   [NoteTheme.green]: {
-    outer: '#16B364',
+    outer: 'border-util-colors-green-green-500',
-    title: '#D3F8DF',
+    title: 'bg-util-colors-green-green-100',
-    bg: '#EDFCF2',
+    bg: 'bg-util-colors-green-green-50',
-    border: '#73E2A3',
+    border: 'border-util-colors-green-green-300',
   },
   [NoteTheme.yellow]: {
-    outer: '#EAAA08',
+    outer: 'border-util-colors-yellow-yellow-500',
-    title: '#FEF7C3',
+    title: 'bg-util-colors-yellow-yellow-100',
-    bg: '#FEFBE8',
+    bg: 'bg-util-colors-yellow-yellow-50',
-    border: '#FDE272',
+    border: 'border-util-colors-yellow-yellow-300',
   },
   [NoteTheme.pink]: {
-    outer: '#EE46BC',
+    outer: 'border-util-colors-pink-pink-500',
-    title: '#FCE7F6',
+    title: 'bg-util-colors-pink-pink-100',
-    bg: '#FDF2FA',
+    bg: 'bg-util-colors-pink-pink-50',
-    border: '#FAA7E0',
+    border: 'border-util-colors-pink-pink-300',
   },
   [NoteTheme.violet]: {
-    outer: '#875BF7',
+    outer: 'border-util-colors-violet-violet-500',
-    title: '#ECE9FE',
+    title: 'bg-util-colors-violet-violet-100',
-    bg: '#F5F3FF',
+    bg: 'bg-util-colors-violet-violet-100',
-    border: '#C3B5FD',
+    border: 'border-util-colors-violet-violet-300',
   },
 }

web/app/components/workflow/note-node/index.tsx

@@ -62,10 +62,10 @@ const NoteNode = ({
     <div
       className={cn(
         'flex flex-col relative rounded-md shadow-xs border hover:shadow-md',
+        THEME_MAP[theme].bg,
+        data.selected ? THEME_MAP[theme].border : 'border-black/5',
       )}
       style={{
-        background: THEME_MAP[theme].bg,
-        borderColor: data.selected ? THEME_MAP[theme].border : 'rgba(0, 0, 0, 0.05)',
         width: data.width,
         height: data.height,
       }}
@@ -83,7 +83,11 @@ const NoteNode = ({
             minWidth={240}
             minHeight={88}
           />
-          <div className='shrink-0 h-2 opacity-50 rounded-t-md' style={{ background: THEME_MAP[theme].title }}></div>
+          <div
+            className={cn(
+              'shrink-0 h-2 opacity-50 rounded-t-md',
+              THEME_MAP[theme].title,
+            )}></div>
           {
             data.selected && (
               <div className='absolute -top-[41px] left-1/2 -translate-x-1/2'>
@@ -112,7 +116,7 @@ const NoteNode = ({
           </div>
           {
             data.showAuthor && (
-              <div className='p-3 pt-0 text-xs text-black/[0.32]'>
+              <div className='p-3 pt-0 text-xs text-text-tertiary'>
                 {data.author}
               </div>
             )

web/app/components/workflow/note-node/note-editor/editor.tsx

@@ -44,7 +44,7 @@ const Editor = ({
               onFocus={() => setShortcutsEnabled(false)}
               onBlur={() => setShortcutsEnabled(true)}
               spellCheck={false}
-              className='w-full h-full outline-none caret-primary-600'
+              className='w-full h-full outline-none text-text-secondary caret-primary-600'
               placeholder={placeholder}
             />
           </div>

web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx

@@ -69,9 +69,9 @@ const LinkEditorComponent = ({
           <FloatingPortal root={containerElement}>
             <div
               className={cn(
-                'nodrag nopan inline-flex items-center w-max rounded-md border-[0.5px] border-black/5 bg-white z-10',
+                'nodrag nopan inline-flex items-center w-max rounded-md border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg z-10',
                 !linkOperatorShow && 'p-1 shadow-md',
-                linkOperatorShow && 'p-0.5 shadow-sm text-xs text-gray-500 font-medium',
+                linkOperatorShow && 'p-0.5 shadow-sm system-xs-medium text-text-tertiary',
               )}
               style={floatingStyles}
               ref={refs.setFloating}
@@ -80,7 +80,7 @@ const LinkEditorComponent = ({
                 !linkOperatorShow && (
                   <>
                     <input
-                      className='mr-0.5 p-1 w-[196px] h-6 rounded-sm text-[13px] appearance-none outline-none'
+                      className='mr-0.5 p-1 w-[196px] h-6 rounded-sm text-[13px] appearance-none outline-none bg-transparent text-components-input-text-filled'
                       value={url}
                       onChange={e => setUrl(e.target.value)}
                       placeholder={t('workflow.nodes.note.editor.enterUrl') || ''}
@@ -101,7 +101,7 @@ const LinkEditorComponent = ({
                 linkOperatorShow && (
                   <>
                     <a
-                      className='flex items-center px-2 h-6 rounded-md hover:bg-gray-50'
+                      className='flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover'
                       href={escape(url)}
                       target='_blank'
                       rel='noreferrer'
@@ -112,14 +112,14 @@ const LinkEditorComponent = ({
                       </div>
                       <div
                         title={escape(url)}
-                        className='text-primary-600 max-w-[140px] truncate'
+                        className='text-text-accent max-w-[140px] truncate'
                       >
                         {escape(url)}
                       </div>
                     </a>
-                    <div className='mx-1 w-[1px] h-3.5 bg-gray-100'></div>
+                    <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
                     <div
-                      className='flex items-center mr-0.5 px-2 h-6 rounded-md cursor-pointer hover:bg-gray-50'
+                      className='flex items-center mr-0.5 px-2 h-6 rounded-md cursor-pointer hover:bg-state-base-hover'
                       onClick={(e) => {
                         e.stopPropagation()
                         setLinkOperatorShow(false)
@@ -129,7 +129,7 @@ const LinkEditorComponent = ({
                       {t('common.operation.edit')}
                     </div>
                     <div
-                      className='flex items-center px-2 h-6 rounded-md cursor-pointer hover:bg-gray-50'
+                      className='flex items-center px-2 h-6 rounded-md cursor-pointer hover:bg-state-base-hover'
                       onClick={handleUnlink}
                     >
                       <RiLinkUnlinkM className='mr-1 w-3 h-3' />

web/app/components/workflow/note-node/note-editor/theme/theme.css

@@ -16,7 +16,7 @@
 
 .note-editor-theme_link {
   cursor: pointer;
-  color: #155eef;
+  color: var(--text-text-selected);
 }
 
 .note-editor-theme_link:hover {

web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx

@@ -67,13 +67,15 @@ const ColorPicker = ({
           open && 'bg-black/5',
         )}>
           <div
-            className='w-4 h-4 rounded-full border border-black/5'
+            className={cn(
-            style={{ backgroundColor: THEME_MAP[theme].title }}
+              'w-4 h-4 rounded-full border border-black/5',
+              THEME_MAP[theme].title,
+            )}
           ></div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='grid grid-cols-3 grid-rows-2 gap-0.5 p-0.5 rounded-lg border-[0.5px] border-black/8 bg-white shadow-lg'>
+        <div className='grid grid-cols-3 grid-rows-2 gap-0.5 p-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
           {
             COLOR_LIST.map(color => (
               <div
@@ -86,12 +88,16 @@ const ColorPicker = ({
                 }}
               >
                 <div
-                  className='hidden group-hover:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full border-[1.5px]'
+                  className={cn(
-                  style={{ borderColor: color.outer }}
+                    'hidden group-hover:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full border-[1.5px]',
+                    color.outer,
+                  )}
                 ></div>
                 <div
-                  className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full border border-black/5'
+                  className={cn(
-                  style={{ backgroundColor: color.inner }}
+                    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full border border-black/5',
+                    color.inner,
+                  )}
                 ></div>
               </div>
             ))

web/app/components/workflow/note-node/note-editor/toolbar/command.tsx

@@ -65,12 +65,12 @@ const Command = ({
     >
       <div
         className={cn(
-          'flex items-center justify-center w-8 h-8 cursor-pointer rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5',
+          'flex items-center justify-center w-8 h-8 cursor-pointer rounded-md text-text-tertiary hover:text-text-accent hover:bg-state-accent-active',
-          type === 'bold' && selectedIsBold && 'bg-primary-50',
+          type === 'bold' && selectedIsBold && 'bg-state-accent-active',
-          type === 'italic' && selectedIsItalic && 'bg-primary-50',
+          type === 'italic' && selectedIsItalic && 'bg-state-accent-active',
-          type === 'strikethrough' && selectedIsStrikeThrough && 'bg-primary-50',
+          type === 'strikethrough' && selectedIsStrikeThrough && 'bg-state-accent-active',
-          type === 'link' && selectedIsLink && 'bg-primary-50',
+          type === 'link' && selectedIsLink && 'bg-state-accent-active',
-          type === 'bullet' && selectedIsBullet && 'bg-primary-50',
+          type === 'bullet' && selectedIsBullet && 'bg-state-accent-active',
         )}
         onClick={() => handleCommand(type)}
       >

web/app/components/workflow/note-node/note-editor/toolbar/divider.tsx

@@ -1,6 +1,6 @@
 const Divider = () => {
   return (
-    <div className='mx-1 w-[1px] h-3.5 bg-gray-200'></div>
+    <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
   )
 }
 

web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx

@@ -42,20 +42,20 @@ const FontSizeSelector = () => {
     >
       <PortalToFollowElemTrigger onClick={() => handleOpenFontSizeSelector(!fontSizeSelectorShow)}>
         <div className={cn(
-          'flex items-center pl-2 pr-1.5 h-8 rounded-md text-[13px] font-medium text-gray-700 cursor-pointer hover:bg-gray-50',
+          'flex items-center pl-2 pr-1.5 h-8 rounded-md text-[13px] font-medium text-text-tertiary hover:text-text-secondary cursor-pointer hover:bg-state-base-hover',
-          fontSizeSelectorShow && 'bg-gray-50',
+          fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
         )}>
           <RiFontSize className='mr-1 w-4 h-4' />
           {FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('workflow.nodes.note.editor.small')}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='p-1 w-[120px] bg-white border-[0.5px] border-gray-200 rounded-md shadow-xl text-gray-700'>
+        <div className='p-1 w-[120px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-md shadow-xl text-text-secondary'>
           {
             FONT_SIZE_LIST.map(font => (
               <div
                 key={font.key}
-                className='flex items-center justify-between pl-3 pr-2 h-8 rounded-md cursor-pointer hover:bg-gray-50'
+                className='flex items-center justify-between pl-3 pr-2 h-8 rounded-md cursor-pointer hover:bg-state-base-hover'
                 onClick={(e) => {
                   e.stopPropagation()
                   handleFontSize(font.key)
@@ -69,7 +69,7 @@ const FontSizeSelector = () => {
                 </div>
                 {
                   fontSize === font.key && (
-                    <Check className='w-4 h-4 text-primary-500' />
+                    <Check className='w-4 h-4 text-text-accent' />
                   )
                 }
               </div>

web/app/components/workflow/note-node/note-editor/toolbar/index.tsx

@@ -18,7 +18,7 @@ const Toolbar = ({
   onShowAuthorChange,
 }: ToolbarProps) => {
   return (
-    <div className='inline-flex items-center p-0.5 bg-white rounded-lg border-[0.5px] border-black/5 shadow-sm'>
+    <div className='inline-flex items-center p-0.5 bg-components-actionbar-bg rounded-lg border-[0.5px] border-components-actionbar-border shadow-sm'>
       <ColorPicker
         theme={theme}
         onThemeChange={onThemeChange}

web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx

@@ -40,18 +40,18 @@ const Operator = ({
       <PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
         <div
           className={cn(
-            'flex items-center justify-center w-8 h-8 cursor-pointer rounded-lg hover:bg-black/5',
+            'flex items-center justify-center w-8 h-8 cursor-pointer rounded-lg text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover',
-            open && 'bg-black/5',
+            open && 'bg-state-base-hover text-text-secondary',
           )}
         >
-          <RiMoreFill className='w-4 h-4 text-gray-500' />
+          <RiMoreFill className='w-4 h-4' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='min-w-[192px] bg-white rounded-md border-[0.5px] border-gray-200 shadow-xl'>
+        <div className='min-w-[192px] bg-components-panel-bg-blur rounded-md border-[0.5px] border-components-panel-border shadow-xl'>
           <div className='p-1'>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:bg-black/5'
+              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
               onClick={() => {
                 onCopy()
                 setOpen(false)
@@ -61,7 +61,7 @@ const Operator = ({
               <ShortcutsName keys={['ctrl', 'c']} />
             </div>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:bg-black/5'
+              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
               onClick={() => {
                 onDuplicate()
                 setOpen(false)
@@ -71,10 +71,10 @@ const Operator = ({
               <ShortcutsName keys={['ctrl', 'd']} />
             </div>
           </div>
-          <div className='h-[1px] bg-gray-100'></div>
+          <div className='h-[1px] bg-divider-subtle'></div>
           <div className='p-1'>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:bg-black/5'
+              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
               onClick={e => e.stopPropagation()}
             >
               <div>{t('workflow.nodes.note.editor.showAuthor')}</div>
@@ -85,10 +85,10 @@ const Operator = ({
               />
             </div>
           </div>
-          <div className='h-[1px] bg-gray-100'></div>
+          <div className='h-[1px] bg-divider-subtle'></div>
           <div className='p-1'>
             <div
-              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:text-[#D92D20] hover:bg-[#FEF3F2]'
+              className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:text-text-destructive hover:bg-state-destructive-hover'
               onClick={() => {
                 onDelete()
                 setOpen(false)