Colors

Color utilities take a palette name and an optional shade. Single-token aliases (white, transparent, current) skip the shade.

Pattern

chai-bg-{color}      → background-color
chai-text-{color}    → color
chai-border-{color}  → border-color

Examples

<div class="chai-bg-red-500">red 500 background</div>
<div class="chai-bg-chai-700 chai-text-cream-50">brand on cream</div>
<div class="chai-text-cardamom">cardamom text (DEFAULT shade)</div>
<div class="chai-border chai-border-saffron-300">saffron border</div>
<div class="chai-bg-[#ffeedd] chai-text-[#1a1a1a]">arbitrary hex</div>
<div class="chai-bg-[rgb(0_128_255)]">arbitrary rgb (use _ for spaces)</div>

Single-token aliases

Token	Value
transparent	transparent
current	currentColor
inherit	inherit
black	#000000
white	#ffffff

Brand palette

A tea-house set, every palette has shades 50 → 900 plus a DEFAULT.

Token	DEFAULT	Vibe
chai	#6f3d1a	Steeped tea, primary
saffron	#d4751a	Warm accent
cream	#f4ede0	Paper canvas
cardamom	#5c7a3a	Cool herbal accent
masala	#a14d2c	Earthy alt accent

Standard palettes

slate · gray · zinc · red · orange · amber · yellow · lime · green · emerald · teal · cyan · sky · blue · indigo · violet · purple · pink · rose.

Each has shades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<div class="chai-bg-slate-50">…</div>
<div class="chai-bg-emerald-600">…</div>
<div class="chai-bg-rose-300">…</div>

Arbitrary values

For one-off colors, brackets:

<div class="chai-bg-[#ffeedd]">…</div>
<div class="chai-text-[hsl(20_80%_40%)]">…</div>
<div class="chai-border-[var(--brand)]">…</div>

The text-{val} parser is sensitive to format — values starting with #, rgb, hsl, or var( resolve to color; otherwise they resolve to font-size. To force color, use a known function name.

Custom palette

Add or override colors via the theme:

new Chai({
  theme: {
    colors: { ...theme.colors, brand: '#ff6633' }
  }
});

<div class="chai-bg-brand">my brand</div>