높이 · 두께 · 모양
빛은 왼쪽 위 하나입니다. 그래서 모든 두께는 오른쪽 아래로 떨어집니다. 우유 마크가 앞면 오른쪽에 옆면을 보여 주는 3/4 시점과 같은 방향입니다.
높이는 다섯 층이고, 층마다 그늘을 그리는 방법이 하나씩 정해져 있습니다. 블러로 번지는 빛 · 그라데이션 광택 · 무늬는 쓰지 않습니다. 반경은 작게 두고, 카드처럼 내용을 담는 면만 오른쪽 위를 카톤 지붕처럼 45° 로 꺾습니다. 두께는 바깥 그림자라 레이아웃 자리를 차지하지 않으므로, 카드 사이 간격과 컨테이너의 오른쪽 · 아래 여백이 두께를 흡수합니다. 정렬은 두께가 아니라 면을 기준으로 합니다.
높이 사다리
바닥 → 파임 → 카드 → 솟음 → 뜸. 지금 테마로 그렸습니다. 상단 바의 테마 버튼으로 다크를 확인합니다.
--uyoo-bg
페이지 · 상단 바
--uyoo-shadow-well
입력 · 트랙 · 표 헤더
--uyoo-shadow-card
두께 (2,3) + 지붕
--uyoo-shadow-key
키캡 (2,2)
--uyoo-shadow-float
메뉴 · 팝오버 · 토스트
누름
키캡은 손을 올리면 1px 솟고, 누르면 두께만큼 대각으로 가라앉습니다. primary 는 hover 에 색을 밝히지 않습니다(밝히면 흰 글자가 4.18:1 로 떨어집니다).
| 키캡 | 쉼 | hover | press | 포커스 | 비활성 |
|---|---|---|---|---|---|
| primary | 추가 | 추가 | 추가 | 추가 | |
| secondary | 공유 | 공유 | 공유 | 공유 |
.key { box-shadow: var(--uyoo-shadow-key); } /* 두께 (2,2) */
.key:hover { transform: translate(-1px, -1px);
box-shadow: var(--uyoo-shadow-key-hover); } /* 1px 솟아 (3,3) */
.key:active { transform: translate(2px, 2px);
box-shadow: var(--uyoo-shadow-key-press); /* 두께만큼 가라앉아 0 */
transition-duration: var(--uyoo-duration-press); } /* 90ms, 뗄 때는 150ms */비활성은 두께를 없애고 평평한 파인 면 + 비활성 글자로 바꿉니다. opacity 로 흐리게 하지 않습니다. 포커스 링은 2px primary 이고, 버튼은 두께를 넘어서 보이게 3px 띄웁니다.
3배 확대 — 카드 오른쪽 위
윗변 안쪽 흰 1px · 아랫변 안쪽 어두운 1px · 헤어라인 1px · 옆면 (2,3) · 바닥 그늘 한 겹. 꺾인 변까지 두께가 따라갑니다.
그늘 — 높이별 레시피
높이마다 그늘을 그리는 방법이 하나씩 정해져 있습니다. 두께는 바깥 그림자라 레이아웃 자리를 차지하지 않습니다.
1 파임. 안쪽 위 그늘 1px 2px
2 카드. 윗변 안쪽 흰 1px · 아랫변 안쪽 어두운 1px · 헤어라인 · 옆면(2,3) · 바닥 그늘
3 솟음. 옆면(2,2)
손을 올리면 1px 솟아 옆면(3,3)
누르면 두께만큼 가라앉아 옆면 0
primary 키캡. 옆면은 primary-side
작은 키캡(1,1)
4 뜸. 헤어라인 · 옅은 옆면(2,3) · 넓은 그늘 한 겹
대화상자. 뜸보다 넓고 짙은 그늘
두께
빛은 왼쪽 위 하나라 두께는 오른쪽 아래로 떨어집니다. 우유 마크가 앞면 오른쪽에 옆면을 보여 주는 3/4 시점과 같은 방향입니다.
| 토큰 | 라이트 | 다크 | 쓰는 곳 |
|---|---|---|---|
| --uyoo-card-side | rgba(13, 20, 35, 0.08) | rgba(0, 0, 0, 0.45) | 카드 옆면 색 |
| --uyoo-key-side | #b6c0c9 | #0e1420 | 키캡 옆면 색 |
| --uyoo-depth-card-x | 2px | 2px | 카드 두께(가로) |
| --uyoo-depth-card-y | 3px | 3px | 카드 두께(세로) |
| --uyoo-depth-key | 2px | 2px | 버튼 · 키캡 두께. hover 에 3, press 에 0 |
| --uyoo-depth-chip | 1px | 1px | 체크박스 · kbd 같은 작은 키캡의 두께 |
반경과 지붕 모서리
반경은 작게 둡니다. 카드처럼 내용을 담는 면만 오른쪽 위를 카톤 지붕처럼 45° 로 꺾습니다(corner-shape: bevel). 지원하지 않는 브라우저는 둥근 모서리로 물러납니다.
카드
폭 240px 이상
작은 카드
이름 바꾸기
복제
구현 — 그림자 · 포커스 링이 꺾인 변을 따라간다
.uyoo-card {
border-radius: var(--uyoo-radius-card); /* 6px */
border-top-right-radius: var(--uyoo-chamfer); /* 16px, 폭 240 미만은 --uyoo-chamfer-sm */
corner-top-right-shape: bevel; /* Chrome 139+ */
box-shadow: var(--uyoo-shadow-card);
}
/* 지원하지 않는 브라우저는 둥근 모서리로 물러난다 */
@supports not (corner-top-right-shape: bevel) {
.uyoo-card { border-top-right-radius: var(--uyoo-radius-card); }
}- corner-shape(채택)
- 그림자 · 아웃라인 · 테두리가 꺾인 변을 그대로 따라갑니다. 지원하지 않는 브라우저는 둥근 모서리로 물러납니다.
- clip-path + 감싼 요소
- 모든 브라우저에서 꺾이지만 요소가 둘이 되고, 아웃라인이 잘리고 안쪽 그림자 일부가 끊깁니다.
- 꺾인 자리 비우기
- 카드 머리의 버튼은 오른쪽으로 8px 물립니다(--uyoo-space-2). 꺾인 변에 버튼이 닿지 않게 합니다.
레시피
높이마다 그리는 법이 하나입니다. 컴포넌트는 이 표의 토큰만 씁니다.
| 층 | 토큰 | 그리는 법 | 쓰는 곳 |
|---|---|---|---|
| 0 바닥 | --uyoo-bg | 단색. 무늬 · 블롭 없음 | 페이지 |
| 1 파임 | --uyoo-shadow-well | 안쪽 위 그늘 1px 2px | 입력칸 · 세그먼트 트랙 · 진행 홈 · 표 헤더 · 지표 타일 |
| 2 카드 | --uyoo-shadow-card | 윗변 안쪽 흰 1px · 아랫변 안쪽 어두운 1px · 헤어라인 · 옆면 (2,3) · 바닥 그늘. 오른쪽 위 16px 꺾임 | 카드 · 대화상자 본체 |
| 3 솟음 | --uyoo-shadow-key · -primary · -chip | 옆면 (2,2) · 작은 컨트롤 (1,1). hover (3,3) · press 0 | 버튼 · 체크박스 · 라디오 · 스위치 손잡이 · 세그먼트 선택 칸 · kbd · 페이지 버튼 |
| 4 뜸 | --uyoo-shadow-float · -modal | 헤어라인 · 옆면 (2,3) 옅게 · 넓은 그늘 한 겹. 넓을수록 높다 | 메뉴 · 팝오버 · 툴팁 · 토스트 · 대화상자 |
forced-colors 모드에서는 그림자가 사라지므로 1px 테두리와 아웃라인 포커스로 물러납니다.
레이어(z)
떠 있는 요소(메뉴 · 팝오버)는 자기를 연 레이어보다 위에 옵니다. 대화상자 안에서 연 메뉴가 대화상자 뒤에 깔리지 않게 메뉴 · 팝오버를 대화상자 위에 둡니다. 같은 층끼리는 나중에 붙은 포털이 위입니다.
| 토큰 | 값 | 무엇 |
|---|---|---|
| --uyoo-z-sticky | 10 | 본문 안에 붙는 띠(탭 줄 · 저장 바) |
| --uyoo-z-shell | 20 | 사이드바 · 상단 바 |
| --uyoo-z-scrim | 40 | 드로어 · 대화상자 뒤 가림막 |
| --uyoo-z-dialog | 50 | 대화상자 · 드로어 |
| --uyoo-z-dropdown | 60 | 메뉴 · 선택 목록 |
| --uyoo-z-popover | 60 | 팝오버 |
| --uyoo-z-toast | 70 | 토스트 |
| --uyoo-z-tooltip | 80 | 툴팁 |
| --uyoo-z-skip | 90 | 본문으로 건너뛰기 링크 |