OpenPress

press/<slug>/theme/

テーマ (Themes)

OpenPress は各 Press フォルダの theme ディレクトリを tokens と font loading のソースとして読み込みます。ページ UI、prose、print の振る舞いは framework CSS と React/Tailwind コンポーネントが担います。

OpenPress の theme は Press-local な CSS source です。単一の出版物に対する design tokens と font loading を持ち、generic page shell、measurement CSS、print reset、既定の MDX prose surface は framework が所有します。

なぜ theme は Press ごとに置くのか？

ひとつの workspace に A4 report、16:9 slide deck、social cards が同居することがあります。これらの形式が意図せずグローバルな視覚状態を共有してはいけません。tokens を press/<slug>/theme/ に置くことで、それぞれの Press に明確な styling boundary を与えます。

Theme ファイルは次の用途に使います：

  • tokens.css: 色、書体、余白、artifact-level design decisions の CSS variables。
  • fonts.css: portable な @font-face loading。

Theme ファイルで page shell を再実装しないでください。新しい work では base/page-contract.css、base/print.css、base/typography.css を含めません。これらの契約は framework-owned です。

Page geometry

ページサイズは CSS ではなく <Press page> に置きます。generic format には built-in preset を使います：

<Press page="a4" />
<Press page="slide-16-9" />

プロジェクト固有の format には custom object を使います：

<Press
  page={{ id: "campaign-card", label: "Campaign Card", width: "1080px", height: "1350px" }}
/>

Exporter は resolved geometry を document theme metadata に書き込み、--openpress-page-width や --openpress-page-height などの runtime CSS variables を注入します。

Tailwind v4 and prose

新しい UI は Tailwind-first です。Page chrome、cover、TOC、slide layout、prose variants は React components に置き、Tailwind classes で表現します。MDX body content は framework の prose surface を使い、component classes または prose preset で調整します。shared typography CSS に戻さないでください。

複数の Press が Tailwind token name を共有する場合、Tailwind v4 @theme entries は generic または variable-backed にします。Artifact-specific values は owning Press wrapper または component に置き、ある Press が別の Press を汚染しないようにします。