File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// ─────────────────────────────────────────────────────────────────────────────
// 타이포그래피 토큰
//
// 폰트 패밀리는 **호스트 앱이 주입하는 계약**이다 — `@fox`는 `--app-font-sans` /
// `--app-font-mono`를 참조만 하고 폰트 파일을 소유하지 않는다. Next.js는 `next/font`가
// 앱의 layout에서 CSS 변수를 만들어 주므로(폰트 최적화·자체 호스팅이 앱 책임),
// `@fox` 폴더를 다른 프로젝트로 복사해도 그 프로젝트의 폰트를 그대로 따른다.
// 미주입 시에도 깨지지 않도록 `var()` 폴백을 반드시 둔다 — 폴백 없는 `var()`가
// undefined면 font-family 선언 전체가 무효가 된다.
//
// 개별 스칼라(size/weight/…)보다 **프리셋(`$typo`)을 우선 사용**한다. 크기·행간·
// 자간·굵기는 함께 움직여야 의도한 타이포가 되므로, 화면에서 넷을 따로 고르게 두면
// 조합이 무한히 갈라진다. `@include fox.typo(title-md)` 한 줄로 넷이 함께 적용된다.
//
// ⚠️ 아래 값·이름은 임시 플레이스홀더다. 실제 타입 스케일은 Figma 확정 시 교체한다.
// ─────────────────────────────────────────────────────────────────────────────
$font-family: (
sans: (var(--app-font-sans, system-ui), "Apple SD Gothic Neo", sans-serif),
mono: (var(--app-font-mono, ui-monospace), monospace)
);
$font-weight: (
regular: 400,
medium: 500,
semibold: 600,
bold: 700
);
// 타이포 프리셋 — size / line-height / weight / letter-spacing 4종을 한 묶음으로.
// 1rem = 10px 기준이므로 1.6rem = 16px.
$typo: (
display-lg: (size: 4.8rem, line-height: 1.2, weight: 700, letter-spacing: -0.02em),
display-md: (size: 4rem, line-height: 1.2, weight: 700, letter-spacing: -0.02em),
display-sm: (size: 3.2rem, line-height: 1.25, weight: 700, letter-spacing: -0.02em),
headline-lg: (size: 2.8rem, line-height: 1.3, weight: 700, letter-spacing: -0.015em),
headline-md: (size: 2.4rem, line-height: 1.35, weight: 700, letter-spacing: -0.015em),
headline-sm: (size: 2rem, line-height: 1.4, weight: 700, letter-spacing: -0.01em),
title-lg: (size: 1.8rem, line-height: 1.45, weight: 600, letter-spacing: -0.01em),
title-md: (size: 1.6rem, line-height: 1.5, weight: 600, letter-spacing: 0),
title-sm: (size: 1.4rem, line-height: 1.5, weight: 600, letter-spacing: 0),
body-lg: (size: 1.6rem, line-height: 1.6, weight: 400, letter-spacing: 0),
body-md: (size: 1.4rem, line-height: 1.6, weight: 400, letter-spacing: 0),
body-sm: (size: 1.2rem, line-height: 1.55, weight: 400, letter-spacing: 0),
label-lg: (size: 1.4rem, line-height: 1.4, weight: 600, letter-spacing: 0),
label-md: (size: 1.3rem, line-height: 1.4, weight: 500, letter-spacing: 0),
label-sm: (size: 1.2rem, line-height: 1.35, weight: 500, letter-spacing: 0.01em)
);