Colors

All Mainsail spec color classes are available.

Background Colors

Applies Mainsail color to background background-color: css property.

Uses the syntax bg-<color>-<variant>.

bg-blue-primary

bg-blue-light

bg-blue-middle

bg-blue-dark

bg-green-light

bg-green-middle

bg-green-dark

bg-violet-light

bg-violet-middle

bg-violet-dark

bg-orange-light

bg-orange-middle

bg-orange-dark

bg-red-light

bg-red-middle

bg-red-dark

bg-pink-light

bg-pink-middle

bg-pink-dark

bg-neutral-1

bg-neutral-2

bg-neutral-3

bg-neutral-4

bg-neutral-5

bg-neutral-6

bg-white

Text Colors

Apply Mainsail color to text color: css property.

Uses the syntax text-<color>-<variant>.

text-blue-primary

text-blue-light

text-blue-middle

text-blue-dark

text-green-light

text-green-middle

text-green-dark

text-violet-light

text-violet-middle

text-violet-dark

text-orange-light

text-orange-middle

text-orange-dark

text-red-light

text-red-middle

text-red-dark

text-pink-light

text-pink-middle

text-pink-dark

text-neutral-1

text-neutral-2

text-neutral-3

text-neutral-4

text-neutral-5

text-neutral-6

text-white

Border Colors

Apply Mainsail border and color to text color: css property.

Uses the syntax text-<color>-<variant>.

border-blue-primary

border-blue-light

border-blue-middle

border-blue-dark

border-green-light

border-green-middle

border-green-dark

border-violet-light

border-violet-middle

border-violet-dark

border-orange-light

border-orange-middle

border-orange-dark

border-red-light

border-red-middle

border-red-dark

border-pink-light

border-pink-middle

border-pink-dark

border-neutral-1

border-neutral-2

border-neutral-3

border-neutral-4

border-neutral-5

border-neutral-6