二層パレットとテーマ

§1.1第一層:顔料

生パレットは画家の絵具箱です。テーマに依存せず、名前は --p-*。紙:ブラウズの地 纸 とそのカード面 页、読書の地 素(ひと目盛り冷たく、1 時間読み続けても目に優しい)とその柔らかい面 帛、白いカード、コードと数式の地。墨:書架のための温かい一組と、カラムのための中立な一組、それぞれ三段階の濃さ。装丁:書架の罫、ピルの枠線、二本のヘアライン。そして意味を担う色、顔料:

--p-zhu: #7d3a3a; /* 朱 · ワインレッド——ブラウズのアクセント、サイトの印 */
--p-shi: #b6552e; /* 石 · バーントオレンジ——読書のアクセント:リンク、番号、キッカー */
--p-shi-text: #8f3f1f; /* 石 · 小さいテキスト用の段(自身の淡色地の上で AA) */
--p-zhe: #c08a2c; /* 赭 · オーカー——罫線と枠線 */
--p-dai: #2a6f6b; /* 黛 · ティール——コンテンツの第二アクセント */
--p-zi: #6b4ec4; /* 紫 · バイオレット——「システム」の意味 */

これに加えて、ダーク版のための夜の一組——夕暮れの地、月白の墨、そして全顔料の明るめの対——が揃っています。

§1.2二つの文脈、ひとつのパレット

第二層はコンポーネント層が消費するもので、顔が二つあります:

カラムは二つのうち静かな方です——1 時間読み続ける場所ですから。書架はより温かく、ディスプレイ用セリフで組まれます——一瞥して選ぶ場所ですから。ページは body のクラス一つ、wb-root で書架の文脈に入ります。その内側ではクロームのトークン(--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-* をあなたの変数へ向けるだけです。この庭は意図して何も上書きしていません:いま読んでいるのはパッケージの素顔、紙と墨が擁護しているまさにその顔です。

§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——漢字はちょうど 2 文字セル幅なので、中英混在のテキストでも罫線素片の図がずれません。サブセットのレシピと再生成スクリプトはパッケージに同梱です(fonts/build_font_subset.py)。カバレッジ外のグリフが必要になったら、再実行して woff2 をコミットします。コードフレームはすべてこのサブセットで組まれています。