3. Styling

Styling is inline and typed — no stylesheets, no cascade, no specificity. A Style is a Pydantic object each renderer translates to its target (CSS on the web, Qt/Compose properties on native).

from tempest_core import Container, Style, Text, Widget
from tempest_core.style import Color, Edge


def card() -> Widget:
    return Container(
        key="card",
        style=Style(
            padding=Edge.all(16),                    # (1)!
            gap=8.0,
            background=Color.from_hex("#f5f5f5"),     # (2)!
            radius=12.0,
        ),
        children=[Text(content="In a card", key="t")],
    )

1. Edge.all(16) = 16px on all four sides. There's also Edge.symmetric( vertical=…, horizontal=…) and Edge(top=…, right=…, …).
2. Color.from_hex("#f5f5f5") → Color(r, g, b, a). On the web it becomes rgba(...); the value crosses the boundary as {r, g, b, a}.

Implicit animation

Declare a Transition and a property change animates instead of snapping:

from tempest_core.style import Curve, Transition

Style(transition=Transition(duration_ms=300, curve=Curve.EASE_IN_OUT))

Theme = Style values

There's no magic theme engine: a theme is just a set of Color/Style your view applies. Switching themes is the view producing different Styles.

Recap

• Style is typed and inline; no CSS cascade.
• Color.from_hex, Edge.all/symmetric, Transition cover the basics.
• Each renderer translates the same Style to its target.
• See the API reference for everything.