Elevation
SPI 디자인 시스템의 그림자(Shadow) 토큰 가이드입니다.
Elevation
4단계 그림자 스케일입니다. rgba(0,0,0) 기반이며, lg는 다중 레이어 shadow입니다.
shadow.0
y: 1px, b: 2px, a: 10%
shadow-xsElement
미세한 표면 분리
shadow.1
y: 2px, b: 4px, a: 12%
shadow-smElement
카드 기본 상태
shadow.2
y: 4px, b: 12px, a: 16%
shadow-mdElement
호버 강조, 드롭다운
shadow.3
multi-layer
shadow-lgElement
모달, 플로팅 레이어
[!NOTE]
다크 테마에서의 Elevation (깊이감) 다크모드에서는 검은색 배경에 검은색 그림자를 사용하기 때문에 물리적인 그림자(Drop Shadow)가 잘 보이지 않는 것이 정상입니다.따라서 다크모드 환경에서는 컴포넌트를 띄울 때 그림자 대신 다음과 같은 속성을 조합하여 깊이감을 표현합니다:
- 테두리 (Border):
border-border를 사용하여 요소의 경계를 명확히 분리합니다.- 표면 색상 (Surface Color): 떠 있는 요소일수록 더 밝은 배경색(
bg-popover또는bg-surface-elevated)을 사용합니다.