File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
08-14
08-14
08-14
08-14
// FoxIconButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-ico (400:6312 · 섹션 405:5387)
// + btn-ico-toggle (404:5247 · 섹션 405:5629)
//
// 두 시안은 계열·크기·모양이 같고 토글에만 `active` 상태가 하나 더 있다. 그래서 한 블록으로
// 두고, 켜짐은 `aria-pressed="true"`로 표시한다 — 토글 버튼의 표준 속성이라 스타일 훅과
// 접근성 표시를 겸한다.
//
// 마크업 계약 (React 밖 소비자용):
// <button class="fox-icon-button fox-icon-button--ghost fox-icon-button--md" aria-label="공유">
// <span class="fox-icon-button__icon">…svg…</span>
// </button>
// 토글이면 `aria-pressed="true|false"`를 함께 준다. 아이콘만 있으므로 `aria-label`이 필수다.
// 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용된다.
//
// 시안에 `active`와 hover·pressed가 겹치는 조합이 없어(상태가 단일 축이다) 켜진 동안에는
// 켜짐 색이 유지된다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
// - box-sizing / cursor / flex-shrink: 구조·상호작용 규칙.
// - `blur()`: backdrop-filter의 필수 함수 표기. 반지름은 토큰이다.
@use "abstracts" as fox;
.fox-icon-button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
&:disabled {
cursor: default;
}
&__icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
&__icon > * {
inline-size: 100%;
block-size: 100%;
}
// ── 크기 (정사각형) ────────────────────────────────────────────────────────
// 아이콘 슬롯은 ghost만 한 단계 크다. 테두리가 없는 만큼 시안이 아이콘을 키웠다.
&--lg {
inline-size: fox.form(height-lg);
block-size: fox.form(height-lg);
border-radius: fox.form(radius-lg);
.fox-icon-button__icon {
inline-size: fox.icon(6);
block-size: fox.icon(6);
}
&.fox-icon-button--ghost .fox-icon-button__icon {
inline-size: fox.icon(7);
block-size: fox.icon(7);
}
}
&--md {
inline-size: fox.form(height-md);
block-size: fox.form(height-md);
border-radius: fox.form(radius-md);
.fox-icon-button__icon {
inline-size: fox.icon(5);
block-size: fox.icon(5);
}
&.fox-icon-button--ghost .fox-icon-button__icon {
inline-size: fox.icon(6);
block-size: fox.icon(6);
}
}
&--sm {
inline-size: fox.form(height-sm);
block-size: fox.form(height-sm);
border-radius: fox.form(radius-sm);
.fox-icon-button__icon {
inline-size: fox.icon(4);
block-size: fox.icon(4);
}
&.fox-icon-button--ghost .fox-icon-button__icon {
inline-size: fox.icon(5);
block-size: fox.icon(5);
}
}
&--xsm {
inline-size: fox.form(height-xsm);
block-size: fox.form(height-xsm);
border-radius: fox.form(radius-xsm);
.fox-icon-button__icon {
inline-size: fox.icon(3);
block-size: fox.icon(3);
}
&.fox-icon-button--ghost .fox-icon-button__icon {
inline-size: fox.icon(4);
block-size: fox.icon(4);
}
}
// ── 계열 ──────────────────────────────────────────────────────────────────
&--default {
border: fox.border(1) solid fox.color(button-default-border);
background: fox.color(button-default-surface);
color: fox.color(icon-neutral-default);
&:hover:not(:disabled) {
background: fox.color(button-default-surface-hover);
}
&:active:not(:disabled) {
background: fox.color(button-default-surface-pressed);
}
}
&--ghost {
background: fox.color(button-default-surface);
color: fox.color(icon-neutral-default);
&:hover:not(:disabled) {
background: fox.color(button-default-surface-hover);
}
&:active:not(:disabled) {
background: fox.color(button-default-surface-pressed);
}
}
&--overlay {
background: fox.color(alpha-default-inverse50);
backdrop-filter: blur(fox.backdrop(blur1));
color: fox.color(icon-neutral-strong-inverse);
&:hover:not(:disabled),
&:active:not(:disabled) {
background: fox.color(alpha-default-inverse75);
}
}
// ── 켜짐 (토글) ────────────────────────────────────────────────────────────
// 계열 hover·pressed 뒤에 와서 켜진 동안 색이 흔들리지 않는다.
&--default[aria-pressed="true"]:not(:disabled) {
border: none;
background: fox.color(button-primary-surface);
color: fox.color(icon-neutral-strong-inverse);
}
// ghost는 배경이 그대로 투명하고 아이콘 색만 바뀐다.
&--ghost[aria-pressed="true"]:not(:disabled) {
background: fox.color(button-default-surface);
color: fox.color(icon-theme-primary);
}
&--overlay[aria-pressed="true"]:not(:disabled) {
border: fox.border(1) solid fox.color(border-neutral-subtle);
background: fox.color(action-default);
color: fox.color(icon-theme-primary);
}
}
// 계열과 무관하게 같고 테두리·배경흐림이 없다.
.fox-icon-button:disabled {
border: none;
background: fox.color(button-disabled-surface);
backdrop-filter: none;
color: fox.color(icon-neutral-disabled-strong);
}