Colors & tokens
Semantic app-* colors
Colors are space-separated RGB channel variables, exposed to Tailwind as app-* colors so opacity modifiers work (bg-app-strong/20). They change with the theme.
app-bgapp-cardapp-borderapp-textapp-mutedapp-softapp-strong| Token | CSS variable | Use |
|---|---|---|
app-bg | --color-app-bg | Page background, input fill |
app-card | --color-app-card | Surfaces: cards, dialogs |
app-border | --color-app-border | Borders and dividers |
app-text | --color-app-text | Primary text |
app-muted | --color-app-muted | Secondary text, labels |
app-soft | --color-app-soft | Titles, emphasis |
app-strong | --color-app-strong | Primary actions, focus rings |
Other tokens: --xd-z-modal (80), --xd-z-popover (85, menus, pickers, popovers), --xd-z-toast (90) and --xd-z-tooltip (100) control overlay stacking, and the preset adds the fade-up and indeterminate animations.