두 계층 팔레트와 테마

§1.11계층: 안료

원료 팔레트는 화가의 물감 상자입니다. 테마와 무관하고, --p-* 이름을 답니다. 종이: 둘러보기 바탕 纸와 그 카드 면 页, 읽기 바탕 素(한 눈금 더 차가워서 한 시간을 읽어도 눈이 덜 피곤합니다)와 그 부드러운 표면 帛, 흰 카드, 코드와 수식의 바탕. 먹: 서가용 따뜻한 세트와 열용 중성 세트, 각각 세 단계 농도. 제본: 서가의 괘선, 알약 테두리, 두 종류의 헤어라인. 그리고 의미를 싣는 색, 안료:

--p-zhu: #7d3a3a; /* 朱 · 와인 레드 — 둘러보기 강조색, 사이트의 마크 */
--p-shi: #b6552e; /* 石 · 번트 오렌지 — 읽기 강조색: 링크, 번호, 키커 */
--p-shi-text: #8f3f1f; /* 石 · 작은 글자용 단계 (자기 틴트 위에서 AA) */
--p-zhe: #c08a2c; /* 赭 · 오커 — 선과 테두리 */
--p-dai: #2a6f6b; /* 黛 · 틸 — 본문의 보조 강조색 */
--p-zi: #6b4ec4; /* 紫 · 바이올렛 — "시스템" 의미론 */

여기에 다크 판을 위한 야간 세트가 더해집니다: 황혼 바탕, 달빛처럼 흰 먹, 그리고 모든 안료의 밝게 조정된 쌍둥이.

§1.2두 문맥, 하나의 팔레트

2계층은 컴포넌트 계층이 소비하는 층이고, 두 얼굴을 갖습니다:

열은 둘 중 더 조용한 쪽입니다 — 한 시간을 붙들고 읽는 곳이니까요. 서가는 더 따뜻하고 디스플레이 세리프로 짜입니다 — 흘긋 보고 고르는 곳입니다. 페이지는 body에 wb-root 클래스 하나를 얹는 것으로 서가 문맥에 들어갑니다. 그 안에서 크롬 토큰(--color-bg, --color-accent, …)이 서가의 값으로 다시 매핑되므로, 한 번 작성한 내비게이션 바가 두 바탕 위에 모두 올바르게 앉습니다 — 그리고 --color-* 기준으로 작성된 분류 원자들(종류 배지, 상태 점, 분야 칩)이 노트 페이지에서는 열의 일부로, 둘러보기 페이지에서는 서가의 일부로 읽힙니다. 컴포넌트 계층은 오직 2계층만 소비할 수 있습니다 — base.css, browse.css, 그리고 모든 컴포넌트가 그렇습니다. 어떤 규칙에도 원색 값이 들어 있지 않고, 원색으로의 폴백도 없습니다. 이것이 이 패키지의 굳은 규율입니다.

§2.1사이트가 아이덴티티를 입히는 방법

1계층을 덮어쓰면 됩니다. 안료를 자기 것으로 바꾸면 두 문맥과 컴포넌트 계층 전체가 따라옵니다. 각 안료는 주간/야간 페어입니다: 라이트 테마는 --p-shi와 --p-zhu 토큰을 읽고, 다크 테마는 그 야간 쌍둥이인 --p-shi-n과 --p-zhu-n 토큰을 읽습니다 — 아이덴티티를 덮어쓸 때는 두 짝을 모두 설정하거나, 다크 쪽만 기본 안료를 그대로 둡니다:

:root {
  --p-shi: #b03a48; /* 읽기 강조색 */
  --p-shi-text: #93303c; /* 작은 글자용 단계는 별도로 어둡게 잡습니다. 아래 참조 */
  --p-zhu: #3b4a7a; /* 서가의 강조색이자 마크 색 */
  --p-shi-n: #e0919b; /* 야간 쌍둥이 — 황혼 바탕에 맞춰 밝게 */
  --p-zhu-n: #9fb0e4;
}

이미 자체 디자인 시스템의 팔레트가 있다면, 2계층을 그 위로 다시 매핑하는 길도 똑같이 지원됩니다 — --color-*와 --wb-* 토큰이 여러분의 변수를 가리키게 하면 됩니다. 이 정원은 일부러 아무것도 덮어쓰지 않았습니다: 지금 읽고 계신 것이 패키지의 민낯이고, 종이와 먹이 옹호하는 바로 그 얼굴입니다.

