🎨 Design System Tailwind Plugin - SulAmérica

📑 Índice

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

Instalação

Este plugin adiciona um sistema de design personalizado ao seu projeto Tailwind CSS. O plugin suporta tanto módulos CommonJS quanto ES Modules, garantindo compatibilidade com diferentes configurações de projeto.

Pré-requisitos

• Tailwind CSS instalado no seu projeto

Instalação do Plugin

Primeiro, instale o plugin via npm:

npm install @sula-tech/tailwind-css-plugin

Configuração

Tailwind CSS v4.x:

@import "tailwindcss";
@plugin "@sula-tech/tailwind-css-plugin/src/index.cjs";

Tailwind CSS v3.x:

Para projetos com ES Modules

Se seu projeto usa ES Modules (tem "type": "module" no package.json ou usa arquivos .mjs):

Tailwind CSS v3.x:

// tailwind.config.js
import plugin from "@sula-tech/tailwind-css-plugin";

export default {
  // ...outras configurações
  plugins: [plugin],
};

Para projetos com CommonJS

Se seu projeto usa CommonJS (configuração padrão do Node.js):

Tailwind CSS v3.x:

// tailwind.config.js
const plugin = require("@sula-tech/tailwind-css-plugin/src/index.cjs");

module.exports = {
  // ...outras configurações
  plugins: [plugin],
};

Verificação da Instalação

Após a configuração, execute o build do seu projeto para verificar se tudo está funcionando:

npm run build

Todos os estilos e utilitários do design system estarão agora disponíveis para uso em seu projeto. Você pode começar a utilizar as classes personalizadas em seus componentes

🎨 Cores

Cores da Marca

| Classe | Valor (Light) | Valor (Dark) | Token | | ------------------------ | ------------- | ------------ | ---------------------- | | .text-brand-primary | #f05223 | #f05223 | color.brand.primary | | .text-brand-secondary | #4066bf | #4066bf | color.brand.secondary | | .text-brand-tertiary-1 | #1769e0 | #1769e0 | color.brand.tertiary-1 | | .text-brand-tertiary-2 | #fc9c26 | #fc9c26 | color.brand.tertiary-2 |

Cores de Feedback

| Classe | Valor (Light) | Valor (Dark) | Token | | ------------------------------ | ------------- | ------------ | ---------------------------- | | .text-feedback-success | #04843f | #04843f | color.feedback.success | | .text-feedback-error | #c80505 | #c80505 | color.feedback.error | | .text-feedback-informational | #1355b4 | #1355b4 | color.feedback.informational | | .text-feedback-alert | #ef9928 | #ef9928 | color.feedback.alert |

Cores de Texto

| Classe | Valor (Light) | Valor (Dark) | Token | | ---------------------- | ------------- | ------------ | -------------------- | | .text-text-primary | #313333 | #e5e6e6 | color.text.primary | | .text-text-secondary | #6c6e6e | #acaeae | color.text.secondary | | .text-text-disabled | #949595 | #6c6e6e | color.text.disabled | | .text-text-link | #1355b4 | #90b9f4 | color.text.link |

📝 Tipografia

Família Tipográfica

| Classe | Valor | Token | | ------------ | --------- | --------- | | .font-base | Aestetico | font.base |

Escalas Tipográficas - Display

| Classe | Valor | Token | | --------------------------- | ----------- | ---------------------- | | .text-base-display-large | 120px/120px | desktop.display.large | | .text-base-display-medium | 80px/80px | desktop.display.medium | | .text-base-display-small | 60px/60px | desktop.display.small |

Escalas Tipográficas - Títulos

| Classe | Valor | Token | | ------------------------- | --------- | -------------------- | | .text-base-title-large | 48px/48px | desktop.title.large | | .text-base-title-medium | 32px/32px | desktop.title.medium | | .text-base-title-small | 24px/24px | desktop.title.small |

Escalas Tipográficas - Parágrafos

| Classe | Valor | Token | | ------------------------------------ | -------------- | ------------------------------- | | .text-base-paragraph-large-regular | 20px/28px | desktop.paragraph.large.regular | | .text-base-paragraph-large-bold | 20px/28px bold | desktop.paragraph.large.bold | | .text-base-paragraph-small-regular | 16px/24px | desktop.paragraph.small.regular | | .text-base-paragraph-small-bold | 16px/24px bold | desktop.paragraph.small.bold |

Escalas Tipográficas - Rótulos

| Classe | Valor | Token | | -------------------------------- | -------------- | --------------------------- | | .text-base-label-large-regular | 20px/20px | desktop.label.large.regular | | .text-base-label-large-bold | 20px/20px bold | desktop.label.large.bold | | .text-base-label-small-regular | 14px/14px | desktop.label.small.regular | | .text-base-label-small-bold | 14px/14px bold | desktop.label.small.bold |

📏 Espaçamento

| Classe | Valor | Token | | -------- | ----- | --------- | | .p-1 | 1px | space.1 | | .p-2 | 2px | space.2 | | .p-4 | 4px | space.4 | | .p-8 | 8px | space.8 | | .p-16 | 16px | space.16 | | .p-24 | 24px | space.24 | | .p-32 | 32px | space.32 | | .p-40 | 40px | space.40 | | .p-48 | 48px | space.48 | | .p-64 | 64px | space.64 | | .p-80 | 80px | space.80 | | .p-96 | 96px | space.96 | | .p-120 | 120px | space.120 |

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

🔲 Bordas

| Classe | Valor | Token | | -------------- | ----- | ----------------- | | .rounded-xs | 8px | border-radius.xs | | .rounded-sm | 12px | border-radius.sm | | .rounded-md | 20px | border-radius.md | | .rounded-lg | 40px | border-radius.lg | | .rounded-xxl | 300px | border-radius.xxl |

📐 Dimensões

| Classe | Valor | Token | | -------- | ----- | -------- | | .w-1 | 1px | size.1 | | .w-4 | 4px | size.4 | | .w-8 | 8px | size.8 | | .w-342 | 342px | size.342 | | .w-390 | 390px | size.390 | | .w-645 | 645px | size.645 |

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.