circulosaudetheme

🎨 Tema PO UI personalizado para Círculo Saúde - Azul primário + Laranja destaque

Este pacote entrega um único CSS (dist/index.css) que já importa automaticamente o core do PO UI (@po-ui/style/css/po-theme-core.min.css) e aplica todas as variáveis de tema customizadas. Você só precisa adicionar esse arquivo às styles do seu projeto Angular.

✨ Características

• ✅ Tema completo com todas as variáveis CSS do PO UI customizadas
• ✅ Import automático do core do PO UI
• ✅ Pronto para uso em projetos Angular
• ✅ Fácil customização através de sobreposição de variáveis
• ✅ Peer dependency configurada para garantir compatibilidade

📋 Requisitos

• Node.js 18 ou superior
• Angular com PO UI instalado
• Peer dependency: @po-ui/style (será instalado automaticamente)

🚀 Instalação

npm install circulosaudetheme @po-ui/style

⚙️ Configuração no Projeto

Opção 1: angular.json (Recomendado) ⭐

Esta é a forma mais recomendada para projetos Angular. Adicione o tema no arquivo angular.json:

{
  "projects": {
    "seu-projeto": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/circulosaudetheme/dist/index.css"
            ]
          }
        }
      }
    }
  }
}

⚠️ Importante: Após alterar o angular.json, reinicie o servidor de desenvolvimento:

ng serve

Opção 2: Import no styles.css

Se preferir importar diretamente no arquivo de estilos global:

No arquivo src/styles.css (ou .scss):

@import 'circulosaudetheme/dist/index.css';

🎨 Customização de Variáveis (Opcional)

Para fazer ajustes pontuais nas cores ou outras variáveis, você pode sobrepor as variáveis CSS DEPOIS do import do tema:

/* src/styles.css */
@import 'circulosaudetheme/dist/index.css';

/* Suas customizações locais */
:root {
  --color-brand-01-base: #2e4aa6;   /* azul base */
  --color-brand-03-base: #f59e0b;   /* laranja destaque */
  --color-primary: #1e40af;         /* cor primária */
}

📦 Estrutura do Pacote

circulosaudetheme/
├── dist/
│   ├── index.css              # Importa core PO UI + tema customizado
│   └── po-theme-custom.css    # Todas as variáveis do tema
├── package.json
└── README.md

🔄 Changelog

Versão 1.0.9

• ✅ Adicionada peerDependency para @po-ui/style garantindo compatibilidade
• ✅ Garantido que todos os arquivos da pasta dist são incluídos no pacote
• ✅ Melhorias na documentação e exemplos de uso

Versões Anteriores

• Versões anteriores incluíam o tema básico com cores personalizadas

🛠️ Desenvolvimento Local

Build do pacote

npm run build

Testar localmente sem publicar

1. Gere o pacote local:

npm pack

Isso cria um arquivo circulosaudetheme-x.y.z.tgz

2. No projeto de teste, instale o pacote local:

npm install ../caminho/para/circulosaudetheme-x.y.z.tgz

📝 Publicação (Para mantenedores)

# 1. Fazer login no npm
npm login

# 2. Incrementar versão
npm version patch   # ou minor/major

# 3. Publicar
npm publish --access public

❓ Troubleshooting

O tema não está sendo aplicado

1. Verifique se o @po-ui/style está instalado:

npm list @po-ui/style

2. Confirme que o caminho no angular.json está correto:

"node_modules/circulosaudetheme/dist/index.css"

3. Reinicie o servidor de desenvolvimento após alterações no angular.json

Erro ao importar o CSS

• Certifique-se de que o @po-ui/style está instalado como dependência
• Verifique se está usando a versão correta do Angular CLI

📄 Licença

MIT

🤝 Suporte

Para questões ou problemas, abra uma issue no repositório do projeto.

Desenvolvido para Círculo Saúde 🏥