Swap out Hover

[N00nDay]

The Hover animation is a bit jarring and is not customizable by developers. This should be swapped out and replaced with a tailwind hover: class so it can be easily overriden.

[chbert]

@N00nDay Before I get too much into it, do you mean just like this? https://github.com/chbert/stwui/commit/4b5f5e13e344a90bb543b227428831778323e9e6

[N00nDay]

Yes, but I would like to provide a basic default class of hover:bg-... (not sure what color at this point as I haven't given this much thought yet) to take its place. You will also notice there is a group class on the parent. In most cases, this can be removed as long as there is no underlying group-... class. <HoverBackground /> used group to function.

[chbert]

Would one approach be to give every component a [light|dark]-{component}-background-[hover] entry here? https://github.com/N00nDay/stwui/blob/14d16bdbb1ee2d2d45177fa83b80b7c476c95ec7/src/lib/plugin/index.js#L756

Additionally, a [light|dark]-background-[hover] entry that could be used as a default value for components where it makes sense (not sure yet if all components should have the same though?).

It might give flexibility in the future, also when it comes to theming. But honestly. just some first thoughts :-).

Will continue play around with stwui first.

[N00nDay]

You could try bg-light-icon and bg-dark-icon. If it looks good roll with it. You could always look at what bg color is being used on the HoverBackground component and use that.

[N00nDay]

Looks like <HoverBackground /> is using bg-light-icon-background-hover dark:bg-dark-icon-background-hover. So it is probably best to add hover:bg-light-icon-background-hover dark:hover:bg-dark-icon-background-hover to get the same color and ensure there is a transition-all or transition-color on the component you are adding it to.

[chbert]

@N00nDay yes, still a bit unsure about using "bg-light-icon-" :-)

[N00nDay]

Looks like you already have it on the Component shown above https://github.com/chbert/stwui/commit/4b5f5e13e344a90bb543b227428831778323e9e6

Are you saying it just doesn't look good?

[chbert]

Sorry, I wasn't clear in my message, it's not about the looks, but about the naming. I'm not sure why the color should not have a dedicated name instead of reusing the -icon- one. Or maybe I misunderstand the naming here?

[N00nDay]

I am fine with a dedicated name it will just be duplicated which makes sense in this context. I was more telling you what background colors were being utilized in the <HoverBackground />. Unfortunately, I did not do the best at naming conventions and they could be cleaned up to make it easier to contribute. I tend to reuse code rather than type more LOL.

[chbert]

That's also where I'm thinking back and forth atm: reusable vs specific :-D

[N00nDay]

I would say create a new color in the tailwind.config.cjs. My vote would be light-hover & dark-hover and copy the colors from light-icon-background-hover & dark-icon-background-hover respectfully.

This is scratching the surface at the larger issue of theming that needs to be addressed. Eventually we will be taking the styles from the components and baking them into the tailwind.config.cjs and utilizing CSS variables to set those colors ie --hover-background. It will make development easier on our end as we will not have to account for dark: on every class, there is a color being utilized and it will make it easier for end users to override these as they can simply change --hover-background in their CSS file to change it in all of their components. This is a long-term goal as it will take a lot of time to flesh this out and finish it.