CSS - @font-palette-values

The @font-palette-values rule in CSS is helpful in customization of font-palette default values, that are created by the font-maker. A font-palette is helpful in specifying palette contained in a font.

Syntax

@font-palette-values = 
  @font-palette-values  <dashed-ident> { <declaration-list> }

<dashed-ident> used in the syntax above is a user defined identifier, which appears to be a CSS custom property. It behaves differently and is not wrapped in a CSS var() function.

Example

Here is an example for the @font-palette-values at-rule.

<html>
<head> 
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   p {
      font-family: "Bungee Spice";
      font-size: 2rem;
   }
   @font-palette-values --sample-palette {
      font-family: "Bungee Spice";
      override-colors:
      0 #111,
      1 yellow;
   }
   .sample-color {
      font-palette: --sample-palette;
   }
</style>
</head>
<body>
   <p>Default Color Palette</p>
   <p class="sample-color">@font-palette-values Color Palette</p>
</body>
</html>

In the above example:

an external google font has been imported.
an identifier by the name --sample-palette for @font-palette-values is declared.
a class by the name .sample-color is declared with font-palette --sample-palette is passed, which applies the color palette to the text in p element.

Descriptors or related properties

The table given below lists all the descriptors related to @font-palette-values:

Descriptor / Property	Description
font-family	Determines the name of the font-family that the palette will be applied to.
base-palette	Determines the name or index of the base-palette, developed by the font-maker.
override-colors	Determines the colors in the base-palette to be overriden.