@bendyline/squisq 1.3.0 → 1.4.1

package/src/schemas/themeValidator.ts

@@ -0,0 +1,388 @@
+/**
+ * Theme Validator
+ *
+ * Hand-rolled validator for `Theme` JSON. No dependencies. Produces a
+ * flat list of typed errors with JSON paths, suitable for surfacing in
+ * the customizer UI or throwing at module init for built-in themes.
+ *
+ * Design: walk the candidate object, push errors for each violation.
+ * Coverage is exhaustive for required fields and shapes; permissive on
+ * forward-compatible fields (unknown keys are ignored, not rejected).
+ */
+
+import type { Theme, ThemeColorPalette } from './Theme.js';
+import { THEME_SCHEMA_VERSION } from './Theme.js';
+import { isHex } from './colorUtils.js';
+
+export interface ValidationError {
+  path: string;
+  message: string;
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: ValidationError[];
+  /** Present only when `valid === true`. The same input typed as `Theme`. */
+  theme?: Theme;
+}
+
+const VALID_FALLBACK = new Set(['serif', 'sans-serif', 'monospace', 'system-ui']);
+const VALID_TITLE_WEIGHT = new Set(['normal', 'bold']);
+const VALID_TRANSITION_TYPES = new Set([
+  'cut',
+  'fade',
+  'dissolve',
+  'slideLeft',
+  'slideRight',
+  'slideUp',
+  'slideDown',
+  'zoom',
+]);
+const VALID_GRADIENT_PRESETS = new Set([
+  'dark-vignette',
+  'radial-dark',
+  'warm-sunset',
+  'cool-blue',
+  'earth-tones',
+]);
+
+class V {
+  errors: ValidationError[] = [];
+  err(path: string, message: string): void {
+    this.errors.push({ path, message });
+  }
+  isObject(v: unknown): v is Record<string, unknown> {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+  }
+  isString(v: unknown): v is string {
+    return typeof v === 'string';
+  }
+  isNumber(v: unknown): v is number {
+    return typeof v === 'number' && Number.isFinite(v);
+  }
+  isBoolean(v: unknown): v is boolean {
+    return typeof v === 'boolean';
+  }
+  hex(path: string, v: unknown): void {
+    if (!this.isString(v)) {
+      this.err(path, `expected hex color string, got ${typeof v}`);
+    } else if (!isHex(v)) {
+      this.err(path, `expected #rgb or #rrggbb hex color, got "${v}"`);
+    }
+  }
+
+  palette(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    const required: (keyof ThemeColorPalette)[] = [
+      'primary',
+      'secondary',
+      'background',
+      'backgroundLight',
+      'text',
+      'textMuted',
+      'highlight',
+      'warning',
+    ];
+    for (const k of required) this.hex(`${path}.${k}`, v[k]);
+  }
+
+  colorScheme(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    this.hex(`${path}.bg`, v.bg);
+    this.hex(`${path}.text`, v.text);
+    this.hex(`${path}.accent`, v.accent);
+  }
+
+  colorSchemes(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object map');
+      return;
+    }
+    for (const key of Object.keys(v)) {
+      this.colorScheme(`${path}.${key}`, v[key]);
+    }
+  }
+
+  fontFamily(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected FontFamily object ({ stackId } or { custom })');
+      return;
+    }
+    if ('stackId' in v) {
+      if (!this.isString(v.stackId) || v.stackId.length === 0) {
+        this.err(`${path}.stackId`, 'expected non-empty string');
+      }
+      return;
+    }
+    if ('custom' in v) {
+      const c = v.custom;
+      if (!this.isObject(c)) {
+        this.err(`${path}.custom`, 'expected { name, fallback } object');
+        return;
+      }
+      if (!this.isString(c.name) || c.name.length === 0) {
+        this.err(`${path}.custom.name`, 'expected non-empty string');
+      }
+      if (!this.isString(c.fallback) || !VALID_FALLBACK.has(c.fallback)) {
+        this.err(
+          `${path}.custom.fallback`,
+          `expected one of: serif, sans-serif, monospace, system-ui`,
+        );
+      }
+      return;
+    }
+    this.err(path, 'expected { stackId } or { custom: { name, fallback } }');
+  }
+
+  typography(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    this.fontFamily(`${path}.bodyFont`, v.bodyFont);
+    this.fontFamily(`${path}.titleFont`, v.titleFont);
+    if (v.monoFont !== undefined) this.fontFamily(`${path}.monoFont`, v.monoFont);
+    for (const k of ['titleScale', 'bodyScale', 'lineHeight', 'titleLineHeight']) {
+      if (v[k] !== undefined && !this.isNumber(v[k])) {
+        this.err(`${path}.${k}`, `expected number, got ${typeof v[k]}`);
+      }
+    }
+    if (v.titleWeight !== undefined) {
+      if (!this.isString(v.titleWeight) || !VALID_TITLE_WEIGHT.has(v.titleWeight)) {
+        this.err(`${path}.titleWeight`, 'expected "normal" or "bold"');
+      }
+    }
+  }
+
+  style(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    if (v.borderRadius !== undefined && !this.isNumber(v.borderRadius)) {
+      this.err(`${path}.borderRadius`, 'expected number');
+    }
+    if (v.textShadow !== undefined && !this.isBoolean(v.textShadow)) {
+      this.err(`${path}.textShadow`, 'expected boolean');
+    }
+    for (const k of ['overlayOpacity', 'animationSpeed']) {
+      if (v[k] !== undefined && !this.isNumber(v[k])) {
+        this.err(`${path}.${k}`, 'expected number');
+      }
+    }
+    if (v.blockPadding !== undefined && !this.isString(v.blockPadding)) {
+      this.err(`${path}.blockPadding`, 'expected string (percentage e.g. "5%")');
+    }
+  }
+
+  renderStyle(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    if (!this.isString(v.name) || v.name.length === 0) {
+      this.err(`${path}.name`, 'expected non-empty string');
+    }
+    if (v.ambientMotion !== undefined && !this.isBoolean(v.ambientMotion)) {
+      this.err(`${path}.ambientMotion`, 'expected boolean');
+    }
+    for (const k of ['defaultTextAnimation', 'defaultImageAnimation']) {
+      if (v[k] !== undefined && !this.isString(v[k])) {
+        this.err(`${path}.${k}`, 'expected animation type string');
+      }
+    }
+    if (v.defaultTransition !== undefined) {
+      const t = v.defaultTransition;
+      if (!this.isObject(t)) {
+        this.err(`${path}.defaultTransition`, 'expected object');
+      } else {
+        if (!this.isString(t.type) || !VALID_TRANSITION_TYPES.has(t.type)) {
+          this.err(`${path}.defaultTransition.type`, 'expected valid transition type');
+        }
+        if (t.duration !== undefined && !this.isNumber(t.duration)) {
+          this.err(`${path}.defaultTransition.duration`, 'expected number');
+        }
+      }
+    }
+    if (v.layoutOverrides !== undefined && !this.isObject(v.layoutOverrides)) {
+      this.err(`${path}.layoutOverrides`, 'expected object');
+    }
+    if (v.templateHints !== undefined) {
+      if (!this.isObject(v.templateHints)) {
+        this.err(`${path}.templateHints`, 'expected object map');
+      } else {
+        for (const tplName of Object.keys(v.templateHints)) {
+          const hints = v.templateHints[tplName];
+          if (!this.isObject(hints)) {
+            this.err(`${path}.templateHints.${tplName}`, 'expected object');
+            continue;
+          }
+          for (const key of Object.keys(hints)) {
+            const val = hints[key];
+            const t = typeof val;
+            if (t !== 'string' && t !== 'number' && t !== 'boolean') {
+              this.err(
+                `${path}.templateHints.${tplName}.${key}`,
+                `expected string|number|boolean, got ${t}`,
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  seedColors(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    if (v.primary === undefined) {
+      this.err(`${path}.primary`, 'required when seedColors is present');
+    } else {
+      this.hex(`${path}.primary`, v.primary);
+    }
+    for (const k of ['secondary', 'accent', 'background', 'text']) {
+      if (v[k] !== undefined) this.hex(`${path}.${k}`, v[k]);
+    }
+  }
+
+  persistentLayer(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    // Either { template, config } or a raw Layer — only validate the template form here
+    if ('template' in v) {
+      if (!this.isString(v.template)) {
+        this.err(`${path}.template`, 'expected string');
+        return;
+      }
+      const cfg = v.config;
+      if (!this.isObject(cfg)) {
+        this.err(`${path}.config`, 'expected object');
+        return;
+      }
+      if (cfg.type !== v.template) {
+        this.err(`${path}.config.type`, `expected "${v.template}", got "${String(cfg.type)}"`);
+      }
+      if (v.template === 'gradientBackground' && cfg.preset !== undefined) {
+        if (!this.isString(cfg.preset) || !VALID_GRADIENT_PRESETS.has(cfg.preset)) {
+          this.err(
+            `${path}.config.preset`,
+            `expected one of: ${Array.from(VALID_GRADIENT_PRESETS).join(', ')}`,
+          );
+        }
+      }
+      if (v.template === 'gradientBackground' && 'gradient' in cfg) {
+        this.err(
+          `${path}.config.gradient`,
+          'raw CSS gradient strings are not allowed in Theme JSON; use a `preset`',
+        );
+      }
+    }
+    // Raw Layer form is permissive — no schema check here
+  }
+
+  persistentLayers(path: string, v: unknown): void {
+    if (!this.isObject(v)) {
+      this.err(path, 'expected object');
+      return;
+    }
+    for (const side of ['bottomLayers', 'topLayers']) {
+      const arr = v[side];
+      if (arr === undefined) continue;
+      if (!Array.isArray(arr)) {
+        this.err(`${path}.${side}`, 'expected array');
+        continue;
+      }
+      arr.forEach((entry, i) => this.persistentLayer(`${path}.${side}[${i}]`, entry));
+    }
+  }
+}
+
+export function validateTheme(input: unknown): ValidationResult {
+  const v = new V();
+  if (!v.isObject(input)) {
+    return { valid: false, errors: [{ path: '', message: 'expected object' }] };
+  }
+
+  if (input.schemaVersion !== THEME_SCHEMA_VERSION) {
+    v.err(
+      'schemaVersion',
+      `expected "${THEME_SCHEMA_VERSION}", got "${String(input.schemaVersion)}"`,
+    );
+  }
+  if (!v.isString(input.id) || input.id.length === 0) {
+    v.err('id', 'expected non-empty string');
+  }
+  if (!v.isString(input.name) || input.name.length === 0) {
+    v.err('name', 'expected non-empty string');
+  }
+  if (input.description !== undefined && !v.isString(input.description)) {
+    v.err('description', 'expected string');
+  }
+
+  if (input.seedColors !== undefined) v.seedColors('seedColors', input.seedColors);
+
+  if (input.colors === undefined) {
+    v.err('colors', 'required');
+  } else {
+    v.palette('colors', input.colors);
+  }
+
+  if (input.typography === undefined) {
+    v.err('typography', 'required');
+  } else {
+    v.typography('typography', input.typography);
+  }
+
+  if (input.style === undefined) {
+    v.err('style', 'required');
+  } else {
+    v.style('style', input.style);
+  }
+
+  if (input.renderStyle === undefined) {
+    v.err('renderStyle', 'required');
+  } else {
+    v.renderStyle('renderStyle', input.renderStyle);
+  }
+
+  if (input.colorSchemes === undefined) {
+    v.err('colorSchemes', 'required');
+  } else {
+    v.colorSchemes('colorSchemes', input.colorSchemes);
+  }
+
+  if (input.persistentLayers !== undefined) {
+    v.persistentLayers('persistentLayers', input.persistentLayers);
+  }
+
+  if (v.errors.length === 0) {
+    return { valid: true, errors: [], theme: input as unknown as Theme };
+  }
+  return { valid: false, errors: v.errors };
+}
+
+/** Throws on invalid input. Useful at module init for built-in themes. */
+export function assertTheme(input: unknown, source = 'theme'): Theme {
+  const result = validateTheme(input);
+  if (!result.valid || !result.theme) {
+    const summary = result.errors
+      .slice(0, 5)
+      .map((e) => `  ${e.path || '<root>'}: ${e.message}`)
+      .join('\n');
+    const more = result.errors.length > 5 ? `\n  ... and ${result.errors.length - 5} more` : '';
+    throw new Error(`Invalid ${source}:\n${summary}${more}`);
+  }
+  return result.theme;
+}
+
+// (Theme types are re-exported from `./Theme.js` via the schemas barrel.)

package/src/schemas/themes/bold.json

@@ -0,0 +1,48 @@
+{
+  "schemaVersion": "1",
+  "id": "bold",
+  "name": "Bold",
+  "description": "High-contrast black with vivid accents and dramatic animations.",
+  "colors": {
+    "primary": "#e53e3e",
+    "secondary": "#ed8936",
+    "background": "#000000",
+    "backgroundLight": "#1a1a1a",
+    "text": "#ffffff",
+    "textMuted": "#cbd5e0",
+    "highlight": "#f6e05e",
+    "warning": "#fc8181"
+  },
+  "typography": {
+    "bodyFont": { "stackId": "roboto" },
+    "titleFont": { "stackId": "oswald" },
+    "titleWeight": "bold",
+    "titleScale": 1.15,
+    "bodyScale": 1.0,
+    "titleLineHeight": 1.1
+  },
+  "style": {
+    "textShadow": true,
+    "overlayOpacity": 0.6,
+    "animationSpeed": 0.8
+  },
+  "renderStyle": {
+    "name": "bold",
+    "defaultTextAnimation": "zoomIn",
+    "defaultImageAnimation": "slowZoom",
+    "ambientMotion": true,
+    "defaultTransition": { "type": "dissolve", "duration": 0.5 },
+    "templateHints": {
+      "statHighlight": { "entrance": "dramatic" },
+      "fullBleedQuote": { "entrance": "dramatic" }
+    }
+  },
+  "colorSchemes": {
+    "blue": { "bg": "#1a202c", "text": "#63b3ed", "accent": "#90cdf4" },
+    "green": { "bg": "#1a202c", "text": "#48bb78", "accent": "#68d391" },
+    "purple": { "bg": "#1a202c", "text": "#b794f4", "accent": "#d6bcfa" },
+    "red": { "bg": "#1a202c", "text": "#fc8181", "accent": "#feb2b2" },
+    "orange": { "bg": "#1a202c", "text": "#f6ad55", "accent": "#fbd38d" },
+    "teal": { "bg": "#1a202c", "text": "#4fd1c5", "accent": "#81e6d9" }
+  }
+}

package/src/schemas/themes/cinematic.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "1",
+  "id": "cinematic",
+  "name": "Cinematic",
+  "description": "Ultra-dark with moody gradients, gold accents, and slow dissolve transitions.",
+  "colors": {
+    "primary": "#d69e2e",
+    "secondary": "#b7791f",
+    "background": "#0a0f1a",
+    "backgroundLight": "#1a202c",
+    "text": "#f7fafc",
+    "textMuted": "#a0aec0",
+    "highlight": "#ecc94b",
+    "warning": "#fc8181"
+  },
+  "typography": {
+    "bodyFont": { "stackId": "crimson" },
+    "titleFont": { "stackId": "cormorant" },
+    "titleWeight": "bold",
+    "lineHeight": 1.5,
+    "titleLineHeight": 1.2
+  },
+  "style": {
+    "textShadow": true,
+    "overlayOpacity": 0.55,
+    "animationSpeed": 1.2
+  },
+  "renderStyle": {
+    "name": "cinematic",
+    "defaultTextAnimation": "fadeIn",
+    "defaultImageAnimation": "slowZoom",
+    "ambientMotion": true,
+    "defaultTransition": { "type": "dissolve", "duration": 1.2 },
+    "templateHints": {
+      "title": { "showAccentLine": true }
+    }
+  },
+  "colorSchemes": {
+    "blue": { "bg": "#0d1b2a", "text": "#90cdf4", "accent": "#63b3ed" },
+    "green": { "bg": "#0d1b14", "text": "#9ae6b4", "accent": "#68d391" },
+    "purple": { "bg": "#1a0d2e", "text": "#d6bcfa", "accent": "#b794f4" },
+    "red": { "bg": "#2a0d0d", "text": "#fc8181", "accent": "#feb2b2" },
+    "orange": { "bg": "#2a1a0d", "text": "#fbd38d", "accent": "#f6ad55" },
+    "teal": { "bg": "#0d2a2a", "text": "#81e6d9", "accent": "#4fd1c5" }
+  },
+  "persistentLayers": {
+    "bottomLayers": [
+      {
+        "template": "gradientBackground",
+        "config": { "type": "gradientBackground", "preset": "radial-dark" }
+      }
+    ]
+  }
+}

package/src/schemas/themes/documentary.json

@@ -0,0 +1,49 @@
+{
+  "schemaVersion": "1",
+  "id": "documentary",
+  "name": "Documentary",
+  "description": "Classic dark cinematic look with elegant serif typography.",
+  "colors": {
+    "primary": "#3d5a80",
+    "secondary": "#63b3ed",
+    "background": "#1a202c",
+    "backgroundLight": "#2d3748",
+    "text": "#ffffff",
+    "textMuted": "#a0aec0",
+    "highlight": "#63b3ed",
+    "warning": "#fc8181"
+  },
+  "typography": {
+    "bodyFont": { "stackId": "source-serif" },
+    "titleFont": { "stackId": "playfair" },
+    "titleWeight": "bold"
+  },
+  "style": {
+    "textShadow": true,
+    "overlayOpacity": 0.5,
+    "animationSpeed": 1.0
+  },
+  "renderStyle": {
+    "name": "documentary",
+    "defaultTextAnimation": "fadeIn",
+    "defaultImageAnimation": "slowZoom",
+    "ambientMotion": true,
+    "defaultTransition": { "type": "fade", "duration": 0.8 }
+  },
+  "colorSchemes": {
+    "blue": { "bg": "#1a365d", "text": "#63b3ed", "accent": "#90cdf4" },
+    "green": { "bg": "#22543d", "text": "#9ae6b4", "accent": "#68d391" },
+    "purple": { "bg": "#44337a", "text": "#d6bcfa", "accent": "#b794f4" },
+    "red": { "bg": "#742a2a", "text": "#fc8181", "accent": "#feb2b2" },
+    "orange": { "bg": "#744210", "text": "#fbd38d", "accent": "#f6ad55" },
+    "teal": { "bg": "#234e52", "text": "#81e6d9", "accent": "#4fd1c5" }
+  },
+  "persistentLayers": {
+    "bottomLayers": [
+      {
+        "template": "gradientBackground",
+        "config": { "type": "gradientBackground", "preset": "dark-vignette" }
+      }
+    ]
+  }
+}

package/src/schemas/themes/gezellig.json

@@ -0,0 +1,44 @@
+{
+  "schemaVersion": "1",
+  "id": "gezellig",
+  "name": "Gezellig",
+  "description": "Warm sage + terracotta palette inspired by the Gezel desktop app. Subtle orange-tinted dark background, cream text, sage and terracotta accents.",
+  "colors": {
+    "primary": "#b0724c",
+    "secondary": "#667f62",
+    "background": "#1f1a17",
+    "backgroundLight": "#2b2420",
+    "text": "#f3ede0",
+    "textMuted": "#a89b85",
+    "highlight": "#c0875d",
+    "warning": "#e07a6b"
+  },
+  "typography": {
+    "bodyFont": { "stackId": "system-sans-emoji" },
+    "titleFont": { "stackId": "system-serif-emoji" },
+    "monoFont": { "stackId": "system-mono" },
+    "titleWeight": "bold",
+    "lineHeight": 1.55
+  },
+  "style": {
+    "textShadow": false,
+    "overlayOpacity": 0.4,
+    "animationSpeed": 1.0,
+    "borderRadius": 6
+  },
+  "renderStyle": {
+    "name": "gezellig",
+    "defaultTextAnimation": "fadeIn",
+    "defaultImageAnimation": "slowZoom",
+    "ambientMotion": false,
+    "defaultTransition": { "type": "fade", "duration": 0.6 }
+  },
+  "colorSchemes": {
+    "terracotta": { "bg": "#3d2620", "text": "#f3ede0", "accent": "#c0875d" },
+    "sage": { "bg": "#28332a", "text": "#e3ead9", "accent": "#8aa589" },
+    "amber": { "bg": "#3d2e17", "text": "#fbe3a8", "accent": "#d4a149" },
+    "plum": { "bg": "#2e1f2a", "text": "#e8d4e0", "accent": "#b088a5" },
+    "ink": { "bg": "#1a1f26", "text": "#d5dde8", "accent": "#7b8fa8" },
+    "cream": { "bg": "#f3ede0", "text": "#2b2420", "accent": "#b0724c" }
+  }
+}

package/src/schemas/themes/index.ts

@@ -0,0 +1,53 @@
+/**
+ * Built-in Theme Library
+ *
+ * Loads each built-in theme from its JSON sidecar, validates it, and
+ * exports the typed `Theme` constants. The JSON files in this directory
+ * are syntactically identical to customizer-authored themes — they just
+ * use more of the schema.
+ *
+ * Validation runs at module init: if a built-in JSON drifts from the
+ * schema, the import fails loudly during build / startup.
+ */
+
+import type { Theme } from '../Theme.js';
+import { assertTheme } from '../themeValidator.js';
+
+import standardJson from './standard.json' with { type: 'json' };
+import standardDarkJson from './standard-dark.json' with { type: 'json' };
+import documentaryJson from './documentary.json' with { type: 'json' };
+import minimalistJson from './minimalist.json' with { type: 'json' };
+import boldJson from './bold.json' with { type: 'json' };
+import morningLightJson from './morning-light.json' with { type: 'json' };
+import techDarkJson from './tech-dark.json' with { type: 'json' };
+import magazineJson from './magazine.json' with { type: 'json' };
+import cinematicJson from './cinematic.json' with { type: 'json' };
+import warmEarthJson from './warm-earth.json' with { type: 'json' };
+import gezelligJson from './gezellig.json' with { type: 'json' };
+
+export const standard: Theme = assertTheme(standardJson, 'standard.json');
+export const standardDark: Theme = assertTheme(standardDarkJson, 'standard-dark.json');
+export const documentary: Theme = assertTheme(documentaryJson, 'documentary.json');
+export const minimalist: Theme = assertTheme(minimalistJson, 'minimalist.json');
+export const bold: Theme = assertTheme(boldJson, 'bold.json');
+export const morningLight: Theme = assertTheme(morningLightJson, 'morning-light.json');
+export const techDark: Theme = assertTheme(techDarkJson, 'tech-dark.json');
+export const magazine: Theme = assertTheme(magazineJson, 'magazine.json');
+export const cinematic: Theme = assertTheme(cinematicJson, 'cinematic.json');
+export const warmEarth: Theme = assertTheme(warmEarthJson, 'warm-earth.json');
+export const gezellig: Theme = assertTheme(gezelligJson, 'gezellig.json');
+
+/** All built-in themes, keyed by id. */
+export const BUILTIN_THEMES: Record<string, Theme> = {
+  standard,
+  'standard-dark': standardDark,
+  documentary,
+  minimalist,
+  bold,
+  'morning-light': morningLight,
+  'tech-dark': techDark,
+  magazine,
+  cinematic,
+  'warm-earth': warmEarth,
+  gezellig,
+};

package/src/schemas/themes/magazine.json

@@ -0,0 +1,44 @@
+{
+  "schemaVersion": "1",
+  "id": "magazine",
+  "name": "Magazine",
+  "description": "Rich editorial palette with mixed serif/sans typography and slide transitions.",
+  "colors": {
+    "primary": "#c53030",
+    "secondary": "#2b6cb0",
+    "background": "#1a202c",
+    "backgroundLight": "#2d3748",
+    "text": "#f7fafc",
+    "textMuted": "#cbd5e0",
+    "highlight": "#ed8936",
+    "warning": "#fc8181"
+  },
+  "typography": {
+    "bodyFont": { "stackId": "dm-sans" },
+    "titleFont": { "stackId": "dm-serif" },
+    "titleWeight": "bold",
+    "titleScale": 1.05,
+    "lineHeight": 1.5
+  },
+  "style": {
+    "textShadow": true,
+    "overlayOpacity": 0.45,
+    "animationSpeed": 1.0,
+    "borderRadius": 6
+  },
+  "renderStyle": {
+    "name": "magazine",
+    "defaultTextAnimation": "fadeIn",
+    "defaultImageAnimation": "slowZoom",
+    "ambientMotion": true,
+    "defaultTransition": { "type": "slideLeft", "duration": 0.7 }
+  },
+  "colorSchemes": {
+    "blue": { "bg": "#1a365d", "text": "#90cdf4", "accent": "#63b3ed" },
+    "green": { "bg": "#1c4532", "text": "#9ae6b4", "accent": "#68d391" },
+    "purple": { "bg": "#322659", "text": "#d6bcfa", "accent": "#b794f4" },
+    "red": { "bg": "#63171b", "text": "#feb2b2", "accent": "#fc8181" },
+    "orange": { "bg": "#652b19", "text": "#fbd38d", "accent": "#f6ad55" },
+    "teal": { "bg": "#1d4044", "text": "#81e6d9", "accent": "#4fd1c5" }
+  }
+}