From a62325ac879288be3b163b6b07c48cec341fc398 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 10 Jul 2024 15:34:56 +0800
Subject: [PATCH] feat: add until className defines (#6141)

---
 .../app/text-generate/item/index.tsx          |   4 +-
 .../workflow/block-selector/tabs.tsx          |   2 +-
 .../workflow/block-selector/tools.tsx         |   2 +-
 web/app/styles/globals.css                    | 151 ++++++++++++++++--
 4 files changed, 146 insertions(+), 13 deletions(-)

diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 6931203816..3313c987c9 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -73,7 +73,7 @@ export const SimpleBtn = ({ className, isDisabled, onClick, children }: {
   children: React.ReactNode
 }) => (
   <div
-    className={cn(className, isDisabled ? 'border-gray-100 text-gray-300' : 'border-gray-200 text-gray-700 cursor-pointer hover:border-gray-300 hover:shadow-sm', 'flex items-center h-7 px-3 rounded-md border text-xs  font-medium')}
+    className={cn(isDisabled ? 'border-gray-100 text-gray-300' : 'border-gray-200 text-gray-700 cursor-pointer hover:border-gray-300 hover:shadow-sm', 'flex items-center h-7 px-3 rounded-md border text-xs  font-medium', className)}
     onClick={() => !isDisabled && onClick?.()}
   >
     {children}
@@ -277,7 +277,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
   const [currentTab, setCurrentTab] = useState<string>('DETAIL')
 
   return (
-    <div ref={ref} className={cn(className, isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0')}
+    <div ref={ref} className={cn(isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0', className)}
       style={isTop
         ? {
           boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 2d37e299a0..5c4be8e3d1 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -36,7 +36,7 @@ const Tabs: FC<TabsProps> = ({
                 <div
                   key={tab.key}
                   className={cn(
-                    'relative mr-4 h-[34px] leading-[34px] text-[13px] font-medium cursor-pointer',
+                    'relative mr-4 h-[34px] text-[13px] leading-[34px] font-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',
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 510699e862..36480d369e 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -46,7 +46,7 @@ const Blocks = ({
               key={tool.name}
               selector={`workflow-block-tool-${tool.name}`}
               position='right'
-              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !bg-transparent !rounded-xl !shadow-lg'
+              className='!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'
               htmlContent={(
                 <div>
                   <BlockIcon
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index 86524d4cdc..1c13e7eb5f 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -132,368 +132,501 @@ button:focus-within {
 .system-kbd {
   font-size: 12px;
   font-weight: 500;
+  line-height: 16px;
 }
 
 .system-2xs-regular-uppercase {
   font-size: 10px;
   font-weight: 400;
   text-transform: uppercase;
+  line-height: 12px;
 }
 
 .system-2xs-medium {
   font-size: 10px;
   font-weight: 500;
+  line-height: 12px;
 }
 
 .system-2xs-medium-uppercase {
   font-size: 10px;
   font-weight: 500;
   text-transform: uppercase;
+  line-height: 12px;
 }
 
 .system-2xs-semibold-uppercase {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
+  line-height: 12px;
 }
 
 .system-xs-regular {
   font-size: 12px;
   font-weight: 400;
+  line-height: 16px;
 }
 
 .system-xs-regular-uppercase {
   font-size: 12px;
   font-weight: 400;
   text-transform: uppercase;
+  line-height: 16px;
 }
 
 .system-xs-medium {
   font-size: 12px;
   font-weight: 500;
+  line-height: 16px;
 }
 
 .system-xs-medium-uppercase {
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
+  line-height: 16px;
 }
 
 .system-xs-semibold {
   font-size: 12px;
   font-weight: 600;
+  line-height: 16px;
 }
 
 .system-xs-semibold-uppercase {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
+  line-height: 16px;
 }
 
 .system-sm-regular {
   font-size: 13px;
   font-weight: 400;
+  line-height: 16px;
 }
 
 .system-sm-medium {
   font-size: 13px;
   font-weight: 500;
+  line-height: 16px;
 }
 
 .system-sm-medium-uppercase {
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
+  line-height: 16px;
 }
 
 .system-sm-semibold {
   font-size: 13px;
   font-weight: 600;
+  line-height: 16px;
 }
 
 .system-sm-semibold-uppercase {
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
+  line-height: 16px;
 }
 
 .system-md-regular {
   font-size: 14px;
   font-weight: 400;
+  line-height: 20px;
 }
 
 .system-md-medium {
   font-size: 14px;
   font-weight: 500;
+  line-height: 20px;
 }
 
 .system-md-semibold {
   font-size: 14px;
   font-weight: 600;
+  line-height: 20px;
 }
 
 .system-md-semibold-uppercase {
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
+  line-height: 20px;
 }
 
 .system-xl-regular {
   font-size: 16px;
   font-weight: 400;
+  line-height: 24px;
 }
 
 .system-xl-medium {
   font-size: 16px;
   font-weight: 500;
+  line-height: 24px;
 }
 
 .system-xl-semibold {
   font-size: 16px;
   font-weight: 600;
+  line-height: 24px;
 }
 
 .code-xs-regular {
   font-size: 12px;
   font-weight: 400;
+  line-height: 1.5;
 }
 
 .code-xs-semibold {
   font-size: 12px;
-  font-weight: undefined;
+  font-weight: 600;
+  line-height: 1.5;
 }
 
 .code-sm-regular {
   font-size: 13px;
   font-weight: 400;
+  line-height: 1.5;
 }
 
 .code-sm-semibold {
   font-size: 13px;
-  font-weight: undefined;
+  font-weight: 600;
+  line-height: 1.5;
 }
 
 .code-md-regular {
   font-size: 14px;
   font-weight: 400;
+  line-height: 1.5;
 }
 
 .code-md-semibold {
   font-size: 14px;
-  font-weight: undefined;
+  font-weight: 600;
+  line-height: 1.5;
 }
 
 .body-xs-light {
   font-size: 12px;
-  font-weight: undefined;
+  font-weight: 300;
+  line-height: 16px;
 }
 
 .body-xs-regular {
   font-size: 12px;
   font-weight: 400;
+  line-height: 16px;
 }
 
 .body-xs-medium {
   font-size: 12px;
   font-weight: 500;
+  line-height: 16px;
 }
 
 .body-sm-light {
   font-size: 13px;
-  font-weight: undefined;
+  font-weight: 300;
+  line-height: 16px;
 }
 
 .body-sm-regular {
   font-size: 13px;
   font-weight: 400;
+  line-height: 16px;
 }
 
 .body-sm-medium {
   font-size: 13px;
   font-weight: 500;
+  line-height: 16px;
 }
 
 .body-md-light {
   font-size: 14px;
-  font-weight: undefined;
+  font-weight: 300;
+  line-height: 20px;
 }
 
 .body-md-regular {
   font-size: 14px;
   font-weight: 400;
+  line-height: 20px;
 }
 
 .body-md-medium {
   font-size: 14px;
   font-weight: 500;
+  line-height: 20px;
 }
 
 .body-lg-light {
   font-size: 15px;
-  font-weight: undefined;
+  font-weight: 300;
+  line-height: 20px;
 }
 
 .body-lg-regular {
   font-size: 15px;
   font-weight: 400;
+  line-height: 20px;
 }
 
 .body-lg-medium {
   font-size: 15px;
   font-weight: 500;
+  line-height: 20px;
 }
 
 .body-xl-regular {
   font-size: 16px;
   font-weight: 400;
+  line-height: 24px;
 }
 
 .body-xl-medium {
   font-size: 16px;
   font-weight: 500;
+  line-height: 24px;
 }
 
 .body-xl-light {
   font-size: 16px;
-  font-weight: undefined;
+  font-weight: 300;
+  line-height: 24px;
 }
 
 .body-2xl-light {
   font-size: 18px;
-  font-weight: undefined;
+  font-weight: 300;
+  line-height: 1.5;
 }
 
 .body-2xl-regular {
   font-size: 18px;
   font-weight: 400;
+  line-height: 1.5;
 }
 
 .body-2xl-medium {
   font-size: 18px;
   font-weight: 500;
+  line-height: 1.5;
 }
 
 .title-xs-semi-bold {
   font-size: 12px;
   font-weight: 600;
+  line-height: 16px;
 }
 
 .title-xs-bold {
   font-size: 12px;
   font-weight: 700;
+  line-height: 16px;
 }
 
 .title-sm-semi-bold {
   font-size: 13px;
   font-weight: 600;
+  line-height: 16px;
 }
 
 .title-sm-bold {
   font-size: 13px;
   font-weight: 700;
+  line-height: 16px;
 }
 
 .title-md-semi-bold {
   font-size: 14px;
   font-weight: 600;
+  line-height: 20px;
 }
 
 .title-md-bold {
   font-size: 14px;
   font-weight: 700;
+  line-height: 20px;
 }
 
 .title-lg-semi-bold {
   font-size: 15px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-lg-bold {
   font-size: 15px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-xl-semi-bold {
   font-size: 16px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-xl-bold {
   font-size: 16px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-2xl-semi-bold {
   font-size: 18px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-2xl-bold {
   font-size: 18px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-3xl-semi-bold {
   font-size: 20px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-3xl-bold {
   font-size: 20px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-4xl-semi-bold {
   font-size: 24px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-4xl-bold {
   font-size: 24px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-5xl-semi-bold {
   font-size: 30px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-5xl-bold {
   font-size: 30px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-6xl-semi-bold {
   font-size: 36px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-6xl-bold {
   font-size: 36px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-7xl-semi-bold {
   font-size: 48px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-7xl-bold {
   font-size: 48px;
   font-weight: 700;
+  line-height: 1.2;
 }
 
 .title-8xl-semi-bold {
   font-size: 60px;
   font-weight: 600;
+  line-height: 1.2;
 }
 
 .title-8xl-bold {
   font-size: 60px;
   font-weight: 700;
+  line-height: 1.2;
 }
 /* font define end */
 
+/* border radius start */
+.radius-2xs {
+  border-radius: 2px;
+}
+
+.radius-xs {
+  border-radius: 4px;
+}
+
+.radius-sm {
+  border-radius: 6px;
+}
+
+.radius-md {
+  border-radius: 8px;
+}
+
+.radius-lg {
+  border-radius: 10px;
+}
+
+.radius-xl {
+  border-radius: 12px;
+}
+
+.radius-2xl {
+  border-radius: 16px;
+}
+
+.radius-3xl {
+  border-radius: 20px;
+}
+
+.radius-4xl {
+  border-radius: 24px;
+}
+
+.radius-5xl {
+  border-radius: 24px;
+}
+
+.radius-6xl {
+  border-radius: 28px;
+}
+
+.radius-7xl {
+  border-radius: 32px;
+}
+
+.radius-8xl {
+  border-radius: 40px;
+}
+
+.radius-9xl {
+  border-radius: 48px;
+}
+
+.radius-full {
+  border-radius: 64px;
+}
+/* border radius end */
+
 .link {
   @apply text-blue-600 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
 }