Skip to content

Commit

Permalink
[css-fonts-4][editorial] reduce bikeshed whining about formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
svgeesus committed Dec 7, 2023
1 parent a61308a commit 2899d98
Showing 1 changed file with 35 additions and 35 deletions.
70 changes: 35 additions & 35 deletions css-fonts-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -2730,7 +2730,7 @@ or font format.
}
</pre>

<div class="invalid example">
<div class="invalid example" id="ex-local-no-keywords">
For example, this use of <code>local()</code> would be an error:

<pre class="lang-css">
Expand Down Expand Up @@ -7120,7 +7120,7 @@ Applies to: all elements and text
Inherited: yes
Percentages: N/a
Computed value: specified keyword, identifier or <<palette-mix()>> function.
<<palette-mix()>> must be simplified to a single keyword or identifier if resulting palette is equivalent.
<<palette-mix()>> must be simplified to a single keyword or identifier if resulting palette is equivalent.
Animation type: by computed value
</pre>

Expand Down Expand Up @@ -7226,32 +7226,32 @@ With the <code>palette-mix()</code> function defined as follows:
If no applicable ''@font-palette-values'' rule is present,
this value behaves as ''font-palette/normal''.

<<palette-identifier>> is parsed as a <<dashed-ident>>.
<<palette-identifier>> is parsed as a <<dashed-ident>>.

Note: Such a CSS-defined palette may
be a reference to an existing palette already present in the font,
be a modification of an existing palette already present in the font,
or be an entirely new palette.
Note: Such a CSS-defined palette may
be a reference to an existing palette already present in the font,
be a modification of an existing palette already present in the font,
or be an entirely new palette.

<dt><dfn type><<palette-mix()>></dfn>
<dd>
This value defines a position in the interpolation between two palette values,
identified by <<palette-identifier>>, by the palette keywords
''font-palette/normal'', ''font-palette/light'', ''font-palette/dark'',
or by another <<palette-mix()>> value.
This value defines a position in the interpolation between two palette values,
identified by <<palette-identifier>>, by the palette keywords
''font-palette/normal'', ''font-palette/light'', ''font-palette/dark'',
or by another <<palette-mix()>> value.

The glyphs of the font must be rendered with a palette that is created by
interpolating for each palette color index between the matching color indices
of the first and second palette specified as arguments,
recursively resolving <<palette-mix()>> functions if needed.
The glyphs of the font must be rendered with a palette that is created by
interpolating for each palette color index between the matching color indices
of the first and second palette specified as arguments,
recursively resolving <<palette-mix()>> functions if needed.

For each palette color, the interpolation follows
the rules of the <<color-mix()>> function.
For each palette color, the interpolation follows
the rules of the <<color-mix()>> function.

When not specified otherwise the <<color-interpolation-method>> is
<code>in ''oklab''</code> as recommended by [[css-color-5#interpolation-space]].
When not specified otherwise the <<color-interpolation-method>> is
<code>in ''oklab''</code> as recommended by [[css-color-5#interpolation-space]].

Percentages are normalized according to [[css-color-5#color-mix-percent-norm]].
Percentages are normalized according to [[css-color-5#color-mix-percent-norm]].
</dl>

<wpt>
Expand All @@ -7266,34 +7266,34 @@ Note: The names 'light' and 'dark' describe the <i>background</i> the color pale
.banner {font-palette: dark;
}
}
</pre>
</pre>
</div>

<div class="example" id="ex-bixa-palette-anim">
Animate between palettes.

<pre>
<pre>
@font-palette-values --pink {
font-family: Nabla;
base-palette: 1;
font-family: Nabla;
base-palette: 1;
}
@font-palette-values --yellow {
font-family: Nabla;
base-palette: 7;
font-family: Nabla;
base-palette: 7;
}
@keyframes animate-palette {
from {
font-palette: --yellow;
}
to {
font-palette: --pink;
}
from {
font-palette: --yellow;
}
to {
font-palette: --pink;
}
}
p {
font-family: Nabla;
animation: animate-palette 1.4s infinite alternate linear;
font-family: Nabla;
animation: animate-palette 1.4s infinite alternate linear;
}
</pre>
</pre>

<figure>
<img src="images/nabla-animated.webp" alt="The word Animate animated between a pink and a yellow palette."/>
Expand Down

0 comments on commit 2899d98

Please sign in to comment.