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
// FoxAccordion — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// accordion (194:3563 box · 194:3680 line · 섹션 392:5034)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-accordion fox-accordion--box fox-accordion--lg fox-accordion--open">
// <button class="fox-accordion__tit" type="button" aria-expanded="true" aria-controls="…">
// <span class="fox-accordion__badge">…fox-badge-group…</span> <!-- 선택 -->
// <span class="fox-accordion__title">제목</span>
// <span class="fox-accordion__icon">…svg…</span>
// </button>
// <div class="fox-accordion__contents" id="…">…</div> <!-- 열렸을 때만 -->
// </div>
//
// 계열 둘이 성격이 다르다.
// - box: 색을 깐 상자. 여백·모서리를 상자가 갖고 제목이 강조 색이다.
// - line: 위쪽 선 하나로 나뉘는 목록형. 바탕이 없고 제목 줄이 세로 여백을 갖는다.
//
// 크기는 여백·글자·모서리를 함께 바꾼다(시안 lg·md).
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - 버튼 초기화(appearance/cursor/색 상속): 구조 규칙.
@use "abstracts" as fox;
.fox-accordion {
display: flex;
flex-direction: column;
align-items: flex-start;
inline-size: 100%;
// 제목 줄은 통째로 누르는 자리다.
&__tit {
display: flex;
align-items: center;
gap: fox.gap(3);
inline-size: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
font-family: fox.font-family(title);
font-weight: fox.font-weight(bold);
line-height: 1.4;
letter-spacing: -0.025em;
text-align: start;
cursor: pointer;
}
&__badge {
display: inline-flex;
flex-shrink: 0;
}
// 제목이 남는 폭을 먹고 아이콘은 오른쪽 끝에 붙는다.
&__title {
flex: 1 0 0;
min-inline-size: 0;
word-break: break-word;
}
&__icon {
display: inline-flex;
flex-shrink: 0;
color: fox.color(icon-neutral-default);
> * {
inline-size: fox.icon(4);
font-size: fox.icon(4);
block-size: fox.icon(4);
}
}
&__contents {
display: flex;
flex-direction: column;
align-items: flex-start;
inline-size: 100%;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(body-md);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
}
// ── box 계열 ──────────────────────────────────────────────────────────────
&--box {
background: fox.color(surface-theme-secondary);
}
&--box &__title {
color: fox.color(font-theme-secondary);
}
&--box#{&}--lg {
gap: fox.gap(7);
padding-inline: fox.padding(9);
padding-block: fox.padding(8);
border-radius: fox.radius(5);
}
&--box#{&}--md {
gap: fox.gap(5);
padding-inline: fox.padding(7);
padding-block: fox.padding(6);
border-radius: fox.radius(4);
}
&--box#{&}--lg &__contents {
gap: fox.gap(7);
}
&--box#{&}--md &__contents {
gap: fox.gap(5);
}
// ── line 계열 ─────────────────────────────────────────────────────────────
// 여러 개를 이어 붙이면 위쪽 선이 칸막이가 된다.
&--line {
border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
background: fox.color(action-secondary);
}
&--line &__title {
color: fox.color(font-neutral-strong);
}
&--line#{&}--lg &__tit {
padding-block: fox.padding(8);
}
&--line#{&}--md &__tit {
padding-block: fox.padding(6);
}
&--line#{&}--lg &__contents {
gap: fox.gap(7);
padding-block-end: fox.padding(8);
}
&--line#{&}--md &__contents {
gap: fox.gap(5);
padding-block-end: fox.padding(6);
}
// ── 크기 (글자) ───────────────────────────────────────────────────────────
&--lg &__title {
font-size: fox.font-size(heading-sm);
}
&--md &__title {
font-size: fox.font-size(heading-xsm);
}
}