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
// FoxStatusIndicator — 시안: 통합관리자페이지 디자인시스템 Figma status-indicator
//
// 작은 점 하나와 글자로 상태를 알린다. 크기 수식어가 없다 — 시안에 하나뿐이다.
//
// 마크업 계약 (React 밖 소비자용):
// <span class="fox-status-indicator fox-status-indicator--success">
// <span class="fox-status-indicator__dot"></span>
// <span class="fox-status-indicator__label">완료</span>
// </span>
//
// 점은 비어 있는 요소다 — 배경색만으로 그린다. 뜻은 글자가 담고 점은 장식이라
// 마크업에서 `aria-hidden`이 붙는다.
//
// 계열은 **점의 배경과 글자색을 각각 다른 토큰으로** 바꾼다. 점은 `element-*`(칠하는 면),
// 글자는 `font-*`(읽는 글자)다 — 같은 계열이라도 명도가 달라 시안이 둘을 나눠 준다.
// 기본은 점이 `element-neutral-default`(회색 면), 글자가 `font-neutral-default`다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일 label/md의 값이나 Figma가 변수로
// export하지 않는다. 시안의 -0.375px은 15px 기준이라 `-0.025em`으로 적는다
// (다른 컴포넌트와 같은 근거). line-height는 시안이 100%라 `1`이다 — 점과 글자가 한 줄에
// 서는 조각이라 줄 간격을 두지 않는다.
// - display / align-items / aspect-ratio / flex-shrink: 구조 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-status-indicator {
display: inline-flex;
align-items: center;
gap: fox.gap(2);
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
// 6px 정원. 글자가 길어 줄이 좁아져도 찌그러지지 않게 크기를 못박는다.
&__dot {
flex-shrink: 0;
inline-size: fox.number(4);
block-size: fox.number(4);
aspect-ratio: 1 / 1;
border-radius: fox.radius(max);
background: fox.color(element-neutral-default);
}
// ── 계열 ────────────────────────────────────────────────────────────────────
// 글자색은 블록에서 상속되므로 루트에 주고, 점은 자기 배경을 따로 받는다.
//
// `default`는 블록 규칙이 곧 그 계열의 모양이라 따로 덮을 것이 없다.
&--default {
// 시안 그대로 — 블록에 있는 값이 전부다.
}
&--information {
color: fox.color(font-system-information);
}
&--information &__dot {
background: fox.color(element-system-information-strong);
}
&--success {
color: fox.color(font-system-success);
}
&--success &__dot {
background: fox.color(element-system-success-strong);
}
&--warning {
color: fox.color(font-system-warning);
}
&--warning &__dot {
background: fox.color(element-system-warning-strong);
}
&--danger {
color: fox.color(font-system-danger);
}
&--danger &__dot {
background: fox.color(element-system-danger-strong);
}
}