Maintenance: Improve field checkbox color contrast when active.

zammad · May 17, 2024 · 05e949d · 05e949d
1 parent 7710cc0
commit 05e949d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/app/frontend/apps/desktop/form/theme/global/getCoreDesktopClasses.ts b/app/frontend/apps/desktop/form/theme/global/getCoreDesktopClasses.ts
@@ -67,7 +67,7 @@ export const getCoreDesktopClasses: FormThemeExtension = (
       input:
         'peer appearance-none focus:outline-none focus:ring-0 focus:ring-offset-0',
       decorator:
-        'w-3 h-3 relative border peer-hover:border-blue-600 dark:peer-hover:border-blue-900 peer-focus:border-blue-800 peer-focus:outline peer-focus:outline-1 peer-focus:outline-offset-1 peer-focus:outline-blue-800 rounded-sm bg-transparent peer-hover:text-blue-600 dark:peer-hover:text-blue-900 peer-focus:text-blue-800',
+        'w-3 h-3 relative border peer-hover:border-blue-600 dark:peer-hover:border-blue-900 peer-focus:border-blue-800 peer-focus:outline peer-focus:outline-1 peer-focus:outline-offset-1 peer-focus:outline-blue-800 rounded-sm bg-transparent peer-hover:text-blue-600 dark:peer-hover:text-blue-900 peer-focus:text-blue-800 formkit-checked:peer-hover:border-blue-600 dark:formkit-checked:peer-hover:border-blue-900 formkit-checked:peer-focus:border-blue-800 formkit-checked:peer-focus:outline-blue-800 formkit-checked:peer-hover:text-blue-600 dark:formkit-checked:peer-hover:text-blue-900 formkit-checked:peer-focus:text-blue-800',
       decoratorIcon:
         'absolute invisible formkit-is-checked:visible -top-px ltr:-left-px rtl:-right-px',
     },

diff --git a/app/frontend/shared/components/Form/fields/FieldCheckbox/index.ts b/app/frontend/shared/components/Form/fields/FieldCheckbox/index.ts
@@ -32,10 +32,10 @@ const handleAlternativeBorder = (node: FormKitNode) => {
   const setClasses = (alternativeBorder: boolean) => {
     if (alternativeBorder) {
       props.decoratorClass =
-        'border-gray-300 dark:border-neutral-400 text-gray-300 dark:text-neutral-400'
+        'border-stone-200 dark:border-neutral-500 text-stone-200 dark:text-neutral-500 formkit-checked:border-gray-300 dark:formkit-checked:border-neutral-400 formkit-checked:text-gray-300 dark:formkit-checked:text-neutral-400'
     } else {
       props.decoratorClass =
-        'border-stone-200 dark:border-neutral-500 text-stone-200 dark:text-neutral-500'
+        'border-stone-200 dark:border-neutral-500 text-stone-200 dark:text-neutral-500 formkit-checked:border-gray-100 dark:formkit-checked:border-neutral-400 formkit-checked:text-gray-100 dark:formkit-checked:text-neutral-400'
     }
   }