File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// ─────────────────────────────────────────────────────────────────────────────
// 토큰 접근 함수 — 디자인 시스템 규율을 **컴파일러가 강제**하는 지점.
//
// 화면 코드는 `color: #4f46e5`나 `padding: 13px`를 쓸 수 없고, 반드시
// `color: fox.color(primary)` / `padding: fox.space(3)`로 토큰을 지목해야 한다.
// 존재하지 않는 이름을 쓰면 `@error`로 **빌드가 실패한다** — 오타나 임의 값이
// 리뷰를 통과해 배포까지 흘러가는 경로가 원천 차단된다.
//
// 반환값은 CSS 커스텀 프로퍼티 참조(`var(--fox-*)`)다. 값 자체가 아니라 참조를
// 돌려주므로 (1) 라이트/다크가 런타임에 전환되고 (2) 특정 영역만 토큰을 덮어쓰는
// 스코프 오버라이드가 가능하며 (3) devtools에서 어떤 토큰인지 그대로 보인다.
// ─────────────────────────────────────────────────────────────────────────────
@use "sass:map";
@use "tokens";
/// 토큰 이름을 검증하고 대응하는 CSS 커스텀 프로퍼티 참조를 반환한다.
/// @param {String} $group - 토큰 그룹(커스텀 프로퍼티 접두사에 그대로 쓰인다)
/// @param {String|Number} $name - 토큰 이름
/// @param {Map} $registry - 검증 기준이 되는 토큰 map
@function _token($group, $name, $registry) {
@if not map.has-key($registry, $name) {
@error "[@fox] 알 수 없는 #{$group} 토큰: `#{$name}` — 사용 가능한 값: #{map.keys($registry)}";
}
@return var(--fox-#{$group}-#{$name});
}
@function color($name) {
@return _token("color", $name, tokens.$color);
}
@function space($name) {
@return _token("space", $name, tokens.$space);
}
@function radius($name) {
@return _token("radius", $name, tokens.$radius);
}
@function shadow($name) {
@return _token("shadow", $name, tokens.$shadow);
}
@function duration($name) {
@return _token("duration", $name, tokens.$duration);
}
@function easing($name) {
@return _token("easing", $name, tokens.$easing);
}
@function font($name) {
@return _token("font", $name, tokens.$font-family);
}
@function weight($name) {
@return _token("weight", $name, tokens.$font-weight);
}
@function z($name) {
@return _token("z", $name, tokens.$z);
}
/// 브레이크포인트 원값(rem 리터럴)을 반환한다 — **유일하게 `var()`가 아닌 실제 값을
/// 돌려주는 함수**다. 미디어 쿼리가 `var()`를 해석하지 못하기 때문이다(`tokens/_layout.scss`).
/// 미디어 쿼리 자체는 `media()` 믹스인을 쓰고, 이 함수는 컨테이너 `max-width`처럼
/// 브레이크포인트와 같은 값을 선언에 직접 써야 할 때만 쓴다.
@function bp($name) {
@if not map.has-key(tokens.$breakpoint, $name) {
@error "[@fox] 알 수 없는 breakpoint 토큰: `#{$name}` — 사용 가능한 값: #{map.keys(tokens.$breakpoint)}";
}
@return map.get(tokens.$breakpoint, $name);
}