Shadow

PDS는 서로 다른 문제를 푸는 3계열을 유지한다. 한 계열로 통합하지 않는다.

(a) Box Shadow — 사각 카드·버튼·다이얼로그

직사각형 요소의 엘레베이션. 카드·팝오버·모달에 주로 쓴다.

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

<div style={{ boxShadow: "var(--pds-shadow-md)" }} />

filter: drop-shadow()는 실제 모양의 알파 채널을 따라 그림자를 그린다. squircle로 깎인 외곽이나 꼬리가 있는 팝오버, SVG 아이콘에서 반드시 이 계열을 사용.

drop-xs

drop-sm

drop-md

drop-lg

drop-xl

<svg style={{ filter: "var(--pds-drop-md)" }} />

넓게 번지는 halo. 포커스 상태와 AI 인디케이터에서 쓴다.

glow-sm

glow-md

<div style={{ boxShadow: "var(--pds-glow-sm)" }} />