Core Concepts
스타일링
opt-chat의 CHAT_* 디자인 토큰 시스템과 opt-ui 테마 통합 방법을 설명합니다.
reopt designUpdated
1. CHAT_* 토큰 시스템
opt-chat은 CHAT_* 접두어의 디자인 토큰으로 모든 시각 요소를 제어합니다. 각 카테고리별 토큰과 역할을 아래 표에서 확인하세요.
| 카테고리 | 토큰 | 설명 |
|---|---|---|
| Focus | CHAT_FOCUS_RING, CHAT_FOCUS_VISIBLE | 포커스 링, 포커스 가시성 스타일 |
| Surfaces | CHAT_SURFACE, CHAT_SURFACE_ELEVATED, CHAT_SURFACE_OVERLAY | 배경 표면 색상 (기본, 상승, 오버레이) |
| Borders | CHAT_BORDER, CHAT_BORDER_SUBTLE, CHAT_BORDER_ACTIVE | 테두리 색상 (기본, 연한, 활성) |
| Text | CHAT_TEXT_PRIMARY, CHAT_TEXT_SECONDARY, CHAT_TEXT_MUTED | 텍스트 색상 계층 (주요, 보조, 비활성) |
| Badges | CHAT_BADGE_SUCCESS, CHAT_BADGE_WARNING, CHAT_BADGE_ERROR | 상태 배지 색상 (성공, 경고, 에러) |
| Buttons | CHAT_BTN_PRIMARY, CHAT_BTN_SECONDARY, CHAT_BTN_GHOST | 버튼 스타일 (주요, 보조, 고스트) |
| Message Bubbles | CHAT_MSG_USER, CHAT_MSG_ASSISTANT, CHAT_MSG_SYSTEM | 역할별 메시지 버블 배경색 |
| Animations | CHAT_SHIMMER, CHAT_FADE_IN, CHAT_SLIDE_UP | 스트리밍 시머, 등장 애니메이션 |
| Spacing | CHAT_GAP_MESSAGE, CHAT_GAP_PART, CHAT_PADDING_BUBBLE | 메시지 간 간격, 파트 간 간격, 버블 패딩 |
| Status Dots | CHAT_DOT_ONLINE, CHAT_DOT_STREAMING, CHAT_DOT_ERROR | 연결/스트리밍/에러 상태 표시 점 |
| Code Blocks | CHAT_CODE_BG, CHAT_CODE_BORDER, CHAT_CODE_HEADER | 코드 블록 배경, 테두리, 헤더 색상 |
2. opt-ui 테마 통합
CHAT_* 토큰은 내부적으로 opt-ui의 --opt-* CSS 변수를 참조합니다. opt-palette로 생성된 테마가 적용되면 채팅 UI도 자동으로 일관된 색상으로 전환됩니다.
css
/* opt-chat 토큰은 opt-ui 변수를 참조합니다 */
:root {
/* opt-ui 기본 토큰 */
--opt-surface: #ffffff;
--opt-border: #e5e7eb;
--opt-text-primary: #111827;
/* opt-chat은 이를 자동 매핑 */
/* CHAT_SURFACE → var(--opt-surface) */
/* CHAT_BORDER → var(--opt-border) */
/* CHAT_TEXT_PRIMARY → var(--opt-text-primary) */
}
.dark {
--opt-surface: #0a0a0a;
--opt-border: #262626;
--opt-text-primary: #f5f5f5;
/* 다크 모드에서도 CHAT_* 토큰이 자동으로 전환됩니다 */
}3. 토큰 오버라이드
전체 테마를 유지하면서 특정 채팅 토큰만 변경하고 싶다면, --chat-* CSS 변수를 직접 오버라이드할 수 있습니다.
css
/* 특정 CHAT 토큰만 오버라이드하려면 */
:root {
--chat-msg-user: #eff6ff; /* 사용자 버블 배경 */
--chat-msg-assistant: #f8fafc; /* 어시스턴트 버블 배경 */
--chat-code-bg: #1e1e2e; /* 코드 블록 배경 */
}