base-palette
The base-palette
CSS descriptor is used to specify the name or index of a pre-defined palette to be used for creating a new palette. If the specified base-palette
does not exist, then the palette defined at index 0 will be used.
Syntax
css
@font-palette-values --one {
base-palette: 1;
}
The base-palette
descriptor is specified using a zero-based index of the font-maker created palettes.
Values
<index>
-
Specifies the index of the pre-defined palette to use.
Formal definition
Related at-rule | @font-palette-values |
---|---|
Initial value | n/a (required) |
Computed value | as specified |
Formal syntax
base-palette =
light |
dark |
<integer [0,∞]>
Examples
Changing the default palette in a font
Using the Rocher Color Font, this example shows two instances of switching the default palette in the font to an alternate palette created by the font-maker.
HTML
html
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
CSS
css
@font-face {
font-family: "Rocher";
src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
font-family: "Rocher";
}
@font-palette-values --two {
font-family: "Rocher";
base-palette: 2;
}
@font-palette-values --five {
font-family: "Rocher";
base-palette: 5;
}
.two {
font-palette: --two;
}
.five {
font-palette: --five;
}
Result
Specifications
Specification |
---|
CSS Fonts Module Level 4 # base-palette-desc |
Browser compatibility
BCD tables only load in the browser
See also
@font-palette-values
font-family
descriptoroverride-colors
descriptorfont-palette
propertyCSSFontPaletteValuesRule.basePalette