@sula-tech/sula-tailwind-css v1.0.2

🎨 Design System Tailwind Plugin - SulAmérica

📑 Índice

• Introdução
• Instalação
• Cores
• Tipografia
• Espaçamento
• Bordas
• Dimensões

Instalação

O processo de instalação e configuração do plugin é simples e direto. Siga os passos abaixo:

1. Adicione o plugin ao array de plugins no seu arquivo de configuração do Tailwind CSS (tailwind.config.js)
2. Importe o plugin conforme demonstrado no exemplo abaixo:

/** @type {import('tailwindcss').Config} */
const plugin = require("@sula-tech/sula-tailwind-css/src/tailwind-design-system-plugin");

module.exports = {
  // Define os arquivos que serão processados pelo Tailwind
  content: ["./src/**/*.{html,ts}"],
  
  // Configurações personalizadas do tema (se necessário)
  theme: {},
  
  // Adiciona o plugin ao array de plugins
  plugins: [plugin],
};

Após essa configuração, todos os estilos e utilitários do plugin estarão disponíveis para uso em seu projeto.

Nota: Certifique-se de que o plugin está corretamente instalado via npm ou yarn antes de adicioná-lo à configuração.

🎨 Cores

Cores da Marca

Cores de Feedback

Cores de Texto

📝 Tipografia

Família Tipográfica

Escalas Tipográficas - Display

Escalas Tipográficas - Títulos

Escalas Tipográficas - Parágrafos

Escalas Tipográficas - Rótulos

📏 Espaçamento

Nota: Disponível para padding (p-), margin (m-), gap (gap-), etc.

🔲 Bordas

📐 Dimensões

Nota: Disponível para width (w-), height (h-), max-width (max-w-), max-height (max-h-)

💡 Exemplos

Card Básico

<div class="bg-surface-body p-24 rounded-md">
  <!-- Token: color.surface.body, space.24, border-radius.md -->
  <h1 class="text-base-title-large text-brand-primary mb-16">
    <!-- Token: desktop.title.large, color.brand.primary, space.16 -->
    Título do Card
  </h1>
  <p class="text-base-paragraph-regular text-text-secondary">
    <!-- Token: desktop.paragraph.regular, color.text.secondary -->
    Conteúdo do card com texto secundário.
  </p>
  <button
    class="bg-brand-primary text-neutral-neutral-1 px-24 py-12 rounded-sm mt-24"
  >
    <!-- Token: color.brand.primary, space.24, space.12, border-radius.sm, space.24 -->
    Botão de Ação
  </button>
</div>

Banner Informativo

<div class="bg-surface-on-body-blue p-16 rounded-sm">
  <div class="flex items-center gap-8">
    <span class="text-feedback-informational">
      <!-- Ícone de Informação -->
    </span>
    <p class="text-base-label-medium-regular text-text-primary">
      Mensagem informativa para o usuário
    </p>
  </div>
</div>

📚 Observações

• Todas as cores podem ser utilizadas com os prefixos:

  • text- (cor do texto)
  • bg- (cor de fundo)
  • border- (cor da borda)
  • ring- (cor do outline)
  • divide- (cor de divisores)
  • placeholder- (cor do placeholder)

• O plugin gera automaticamente variáveis CSS (custom properties) para todas as cores, tornando-as disponíveis globalmente em sua aplicação.