기초

모양과 높이

반경 한 가족과 동심원 규칙, 선 두께, 초점 링, 그림자 3단계와 다크에서 톤으로 높이를 표현하는 법.

반경

반경은 한 가족이다. 같은 역할은 언제나 같은 반경이고, 위젯과 카드는 같은 계열을 쓴다. 자기만의 반경을 가진 카드는 만들지 않는다.

--cb-radius-xs · …행 안 칩, 인라인 태그

--cb-radius-sm · …입력, 작은 버튼

--cb-radius-md · …목록 묶음, 입력 틀, 카탈로그 틀

--cb-radius-lg · …카드. 떠 있는 면은 모두 이 값(--cb-radius-float): 메뉴, 팝오버, 피커, 대화상자, 시트 위쪽, 토스트

--cb-radius-xl · …위젯, 히어로 패널

--cb-radius-pill · …캡슐 컨트롤, 세그먼트, 탭 막대

값은 지금 페이지에 적용된 CSS에서 읽습니다.

중첩된 면은 동심원 규칙을 따른다: 안쪽 반경 = 바깥 반경 − 안쪽 여백(최소 6). 위젯 26 / 여백 16 → 안쪽 10.

실제 컴포넌트: 바깥 xl(26) − 여백 16 = 안쪽 sm(10)

읽은 기간 · 9월 21일–10월 20일

선은 1px. --cb-line은 장식(목록 행 구분)에만 쓴다(대비 약 1.3:1). 입력 테두리처럼 유일한 경계가 되는 선은 --cb-line-strong(3:1 이상).
초점 링: outline 2px solid --cb-focus, offset 2px. box-shadow로 링을 만들지 않는다 — forced-colors에서 사라진다.
offset 덕분에 링은 컨트롤 채움이 아니라 바깥 바탕에 닿는다. 위젯 색면 안의 컨트롤은 그 색면의 ink를 링 색으로 쓴다.
초점 링은 애니메이션하지 않는다.

실제 컴포넌트: Tab으로 초점을 옮겨 보라

라이트

다크

높이는 4단계다. 다크에서는 그림자가 잘 보이지 않아 톤(surface-raised)과 1px 밝은 경계(--cb-raised-edge)로 높이를 표현한다. forced-colors에서는 그림자를 끄고 테두리로 대체한다.

실제 컴포넌트: 0–3단계, 라이트와 다크

라이트

0—목록, 본문 카드 — 캔버스 위 surface, 그림자 없음

1--cb-shadow-1위젯, 카드 hover

2--cb-shadow-2메뉴, 팝오버, 툴팁

3--cb-shadow-3시트, 대화상자

다크

0—목록, 본문 카드 — 캔버스 위 surface, 그림자 없음

1--cb-shadow-1위젯, 카드 hover

2--cb-shadow-2메뉴, 팝오버, 툴팁

3--cb-shadow-3시트, 대화상자