Problem
The avatar overlap ring is hardcoded to the page background token: AvatarGroup children, AvatarGroupCount, and AvatarBadge all use ring-2 ring-bg (www/src/registry/ui/avatar/base.tsx). On any other surface — a card (bg-card), popover, sidebar — the ring renders as a visible page-colored halo instead of blending into the surface.
Hit on the landing Controls showcase card; worked around locally with *:data-avatar:ring-card / ring-card overrides.
Suggested fix
A ring-follows-surface mechanism instead of a fixed token, e.g. a --surface-bg CSS variable that surface components (card, popover, modal…) set and the avatar ring consumes (ring-(--surface-bg,var(--color-bg))). Fixes every nesting without per-usage overrides. Other ring-bg/outline-bg consumers in the registry likely have the same issue and could share the mechanism.
Problem
The avatar overlap ring is hardcoded to the page background token:
AvatarGroupchildren,AvatarGroupCount, andAvatarBadgeall usering-2 ring-bg(www/src/registry/ui/avatar/base.tsx). On any other surface — a card (bg-card), popover, sidebar — the ring renders as a visible page-colored halo instead of blending into the surface.Hit on the landing Controls showcase card; worked around locally with
*:data-avatar:ring-card/ring-cardoverrides.Suggested fix
A ring-follows-surface mechanism instead of a fixed token, e.g. a
--surface-bgCSS variable that surface components (card, popover, modal…) set and the avatar ring consumes (ring-(--surface-bg,var(--color-bg))). Fixes every nesting without per-usage overrides. Otherring-bg/outline-bgconsumers in the registry likely have the same issue and could share the mechanism.