Capa

Foundations

6 refs

Colores base

Core palette

:root { --primary / --background / --foreground / ... }
Primary--primary
Background--background
Card--card
Muted--muted
Accent--accent
Foreground--foreground
Muted fg--muted-foreground
Success--success
Warning--warning
Destructive--destructive

Escala de radios

Radius scale (shadcn style)

--radius: 0.875rem; /* escala todo lo de abajo */

sm

--radius-sm

md

--radius-md

lg

--radius-lg

xl

--radius-xl

2xl

--radius-2xl

3xl

--radius-3xl

4xl

--radius-4xl

Escala de sombras

Shadow scale

var(--shadow-lg) etc.

xs

--shadow-xs

sm

--shadow-sm

md

--shadow-md

lg

--shadow-lg

xl

--shadow-xl

2xl

--shadow-2xl

primary

--shadow-primary

primary hover

--shadow-primary-hover

Bubble / Chat tokens

Bubble tokens

/* Ej. proyecto Finanzas: { --bubble-bg-default: #2563eb; --bubble-radius: 0.75rem; } */
Hola! Soy outline bubble.
Muted / neutro
Tinted = primary/12
Default = --bubble-bg-default
Destructive state
bg default--bubble-bg-default
bg muted--bubble-bg-muted
bg tinted--bubble-bg-tinted(color-mix)
bg outline--bubble-bg-outline

Reaction pills

Reaction pill tokens (chat reactions)

Sobrescribí --reaction-accent para cambiar el color activo entero.
👍12
❤️4
😂2
😮
+
pill bg--reaction-pill-bg
pill active bg--reaction-pill-active-bg
accent--reaction-accent(pills + bar + picker)
picker bg--reaction-picker-bg

Botones (vanilla + tokens)

Button variants tokenizados

bg-primary, --radius-4xl, --shadow-primary