For the new version of my UI component framework, I am asking myself "what can you control with CSS custom properties?". Colors? Sure. Button sizes? Why not? On which side of the button the tooltip should appear? Of course!
It's a long way from done and requires some JS stunts, but here's a playground preview:


Feedback welcome!

If you ask yourself why I am doing this:
I very much dislike setting presentation properties directly on a component.
The way 99% of component frameworks for vue/react/whatever work is basically
`<button color="primary" size="large" tooltip-placement="left">my button</button>`.
This means you basically need to set properties on every. single. component.
Why do that, when you have the power of the cascade and can just do
`.all-my-buttons-container { --button-color: rebeccapurple; }` ?


Previous versions of buntpapier did control color and size with stylus (css preprocessor) mixins, but those
a) needed a preprocessor
b) could only set stuff at compile time

Which was problematic for venueless, because venueless has theming defined at runtime, and CSS does not (yet) have things like `from these two foreground colors, pick the one with the best contrast for THIS background`, which is happening in js in the playground, if you change the button color to something bright.

· · Web · 0 · 0 · 0
Sign in to participate in the conversation – a Fediverse instance for & by the Chaos community