feat(checkbox): [checkbox] Component dark theme adaptation

examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts

@@ -6,7 +6,6 @@ test('基础用法', async ({ page }) => {
   const demo = page.locator('#basic-usage')
   const checkbox = demo.locator('.tiny-checkbox')
   await expect(checkbox).toHaveClass(/is-checked/)
-  await expect(checkbox.locator('.tiny-checkbox__inner svg')).toHaveCSS('fill', 'rgb(20, 118, 255)')
   await checkbox.click()
   await expect(checkbox).not.toHaveClass(/is-checked/)
 })

packages/theme/src/checkbox/index.less

@@ -44,16 +44,6 @@
     transition:
       border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
       background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
-
-    svg {
-      width: var(--tv-Checkbox-svg-width);
-      height: var(--tv-Checkbox-svg-height);
-      fill: var(--tv-Checkbox-icon-color);
-    }
-
-    svg.icon-check:hover {
-      fill: var(--tv-Checkbox-icon-color-hover);
-    }
   }
 
   &.is-filter {
@@ -98,39 +88,11 @@
     line-height: 1;
     cursor: pointer;
 
-    &.is-checked,
-    &.is-indeterminate {
-      .@{checkbox-prefix-cls}__inner {
-        svg {
-          fill: var(--tv-Checkbox-icon-selected);
-        }
-      }
-    }
-
     &.is-disabled {
       & + span.@{checkbox-prefix-cls}__label {
         color: var(--tv-Checkbox-label-text-color-disabled);
         cursor: not-allowed;
       }
-
-      .@{checkbox-prefix-cls}__inner {
-        svg {
-          fill: var(--tv-Checkbox-icon-selected-disabled);
-          cursor: not-allowed;
-        }
-
-        svg:hover {
-          fill: var(--tv-Checkbox-icon-selected-disabled);
-        }
-      }
-
-      &:not(.is-checked):not(.is-indeterminate) {
-        svg {
-          > path:first-child {
-            fill: var(--tv-Checkbox-bg-color-disabled);
-          }
-        }
-      }
     }
   }
 
@@ -186,4 +148,53 @@
       padding: 0;
     }
   }
+
+  &__input {
+    .@{checkbox-prefix-cls}__inner{
+      svg {
+        font-size: var(--tv-Checkbox-svg-size);
+      }
+      .icon-checked-sur,.icon-halfselect {
+        path:first-child {
+          fill: var(--tv-Checkbox-bg-color-active);
+        }
+        path:last-child {
+          fill: var(--tv-Checkbox-border-color-inverse);
+        }
+      }
+      .icon-not-check {
+        path:first-child {
+          fill: transparent;
+        }
+        path:last-child {
+          fill: var(--tv-Checkbox-unchecked-border-color);
+        }
+      }
+      .icon-not-check:hover {
+        path:last-child {
+          fill: var(--tv-Checkbox-unchecked-border-color-hover);
+        }
+      }
+    }
+  }
+  &__input.is-disabled {
+    .@{checkbox-prefix-cls}__inner{
+      .icon-checked-sur,.icon-halfselect{
+        path:first-child {
+          fill: var(--tv-Checkbox-checked-disabled-bg-color);
+        }
+        path:last-child {
+          fill: #FFFFFF;
+        }
+      }
+      .icon-not-check {
+        path:first-child {
+          fill: var(--tv-Checkbox-bg-color-disabled);
+        }
+        path:last-child {
+          fill: var(--tv-Checkbox-checked-disabled-border-color);
+        }
+      }
+    }
+  }
 }

packages/theme/src/checkbox/vars.less

@@ -11,18 +11,8 @@
 */
 
 .inject-Checkbox-vars() {
-  // 复选框内部svg宽度
-  --tv-Checkbox-svg-width: var(--tv-icon-size);
-  // 复选框内部svg高度
-  --tv-Checkbox-svg-height: var(--tv-icon-size);
-  // 复选框svg颜色
-  --tv-Checkbox-icon-color: var(--tv-color-border);
-  // 复选框svg悬浮颜色
-  --tv-Checkbox-icon-color-hover: var(--tv-color-border-hover);
-  // 复选框选中svg颜色
-  --tv-Checkbox-icon-selected: var(--tv-color-bg-active-control);
-  // 复选框选中svg禁用颜色
-  --tv-Checkbox-icon-selected-disabled: var(--tv-color-bg-disabled-control-checked);
+  // 复选框内部svg尺寸
+  --tv-Checkbox-svg-size: var(--tv-icon-size);
   // 默认复选框未选中禁用背景色
   --tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
   // 默认复选框文本色
@@ -45,4 +35,16 @@
   --tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled);
   // 复选框过滤器模式底色
   --tv-Checkbox-bg-color-filter: var(--tv-color-bg-gray-2);
+  // 复选框全选半选选中背景色
+  --tv-Checkbox-bg-color-active: var(--tv-color-bg-active-control);
+  // 复选框全选半选选中边框色
+  --tv-Checkbox-border-color-inverse: var(--tv-color-text-inverse);
+  // 复选框未选边框色
+  --tv-Checkbox-unchecked-border-color: var(--tv-color-border);
+  // 复选框未选边框hover色
+  --tv-Checkbox-unchecked-border-color-hover: var(--tv-color-border-active);
+  // 复选框选中禁用背景色
+  --tv-Checkbox-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled);
+  // 复选框选中禁用边框色
+  --tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive)
 }

packages/vue/src/checkbox/src/pc.vue

@@ -70,7 +70,7 @@
       <span class="tiny-checkbox__inner">
         <icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="tiny-svg-size icon-halfselect" />
         <icon-checked-sur v-else-if="state.isChecked" class="tiny-svg-size icon-checked-sur" />
-        <icon-check v-else class="tiny-svg-size icon-check" />
+        <icon-not-check v-else class="tiny-svg-size icon-not-check" />
       </span>
     </span>
     <span
@@ -118,7 +118,7 @@ export default defineComponent({
   components: {
     IconHalfselect: iconHalfselect(),
     IconCheckedSur: iconCheckedSur(),
-    IconCheck: iconCheck()
+    IconNotCheck: iconCheck()
   },
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as ICheckboxApi