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

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}