@open-press/core/theme

Theme API

Define portable theme tokens for slide and fixed-layout workspaces: colors, fonts, typography, CSS variables, and theme specimen components.

@open-press/core/theme is the first public OpenPress theme token API. It constrains the two parts of slide style that most often drift across templates: color and typography.

This API does not replace theme/default.css. It defines portable tokens and emits CSS variables; templates and workspace theme CSS consume those variables through class names.

Function Impl

# `defineTheme`

Normalizes a readable theme input into a consumable token graph with resolved colors, typography, and CSS variables.

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`	Theme name for specimens, Workbench, or docs.
`description`	`string`	Theme description.
`colors`	`Record<string, ThemeColorInput>`	Color tokens. Pass a string, or `{ value, label, description, foreground }`.
`fonts`	`Record<string, string>`	Font family tokens such as `serif`, `sans`, or `mono`.
`typography`	`Record<string, ThemeTypographyInput>`	Text style tokens with `font`, `size`, `lineHeight`, `weight`, `tracking`, `color`, `transform`, and `sample`.

CSS variables

defineTheme emits stable 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 should consume those 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`

Returns a CSS variable map that can be passed directly to React `style`.

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

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

Function Impl

# `themeToCssText`

Returns CSS text, useful for writing a theme stylesheet or generating a theme preview.

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

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

Specimen components

Component Impl

# `ThemeColorSwatches`

Renders theme color swatches, useful for a theme-colors slide template.

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

<ThemeColorSwatches theme={sourceTheme} />

Component Impl

# `ThemeTypographyGraph`

Renders the typography token graph for checking font size, family, line height, and color.

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

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

Component Impl

# `ThemeSpec`

Renders color and typography specimens together.

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

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

Types

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

Theme API only defines tokens. Slide layout still belongs to Frame, Text, Line, and MediaObject via box and Frame layout.