Add support for inverse style

[hadley]

options(crayon.enabled = TRUE)
fansi::sgr_to_html(cli::style_inverse("x"))
#> <ansi_string>
#> [1] <span style=''>x</span>

^{Created on 2021-04-20 by the reprex package (v2.0.0)}

[brodieG]

Do you know of an easy set of CSS styles that achieves this (swap background-color and color)?

IIRC I did not implement this because there did not seem to be simple ways to achieve it. There are ways of inverting colors, but that will only achieve the effect here if the starting colors for foreground and background are the inverse of each other.

We could just literally flip the prevailing foreground and background colors, but that will not do anything for the case where neither is explicitly set. If I ever implement classes it could manifest as an extra span with an invert class with the user responsible for specifying the style sheet that worked with that.

[hadley]

I thought you'd be able to use the invert transform (e.g. https://jsfiddle.net/hx75r0v6/3/), but unfortunately that only applies to element content, not background. And it doesn't seem like backdrop-filter (which applies only to the background) is supported in many browsers. Maybe this is something that can only be done in conjunction with #65.

[brodieG]

Yes, and note that the solution above only works if the foreground and background colors are inverse of each other to begin with. You can see what happens when they are not, even ignoring the fact that the background flip doesn't work in e.g. Chrome.

[brodieG]

Since I don't have a good way to implement this via CSS I'm closing the issue. Note that so long as both foreground and background colors are explicitly specified the inversion will work (by explicitly switching foreground and background styles).