Summary
Bricks currently generates utility classes for custom colors (e.g. .bg-color-secondary), which is a great workflow addition. However, these classes only cover the default state. It would be a valuable improvement to also generate hover variants, so interactive hover styles can be applied directly via utility classes without writing custom CSS.
Desired Behavior
For every color utility class Bricks generates, it should also output a corresponding hover variant:
.hover\:bg-color-secondary:hover {
background-color: var(--secondary);
}
This would allow .hover:bg-color-secondary to be applied directly in the class field on any element.
Example Output
/* Default (already exists) */
.bg-color-secondary {
background-color: var(--secondary);
}
/* Proposed hover variant */
.hover\:bg-color-secondary:hover {
background-color: var(--secondary);
}