@font-palette-values CSS At-Rule

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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;

}