@gobooking/theme-kit

Public SDK for authoring GoBooking themes. Contains no business logic — only:

• registry.ts — registerTheme(name, templates?): plug your theme (and optional markup overrides) into the host's theme registry.
• variants.ts — registerThemeVariants(name, config): structural flags + labels per page (which blocks render, button labels, tab style...). JSON-serializable by design.
• contracts.ts — the typed shape of the data prop each page template receives, and the props/emits of every component override point. This is the whole surface a theme can touch.

Authoring a theme (Nuxt Layer)

my-theme/
├── package.json          # "@your-org/gobooking-theme-xyz", main: ./nuxt.config.ts
├── nuxt.config.ts        # css: ['./assets/style.css'], plugins: ['./plugin/register.ts']
├── assets/style.css      # .theme-xyz { --hdr-*: ...; --dp-*: ...; }  (token block)
├── templates/**/*.vue    # optional markup overrides — must honor contracts.ts
└── plugin/register.ts

// plugin/register.ts
import { defineNuxtPlugin } from '#app'
import { registerTheme, registerThemeVariants } from '@gobooking/theme-kit'

export default defineNuxtPlugin(() => {
  registerTheme('xyz', {
    // optional markup overrides; omit for a token-only theme
    // 'pages/ConfirmPage': () => import('../templates/pages/ConfirmPage.vue'),
  })
  registerThemeVariants('xyz', {
    global: { backIcon: 'framed', hero: 'gradient' },
  })
})

The host enables your theme with one line: extends: ['@your-org/gobooking-theme-xyz'].

Rules

1. Markup overrides receive data — read state, call handlers, nothing else. The shape is in contracts.ts; the implementation is private to the host.
2. Never branch on theme names. Structure differences go through variant flags; colors/spacing/typography go through CSS tokens scoped under .theme-<name>.
3. Contracts only grow. Fields are added, never renamed/removed, except in a major version of this package.