WidgetLayout

The chrome reference: every key the backend can use to dress a widget.

Applied inside out, always: padding, then background and gradient, then corner clipping, then border, then margin.

json

{
  "margin":  { "top": 0, "left": 16, "right": 16, "bottom": 12 },
  "padding": { "top": 12, "left": 12, "right": 12, "bottom": 12 },
  "corner_radius": 12,
  "background": { "hex": "#FFFFFF", "dark_hex": "#1C1C1E" },
  "gradient": { "colors": [{ "hex": "#4F8CFF" }, { "hex": "#6CB8FF" }], "angle": 90 },
  "border": { "width": 1, "color": "#EAEAEA", "dash_width": 5, "dash_gap": 3 },
  "width": "fill"
}

Field	Type	Description
`margin`	Insets	Space outside the background.
`padding`	Insets	Space between content and the background edge.
`corner_radius`	Number \| Corners	Bare number rounds all corners; object sets top_left, top_right, bottom_left, bottom_right.
`background`	ColorData	Fill behind the padded content.
`gradient`	GradientData	Painted over background when present. angle 0 flows leading to trailing, 90 top to bottom.
`border`	BorderData	width, color, and optional dash_width plus dash_gap for dashes.
`width`	"fill" \| "hug" \| Number	fill stretches, hug fits content, a fraction takes that share of the container. Fractions inside carousels produce peeking cards.