W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2020

Re: [csswg-drafts] [css-color-5] Add `currentBackgroundColor` Variable (#5292)

From: Kevin Lozandier via GitHub <sysbot+gh@w3.org>
Date: Wed, 11 Nov 2020 17:56:05 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-725570342-1605117363-sysbot+gh@w3.org>
I have an example. Suppose I wanted to create the following as a Web component (or built w/ whatever component
<img width="326" alt="Screen Shot 2020-11-11 at 9 45 04 AM" src="https://user-images.githubusercontent.com/1223224/98845536-b7f8c300-2402-11eb-841d-7fb730cd988b.png">

It'd be great to set the background as a gradient using `currentBackgroundColor` & `--some-variable` with something like
```css
:host {
  contain: content;
  box-sizing: border-box;
  border: 1px solid black;
  background: linear-gradient(to bottom currentBackgroundColor, --some-variable);
}
```
`currentBackgroundColor` would be useful to make sure the absolutely positioned image at the top of the component elegantly visually "breaks" the border.

I think for that reason it should exist in some form. I really like @LeaVerou's idea of a `current()` though when I think about it, it seems intuitive `currentBackgroundColor` exists as an out-of-the-box variable alongside `currentColor`. 

Thoughts? 


-- 
GitHub Notification of comment by lozandier
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5292#issuecomment-725570342 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 11 November 2020 17:56:07 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:22 UTC