The theme

The theme is a plain object that supplies named values to rules: color names, font sizes, weights, radii, shadows. Every default is replaceable.

The default theme

{
  colors:     { /* 21 palettes × 10 shades, plus single-token aliases */ },
  fontSize:   { xs:'12px', sm:'14px', base:'16px', md:'16px', lg:'18px',
                xl:'20px', '2xl':'24px', /* …up to 9xl */ },
  fontWeight: { thin:'100', extralight:'200', light:'300', normal:'400',
                medium:'500', semibold:'600', bold:'700', extrabold:'800', black:'900' },
  radius:     { none:'0px', sm:'2px', DEFAULT:'4px', md:'6px', lg:'8px',
                xl:'12px', '2xl':'16px', '3xl':'24px', full:'9999px' },
  shadow:     { none:'none', sm:'…', DEFAULT:'…', md:'…', lg:'…', xl:'…',
                '2xl':'…', inner:'…' }
}

You can read it at runtime:

import { theme } from 'chaitailwind';
console.log(theme.colors.chai); // → { 50: …, 600: '#6f3d1a', DEFAULT: '#6f3d1a', … }

Overriding

new Chai({ theme: { … } }) performs a shallow merge with the defaults. To replace one palette, pass it inline:

new Chai({
  theme: {
    colors: {
      ...theme.colors,
      brand: {
        50: '#fff5e6', 100: '#ffe1b8', /* … */ 900: '#311c07',
        DEFAULT: '#d4751a'
      }
    }
  }
});

The shallow merge replaces colors wholesale, so spread the existing palette if you want to keep it.

The brand palette

chaiTailwind ships with a tea-house brand set in addition to the standard Tailwind-style palettes:

Token	DEFAULT	Purpose
chai	#6f3d1a	Steeped tea — the primary ink.
saffron	#d4751a	Warm accent.
cream	#f4ede0	Paper / canvas.
cardamom	#5c7a3a	Cool accent.
masala	#a14d2c	Earthy alt accent.

Each comes with the full 50…900 shade ramp:

<div class="chai-bg-chai-50">very light</div>
<div class="chai-bg-chai-600">primary</div>
<div class="chai-text-saffron">accent text</div>

Use them, replace them, ignore them — they’re just defaults.

Single-token aliases

A handful of color tokens are flat strings rather than ramps:

transparent  →  transparent
current      →  currentColor
inherit      →  inherit
black        →  #000000
white        →  #ffffff

These work without a shade suffix: chai-bg-transparent, chai-text-current.

Adding new keys

Rules consult the theme by name, so adding a new key in fontSize, radius, shadow, etc. immediately makes it usable:

new Chai({
  theme: {
    fontSize: { ...theme.fontSize, hero: '120px' },
    shadow:   { ...theme.shadow, soft: '0 30px 60px -20px rgba(0,0,0,0.15)' }
  }
});

<h1 class="chai-text-hero">Big.</h1>
<div class="chai-shadow-soft">…</div>