feat: checkbox restyle

Author: knst0

common/loginpage/src/css/colors.less

@@ -56,6 +56,13 @@
     --shadow-sidebar-item-pressed: 0px 1px 4px -1px rgba(0, 0, 0, 0.20);
     --layout-list-items-gap: 0;
     --action-active-font-weight: normal;
+
+    --chb-border-radius: 2px;
+    --chb-check-mark-background: var(--text-normal);
+    --chb-background-normal: var(--background-normal);
+    --chb-background-checked: var(--background-normal);
+    --chb-border-normal: var(--border-regular-control);
+    --chb-border-checked: var(--border-regular-control);
 }
 
 @background-normal: var(--background-normal);
@@ -113,4 +120,19 @@
 @disabled-element-opacity: var(--disabled-element-opacity);
 @theme-inverted-image-filter: var(--theme-inverted-image-filter);
 @layout-list-items-gap: var(--layout-list-items-gap, 0);
-@action-active-font-weight: var(--action-active-font-weight, normal);
+@action-active-font-weight: var(--action-active-font-weight, normal);
+
+//@chb-size: var(--chb-size);
+//@chb-v-margin: var(--chb-v-margin);
+@chb-border-radius: var(--chb-border-radius);
+@chb-check-mark-background: var(--chb-check-mark-background);
+@chb-background-normal: var(--chb-background-normal);
+@chb-background-normal-hover: var(--chb-background-normal-hover);
+@chb-background-checked: var(--chb-background-checked);
+@chb-background-checked-hover: var(--chb-background-checked-hover);
+@chb-border-normal: var(--chb-border-normal);
+@chb-border-normal-hover: var(--chb-border-normal-hover);
+@chb-border-normal-focus: var(--chb-border-normal-focus);
+@chb-border-checked: var(--chb-border-checked);
+@chb-border-checked-hover: var(--chb-border-checked-hover);
+@chb-border-checked-focus: var(--chb-border-checked-focus);

common/loginpage/src/css/colors_contrast_dark.less

@@ -48,5 +48,11 @@
 
         --disabled-element-opacity: .3;
         --theme-inverted-image-filter: invert(1);
+
+        --chb-check-mark-background: var(--text-normal);
+        --chb-background-normal: var(--background-normal);
+        --chb-background-checked: var(--background-normal);
+        --chb-border-normal: var(--border-regular-control);
+        --chb-border-checked: var(--border-regular-control);
     }
 }

common/loginpage/src/css/colors_dark.less

@@ -48,5 +48,11 @@
 
         --disabled-element-opacity: .3;
         --theme-inverted-image-filter: invert(1);
+
+        --chb-check-mark-background: var(--text-normal);
+        --chb-background-normal: var(--background-normal);
+        --chb-background-checked: var(--background-normal);
+        --chb-border-normal: var(--border-regular-control);
+        --chb-border-checked: var(--border-regular-control);
     }
 }

common/loginpage/src/css/colors_night.less

@@ -49,5 +49,11 @@
         --shadow-sidebar-item-pressed: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
         --layout-list-items-gap: 0;
         --action-active-font-weight: 500;
+
+        --chb-check-mark-background: var(--text-normal);
+        --chb-background-normal: var(--background-normal);
+        --chb-background-checked: var(--background-normal);
+        --chb-border-normal: var(--border-regular-control);
+        --chb-border-checked: var(--border-regular-control);
     }
 }

common/loginpage/src/css/colors_white.less

@@ -57,5 +57,11 @@
         --shadow-sidebar-item-pressed: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
         --layout-list-items-gap: 0;
         --action-active-font-weight: 500;
+
+        --chb-check-mark-background: #fff;
+        --chb-background-normal: var(--background-normal);
+        --chb-background-checked: #4A87E7;
+        --chb-border-normal: var(--border-regular-control);
+        --chb-border-checked: #4A87E7;
    }
 }

common/loginpage/src/css/component.less

@@ -101,27 +101,35 @@ input[type=checkbox] {
         content: "";
         display: block;
         position: absolute;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
         top: 0;
         left: 0;
-        border: @scaled-one-px solid @border-regular-control;
-        border-radius: 3px;
-        background-color: @background-normal;
+        border: @scaled-one-px solid @chb-border-normal;
+        border-radius: @chb-border-radius;
+        background-color: @chb-background-normal;
     }
 
-    &:checked:after {
-        content: "";
-        display: block;
-        width: 5px;
-        height: 10px;
-        border: solid @text-normal;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-        position: absolute;
-        top: 3px;
-        left: 7px;
+    &:checked {
+        &:before {
+            border-color: @chb-border-checked;
+            background-color: @chb-background-checked;
+        }
+
+        &::after {
+            content: "";
+            display: block;
+            width: 5px;
+            height: 10px;
+            border: solid @chb-check-mark-background;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+            position: absolute;
+            top: 3px;
+            left: 7px;
+        }
     }
+
     &:focus-visible {
         outline: 0;
         &:before {

common/loginpage/src/css/styles.less

@@ -1737,9 +1737,9 @@ li.menu-item {
 }
 
 .checkbox {
-  width: 12px;
-  height: 18px;
-  margin-right: 16px;
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
   margin-left: 0;
 }