Colors & Styling¶

Color, border, padding, and modifiers use one vocabulary on Field, GridSettings, and components.

Color¶

A color can be a name, a hex string, an RGB tuple, or a Tailwind shade.

Field(foreground="violet")
Field(foreground="#a78bfa")
Field(foreground=(167, 139, 250))
Field(foreground="violet-400")

foreground sets text color; background fills the slot (by default when a background is set). color= is a deprecated alias for foreground.

Tailwind shades cover the default palette (slate, violet, emerald, …) at weights 50–950.

from xnano import render
from xnano.components.text import Text

render(
    Text(" violet ", background="violet-500", foreground="white"),
    Text("  hex   ", background="#0ea5e9", foreground="black"),
    Text("  rgb   ", background=(244, 63, 94), foreground="white"),
    gap=1,
)

Borders and modifiers¶

Field(
    border="rounded",
    modifiers=["bold", "italic"],
)

Border styles include "plain", "rounded", "double", "thick", "quadrant_inside", and "quadrant_outside". Modifiers include "bold", "dim", "italic", "underline", "slow_blink", "rapid_blink", and "reversed".

from xnano import BaseGrid, Field, render

class Card(BaseGrid):
    label: str = Field(
        default="styled",
        border="rounded",
        modifiers=["bold"],
        foreground="violet-400",
        padding=1,
    )

render(Card())

Tailwind classes (experimental)¶

Anywhere a field accepts class_name, you can use a utility string instead of individual keywords:

Field(class_name="text-violet-400 bg-slate-900 p-2 rounded-lg")

Cell-level classes (color, padding, margin, border) lower into the same style as keyword arguments. Utilities without a cell equivalent (flex-*, shadow-*, transition-*, …) are ignored by the layout pipeline.

Keyword arguments and class_name resolve to the same Style. Use keywords when a value is computed; use class_name when you already have a utility string.