CSS @font-palette-values - base-palette

The base-palette descriptor of @font-palette-values at-rule in CSS is helpful in specifying the name of or index of a palette that is pre-defined and which can be used for creating a new palette. In case the specified base-palette does not exist, the palette defined at index 0 will be applied.

Using a zero-based index of the font-maker created palettes, the base-palette descriptor is specified.

Possible Values

The base-palette descriptor of @font-palette-values at-rule in CSS contains the following value:

  • <index>: Index of the pre-defined palette to be used.

Syntax

base-palette = light | dark | <integer>

The above syntax will look like this:

@font-palette-values --sample {
    base-palette: 1;
}

CSS base-palette - Different Palette Values

Following example demonstrates the use of base-palette descriptor of @font-palette-values at-rule, where same font-family is used with @font-face at-rule as well.

<html>
<head> 
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   @font-face {
      font-family: "RocherColorGX";
      src: url(RocherColorGX.ttf);
   }

   body {
      font-family: "RocherColorGX";
   }

   @font-palette-values --blues {
      font-family: "RocherColorGX";
      base-palette: 7;
   }
   
   @font-palette-values --yellow {
      font-family: "RocherColorGX";
      base-palette: 5;
   }

   .seven {
      font-palette: --blues;
   }

   .five {
      font-palette: --yellow;
   }
</style>
</head>
<body>
   <h1 class="seven">base-palette: 7</h1>
   <h1 class="five">base-palette: 5</h1>
   <h1>default base-palette</h1>
</body>
</html>
Advertisements