Layer styles

Fill, outline, indicator, overlay, and backdrop compositions

Layer styles name a surface treatment. Palette styles read colorPalette, so they follow accent and status. Surface styles read semantic tokens.

<Box layerStyle="fill.solid" colorPalette="accent" />
<Box layerStyle="overlay" />

Palette treatments

Style	What it sets
`fill.muted`	`colorPalette.muted` + `colorPalette.fg`
`fill.subtle`	`colorPalette.subtle` + `colorPalette.fg`
`fill.surface`	Muted fill with an inset `colorPalette.subtle` ring
`fill.solid`	`colorPalette.solid` + `colorPalette.contrast`
`outline.subtle`	Inset ring, no fill
`outline.solid`	`1px` `colorPalette.solid` border
`indicator.top\|bottom\|start\|end`	Bar using `colorPalette.solid`

Indicator thickness and offset are --indicator-thickness (default 3px) and --indicator-offset-x / --indicator-offset-y.

These do not read colorPalette. They are the floating-panel and dim treatments used by dialogs, menus, and popovers.

Style	What it sets
`overlay`	`bg.overlay`, `radii.panel`, `shadows.overlay`, `--overlay-effect`
`backdrop`	`bg.backdrop`, `--backdrop-effect`

--overlay-effect defaults to blur(10px) via Theme.

Style	What it sets
`disabled`	`opacity: 0.5`, `cursor: not-allowed`
`none`	Empty. Clears an inherited layer style

layerStyle: fill

fill.muted

fill.subtle

fill.surface

fill.solid

layerStyle: outline

outline.subtle

outline.solid

layerStyle: indicator

indicator.top

indicator.bottom

indicator.start

indicator.end

layerStyle: surface

overlay

backdrop

layerStyle: state

disabled

none