🎨 Concafras UI Library

Sistema de design completo baseado em PrimeNG e Tailwind CSS, seguindo a identidade visual da Concafras. Inclui tema customizado, tokens CSS, componentes e utilitários prontos para uso.

📦 O que está incluído

• ✅ Tema PrimeNG customizado (createConcafrasTheme)
• ✅ Tokens CSS com variáveis semânticas
• ✅ Preset Tailwind com paleta de cores Concafras
• ✅ Classes utilitárias para cores, espaçamentos e bordas
• ✅ Componentes base estilizados
• ✅ Suporte a modo escuro (opcional)

🚀 Instalação

1. Instalar a biblioteca

npm install @concafras/ui
# ou
yarn add @concafras/ui
# ou
pnpm add @concafras/ui

2. Instalar dependências peer

npm install primeng @primeuix/themes tailwindcss-primeui

⚙️ Configuração

1. Configurar o Tema PrimeNG

No seu arquivo app.config.ts (ou main.ts para aplicações standalone):

import { ApplicationConfig } from '@angular/core';
import { providePrimeNG } from 'primeng/config';
import { createConcafrasTheme } from '@concafras/ui';

const MeuTema = createConcafrasTheme({
  primaryColor: '#E7392D',    // Sua cor primária
  accentColor: '#149510',      // Cor de destaque

  secondaryColor: '#FF5722',     // Custom background color
  secondaryTextColor: '#000000',

  secondaryHoverColor: '#000000', // Cor de hover (opcional)
  secondaryActiveColor: '#000000', // Cor ao clicar (opcional)
  
  // Customização de cores semânticas (Opcional)
  successColor: '#3BBA5A',
  warningColor: '#F56551',
  dangerColor: '#E7392D',
  infoColor: '#0066CC',
  helpColor: '#AD50DC',
  components: {
    button: {
      borderRadius: '50px',    // Botões pílula
      minHeight: '48px',        // Botões maiores

    }
  }
});

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: MeuTema, // Cor primária Concafras
        options: {
          darkModeSelector: '.dark-mode', // ou false para desabilitar
          cssLayer: {
            name: 'primeng',
            order: 'tailwind-base, primeng, tailwind-utilities'
          }
        }
      }
    })
  ]
};

2. Configurar o Tailwind CSS (v4)

Para utilizar as cores e classes do sistema Concafras no Tailwind v4, basta importar os arquivos CSS no seu estilo global (src/styles.css). Não é necessário configurar tailwind.config.js.

/* Importar tokens e tema do Concafras UI */
@import "concafras-ui/src/lib/assets/styles/tokens.css";
@import "concafras-ui/src/lib/assets/styles/theme.css";

/* Carregar o Tailwind */
@import "tailwindcss";

🎨 Sistema de Cores

Paletas Disponíveis

O Concafras UI possui paletas de cores completas (50-950) seguindo a identidade visual:

| Paleta | Variável Base | Uso Principal | Classes Tailwind | |--------|---------------|---------------|------------------| | Primary | --c-blue-* | Azul Concafras oficial | bg-primary-500, text-primary-700 | | Theme | --p-primary-* | Cor dinâmica do tema PrimeNG | bg-theme-500, text-theme-600 | | Surface | --c-gray-* | Tons de cinza para fundos/textos | bg-surface-50, text-surface-900 | | Mocidade | --c-green-* | Verde da área Mocidade | bg-mocidade-500 | | Alegria | --c-yellow-* | Amarelo Alegria | bg-alegria-500 |

Cores de Marcas (Brands)

Cores específicas para sub-marcas da Concafras:

| Marca | Variável | Classes | Cor HEX | |-------|----------|---------|---------| | Concafras TV | --brand-concafras-tv | bg-brand-tv, text-brand-tv | #F64F33 | | O Centro | --brand-o-centro | bg-brand-centro, text-brand-centro | #98CB00 | | ALK Online | --brand-alk | bg-brand-alk, text-brand-alk | #F7C707 |

Exemplo de Uso

<!-- Botão primário com cor Concafras -->
<button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-full">
  Botão Primário
</button>

