@open-press/core/theme

Theme API

Slide / fixed-layout workspace の移植可能な theme token を定義します：colors、fonts、typography、CSS variables、theme specimen components。

@open-press/core/theme は OpenPress の第一版公開 theme token API です。Template 間で崩れやすい slide style のうち、まず color と typography を制約します。

この API は theme/default.css を置き換えるものではありません。移植可能な token を定義し、CSS variables を出力します。Template と workspace theme CSS は className 経由でそれらの variables を使用します。

Function Impl

# `defineTheme`

読みやすい theme input を、resolved colors、typography、CSS variables を持つ token graph に正規化します。

import { defineTheme } from "@open-press/core/theme";

const sourceTheme = defineTheme({
name: "Source Deck",
colors: {
  bg: "#f8f2e6",
  ink: "#111217",
  accent: { value: "#d7332f", label: "Red rule" },
  muted: "#8a8881",
},
fonts: {
  serif: "Georgia, 'Times New Roman', serif",
  sans: "Inter, system-ui, sans-serif",
},
typography: {
  title: { font: "serif", size: 124, lineHeight: 1.02, weight: 400, color: "ink" },
  body: { font: "sans", size: 40, lineHeight: 1.35, color: "ink" },
  meta: { font: "sans", size: 24, lineHeight: 1.2, weight: 700, color: "muted" },
},
});

Input

Name	Type	Description
`name`	`string`	Specimen、Workbench、docs で表示する theme 名。
`description`	`string`	Theme の説明。
`colors`	`Record<string, ThemeColorInput>`	Color token。string、または `{ value, label, description, foreground }` を指定できます。
`fonts`	`Record<string, string>`	`serif`、`sans`、`mono` などの font family token。
`typography`	`Record<string, ThemeTypographyInput>`	`font`、`size`、`lineHeight`、`weight`、`tracking`、`color`、`transform`、`sample` を持つ text style token。

CSS variables

defineTheme は安定した CSS variables を出力します：

colors: --op-theme-color-<token>
typography font family: --op-theme-type-<token>-font-family
typography size: --op-theme-type-<token>-font-size
typography line height: --op-theme-type-<token>-line-height
typography weight: --op-theme-type-<token>-font-weight
typography tracking: --op-theme-type-<token>-letter-spacing
typography color: --op-theme-type-<token>-color

Template CSS はこれらの variables を使用します：

.op-source-deck-title {
  font-family: var(--op-theme-type-title-font-family);
  font-size: var(--op-theme-type-title-font-size);
  line-height: var(--op-theme-type-title-line-height);
  color: var(--op-theme-type-title-color);
}

.op-source-deck-red-rule {
  background: var(--op-theme-color-accent);
}

Function Impl

# `themeToCssVariables`

React `style` に直接渡せる CSS variable map を返します。

import { themeToCssVariables } from "@open-press/core/theme";

const style = themeToCssVariables(sourceTheme);
// -> { "--op-theme-color-bg": "#f8f2e6", ... }

Function Impl

# `themeToCssText`

Theme stylesheet や theme preview 生成に使える CSS text を返します。

import { themeToCssText } from "@open-press/core/theme";

const css = themeToCssText(sourceTheme, ".op-source-deck-slide");

Specimen components

Component Impl

# `ThemeColorSwatches`

Theme color swatches を描画します。theme-colors slide template に適しています。

import { ThemeColorSwatches } from "@open-press/core/theme";

<ThemeColorSwatches theme={sourceTheme} />

Component Impl

# `ThemeTypographyGraph`

Font size、family、line height、color を確認する typography token graph を描画します。

import { ThemeTypographyGraph } from "@open-press/core/theme";

<ThemeTypographyGraph theme={sourceTheme} sample="A line is length without breadth." />

Component Impl

# `ThemeSpec`

Color と typography specimen をまとめて描画します。

import { ThemeSpec } from "@open-press/core/theme";

<ThemeSpec theme={sourceTheme} sections={["colors", "typography"]} />

Types

Types: OpenPressThemeInput, ThemeColorInput, ThemeTypographyInput, DefinedOpenPressTheme, DefinedThemeColor, DefinedThemeTypography, ThemeVisualizationProps

Theme API は token だけを定義します。Slide layout は引き続き Frame、Text、Line、MediaObject の box と Frame layout で表現します。