Nyte
Foundations

Shadows

Elevation in four steps, inked warm

import { shadow } from "@nyte-ai/ui/styles/vars.stylex";
shadow.shadowSmButtons, switches, slider thumbs, tabs
shadow.shadowMdOutlineTooltips, toasts: a drop plus a hairline
shadow.shadowLgFloating surfaces, select popups
shadow.shadowXlDialogs

Rules

  • The elevation shadows are inked in a warm near-black at 3 to 19 percent alpha, not neutral grey, so they sit on the warm gray ramp.
  • Height follows distance from the page: controls take shadowSm, popups shadowLg, modal popups and dialogs shadowXl.
  • shadowMdOutline adds a hairline that sits outside in light mode and inside in dark mode, where a drop shadow alone would vanish.
  • Popups share one frame, floatingSurfaceStyles in floating-surface.stylex.ts: material, radius.surface, shadowLg, and an inset hairline. Compose it instead of restating them.