It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes.
After spending a significant amount of time researching and experimenting with checkboxes in a Vue 3, Tailwind, and PUG setup, I've come to a roadblock. I want to emphasize that I aim to avoid placing any styling changes within a <style> block if possible.
I created a <template> where two custom checkboxes are rendered based on whether they are checked or unchecked. Why go through the trouble? Well, I have a design system that requires different CSS styles for hover and active states depending on the checkbox's status.
Let me provide an example scenario to clarify what I'm dealing with.
- When the checkbox is unchecked:
- The checkbox should be gray, light gray when hovered over, and somewhere between gray and light gray when activated.
- When the checkbox is checked:
- The checkbox should display as "light" dark blue, transition to "ridiculous" dark blue when hovered, and turn into "ludicrous" dark blue when activated.
Trying to achieve these various states within a single rendered checkbox option became increasingly challenging.
In the case of the checked box, while the Tailwind variant successfully applies the "light" dark blue color, any attempts to incorporate the hover and active states yield the default lighter blue from the browser's stylesheet instead of the specified dark blue.
Conversely, the unchecked box behaves as intended, showcasing the three distinct shades of gray mentioned earlier using Tailwind's hover and active pseudo-states effectively.
At this point, I feel uncertain about how to achieve the "ridiculous" dark blue and "ludicrous" dark blue colors for the hover and active states of the CHECKED box.
Below is the snippet of code I'm working with, written in PUG.
<template lang="pug">
.p-checkbox(v-if="!checked")
.flex
input(
v-model="checked"
class=[
'bg-placeholder',
'rounded-sm',
'border-2',
'border-checkbox',
'shadow-checkbox',
]
:class=`[
'hover:bg-a',
'active:bg-b',
]`
.p-checkbox(v-if="checked")
.flex
input(
v-model="checked"
type="checkbox"
class=[
'rounded-sm',
'border-2',
'shadow-checkbox',
]
:class=`[
'checked:bg-primary',
'hover:bg-primary-hover',
'active:bg-primary-active',
]`
</template>
<script>
const props = defineProps({
checked: {
type: Boolean,
default: false,
},
});
</script>