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-14
08-14
08-18
08-18
08-14
08-18
08-18
// FoxBreadcrumb — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma breadcrumb (141:3204 · 섹션 392:5794)
//
// 마크업 계약 (React 밖 소비자용):
// <nav class="fox-breadcrumb" aria-label="현재 위치">
// <ol class="fox-breadcrumb__list">
// <li class="fox-breadcrumb__crumb">
// <a class="fox-breadcrumb__item"><span class="fox-breadcrumb__icon">…svg…</span>홈</a>
// </li>
// <li class="fox-breadcrumb__crumb">
// <span class="fox-breadcrumb__separator">…svg…</span>
// <span class="fox-breadcrumb__item" aria-current="page">1Depth</span>
// </li>
// </ol>
// </nav>
//
// 시안에 상태 변형이 없다. 누를 수 있는 항목만 hover·pressed를 주는데, 항목 바탕이
// `action/primary`(투명)라 같은 계열의 hover·pressed 토큰을 그대로 쓴다.
//
// 아이콘 크기 16(집)·12(구분자)는 시안 값이다. 아이콘 자체는 `@fox/core/icons`가 갖는다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.
// - 목록의 margin/padding/list-style 0: `<ol>`의 브라우저 기본값 지우기.
// - 버튼·링크 초기화(appearance/cursor/색 상속): 구조 규칙.
@use "abstracts" as fox;
.fox-breadcrumb {
display: flex;
inline-size: 100%;
// `<ol>`이라 브라우저 기본 여백·번호를 먼저 지운다.
&__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: fox.gap(2);
margin: 0;
padding: 0;
list-style: none;
}
// 구분자와 항목이 한 덩어리로 붙어 다녀야 줄바꿈이 어긋나지 않는다.
&__crumb {
display: flex;
align-items: center;
gap: fox.gap(2);
}
&__separator {
display: inline-flex;
flex-shrink: 0;
color: fox.color(icon-neutral-subtle);
> * {
inline-size: fox.icon(2);
block-size: fox.icon(2);
}
}
&__item {
display: inline-flex;
align-items: center;
gap: fox.gap(1);
margin: 0;
padding-inline: fox.padding(2);
padding-block: fox.padding(1);
border: none;
border-radius: fox.radius(2);
background: fox.color(action-primary);
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
text-decoration: none;
white-space: nowrap;
}
&__icon {
display: inline-flex;
flex-shrink: 0;
color: fox.color(icon-neutral-default);
> * {
inline-size: fox.icon(3);
block-size: fox.icon(3);
}
}
// 현재 위치는 누를 곳이 없다.
&__item[aria-current="page"] {
cursor: default;
}
a.fox-breadcrumb__item,
button.fox-breadcrumb__item {
cursor: pointer;
&:hover {
background: fox.color(action-primary-hover);
}
&:active {
background: fox.color(action-primary-pressed);
}
}
}