CSS Utilitários

Utilitários CSS customizados disponíveis no design system, incluindo classes para layout, efeitos visuais e animações.

Visão Geral

O design system inclui vários utilitários CSS customizados que estendem as funcionalidades do Tailwind CSS, fornecendo classes reutilizáveis para layouts comuns, efeitos visuais e animações.

Classes de Layout

Flexbox Utilitários

.row

Cria um container flex horizontal com alinhamento central e gap padrão.

Exemplo:

<div className="row bg-muted p-4 rounded-lg">
  <Button variant="outline">Botão 1</Button>
  <Button variant="outline">Botão 2</Button>
  <Button variant="outline">Botão 3</Button>
</div>

.col

Cria um container flex vertical com alinhamento à esquerda e gap padrão.

Exemplo:

<div className="col bg-muted p-4 rounded-lg">
  <Button variant="outline">Botão 1</Button>
  <Button variant="outline">Botão 2</Button>
  <Button variant="outline">Botão 3</Button>
</div>

Classes de Interação

.clickable

Aplica estilos para elementos clicáveis, removendo seleção de texto e adicionando cursor pointer.

Exemplo:

<div className="flex gap-2">
  <div className="clickable p-3 bg-blue-600 text-white  font-medium text-sm rounded-xl">Clique aqui</div>
</div>
Clique aqui

Classes de Efeitos Visuais

Efeitos Emboss

.small-emboss

Aplica um efeito de profundidade sutil com borda interna clara. Ideal para elementos pequenos.

Exemplo:

<div className="flex gap-2">
  <div className="p-1 px-2 bg-blue-600 text-white font-medium text-xs rounded-xl">Sem emboss</div>
  <div className="small-emboss p-1 px-2 bg-blue-600 text-white font-medium text-xs rounded-xl">Com efeito de emboss</div>
</div>
Sem emboss
Com efeito de emboss

.emboss

Aplica um efeito de profundidade mais pronunciado com margem interna.

Exemplo:

<div className="flex gap-2">
  <div className="p-2 bg-blue-600 text-white font-medium px-4 rounded-xl">Sem emboss</div>
  <div className="emboss  p-2 bg-blue-600 text-white font-medium px-4 rounded-xl">Com efeito de emboss</div>
</div>
Sem emboss
Com efeito de emboss

Classes de Tipografia

.text-body

Aplica estilos padrão para texto de corpo com cor muted e peso médio.

Exemplo:

<div className="p-6 text-sm rounded-lg border">
  <h3 className="text-lg font-bold mb-2">Título Principal</h3>
  <span className="text-body">
    Este é um texto de corpo com estilo padrão que segue o design system.
  </span>
  <span className="text-body">
    Outro parágrafo com o mesmo estilo consistente.
  </span>
</div>

Título Principal

Este é um texto de corpo com estilo padrão que segue o design system.

Outro parágrafo com o mesmo estilo consistente.


Animações Customizadas

Animated Border

O sistema inclui um sistema completo de bordas animadas com gradiente conico.

.animated-border

Aplica uma borda animada com gradiente conico rotativo.

Utilitários de Configuração

  • .animated-border-from-{cor}: Define a cor inicial do gradiente
  • .animated-border-to-{cor}: Define a cor final do gradiente
  • .animated-border-{largura}: Define a largura da borda (0-8px)
  • .animated-border-duration-{tempo}: Define a duração da animação (1000-5000ms)

Exemplo:

<div className="animated-border animated-border-from-vertt-500 animated-border-to-vertt-100 text-center text-sm bg-vertt-600/20 text-foreground font-semibold rounded-xl">
  Container com borda animada padrão
</div>

<div className="animated-border animated-border-from-amber-500 animated-border-duration-1000 animated-border-to-amber-100 text-center text-sm bg-amber-600/20 text-foreground font-semibold rounded-xl">
  Container com borda animada com duração de 1 segundos
</div>

<div className="animated-border animated-border-from-green-500 animated-border-2 animated-border-to-green-100 text-center text-sm bg-green-600/20 text-foreground font-semibold rounded-xl">
  Container com borda animada com largura de 2px
</div>

Container com borda animada padrão

Container com borda animada com duração de 1 segundos

Container com borda animada com largura de 2px


Animações de Entrada/Saída

Animate CSS Utilitários

O sistema inclui utilitários baseados no Animate.css para animações de entrada e saída.

Classes Base

  • .animate-in: Aplica animação de entrada
  • .animate-out: Aplica animação de saída

Utilitários de Opacidade

  • .fade-in-{valor}: Fade in com opacidade específica
  • .fade-out-{valor}: Fade out com opacidade específica

Utilitários de Escala

  • .zoom-in-{valor}: Zoom in com escala específica
  • .zoom-out-{valor}: Zoom out com escala específica

Utilitários de Rotação

  • .spin-in-{valor}: Rotação de entrada
  • .spin-out-{valor}: Rotação de saída

Utilitários de Slide

  • .slide-in-from-{direção}-{valor}: Slide de entrada
  • .slide-out-to-{direção}-{valor}: Slide de saída

Utilitários de Controle

  • .duration-{valor}: Duração da animação
  • .delay-{valor}: Delay da animação
  • .ease-{valor}: Função de easing
  • .running / .paused: Controle de play state
  • .fill-mode-{valor}: Modo de preenchimento
  • .direction-{valor}: Direção da animação
  • .repeat-{valor}: Repetições da animação

Exemplo:

<div className="space-y-4">
  <div className="animate-in fade-in-100 duration-500 p-1 rounded-xl">
    Elemento que aparece com fade
  </div>
  
  <div className="animate-in slide-in-from-top-4 duration-300 p-1 rounded-xl">
    Elemento que desliza de cima
  </div>
  
  <div className="animate-in zoom-in-95 duration-200 p-1 rounded-xl">
    Elemento que aparece com zoom
  </div>
  
  <div className="animate-in spin-in-12 duration-700 p-1 rounded-xl">
    Elemento que gira ao aparecer
  </div>
  
  <div className="animate-in slide-in-from-left-4 duration-400 p-1 rounded-xl">
    Elemento que desliza da esquerda
  </div>
  
  <div className="animate-out fade-out-0 duration-300 p-1 rounded-xl">
    Elemento que desaparece com fade
  </div>
</div>