spec/07-테마.md 의 팔레트를 구현하면서 값이 갈린 자리를 전부 적었습니다.
갈림은 다섯 갈래이고, 넷은 사용자가 화면을 보고 정한 것, 하나는
시안 문서 안의 셈이 안 맞는 자리입니다.
§4 의 문장은 “각 테마는 아래 열두 값을 가집니다” 인데, 바로 아래 표의 키는
열셋입니다 — page surface
surfaceAlt field line lineSoft
ink body sub accent
accentHi onAccent pill.
값 표도 6열 + 7열 = 13 입니다.
표를 따랐습니다. 문장이 아니라 표가 값을 갖는다고 봤습니다. 다음 판에서 문장을 고쳐 주시면 됩니다.
§5 는 색을 갈아입는 곳을 계정 모달 안으로 적고, §7 이 “방 화면·프로필 모달 등 다른 화면” 을 다음으로 미룹니다. 미루지 않고 전부 칠했습니다.
모달만 테마를 따르면 종이를 고른 사람은 밝은 모달이 어두운 앱 위에
뜬 화면을 봅니다. 그건 테마가 아니라 고장으로 보입니다. 시안이 계정 모달만
그린 것은 그 판의 그림 범위이지 적용 범위가 아니라고 읽었습니다.
가장 큰 갈림입니다. 시안의 여덟 팔레트는 모두 surfaceAlt(왼쪽 기둥)가
page(가운데 바탕)보다 밝습니다. 구현은 여덟 다
어둡습니다.
사용자가 화면을 보고 두 번에 걸쳐 정했습니다 — “사이드바가 더 진하고 가운데 본문 배경이 더 연했으면”, 이어서 “본문 배경이 너무 검거나 하야면 색이 강해서 눈이 피로하다”. 그래서 규칙이 두 문장이 됐습니다: ① 기둥이 가운데보다 0.055 어둡다 ② 가운데는 자기 극단(순검정·순백)에서 떨어져 있다.
| 테마 | 시안 page | 시안 기둥차 | 구현 page | 구현 기둥차 |
|---|---|---|---|---|
| 자정 midnight | 0.130 | +0.033 | 0.195 | −0.055 |
| 흑연 graphite | 0.135 | +0.032 | 0.190 | −0.055 |
| 이끼 moss | 0.140 | +0.032 | 0.195 | −0.055 |
| 자수정 amethyst | 0.145 | +0.032 | 0.200 | −0.055 |
| 종이 paper | 0.925 | +0.035 | 0.940 | −0.055 |
| 벚꽃 blossom | 0.900 | +0.055 | 0.930 | −0.055 |
| 유자 yuja | 0.915 | +0.045 | 0.938 | −0.055 |
| 한지 hanji | 0.855 | +0.070 | 0.925 | −0.055 |
어두운 넷은 이 두 값만 옮기면 깨집니다. 시안의 어두운 넷은
surface(모달 본체)가 0.18~0.19 인데 가운데를
0.19~0.20 으로 올리면 모달이 배경보다 어두워지고 입력칸
(field 0.15~0.16)이 배경 아래로 꺼집니다.
그래서 field·surface·line·lineSoft 를
같은 간격으로 함께 밀었습니다 (page 기준 +0.022 · +0.044 · +0.040 · +0.023).
밝은 넷은 사다리가 이미 옳게 서 있어 두 값만 옮겼습니다.
시안의 midnight 을 그대로 얹었더니 화면이 눈에 띄게 어두워졌고, 사용자가
되돌리라고 했습니다. 중립색 아홉이 앱의 옛 값으로 돌아갔습니다
(hex 였던 것을 oklch 로 옮겨 적었습니다).
강조 넷은 시안 값 그대로입니다 — 그쪽은 원래부터 같았습니다.
앱의 옛 강조색 #2cc5c5 를 재면 oklch(0.7495 0.1198 194.9) 로,
시안의 oklch(0.75 0.12 195) 와 사실상 같은 색입니다.
§4 끝이 성공 표시와 모달 그림자를 팔레트 밖에 두고 밝은/어두운 두 벌로 갈랐습니다. 그 규칙은 옳았는데, 화면에는 그 성격의 색이 훨씬 많았습니다. 같은 규칙을 나머지에도 이었습니다.
기준은 하나입니다 — 뜻이 색조에 실려 있으면 팔레트 밖입니다. 테마마다 다시 고르면 「빨강이 위험」 「주황은 풀 수 있는 벽」 같은 약속이 테마마다 달라집니다. 그래서 테마 여덟이 아니라 밝기 두 벌로만 갈립니다.
| 무엇 | 토큰 | 왜 팔레트 밖인가 |
|---|---|---|
| 성공 · 살아있음 | --live --on-live | 시안이 정한 둘 |
| 모달 그림자 | --shadow-modal | 시안이 정한 둘 |
| 되돌릴 수 없는 일 | --danger 외 3 | 빨강이 곧 뜻입니다 |
| 할 수 있는 일이 있는 벽 | --warn --warn-ink | 위험과 갈라야 합니다 — 저쪽은 되돌릴 수 없고 이쪽은 하나 지우면 풀립니다 |
| 소유자 배지 | --owner | 권한 시안(§2)의 금색 |
| 봇 표식 | --bot | 시안 값 그대로 (0.82 0.07 300) |
| 코드 강조 다섯 | --code-* | 밝은 바탕에서 대비가 뒤집힙니다 |
| 팝업 그림자 · 가림막 | --shadow-pop --scrim | 색이 아니라 불투명도입니다 |
그리고 열둘은 값을 안 적습니다 —
color-mix(in oklab, …) 로 열세 키에서 만듭니다
(--surface-2 --scrollbar-thumb --focus-ring
--danger-soft --danger-line --warn-soft
--live-soft --owner-bg 등).
덕분에 새 테마를 더하는 일은 여전히 열세 값을 적는 것으로 끝납니다.
시안 §6 이 요구한 그대로입니다.
§4 표에 없는 자리입니다. 구현은 처음에 surface(모달 바탕)를 그대로 썼는데
page 에서 L +0.044 라, 마우스가 지나갈 때마다 줄이 눈에
띄게 튀어 올랐습니다. 사용자가 “hover 했다는 것만 미약하게 인지되는 수준”
이라고 정해서 +0.015 로 줄였습니다.
만드는 방법은 글자색 쪽으로 2% 섞기입니다 — 어두운 테마에서는 밝아지고 밝은 테마에서는 어두워집니다. 밝기로 방향을 가르지 않는 것이 요점이고, 파생이라 새 테마도 값을 안 적습니다.
커밋 메시지에 “채도와 색상은 각 테마 것을 그대로 둔다 — 옮긴 것은 밝기뿐”
이라고 적었는데, 어두운 넷에만 맞는 말이었습니다. 밝은 넷의
page 는 채도도 함께 내려갔습니다. 화면을 보고 고른 값이라 그대로 뒀지만,
의도한 조정이 아니라 제 손에서 같이 움직인 값이라 밝혀 둡니다.
| 테마 | 시안 page | 구현 page | 채도 |
|---|---|---|---|
| 종이 paper | 0.925 0.003 90 | 0.940 0.003 90 | 그대로 |
| 벚꽃 blossom | 0.900 0.030 350 | 0.930 0.020 350 | 0.030 → 0.020 |
| 유자 yuja | 0.915 0.050 95 | 0.938 0.030 95 | 0.050 → 0.030 |
| 한지 hanji | 0.855 0.035 78 | 0.925 0.022 80 | 0.035 → 0.022 |
원래 채도로 되돌리면 밝아진 바탕에서 색이 더 진하게 올라옵니다. 어느 쪽이 맞는지는 봐 주셔야 합니다 — 되돌리는 것은 세 줄입니다.
app/globals.css 의
[data-theme] 블록 여덟. 한 블록이 한 테마라 통째로 갈아 끼우면 됩니다.--page ·
--surface-alt 두 줄. ⚠️ 어두운 넷은 --field ·
--surface · --line · --line-soft 도
함께 돌려야 합니다(위 「여기서 한 번 걸렸습니다」).:root 의 어두운 벌 하나와
밝은 넷을 덮는 블록 하나, 두 자리입니다.--page-hover 한 줄. 섞는 비율만 바꾸면 됩니다.
값은 전부 oklch 로 적혀 있습니다 — §6 이 못박은 대로 hex 로 바꾸지
않았습니다. 파생 열둘이 실제로 밝기를 옮겨 만들고 있어서, hex 로 옮기면 그것들이
죽습니다.