@font-palette-values CSS At-Rule

Description

The CSS @font-palette-values at-rule allows you to customize the default values of a font's palette. A font palette is a collection of colors that can be used to apply color variations to a font. This can be useful for creating more visually interesting and dynamic text, or for matching the colors of your font to the overall design of your website.

To use the @font-palette-values at-rule, you first need to specify the name of the font's palette. You can do this by using the font-palette property on a CSS element. Once you have specified the font palette, you can then use the @font-palette-values at-rule to override the default values for any of the colors in the palette.

The @font-palette-values at-rule takes two arguments: the name of the color to override, and the new value for the color. The color name can be any of the following:
  - primary
  - secondary
  - tertiary
  - accent
  - light
  - dark

The new value for the color can be any valid CSS color value, such as a hex code, RGB value, or HSL value.

Syntax

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

Values

<dashed-ident>Is a user defined identifier, that while it looks like a CSS custom property behaves in a different way and is not wrapped in a CSS var() function.

Example

/* Specify the font palette */

.my-element {

  font-palette: my-palette;

}



/* Override the default value for the primary color */

@font-palette-values my-palette {

  primary: #ff0000;

}