tool setting support variable

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

@@ -5,7 +5,7 @@ import classNames from '@/utils/classnames'
 
 type SwitchProps = {
   onChange?: (value: boolean) => void
-  size?: 'sm' | 'md' | 'lg' | 'l'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'l'
   defaultValue?: boolean
   disabled?: boolean
   className?: string
@@ -23,6 +23,7 @@ const Switch = React.forwardRef(
       l: 'h-5 w-9',
       md: 'h-4 w-7',
       sm: 'h-3 w-5',
+      xs: 'h-2.5 w-3.5',
     }
 
     const circleStyle = {
@@ -30,6 +31,7 @@ const Switch = React.forwardRef(
       l: 'h-4 w-4',
       md: 'h-3 w-3',
       sm: 'h-2 w-2',
+      xs: 'h-1.5 w-1',
     }
 
     const translateLeft = {
@@ -37,6 +39,7 @@ const Switch = React.forwardRef(
       l: 'translate-x-4',
       md: 'translate-x-3',
       sm: 'translate-x-2',
+      xs: 'translate-x-1.5',
     }
     return (
       <OriginalSwitch
@@ -53,6 +56,7 @@ const Switch = React.forwardRef(
           enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
           'relative inline-flex  flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
           disabled ? '!opacity-50 !cursor-not-allowed' : '',
+          size === 'xs' && 'rounded-sm',
           className,
         )}
       >
@@ -61,6 +65,7 @@ const Switch = React.forwardRef(
           className={classNames(
             circleStyle[size],
             enabled ? translateLeft[size] : 'translate-x-0',
+            size === 'xs' && 'rounded-[1px]',
             'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
           )}
         />

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

@@ -3,47 +3,51 @@ import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
 
-interface Option {
+type Option = {
   value: string
   text: string | JSX.Element
 }
 
-interface ItemProps {
+type ItemProps = {
   className?: string
   isActive: boolean
   onClick: (v: string) => void
   option: Option
+  smallItem?: boolean
 }
 const Item: FC<ItemProps> = ({
   className,
   isActive,
   onClick,
   option,
+  smallItem,
 }) => {
   return (
     <div
       key={option.value}
       className={cn(
-        'relative pb-2.5 system-xl-semibold',
+        'relative pb-2.5 ',
         !isActive && 'cursor-pointer',
+        smallItem ? 'system-sm-semibold-uppercase' : 'system-xl-semibold',
         className,
       )}
       onClick={() => !isActive && onClick(option.value)}
     >
       <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-util-colors-blue-blue-500'></div>
+        <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600'></div>
       )}
     </div>
   )
 }
 
-interface Props {
+type Props = {
   className?: string
   value: string
   onChange: (v: string) => void
   options: Option[]
   noBorderBottom?: boolean
+  smallItem?: boolean
   itemClassName?: string
 }
 
@@ -54,6 +58,7 @@ const TabSlider: FC<Props> = ({
   options,
   noBorderBottom,
   itemClassName,
+  smallItem,
 }) => {
   return (
     <div className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex  space-x-6')}>
@@ -64,6 +69,7 @@ const TabSlider: FC<Props> = ({
           onClick={onChange}
           key={option.value}
           className={itemClassName}
+          smallItem={smallItem}
         />
       ))}
     </div>