In addition to all the globally usable LESS variables of color shades provided by Petal, you can also use some preset classes where you can quickly add text and background color properties.

Shade suffixes range from l1 to l6 (light), d1 to d6 (dark).

Adding more colors

To add custom colors, define them as variables in your variables sheet and you'll be able to use them throughout for customizing your own build of Petal.

// my custom colors
@purple: #c37dc4;
@orange: #f1a85b;
@teal: #21c5c7;

Generating custom color preset classes

After you have added your own colors, if you want to generate new preset utility classes with your colors, add them to the @preset-colors variable. Separate color names with commas.

@preset-colors: red, green, blue, orange, teal;

Then in the compiled result, you'll see the classes have been generated as such:

.text-orange { color: #f1a85b; }
.text-orange-l1 { color: #f5c088; }
.text-orange-l2 { color: #f9d7b3; }
.text-orange-d1 { color: #d59450; }
.text-orange-d2 { color: #b78045; }
.bg-orange { background-color: #f1a85b; }
.bg-orange-l1 { background-color: #f5c088; }
.bg-orange-l2 { background-color: #f9d7b3; }
.bg-orange-d1 { background-color: #d59450; }
.bg-orange-d2 { background-color: #b78045; }
...

Setting your own primary accent color

Many parts of Petal refer to the @primary-accent-color variable to use as the base color of things. By default the primary accent color is set to @blue, which means buttons, form input borders, checkboxes will all use the blue color as the common color.

After adding your own color to your variables sheet, change the value of @primary-accent-color to your desired color to apply the main color change to all elements.