中文

WAPER / UI

Shadow and borders

Four shadows in light only (all transparent in dark: surface steps and thin edges do the work); tooltips and hover cards get a 0.5px inner edge; dialogs and settings have none. Four border tiers.

Light

--shadow-inline
inline
Inline: floating controls (member pill, scroll-to-bottom)
--shadow-control
control
Control: the composer
--shadow-card
card
Card: 1px edge drawn in the shadow
--shadow-popover
popover
Popover: menus, popovers, toasts
--shadow-edge
edge
Edge: tooltips, hover cards (no drop shadow)

Dark mode: every shadow is transparent, surface steps and thin edges do the work. Dialogs and settings have no shadow in either theme.

On --surface-base
--border-primary · focused inputs, checkbox edges
--border-secondary · inputs at rest, menus, dialogs
--border-tertiary · floating controls, cards
--border-quaternary · dividers
--hairline · rail edge, menus, tooltips (0.5px on 2× screens)
On --surface-elevated
--border-primary · focused inputs, checkbox edges
--border-secondary · inputs at rest, menus, dialogs
--border-tertiary · floating controls, cards
--border-quaternary · dividers
--hairline · rail edge, menus, tooltips (0.5px on 2× screens)

Dark

Loading preview…