File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// ─────────────────────────────────────────────────────────────────────────────
// 레이아웃 토큰 — 브레이크포인트와 z-index 층.
// ─────────────────────────────────────────────────────────────────────────────
// 브레이크포인트는 이 파일에서 **유일하게 CSS 커스텀 프로퍼티로 내보내지 않는
// 토큰**이다. 미디어 쿼리 조건부는 `var()`를 해석하지 않기 때문에
// (`@media (min-width: var(--x))`는 무효), 컴파일타임 SCSS 값이어야만 한다.
// 그래서 브레이크포인트 사용은 `fox.media()` 믹스인 경유가 강제된다.
//
// ⚠️ **미디어 쿼리 안의 `rem`은 브라우저 기본 글자 크기(보통 16px) 기준이다.**
// `html { font-size: 62.5% }`의 영향을 받지 않으므로, 다른 토큰의 "1rem = 10px"
// 규칙이 여기서는 적용되지 않는다. 아래 px 환산을 반드시 함께 본다.
// rem으로 두는 이유: 사용자가 브라우저 글자 크기를 키우면 브레이크포인트도 함께
// 커져 확대 환경에서 레이아웃이 더 일찍 접힌다(px 고정은 이 대응이 불가능하다).
$breakpoint: (
sm: 40rem,
// 640px
md: 48rem,
// 768px
lg: 64rem,
// 1024px
xl: 80rem,
// 1280px
2xl: 96rem
// 1536px
);
// z-index 층 — 숫자를 화면에서 직접 고르지 않게 하려는 토큰이다. 값 사이를 100씩
// 띄워 둔 것은 나중에 층 사이에 새 층을 끼워 넣을 여지를 남기기 위함이다.
$z: (
base: 0,
raised: 100,
sticky: 200,
dropdown: 300,
scrim: 400,
modal: 500,
popover: 600,
toast: 700,
tooltip: 800,
splash: 900
);