@portinari/theme-cli
Advanced tools
Ferramenta que vai ajudar na criação de temas customizados para o Portinari UI.
Faça a instalação global da ferramenta:
npm install -g @portinari/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-portinari-theme
Isso irá gerar um novo diretório com o nome my-custom-portinari-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
--nameinformando 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.jsonadicionando 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.
"styles": [
"node_modules/my-custom-portinari-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.
"styles": [
"node_modules/my-custom-portinari-theme/css/po-theme-custom-variables.min.css",
"node_modules/@portinari/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.
"styles": [
"node_modules/@portinari/style/css/po-theme-default-variables.min.css",
"node_modules/my-custom-portinari-theme/css/po-theme-custom-variables.min.css",
"node_modules/@portinari/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.
FAQs
cli theme
We found that @portinari/theme-cli demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.