File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// 테마 토글 버튼 스타일.
//
// 아이콘 3종을 항상 DOM에 두고 CSS만으로 하나를 고른다 — 이 전환을 React state로 하면
// 서버·클라이언트 출력이 달라져 hydration이 깨진다(선택값이 localStorage에 있기 때문).
//
// 원래 Tailwind의 `hidden theme-*:contents` 유틸리티가 하던 일인데, Tailwind 제거(e3d3133)
// 이후 그 클래스들을 정의한 CSS가 사라져 세 아이콘이 한꺼번에 보이고 있었다. 같은 동작을
// 실재하는 CSS로 다시 세운다.
@use "@fox/styles/abstracts" as fox;
.icon {
display: none;
inline-size: fox.icon(4);
block-size: fox.icon(4);
}
// @fox 아이콘은 스스로 크기를 갖지 않는다 — 감싼 쪽이 정한다.
.icon > svg {
inline-size: 100%;
block-size: 100%;
}
// "system"은 `<html>`에 속성이 **없는** 상태로 표현된다(lib/constants/theme).
:global(:root:not([data-theme])) .system,
:global(:root[data-theme="light"]) .light,
:global(:root[data-theme="dark"]) .dark {
display: block;
}
// 현재 선택을 스크린리더에만 알린다. 보이는 글자가 없으므로 이 텍스트가 버튼의 접근성
// 이름이 된다 — IconButton에 `label`을 넘기지 않는 이유다(`aria-label`은 내용을 덮어쓴다).
.srOnly {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}