From 894a039a3e8f48eb2fc1c2ee7566923d76535adb Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 10 Jan 2025 18:02:35 +0800
Subject: [PATCH] style: update UI components for improved consistency and
 accessibility

---
 .../components/title-description-input.tsx    | 15 ++++++------
 .../nodes/start/components/var-item.tsx       | 24 +++++++++----------
 .../nodes/start/components/var-list.tsx       |  2 +-
 .../components/workflow/nodes/start/panel.tsx | 16 ++++++-------
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
index a5718ba2b6..45c3810af5 100644
--- a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
@@ -33,9 +33,10 @@ export const TitleInput = memo(({
       value={localValue}
       onChange={e => setLocalValue(e.target.value)}
       className={`
-        grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none
-        hover:bg-gray-50 
-        focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
+        grow mr-2 px-1 h-6 system-xl-semibold text-text-primary rounded-lg border border-transparent appearance-none outline-none
+        placeholder:text-text-placeholder
+        bg-transparent hover:bg-state-base-hover
+        focus:border-components-input-border-active focus:shadow-xs shadow-shadow-shadow-3 focus:bg-components-input-active caret-[#295EFF]
         min-w-0
       `}
       placeholder={t('workflow.common.addTitle') || ''}
@@ -66,8 +67,8 @@ export const DescriptionInput = memo(({
     <div
       className={`
         group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
-        border border-transparent hover:bg-gray-50 leading-0
-        ${focus && '!border-gray-300 shadow-xs !bg-gray-50'}
+        border border-transparent bg-transparent hover:bg-state-base-hover leading-0
+        ${focus && '!border-components-input-border-active shadow-xs shadow-shadow-shadow-3 !bg-components-input-bg-active'}
       `}
     >
       <Textarea
@@ -77,9 +78,9 @@ export const DescriptionInput = memo(({
         onFocus={handleFocus}
         onBlur={handleBlur}
         className={`
-          w-full text-xs text-gray-900 leading-[18px] bg-transparent
+          w-full text-xs text-text-primary leading-[18px] bg-transparent
           appearance-none outline-none resize-none
-          placeholder:text-gray-400 caret-[#295EFF]
+          placeholder:text-text-placeholder caret-[#295EFF]
         `}
         placeholder={t('workflow.common.addDescription') || ''}
         autoSize
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index 8a94161999..cd383af91a 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -5,11 +5,11 @@ import { useBoolean, useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import {
   RiDeleteBinLine,
+  RiEditLine,
 } from '@remixicon/react'
 import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 
@@ -46,12 +46,12 @@ const VarItem: FC<Props> = ({
     hideEditVarModal()
   }, [onChange, hideEditVarModal])
   return (
-    <div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-white rounded-lg border border-gray-200 shadow-xs cursor-pointer hover:shadow-md'>
+    <div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-components-panel-on-panel-item-bg rounded-lg border border-components-panel-border-subtle shadow-xs cursor-pointer hover:shadow-md shadow-shadow-shadow-3'>
       <div className='flex items-center space-x-1 grow w-0'>
-        <Variable02 className='w-3.5 h-3.5 text-primary-500' />
-        <div title={payload.variable} className='shrink-0 max-w-[130px] truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
-        {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
-          <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
+        <Variable02 className='w-3.5 h-3.5 text-text-accent' />
+        <div title={payload.variable} className='shrink-0 max-w-[130px] truncate system-sm-medium text-text-secondary'>{payload.variable}</div>
+        {payload.label && (<><div className='shrink-0 system-xs-regular text-text-quaternary'>·</div>
+          <div title={payload.label as string} className='max-w-[130px] truncate system-xs-medium text-text-tertiary'>{payload.label as string}</div>
         </>)}
         {showLegacyBadge && (
           <Badge
@@ -66,18 +66,18 @@ const VarItem: FC<Props> = ({
             ? (
               <>
                 {payload.required && (
-                  <div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div>
+                  <Badge className='mr-2' uppercase>{t('workflow.nodes.start.required')}</Badge>
                 )}
-                <InputVarTypeIcon type={payload.type} className='w-3.5 h-3.5 text-gray-500' />
+                <InputVarTypeIcon type={payload.type} className='w-3 h-3 text-text-tertiary' />
               </>
             )
             : (!readonly && (
               <>
-                <div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
-                  <Edit03 className='w-4 h-4 text-gray-500' />
+                <div onClick={showEditVarModal} className='mr-1 p-1 cursor-pointer'>
+                  <RiEditLine className='w-4 h-4 text-text-tertiary' />
                 </div>
-                <div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
-                  <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
+                <div onClick={onRemove} className='p-1 cursor-pointer'>
+                  <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
                 </div>
               </>
             ))}
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index 90a7809f01..02d9dc509a 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -46,7 +46,7 @@ const VarList: FC<Props> = ({
 
   if (list.length === 0) {
     return (
-      <div className='flex rounded-md bg-gray-50 items-center h-[42px] justify-center leading-[18px] text-xs font-normal text-gray-500'>
+      <div className='flex rounded-md bg-background-section items-center h-10 justify-center system-xs-regular text-text-tertiary'>
         {t('workflow.nodes.start.noVarTip')}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 3070945302..5384b4361d 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -64,7 +64,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                       variable: 'sys.query',
                     } as any}
                     rightContent={
-                      <div className='text-xs font-normal text-gray-500'>
+                      <div className='system-xs-regular text-text-tertiary'>
                         String
                       </div>
                     }
@@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                   variable: 'sys.files',
                 } as any}
                 rightContent={
-                  <div className='text-xs font-normal text-gray-500'>
+                  <div className='system-xs-regular text-text-tertiary'>
                     Array[File]
                   </div>
                 }
@@ -92,7 +92,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                         variable: 'sys.dialogue_count',
                       } as any}
                       rightContent={
-                        <div className='text-xs font-normal text-gray-500'>
+                        <div className='system-xs-regular text-text-tertiary'>
                           Number
                         </div>
                       }
@@ -103,7 +103,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                         variable: 'sys.conversation_id',
                       } as any}
                       rightContent={
-                        <div className='text-xs font-normal text-gray-500'>
+                        <div className='system-xs-regular text-text-tertiary'>
                           String
                         </div>
                       }
@@ -117,7 +117,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                   variable: 'sys.user_id',
                 } as any}
                 rightContent={
-                  <div className='text-xs font-normal text-gray-500'>
+                  <div className='system-xs-regular text-text-tertiary'>
                     String
                   </div>
                 }
@@ -128,7 +128,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                   variable: 'sys.app_id',
                 } as any}
                 rightContent={
-                  <div className='text-xs font-normal text-gray-500'>
+                  <div className='system-xs-regular text-text-tertiary'>
                     String
                   </div>
                 }
@@ -139,7 +139,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                   variable: 'sys.workflow_id',
                 } as any}
                 rightContent={
-                  <div className='text-xs font-normal text-gray-500'>
+                  <div className='system-xs-regular text-text-tertiary'>
                     String
                   </div>
                 }
@@ -150,7 +150,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                   variable: 'sys.workflow_run_id',
                 } as any}
                 rightContent={
-                  <div className='text-xs font-normal text-gray-500'>
+                  <div className='system-xs-regular text-text-tertiary'>
                     String
                   </div>
                 }