§2.2대비는 실측합니다

텍스트에 쓰이는 모든 값은, 실제로 앉는 모든 표면 위에서 WCAG AA를 통과하도록 검증합니다. 작은 글자의 출발선은 4.5:1입니다. 작은 글자로 쓰이는 강조색은 독립적으로 어둡게 잡은 텍스트 단계(--p-shi-text, --p-zhe-text)를 따로 받습니다 — 강조색의 12px 라벨은 대개 그 강조색 자신의 틴트 위에 앉기 때문입니다. 옅은 먹은 여전히 옅게 읽히는 한도 안에서 가장 어두운 값으로 잡습니다 — #6a6d74 값은 읽기 바탕 위에서 4.9:1이고, 부드러운 표면 위에서도 4.5:1을 지킵니다. 코드 바탕은 본문 종이보다 한 눈금 밝아서, 구문 테마의 가장 옅은 토큰(주석)이 4.5:1을 넘습니다. 다크 판은 밝게 조정한 자기만의 세트를 야간 바탕에 대고 따로 측정합니다. 패키지는 이 측정을 도구로 싣고 있습니다: scripts/contrast_probe.mjs 스크립트가 데모를 진짜 브라우저에 띄워 두 테마와 두 너비로 렌더링하고, 모든 텍스트 런 밑의 바탕을 픽셀에서 샘플링해 기준 미달인 런을 전부 보고합니다(다섯 가지 검사). 어떤 값이든 바꾸기 전에, 그 값이 앉는 모든 표면부터 파악하십시오.

§2.3라이트가 곧 아이덴티티입니다

테마는 의도적으로 prefers-color-scheme 값을 읽지 않습니다: 페이지가 독자 밑에서 제멋대로 테마를 뒤집어서는 안 됩니다. 다크는 오직 [data-theme='dark'] 속성으로만 켜지고, 이를 켜고 끄는 것은 사이트 자신의 스위치입니다(이 사이트 내비게이션 바 오른쪽의 해/달 버튼입니다. 선택은 localStorage의 inkstone-theme 키에 저장되고, 첫 페인트 전에 ThemeInit 인라인 스크립트가 재생하므로, 다크 테마 독자가 크림색 번쩍임을 보는 일은 없습니다). 다크는 반전이 아니라 손으로 다시 짠 두 번째 판입니다: 황혼 바탕, 달빛처럼 흰 먹, 다시 밝힌 안료 — 종이와 먹에서 다룹니다.

§2.4폰트도 여기 삽니다

스택은 넷입니다. --font-display 토큰은 서가의 얼굴입니다 — 마스트헤드와 서가 제목을 위한 광학 크기 세리프(Source Serif 4, 한자는 Noto Serif SC). 이 데모는 @fontsource로 직접 호스팅하고, 그러지 않는 사이트에서는 읽기 서체로 폴백합니다. --font-body 토큰은 읽기 열의 것입니다 — Charter와 Iowan Old Style이 이끄는 시스템 세리프 스택으로, 이들이 없는 곳에서는 디스플레이 서체가 대신 들어섭니다. --font-ui 토큰은 제목, 크롬, 작은 활자를 위한 Inter(한자는 Noto Sans SC)입니다. --font-mono 토큰은 문자 집합을 고정한 Maple Mono CN 서브셋(ASCII + 박스 드로잉 + 상용 3500 한자 + 기존 콘텐츠의 합집합)입니다: 라틴은 0.6em, 한자는 1.2em — 한자 하나가 정확히 문자 셀 두 칸 너비라서, 한중일·라틴이 섞인 텍스트에서도 박스 드로잉 다이어그램이 어긋나지 않습니다. 서브셋 레시피와 재생성 스크립트는 패키지에 함께 실려 있습니다(fonts/build_font_subset.py). 콘텐츠가 커버리지 밖의 글리프를 필요로 하면, 다시 돌리고 woff2 파일을 커밋하십시오. 코드 프레임은 전부 이 서브셋으로 조판됩니다.