그림자
그림자는 3단계이고, 높을수록 면이 화면 위로 더 떠 있다는 뜻이다. 그림자는 아주 옅게 쓴다. 카드마다 강한 그림자를 반복하지 않는다. 그림자 토큰은 서비스가 바뀌어도 같다.
그림자 3단계#
shadow(1)
shadow(2)
shadow(3)
| 토큰 | 아래로 이동 | 번짐 | 투명도 | Android 고도 | 용도 | 앱에서 쓴 횟수 |
|---|---|---|---|---|---|---|
카드shadow(1)--tds-shadow-1 | 4px | 14px | 0.06 | 2 | PrimaryButton, Panel, SettingsGroup, RangeSlider 손잡이. | 9 |
떠 있는 요소shadow(2)--tds-shadow-2 | 6px | 18px | 0.1 | 4 | 탭 바 가운데 버튼, CircleButton, 토스트. | 14 |
겹쳐 뜨는 면shadow(3)--tds-shadow-3 | 8px | 22px | 0.16 | 8 | dialog의 중앙 대화상자, Calendar의 드래그 중인 일정. | 2 |
모든 단계의 그림자 색은 라이트에서 #1B2A4E(어두운 남색), 다크에서 #000000(검정)이다. 가로 이동은 없다. CSS로 옮기면 아래 값이 된다.
| 단계 | 라이트 | 다크 |
|---|---|---|
--tds-shadow-1 | 0 4px 14px rgba(27, 42, 78, 0.06) | 0 4px 14px rgba(0, 0, 0, 0.12) |
--tds-shadow-2 | 0 6px 18px rgba(27, 42, 78, 0.1) | 0 6px 18px rgba(0, 0, 0, 0.2) |
--tds-shadow-3 | 0 8px 22px rgba(27, 42, 78, 0.16) | 0 8px 22px rgba(0, 0, 0, 0.32) |
다크 모드#
- 다크 모드에서는 그림자 투명도가 2배가 되고 색은 검정이 된다. 어두운 면 위에서는 옅은 그림자가 보이지 않기 때문이다.
- Android는 다크 모드에서 고도(elevation)를 0으로 둔다.
Panel과SettingsGroup은 다크 모드에서 그림자 대신 1px 테두리(cardBorder)를 쓴다.
고르는 기준#
- 기본은 그림자 없음이다. 면 구분은 먼저 배경색 차이(
canvas위의surface)와 1px 선(line)으로 한다. - 떠 있어야 하는 면에만 그림자를 쓴다. 카드와 버튼은 1, 탭 바 가운데 버튼과 토스트는 2, 겹쳐 뜨는 대화상자는 3이다.
- 목록의 행마다 그림자를 주지 않는다. 행은 홈(
well)이나 구분선으로 나눈다. - 그림자 색을 서비스 주색으로 바꾸지 않는다. 단, 탭 바 가운데 버튼은
primaryStrong그림자를 쓴다.
웹에서 쓰기#
그림자 변수 쓰기
.panel {
background: var(--tds-surface);
border-radius: var(--tds-radius-card);
box-shadow: var(--tds-shadow-1);
}앱에서 쓰기
import { shadow } from '@/ui/tokens';
<View style={[styles.card, shadow(1)]} />