Fixing Checkbox Styles to show unchecked Border

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -36,10 +36,20 @@ export const getStyle = (style: CheckboxStyleType) => {
         ${EllipsisTextCss};
       }
 
+      .ant-checkbox .ant-checkbox-checked > .ant-checkbox-inner {
+        border-color: ${style.checkedBorder};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
+      }
+
+      .ant-checkbox:not(.ant-checkbox-checked) > .ant-checkbox-inner{
+        border-color: ${style.uncheckedBorder};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
+      }
+
       .ant-checkbox-checked {
         .ant-checkbox-inner {
           background-color: ${style.checkedBackground};
-          border-color: ${style.checkedBackground};
+          border-color: ${style.checkedBorder};
           border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
 
           &::after {
@@ -48,17 +58,17 @@ export const getStyle = (style: CheckboxStyleType) => {
         }
 
         &::after {
-          border-color: ${style.checkedBackground};
+          border-color: ${style.checkedBorder};
           border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
           border-radius: ${style.radius};
         }
       }
       
       .ant-checkbox-inner {
-        border-radius: ${style.radius};
         background-color: ${style.uncheckedBackground};
-        border-color: ${style.uncheckedBorder};
-        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
+        border-radius: ${style.radius};
+        border-color: ${style.checkedBorder};
+        border-width:${style.borderWidth ? style.borderWidth : '2px'};
       }
     
       &:hover .ant-checkbox-inner, 
@@ -76,7 +86,7 @@ export const getStyle = (style: CheckboxStyleType) => {
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
-        border-color: ${style.checkedBackground};
+        border-color: ${style.checkedBorder};
         border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
     }

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1334,8 +1334,8 @@ export const RadioStyle = [
   {
     name: "checked",
     label: trans("style.checked"),
-    depName: "uncheckedBackground",
-    depType: DEP_TYPE.SELF,
+    depName: "checkedBackground",
+    depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: toSelf,
   },
   HOVER_BACKGROUND_COLOR,