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
// FoxBadgeDot — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// badge-dot (190:3359 · 섹션 392:4816)
// badge-number (190:3354 · 섹션 392:4810)
//
// 마크업 계약 (React 밖 소비자용):
// <span class="fox-badge-dot fox-badge-dot--primary"></span>
// <span class="fox-badge-dot fox-badge-dot--primary fox-badge-dot--counted"><span>5</span></span>
//
// 두 시안이 한 컴포넌트다 — 둘 다 알림 표시이고 색 축(primary·new)이 같으며, 개수를
// 아느냐 모르느냐만 다르다. 개수가 붙으면 점이 알약으로 늘어난다.
//
// 토큰이 아닌 값:
// - 점 0.6rem, 숫자 배지 높이·최소폭 2rem: 시안 값이나 Figma가 변수로 export하지
// 않는다(사용자 승인).
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
@use "abstracts" as fox;
.fox-badge-dot {
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
// 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
inline-size: 0.6rem;
block-size: 0.6rem;
border-radius: fox.radius(max);
// 개수가 붙으면 알약이 되고 글자만큼 옆으로 늘어난다.
&--counted {
inline-size: auto;
min-inline-size: 2rem;
block-size: 2rem;
padding-inline: fox.padding(2);
color: fox.color(font-neutral-static-inverse);
font-family: fox.font-family(body);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(bold);
line-height: 1;
letter-spacing: -0.025em;
text-align: center;
}
&--primary {
background: fox.color(element-theme-primary);
}
&--new {
background: fox.color(element-theme-accent);
}
}