Auth navigation

src/components/checkbox/Checkbox.tsx

@@ -33,6 +33,16 @@ const colorsVariants = {
   danger: "bg-liquid-red",
 };
 
+
+const borderColorsVariants = {
+  default: "border-default",
+  primary: "border-liquid-brightmain",
+  secondary: "border-liquid-darkmain",
+  success: "border-liquid-green",
+  warning: "border-liquid-orange",
+  danger: "border-liquid-red",
+};
+
 const focuseOutlineVariants = {
   default: "[&:focus-visible+*]:outline-default",
   primary: "[&:focus-visible+*]:outline-liquid-brightmain",
@@ -97,7 +107,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         className={cn(
           "group-hover:bg-default-100 group-active:scale-90 flex items-center justify-center bg-transparent hover:bg-default-100 box-border border-solid border-[2px] border-default z-10 relative transition-all duration-300",
           sizeVariants[size],
-          radiusVraiants[radius]
+          radiusVraiants[radius],
+          active && borderColorsVariants[color]
         )}
       >
         <input