Sprites

The package ships twelve generated 9-slice sprites, used as element backgrounds.

.card   { background: sprite(Rounded8) var(--card); }
.pill   { background: sprite(Rounded24) var(--chip); }
.avatar { background: sprite(Circle) var(--panel); }

The set

Sprite	Shape
Square	a plain rectangle, no rounding
Rounded4	4 mm corners
Rounded8	8 mm corners
Rounded12	12 mm corners
Rounded16	16 mm corners
Rounded24	24 mm corners, effectively a pill on short elements
Circle	a circle
Border4	4 mm corners, outline only
Border8	8 mm corners, outline only
Border12	12 mm corners, outline only
Border16	16 mm corners, outline only
Border24	24 mm corners, outline only

All are white, so the element's colour is the tint. They are 9-sliced, so a sprite stretches to any size without distorting its corners.

sprite() versus radius

Two ways to get a rounded background:

.a { background: sprite(Rounded8) var(--card); }
.b { background: var(--card); radius: 8; }

radius picks the matching sprite for you, snapping to the nearest of 4, 8, 12, 16 and 24. Both are bake only in effect: the sprite is chosen when the prefab is built.

Use sprite() when you want to be explicit, radius when the value comes from a variable.

Borders

The border property draws a separate outline image on top, using the Border* sprite matching the element's corner radius:

input {
  background: sprite(Rounded8) var(--surface);
  border: var(--border);
  transition: border 0.12s out-quad;
}
input:hover { border: var(--accent); }

border is animatable, so an input can highlight on hover. border: none removes it.

Swapping at runtime

SetBackground(card, "Rounded16");

The sprite must be baked into the view: mentioned by one of its sheets, or preloaded on the root.

<view name="Card" sprites="Rounded16 Circle">

Regenerating

AUI/Generate Sprites rewrites the PNGs under the package's Sprites/ folder. They are committed, so you only need this if you are changing the package itself.

Next

• Style properties for background, border and radius.
• Icons for the icon set.