Clarity: 2.0 CSS Epic (Theming)

[hippee-lee]

This is an epic to collect all css related issues and enhancements targeted for 2.0

[TheAifam5]

Use CSS3 vars :D Would be nice to have to make theming easier.

[mathisscott]

@TheAifam5
We would love to use CSS variables! Sadly, IE11 support is a requirement for us. And CSS variables will not work in IE11. We are investigating our options. In the meantime, maybe you could start a campaign to get large companies to drop IE11 support? 😊

[TheAifam5]

@mathisscott hmm yea, but the other option could be using JS to "apply" overrides on top of the current loaded styles , but I don't know how fast and efficient that could be.

[hippee-lee]

@TheAifam5 - I've done some research into this and really like the custom properties a.k.a css variables approach for several reasons.

1. Custom properties would keep theming similar to how themes are now but allow Clarity consumers to over ride just the custom properties that they want to
2. Custom properties open the door to a generalized tool or service that allows JS to "apply" overrides for Clarity on multiple levels like: a single attribute, a set of attributes, a single component or globally which would keep the service opt-in and only as heavy as the consumer needs it to be
3. Custom properties would support both ways for theming: via css overrides in the consumer app and during runtime with JS

I _think_ we can accomplish something like this with postcss-custom-properties and my initial tests look promising. The challenge is that Clarity scss is organized around the components even though it rolls everything up into the one css file during build time and the easy example that I was testing with seemed to have difficulty with the way Clarity component variables are implemented. (it seemed like a scoping issue when I was testing the plugin)

That said, if you have some ideas for the JS to "apply" overrides let me know ... I'm happy to discuss it further. We ❤️ any help folks have to give for things like this.

[sdurnov]

This is what came from the top of my head:

• It would be nice to have bootstrap 4 spacing classes to use in html, but to have them customized for Clarity spacing values, like you did with grid classes
• It would be helpful to improve default spacing/sizing, or separate styling for certain elements into 2 or more classes, depending on a use-case. For example, even in your documentation website code you do often override default margins for headers and other text elements, and some patterns could be extracted from this. This will allow writing less css code and have more professionally-looking apps without chaining every developer, QA specialist and business manager to his personal UI designer. I know that ideally you should do full UX first, but in real life this is not always possible. So, having some safer and more appropriate "defaults" would be a great help.
• Outline/document some built-in layout classes like content-container/area, so devs would be aware and encouraged to use them in their components.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.