Art-direction element for color palettes

[bennypowers]

In the #1772 Logo-wall PR, we have this pattern (abbreviated here):

<div class="logo-wall">
  <a href="#">
    <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
    <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
  </a>
</div>

<style>
[color-palette^="dark"] .logo-wall--light {
  display: none;
}

[color-palette^="light"] .logo-wall--dark {
  display: none;
}
</style>

We've discussed the notion that it's best to avoid [color-palette=...] rules in the past at office hours, in discussion threads, in pr reviews, and elsewhere. In that spirit, and on the heels of @diwanshi's suggestion that <picture> would be useful for logowall, if only we could use style queries with it, we might consider adding an art-direction utility element.

With such an element, we could reduce the above example to HTML-only:

<div class="logo-wall">
  <a href="#">
    <rh-picture>
      <source srcset="../google-cloud-dark.svg" color-theme="dark"></source>
      <img src="../google-cloud.svg" alt="Logo for Red Hat partner Google Cloud">
    <rh-picture>
  </a>
</div>

[bennypowers]

See Red Hat Design System (view)

[marionnegp]

I think <rh-picture> could be helpful for images that users might want to expand using a FAB too.