[css-fonts] Should font-palette: normal look at the color-scheme property?

[emilio]

https://drafts.csswg.org/css-fonts/#font-palette-prop has normal / light / dark variants.

The normal description says that UAs should take the color property value into account to choose a dark palette. But these days we also have the color-scheme property, which seems like a stronger hint? It'd be nice if color-scheme worked nicely with this.

cc @jfkthame

[emilio]

cc @drott @litherum @svgeesus, I wonder if you have opinions here. I don't feel strongly either way.

[drott]

First part, responding to one part of your comment:

The spec takes into account the color property, but that only indirectly has something to do with color scheme:

User-agents should take the computed value of the color property into consideration when a color font format requires use of the foreground color.

The color property is taken into account for the 0xFFFF-indexed color references in the font (the font can use indexes into the CPAL table, or a special value 0xFFFF for an application specific foreground color). In other words, a COLRv0 or COLRv1 font can use the surrounding foreground color to color the glyph. If the color property changes due dark mode, then this is reflected in the foreground colored glyphs in the font.

The second part:

It'd be nice if color-scheme worked nicely with this.

The spec has an example:

@media (prefers-color-scheme: dark) {  .banner {font-palette: dark;
  }
}

Are you looking for a tighter integration with color-scheme than via media queries? Are you suggesting, the color-scheme: property should automatically affect the font-palette property somehow?

[jfkthame]

Possible approach: define a font-palette: auto value, which automatically takes account of the color-scheme and uses the appropriate light or dark palette (if present).

Perhaps that should even be the initial value, or the behavior of normal?

Alternatively, it is of course possible to use media queries. But font-palette: auto seems like a much more convenient tool for authors.

[svgeesus]

@jfkthame that seems reasonable to me, what do others think.

[emilio]

Are you looking for a tighter integration with color-scheme than via media queries? Are you suggesting, the color-scheme: property should automatically affect the font-palette property somehow?

Yes, that's how the color-scheme property works. E.g,:

:root { color-scheme: light dark }

Means that all elements on the page will have light / dark colors based on user preference. But the font-pallete won't change, afaict. Or I guess it'd change by virtue of color-scheme being dark, in which case the text color will be light... But still color-scheme: dark seems like a stronger signal than text color.

[svgeesus]

So currently we have

normal
User-Agents display the color font with the default palette or default glyph colorisation. User-agents should take the computed value of the color property into consideration when a color font format requires use of the foreground color

Which explicitly selects the default palette, and only uses the value of color to affect a specific palette entry. Would something like this work?

normal
If the color-scheme property is set to a value other than normal, user-agents should select the first light or dark palette as appropriate. Otherwise, user-agents display the color font with the default palette or default glyph colorisation.

User-agents should take the computed value of the color property into consideration when a color font format requires use of the foreground color

It isn't clear to me exactly how <custom-ident> should be handled.

[jfkthame]

normal
If the color-scheme property is set to a value other than normal, user-agents should select the first light or dark palette as appropriate. Otherwise, user-agents display the color font with the default palette or default glyph colorisation.

User-agents should take the computed value of the color property into consideration when a color font format requires use of the foreground color

That seems reasonable to me.

It isn't clear to me exactly how <custom-ident> should be handled.

I don't think it needs any change here, does it? The author is providing a specific custom palette, so that's what should be used. If they want different custom palettes depending on the color scheme, they can still use a media query.

[svgeesus]

Okay I added the suggested wording in 1f87712

@emilio does that satisfy your issue?

[emilio]

Yeah, looks good. Should probably have a test for that tho.