feat: move linear gradient bg to common config

web/app/components/base/toast/index.tsx

@@ -50,10 +50,10 @@ const Toast = ({
     'right-0',
   )}>
     <div className={`absolute inset-0 opacity-40 ${
-      (type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+      (type === 'success' && 'bg-toast-success-bg')
-      || (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+      || (type === 'warning' && 'bg-toast-warning-bg')
-      || (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+      || (type === 'error' && 'bg-toast-error-bg')
-      || (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+      || (type === 'info' && 'bg-toast-info-bg')
     }`}
     />
     <div className={`flex ${size === 'md' ? 'gap-1' : 'gap-0.5'}`}>
@@ -70,9 +70,11 @@ const Toast = ({
         </div>
         }
       </div>
-      <ActionButton className='z-[1000]' onClick={close}>
+      {close
-        <RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+        && (<ActionButton className='z-[1000]' onClick={close}>
-      </ActionButton>
+          <RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+        </ActionButton>)
+      }
     </div>
   </div>
 }

web/app/components/workflow/update-dsl-modal.tsx

@@ -38,8 +38,8 @@ import { ToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
+import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -229,7 +229,7 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div className='flex relative p-2 mb-2 gap-0.5 grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs overflow-hidden'>
-          <div className='absolute top-0 left-0 w-full h-full opacity-40 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]' />
+          <div className='absolute top-0 left-0 w-full h-full opacity-40 bg-toast-warning-bg' />
           <div className='flex p-1 justify-center items-start'>
             <RiAlertFill className='w-4 h-4 shrink-0 text-text-warning-secondary' />
           </div>

web/tailwind-common-config.ts

@@ -89,6 +89,10 @@ const config = {
         'workflow-process-bg': 'var(--color-workflow-process-bg)',
         'marketplace-divider-bg': 'var(--color-marketplace-divider-bg)',
         'marketplace-plugin-empty': 'var(--color-marketplace-plugin-empty)',
+        'toast-success-bg': 'var(--color-toast-success-bg)',
+        'toast-warning-bg': 'var(--color-toast-warning-bg)',
+        'toast-error-bg': 'var(--color-toast-error-bg)',
+        'toast-info-bg': 'var(--color-toast-info-bg)',
       },
       animation: {
         'spin-slow': 'spin 2s linear infinite',

web/themes/manual-dark.css

@@ -1,7 +1,47 @@
 html[data-theme="dark"] {
-  --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
+  --color-chatbot-bg: linear-gradient(
-  --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
+    180deg,
-  --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
+    rgba(34, 34, 37, 0.9) 0%,
-  --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
+    rgba(29, 29, 32, 0.9) 90.48%
-  --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #222225 100%);
+  );
-}
+  --color-chat-bubble-bg: linear-gradient(
+    180deg,
+    rgba(200, 206, 218, 0.08) 0%,
+    rgba(200, 206, 218, 0.02) 100%
+  );
+  --color-workflow-process-bg: linear-gradient(
+    90deg,
+    rgba(24, 24, 27, 0.25) 0%,
+    rgba(24, 24, 27, 0.04) 100%
+  );
+  --color-marketplace-divider-bg: linear-gradient(
+    90deg,
+    rgba(200, 206, 218, 0.14) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-marketplace-plugin-empty: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    #222225 100%
+  );
+  --color-toast-success-bg: linear-gradient(
+    92deg,
+    rgba(23, 178, 106, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-toast-warning-bg: linear-gradient(
+    92deg,
+    rgba(247, 144, 9, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-toast-error-bg: linear-gradient(
+    92deg,
+    rgba(240, 68, 56, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-toast-info-bg: linear-gradient(
+    92deg,
+    rgba(11, 165, 236, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}

web/themes/manual-light.css

@@ -1,7 +1,47 @@
 html[data-theme="light"] {
-  --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
+  --color-chatbot-bg: linear-gradient(
-  --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
+    180deg,
-  --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
+    rgba(249, 250, 251, 0.9) 0%,
-  --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
+    rgba(242, 244, 247, 0.9) 90.48%
-  --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
+  );
-}
+  --color-chat-bubble-bg: linear-gradient(
+    180deg,
+    #fff 0%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+  --color-workflow-process-bg: linear-gradient(
+    90deg,
+    rgba(200, 206, 218, 0.2) 0%,
+    rgba(200, 206, 218, 0.04) 100%
+  );
+  --color-marketplace-divider-bg: linear-gradient(
+    90deg,
+    rgba(16, 24, 40, 0.08) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-marketplace-plugin-empty: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    #fcfcfd 100%
+  );
+  --color-toast-success-bg: linear-gradient(
+    92deg,
+    rgba(23, 178, 106, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-toast-warning-bg: linear-gradient(
+    92deg,
+    rgba(247, 144, 9, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-toast-error-bg: linear-gradient(
+    92deg,
+    rgba(240, 68, 56, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-toast-info-bg: linear-gradient(
+    92deg,
+    rgba(11, 165, 236, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}