Personalização

Tokens e utilitários

Tudo que os componentes usam está disponível para você: variáveis CSS, utilitários do Tailwind e classes de profundidade.

Cores

Valores em HSL sem hsl(). Use pelo Tailwind (bg-aura-primary, text-aura-muted-foreground/80) ou direto no CSS (hsl(var(--aura-primary) / 0.5)). As amostras seguem o tema atual.

Token	Claro	Escuro
--aura-surface	0 0% 100%	232 31% 8%
--aura-surface-foreground	222 47% 11%	210 40% 98%
--aura-muted	210 40% 96%	230 25% 15%
--aura-muted-foreground	215 19% 40%	220 15% 65%
--aura-primary	252 100% 67%	252 100% 67%
--aura-primary-foreground	0 0% 100%	—
--aura-accent	348 100% 68%	348 100% 68%
--aura-accent-foreground	0 0% 100%	—
--aura-ring	252 100% 67%	—
--aura-border	214 32% 91%	230 20% 20%
--aura-destructive	0 84% 60%	—
--aura-destructive-foreground	0 0% 100%	—
--aura-success	160 84% 39%	160 84% 45%
--aura-success-foreground	0 0% 100%	—
--aura-warning	38 92% 50%	38 92% 55%
--aura-warning-foreground	232 31% 8%	—
--aura-contrast	232 31% 8%	—
--aura-cyber	187 100% 50%	—

Elevação e profundidade

--aura-elevation-0--aura-elevation-1--aura-elevation-2--aura-elevation-3--aura-elevation-4--aura-elevation-5--aura-depth--aura-depth-1--aura-depth-2--aura-depth-3--aura-depth-4--aura-depth-5

--aura-light-x--aura-light-y--aura-tilt-max--aura-orbit-duration--aura-orbit-radius--aura-ease-spring--aura-dur-fast--aura-dur--aura-dur-slow--aura-perspective--aura-perspective-near--aura-perspective-far

Vidro e luz

--aura-glass-blur--aura-glass-alpha--aura-specular

Forma

--aura-font-sans--aura-radius

Gradientes e brilho

--aura-gradient-primary--aura-gradient-accent--aura-gradient-cyber--aura-gradient-aurora--aura-gradient-glass-border--aura-bevel-highlight--aura-bevel-shadow--aura-glow-primary--aura-glow-accent--aura-glow-cyber

Utilitários do Tailwind

O preset registra estes nomes no tema do Tailwind v4:

--color-*

aura-surfaceaura-surface-foregroundaura-primaryaura-primary-foregroundaura-accentaura-accent-foregroundaura-mutedaura-muted-foregroundaura-borderaura-ringaura-destructiveaura-destructive-foregroundaura-successaura-success-foregroundaura-warningaura-warning-foregroundaura-primary-strongaura-accent-strongaura-success-strongaura-warning-strongaura-destructive-strongaura-contrastaura-cyber

--font-*

aura

--radius-*

aura

--shadow-*

aura-1aura-2aura-3aura-4aura-5aura-glow-primaryaura-glow-accentaura-glow-cyber

--ease-*

aura-spring

--animate-*

aura-shimmeraura-glow

Classes de profundidade

Classes CSS prontas (funcionam até sem Tailwind) para vidro, relevo, brilho, gradientes e cenas 3D:

.aura-accordion-down.aura-accordion-up.aura-bevel.aura-depth-1.aura-depth-2.aura-depth-3.aura-depth-4.aura-depth-5.aura-elevated.aura-elevated-strong.aura-expandable.aura-glass.aura-glass-dc.aura-glass-specular.aura-glow-accent.aura-glow-cyber.aura-glow-primary.aura-gradient-accent.aura-gradient-aurora.aura-gradient-cyber.aura-gradient-primary.aura-layer.aura-overlay.aura-pop.aura-press.aura-scene.aura-scene-far.aura-scene-near.aura-sheet.aura-surface.aura-text-gradient-accent.aura-text-gradient-aurora.aura-text-gradient-cyber.aura-text-gradient-primary.aura-tilt.aura-toast

tsx

<div className="aura-glass aura-depth-3 rounded-2xl p-6">
  <h3 className="aura-text-gradient-aurora text-2xl font-bold">Vidro com profundidade</h3>
  <button className="aura-gradient-primary aura-press aura-bevel rounded-xl px-4 py-2">Ação</button>
</div>