6. 테마 & 밀도
6-1. 다크 테마
Alias만 재정의하고 Seed/Map 파생 규칙은 그대로 둡니다. 전체 값은 jt-tokens.css의 [data-theme="dark"] 블록에 있습니다. v5.0에서 추가된 다크 정의:
[data-theme="dark"]{
--color-border-strong: rgba(255,255,255,.40); /* 3.61:1 — 폼 컨트롤 식별 */
--color-fill-active: rgba(255,255,255,.10);
--color-fill-selected: rgba(126,157,241,.16);
--color-oos: #D6A8E8;
/* 딤 4단계 · 판정 4종 · 상호작용 상태 세트 — §5-2~5-4 표 참조 */
}
color-scheme필수 〔v5.0 신설〕 체크박스·라디오·날짜 달력·스크롤바·셀렉트 화살표는 브라우저가 직접 그리는 부분이라 CSS로 색을 바꿀 수 없습니다.:root{color-scheme:light}/[data-theme="dark"]{color-scheme:dark}한 줄씩이면 브라우저가 알아서 다크용으로 그립니다. 이 줄이 없으면 다크 화면에서 라디오 버튼만 흰 원으로 튀고 달력 아이콘이 하얗게 보입니다. 토큰 파일에 내장되어 있으므로 앱이 따로 할 일은 없습니다.
6-2. 다크 엘리베이션 — 그림자가 아니라 “표면 밝기 계단”
--elev-0:#0F172A; --elev-1:#1E293B; --elev-2:#273449; --elev-3:#2E3C52; --elev-4:#35435B;
--elev-hairline: inset 0 1px 0 rgba(255,255,255,.06);- 인접한 두 층은 반드시 한 단계 이상 밝기 차이를 둔다
- 고도가 오르면
--elev-hairline을 더해 “빛을 받는 윗면”을 암시 - 다크에서 그림자는 분리 보조로만. 주 신호는 표면 밝기
6-3. 밀도(Density) 〔v5.0 값 재조정〕
:root{ /* 기본(comfortable) */
--control-height:40px; --control-height-sm:32px;
--density-fs-base:16px; --density-fs-sm:14px; --density-lh:1.6;
--cell-pad-x:12px; --cell-pad-y:8px;
}
[data-density="compact"]{
--control-height:34px; --control-height-sm:28px;
--density-fs-base:14px; --density-fs-sm:12px; --density-lh:1.5;
--cell-pad-x:10px; --cell-pad-y:5px;
}바닥값 — 절대 넘지 않는 선
| 항목 | 바닥값 | 이유 |
|---|---|---|
| 본문 글자 | 12px | 이하로 내리면 한글·중문 가독성 급락 |
| 캡션 글자 | 11px | 메타·코드값 최소 (CI 규정과 일치 — v4.0 충돌 C1 해소) |
| 셀 좌우 여백 | 8px | 글자가 테두리에 닿는 답답함 방지 |
| 셀 상하 여백 | 4px | 행 붙음 방지 |
| 행간 | 1.45 | 이하면 줄이 서로 붙음 |
컴팩트는 “한 스텝만” 줄입니다. 두 스텝 이상 줄이거나 바닥값을 깨면 컴팩트가 아니라 깨진 화면입니다.
6-4. 고대비 모드 〔v5.0 신설〕
운영체제에서 고대비를 켠 사용자(저시력·고령 사용자에게 흔함)를 위해 테두리와 보조 텍스트를 자동으로 강화합니다.
@media (prefers-contrast:more){
:root{ --color-border:var(--gray-500); --color-split:var(--gray-400);
--color-text-secondary:var(--gray-800); }
}앱이 따로 할 일은 없습니다 — 토큰 파일을 링크하면 자동 동작합니다.