// FoxTextButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-txt (컴포넌트 세트 106:2468 · 섹션 390:569) // // 마크업 계약 (React 밖 소비자용): // <button class="fox-text-button fox-text-button--primary fox-text-button--md"> // <span class="fox-text-button__icon">…svg…</span> <!-- 선택 --> // <span class="fox-text-button__label">버튼</span> // <span class="fox-text-button__icon">…svg…</span> <!-- 선택 --> // </button> // 비활성은 네이티브 `disabled`. 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용된다. // // 높이를 고정하지 않는다 — 시안이 패딩과 line-height로만 크기를 잡는다. // // 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목): // - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong·em의 값이나 Figma가 // 변수로 export하지 않는다. // - box-sizing / cursor / white-space / flex-shrink: 구조·상호작용 규칙. // // 아이콘 크기는 컴포넌트 세트가 변수를 걸지 않아 리터럴(20/16/16/12px)로 나온다. 값이 // 정확히 일치하는 `icon-*`(모드 무관)에 매핑했다 — 전시 섹션(390:569)의 인스턴스가 // icon/4·3·2를 쓰고 있어 의도도 같다. `form-icon-*`은 PC에서 24/20/16/12라 어긋난다. @use "abstracts" as fox; .fox-text-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: fox.color(button-text-surface); font-family: fox.font-family(body); line-height: 1; letter-spacing: -0.025em; white-space: nowrap; &:disabled { cursor: default; } &__label { min-inline-size: 0; } &__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; } &__icon > * { inline-size: 100%; block-size: 100%; } // ── 크기 ────────────────────────────────────────────────────────────────── // lg만 상하 패딩과 간격이 한 단계 넓다. 나머지는 네 방향이 같은 값이다. &--lg { padding-block: fox.padding(3); padding-inline: fox.padding(2); border-radius: fox.form(radius-sm); gap: fox.gap(2); font-size: fox.font-size(label-lg); .fox-text-button__icon { inline-size: fox.icon(4); block-size: fox.icon(4); } } &--md { padding: fox.padding(2); border-radius: fox.form(radius-sm); gap: fox.gap(1); font-size: fox.font-size(label-md); .fox-text-button__icon { inline-size: fox.icon(3); block-size: fox.icon(3); } } &--sm { padding: fox.padding(2); border-radius: fox.form(radius-sm); gap: fox.gap(1); font-size: fox.font-size(label-sm); .fox-text-button__icon { inline-size: fox.icon(3); block-size: fox.icon(3); } } &--xsm { padding: fox.padding(2); border-radius: fox.form(radius-sm); gap: fox.gap(1); font-size: fox.font-size(label-xsm); .fox-text-button__icon { inline-size: fox.icon(2); block-size: fox.icon(2); } } // ── 계열 ────────────────────────────────────────────────────────────────── // 계열은 색과 굵기만 바꾼다. 배경은 상태에 따라서만 달라진다. &--primary { font-weight: fox.font-weight(bold); color: fox.color(font-theme-primary); .fox-text-button__icon { color: fox.color(icon-theme-primary-strong); } } &--secondary { font-weight: fox.font-weight(medium); color: fox.color(font-neutral-default); .fox-text-button__icon { color: fox.color(icon-neutral-default); } } &:hover:not(:disabled) { background: fox.color(button-text-surface-hover); } &:active:not(:disabled) { background: fox.color(button-text-surface-pressed); } } // 계열과 무관하게 같다. 굵기는 계열 값을 유지한다(시안에서 disabled도 계열별로 다르다). .fox-text-button:disabled { background: fox.color(button-text-surface); color: fox.color(font-neutral-disabled); .fox-text-button__icon { color: fox.color(icon-neutral-disabled); } }