배경과 입체감 (Elevation)
v1의 5단계 shadow와 4단계 bg-elevation 클래스를 이식했어요. bg-elevation은 PodoThemeProvider의 data-color-scheme과 v1의 data-color-mode를 모두 인식하며, 속성이 없으면 시스템 다크 모드를 따릅니다.
그림자
shadow-1부터 shadow-5까지 순서대로 더 넓고 진한 그림자를 적용합니다.
.shadow-1.shadow-2.shadow-3.shadow-4.shadow-5| Class | box-shadow |
|---|---|
.shadow-1 | 0px 6px 18px -3px rgba(50, 50, 50, 0.06) |
.shadow-2 | 0px 8px 23px -3px rgba(50, 50, 50, 0.1) |
.shadow-3 | 0px 9px 30px -3px rgba(50, 50, 50, 0.12) |
.shadow-4 | 0px 9.995px 46px -3px rgba(50, 50, 50, 0.12) |
.shadow-5 | 0px 13px 63px -3px rgba(50, 50, 50, 0.14) |
배경 단계
base는 bg-elevation, 나머지는 bg-elevation-{n}을 사용해요. v1 동작과 같이 2·3단계 그림자는 다크 모드에서 제거됩니다.
.bg-elevation-1#ffffff / #18181b.bg-elevation-2#ffffff / #242429.bg-elevation-3#ffffff / #2c2c31.bg-elevation#fafafa / #09090b| Class | Light | Dark | Shadow |
|---|---|---|---|
.bg-elevation-1 | #ffffff | #18181b | none |
.bg-elevation-2 | #ffffff | #242429 | shadow-1 (light) |
.bg-elevation-3 | #ffffff | #2c2c31 | shadow-2 (light) |
.bg-elevation | #fafafa | #09090b | none |
사용 예제
Elevated card
<link rel="stylesheet" href="/assets/podo-ui/styles.css" />
<div class="bg-elevation-2 r-5 utility-card">Elevated card</div>