This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@sula-tech/sula-tailwind-css

🎨 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

Classe	Valor (Light)	Valor (Dark)	Token
.text-brand-primary	#f05223	#f0693e	color.brand.primary
.text-brand-secondary	#001d5f	#5959a1	color.brand.secondary
.text-brand-tertiary-1	#1769e0	#1769e0	color.brand.tertiary-1
.text-brand-tertiary-2	#f98900	#f98900	color.brand.tertiary-2

Cores de Feedback

Classe	Valor (Light)	Valor (Dark)	Token
.text-feedback-success	#04843f	#85ae8f	color.feedback.success
.text-feedback-error	#c80505	#c80505	color.feedback.error
.text-feedback-informational	#145abf	#adbdef	color.feedback.informational
.text-feedback-alert	#ef9928	#f3ba89	color.feedback.alert

Cores de Texto

Classe	Valor (Light)	Valor (Dark)	Token
.text-text-primary	#323232	#e6e6e6	color.text.primary
.text-text-secondary	#5c5c5c	#b9b9b9	color.text.secondary
.text-text-disabled	#949494	#5c5c5c	color.text.disabled
.text-text-link	#145abf	#adbdef	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.