Дворівнева палітра й теми

§1.1Перший рівень: пігменти

Сира палітра — скринька художника, незалежна від теми, з іменами --p-*. Папери: тло перегляду 纸 і лицьова поверхня карток 页, тло читання 素 (на пів тону холодніше — за годину читання очі втомлюються менше) та його м’яка поверхня 帛, білий картон, тла коду й формул. Туші: теплий набір для полиці й нейтральний для колонки, кожен у трьох градаціях. Оправа: лінійка полиці, кант пігулок, дві волосяні лінії. І пігменти — кольори, що несуть значення:

--p-zhu: #7d3a3a; /* 朱 · винна червінь — акцент перегляду, знак сайту */
--p-shi: #b6552e; /* 石 · палений жовтогарячий — акцент читання: посилання, номери, надзаголовки */
--p-shi-text: #8f3f1f; /* 石 · градація для дрібного тексту (AA на власному відтінку) */
--p-zhe: #c08a2c; /* 赭 · вохра — лінії та рамки */
--p-dai: #2a6f6b; /* 黛 · бірюза — другорядний акцент вмісту */
--p-zi: #6b4ec4; /* 紫 · фіолет — семантика «системного» */

А ще — нічний набір для темного видання: присмеркові тла, місячно-білі туші та підсвічений двійник кожного пігменту.

§1.2Два контексти, одна палітра

Другий рівень — те, що споживає шар компонентів, і в нього два обличчя:

Колонка — тихіша з двох: її читають годину. Полиця тепліша й набрана дисплейною гарнітурою із засічками: на неї кидають погляд і вибирають. Сторінка входить у контекст полиці одним класом wb-root на body; всередині нього токени оздоблення (--color-bg, --color-accent, …) перевідображено на поличні, тож панель навігації, написана один раз, коректно сидить на обох паперах — а атоми таксономії (значок типу, цятка статусу, чип напряму), написані проти --color-*, на сторінці нотатки читаються частиною колонки, а на сторінці перегляду — частиною полиці. Шар компонентів має право споживати лише другий рівень — base.css, browse.css і кожен компонент; жодне правило не містить сирого колірного значення, і ніщо на таке не відкочується. Це тверда дисципліна пакета.

§2.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;
}

Так само підтримується перевідображення другого рівня на власну палітру, коли ваша дизайн-система вже її має: наведіть --color-* і --wb-* на свої змінні. Цей сад навмисно не перевизначає нічого: ви читаєте голе обличчя пакета — те саме, за яке агітує paper-and-ink.

§2.2Контраст вимірюється

Кожне значення текстової градації звірено з WCAG AA на кожній поверхні, де воно лежить: дрібний текст починається з 4.5:1; акцент у ролі дрібного тексту дістає окремо затемнений текстовий щабель (--p-shi-text, --p-zhe-text), бо підпис у 12 пікселів акцентним кольором зазвичай лежить на відтінку самого акценту; бліді туші поставлено на найтемнішому відтінку, який ще читається як блідий, — #6a6d74 на тлі читання дає 4.9:1 і все ще тримає 4.5:1 на м’якій поверхні; тло коду на пів тону світліше за папір, щоб найблідіший токен синтаксичної теми (коментарі) брав свої 4.5:1; темне видання несе власний, підсвічений набір, виміряний на нічних тлах. Пакет постачає вимірювання як інструмент: scripts/contrast_probe.mjs рендерить демо у справжньому браузері — обидві теми, дві ширини, — знімає тло під кожним текстовим фрагментом просто з пікселів і звітує про кожен фрагмент нижче планки (зонд контрасту). Перш ніж міняти будь-яке значення, знайте кожну поверхню, на якій воно лежить.

§2.3Світла тема — це ідентичність

Тема навмисно не читає prefers-color-scheme: сторінка ніколи не сміє перевертати власну тему під читачем. Темна вмикається лише через [data-theme='dark'], який перемикає власний вимикач сайту (кнопка сонце/місяць праворуч у панелі навігації цього сайту; вибір зберігається під ключем inkstone-theme у localStorage, і вбудований скрипт 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. Кодові рамки набрано винятково цим сабсетом.