bonsai.css icon indicating copy to clipboard operation
bonsai.css copied to clipboard

--text-c on other elements

Open yvesh opened this issue 4 years ago • 2 comments

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!

yvesh avatar Oct 16 '20 17:10 yvesh

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);
}

ciar4n avatar Oct 17 '20 10:10 ciar4n

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).

yvesh avatar Oct 23 '20 06:10 yvesh