Each step has a job — pick by role, never by lightness. Works the same
in both modes: every demo below consumes var(--bg),
var(--component-bg), var(--border) etc., so
toggling the theme flips them coherently.
App background · step 1
--app-bg
page · canvas · the deepest layer
Elevated surface · step 3
--component-bg
Share link
Modals, popovers, dropdowns, sheets.
Input field · step 1 + 7
--app-bg + --border
Default
Focused — step 8 ring
List · sidebar · step 2
--list-item-bg-*
Files
Transfers
RSS · selected
Action menu · step 3 → 4 → 5
--component-bg-*
Download
Cast to TV
Move to…
Text ramp · steps 9, 11, 12
--text / --text-secondary
Primary headline · step 12
Secondary body · step 11 — metadata, hints, captions.