From 157a5c3776b379c1d74f2242781759a8102e6eb3 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 3 Mar 2025 04:30:41 -0800
Subject: [PATCH 1/4] feat(checkbox): [checkbox] Component dark theme
 adaptation

---
 packages/theme/src/checkbox/index.less | 88 +++++++++++++++-----------
 packages/theme/src/checkbox/vars.less  | 20 +++---
 packages/vue/src/checkbox/src/pc.vue   |  2 +-
 3 files changed, 63 insertions(+), 47 deletions(-)

diff --git a/packages/theme/src/checkbox/index.less b/packages/theme/src/checkbox/index.less
index 7b7a5d688f..0222f3f878 100644
--- a/packages/theme/src/checkbox/index.less
+++ b/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,54 @@
       padding: 0;
     }
   }
+
+  &__input {
+    .@{checkbox-prefix-cls}__inner{
+      svg {
+        width: var(--tv-Checkbox-svg-width);
+        height: var(--tv-Checkbox-svg-height);
+      }
+      .icon-checked-sur,.icon-halfselect {
+        path:first-child {
+          fill: var(--tv-Checkbox-bg-active-color);
+        }
+        path:last-child {
+          fill: var(--tv-Checkbox-border-color-inverse);
+        }
+      }
+      .icon-not-check {
+        path:first-child {
+          fill: rgba(255,255,255,0.02);
+        }
+        path:last-child {
+          fill: var(--tv-Checkbox-unchecked-border-color);
+        }
+      }
+      .icon-not-check:hover {
+        path:last-child {
+          fill: var(--tv-Checkbox-unchecked-border-hover-color);
+        }
+      }
+    }
+  }
+  &__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-Checkout-checked-disabled-border-color);
+        }
+      }
+    }
+  }
 }
diff --git a/packages/theme/src/checkbox/vars.less b/packages/theme/src/checkbox/vars.less
index 9ce04c4965..e345e33a3b 100644
--- a/packages/theme/src/checkbox/vars.less
+++ b/packages/theme/src/checkbox/vars.less
@@ -15,14 +15,6 @@
   --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);
   // 默认复选框未选中禁用背景色
   --tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
   // 默认复选框文本色
@@ -45,4 +37,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-active-color: 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);
+  // 复选框未选边框色
+  --tv-Checkbox-unchecked-border-hover-color: var(--tv-color-border-active);
+  // 复选框选中禁用背景色
+  --tv-Checkbox-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled);
+  // 复选框选中禁用边框色
+  --tv-Checkout-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive)
 }
diff --git a/packages/vue/src/checkbox/src/pc.vue b/packages/vue/src/checkbox/src/pc.vue
index 5e1be73d0e..640a89d735 100644
--- a/packages/vue/src/checkbox/src/pc.vue
+++ b/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-check v-else class="tiny-svg-size icon-not-check" />
       </span>
     </span>
     <span

From b8341b48670412e72b908ce18b3d2582cb05a7c8 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 3 Mar 2025 04:49:34 -0800
Subject: [PATCH 2/4] feat(checkbox): [checkbox] Revise inspection comments

---
 packages/theme/src/checkbox/index.less | 2 +-
 packages/theme/src/checkbox/vars.less  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/theme/src/checkbox/index.less b/packages/theme/src/checkbox/index.less
index 0222f3f878..b246b265a3 100644
--- a/packages/theme/src/checkbox/index.less
+++ b/packages/theme/src/checkbox/index.less
@@ -193,7 +193,7 @@
           fill: var(--tv-Checkbox-bg-color-disabled);
         }
         path:last-child {
-          fill: var(--tv-Checkout-checked-disabled-border-color);
+          fill: var(--tv-Checkbox-checked-disabled-border-color);
         }
       }
     }
diff --git a/packages/theme/src/checkbox/vars.less b/packages/theme/src/checkbox/vars.less
index e345e33a3b..65aa2ab921 100644
--- a/packages/theme/src/checkbox/vars.less
+++ b/packages/theme/src/checkbox/vars.less
@@ -48,5 +48,5 @@
   // 复选框选中禁用背景色
   --tv-Checkbox-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled);
   // 复选框选中禁用边框色
-  --tv-Checkout-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive)
+  --tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive)
 }

From b43df41454d7855663a8d11c33e5809bdd9bb93a Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 3 Mar 2025 17:42:12 -0800
Subject: [PATCH 3/4] feat(checkbox): [checkbox] Modify test cases

---
 examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts b/examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts
index 9b0e57f0b3..635438bdaa 100644
--- a/examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts
+++ b/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/)
 })

From c1129169cc66211530771afa40cefe4d76032d17 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 3 Mar 2025 18:50:24 -0800
Subject: [PATCH 4/4] feat(checkbox): [checkbox] Modify test cases

---
 packages/theme/src/checkbox/index.less |  9 ++++-----
 packages/theme/src/checkbox/vars.less  | 14 ++++++--------
 packages/vue/src/checkbox/src/pc.vue   |  4 ++--
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/theme/src/checkbox/index.less b/packages/theme/src/checkbox/index.less
index b246b265a3..aa8d89ced5 100644
--- a/packages/theme/src/checkbox/index.less
+++ b/packages/theme/src/checkbox/index.less
@@ -152,12 +152,11 @@
   &__input {
     .@{checkbox-prefix-cls}__inner{
       svg {
-        width: var(--tv-Checkbox-svg-width);
-        height: var(--tv-Checkbox-svg-height);
+        font-size: var(--tv-Checkbox-svg-size);
       }
       .icon-checked-sur,.icon-halfselect {
         path:first-child {
-          fill: var(--tv-Checkbox-bg-active-color);
+          fill: var(--tv-Checkbox-bg-color-active);
         }
         path:last-child {
           fill: var(--tv-Checkbox-border-color-inverse);
@@ -165,7 +164,7 @@
       }
       .icon-not-check {
         path:first-child {
-          fill: rgba(255,255,255,0.02);
+          fill: transparent;
         }
         path:last-child {
           fill: var(--tv-Checkbox-unchecked-border-color);
@@ -173,7 +172,7 @@
       }
       .icon-not-check:hover {
         path:last-child {
-          fill: var(--tv-Checkbox-unchecked-border-hover-color);
+          fill: var(--tv-Checkbox-unchecked-border-color-hover);
         }
       }
     }
diff --git a/packages/theme/src/checkbox/vars.less b/packages/theme/src/checkbox/vars.less
index 65aa2ab921..09d595fad7 100644
--- a/packages/theme/src/checkbox/vars.less
+++ b/packages/theme/src/checkbox/vars.less
@@ -11,10 +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-svg-size: var(--tv-icon-size);
   // 默认复选框未选中禁用背景色
   --tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
   // 默认复选框文本色
@@ -38,13 +36,13 @@
   // 复选框过滤器模式底色
   --tv-Checkbox-bg-color-filter: var(--tv-color-bg-gray-2);
   // 复选框全选半选选中背景色
-  --tv-Checkbox-bg-active-color: var(--tv-color-bg-active-control);
+  --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);
   // 复选框未选边框色
-  --tv-Checkbox-unchecked-border-hover-color: var(--tv-color-border-active);
+  --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);
   // 复选框选中禁用边框色
diff --git a/packages/vue/src/checkbox/src/pc.vue b/packages/vue/src/checkbox/src/pc.vue
index 640a89d735..d9c081ebe8 100644
--- a/packages/vue/src/checkbox/src/pc.vue
+++ b/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-not-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