⚠️ Mobile is not supported yet.

Ai2 Tokens

theme

ai2 extension tokens: tone colors (brand, success, warning, danger, info + soft pairs), surface-2/3 and motion variables. Required by every ai2 component; installed automatically as a dependency.

Provided by ai2

Open in

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://ai2.design/r/tokens.json"

Files

No files found

Styles

Light Mode

--field-border:

oklch(0.64 0.008 265)

--surface-2:

oklch(0.985 0.002 265)

--surface-3:

oklch(0.967 0.003 265)

--brand:

oklch(0.55 0.2 331)

--brand-foreground:

oklch(1 0 0)

--brand-soft:

oklch(0.95 0.035 331)

--brand-soft-foreground:

oklch(0.55 0.2 331)

--success:

oklch(0.527 0.154 150)

--success-foreground:

oklch(1 0 0)

--success-soft:

oklch(0.962 0.044 156)

--success-soft-foreground:

oklch(0.527 0.154 150)

--warning:

oklch(0.795 0.184 86)

--warning-foreground:

oklch(0.145 0.003 265)

--warning-soft:

oklch(0.973 0.071 103)

--warning-soft-foreground:

oklch(0.554 0.135 66)

--danger:

oklch(0.577 0.245 27)

--danger-foreground:

oklch(1 0 0)

--danger-soft:

oklch(0.936 0.032 17)

--danger-soft-foreground:

oklch(0.505 0.213 27)

--info:

oklch(0.5 0.134 242)

--info-foreground:

oklch(1 0 0)

--info-soft:

oklch(0.951 0.026 236)

--info-soft-foreground:

oklch(0.5 0.134 242)

Dark Mode

--field-border:

oklch(1 0 0 / 38%)

--surface-2:

oklch(0.145 0.003 265)

--surface-3:

oklch(0.205 0.005 265)

--brand:

oklch(0.8 0.183 331)

--brand-foreground:

oklch(0.115 0.002 265)

--brand-soft:

oklch(0.28 0.09 331)

--brand-soft-foreground:

oklch(0.8 0.183 331)

Theme

--color-field-border:

var(--field-border)

--color-surface-2:

var(--surface-2)

--color-surface-3:

var(--surface-3)

--color-brand:

var(--brand)

--color-brand-foreground:

var(--brand-foreground)

--color-brand-soft:

var(--brand-soft)

--color-brand-soft-foreground:

var(--brand-soft-foreground)

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-success-soft:

var(--success-soft)

CSS

No CSS found.

--success:

oklch(0.723 0.192 150)

--success-foreground:

oklch(0.115 0.002 265)

--success-soft:

oklch(0.266 0.065 152)

--success-soft-foreground:

oklch(0.723 0.192 150)

--warning:

oklch(0.795 0.184 86)

--warning-foreground:

oklch(0.115 0.002 265)

--warning-soft:

oklch(0.286 0.066 53)

--warning-soft-foreground:

oklch(0.795 0.184 86)

--danger:

oklch(0.637 0.237 25)

--danger-foreground:

oklch(0.115 0.002 265)

--danger-soft:

oklch(0.258 0.092 26)

--danger-soft-foreground:

oklch(0.68 0.2 25)

--info:

oklch(0.685 0.169 237)

--info-foreground:

oklch(0.115 0.002 265)

--info-soft:

oklch(0.282 0.066 244)

--info-soft-foreground:

oklch(0.685 0.169 237)

--color-success-soft-foreground:

var(--success-soft-foreground)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-warning-soft:

var(--warning-soft)

--color-warning-soft-foreground:

var(--warning-soft-foreground)

--color-danger:

var(--danger)

--color-danger-foreground:

var(--danger-foreground)

--color-danger-soft:

var(--danger-soft)

--color-danger-soft-foreground:

var(--danger-soft-foreground)

--color-info:

var(--info)

--color-info-foreground:

var(--info-foreground)

--color-info-soft:

var(--info-soft)

--color-info-soft-foreground:

var(--info-soft-foreground)

--motion-fast:

150ms

--motion-base:

200ms

--motion-slow:

300ms

--motion-ease:

cubic-bezier(0.2, 0, 0, 1)