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)

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

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

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:

// 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”.

Styling components (ComponentStyle)