Skip to main content

Color Utils

Single-purpose, consistent, and predictable classes for styling/modifying an element's color.

Text Colors​

Syntax: text-[color]-[tone]

.text-primary-[200, 300, 400, 600] { ... }
.text-accent-[200, 300, 400, 600] { ... }
.text-surface-[200, 300, 400, 600] { ... }
.text-error-[200, 300, 400, 600] { ... }

Background Colors​

Syntax: bg-[color]-[tone]

.bg-primary-[200, 300, 400, 600] { ... }
.bg-accent-[200, 300, 400, 600] { ... }
.bg-surface-[200, 300, 400, 600] { ... }
.bg-error-[200, 300, 400, 600] { ... }
.bg-primary-alpha-[200, 300, 400, 600] { ... }
.bg-accent-alpha-[200, 300, 400, 600] { ... }
.bg-surface-alpha-[200, 300, 400, 600] { ... }
.bg-error-alpha[200, 300, 400, 600] { ... }

Border Colors​

Syntax: border-[color]-[tone]

.border-primary-[200, 300, 400, 600] { ... }
.border-accent-[200, 300, 400, 600] { ... }
.border-surface-[200, 300, 400, 600] { ... }
.border-error-[200, 300, 400, 600] { ... }