Baroquest
Framework

Palette

SOURCE: css/palette.css

Palette is a color scheme library that uses CSS variables that can be used in conjunction with a class.

There are five variables per palette class, so the CSS structure for a color scheme looks like:

.palette-class{
--primary
--secondary
--tertiary
--accent
--other
}

These variables can be used to specify a color for anything within that class. Within the theme.css file, we could do something like this:

.palette-class{
color: var(--primary);
background-color: var(--secondary);
}
.palette-class a:link {color: var(--accent);}

Palette Classes

.default

--primary
--secondary
--tertiary
--accent
--other

.allure

--primary
--secondary
--tertiary
--accent
--other

.balanced

--primary
--secondary
--tertiary
--accent
--other

.bradley

--primary
--secondary
--tertiary
--accent
--other

.chilled

--primary
--secondary
--tertiary
--accent
--other

.dark-fantasy

--primary
--secondary
--tertiary
--accent
--other

.dusk

--primary
--secondary
--tertiary
--accent
--other

.elegance

--primary
--secondary
--tertiary
--accent
--other

.essence

--primary
--secondary
--tertiary
--accent
--other

.fresh

--primary
--secondary
--tertiary
--accent
--other

.golden

--primary
--secondary
--tertiary
--accent
--other

.gothic-rose

--primary
--secondary
--tertiary
--accent
--other

.haunted

--primary
--secondary
--tertiary
--accent
--other

.inspire

--primary
--secondary
--tertiary
--accent
--other

.luxury

--primary
--secondary
--tertiary
--accent
--other

.medley

--primary
--secondary
--tertiary
--accent
--other

.mystery

--primary
--secondary
--tertiary
--accent
--other

.neutral

--primary
--secondary
--tertiary
--accent
--other

.nudist

--primary
--secondary
--tertiary
--accent
--other

.organic

--primary
--secondary
--tertiary
--accent
--other

.plentiful

--primary
--secondary
--tertiary
--accent
--other

.regal

--primary
--secondary
--tertiary
--accent
--other

.rustic

--primary
--secondary
--tertiary
--accent
--other

.sensual

--primary
--secondary
--tertiary
--accent
--other

.sophisticated

--primary
--secondary
--tertiary
--accent
--other

.spicy

--primary
--secondary
--tertiary
--accent
--other

.valentine

--primary
--secondary
--tertiary
--accent
--other

Text & Background Color

Text Color

We can easily apply colors to text by applying any of the following classes:
.color-p - primary color
.color-s - secondary color
.color-t - tertiary color
.color-a - accent color
.color-o - other color

Example: .valentine.color-t

This text uses the tertiary color under the Valentine color scheme.

Background Color

We can also apply background colors by adding any of the following classes:
.color-bg-p - primary color
.color-bg-s - secondary color
.color-bg-t - tertiary color
.color-bg-a - accent color
.color-bg-o - other color

Example: .valentine.color-bg-p.color-s

This box uses the primary background color and secondary text color under the Valentine scheme.

Font-Palette

Although somewhat rarely used on the web, there are some fonts that include built-in color palettes. CSS has a way to override the palette values, using the font-palette property.

Check out this useful article on working with this property.

BaroquestFramework