# Styling components

> ComponentStyle — fluent API for a component's color, border, corners, gaps, font and shadow.

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

# Styling components (`ComponentStyle`)

`ComponentStyle` encapsulates a component's **entire** appearance. It is built with a **fluent API** and
applied with `componente.style(...)`.

## Complete example (copy, paste and run)
```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

/** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // ComponentStyle built from scratch, applied with .style(...)
      Button salvar = new Button("Salvar");
      salvar.style(new ComponentStyle()
         .backColor(0xFF0173ED)          // blue background (ARGB)
         .textColor(0xFFFFFFFF)          // white text
         .borderColor(0)                 // no border
         .borderRadius(0.6f)             // rounded corners
         .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))  // internal padding (l,t,r,b)
         .autoWidth(Relative.ofScreen(0.6f))
         .pressable());                  // reacts to touch
      add(LAY_AUTO, salvar);

      // Recommended: derive from the theme style and only adjust what's needed
      Button tema = new Button("Cor do tema");
      tema.style(Styles.button()
         .backColor(Styles.primaryColor) // theme's PalColor (follows light/dark)
         .borderRadius(1f));
      add(LAY_AUTO, tema);
   }
}
```
> The snippets below show **only the core** (what goes inside `onShow()`). To run them, place them in the `MainWindow` skeleton above.

## Basic usage
```java
Button salvar = new Button("Salvar");
salvar.style(new ComponentStyle()
   .backColor(0xFF0173ED)              // blue background (ARGB)
   .textColor(0xFFFFFFFF)              // white text
   .borderColor(0)                     // no border
   .borderRadius(0.6f)                 // rounded corners
   .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))      // internal padding
   .pressable());                      // reacts to touch
```

## Apply per state
```java
salvar.style(normal)
      .focusedStyle(comFoco)     // while focused
      .pressedStyle(apertado);   // while pressed
```

## Start from a Skin style (recommended)
Instead of building from scratch, **derive** from a `Skin` style to inherit the theme's font/gaps/colors:
```java
// takes the button style from the current theme and only adjusts what's needed
salvar.style(Styles.button()
   .backColor(Styles.primaryColor)     // uses the theme's primary color
   .borderRadius(1f));
```

## Main properties (fluent setters)
| Setter | Effect |
|---|---|
| `backColor(int\|PalColor)` | background color (`0` = transparent) |
| `textColor(int\|PalColor)` | text color |
| `borderColor(int)` · `borderThick(float)` | border (`0` = no border) |
| `borderRadius(float)` / `borderRadius(tl,tr,bl,br)` | rounded corners |
| `font(Font)` | font — e.g. `Font.get(1.25f, BOLD)` |
| `ingap(Gap)` / `outgap(Gap)` | inner padding / outer margin |
| `icongap(Gap)` · `iconColor(int)` | icon space and color |
| `autoWidth(Relative)` / `autoHeight(Relative)` | responsive automatic size |
| `textAlign(Position h, Position v)` | text alignment |
| `shadow(offX, offY, blur, color)` | shadow |
| `pressable()` | enables highlight on press |

## Colors: `int` ARGB or `PalColor`
- **`int` ARGB** (`0xAARRGGBB`) — fixed color: `0xFF0173ED`.
- **`PalColor`** (from `Styles`/`ColorScheme`) — **theme** color, which re-resolves itself when switching
  light/dark: `Styles.primaryColor`, `Styles.textColor`. **Prefer `PalColor`** to follow the theme.

## Best practices
- Derive from `Styles.button()`/`Styles.label()`/`Styles.textField()` instead of recreating everything.
- Use theme `PalColor` (`Styles.primaryColor`, `cs.surface`) — a fixed color does not follow dark mode.
- Spacing with `Gap.ofFont(...)` (scales with the font) — never fixed pixels.

## Common mistakes
- Calling `setStyle(...)` — the method is **`style(...)`**.
- Using `new Color(...)` — the `Color` class was removed; use `int` ARGB or `ColorUtils`.
- Fixed color throughout the UI and then wondering why dark mode "doesn't take".

## See also
- [Color schemes](/docs/ui/theming/color-schemes) · [Light/dark mode](/docs/ui/theming/dark-mode) · [Skins](/docs/ui/theming/skins)