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

Big fan of the `-internal-light-dark()` function here as well. Would make some things easier.

A few questions/remarks:

1. With the proposed `schemed-color(<custom-ident> <color>, <fallback-color>)`, how would support for multiple schemes work?

    Do you suggest to nest `schemed-color()` – e.g. `schemed-color(light red, schemed-color(dark blue, pink))` – or should we allow multiple entries by changing the syntax to `schemed-color([<custom-ident> <color>]#, <fallback-color>)`?

2. The suggested `schemed-color` only caters for colors, whereas `light-dark()` allows things other than colors. This seems pretty limiting. Can we open it up to have it return any value instead of a `<color>`? So the function would maybe become `schemed-value()`? 

    I’m not an expert on CSS syntax, but I guess the syntax would then become this: `schemed-value([<custom-ident> <declaration-value>]#, <declaration-value>)`

    _Anecdotally: The function in Chromium first was called `-internal-light-dark-color()` but then [got renamed to `-internal-light-dark()`](https://github.com/chromium/chromium/commit/42267a718b56e0da01b82c4aee8b342f24e45c1b)_

3. Maybe `light-dark()` could be kept, and become a alias _(limited to only to schemes)_ for `schemed-color`?

    Or if we should not want to pursue this, maybe we can leave it up to authors to define their own custom function once that becomes a thing?

4. With CSS Nesting – and potentially implicit `& { }` along with that – around the corner, this would become more easy for authors to do:

   1. No Nesting:

        ```css
        el {
          --img: url(/img/bg-light.png);
          background: transparent var(--img) no-repeat 0 0;
        }
    
        @media (prefers-color-scheme: dark) {
          el {
            --img: url(/img/bg-dark.png);
          }
        }
        
        @media (prefers-color-scheme: other) {
          el {
            --img: url(/img/bg-other.png);
          }
        }
        ```

    3. With nesting:

        ```css
        el {
          --img: url(/img/bg-light.png);
          background: transparent var(--img) no-repeat 0 0;
          
          @media (prefers-color-scheme: dark) {
            --img: url(/img/bg-dark.png);
          }
          
          @media (prefers-color-scheme: other) {
            --img: url(/img/bg-other.png);
          }
        }
        ```

    However, the nesting version doesn’t beat `schemed-value()` imo, so authors would still benefit from having such a function available:

      ```css
      el {
        --img: schemed-value(
          dark url(/img/bg-dark.png),
          other url(/img/bg-other.png),
          url(/img/bg-light.png)
        );
        background: transparent var(--img) no-repeat 0 0;
      }
      ```

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


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

Received on Thursday, 17 November 2022 09:51:15 UTC