From 0b7b74e8268a8edd378caccb9aae4781e1cc289c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 1 Jul 2024 17:55:17 +0800
Subject: [PATCH] fix: resolve styling issue for checkbox when disabled (#6240)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.17.x

#### What this PR does / why we need it:

修复 FormKit 中当 checkbox 为 disabled 时的样式问题。

before:

<img width="550" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/65e8e750-6663-4e14-9f7f-5102e8412675">

after:

<img width="540" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/2b55dcb4-b71a-45bf-8eae-17c490168bc6">

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 ui/src/formkit/theme.ts    | 2 +-
 ui/src/styles/tailwind.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/formkit/theme.ts b/ui/src/formkit/theme.ts
index 52dfba5de..499ae0231 100644
--- a/ui/src/formkit/theme.ts
+++ b/ui/src/formkit/theme.ts
@@ -29,7 +29,7 @@ const theme: Record<string, Record<string, string>> = {
   global: {
     form: "divide-y divide-gray-100",
     outer:
-      "formkit-disabled:opacity-50 py-4 first:pt-0 last:pb-0 transition-all",
+      "formkit-disabled:opacity-70 formkit-disabled:cursor-not-allowed formkit-disabled:pointer-events-none py-4 first:pt-0 last:pb-0 transition-all",
     help: "text-xs mt-2 text-gray-500",
     messages: "list-none p-0 mt-1.5 mb-0 transition-all",
     message: "text-red-500 mt-2 text-xs",
diff --git a/ui/src/styles/tailwind.css b/ui/src/styles/tailwind.css
index 360a0cec8..46cdac3bf 100644
--- a/ui/src/styles/tailwind.css
+++ b/ui/src/styles/tailwind.css
@@ -22,5 +22,5 @@ textarea {
 }
 
 input[type="checkbox"] {
-  @apply rounded-sm border-gray-500 disabled:bg-gray-200 disabled:opacity-50;
+  @apply rounded-sm border-gray-500 disabled:cursor-not-allowed disabled:border-gray-400 disabled:opacity-50 disabled:checked:border-none;
 }