O que são Estilos?

O sistema de estilização da Crapp UI é composto por três níveis principais que se complementam na definição final do estilo visual de um componente:

• Theme: Define as configurações de estilo globais. No CrappUIThemeProvider é feito o cadastro de temas completos, onde cada tema é um conjunto de valores padrão (cores, tamanhos, espaçamentos, etc). Esse tema pode ser quebrado em níveis menores (Tag e Variant) para permitir customizações mais específicas.

• Tag: Representa uma categoria ou tipo de componente (como botão, texto, imagem etc), definido via o typedef CrappUIStyleTagData. Cada tag pode definir uma variação de estilo para um tipo de componente. Assim, mesmo dentro de um tema, componentes com tags diferentes podem ter apresentações específicas.

• Variant: É uma variação específica dentro de uma tag (por exemplo, um botão pode ter variações “primário” ou “secundário”). Essa informação é definida através do typedef CrappUIStyleVariantData e permite que o mesmo tipo de componente (mesma tag) tenha comportamentos visuais distintos conforme a variação selecionada.

Além desses níveis, o próprio componente visual possui uma propriedade style que pode conter customizações diretas. Essa propriedade é do tipo CrappUIStyleData e reúne os dados de cor, fonte, tamanho, espaçamento, cantos, peso da fonte e outras propriedades relacionadas ao visual.

Cada componente, ao ser criado, deve ter instruções direta de como cada propriedade do estilo o afeta visualmente, dando total controle criativo ao desenvolvedor. Não é necessário se utilizar de todas as propriedades, apenas o que for conveniente.

Os componentes visuais da Crapp UI já possuem sua própria implementação e esta documentação explicita quais propriedades do estilo realmente afetam o componente em questão.

Durante a renderização, o CrappUIStyleManager monta uma “árvore” de estilos passando pelos níveis – a partir do componente atual até seus pais – e compila uma sequência de estilos (Theme, Tag, Variant e a propriedade style local). Essa sequência é mesclada para gerar um conjunto final de propriedades visuais a ser aplicado, garantindo que as customizações locais sobrescrevam os valores herdados quando necessário.

Essa abordagem modular e em camadas permite que a Crapp UI tenha uma configuração de estilo altamente flexível, onde é possível usar um tema padrão e, ao mesmo tempo, fornecer ajustes refinados para tipos específicos de componente e suas variações sem duplicar todo o conjunto de estilos.