From 4fa2edbc5c1d372eb28eccead69a6a75264c631c Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Tue, 16 Dec 2025 13:22:19 +0100
Subject: [PATCH] Make disabled checkboxes match overall style (#5869)

---
 web/src/components/atomic/Button.vue   | 4 ++--
 web/src/components/form/Checkbox.vue   | 2 +-
 web/src/components/form/RadioField.vue | 8 +++++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index 1f76d6a598..253b194948 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -2,9 +2,9 @@
   <component
     :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
-    class="border-wp-background-400 dark:border-wp-background-100 relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
+    class="border-wp-control-neutral-200 relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
     :class="{
-      'border-wp-control-neutral-300 dark:border-wp-background-100 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
+      'border-wp-control-neutral-200 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
         color === 'gray',
       'border-wp-control-ok-300 bg-wp-control-ok-100 hover:bg-wp-control-ok-200 text-white': color === 'green',
       'border-wp-control-info-300 bg-wp-control-info-100 hover:bg-wp-control-info-200 text-white': color === 'blue',
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index 05b5b5d837..cc3afa6364 100644
--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@@ -3,7 +3,7 @@
     <input
       :id="`checkbox-${id}`"
       type="checkbox"
-      class="checkbox border-wp-control-neutral-200 disabled:border-wp-control-neutral-200 disabled:bg-wp-control-neutral-300 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
+      class="checkbox border-wp-control-neutral-200 disabled:border-wp-control-neutral-200 disabled:bg-wp-control-neutral-100 dark:disabled:bg-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
       :checked="innerValue"
       :disabled="disabled || false"
       @click="innerValue = !innerValue"
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index c12854e0b6..49a5906236 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -3,9 +3,10 @@
     <input
       :id="`radio-${id}-${option.value}`"
       type="radio"
-      class="radio border-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
+      class="radio border-wp-control-neutral-200 disabled:border-wp-control-neutral-200 disabled:bg-wp-control-neutral-100 dark:disabled:bg-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
       :value="option.value"
       :checked="innerValue?.includes(option.value)"
+      :disabled="disabled || false"
       @click="innerValue = option.value"
     />
     <div class="ml-4 flex flex-col">
@@ -23,6 +24,7 @@ import type { RadioOption } from './form.types';
 const props = defineProps<{
   modelValue: string;
   options: RadioOption[];
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -66,6 +68,10 @@ const id = (Math.random() + 1).toString(36).substring(7);
   opacity: 0;
 }
 
+.radio:disabled::before {
+  border-color: var(--wp-text-alt-100);
+}
+
 .radio:checked::before {
   opacity: 1;
 }