Foundations

컴포넌트가 공유하는 값과 규칙이다. 기본값만으로 동작하므로 커스터마이징을 시작할 때 읽으면 된다.

바꿀 수 있는 것과 없는 것

기준은 하나다. 잘못 바꿨을 때 화면에 드러나면 열고 드러나지 않으면 막는다.

대상	창구	이유
치수 · 모양 · 선 두께	컴포넌트별 CSS 변수 40개	값을 바꾸면 결과가 바로 보이고 되돌리기도 쉽다
색	브랜드 프리셋 185색 또는 `className`	배경만 바꾸면 짝인 글자색은 라이브러리 값이 남아 대비가 소리 없이 깨진다
포커스 링 두께	없다	얇아져도 키보드로 조작하는 사용자에게만 영향이 간다

컴포넌트별 색 변수는 제공하지 않는다. 깨진 대비는 저시력 사용자에게만 나타난다. semantic 변수를 :root 에서 덮어쓰는 방법도 같은 이유로 안내하지 않는다 — action-primary 를 바꿔도 action-primary-fg 는 그대로 남는다.

문서 구성

값이 무엇인가 283개

쓸 수 있는 값의 목록과 이름 규칙이다.

디자인 토큰 — 전량 목록과 이름 규칙
색 — 역할별 색과 12단계 팔레트
타이포그래피 — 크기 · 행간 · 자간 스케일
아이콘 — 크기 4단계와 접근 이름
간격과 크기 — 간격 스케일과 컨트롤 높이
모양과 선 — 모서리, 선의 색과 두께
깊이 — 면의 층, 그림자, 쌓임 순서
모션 — 시간, 곡선, 눌림 배율

언제 무엇을 고르나

상태가 겹칠 때의 우선순위와 접근성 계약이다. 컴포넌트를 직접 스타일링할 때 본다.

상태 — hover · disabled · error 가 겹칠 때 무엇이 이기나
접근성 — 대비 · 터치 영역 · 포커스 · 모션 감소

어떻게 바꾸나

공개 변수 40개의 전체 목록과 막아둔 자리다.

커스터마이징 — 공개 변수 40개와 막아둔 자리

토큰 표와 변수 표는 SCSS 에서 자동 생성한다.