bonsai.css
bonsai.css copied to clipboard
--text-c on other elements
Hey @ciar4n and @C-Lodder,
you can currently set the heading (h1-h6) color with the color class helpers (.white, .blue etc.), but not on other elements. What do you think about extending the list slightly with some inline elements?
At least for me span / b / i
and maybe code / mark
could make sense, for example <span class="green">Green Text</span>
span, i, /*..*/ {
color: var(--text-c, inherit);
}
Or how about another class combination like (.accent.primary) for text color (.color.primary)?
Thank you!
Initially, I wanted to avoid having too many variables however in hindsight this is possibly unavoidable. How would you feel about applying color with the following (currently will not work on all elements)...
Inline with...
<span style="--text-c: var(--custom)">Sample</span>
Or at a stylesheet level to all elements with...
span {
--text-c: var(--custom);
}
Yep, first one is what I currently go for.
Imho you maybe should remove the possibility for heading colors for consistency though than (e.g. <h1 class="green">..</h1>
). There should be one preferred way to do things and not multiple (imo - that's why I raised the question).