Labels (라벨 / 뱃지)

이름 옆의 팀장·admin, 상태 칩, 카운트 뱃지처럼 짧은 상태·속성 텍스트를 한 가지 규격(크기·모양·색)으로 표시하는 인라인 칩입니다. .ds-label 골격에 크기 · 모양 · 색 변형을 조합해서 씁니다.

인라인 스타일 금지 — 반드시 색 변형 클래스를 쓰세요

style="background:...; color:..."로 라벨 색을 직접 칠하면 디자인 토큰 규칙과 어긋나고, 같은 의미의 칩이 화면마다 미묘하게 달라집니다(드리프트). 아래 색 변형 중 의미에 맞는 클래스를 고르세요. 원하는 색이 없으면 인라인으로 때우지 말고 design-system.css에 명명된 변형을 추가하세요.

규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다

라벨/뱃지 칩의 강제 규칙. 상세·색표·예시는 아래 본문.

• 인라인 색칠 금지. style="background/color"로 라벨을 칠하지 말 것 — 반드시 색 변형 클래스. 원하는 색이 없으면 인라인이 아니라 design-system.css에 명명 변형을 추가.
• 조합식: .ds-label + 크기(--xs/--sm/--md) + 모양(--square/--round) + 색(--primary 등). 채움 강도 축(택1): 기본=soft 틴트(연한 배경 + 진한 글자), --line=테두리(outline), --solid=강조 채움(진한 배경 + 흰 글자). --line과 --solid는 배타적으로 쓴다(둘 다 주면 --solid가 이김). --solid는 신호가 강한 상태(정상/위험 등)를 또렷하게 보여야 할 때만 — 남용하면 화면이 원색 칩으로 시끄러워진다.
• 크기: --xs 18px/10px · --sm 20px/11px · --md 24px/13px. 표 셀·이름 옆 인라인 칩은 기본 --sm --square.
• 굵기는 크기와 분리된 축: 기본 medium(500), 바꾸려면 .ds-fw-regular/medium/semibold/bold 하나를 라벨에 얹는다(버튼과 같은 모디파이어). font-bold 같은 Tailwind 유틸로는 안 바뀐다 — .ds-label--* 는 레이어 밖 규칙이라 유틸을 이긴다.
• 위치는 래퍼에: .ds-label 이 position: relative 를 직접 선언하므로 Tailwind absolute 를 라벨에 직접 주면 무시된다(카운트 배지처럼 겹쳐 놓을 땐 감싼 요소에 위치를 준다).
• 의미↔색 고정. 같은 의미는 어디서나 같은 색(예: admin=--primary, 팀장=--blue).
• 인접 칩은 색을 겹치지 말 것. 한 셀에 두 칩이 함께 뜨면 서로 다른 색으로 구분(예: admin=--primary, 팀장=--blue).
• 상태 배지(.ds-status-badge)는 라벨의 secondary 팔레트를 공유 — 활성=green · 휴직=yellow · 퇴직=red · 비활성=gray. 새로 만들어도 이 매핑을 따를 것(딴 톤으로 드리프트 금지).
• 접근성: 색만으로 의미 전달 금지 — 라벨 텍스트(팀장/admin/반려)로 뜻이 드러나게, 아이콘 전용 금지.

라이브 미리보기

상단 변형(Solid·Line) · 모양(Square·Round) 토글로 전환하면, 모든 크기(24·20·18px) × 색(12종)이 실제 design-system.css의 .ds-label 규칙으로 한눈에 렌더됩니다. gray-dark·light-gray-dark는 다크 배경 위에서 쓰는 라벨이라 어두운 바탕에 얹어 표시합니다. disabled는 색이 아니라 상태라, 상단 체크박스로 전체에 적용해 확인해요.

변형

모양

굵기

아이콘

disabled

primary

green

yellow

red

aqua

blue

black

white

gray

light-gray

gray-dark

light-gray-dark

md24

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

sm20

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

xs18

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

라벨

