[csswg-drafts] [css-color-4] Add `currentBackgroundColor` Variable (#5292)

una has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-4] Add `currentBackgroundColor` Variable ==
## What
`currentBackgroundColor`(or `currentBackground`) would be a variable similar to `currentColor`, the difference being that `currentBackground` is based on the background color rather than the (text) color of the element.

## Use Cases

When used with [CSS color functions](https://www.w3.org/TR/css-color-5/), `currentBackground` enables dynamic styling based on the block of color which is predominant in the element.

### Borders and Hover Effects

Currently, a popular pattern is to use the currentColor variable for an outline or border on a link or button. Sometimes, this is then swapped on hover. The effect is limited using `currentColor`. Another note is that the color options for foregrounds are often more limited with accessibility being a primary concern. currentBackground enables more subtle dynamic borders without sacrificing accessibility.

![Screen Shot 2020-07-01 at 12 56 02 PM](https://user-images.githubusercontent.com/1693164/86640891-b3318780-bfa8-11ea-8521-12d22e2883f7.png)
https://codepen.io/una/pen/BajmGwZ

### Setting Foreground Color
`currentBackground` also affords us more flexibility with hover/focus effects, and even allows us to set `currentColor` in a dynamic way. This is also a continuation of the last example where we use currentColor for the borders in the example on the left, while the right example has two different values, despite setting color using currentBackground.

![Screen Shot 2020-07-01 at 1 06 00 PM](https://user-images.githubusercontent.com/1693164/86640958-c17fa380-bfa8-11ea-9369-c8214a3bfdeb.png)
https://codepen.io/una/pen/xxZPQYv

### Setting Shadow Colors
With the neumorphism web trend, we’re seeing a lot more subtle shadows and “gummy” buttons. Using `currentBackground` to set the shadow color can help create this effect dynamically:

![Screen Shot 2020-07-01 at 1 15 48 PM](https://user-images.githubusercontent.com/1693164/86641076-dc521800-bfa8-11ea-983b-040395179c2f.png)
https://codepen.io/una/pen/mdVqQGR

This would also help with neon effects, translucent effects, and more simply: more subtle shadows.

This was originally brought up in #364 a few years ago, but with CSS color functions there is so much more opportunity to have a background color variable!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5292 using your GitHub account

Received on Monday, 6 July 2020 20:55:11 UTC