// 토큰 접근 함수. 없는 이름은 `@error`로 빌드를 실패시키고 사용 가능한 목록을 출력한다. // 값이 아니라 `var(--fox-*)` 참조를 돌려주므로 라이트/다크·PC/모바일이 런타임에 전환된다. @use "sass:map"; @use "tokens"; /// 토큰 이름을 검증하고 커스텀 프로퍼티 참조를 반환한다. @function _token($group, $key, $registry, $var-name) { @if not map.has-key($registry, $key) { @error "[@fox] 알 수 없는 #{$group} 토큰: `#{$key}` — 사용 가능한 값: #{map.keys($registry)}"; } @return var(--fox-#{$var-name}); } @function color($name) { @return _token("color", $name, tokens.$color, "color-#{$name}"); } @function primitive($name) { @return _token("primitive", $name, tokens.$primitive, "primitive-#{$name}"); } @function theme($name) { @return _token("theme", $name, tokens.$theme, "theme-#{$name}"); } @function number($name) { @return _token("number", $name, tokens.$number, "number-#{$name}"); } @function font-family($name) { @return _token("font-family", "family-#{$name}", tokens.$font, "font-family-#{$name}"); } @function font-weight($name) { @return _token("font-weight", "weight-#{$name}", tokens.$font, "font-weight-#{$name}"); } @function border($name) { @return _token("border", "border-#{$name}", tokens.$size, "border-#{$name}"); } @function padding($name) { @return _token("padding", "padding-#{$name}", tokens.$size, "padding-#{$name}"); } @function gap($name) { @return _token("gap", "gap-#{$name}", tokens.$size, "gap-#{$name}"); } @function radius($name) { @return _token("radius", "radius-#{$name}", tokens.$size, "radius-#{$name}"); } @function icon($name) { @return _token("icon", "icon-#{$name}", tokens.$size, "icon-#{$name}"); } @function shadow($name) { @return _token("shadow", "shadow-#{$name}", tokens.$size, "shadow-#{$name}"); } @function backdrop($name) { @return _token("backdrop", "backdrop-#{$name}", tokens.$size, "backdrop-#{$name}"); } @function font-size($name) { @return _token("font-size", "font-size-#{$name}", tokens.$responsive, "font-size-#{$name}"); } @function form($name) { @return _token("form", "form-#{$name}", tokens.$responsive, "form-#{$name}"); } @function grid($name) { @return _token("grid", "grid-#{$name}", tokens.$responsive, "grid-#{$name}"); } @function card($name) { @return _token("card", "card-#{$name}", tokens.$responsive, "card-#{$name}"); } @function modal($name) { @return _token("modal", "modal-#{$name}", tokens.$responsive, "modal-#{$name}"); } @function spacing($name) { @return _token("spacing", "spacing-#{$name}", tokens.$responsive, "spacing-#{$name}"); } @function section($name) { @return _token("section", "section-#{$name}", tokens.$responsive, "section-#{$name}"); }