Ferramenta que vai ajudar na criação de temas customizados para o PO UI.
Faça a instalação global da ferramenta:
``
npm install -g @po-ui/theme-cli
Você pode ver as opções disponíveis através do comando:
`
po-theme -help
Navegue até o diretório que você deseja e execute o comando:
`
po-theme new my-custom-po-theme
Isso irá gerar um novo diretório com o nome my-custom-po-theme e com os arquivos iniciais
para seu tema.
Acesse o arquivo src/po-theme-custom.css e faça as customizações necessárias.
> Para customização das fontes você deve colocar seus arquivos na pasta src/assets/fonts.
Para fazer o build e preparar o tema para publicação, você deve executar o seguinte comando dentro da
pasta do projeto:
`
po-theme build
> Caso queira atribuir um nome ao arquivo a ser gerado, deve-se utilizar o parâmetro --name informando o nome desejado.
> Se você estiver customizando as fontes do tema, você deve usar o parâmetro --fonts.
Após a execução do comando de build, irá ser gerado uma pasta chamada dist dentro do diretório
do seu projeto.
> Você pode modificar seu package.json adicionando informações sobre o seu pacote, como name, version,
entre outras informações importantes.
Acesse a pasta dist e execute o seguinte comando:
`
npm publish
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.
` json`
"styles": [
"node_modules/my-custom-po-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.
` json`
"styles": [
"node_modules/my-custom-po-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.
` json``
"styles": [
"node_modules/@po-ui/style/css/po-theme-default-variables.min.css",
"node_modules/my-custom-po-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][can-i-use].
[can-i-use]: https://caniuse.com/#search=CSS%20Variables