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
// FoxBadge — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// badge (190:3054 · 섹션 391:4804)
//
// 마크업 계약 (React 밖 소비자용):
// <span class="fox-badge fox-badge--neutral fox-badge--outline fox-badge--lg">레이블</span>
//
// 색 9종 × 계열 3종(outline·solid·pastel) × 크기 3종이 모두 시안에 있다. 색마다 쓰는 토큰이
// 규칙적이지 않아 아래 표에 모아 두고 한 번에 펼친다 — 손으로 27벌을 적으면 어긋난다.
// - theme 계열(primary·secondary·accent)은 solid에도 `-strong`을 쓴다(기본값이 없다).
// - system 계열(danger·warning·success·information)은 테두리가 `-strong`, solid가 기본값이다.
// - warning만 solid 글자가 검정이다 — 노란 바탕에 흰 글자는 읽히지 않는다.
// - disabled는 pastel도 solid와 같은 색이다(시안 확인).
//
// 테두리를 `border`가 아니라 안쪽 그림자로 그린다. 시안에서 테두리가 크기를 늘리지 않아
// outline과 solid의 높이가 같은데, CSS `border`는 상자를 키워 1~2px씩 어긋나기 때문이다.
// 굵기는 그대로 `border/1` 토큰을 쓴다.
//
// 토큰이 아닌 값:
// - 최소 높이 2.4rem(md) · 2rem(sm): 시안 값이나 Figma가 변수로 export하지 않는다
// (사용자 승인). lg는 여백과 글자만으로 시안 높이가 나와 따로 두지 않는다.
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
@use "sass:map";
@use "abstracts" as fox;
// line = outline 테두리 · text = outline·pastel 글자 · fill = solid 바탕
// on-fill = solid 글자 · soft = pastel 바탕 · soft-text = pastel 글자(다를 때만)
$badge-colors: (
neutral: (
line: element-neutral-default,
text: font-neutral-default,
fill: element-neutral-default,
on-fill: font-neutral-static-inverse,
soft: element-neutral-subtle,
),
primary: (
line: element-theme-primary-strong,
text: font-theme-primary,
fill: element-theme-primary-strong,
on-fill: font-neutral-static-inverse,
soft: element-theme-primary-subtler,
),
secondary: (
line: element-theme-secondary-strong,
text: font-theme-secondary,
fill: element-theme-secondary-strong,
on-fill: font-neutral-static-inverse,
soft: element-theme-secondary-subtler,
),
accent: (
line: element-theme-accent-strong,
text: font-theme-accent,
fill: element-theme-accent-strong,
on-fill: font-neutral-static-inverse,
soft: element-theme-accent-subtler,
),
danger: (
line: element-system-danger-strong,
text: font-system-danger,
fill: element-system-danger,
on-fill: font-neutral-static-inverse,
soft: element-system-danger-inverse,
),
warning: (
line: element-system-warning-strong,
text: font-system-warning,
fill: element-system-warning,
on-fill: font-neutral-static,
soft: element-system-warning-inverse,
),
success: (
line: element-system-success-strong,
text: font-system-success,
fill: element-system-success,
on-fill: font-neutral-static-inverse,
soft: element-system-success-inverse,
),
information: (
line: element-system-information-strong,
text: font-system-information,
fill: element-system-information,
on-fill: font-neutral-static-inverse,
soft: element-system-information-inverse,
),
disabled: (
line: element-neutral-disabled,
text: font-neutral-disabled,
fill: element-neutral-disabled,
on-fill: font-neutral-disabled-strong,
soft: element-neutral-disabled,
soft-text: font-neutral-disabled-strong,
),
);
.fox-badge {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: fox.radius(2);
font-family: fox.font-family(body);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
white-space: nowrap;
// ── 크기 ──────────────────────────────────────────────────────────────────
&--lg {
padding: fox.padding(3);
font-size: fox.font-size(label-md);
}
// 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
&--md {
min-block-size: 2.4rem;
padding-inline: fox.padding(3);
padding-block: fox.padding(2);
font-size: fox.font-size(label-sm);
}
&--sm {
min-block-size: 2rem;
padding: fox.padding(2);
font-size: fox.font-size(label-xsm);
}
}
// ── 색 × 계열 ───────────────────────────────────────────────────────────────
@each $name, $tokens in $badge-colors {
$soft-text: map.get($tokens, text);
@if map.has-key($tokens, soft-text) {
$soft-text: map.get($tokens, soft-text);
}
.fox-badge--#{$name} {
&.fox-badge--outline {
box-shadow: inset 0 0 0 fox.border(1) fox.color(map.get($tokens, line));
color: fox.color(map.get($tokens, text));
}
&.fox-badge--solid {
background: fox.color(map.get($tokens, fill));
color: fox.color(map.get($tokens, on-fill));
}
&.fox-badge--pastel {
background: fox.color(map.get($tokens, soft));
color: fox.color($soft-text);
}
}
}