Skip to main content

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Colors

--boodoo-primary #7c3aed
secondary #5b21e6
success #1c9e50
info #0ea5e9
warning #f59e0b
danger #e11d48
accent #f43f5e
dark #17135f

Text colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-muted

.text-body

.text-emphasis

.text-white

Grays

A Foundation-inspired neutral scale via .text-gray-{100..900} / .bg-gray-{100..900}.

gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

Opacity

Use .text-opacity-{10|25|50|75|100} for text alphras on a primary-tinged color.

CSS variables

Every color is exposed as a CSS custom property: --boodoo-primary, --boodoo-primary-rgb, --boodoo-gray-100, etc. Use them anywhere in your own CSS.