[css-forms-1] Styles for color input

[lukewarlow]

As currently specced the color input never renders the actual chosen color. We need to specify styles specific to the color input. This will track that.

Proposed additions

::color-swatch {
    /* Ensures contrast between chosen color and button background (which by default is transparent so the page background) */
    border: 1px solid currentColor;

    /* Gives a reasonable default size */
    inline-size: 2em; 
    block-size: 1em;

    /* Ensures it fills it's parent container */
    flex: 1; 

    /* Should this be here? It's designed to prevent forced dark mode from messing with the colour? */
    color-scheme: light only;
     
    /* Prevents forced colors mode breaking the input */
    forced-color-adjust: none;

    /* This uses a linear gradient to handle showing the alpha of the control value. */
    background: linear-gradient(control-value(<color>)),
      linear-gradient(to bottom right, black 50%, white 50%);

    box-sizing: border-box;
}

This should result in the below rendering given <input type="color" value="color(srgb 0 1 0 / 0.75)" alpha>

[svgeesus]

Can the chosen color ever be out of gamut for the chosen colorspace? If so, an out of gamut warning (like a red border) should be allowed. Otherwise, not.

[lukewarlow]

I'm defer to @annevk on that one I can't remember the details. I think no because it gets mapped.

[annevk]

https://drafts.csswg.org/css-color/#color-conversion is applied with either srgb or display-p3, but I think color(display-p3 2 2 2) is out of gamut and wouldn't go away as part of color conversion? And that can certainly be represented. Our implementation doesn't do anything special for it though, it displays as "ordinary" white.

[lukewarlow]

Do we need a new pseudo class to represent that state? Id say :out-of-range but it's not constraint validation related so probably a misuse.

[annevk]

Maybe? It feels a bit too early to design for that as it's mainly an edge case that you can only get to when the web developer sets the color themselves. Seems like something we could easily address in the future if a need arises.

[annevk]

cc @weinig @nt1m