File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-19
08-14
08-14
08-18
08-18
08-14
08-18
08-18
08-19
08-19
// 토큰 접근 함수. 없는 이름은 `@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}");
}