<!-- Card com cor de marca -->
<div class="bg-surface-0 border border-surface-200 rounded-lg p-6">
  <h2 class="text-brand-tv text-xl font-bold">Concafras TV</h2>
  <p class="text-surface-600">Conteúdo do card</p>
</div>

<!-- Badge Mocidade -->
<span class="bg-mocidade-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
  Mocidade
</span>

🧩 Componentes PrimeNG Customizados

Todos os componentes PrimeNG são automaticamente estilizados com o tema Concafras ao usar createConcafrasTheme().

Botões

<!-- Botão primário (PrimeNG) -->
<p-button label="Primário" />

<!-- Botão secundário (outline amarelo) -->
<p-button label="Secundário" severity="secondary" />

<!-- Botão success (verde Mocidade) -->
<p-button label="Sucesso" severity="success" />

<!-- Botão danger (vermelho) -->
<p-button label="Perigo" severity="danger" />

Cards

<p-card header="Título do Card" subheader="Subtítulo">
  <p>Conteúdo do card automaticamente estilizado com o tema Concafras.</p>
</p-card>

Inputs

<input 
  pInputText 
  placeholder="Digite aqui..." 
  class="w-full"
/>

DataTable

<p-table [value]="produtos" [tableStyle]="{ 'min-width': '50rem' }">
  <ng-template #header>
    <tr>
      <th>Código</th>
      <th>Nome</th>
      <th>Categoria</th>
      <th>Preço</th>
    </tr>
  </ng-template>
  <ng-template #body let-produto>
    <tr>
      <td>{{ produto.codigo }}</td>
      <td>{{ produto.nome }}</td>
      <td>{{ produto.categoria }}</td>
      <td>{{ produto.preco | currency }}</td>
    </tr>
  </ng-template>
</p-table>

🎛️ Customização Avançada

Alterar Cores do Tema

Você pode sobrescrever as cores semânticas ao criar o tema:

import { createConcafrasTheme } from '@concafras/ui';

const meuTemaCustomizado = createConcafrasTheme('#FF5733', {
  // Sobrescrever cores semânticas
  semantic: {
    primaryHover: '#E64A19',
    primaryActive: '#D84315',
  },
  // Customizar componentes específicos
  components: {
    button: {
      borderRadius: '8px',      // Botões mais quadrados (padrão: 50px)
      fontWeight: 700,          // Texto mais negrito
      paddingX: {
        medium: '20px'          // Mais espaçamento horizontal
      }
    },
    card: {
      borderRadius: '12px',     // Cards mais arredondados
      shadow: '0 4px 6px rgba(0, 0, 0, 0.15)'
    }
  }
});

// Usar no providePrimeNG
export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: meuTemaCustomizado
      }
    })
  ]
};

Propriedades Customizáveis dos Componentes

Botões

| Propriedade | Descrição | Valor Padrão | |-------------|-----------|--------------| | borderRadius | Arredondamento da borda | '50px' (pílula) | | paddingX.small | Padding horizontal pequeno | '10px' | | paddingX.medium | Padding horizontal médio | '12px' | | paddingX.large | Padding horizontal grande | '16px' | | paddingY.small | Padding vertical pequeno | '6px' | | paddingY.medium | Padding vertical médio | '8px' | | paddingY.large | Padding vertical grande | '12px' | | fontSize.medium | Tamanho da fonte | '16px' | | fontWeight | Peso da fonte | 600 |

Cards

| Propriedade | Descrição | Valor Padrão | |-------------|-----------|--------------| | padding | Espaçamento interno | '25px' | | borderRadius | Arredondamento | '8px' | | shadow | Sombra | '0 4px 6px rgba(0, 0, 0, 0.1)' |

📐 Classes Utilitárias Tailwind

Bordas e Arredondamento

| Classe | Valor | Uso Recomendado | |--------|-------|-----------------| | rounded-none | 0px | Sem arredondamento | | rounded-sm | 2px | Tags, badges pequenos | | rounded | 4px | Inputs pequenos | | rounded-md | 6px | Inputs padrão | | rounded-lg | 8px | Cards padrão | | rounded-xl | 12px | Cards de destaque | | rounded-full | 9999px | Botões pílula, avatares |

