[csswg-drafts] [css-fonts] Proposal: Animating font-palette (#8922)

tursunova has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-fonts] Proposal: Animating font-palette ==
### Overview

We propose the animation of font-palette property. Currently [CSS Fonts 4 spec](https://drafts.csswg.org/css-fonts/#font-palette-prop) defines the animation behaviour of this property as discrete, which is insufficient to achieve a smooth transition between two selected palettes. 

For motivation, examples and more information, see [Explainer: Animating font-palette](https://docs.google.com/document/d/1XMTrKH003KBOes6hxzI-3E7LTwp5YwFC-rnzoFpFrfw/edit?usp=sharing).

### Proposal

The [font-palette property accepts](https://drafts.csswg.org/css-fonts/#font-palette-prop) either `@font-palette-values` identifier or keyword. Currently there are no [existing animation types](https://www.w3.org/TR/web-animations/#animation-type) to represent animation of font-palette property. For this we propose the following modifications to the font-palette property specification:

```
Value:          normal | light | dark | <palette-identifier> | <palette-mix()>
Animation type:  by mix value
```

### Animation type:   by mix value

Since there are no [existing animation types](https://www.w3.org/TR/web-animations/#animation-type) to represent the interpolated value of font-palette property at the specific time, we propose the animation type “by mix value”. For that, we introduce a new font-palette function `palette-mix()` to be accepted by the font-palette property. Function `palette-mix()` is used to represent the interpolated value of font-palette property during transition / animation progress. 

### Mixing Palettes: the ‘palette-mix()’ Function

This function, modeled after the [color-mix() function](https://drafts.csswg.org/css-color-5/#color-mix), takes two `<font-palette>` specifications and returns the result of mixing them, performing the interpolation in a given [<color-interpolation-method>](https://drafts.csswg.org/css-color-5/#color-interpolation-method), by a specified amount:

```
palette-mix() = palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier>] && <percentage [0,100]>? ]#{2})
```

Percentages not adding up to 100% follow the  rules for [percentage normalization of the color-mix function](https://drafts.csswg.org/css-color-5/#color-mix-percent-norm).

### Palette interpolation
A font-palette property interpolates by interpolating each color from the palette the same way it is done for other color properties, [see section 12 Color Interpolation of ](https://drafts.csswg.org/css-color-4/#interpolation)CSS Color Level 4:

> “Interpolation between <color> values occurs by first converting them to a given color space which will be referred to as the interpolation color space below, and then linearly interpolating each component of the computed value of the color separately.”

But since there is no way for the user to specify which color spaces should be used for interpolation, so Oklab should be used as default interpolation color space for interpolating colors in the palette, [as recommend in section 12.1 Color Space for Interpolation of CSS Color Level 4](https://www.w3.org/TR/css-color-4/#interpolation:~:text=If%20the%20host%20syntax%20does%20not%20define%20what%20color%20space%20interpolation%20should%20take%20place%20in%2C%20it%20defaults%20to%20Oklab).

We propose font-palette to not be additive since it was [recently resolved](https://github.com/w3c/csswg-drafts/commit/327110f01b36c79c4d04f55d8fa30898e8d2cae0) that “The `<color>` type is not additive.”, compare [section 8.1.1. Combination of <color> of CSS Color Level 4](https://drafts.csswg.org/css-values-4/#combine-colors). That means in additive animations, animation-composition would always have a replacement behavior. For more information see [Explainer: Animating font-palette](https://docs.google.com/document/d/1XMTrKH003KBOes6hxzI-3E7LTwp5YwFC-rnzoFpFrfw/edit?usp=sharing) subsection “Combination of palettes”.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8922 using your GitHub account


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

Received on Tuesday, 6 June 2023 16:15:52 UTC