OpenPress

press/<slug>/theme/

佈景主題 (Themes)

OpenPress 會讀取每個 Press 資料夾自己的 theme 目錄作為 tokens 與 font loading 來源。頁面 UI、prose 與 print 行為由 framework CSS 加上 React/Tailwind 元件負責。

OpenPress 的 theme 是 Press-local CSS source。它負責單一出版物的設計 tokens 與字型載入；generic page shell、measurement CSS、print reset 與預設 MDX prose surface 則由 framework 維護。

為什麼 theme 要跟著 Press 走？

同一個 workspace 可能同時有 A4 報告、16:9 slide deck 與 social cards。這些格式不應該共享意外的全域視覺狀態。把 tokens 放在 press/<slug>/theme/，可以讓每個 Press 有明確的 styling boundary。

Theme 檔案應該用來放：

  • tokens.css：顏色、字型、間距與 artifact-level design decisions 的 CSS variables。
  • fonts.css：可攜式 @font-face 載入。

不要用 theme 檔案重做 page shell。新工作不應該再帶 base/page-contract.css、base/print.css 或 base/typography.css；這些契約已經由 framework 維護。

Page geometry

頁面尺寸寫在 <Press page>，不是 CSS。通用格式可用內建 preset：

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

專案特定格式請用 custom object：

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

Exporter 會把 resolved geometry 寫入 document theme metadata，並注入 runtime CSS variables，例如 --openpress-page-width 與 --openpress-page-height。

Tailwind v4 與 prose

新 UI 採 Tailwind-first。Page chrome、cover、TOC、slide layout 與 prose variants 應該放在 React components，用 Tailwind classes 表達。MDX 內文使用 framework 的 prose surface，再透過 component classes 或 prose preset 客製化，不要回到 shared typography CSS。

多 Press 共用 Tailwind token name 時，Tailwind v4 @theme 應維持 generic 或 variable-backed。Artifact-specific values 要放在該 Press wrapper 或 component 裡，避免某個 Press 污染另一個 Press。