Examples of more complex conditional styling / your favorite code for referrence

[Hahlh]

Hey there!

The title says it all.
The React example in the README is already great, but isn't very complex in terms of conditional logic.

Do you personally have some code that you like to use as a referrence / that you learned a lot from?
What are your personal best practices for complex use cases?

As an example: A buy button that has several color schemes each with different hover and addedToCart states, should change it's sizing completely if used in different places, ....
Would you go for an object with the 6 color schemes and then somehow nest the conditional logic within the different styles? Would you separate size, layout and color classNames?

What do you think about adding additional examples to the repo in general?

[muhammadsammy]

Thank you for the suggestion!
Indeed adding more complex examples is a great idea. Maybe by adding some code snippets or a full working example repo or both.

For the button with multiple sizes and schemes, it depends. I would separate them by what feels easier to understand rather than using conditionals that take longer time to "get".

e.g I would separate them by colorschemes classnames composed into variables, and then nest them into a base button classnames and export more general usages from these.

// base button styles that does not include the color schemes or sizes
const baseStyles = classnames();

// color scheme stylings/classnames
const dangerButtonStyles = classnames("bg-red-500", "hover:bg-red-300", "focus:bg-red-700");
const primaryButtonStyles = .........
..........

// sizing
const smallSizeButtonStyles = classnames("p-2",...);
const normalSizeButtonStyles = classnames("p-4",...);
const largeSizeButtonStyles = classnames("p-8",...);

// Now we could mix and match between these styles as we like
const largeDangerButton = classnames(baseStyles, dangerButtonStyles, largeSizeButtonStyles); 
const normalPrimaryButton = classnames(baseStyles, primaryButtonStyles, normalSizeButtonStyles); 

depending on your use case, it would be more complex of course

[dawidseipold]

How would you go about creating something like this:

I have two example classes:

export const small = classnames(fontSize('text-sm'));
export const large = classnames(fontSize('text-lg'));

And I want to use them depending on the CSS state (hover, md, focus, etc.)

Something like this (obviously the code below isn't correct):

export const title = ({ background }: ITitle) => classnames(typography(small, { md: large }));