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
// FoxTag — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma tag (132:195)
//
// 알약 모양의 작은 조각이다 — 글자 하나와 아이콘 하나로 끝난다.
//
// 마크업 계약 (React 밖 소비자용):
// <button type="button" class="fox-tag fox-tag--lg fox-tag--sorting">
// <span class="fox-tag__label">서울</span>
// <span class="fox-tag__icon">…닫기 svg…</span>
// </button>
// <button type="button" class="fox-tag fox-tag--lg fox-tag--button">
// <span class="fox-tag__icon">…택 svg…</span>
// <span class="fox-tag__label">서울</span>
// </button>
//
// 아이콘이 앞이냐 뒤냐는 **마크업 순서가 정한다** — 계열별로 `order`나 `row-reverse`를 쓰지
// 않는다. sorting은 글자 뒤에 닫기 아이콘, button은 글자 앞에 택 아이콘이다. 두 계열이 쓰는
// 클래스가 `fox-tag__icon` 하나라 크기·색 규칙도 한 벌로 끝난다(`fox-button`과 같은 방식).
//
// 루트가 `<button>`이라 hover·pressed·포커스·키보드가 전부 네이티브다. 시안의 pressed는
// `:active`로 받는다.
//
// 배경은 세 상태 모두 계열과 무관하게 같다. button 계열만 hover·pressed에서 **글자에 밑줄이
// 추가로** 붙는다 — 시안이 배경 규칙을 계열 위에 두고 밑줄만 button에 얹는다.
//
// 아이콘 색은 시안의 `black / 25%`를 그대로 값으로 박지 않고 `icon-neutral-fill`을 쓴다 —
// 라이트에서 `alpha-black25`, 다크에서 `alpha-white25`로 뒤집히는 같은 값의 토큰이다.
// SVG는 `fill="currentColor"`로 그려야 이 색이 먹는다.
//
// 아이콘 크기는 세 크기가 모두 `icon-3`(16px)이다 — 시안 확인 완료. 크기 수식어가 바꾸는 것은
// padding·gap·글자 크기뿐이고 아이콘은 건드리지 않으므로, 아이콘 규칙을 블록에 한 번만 둔다.
//
// ⚠️ 비활성은 시안에 없다. 색을 임의로 만들지 않고 hover·pressed만 막는다 — 네이티브
// `disabled`를 주면 커서와 클릭만 죽고 모양은 기본과 같다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일 label/*의 값이나 Figma가 변수로
// export하지 않는다. 세 크기가 모두 `-0.025em`이라 규칙 하나로 끝난다(15px→-0.375px,
// 13px→-0.325px, 11px→-0.275px). px이 아니라 em인 이유는 글자 크기가 크기 수식어마다,
// 그리고 브레이크포인트마다 달라지기 때문이다 — px으로 박으면 그 자리에서 비율이 어긋난다.
// - box-sizing / display / flex / cursor / white-space / aspect-ratio: 구조·상호작용 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-tag {
// 안쪽 여백이 바깥 크기를 늘리지 않게 한다 — 좁은 자리에서 알약 높이가 흔들리지 않는다.
box-sizing: border-box;
display: inline-flex;
align-items: center;
border: none;
border-radius: fox.radius(max);
background: fox.color(action-secondary);
cursor: pointer;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-weight: fox.font-weight(regular);
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;
inline-size: fox.icon(3);
block-size: fox.icon(3);
// 시안이 아이콘에 정사각 비율을 못박는다. 자리가 좁아 눌려도 글리프가 찌그러지지 않는다.
aspect-ratio: 1 / 1;
color: fox.color(icon-neutral-fill);
}
// 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
&__icon > * {
inline-size: 100%;
block-size: 100%;
}
// ── 크기 ────────────────────────────────────────────────────────────────────
// 크기 이름과 글자 토큰 이름이 한 칸씩 어긋난다(lg→label-md). 시안이 그렇게 준다.
&--lg {
padding: fox.padding(3) fox.padding(5);
gap: fox.gap(2);
font-size: fox.font-size(label-md);
}
&--md {
padding: fox.padding(2) fox.padding(3);
gap: fox.gap(2);
font-size: fox.font-size(label-sm);
}
// sm만 gap이 한 단계 좁다.
&--sm {
padding: fox.padding(1) fox.padding(3);
gap: fox.gap(1);
font-size: fox.font-size(label-xsm);
}
// ── 상태 ────────────────────────────────────────────────────────────────────
// 계열과 무관하게 배경만 바뀐다.
&:hover:not(:disabled) {
background: fox.color(action-secondary-hover);
}
&:active:not(:disabled) {
background: fox.color(action-secondary-pressed);
}
// button 계열은 위 배경 변화에 밑줄이 더해진다. sorting은 배경 변화로 끝난다.
//
// `text-decoration` 단축을 쓰지 않는다 — 단축은 thickness를 `auto`로 되돌린다. 시안의
// skip-ink·thickness·underline-offset은 값이 전부 `auto`, 즉 기본값이라 적지 않는다.
// 기본값과 다른 것은 `from-font` 하나뿐이다 — 폰트가 가진 밑줄 위치를 쓰므로 내림획
// (g·y·다) 아래로 내려간다.
&--button:hover:not(:disabled) &__label,
&--button:active:not(:disabled) &__label {
text-decoration-line: underline;
text-decoration-style: solid;
text-underline-position: from-font;
}
}