@by-wise/po-ui-theme

Tema customizado para o PO UI utilizado em aplicações da By Wise Consulting.

Instalação

Faça a instalação global da ferramenta:

npm install @by-wise/po-ui-theme

Você pode ver as opções disponíveis através do comando:

Utilizando o tema customizado

Existem 3 formas de você usar o tema customizado após a publicação.

Configure o arquivo angular.json da aplicação conforme for mais conveniente as suas necessidade.

1 - Usar o arquivo "compilado" com todo o CSS.

"styles": [
  "./node_modules/@by-wise/po-ui-theme/css/po-theme-custom.min.css",
  "src/styles.css"
],

Prós: Modo mais simples de usar e atende aos browser suportados.

Contras: O tema customizado deve ser sempre atualizado conforme o tema padrão for publicado, pois pode ficar sem os novos estilos publicados.

2 - Usar o arquivo de variáveis do tema customizado + arquivo CSS do tema padrão

"styles": [
  "./node_modules/@by-wise/po-ui-theme/css/po-theme-custom-variables.min.css",
  "./node_modules/@po-ui/style/css/po-theme-core.min.css",
  "src/styles.css"
],

Atenção a ordem dos arquivos

Prós: Permite que o usuário do tema customizado aplique customizações em cima do tema customizado na aplicação final.

Contras: O tema customizado deve ser sempre atualizado conforme o tema padrão for publicado e pode ter incompatibilidade com browsers antigos que não dão suporte a variáveis no CSS.

3 - Usar o arquivo de variáveis do tema padrão + variáveis do tema customizado + arquivo CSS do tema padrão

"styles": [
  "./node_modules/@po-ui/style/css/po-theme-default-variables.min.css",
  "./node_modules/@by-wise/po-ui-theme/css/po-theme-custom-variables.min.css",
  "./node_modules/@po-ui/style/css/po-theme-core.min.css",
  "src/styles.css"
],

Atenção a ordem dos arquivos

Prós: Não corre risco de perder novos estilos, permite que o usuário do tema customizado aplique customizações em cima do tema customizado na aplicação final.

Contras: Pode ter incompatibilidade com browsers antigos que não dão suporte a variáveis no CSS.

Atenção: Para saber quais browsers dão suporte a variáveis você pode consultar a ferramenta Can I use.