search

N00nDay / stwui

Opinionated yet customizable Svelte-TailwindCSS component library
stwui.vercel.app
MIT License
450 stars 21 forks source link

Allow for complete style customization #81

Closed N00nDay closed 1 year ago

N00nDay commented 1 year ago

Move as much styling out of the Tailwind plugin back into the individual component file and replace twmerge with clsx to clean up the styling logic.

N00nDay commented 1 year ago

Convert all extended themes in tw plugin to CSS variables so that developers can quickly override styles globally.

N00nDay commented 1 year ago

Move as much styling out of the Tailwind plugin back into the individual component file and replace twmerge with clsx to clean up the styling logic.

This is not a viable option for this package. As originally assumed clsx is just jamming all classes into the HTML element leaving the browser to choose which class to apply at runtime which does not allow for a consistent and dependable experience for the developer. This package will continue to utilize twmerge, however, I will be doing some cleanup for readability using some of the techniques that clsx uses.

Once twmerge usage has been cleaned up and is more readable I will move into cleaning up theme names and making them globally customizable instead of just at the component level.

N00nDay commented 1 year ago

clsx has been removed from the entire package, committed, and pending merge into the main branch.

Next step is to stop having different styling for dark/light (ie. light-border vs dark-border). Instead utilize CSS variables that shift depending on the theme selected. (ie. --light-border='#####' and --dark-border='#####') then have a single tailwind class for border that switches the CSS variable based on the theme selected. This way users can just change the --light-border and it will update for the entire application.

N00nDay commented 1 year ago

Global style changes will be a larger issue that needs to be resolved and will not be addressed in this issue.