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, 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.