Scrums.comSorted UI@scrums/sorted-ui v0.1.0scrums.com
Materials06
/06Materials

Radius and elevation are fused into one named tier so a component picks a single value that carries both — 3 tiers total, because Scrums' radius never varies and elevation is shadow-free.


material-surface
hair-2 border · no accent edge · resting
material-elevated
hair-4 border + 2px blue top edge · menus/modals/dropdowns — one tier covers all three
material-overlay
scrim backdrop behind an elevated surface

  • One property, not two — a component declares material="elevated", never sets border and accent-edge separately
  • No stacking — two Materials never nest on the same element; extra lift is delegated to a new element
  • Decorative, not semantic — role="dialog" is still set independently; Material carries zero ARIA meaning
  • Lowest-tier-that-works wins — reach for material-surface before material-elevated