File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// 토큰 CSS 출력 — `tokens/`의 SCSS map을 `--fox-*` 커스텀 프로퍼티로 선언한다.
//
// **앱 전체에서 딱 한 번만 로드되어야 한다** (`index.scss` 경유).
// 컴포넌트의 `.module.scss`에서는 절대 `@use` 하지 않는다.
//
// map을 순회해 생성하므로 토큰을 추가할 때 이 파일은 손대지 않는다.
@use "sass:map";
@use "tokens";
:root {
// 기본은 OS 설정 추종. 아래 `[data-theme]` 규칙이 이 값만 덮어써 수동 선택을
// 처리하므로, 색상 값 자체는 `tokens/_color.scss` 한 곳에만 존재한다.
color-scheme: light dark;
@each $name, $value in tokens.$primitive {
--fox-primitive-#{$name}: #{$value};
}
@each $name, $value in tokens.$font {
--fox-font-#{$name}: #{$value};
}
@each $name, $value in tokens.$number {
--fox-number-#{$name}: #{$value};
}
@each $name, $value in tokens.$theme {
--fox-theme-#{$name}: #{$value};
}
// size / color / responsive 는 이름에 그룹이 이미 들어 있어 접두사가 `--fox-` 뿐이다.
@each $name, $value in tokens.$size {
--fox-#{$name}: #{$value};
}
@each $name, $value in tokens.$color {
--fox-color-#{$name}: #{$value};
}
// 모바일 우선 기본값.
@each $name, $value in tokens.$responsive {
--fox-#{$name}: #{$value};
}
}
// PC 모드 — 반응형 토큰만 덮어쓴다. 색상은 뷰포트와 무관하므로 여기 오지 않는다.
@media (min-width: tokens.$breakpoint-pc) {
:root {
@each $name, $value in tokens.$responsive-pc {
--fox-#{$name}: #{$value};
}
}
}
// 수동 테마 선택 — `color-scheme`만 고정하면 `light-dark()`가 해당 분기로 확정된다.
// 속성이 없거나 `"system"`이면 위 `:root`의 `light dark`가 유지되어 OS를 따른다.
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
// ⚠️ 1rem = 10px 규약의 근거. 브라우저 기본 글자 크기(16px)의 62.5%가 10px다.
// 모든 토큰의 rem 값이 이 선언을 전제로 계산돼 있다.
// 미디어 쿼리 안의 rem은 이 값의 영향을 받지 않는다(항상 브라우저 기본 크기 기준).
html {
font-size: 62.5%;
}