Lucent UI
Button
✦ LLM-ready

Migrating to 0.8.0

Three surface tokens were renamed for clarity. If you pass custom tokens to LucentProvider, you’ll need to update them. Everything else is unchanged.


Token renames

Three tokens were renamed. The old names no longer exist in LucentTokens.

BeforeAfterNotes
surfaceDefaultsurfaceComponent background (cards, inputs, dropdowns)
bgMutedsurfaceSecondaryTinted fill layer — footer areas, inset panels, disabled inputs inside a card
(new)surfaceSecondaryWas previously bgMuted; now correctly placed in the surface tier

Who is affected

Only projects passing custom token overrides to LucentProvider. If you’re using the default theme or a brandTokens preset, no changes are needed.

Before

tsx
<LucentProvider tokens={{ surfaceDefault: '#fff', bgMuted: '#f3f4f6' }}>

After

tsx
<LucentProvider tokens={{ surface: '#fff', surfaceSecondary: '#f3f4f6' }}>

Why

surfaceDefault vs bgMuted blurred the line between the page canvas layer (bg*) and the component elevation layer (surface*).

The rename makes the distinction explicit: bg* tokens are for layout regions (body, sidebar, page background); surface* tokens are for component surfaces (cards, modals, inputs). It’s a breaking change but a mechanical find-and-replace for anyone affected.