Histórico da Página

...

Mudanças no Style Guide e CSS

Alteração geral no tamanho dos elementos

• Para atender questões de acessibilidade, os elementos foram alterados...

Alterações visuais e de acessibilidade

Como parte da implementação do Animalia Design System (Animalia DS), realizamos ajustes visuais em diversos elementos da interface. Essas alterações têm como objetivo melhorar a experiência do usuário e garantir maior aderência às práticas de acessibilidade.

• Tamanhos dos elementos: botões, campos e demais componentes foram ampliados para facilitar a interação, especialmente em dispositivos móveis e para pessoas com necessidades específicas.

• Cores e contrastes: paleta de cores revisada para assegurar legibilidade e conformidade com recomendações de acessibilidade (WCAG).

• Outros ajustes visuais: espaçamentos, ícones e tipografia foram atualizados para proporcionar uma interface mais consistente, clara e inclusiva.

Manutenção de estilos legados

Para mitigar impactos em cenários específicos, os estilos visuais da versão 1.8.2 ou inferior foram preservados em um diretório dedicado. Esses arquivos devem ser utilizados exclusivamente em formulários e apenas em casos excepcionais, quando a adoção imediata dos novos padrões do Animalia Design System não for viável.

Arquivos disponíveis em Arquivos antigos movidos para /old/*:

• /style-guide/css/old/fluig-style-guide.min.css (Classic)

• /style-guide/css/old/fluig-style-guide-flat.min.css (Flat)

Importante: o uso desses estilos antigos é temporário e não recomendado como solução definitiva. Recomendamos planejar a migração completa para o novo padrão visual o quanto antes.

Paths descontinuados

Alguns caminhos antigos foram removidos e não estão mais disponíveis, retornando erro 404Novo path recomendado (visual 2.0.0):

• /style-guide/css/fluig-style-guide

-flat

• .min.css

Paths descontinuados (erro 404):

• /portal/resources/style-guide/css/fluig-style-guide-flat.min.css

• /portal/resources/style-guide/css/fluig-style-guide-flat.min.css

Path recomendado

O caminho oficial e suportado para utilização de estilos é:

• //portal/resources/style-guide/css/fluig-style-guide-flat.min.css

Melhorias:

• Novas classes helpers no Style Guide.

• Novas classes responsivas de fonte, margin e padding.

• Novas variáveis CSS de tema.

Mudança de Fontes

• Tema Responsivo: Agora usa Lato Regular como font-family padrão.

• Impacto: Pode alterar espaçamento e alinhamento em temas customizados.

Iconografia e Ícones

...

Recomendação: utilize sempre o path acima em em formulários, garantindo compatibilidade com as versões atuais do produto.

Iconografia e ícones

A utilização de ícones também passou por ajustes com a implementação do Animalia Design System no Fluig.

• Ícones antigos (Fluig Icons): Os ícones legados (fluigicon) foram movidos para um arquivo separado. Caso ainda sejam utilizados em formulários, é necessário importá-los manualmente:

  • /style-guide/css/fluig-icons.min.css

• Nova biblioteca de ícones (Animalia Icons): O padrão recomendado são os Animalia Icons (animaliaicon). Assim como no caso dos ícones legados, em formulários eles devem ser importados manualmente:

  • /style-guide/css/animalia-icons.min.css

Mudança nos menus:

...

Observação: essa configuração é exclusiva para formulários. Na plataforma (desenvolvimento de widgets) a importação ocorre automaticamente, não sendo necessário nenhum ajuste adicional.

Menus

Os menus Liquid e Responsive foram atualizados e agora

...

utilizam ícones da biblioteca Animalia Icons.

Mudança de fonte padrão

No Tema Responsivo, a fonte padrão do sistema passou a ser Lato Regular (font-family).

Impacto: É necessário importar explicitamente os arquivos de ícones.

...

Atenção: essa alteração pode impactar o espaçamento e o alinhamento em temas customizados. Recomenda-se revisar estilos personalizados após a atualização.

Melhorias gerais

Foram aplicadas diversas melhorias de desempenho e organização do código:

• Otimização de carregamento

...

• Estilos

  • Inclusão de estilos críticos do sistema com rel="preload"

  .

  • Scripts secundários do sistema carregados com defer

• Novas utilitárias no Style Guide

  • Classes helpers adicionais adicionadas no Style Guide. Consulte a documentação para mais detalhes.

  • Classes responsivas para fontes, margens e paddings, disponível na mesma documentação.

  • Novas variáveis de CSS de tema. Consulte a documentação de temas para mais detalhes.