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-18
08-19
08-19
// FoxTabItem — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) tab-item (171:13927 · 섹션 391:4431)
//
// 마크업 계약: `_fox-tab.scss` 상단 참고.
//
// 계열과 크기는 묶음이 정한다 — 항목에 수식어를 붙이지 않고 `.fox-tab--line`처럼 묶음
// 클래스에서 내려온다. 항목이 홀로 쓰이는 자리가 없어 그게 더 단순하다.
//
// 상태는 다섯이다. 기본·hover·pressed는 바탕만 바뀌고, 고름(active)은 계열마다 다르며,
// 잠김은 글자만 흐려진다.
// - line 고름: 흰 바탕 + 4px 밑줄 + 파란 글자
// - fill 고름: 남색 바탕 + 흰 글자
//
// line 계열의 밑줄은 `border`가 아니라 안쪽 그림자로 그린다. Figma는 stroke를 상자 **안쪽**에
// 그려 4px 밑줄이 높이를 늘리지 않지만(시안의 tab-item은 고름 여부와 무관하게 60px), CSS
// `border`는 상자를 키운다 — border로 그리면 고른 탭만 4px 커지고 옆 탭과 3px 어긋난다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - appearance / cursor: 구조·상호작용 규칙.
@use "abstracts" as fox;
.fox-tab-item {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
border: none;
background: fox.color(action-secondary);
color: fox.color(font-neutral-default);
font-family: fox.font-family(title);
font-weight: fox.font-weight(bold);
line-height: 1.4;
text-align: center;
text-decoration: none;
cursor: pointer;
// 고른 탭은 이미 제 모양이 있어 hover·pressed를 걸지 않는다.
&:hover:not(:disabled):not([aria-disabled="true"]):not(&--active) {
background: fox.color(action-secondary-hover);
}
&:active:not(:disabled):not([aria-disabled="true"]):not(&--active) {
background: fox.color(action-secondary-pressed);
}
&:disabled,
&[aria-disabled="true"] {
color: fox.color(font-neutral-disabled);
cursor: default;
}
}
// ── 크기 (묶음이 정한다) ────────────────────────────────────────────────────
.fox-tab--lg .fox-tab-item {
padding-inline: fox.padding(8);
padding-block: fox.padding(6);
font-size: fox.font-size(heading-md);
letter-spacing: -0.025em;
}
.fox-tab--md .fox-tab-item {
padding-inline: fox.padding(5);
padding-block: fox.padding(3);
font-size: fox.font-size(heading-sm);
letter-spacing: -0.025em;
white-space: nowrap;
}
// ── line 계열 ───────────────────────────────────────────────────────────────
// 밑줄은 상자 안쪽에 그린다(위 주석 참조) — 높이가 60px로 고정돼 고름 여부에 글자가 밀리지 않는다.
.fox-tab--line .fox-tab-item--active {
box-shadow: inset 0 calc(-1 * #{fox.border(3)}) 0 0 fox.color(action-secondary-active);
background: fox.color(surface-neutral-default);
color: fox.color(font-theme-secondary);
}
// ── fill 계열 ───────────────────────────────────────────────────────────────
.fox-tab--fill .fox-tab-item--active {
background: fox.color(surface-theme-secondary-inverse);
color: fox.color(font-neutral-strong-inverse);
}
// md는 항목 하나하나가 알약이다(시안).
.fox-tab--fill.fox-tab--md .fox-tab-item {
border-radius: fox.radius(4);
}
// lg는 세그먼트 컨트롤이라 모서리를 목록이 갖는다. 칸 사이 구분선은 고르지 않은 칸이
// 자기 오른쪽에 그린다 — 고른 칸은 색이 바뀌어 경계가 이미 보이므로 선을 두지 않는다
// (시안 그대로).
.fox-tab--fill.fox-tab--lg .fox-tab-item:not(.fox-tab-item--active) {
border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
}