Exemplo Prático: Botão Customizado

<button class="
  bg-primary-500 
  hover:bg-primary-600 
  active:bg-primary-700
  text-white 
  font-bold 
  py-2 
  px-4 
  rounded-full 
  shadow-lg 
  transition-colors
  duration-200
">
  Botão Customizado
</button>

Exemplo: Card Completo

<div class="
  bg-surface-0 
  border 
  border-surface-200 
  rounded-lg 
  shadow-md 
  p-6
  hover:shadow-lg
  transition-shadow
">
  <div class="flex items-center gap-3 mb-4">
    <div class="bg-primary-100 text-primary-700 p-3 rounded-full">
      <i class="pi pi-calendar text-xl"></i>
    </div>
    <div>
      <h3 class="text-lg font-bold text-surface-900">Próximo Evento</h3>
      <p class="text-sm text-surface-500">5ª Concafras Global</p>
    </div>
  </div>
  <p class="text-surface-600 mb-4">
    Participe do maior evento de espiritualidade integrada da América Latina.
  </p>
  <button class="bg-alegria-500 hover:bg-alegria-600 text-surface-900 font-semibold px-4 py-2 rounded-full">
    Saiba Mais
  </button>
</div>

🌓 Modo Escuro

Ativar Modo Escuro

O Concafras UI possui suporte completo a modo escuro. Para ativar:

1. Configurar no app.config.ts

providePrimeNG({
  theme: {
    preset: createConcafrasTheme('#324792'),
    options: {
      darkModeSelector: '.dark-mode' // Classe CSS para ativar dark mode
    }
  }
})

