# theme-tokens.ts **[Source](https://github.com/ubugeeei-prod/ox-content/blob/main/npm/vite-plugin-ox-content/src/theme-tokens.ts)** > 6 documented symbols. Read the signatures first, then expand each item for parameters, return types, and examples.
6 symbols 3 functions 2 interfaces 1 types 5 parameters 4 members 3 returns
## Reference
fnexpandExtendsChain(theme: ThemeTokenSource): ThemeTokenSource[]Flattens one layer's extends chain into base-first order, mirroring the SSG's o…1 paramreturns ThemeTokenSource[]

Flattens one layer's extends chain into base-first order, mirroring the SSG's own resolution. The seen guard keeps a theme that extends itself (or forms a cycle across two packages) from hanging the caller.

Signature

function expandExtendsChain(theme: ThemeTokenSource): ThemeTokenSource[]

View source

Parameters

Returns

ThemeTokenSource[]
fnrenderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options: RenderThemeTokenCssOptions = {}): stringRenders a theme's --octc-* tokens as a standalone stylesheet. The built-in SSG…2 paramsreturns string

Renders a theme's --octc-* tokens as a standalone stylesheet.

The built-in SSG emits these declarations itself, but ssg.bare: true and custom hosts render their own document — this is how they get the same tokens. The built-in highlighter emits var(--octc-syntax-*) references, so a bare host that wants only the highlighter palette can ask for it:

import { renderThemeTokenCss } from "@ox-content/vite-plugin/theme-tokens";
import { kanagawa } from "@ox-content/theme-color-kanagawa";

const css = renderThemeTokenCss(kanagawa, {
  include: (name) => name.startsWith("syntax-"),
});

Layers compose left to right and each layer's extends chain is flattened base-first, matching how resolveTheme() stacks a skin and a color scheme.

Signature

export function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options: RenderThemeTokenCssOptions = {}): string

View source

Parameters

Returns

string
interfaceRenderThemeTokenCssOptionsOptions for renderThemeTokenCss.1 member

Options for renderThemeTokenCss.

Signature

export interface RenderThemeTokenCssOptions

View source

Members

Properties
NameTypeDescription
includeoptional (name: string) => boolean
Keeps only the tokens whose name passes the predicate. Names arrive without
the --octc- prefix, so (name) => name.startsWith("syntax-") reuses a
color scheme's highlighter palette without adopting its page colors,
typography, or layout policy.

Filtering runs per layer, before merging, so a token a later layer would
have overridden is dropped along with the override.
  • name
typeThemeTokens = Record<string, string>Free-form --octc-* custom properties for themes that need more than the typed c…

Free-form --octc-* custom properties for themes that need more than the typed colors / fonts / layout fields.

Keys are written without the --octc- prefix, so "surface-glass" becomes --octc-surface-glass. This is the seam that keeps the two theme axes independent: a color package can restyle code-block line markers, brand accents, and surface textures purely through tokens, while a skin package lays out geometry against those same tokens without knowing any color.

Signature

export type ThemeTokens = Record<string, string>

View source

interfaceThemeTokenSourceThe token-bearing shape of a theme. Declared structurally instead of importing…3 members

The token-bearing shape of a theme.

Declared structurally instead of importing ThemeConfig so this module keeps an empty import graph: @ox-content/vite-plugin/theme-tokens has to be loadable by a bare (ssg.bare: true) or custom host that never pulls in the Vite plugin, the SSG, the native binding, or a filesystem API. Every ThemeConfig — including the published @ox-content/theme-color-* and @ox-content/theme-* packages — satisfies it.

Signature

export interface ThemeTokenSource

View source

Members

Properties
NameTypeDescription
darkTokensoptional ThemeTokens
extendsoptional ThemeTokenSource
tokensoptional ThemeTokens
fntokensToCss(light: ThemeTokens, dark: ThemeTokens): stringRenders light and dark token records as the three selectors the SSG runtime swi…2 paramsreturns string

Renders light and dark token records as the three selectors the SSG runtime switches between: an explicit [data-theme="dark"] opt-in, the OS prefers-color-scheme fallback, and the :root base.

Emitted after the typed color variables and before the theme's own css, so a token can override a typed color and raw css can override a token.

Signature

export function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string

View source

Parameters

Returns

string