// 테마 토글 버튼 스타일. // // 아이콘 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"은 ``에 속성이 **없는** 상태로 표현된다(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; }