NotificationBell
준비 중
NotificationBell 컴포넌트의 API·호출 예시·실제 사용처 정리는 예정. 아래는 색 토큰 정렬(2026-06) 기록.
단일 출처
| 파트 | 파일 |
|---|---|
| Alpine 컴포넌트 | packages/components/src/components/NotificationBell.ts |
| HTML partial | packages/components/html/notification-bell.html |
색 토큰 (2026-06 정렬)
알림 팝업의 색이 Tailwind 기본 gray 팔레트에서 DS 토큰으로 전면 교체되었다 (덮어쓰기 의존 제거):
| 영역 | 적용 토큰 클래스 |
|---|---|
| 패널 | bg-white · border-neutral-100 · rounded-16 · shadow-popover |
| 헤더 | bg-neutral-75 · text-neutral-700 |
| 제목 / 본문 / 시간 | text-neutral-900 / text-neutral-500 / text-neutral-400 |
| 행 구분선 / hover | border-neutral-50 / hover:bg-neutral-50 |
| 강조(미읽음·카운트) | orange-500 계열, 배지 red-500 — @theme 재정의로 원래 DS 값 |
- 매핑 기준: 기존 전역 버튼 강제 보정 규칙(gray-900/600·500/400 →
#1b1b1b/#5e5e5e/#8f8f8f)과 동일한 neutral 단계(900/500/400) — 버튼 색 변화 없음, 일반 텍스트·배경만 DS 색으로 정렬 - gray- 클래스 사용 금지* — DS에는 gray 토큰이 없어 Tailwind 기본색으로 새는 경로가 된다. neutral-* 사용
변경 이력
| 날짜 | 내용 |
|---|---|
| 2026-06-12 | 팝업 색 토큰화: gray→neutral 전면 교체, shadow-xl→shadow-popover, rounded-xl(12px)→rounded-16. 강제 보정 규칙 의존 제거 |