Feat: dark mode for logs and annotations (#11575)

web/app/components/base/chat/chat/answer/index.tsx

@@ -114,7 +114,7 @@ const Answer: FC<AnswerProps> = ({
         <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
           <div
             ref={contentRef}
-            className={cn('relative inline-block px-4 py-3 max-w-full bg-gray-100 rounded-2xl text-sm text-gray-900', workflowProcess && 'w-full')}
+            className={cn('relative inline-block px-4 py-3 max-w-full bg-chat-bubble-bg rounded-2xl body-lg-regular text-text-primary', workflowProcess && 'w-full')}
           >
             {
               !responding && (
@@ -212,15 +212,15 @@ const Answer: FC<AnswerProps> = ({
                 disabled={!item.prevSibling}
                 onClick={() => item.prevSibling && switchSibling?.(item.prevSibling)}
               >
-                <ChevronRight className="w-[14px] h-[14px] rotate-180 text-gray-500" />
+                <ChevronRight className="w-[14px] h-[14px] rotate-180 text-text-tertiary" />
               </button>
-              <span className="px-2 text-xs text-gray-700">{item.siblingIndex + 1} / {item.siblingCount}</span>
+              <span className="px-2 text-xs text-text-quaternary">{item.siblingIndex + 1} / {item.siblingCount}</span>
               <button
                 className={`${item.nextSibling ? 'opacity-100' : 'opacity-65'}`}
                 disabled={!item.nextSibling}
                 onClick={() => item.nextSibling && switchSibling?.(item.nextSibling)}
               >
-                <ChevronRight className="w-[14px] h-[14px] text-gray-500" />
+                <ChevronRight className="w-[14px] h-[14px] text-text-tertiary" />
               </button>
             </div>}
           </div>

web/app/components/base/checkbox/assets/check.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 3L4.5 8.5L2 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

web/app/components/base/checkbox/index.module.css

@@ -1,14 +0,0 @@
-.wrapper {
-  border-color: #d0d5dd;
-}
-
-.checked {
-  background: #155eef url(./assets/check.svg) center center no-repeat;
-  background-size: 12px 12px;
-  border-color: #155eef;
-}
-
-.checked.disabled {
-  background-color: #d0d5dd;
-  border-color: #d0d5dd;
-}

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

@@ -1,4 +1,4 @@
-import s from './index.module.css'
+import { RiCheckLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 
 type CheckboxProps = {
@@ -9,13 +9,27 @@ type CheckboxProps = {
 }
 
 const Checkbox = ({ checked, onCheck, className, disabled }: CheckboxProps) => {
+  if (!checked) {
+    return (
+      <div
+        className={cn(
+          'w-4 h-4 rounded-[4px] bg-components-checkbox-bg-unchecked border border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs cursor-pointer',
+          disabled && 'border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled cursor-not-allowed',
+          className,
+        )}
+        onClick={() => {
+          if (disabled)
+            return
+          onCheck?.()
+        }}
+      ></div>
+    )
+  }
   return (
     <div
       className={cn(
-        s.wrapper,
-        checked && s.checked,
-        disabled && s.disabled,
-        'w-4 h-4 border rounded border-gray-300',
+        'w-4 h-4 flex items-center justify-center rounded-[4px] bg-components-checkbox-bg hover:bg-components-checkbox-bg-hover text-components-checkbox-icon shadow-xs cursor-pointer',
+        disabled && 'bg-components-checkbox-bg-disabled-checked hover:bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled cursor-not-allowed',
         className,
       )}
       onClick={() => {
@@ -24,7 +38,9 @@ const Checkbox = ({ checked, onCheck, className, disabled }: CheckboxProps) => {
 
         onCheck?.()
       }}
-    />
+    >
+      <RiCheckLine className={cn('w-3 h-3')} />
+    </div>
   )
 }
 

web/app/components/base/copy-icon/index.tsx

@@ -39,10 +39,10 @@ export const CopyIcon = ({ content }: Props) => {
       <div onMouseLeave={onMouseLeave}>
         {!isCopied
           ? (
-            <Clipboard className='mx-1 w-3 h-3 text-gray-500 cursor-pointer' onClick={onClickCopy} />
+            <Clipboard className='mx-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer' onClick={onClickCopy} />
           )
           : (
-            <ClipboardCheck className='mx-1 w-3 h-3 text-gray-500' />
+            <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-text-tertiary' />
           )
         }
       </div>

web/app/components/base/drawer-plus/index.tsx

@@ -58,15 +58,15 @@ const DrawerPlus: FC<Props> = ({
       panelClassname={cn('mt-16 mx-2 sm:mr-2 mb-3 !p-0 rounded-xl', panelClassName, maxWidthClassName)}
     >
       <div
-        className={cn(contentClassName, 'w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
+        className={cn(contentClassName, 'w-full flex flex-col bg-components-panel-bg border-[0.5px] border-divider-subtle rounded-xl shadow-xl')}
         style={{
           height,
         }}
         ref={ref}
       >
-        <div className={cn(headerClassName, 'shrink-0 border-b border-b-gray-100 py-4')}>
+        <div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
           <div className='flex justify-between items-center pl-6 pr-5 h-6'>
-            <div className='text-base font-semibold text-gray-900'>
+            <div className='system-xl-semibold text-text-primary'>
               {title}
             </div>
             <div className='flex items-center'>
@@ -74,12 +74,12 @@ const DrawerPlus: FC<Props> = ({
                 onClick={onHide}
                 className='flex justify-center items-center w-6 h-6 cursor-pointer'
               >
-                <RiCloseLine className='w-4 h-4 text-gray-500' />
+                <RiCloseLine className='w-4 h-4 text-text-tertiary' />
               </div>
             </div>
           </div>
           {titleDescription && (
-            <div className='pl-6 pr-10 leading-[18px] text-xs font-normal text-gray-500'>
+            <div className='pl-6 pr-10 system-xs-regular text-text-tertiary'>
               {titleDescription}
             </div>
           )}

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

@@ -49,7 +49,7 @@ export default function Drawer({
         <Dialog.Overlay
           className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
         />
-        <div className={cn('relative z-50 flex flex-col justify-between bg-white w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
+        <div className={cn('relative z-50 flex flex-col justify-between bg-background-body w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
           <>
             {title && <Dialog.Title
               as="h3"

web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx

@@ -77,9 +77,9 @@ const ConfigParamModal: FC<Props> = ({
     <Modal
       isShow={isShow}
       onClose={onHide}
-      className='!p-8 !pb-6 !mt-14 !max-w-none !w-[640px]'
+      className='!p-6 !mt-14 !max-w-none !w-[640px]'
     >
-      <div className='mb-2 text-xl font-semibold text-[#1D2939]'>
+      <div className='mb-2 title-2xl-semibold text-text-primary'>
         {t(`appAnnotation.initSetup.${isInit ? 'title' : 'configTitle'}`)}
       </div>
 

web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx

@@ -10,11 +10,11 @@ export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }>
 }) => {
   return (
     <div>
-      <div className='flex items-center space-x-1'>
-        <div>{title}</div>
+      <div className='flex items-center space-x-1 mb-1'>
+        <div className='py-1 system-sm-semibold text-text-secondary'>{title}</div>
         <Tooltip
           popupContent={
-            <div className='max-w-[200px] leading-[18px] text-[13px] font-medium text-gray-800'>{tooltip}</div>
+            <div className='max-w-[200px] system-sm-regular text-text-secondary'>{tooltip}</div>
           }
         />
       </div>

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx

@@ -26,7 +26,7 @@ const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disa
     renderThumb={(props, state) => (
       <div {...props}>
         <div className='relative w-full h-full'>
-          <div className='absolute top-[-16px] left-[50%] translate-x-[-50%] leading-[18px] text-xs font-medium text-gray-900'>
+          <div className='absolute top-[-16px] left-[50%] translate-x-[-50%] system-sm-semibold text-text-primary'>
             {(state.valueNow / 100).toFixed(2)}
           </div>
         </div>

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx

@@ -28,13 +28,13 @@ const ScoreSlider: FC<Props> = ({
           onChange={onChange}
         />
       </div>
-      <div className='mt-[10px] flex justify-between items-center leading-4 text-xs font-normal '>
-        <div className='flex space-x-1 text-[#00A286]'>
+      <div className='mt-[10px] flex justify-between items-center system-xs-semibold-uppercase'>
+        <div className='flex space-x-1 text-util-colors-cyan-cyan-500'>
           <div>0.8</div>
           <div>·</div>
           <div>{t('appDebug.feature.annotation.scoreThreshold.easyMatch')}</div>
         </div>
-        <div className='flex space-x-1 text-[#0057D8]'>
+        <div className='flex space-x-1 text-util-colors-blue-blue-500'>
           <div>1.0</div>
           <div>·</div>
           <div>{t('appDebug.feature.annotation.scoreThreshold.accurateMatch')}</div>

web/app/components/base/modal/index.css

@@ -3,5 +3,5 @@
 }
 
 .modal-panel {
-  @apply w-full max-w-[480px] transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all;
+  @apply w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all;
 }

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

@@ -29,7 +29,7 @@ export default function Modal({
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -60,22 +60,22 @@ export default function Modal({
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className={classNames(
-                'modal-panel',
+                'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 className,
               )}>
                 {title && <Dialog.Title
                   as="h3"
-                  className="text-lg font-medium leading-6 text-gray-900"
+                  className="text-lg font-medium leading-6 text-text-primary"
                 >
                   {title}
                 </Dialog.Title>}
-                {description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>
+                {description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>
                   {description}
                 </Dialog.Description>}
                 {closable
-                  && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-gray-100'>
-                    <XMarkIcon className='w-4 h-4 text-gray-500' onClick={
+                  && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'>
+                    <XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={
                       (e) => {
                         e.stopPropagation()
                         onClose()

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

@@ -1,6 +1,5 @@
 import { Popover, Transition } from '@headlessui/react'
 import { Fragment, cloneElement, useRef } from 'react'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 
 export type HtmlContentProps = {
@@ -63,19 +62,19 @@ export default function CustomPopover({
               <Popover.Button
                 ref={buttonRef}
                 disabled={disabled}
-                className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName
-                  ? ''
-                  : typeof btnClassName === 'string'
-                    ? btnClassName
-                    : btnClassName?.(open)
-                }`}
+                className={cn(
+                  'group inline-flex items-center bg-components-button-secondary-bg px-3 py-2 rounded-lg text-base border border-components-button-secondary-border font-medium hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover focus:outline-none',
+                  open && 'bg-components-button-secondary-bg-hover border-components-button-secondary-border',
+                  (btnClassName && typeof btnClassName === 'string') && btnClassName,
+                  (btnClassName && typeof btnClassName !== 'string') && btnClassName?.(open),
+                )}
               >
                 {btnElement}
               </Popover.Button>
               <Transition as={Fragment}>
                 <Popover.Panel
                   className={cn(
-                    s.popupPanel,
+                    'absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl',
                     position === 'bottom' && '-translate-x-1/2 left-1/2',
                     position === 'bl' && 'left-0',
                     position === 'br' && 'right-0',
@@ -91,7 +90,7 @@ export default function CustomPopover({
                 >
                   {({ close }) => (
                     <div
-                      className={cn(s.panelContainer, popupClassName)}
+                      className={cn('overflow-hidden bg-components-panel-bg w-fit min-w-[130px] rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', popupClassName)}
                       {...(trigger !== 'hover'
                         ? {}
                         : {

web/app/components/base/popover/style.module.css

@@ -1,9 +0,0 @@
-.popupBtn {
-    @apply inline-flex items-center bg-white px-3 py-2 rounded-lg text-base border border-gray-200 font-medium hover:bg-gray-100 focus:outline-none
-}
-.popupPanel {
-    @apply absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl
-}
-.panelContainer {
-    @apply overflow-hidden bg-white w-fit min-w-[130px] rounded-lg shadow-lg ring-1 ring-black ring-opacity-5
-}

web/app/components/base/tab-slider-plain/index.tsx

@@ -23,12 +23,16 @@ const Item: FC<ItemProps> = ({
   return (
     <div
       key={option.value}
-      className={cn(className, !isActive && 'cursor-pointer', 'relative pb-2.5  leading-6 text-base font-semibold')}
+      className={cn(
+        'relative pb-2.5 system-xl-semibold',
+        !isActive && 'cursor-pointer',
+        className,
+      )}
       onClick={() => !isActive && onClick(option.value)}
     >
-      <div className={cn(isActive ? 'text-gray-900' : 'text-gray-600')}>{option.text}</div>
+      <div className={cn(isActive ? 'text-text-primary' : 'text-text-tertiary')}>{option.text}</div>
       {isActive && (
-        <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-[#155EEF]'></div>
+        <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-blue-500'></div>
       )}
     </div>
   )
@@ -52,7 +56,7 @@ const TabSlider: FC<Props> = ({
   itemClassName,
 }) => {
   return (
-    <div className={cn(className, !noBorderBottom && 'border-b border-[#EAECF0]', 'flex  space-x-6')}>
+    <div className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex  space-x-6')}>
       {options.map(option => (
         <Item
           isActive={option.value === value}

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

@@ -96,7 +96,7 @@ const Tooltip: FC<TooltipProps> = ({
       >
         {popupContent && (<div
           className={cn(
-            'relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg break-words',
+            'relative px-3 py-2 system-xs-regular text-text-tertiary bg-components-panel-bg rounded-md shadow-lg break-words',
             popupClassName,
           )}
           onMouseEnter={() => triggerMethod === 'hover' && setHoverPopup()}