Colors

colors.less

Petal offers shades of the 3 colors from the Shakr color scheme as globally usable LESS variables: @red, @green, @blue. Append -l1, -l2 for lighter shades, -d1, -d2 for darker shades.

There are also some preset classes where you can quickly add text and background color properties.


Text colors

Text
.text-red-l2

Text
.text-red-l1

Text
.text-red

Text
.text-red-d1

Text
.text-red-d2

BG colors

Text
.bg-green-l2

Text
.bg-green-l1

Text
.bg-green

Text
.bg-green-d1

Text
.bg-green-d2

Also, blue

Text
.bg-blue-l2

Text
.bg-blue-l1

Text
.bg-blue

Text
.bg-blue-d1

Text
.bg-blue-d2


Adding more colors

To add custom colors, add them as variables at the bottom of color-palette.less file and you'll be able to use them for customizing your own build of Petal.

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

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 the color-palette.less change the value of @primary-accent-color to your desired color to apply the main color change to all elements.