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
// 헤더 전용 아이콘 버튼 — FoxIconButton 위에 시안 값 두 개만 덮는다.
//
// 시안(header 7001:10471의 `item`)은 40px 박스 · radius 4px · 아이콘 24px · 테두리 없음인데,
// FoxIconButton의 md는 radius 8px이고 ghost는 아이콘을 32px로 키운다. 이 조합은 btn-ico 시안에
// 없어서 @fox에 새 계열을 만들 근거가 없다(Figma에서도 이 `item`은 btn-ico 인스턴스가 아니라
// 헤더 안의 로컬 프레임이다). 그래서 디자인시스템은 그대로 두고 헤더 쪽에서만 덮는다.
//
// 셀렉터를 겹쳐 쓴 이유 — @fox 전역 스타일과 CSS 모듈은 명시도가 같아 로드 순서에 좌우된다.
// `:global()`로 한 단계 더 얹어 순서와 무관하게 이기게 한다.
@use "@fox/styles/abstracts" as fox;
// 배지가 버튼 모서리에 붙어야 해서 위치 기준을 만든다 — 배지는 버튼(<button>) 밖에 둔다.
.slot {
position: relative;
display: inline-flex;
}
.button:global(.fox-icon-button) {
border-radius: fox.form(radius-sm);
}
.button:global(.fox-icon-button) :global(.fox-icon-button__icon) {
inline-size: fox.icon(5);
font-size: fox.icon(5);
block-size: fox.icon(5);
}
// 시안 값(top/right 5px)이나 Figma가 변수로 export하지 않는다.
.badge {
position: absolute;
inset-block-start: 0.5rem;
inset-inline-end: 0.5rem;
pointer-events: none;
}