Foundations / Elevation
그림자 (Elevation)
표면이 배경에서 얼마나 떠 있는지 3단계로 표현합니다. 다크 모드에서는 그림자 색이 더 진해집니다.
단계 (Levels)
shadcn의 shadow-sm · shadow-md · shadow-lg도 각각 1·2·3단계를 따릅니다.
Elevation/1shadow-elevation-1y1 b3 + y1 b2
Elevation/2shadow-elevation-2y6 b16 s-2 + y2 b4
Elevation/3shadow-elevation-3y16 b40 s-6 + y4 b10
- Elevation/1목록 행·입력 필드처럼 배경에서 살짝만 떠야 하는 요소
- Elevation/2카드·패널·대시보드 위젯처럼 콘텐츠를 묶어 배경과 분리하는 표면
- Elevation/3바텀시트·모달·팝오버·토스트처럼 다른 콘텐츠 위에 일시적으로 겹치는 레이어
포커스 링 (Focus Ring)
키보드 포커스 표시용 3px 링입니다. border/focus 색을 씁니다.
shadow-focus