Re: [csswg-drafts] [css-color] Add a function to allow authors to specify colors reacting to `color-scheme` (#7561)

The CSS Working Group just discussed ``[css-color] Add a function to allow authors to specify colors reacting to `color-scheme` ``, and agreed to the following:

* `RESOLVED: Add light-dark() fuction that returns a color based on the color scheme.`

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> emilio: discussed briefly in F2F<br>
&lt;fantasai> emilio: Tab's proposal about having a variable-like thing ...<br>
&lt;fantasai> emilio: I'm not sure this is ready for resolution. I added Agenda+ F2F and we didn't remove.<br>
&lt;fantasai> TabAtkins: I'm happy to discuss my proposal. Two things to consider<br>
&lt;fantasai> TabAtkins: The first and easiest one is, just having a color function that responds to color scheme<br>
&lt;fantasai> TabAtkins: this doesn't require anything fancy<br>
&lt;fantasai> TabAtkins: Proposed syntax is ...<br>
&lt;TabAtkins> color-scheme( &lt;color>#{2} | [ &lt;custom-ident> &lt;color> ]#{2,} )<br>
&lt;fantasai> TabAtkins: You can either provide two colors<br>
&lt;fantasai> TabAtkins: or provide color scheme ident and color pairs<br>
&lt;fantasai> TabAtkins: This matches behavior of existing function that browsers have access to<br>
&lt;fantasai> TabAtkins: I know that Chrome and Firefox have something like a light-dark() function<br>
&lt;fantasai> TabAtkins: it's simply a color, goes where colors go, responds to color scheme<br>
&lt;fantasai> TabAtkins: other one is if you want to do other stuff, e.g. turn shadows on<br>
&lt;fantasai> TabAtkins: and that requires var-like semantics<br>
&lt;fantasai> TabAtkins: but simple color one will solve a majority of cases we care about here and be very simple<br>
&lt;fantasai> fantasai: If you only spec 2 colors, and we later introduce a new color scheme, what happens?<br>
&lt;emilio> fantasai: If you only specify two colors and then we add a third color-scheme, then what?<br>
&lt;fantasai> TabAtkins: suggest to default to "light"<br>
&lt;fantasai> TabAtkins: same issue applies with the list option<br>
&lt;fantasai> TabAtkins: in that case, maybe choose first one. or maybe choose "light" if specified<br>
&lt;Rossen_> q?<br>
&lt;Rossen_> ack fantasai<br>
&lt;emilio> fantasai: one of the nice things about ??? is that it makes very explicit what goes where<br>
&lt;emilio> ... like minmax() in grid<br>
&lt;emilio> ... so I understand that at some point for more schemes we want to tag individual values<br>
&lt;TabAtkins> s/???/chrome's internal function/<br>
&lt;emilio> ... but currently we just have light and dark<br>
&lt;emilio> ... I think it's a lot better to have light-dark like chrome has<br>
&lt;bramus> q+<br>
&lt;TabAtkins> q+<br>
&lt;emilio> ... at some point in the future that could become effectively syntactic sugar for a more-comprehensive function<br>
&lt;emilio> ... but even if we have that we could have a light-dark() since that's the more common thing<br>
&lt;Rossen_> ack bramus<br>
&lt;fantasai> bramus: I want to support what fantasai said, start with light-dark() and have it be syntactic sugar for color-scheme() or whatever in the future<br>
&lt;TabAtkins> I'm fine with `light-dark()` even if we have more schemes in the future, it's still a reasonable name.<br>
&lt;fantasai> bramus: Internally Chromium had light-dark-color(), but then changed to light-dark() which allowed using in properties other than colors<br>
&lt;Rossen_> ack TabAtkins<br>
&lt;fantasai> TabAtkins: I'm fine with light-dark() as a name. That's still fine if/when we do define more color schemes<br>
&lt;fantasai> TabAtkins: For having a second function that has var-like semantics, but can do anything ...<br>
&lt;Rossen_> q?<br>
&lt;fantasai> TabAtkins: makes sense to me, but that should be a separate thing so that we have a well-defined &lt;color> that can be accepted in places that accetp colors<br>
&lt;fantasai> +!<br>
&lt;fantasai> +1<br>
&lt;fantasai> emilio: Shoudl we resolve on light-dark-color() and potentially extend to more color schemes or value types in the future?<br>
&lt;emilio> I'd go just for light-dark() as a name fwiw<br>
&lt;emilio> but light-dark-color() wfm<br>
&lt;fantasai> Rossen_: Proposed resolution is to add a light-dark() or light-dark-color() color ... extend for other color schemes later<br>
&lt;TabAtkins> light-dark-value() for the "anything" one?<br>
&lt;fantasai> dholbert: if we do want to add an additional function name, light-dark() sounds like a more generic thing<br>
&lt;fantasai> dholbert: so might want to use light-dark-color() for the color-specific thing<br>
&lt;fantasai> dholbert: but that's just naming thing<br>
&lt;Rossen_> ack fantasai<br>
&lt;emilio> fantasai: thought about what dholbert just said, but the color is going to be by far the most commonly used thing<br>
&lt;emilio> ... so might make sense to have light-dark() for color and something longer for the value syntax<br>
&lt;emilio> dholbert: makes sense<br>
&lt;emilio> fantasai: poll on the name?<br>
&lt;fantasai> Rossen_: Let's pick one and discuss in the issue.<br>
&lt;TabAtkins> (and note proposals to, say, name nth-value() to grab an arbitrary value from the list. "value" as an indicator of arbitrary, var-like behavior is somewhat leaned toward as a pattern.)<br>
&lt;TabAtkins> 1) light-dark-color()<br>
&lt;fantasai> POLL: 1) light-dark-color 2) light-dark<br>
&lt;TabAtkins> 2) light-dark()<br>
&lt;fantasai> 2<br>
&lt;emilio> 2<br>
&lt;TabAtkins> 2<br>
&lt;bramus> 1<br>
&lt;miriam> either<br>
&lt;dholbert> 2, per fantasai's note on making-the-common-thing-easy<br>
&lt;rachelandrew> 2<br>
&lt;oriol> abstain<br>
&lt;masonf> 2<br>
&lt;bramus> q+<br>
&lt;fantasai> bramus: What about schemed-color() etc.? Would we then have schemed-color() map to light-dark() and schemed-value() to light-dark-value() ?<br>
&lt;fantasai> TabAtkins: more color schemes in the future, but light-dark is just for these schemes<br>
&lt;Rossen_> ack bramus<br>
&lt;fantasai> bramus: returns a color?<br>
&lt;fantasai> TabAtkins: yes. If we want value, we can use light-dark-value()<br>
&lt;fantasai> RESOLVED: Add light-dark() fuction that returns a color based on the color scheme.<br>
&lt;fantasai> s/fuction/function/<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7561#issuecomment-1671786293 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 9 August 2023 16:47:58 UTC