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
// FoxCarouselButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// carousel-arrow (163:420 · 섹션 391:4034)
// carousel-atomic (680:5710 · 섹션 683:5904)
//
// 마크업 계약 (React 밖 소비자용):
// <button class="fox-carousel-button fox-carousel-button--outlined fox-carousel-button--md"
// type="button" aria-label="이전">
// <span class="fox-carousel-button__icon">…svg…</span>
// </button>
//
// 두 시안이 한 컴포넌트다 — 원형·흰 바탕·아이콘 하나까지 같고 테두리와 그림자만 다르다.
// - outlined = carousel-arrow: 테두리가 있고 hover·pressed에서 떠오른다(그림자 neutral/lv2).
// - plain = carousel-atomic: 테두리도 그림자도 없다.
// 아이콘 색도 갈린다 — outlined만 hover·pressed에서 진해지고, plain은 그대로다(시안 확인).
//
// 크기는 상자 높이 토큰을 그대로 쓴다. lg가 PC 56 / 모바일 48로 줄어드는 건 반응형 토큰의
// 성질이고, 시안의 56은 PC 값이다.
//
// 토큰이 아닌 값:
// - 그림자 색: 시안이 테마 토큰이 아니라 `alpha/black10` 원시값에 직접 물려 놓았다
// (fox-select-option과 같은 사정). 그래서 다크 모드에서도 검은 그림자다.
// - appearance / cursor 관련: 구조·상호작용 규칙.
@use "abstracts" as fox;
// 시안 neutral/lv2 — 그림자 둘이 겹친다.
@mixin _lifted {
box-shadow:
fox.shadow(location3) fox.shadow(location3) fox.shadow(blur3) 0
fox.primitive(alpha-black10),
fox.shadow(location1) fox.shadow(location1) fox.shadow(blur2) 0
fox.primitive(alpha-black10);
}
.fox-carousel-button {
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: none;
border-radius: fox.radius(max);
background: fox.color(action-default);
color: fox.color(icon-neutral-subtle);
cursor: pointer;
&__icon {
display: inline-flex;
> * {
inline-size: 100%;
block-size: 100%;
}
}
// ── 크기 (정사각) ──────────────────────────────────────────────────────────
&--lg {
inline-size: fox.form(height-lg);
block-size: fox.form(height-lg);
}
&--lg &__icon {
inline-size: fox.icon(6);
block-size: fox.icon(6);
}
&--md {
inline-size: fox.form(height-md);
block-size: fox.form(height-md);
}
&--md &__icon {
inline-size: fox.icon(5);
block-size: fox.icon(5);
}
&--sm {
inline-size: fox.form(height-sm);
block-size: fox.form(height-sm);
}
&--sm &__icon {
inline-size: fox.icon(3);
block-size: fox.icon(3);
}
// ── 계열 ──────────────────────────────────────────────────────────────────
&--outlined {
border: fox.border(1) solid fox.color(border-neutral-subtle);
&:hover:not(:disabled) {
background: fox.color(action-default-hover);
color: fox.color(icon-neutral-default);
@include _lifted;
}
&:active:not(:disabled) {
background: fox.color(action-default-pressed);
color: fox.color(icon-neutral-default);
@include _lifted;
}
}
&--plain {
&:hover:not(:disabled) {
background: fox.color(action-default-hover);
}
&:active:not(:disabled) {
background: fox.color(action-default-pressed);
}
}
// 잠기면 회색 원 하나가 된다 — 테두리도 바탕색과 같아져 사라진 것처럼 보인다.
&:disabled {
border-color: fox.color(button-disabled-surface);
background: fox.color(button-disabled-surface);
color: fox.color(icon-neutral-disabled-strong);
cursor: default;
}
}