ds-label + --크기 + --모양 + (--line) + --색을 실제 design-system.css 클래스로 렌더. 크기 24 → 18px 내림차순. 변형 Tint(연한 기본) ↔ Solid(진한 강조·흰 글자) ↔ Line(테두리) · 모양 Square(라운드) ↔ Round(알약) 토글로 전환. Solid는 primary·green·red·yellow·blue·aqua·gray에만 정의돼 있어 나머지 색은 기본 틴트로 보여요. 색 12종(primary·green·yellow·red·aqua·blue·black·white·gray·light-gray·gray-dark·light-gray-dark) — white는 밝아 어두운 바탕에 얹어 표시. gray-dark·light-gray-dark는 다크 bg 위에서 쓰는 라벨(밝은 텍스트 + 흰색 반투명 채움)이라 어두운 바탕에 얹어 표시해요. 굵기는 크기와 분리된 축이에요 — .ds-fw-regular/medium/semibold/bold 하나를 얹으면 크기는 그대로 두고 굵기만 바뀝니다(버튼과 같은 모디파이어, 기본 medium). 아이콘 Left·Right 토글로 텍스트 좌/우에 아이콘 슬롯을 켜요(.ds-label 직접 자식 <svg>, 크기 md 16 · sm·xs 14px, 색은 currentColor). disabled는 색이 아니라 상태 — 토글을 켜면 전체 칩이 ds-label--disabled로 렌더돼요.

사용법

.ds-label + 크기(--xs/--sm/--md) + 모양(--square/--round) + 색(--primary 등)을 조합합니다. 채움 강도는 세 가지 중 하나입니다 — 기본은 soft 틴트(연한 배경 + 진한 글자), --line은 테두리(outline), --solid는 강조 채움(진한 배경 + 흰 글자)입니다. --line과 --solid는 함께 쓰지 않습니다.

<!-- 팀장 라벨 — 이름/사번 옆 역할 칩 (blue) -->
<span class="ds-label ds-label--sm ds-label--square ds-label--blue">팀장</span>

<!-- 시스템 관리자 라벨 (primary) -->
<span class="ds-label ds-label--sm ds-label--square ds-label--primary">admin</span>

<!-- outline 변형 -->
<span class="ds-label ds-label--sm ds-label--round ds-label--line ds-label--gray">대기</span>

색 변형

각 색은 세 가지 채움 강도로 쓸 수 있습니다 — 기본(soft 틴트), --line(테두리), --solid(강조 채움). 아래 표는 기본(soft 틴트) 의 배경/글자 토큰입니다. --line은 테두리색만, --solid는 진한 배경 + 흰 글자를 지정합니다(강조 채움 표 참고).

변형	배경 / 글자 토큰	권장 용도
--primary	--ds-color-primary-soft / --ds-color-primary	브랜드 강조·주요 속성 (예: admin)
--green	--ds-secondary-green-bg / --ds-secondary-green	성공·활성·정상
--yellow	--ds-secondary-yellow-bg / --color-yellow-500	주의·대기·부분
--red	--ds-secondary-red-bg / --ds-color-danger	위험·반려·오류
--blue	--ds-secondary-blue-bg / --ds-secondary-blue	정보·역할 구분 (예: 팀장)
--aqua	--ds-secondary-aqua-bg / --ds-secondary-aquablue	보조 정보 (blue와 구분 필요할 때)
--black	--ds-label-black / --ds-label-white	중립 강조(반전)
--white	--ds-label-white / --ds-label-fg-muted	밝은 배경 위 중립
--gray	rgb(193 193 193 / 60%) / --ds-label-fg-assistive	보조·비강조 (밝은 배경)
--light-gray	rgb(193 193 193 / 30%) / --ds-label-black	아주 약한 보조 (밝은 배경)
--gray-dark	--ds-glass-18 / --ds-label-white	보조·비강조 (다크 배경 위)
--light-gray-dark	--ds-glass-08 / --ds-glass-70	아주 약한 보조 (다크 배경 위)
--disabled	rgb(193 193 193 / 20%) / --ds-label-disable	비활성

강조 채움 (--solid)

기본 색 변형은 soft 틴트(연한 배경)라 신호가 약해 보일 때가 있습니다. --solid를 더하면 진한 배경 + 흰 글자로 또렷해집니다. 의미↔색은 그대로(green=성공, red=위험 …)이고 강도만 올립니다. 글자색은 모두 --ds-label-white입니다.

배경은 각 색군의 500 톤으로 통일합니다(글자는 흰색).

변형	배경 토큰
--solid --primary	--color-orange-500
--solid --green	--color-green-500
--solid --red	--color-red-500
--solid --yellow	--color-yellow-500
--solid --blue	--color-blue-500
--solid --aqua	--color-aquablue-500
--solid --gray	--color-neutral-500

• --line과 --solid는 배타적입니다 — 둘 다 주면 --solid가 이깁니다.
• --black은 그 자체가 진한 채움(black bg + white text)이라 별도 --solid가 없습니다.
• 남용 주의: 한 화면에 solid 칩이 많으면 원색이 시끄러워집니다. 소트 틴트를 기본으로 두고, 정말 강조가 필요한 상태(정상/위험 등)에만 solid를 씁니다. "데이터 없음/기준 없음" 같은 무데이터·중립 상태는 solid로 올리지 말고 틴트(--light-gray)로 두세요.

