Elevation

카드, 팝오버, 플로팅 서피스를 위한 그림자 레시피.

각 Foundation 스텝(--refineui-elevation-N)은 활성 테마에 따라 라이트·다크 값을 자동으로 전환합니다. 컴포넌트는 Foundation 스텝에 연결된 아래 의도형 alias를 우선 사용하세요. bare 변수를 사용하세요 — 명시적 *light / *dark 접미사는 테마와 무관하게 한 모드로 고정해야 할 때만 필요합니다.

용도	CSS
서피스 / raised / floating	--refineui-elevation-surface \| -raised \| -floating
overlay / modal / toast	--refineui-elevation-overlay \| -modal \| -toast
Foundation 스텝	--refineui-elevation-8
라이트 강제	--refineui-elevation-8light
다크 강제	--refineui-elevation-8dark

shadow2

shadow4

shadow8

shadow16

shadow24

shadow32

shadow64

사용법

.panel {
  box-shadow: var(--refineui-elevation-floating);
}