2. Adicionar/remover a classe no HTML

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [class.dark-mode]="isDarkMode">
      <button (click)="toggleDarkMode()">
        {{ isDarkMode ? '☀️ Modo Claro' : '🌙 Modo Escuro' }}
      </button>
      <!-- Seu conteúdo aqui -->
    </div>
  `
})
export class AppComponent {
  isDarkMode = false;

  toggleDarkMode() {
    this.isDarkMode = !this.isDarkMode;
  }
}

3. Persistir preferência (opcional)

export class AppComponent implements OnInit {
  isDarkMode = false;

  ngOnInit() {
    // Carregar preferência salva
    this.isDarkMode = localStorage.getItem('darkMode') === 'true';
  }

  toggleDarkMode() {
    this.isDarkMode = !this.isDarkMode;
    localStorage.setItem('darkMode', String(this.isDarkMode));
  }
}

📚 Exemplos Completos

Exemplo 1: Dashboard Card

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Card Total de Usuários -->
  <div class="bg-surface-0 border border-surface-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
    <div class="flex items-center justify-between mb-4">
      <div class="bg-primary-100 text-primary-700 p-3 rounded-full">
        <i class="pi pi-users text-2xl"></i>
      </div>
      <span class="text-sm text-surface-500 font-medium">+12% este mês</span>
    </div>
    <h3 class="text-3xl font-bold text-surface-900 mb-1">1,234</h3>
    <p class="text-sm text-surface-600">Total de Usuários</p>
  </div>

  <!-- Card Eventos Ativos -->
  <div class="bg-surface-0 border border-surface-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
    <div class="flex items-center justify-between mb-4">
      <div class="bg-alegria-100 text-alegria-700 p-3 rounded-full">
        <i class="pi pi-calendar text-2xl"></i>
      </div>
      <span class="text-sm text-surface-500 font-medium">3 esta semana</span>
    </div>
    <h3 class="text-3xl font-bold text-surface-900 mb-1">18</h3>
    <p class="text-sm text-surface-600">Eventos Ativos</p>
  </div>

  <!-- Card Mocidade -->
  <div class="bg-surface-0 border border-surface-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
    <div class="flex items-center justify-between mb-4">
      <div class="bg-mocidade-100 text-mocidade-700 p-3 rounded-full">
        <i class="pi pi-star text-2xl"></i>
      </div>
      <span class="text-sm text-surface-500 font-medium">Crescimento</span>
    </div>
    <h3 class="text-3xl font-bold text-surface-900 mb-1">567</h3>
    <p class="text-sm text-surface-600">Membros Mocidade</p>
  </div>
</div>

Exemplo 2: Formulário Completo

<div class="bg-surface-0 border border-surface-200 rounded-lg p-6 shadow-md max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-surface-900 mb-6">Cadastro de Participante</h2>
  
  <form class="space-y-4">
    <!-- Nome Completo -->
    <div>
      <label class="block text-sm font-medium text-surface-700 mb-2">
        Nome Completo
      </label>
      <input 
        pInputText 
        placeholder="Digite seu nome" 
        class="w-full"
      />
    </div>

    <!-- Email -->
    <div>
      <label class="block text-sm font-medium text-surface-700 mb-2">
        Email
      </label>
      <input 
        pInputText 
        type="email"
        placeholder="[email protected]" 
        class="w-full"
      />
    </div>

    <!-- Área de Interesse -->
    <div>
      <label class="block text-sm font-medium text-surface-700 mb-2">
        Área de Interesse
      </label>
      <p-dropdown 
        [options]="areas" 
        placeholder="Selecione"
        optionLabel="nome"
        class="w-full"
      />
    </div>

    <!-- Checkbox -->
    <div class="flex items-center gap-2">
      <p-checkbox 
        [binary]="true" 
        inputId="termos"
      />
      <label for="termos" class="text-sm text-surface-600">
        Aceito os termos e condições
      </label>
    </div>

    <!-- Botões -->
    <div class="flex gap-3 pt-4">
      <button 
        pButton 
        label="Cancelar" 
        severity="secondary"
        class="flex-1"
      ></button>
      <button 
        pButton 
        label="Cadastrar" 
        class="flex-1"
      ></button>
    </div>
  </form>
</div>

Exemplo 3: Navigation Bar

<nav class="bg-primary-500 text-white shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center gap-3">
        <img src="assets/logo.svg" alt="Concafras" class="h-8">
        <span class="text-xl font-bold">Concafras</span>
      </div>

      <!-- Menu Desktop -->
      <div class="hidden md:flex items-center gap-6">
        <a href="#" class="hover:text-alegria-300 transition-colors">Início</a>
        <a href="#" class="hover:text-alegria-300 transition-colors">Eventos</a>
        <a href="#" class="hover:text-alegria-300 transition-colors">Mocidade</a>
        <a href="#" class="hover:text-alegria-300 transition-colors">Contato</a>
      </div>

      <!-- CTA -->
      <button class="hidden md:block bg-alegria-500 hover:bg-alegria-600 text-surface-900 font-semibold px-4 py-2 rounded-full transition-colors">
        Participar
      </button>

      <!-- Menu Mobile -->
      <button class="md:hidden">
        <i class="pi pi-bars text-2xl"></i>
      </button>
    </div>
  </div>
</nav>

🛠️ Troubleshooting

Problema: Cores não aparecem

Solução:

1. Verifique se importou tokens.css no styles.css
2. Certifique-se que o preset Tailwind está configurado no tailwind.config.js
3. Rode npm run build ou reinicie o servidor

Problema: PrimeNG sem estilo

Solução:

1. Verifique se chamou providePrimeNG() no app.config.ts
2. Certifique-se que o preset foi passado corretamente
3. Verifique a ordem das camadas CSS no cssLayer.order

Problema: Modo escuro não funciona

Solução:

1. Verifique se configurou darkModeSelector no PrimeNG
2. Certifique-se que a classe .dark-mode está sendo aplicada ao elemento raiz
3. Verifique se o Tailwind está configurado com darkMode: 'class'

📖 Referências

• Documentação PrimeNG
• Documentação Tailwind CSS
• Tokens e Guia CSS
• Identidade Visual Concafras

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir:

1. Fork o repositório
2. Crie uma branch para sua feature (git checkout -b feature/MinhaFeature)
3. Commit suas mudanças (git commit -m 'Adiciona MinhaFeature')
4. Push para a branch (git push origin feature/MinhaFeature)
5. Abra um Pull Request

📄 Licença

MIT © Concafras

📞 Suporte

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discord: Comunidade Concafras

Desenvolvido com ❤️ pela equipe de TI da Concafras