Estilizar componentes (ComponentStyle)

ComponentStyle encapsula toda a aparência de um componente. É construído com API fluente e aplicado com componente.style(...).

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // ComponentStyle, Styles
import dev.crossfly.ui.graphics.*; // Relative

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // ComponentStyle montado do zero, aplicado com .style(...)
      Button salvar = new Button("Salvar");
      salvar.style(new ComponentStyle()
         .backColor(0xFF0173ED)          // fundo azul (ARGB)
         .textColor(0xFFFFFFFF)          // texto branco
         .borderColor(0)                 // sem borda
         .borderRadius(0.6f)             // cantos arredondados
         .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))  // padding interno (l,t,r,b)
         .autoWidth(Relative.ofScreen(0.6f))
         .pressable());                  // reage ao toque
      add(LAY_AUTO, salvar);

      // Recomendado: derivar do estilo do tema e só ajustar o necessário
      Button tema = new Button("Cor do tema");
      tema.style(Styles.button()
         .backColor(Styles.primaryColor) // PalColor do tema (segue claro/escuro)
         .borderRadius(1f));
      add(LAY_AUTO, tema);
   }
}

Os trechos abaixo mostram só o miolo (o que vai dentro de onShow()). Para rodar, coloque-os no esqueleto MainWindow acima.

Uso básico

Button salvar = new Button("Salvar");
salvar.style(new ComponentStyle()
   .backColor(0xFF0173ED)              // fundo azul (ARGB)
   .textColor(0xFFFFFFFF)              // texto branco
   .borderColor(0)                     // sem borda
   .borderRadius(0.6f)                 // cantos arredondados
   .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))      // padding interno
   .pressable());                      // reage ao toque

Aplicar por estado

salvar.style(normal)
      .focusedStyle(comFoco)     // enquanto focado
      .pressedStyle(apertado);   // enquanto pressionado

Partir de um estilo do Skin (recomendado)

Em vez de montar do zero, derive de um estilo do Skin para herdar fonte/gaps/cores do tema:

// pega o estilo de botão do tema atual e só ajusta o que precisa
salvar.style(Styles.button()
   .backColor(Styles.primaryColor)     // usa a cor primária do tema
   .borderRadius(1f));

Propriedades principais (setters fluentes)

Cores: int ARGB ou PalColor

• int ARGB (0xAARRGGBB) — cor fixa: 0xFF0173ED.
• PalColor (de Styles/ColorScheme) — cor do tema, que se re-resolve sozinha ao trocar claro/escuro: Styles.primaryColor, Styles.textColor. Prefira PalColor para acompanhar o tema.

Boas práticas

• Derive de Styles.button()/Styles.label()/Styles.textField() em vez de recriar tudo.
• Use PalColor do tema (Styles.primaryColor, cs.surface) — cor fixa não segue o modo escuro.
• Espaçamentos com Gap.ofFont(...) (escala com a fonte) — nunca pixels fixos.

Erros comuns

• Chamar setStyle(...) — o método é style(...).
• Usar new Color(...) — a classe Color foi removida; use int ARGB ou ColorUtils.
• Cor fixa em toda a UI e depois estranhar que o modo escuro “não pega”.

Veja também

• Esquemas de cores · Modo claro/escuro · Skins