Thank you Jeremy! The team absolutely crushed it with this feature.
HMM. Not that I can think of though I the CSS vars are available in custom code so you could combine the the two... ie get the maintainability of vars and consistency through the UI and extra functionality in code
all custom selectors are waiting for a ui to be able to add them, then it would be possible to use any of them
but with variables, you basically set the variable on the parent, then on children you decide where you want to use it
so hard to imagine a practical use case where you need to select the child from the parent
these selectors are gneerally ok on the same instance, but when it comes to selecting oother elements, same with just nested selectors .a .b etc it tends to break abstractions
With variables, the logic is this:
- you hover a card, card sets variables that communicate it's own state
- children have ability to change their own styles according to that state.
instead of
- you hover the card, card decides to set styles on child elements.
- children don't know anything about the styles being set from above, children can set styles that are incompatible with those changes
This is a broken abstraction on principle
Here's what I was trying to do.
article.one
article.two
article.three
Each article has children with different highlight colors (I was able to do this easily with vars while maintaining the same structure & tokens).
I've staggered the article content so the 2nth would be reversed. I added a token of "reverse" onto it manually. I was wondering if there was a way to do that without adding a token... I think I have an idea how to do it now that I'm writing it out...
are you talking about a hypothetical list that is made of dozens of items where you can't set it manually?
in that case I would use a collection, data and expression
so items come from an array
each item is just one item tempalte
ideally you would be using a binding in the style panel for this to set the expression
That sounds exactly what I'd want to do. I'm unsure on how to implement the "binding in the style panel" though.
but since there are right now no bindings on the style panel, I would set a data attribute conditionally, then use html embed and use an expression to set the style on that element using attribute selector
to keep the styyles all in the style panel, I would create html ebmed with style like thiat:
[data-something=123] {
--my-variable: 123;
}
ah.. Ok, I get that. Makes sense.
so basically you would use attribute binding to set the css variable
would be much more straight forward with bindings on styles directly
"right now no bindings on the style panel" does this mean that's in the plans for the future?
data will be bindable everywhere
from properties, to page settings and style panel
I mean its already in all properties and page settings, style panel is the last piece
we do our best to not suck at this π
Thanks for the ideas/assist.