Browse Source

Maintenance: Improve field checkbox color contrast when active.

Dusan Vuckovic 10 months ago
parent
commit
05e949dffe

+ 1 - 1
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',
     },

+ 2 - 2
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'
     }
   }