English · Español

@pcreative/theme-contract

Implementation of the pcreative Commerce theme contract v2.0: manifest, design tokens in DTCG format and a declarative customizer. No dependencies.

The full specification is in docs/THEME-CONTRACT.md.

Usage

import { loadTheme, resolveThemePackage } from "@pcreative/theme-contract/load"

const tema = resolveThemePackage(loadTheme("themes/mascotas"))
tema.css       // <style>{tema.css}</style> in the layout and the site is themed
tema.settings  // effective settings: defaults ← theme ← store
tema.sections  // page composition by blocks

Everything the main entry point exports (resolveTokens, tokensToCss, resolveSettings, validateTheme…) runs the same in Node, in the browser and at the edge. Loading from disk lives in ./load because it is the only part that needs node:fs.

CLI

npx pcc-theme validate themes/<id>
npx pcc-theme css      themes/<id> --out dist/tokens.css
npx pcc-theme info     themes/<id>

validate uses ajv for shape validation if it is installed; if not, it skips that pass and still runs the consistency check, which depends on nothing.

The pcc-theme CLI and the library messages speak English by default and switch to Spanish when LANG (or LC_ALL / LC_MESSAGES) starts with es; pcc-theme init generates the theme skeleton in that same language.

Cross-platform output

import StyleDictionary from "style-dictionary"
import { registrar, config } from "@pcreative/theme-contract/style-dictionary"

registrar(StyleDictionary)
await new StyleDictionary(config({ tokens: "themes/x/tokens.json" })).buildAllPlatforms()

The preset registers a preprocessor that resolves the dev.pcreative.derive extension (Style Dictionary understands DTCG, but not our derivations) and emits the same variable names as the live generator.

Tests

node --test "test/*.test.js"