File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-19
08-14
08-14
08-18
08-18
08-14
08-18
08-18
08-19
08-19
// FoxCarouselIndicator — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// carousel-dot (162:403) · carousel-number (162:408)
// 섹션 392:5776
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-carousel-indicator fox-carousel-indicator--dot" role="group">
// <span class="fox-carousel-indicator__dot fox-carousel-indicator__dot--active"></span>
// <span class="fox-carousel-indicator__dot"></span>
// </div>
// <p class="fox-carousel-indicator fox-carousel-indicator--number">
// <span class="fox-carousel-indicator__current">1</span>
// <span class="fox-carousel-indicator__separator"></span>
// <span class="fox-carousel-indicator__total">3</span>
// </p>
//
// 두 시안이 한 컴포넌트다 — 흰 알약(높이·좌우 여백·간격·모서리)이 같고 안에 든 것만 다르다.
// 높이 40px은 시안이 리터럴로 적었지만 `form/height/md`와 값이 같고, carousel-area에서
// md 버튼과 나란히 서야 하므로 토큰으로 맞췄다.
//
// 시안에 상태 변형이 없다. 점을 눌러 옮길 수 있게 하면 `<button>`이 되는데, 그때 쓸
// hover·pressed 표시가 시안에 없어 두지 않았다.
//
// 토큰이 아닌 값:
// - 점 0.8rem · 활성 막대 2.4rem×0.8rem · 숫자형 가운뎃점 0.4rem: 시안 값이나 Figma가
// 변수로 export하지 않는다(사용자 승인).
// - line-height / letter-spacing: 위와 같다.
// - 버튼 초기화(appearance/cursor): 구조 규칙.
@use "abstracts" as fox;
.fox-carousel-indicator {
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: fox.gap(2);
block-size: fox.form(height-md);
margin: 0;
padding-inline: fox.padding(6);
border-radius: fox.radius(max);
background: fox.color(surface-neutral-default);
// ── 점 ────────────────────────────────────────────────────────────────────
// 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
&__dot {
display: block;
flex-shrink: 0;
inline-size: 0.8rem;
block-size: 0.8rem;
margin: 0;
padding: 0;
border: none;
border-radius: fox.radius(max);
background: fox.color(element-neutral-default);
}
// 현재 위치만 길쭉해지고 색이 바뀐다.
&__dot--active {
inline-size: 2.4rem;
background: fox.color(element-theme-primary);
}
button.fox-carousel-indicator__dot {
cursor: pointer;
}
// ── 숫자 ──────────────────────────────────────────────────────────────────
&--number {
justify-content: center;
}
&__current,
&__total {
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
line-height: 1;
letter-spacing: -0.025em;
}
// 현재 위치만 굵고 색이 다르다.
&__current {
color: fox.color(font-theme-primary);
font-weight: fox.font-weight(bold);
}
&__total {
color: fox.color(font-neutral-subtle);
font-weight: fox.font-weight(regular);
}
&__separator {
flex-shrink: 0;
inline-size: 0.4rem;
block-size: 0.4rem;
border-radius: fox.radius(max);
background: fox.color(element-neutral-default);
}
}