Re: [csswg-drafts] Allow specifying the "accent color" of a form control element (#5187)

Ok, as I [mentioned](https://github.com/w3c/csswg-drafts/issues/5187#issuecomment-665323663), I've been working on putting together a more "elaborate" description of this feature, with more details about each control. In the process, and through some very helpful input from @heycam, I ended up changing from "foreground" and "background" to "contrasting" and "primary", respectively.

Please see the new proposal, here:

https://github.com/mfreed7/accent-color/blob/master/proposal.md

The document contains proposed spec text, along with non-normative descriptions of each control. The idea here is that we can discuss and iterate on these descriptions ahead of time, avoiding the "first mover" problem discussed above. I've attempted to write this up in as complete a way as possible, because the concern before was that there would not be a way to properly specify this feature. Having said that, the above link **should be treated very much as a draft**, and I would love to hear your comments and feedback. Those can be left as comments in this issue thread, or as issues against my repo, whichever is easiest for you.

Please see the doc above for full details, but just for ease-of-digestion, here is a copy of the proposed spec text:

# Proposed Spec Text

<pre>
<b>Name</b>: ‘accent-color’
<b>Value</b>: &lt;color>+
<b>Initial</b>: 'auto'
<b>Applies to</b>: form control elements
<b>Inherited</b>: yes
<b>Percentages</b>: N/A
<b>Computed value</b>: computed color, see resolving color values
<b>Canonical order</b>: per grammar
<b>Animation type</b>: by computed value type

The ‘accent-color' CSS property sets the color of the “accent” parts or pieces of
form control elements. The first provided &lt;color> value is to be used for
"primary" accent elements. If a second &lt;color> value is provided, that color
should be used for "contrasting" accent elements.  The third and subsequent
colors are only used on some form control elements in some cases, for additional
"accent" parts other than "primary" or "contrasting".

If any color is not provided, or if 'auto' is provided for any color value, then
the UA should attempt to select an appropriate color which offers good contrast
and visibility when paired with remaining provided colors, if any. In selecting
'auto' colors, if the operating system provides an “Accent Color” or similar user
setting, the UA is encouraged to respect that setting as much as possible. The UA
may use a similar, though not identical, color in some cases, for example to
enhance contrast or accessibility.

In limited circumstances, it is permissable for user agents to render the accent
parts of some controls using different colors than those specified by
'accent-color', for example to maintain design guidelines or accessibility
constraints. In those cases, the rendered color should be influenced as much as
possible by the specified 'accent-color'. For example, the UA may wish to only
render the checkbox glyph in either white or black; in this case, the selection
of white or black should depend on the 'accent-color' value, e.g. using the
luminosity of the provided color.

Not all form elements contain “accent” parts, and not all user agents use the same
“accent” parts in exactly the same way for the same form control. However, the
intention is that if the same or similar accent parts exist on a given form
element, it should be associated with the "primary" or "contrasting" colors in the
same way across user agents. This is important to ensure good interop of the
'accent-color' property. For that reason, there is a table of form elements
provided below, which serves as guidance on the various accent parts for each
control. While the table is not normative, it is intended to provide some
alignment and uniformity of implementation across user agents.

The <b>text content</b> of form control elements is explicitly <b>not</b> included in the set
of “accent” parts, as text content is already controlled by the <a href="https://drafts.csswg.org/css-color/#the-color-property">'color'</a> property.
In addition, the <a href="https://drafts.csswg.org/css-backgrounds-3/#background-color">'background-color'</a> property is often used to control the
rendering for some background parts of form controls - those parts are similarly
not included in the set of "accent" parts that are subject to control via the
`accent-color` property.
</pre>


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


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

Received on Friday, 31 July 2020 23:17:37 UTC