OV 색상 의미 도감

OV는 Apple 디자인 톤을 따라 색상 사용을 의식적으로 제한했습니다. 다음 의미를 일관되게 유지하면 UI가 자기 설명적이 됩니다.

시스템 색상

토큰	의미	사용처
--color-red	주요 액션 / 활성 강조	주요 버튼, 활성 노트, 사이드바 활성 표시, 토스트 액션
--color-danger	파괴적 행동	삭제 모달 아이콘, 에러 토스트
--color-yellow	경고 / 폴더 / 캘린더	폴더 아이콘, 충돌 모달, 캘린더 이벤트
--color-green	성공	성공 토스트
--color-fg	본문 텍스트	모든 노트 본문
--color-fg-dim	보조 텍스트	메타데이터, hint, dim 라벨
--color-fg-dimmer	더 흐린 보조	단축키 placeholder, 작은 안내
--color-bg	메인 배경	에디터, 모달 패널
--color-bg-1	사이드 배경	사이드바, rail, titlebar
--color-bg-2	호버 / kbd 배경	호버 상태, kbd 칩
--color-bg-3	더 깊은 호버	모달 secondary 버튼 hover
--color-border	보더 / 디바이더	모든 경계
--color-border-hi	더 강한 보더	활성 입력, 강조 보더

Callout 색상 의미 (에디터 슬래시 메뉴)

5개 색상은 자유롭게 쓰는 게 아니라 의미가 있습니다:

색상	슬래시 메뉴 라벨	의미
🔴 빨강	Callout · 빨강	강조 / 위험 — 절대 놓치면 안 되는 정보, 경고
🟦 청록	Callout · 청록	정보 — 보조 설명, 참고 사항
🟡 노랑	Callout · 노랑	주의 — 신경 써야 할 점
🟢 초록	Callout · 초록	성공 / 확인 — 완료된 작업, 확인된 정보
⚪ 회색	Callout · 회색	보조 메모 — 사이드 노트, 추가 설명

라이트 / 다크 테마

모든 토큰이 data-theme="light"와 data-theme="dark" 둘 다에서 정의되어 있어, 컴포넌트 코드에는 분기가 없습니다. 새 색을 추가할 때는 두 테마 모두 토큰을 등록해야 해요.

접근성

• 본문(--color-fg)과 배경(--color-bg) 대비는 두 테마 모두 WCAG 2.1 AA 통과 (7:1 이상).
• 보조 텍스트(--color-fg-dim)는 4.5:1 이상.
• 활성/호버 상태는 색상 변화 외에 명도 변화를 함께 줘서 색맹 사용자에게도 인식되도록 구성합니다.