// ───────────────────────────────────────────────────────────────────────────── // 토큰 접근 함수 — 디자인 시스템 규율을 **컴파일러가 강제**하는 지점. // // 화면 코드는 `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); }