refactor: replace custom color with preset color

src/common/component/styled/Button.tsx

@@ -12,7 +12,7 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   const isFull = className.includes('flex');
   return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
     isFull && "w-full",
-    isGhost && "!text-gray-600 dark:!text-gray-100  !border !border-solid !border-[#d0d5dd] !bg-transparent",
+    isGhost && "!text-gray-600 dark:!text-gray-100  !border !border-solid !border-gray-300 !bg-transparent",
     isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",
     isSmall && "!py-2",
     noBorder && "!shadow-none !border-none",

src/common/component/styled/Checkbox.tsx

@@ -6,6 +6,6 @@ export default function StyledCheckbox(props: InputHTMLAttributes<HTMLInputEleme
     readOnly
     {...props}
     type="checkbox"
-    className={`checkbox w-5 h-5 rounded-md border border-solid border-slate-300 checked:border-[#1fe1f9] disabled:opacity-40 ${cbClasses}`}
+    className={`checkbox w-5 h-5 rounded-md border border-solid border-slate-300 checked:border-primary-400 disabled:opacity-40 ${cbClasses}`}
   />;
 }