Fixed checkmark on checkbox and tweaked hover/focus states checkbox and radio

Author: kevindierkx

resources/views/components/checkbox.blade.php

@@ -23,7 +23,16 @@
                 'size-4 appearance-none rounded relative focus:ring-0 focus:ring-offset-0',
                 'text-[var(--primary)] bg-[var(--input)] border border-[var(--border)]',
                 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--primary)]',
-                'before:absolute before:inset-1 before:rounded-sm before:bg-[var(--background)] checked:border-[var(--primary)] checked:bg-[var(--primary)] [&:not(:checked)]:before:hidden',
+
+                'before:absolute before:inset-1 before:-translate-x-0.25 before:translate-y-0.125 before:hidden',
+                'before:w-2 before:h-1 before:-rotate-45 before:border-l-2 before:border-b-2',
+                'before:border-[var(--foreground)]',
+
+                'hover:before:block focus-visible:before:block checked:before:block',
+
+                'checked:border-[var(--primary)] checked:bg-none checked:bg-[var(--primary)]',
+                'checked:before:border-[var(--primary-foreground)]',
+
                 'disabled:opacity-50'
             ]) }} />
         <span class="ml-2 font-medium">{{ $label }}</span>

resources/views/components/radio.blade.php

@@ -23,7 +23,15 @@
                 'size-4 appearance-none rounded-full relative focus:ring-0 focus:ring-offset-0',
                 'text-[var(--primary)] bg-[var(--input)] border border-[var(--border)]',
                 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--primary)]',
-                'before:absolute before:inset-1 before:rounded-full before:bg-[var(--background)] checked:border-[var(--primary)] checked:bg-[var(--primary)] [&:not(:checked)]:before:hidden',
+
+                'before:absolute before:inset-1 before:rounded-full before:hidden',
+                'before:bg-[var(--foreground)]',
+
+                'hover:before:block focus-visible:before:block checked:before:block',
+
+                'checked:border-[var(--primary)] checked:bg-none checked:bg-[var(--primary)]',
+                'checked:before:bg-[var(--primary-foreground)]',
+
                 'disabled:opacity-50'
             ]) }}/>