Estilização - Triglit

CSS Customizado

O SDK usa CSS variables para temas. Você pode customizar as cores sobrescrevendo as variáveis:

/* No seu arquivo CSS global */
.triglit-root {
  --primary: oklch(0.274 0.006 286.033);
  --primary-foreground: oklch(0.985 0 0);
  --background: oklch(1 0 0);
  --foreground: oklch(0.21 0.006 285.885);
  /* ... outras variáveis */
}

Modo Escuro

O SDK suporta modo escuro automaticamente. O provider adiciona a classe dark ao elemento raiz:

// O modo escuro é aplicado automaticamente
<TriglitProvider config={{ apiKey: 'pk_...' }}>
  {/* Componentes em modo escuro */}
</TriglitProvider>

Para usar modo claro, você pode sobrescrever as classes:

<TriglitProvider config={{ apiKey: 'pk_...' }}>
  <div className="triglit-root"> {/* Remove a classe dark */}
    <WorkflowEditor workflowId="wf_123" />
  </div>
</TriglitProvider>

Prefixo de Classes

O SDK usa o prefixo tg: para classes Tailwind para evitar conflitos. Você pode usar essas classes em seus componentes:

<div className="tg:bg-primary tg:text-primary-foreground tg:p-4">
  Conteúdo estilizado
</div>

Customização de Componentes

Você pode customizar componentes individuais usando className:

<WorkflowEditor 
  workflowId="wf_123"
  className="min-h-screen bg-gray-50"
/>

​CSS Customizado

​Modo Escuro

​Prefixo de Classes

​Customização de Componentes

CSS Customizado

Modo Escuro

Prefixo de Classes

Customização de Componentes