fix(checkbox): [checkbox] change the checkbox icon and synchronously modify the checkbox style

Author: MomoPoppy

packages/theme/src/checkbox/index.less

@@ -158,23 +158,29 @@
 
       .icon-checked-sur,
       .icon-halfselect {
-        fill: var(--tv-Checkbox-bg-color-active);
+        path:first-child {
+          fill: var(--tv-Checkbox-bg-color-active);
+        }
 
         path:last-child {
           fill: var(--tv-Checkbox-border-color-inverse);
         }
       }
 
       .icon-check {
-        fill: var(--tv-Checkbox-unchecked-border-color);
-
         path:first-child {
           fill: transparent;
         }
+
+        path:nth-child(2) {
+          fill: var(--tv-Checkbox-unchecked-border-color);
+        }
       }
 
       .icon-check:hover {
-        fill: var(--tv-Checkbox-unchecked-border-color-hover);
+        path:nth-child(2) {
+          fill: var(--tv-Checkbox-unchecked-border-color-hover);
+        }
       }
     }
   }
@@ -185,18 +191,22 @@
     .@{checkbox-prefix-cls}__inner {
       .icon-checked-sur,
       .icon-halfselect {
-        fill: var(--tv-Checkbox-checked-disabled-bg-color);
+        path:first-child {
+          fill: var(--tv-Checkbox-checked-disabled-bg-color);
+        }
 
         path:last-child {
           fill: var(--tv-Checkbox-icon-inverse-disabled);
         }
       }
       .icon-check {
-        fill: var(--tv-Checkbox-bg-color-disabled);
-
         path:first-child {
           fill: var(--tv-Checkbox-bg-color-disabled);
         }
+
+        path:nth-child(2) {
+          fill: var(--tv-Checkbox-border-color-disabled);
+        }
       }
     }
   }

packages/theme/src/grid/checkbox.less

@@ -73,7 +73,11 @@
 
         &.icon-checked-sur {
           display: block;
-          fill: var(--tv-Grid-bg-color-active);
+
+          path:first-child {
+            fill: var(--tv-Grid-bg-color-active);
+          }
+
           path:last-child {
             fill: var(--tv-Grid-border-color-inverse);
           }
@@ -98,7 +102,10 @@
 
           > svg {
             &.icon-half-select {
-              fill: var(--tv-Grid-bg-color-active);
+              path:first-child {
+                fill: var(--tv-Grid-bg-color-active);
+              }
+
               path:last-child {
                 fill: var(--tv-Grid-border-color-inverse);
               }
@@ -124,11 +131,13 @@
 
       &:checked + .@{grid-checkbox-prefix-cls}__icon {
         > svg {
-          fill: var(--tv-Grid-checkbox-border-color-disabled);
-
           path:first-child {
             fill: var(--tv-Grid-checked-disabled-bg-color);
           }
+
+          path:nth-child(2) {
+            fill: var(--tv-Grid-icon-inverse-disabled);
+          }
         }
       }
     }
@@ -143,12 +152,29 @@
           fill: var(--tv-Grid-checkbox-border-color-disabled);
         }
       }
+
+      & + .@{grid-checkbox-prefix-cls}__icon {
+        svg.icon-half-select {
+          path:first-child {
+            fill: var(--tv-Grid-checked-disabled-bg-color);
+          }
+
+          path:nth-child(2) {
+            fill: var(--tv-Grid-icon-inverse-disabled);
+          }
+        }
+      }
     }
   }
   &.is__disabled > input:not(:checked) + .tiny-grid-checkbox__icon .icon-check {
     path:first-child {
       fill: var(--tv-Grid-bg-color-disabled);
     }
+
+    path:nth-child(2) {
+      fill: var(--tv-Grid-border-color-disabled);
+    }
+
     &:hover {
       path:last-child {
         fill: var(--tv-Grid-unchecked-border-color);

packages/theme/src/grid/vars.less

@@ -243,7 +243,7 @@
   // 复选框选中禁用边框色
   --tv-Grid-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
   // 复选框禁用反白色
-  --tv-Grid-icon-inverse-disabled: var(--tv-color-icon-inverse);
+  --tv-Grid-icon-inverse-disabled: var(--tv-color-bg-inverse-disabled, #fff);
   // 默认复选框未选中禁用背景色
   --tv-Grid-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
 }

packages/theme/src/option/index.less

@@ -48,22 +48,28 @@
   &.selected .tiny-svg,
   .checked-sur.tiny-svg,
   .halfselect.tiny-svg {
-    fill: var(--tv-Option-icon-color-checked);
+    path:first-child {
+      fill: var(--tv-Option-icon-color-checked);
+    }
 
     path:last-child {
       fill: var(--tv-Option-icon-inverse-disabled);
     }
   }
 
   .check.tiny-svg {
-    fill: var(--tv-Option-icon-color-unchecked);
-
     path:first-child {
       fill: transparent;
     }
 
+    path:nth-child(2) {
+      fill: var(--tv-Option-icon-color-unchecked);
+    }
+
     &:hover {
-      fill: var(--tv-Option-icon-color-hover);
+      path:nth-child(2) {
+        fill: var(--tv-Option-icon-color-hover);
+      }
     }
   }
 
@@ -113,19 +119,23 @@
     .tiny-svg {
       &.checked-sur,
       &.halfselect {
-        fill: var(--tv-Option-checked-disabled-bg-color);
+        path:first-child {
+          fill: var(--tv-Option-checked-disabled-bg-color);
+        }
 
         path:last-child {
           fill: var(--tv-Option-icon-color-checked-disabled-inverse);
         }
       }
 
       &.check {
-        fill: var(--tv-Option-icon-color-unchecked-disabled);
-
         path:first-child {
           fill: var(--tv-Option-bg-color-disabled);
         }
+
+        path:nth-child(2) {
+          fill: var(--tv-Option-icon-color-unchecked-disabled);
+        }
       }
     }
   }