// FoxButton 스타일 — 시안: 관리자페이지 Figma, node 390:439 (`btn`) // // **프레임워크 무관.** 클래스명이 `fox-` 접두사 + BEM이라 전역에 그대로 풀어도 충돌하지 // 않는다. React 없이 SCSS만 쓰는 프로젝트도 이 파일 하나만 `@use`하고 아래 마크업 계약을 // 지키면 동일한 버튼을 얻는다. // // <button class="fox-button fox-button--primary fox-button--md"> // <span class="fox-button__icon">…svg…</span> <!-- 선택 --> // <span class="fox-button__label">버튼</span> // <span class="fox-button__icon">…svg…</span> <!-- 선택 --> // </button> // // - 비활성은 네이티브 `disabled` 속성으로 표현한다(별도 모디파이어 없음). // - 로딩은 앞쪽 아이콘 자리에 `fox-button__spinner`를 두고 `disabled`를 함께 건다. // - 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용된다. 크기는 슬롯이 정한다. // // **모든 디자인 값은 토큰으로만 지목한다.** 시안의 Figma 변수가 우리 토큰과 1:1로 // 대응하므로 예외가 필요 없었고, 아래 세 가지만 토큰이 아니다(사용자 승인 후 사용): // // 1. `line-height: 1` / `letter-spacing: -0.025em` // 시안 텍스트 스타일 `label/*-strong`의 값이다(lineHeight 1, letterSpacing -2.5%). // Figma에서 텍스트 스타일로만 존재하고 변수로 export되지 않아 토큰이 없다. // 네 크기가 모두 같은 값이라 스케일이 아니고 규칙 하나로 끝난다. // 2. `box-sizing: border-box` // 높이가 고정인데 secondary·default가 1px 테두리를 가져, 없으면 계열별로 바깥 // 높이가 2px 어긋난다. 디자인 값이 아니라 레이아웃 메커니즘이다. // 3. `cursor` / `white-space` / `flex-shrink` 등 구조·상호작용 규칙. @use "abstracts" as fox; .fox-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; // 시안 label/*-strong. 크기별 font-size는 아래 크기 모디파이어가 정한다. font-family: fox.font-family(body); font-weight: fox.font-weight(medium); line-height: 1; letter-spacing: -0.025em; white-space: nowrap; &:disabled { cursor: default; } // 라벨이 길어도 아이콘을 밀어내지 않게 라벨만 줄어들 수 있게 둔다. &__label { min-inline-size: 0; } // 아이콘·로딩 슬롯. 크기는 크기 모디파이어가, 색은 계열 모디파이어가 정한다. &__icon, &__spinner { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; } &__icon > * { inline-size: 100%; block-size: 100%; } &--full-width { inline-size: 100%; } // ── 크기 ────────────────────────────────────────────────────────────────── // 높이만 고정이고 너비는 내용에 따라 가변이다(시안도 좌우 padding만 지정). &--lg { block-size: fox.form(height-lg); padding-inline: fox.form(padding-lg); border-radius: fox.form(radius-lg); gap: fox.gap(2); font-size: fox.font-size(label-lg); .fox-button__icon, .fox-button__spinner { inline-size: fox.form(icon-lg); block-size: fox.form(icon-lg); } } &--md { block-size: fox.form(height-md); padding-inline: fox.form(padding-md); border-radius: fox.form(radius-md); gap: fox.gap(2); font-size: fox.font-size(label-md); .fox-button__icon, .fox-button__spinner { inline-size: fox.form(icon-md); block-size: fox.form(icon-md); } } &--sm { block-size: fox.form(height-sm); padding-inline: fox.form(padding-sm); border-radius: fox.form(radius-sm); gap: fox.gap(2); font-size: fox.font-size(label-sm); .fox-button__icon, .fox-button__spinner { inline-size: fox.form(icon-sm); block-size: fox.form(icon-sm); } } // xsm만 gap이 한 단계 좁다(시안 확인). &--xsm { block-size: fox.form(height-xsm); padding-inline: fox.form(padding-xsm); border-radius: fox.form(radius-xsm); gap: fox.gap(1); font-size: fox.font-size(label-xsm); .fox-button__icon, .fox-button__spinner { inline-size: fox.form(icon-xsm); block-size: fox.form(icon-xsm); } } // ── 계열 ────────────────────────────────────────────────────────────────── // 아이콘 색은 라벨 색과 별개 토큰으로 지정돼 있어(시안) 각각 지목한다 — // 지금은 두 값이 같지만 토큰이 갈라지면 시안을 따라가야 한다. &--primary { background: fox.color(button-primary-surface); color: fox.color(button-primary-font); .fox-button__icon { color: fox.color(icon-neutral-static-inverse); } &:hover:not(:disabled) { background: fox.color(button-primary-surface-hover); } &:active:not(:disabled) { background: fox.color(button-primary-surface-pressed); } } &--secondary { border: fox.border(1) solid fox.color(button-secondary-border); background: fox.color(button-secondary-surface); color: fox.color(button-secondary-font); .fox-button__icon { color: fox.color(icon-theme-primary-strong); } &:hover:not(:disabled) { background: fox.color(button-secondary-surface-hover); } &:active:not(:disabled) { background: fox.color(button-secondary-surface-pressed); } } &--default { border: fox.border(1) solid fox.color(button-default-border); background: fox.color(button-default-surface); color: fox.color(button-default-font); .fox-button__icon { 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); } } // ⚠️ error 계열은 시안 미정이라 규칙을 두지 않는다. 확정되면 여기에 채운다. &--error { } } // ── 비활성 ────────────────────────────────────────────────────────────────── // 계열과 무관하게 같은 모양이고 **테두리가 없다**(시안에서 disabled-border 미사용). // 계열 모디파이어보다 특이도가 높아야 이기므로 `.fox-button` 블록과 함께 지목한다. .fox-button:disabled { border: none; background: fox.color(button-disabled-surface); color: fox.color(button-disabled-font); .fox-button__icon { color: fox.color(icon-neutral-disabled-strong); } }