크기

크기	높이	폰트	패딩	아이콘
--xs	18px	10px	2 4	14px
--sm	20px	11px	2 4	14px
--md	24px	13px	4 8	16px

• 모양: --square는 --ds-radius-label-* 토큰 라운드, --round는 완전 알약형(999px).
• 표 셀·이름 옆 인라인 칩은 대부분 --sm --square를 씁니다.

굵기

굵기는 크기와 분리된 축입니다. 기본은 세 크기 모두 medium(500)이고, 바꾸고 싶으면 .ds-fw-regular / .ds-fw-medium / .ds-fw-semibold / .ds-fw-bold 중 하나를 라벨에 얹습니다 — 버튼이 쓰는 것과 같은 모디파이어입니다(각 크기 변형이 이미 읽고 있는 --ds-label-weight 변수만 세팅하므로 새 !important가 필요 없습니다).

<!-- 미확인 개수 배지 — 숫자를 굵게 -->
<span class="ds-label ds-label--xs ds-label--round ds-label--solid ds-label--red ds-fw-bold">3</span>

Tailwind font-bold로는 안 바뀝니다

.ds-label--xs/sm/md의 font-weight는 레이어 밖(unlayered) 규칙이라 @layer utilities에 들어가는 Tailwind 유틸을 특이도와 무관하게 이깁니다. 굵기는 반드시 .ds-fw-*로 바꾸세요. 같은 이유로 위치도 라벨에 직접 주면 안 됩니다 — .ds-label이 position: relative를 직접 선언하므로 absolute가 무시됩니다. 배지처럼 겹쳐 놓을 땐 감싼 요소에 위치를 주세요.

아이콘

라벨은 텍스트 좌/우에 아이콘을 넣을 수 있습니다(버튼과 동일). .ds-label의 직접 자식으로 <svg>를 텍스트 앞(왼쪽) 또는 뒤(오른쪽)에 두면, 크기별 슬롯(위 표: md 16px · sm·xs 14px)에 자동으로 맞춰집니다. 골격이 gap: 4px + 중앙정렬을 제공하므로 별도 클래스는 필요 없습니다. 색은 currentColor를 따르니 <svg>에 fill/stroke를 직접 칠하지 마세요(변형 글자색을 따라갑니다).

<span class="ds-label ds-label--sm ds-label--round ds-label--green">
  <svg viewBox="0 0 16 16" ...>…</svg>  <!-- 왼쪽 아이콘 -->
  정상
</span>

의미색 매핑 규칙

• 같은 의미 = 같은 색. admin은 어디서나 --primary, 팀장은 어디서나 --blue처럼 의미↔색을 고정합니다.
• 인접 칩은 색을 겹치지 마세요. 한 셀에 두 칩이 함께 뜨면(예: 팀장 + admin) 서로 다른 색을 써서 구분되게 합니다 — admin=--primary(주황), 팀장=--blue. 둘 다 primary면 시각적으로 붙어 구분이 사라집니다.
• 상태(재직/휴직/퇴직 등)는 상태 배지 규칙을 따르되, 새로 만들 땐 위 색 매핑(활성=green, 주의=yellow, 위험=red)에 맞춥니다. 상태 배지(.ds-status-badge)는 이 라벨의 secondary 팔레트와 동일 색을 공유합니다(활성=--green, 휴직=--yellow, 퇴직=--red, 비활성=--gray 값) — 상태 배지가 라벨과 다른 톤으로 드리프트하지 않도록 통일돼 있습니다.

드리프트 히스토리

과거 admin 조직 탭의 팀장 칩은 style="background:var(--color-orange-50); color:var(--color-orange-600)"로 --primary를 인라인으로 흉내 냈습니다(배경은 primary-soft와 동일, 글자만 더 진한 orange-600). 옆의 admin(--primary)과 색이 겹쳐 구분이 약했고, 인라인이라 재사용도 안 됐습니다. → --blue 표준 변형으로 교체하며 인라인을 제거했습니다. 새 라벨을 만들 때 이 패턴을 반복하지 마세요.

접근성

• 색만으로 의미를 전달하지 말고, 라벨 텍스트(팀장, admin, 반려)로 뜻이 드러나게 합니다.
• 칩은 장식이 아니라 정보이므로 아이콘 전용으로 만들지 말고 텍스트를 포함합니다.