# Baroquest
Framework

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.