# Estilizar componentes

> ComponentStyle — API fluente para cor, borda, cantos, gaps, fonte e sombra de um componente.

Source: https://crossfly.dev/pt/docs/ui/theming/styling-components — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 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)
```java
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
```java
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
```java
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:
```java
// 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)
| Setter | Efeito |
|---|---|
| `backColor(int\|PalColor)` | cor de fundo (`0` = transparente) |
| `textColor(int\|PalColor)` | cor do texto |
| `borderColor(int)` · `borderThick(float)` | borda (`0` = sem borda) |
| `borderRadius(float)` / `borderRadius(tl,tr,bl,br)` | cantos arredondados |
| `font(Font)` | fonte — ex. `Font.get(1.25f, BOLD)` |
| `ingap(Gap)` / `outgap(Gap)` | padding interno / margem externa |
| `icongap(Gap)` · `iconColor(int)` | espaço e cor do ícone |
| `autoWidth(Relative)` / `autoHeight(Relative)` | tamanho automático responsivo |
| `textAlign(Position h, Position v)` | alinhamento do texto |
| `shadow(offX, offY, blur, color)` | sombra |
| `pressable()` | habilita destaque ao pressionar |

## 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](/docs/ui/theming/color-schemes) · [Modo claro/escuro](/docs/ui/theming/dark-mode) · [Skins](/docs/ui/theming/skins)