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-18
08-14
08-14
08-14
08-18
08-18
08-14
08-18
08-18
// 토큰 map을 `--fox-*` 커스텀 프로퍼티로 출력한다. **앱 전체에서 한 번만 로드한다.**
// map을 순회하므로 토큰을 추가할 때 이 파일은 손대지 않는다.
@use "sass:map";
@use "tokens";
:root {
// 아래 `[data-theme]`가 이 값만 덮어써 수동 선택을 처리한다 — 색상 값은 한 곳에만 둔다.
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 규약의 근거. 모든 토큰의 rem 값이 이 선언을 전제로 한다.
// 미디어 쿼리 안의 rem은 영향을 받지 않는다(항상 브라우저 기본 크기 기준).
html {
font-size: 62.5%;
}