fix: write all theme.json defaults to vault theme frontmatter

Previously, only UI chrome colours and 3 editor vars were written to
theme note frontmatter. CSS vars like --lists-bullet-size, --headings-h1-font-size,
etc. remained unset, so EditorTheme.css rules had no effect.

- Expand DEFAULT_VAULT_THEME_VARS from 46 to 140 entries, covering every
  property from theme.json (editor, headings, lists, checkboxes, inline
  styles, code blocks, blockquote, table, horizontal rule, colors)
- Fix missing px suffix on editor-font-size and editor-max-width
- Add missing semantic vars: bg-card, text-tertiary
- Refactor built-in vault themes from const strings to generated functions
  with per-theme colour overrides (DRY, all themes get editor properties)
- Quote var() references in frontmatter to prevent YAML parse issues
- Add regression tests for create_vault_theme and seed_vault_themes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-03-11 22:18:50 +01:00
parent ce6a61c369
commit e2c6f540fc
6 changed files with 428 additions and 211 deletions

View File

@@ -1,4 +1,6 @@
import { describe, it, expect } from 'vitest'
import { readFileSync } from 'fs'
import { resolve } from 'path'
import { buildThemeSchema, formatValueForFrontmatter, parseValueFromFrontmatter } from './themeSchema'
import type { ThemeProperty } from './themeSchema'
@@ -124,6 +126,41 @@ describe('buildThemeSchema', () => {
expect(fontStyle.options).toContain('normal')
expect(fontStyle.options).toContain('italic')
})
it('every var(--xxx) in EditorTheme.css has a matching default in theme schema or base UI', () => {
const cssPath = resolve(__dirname, '../components/EditorTheme.css')
const css = readFileSync(cssPath, 'utf-8')
// Extract all var(--xxx) references (first arg only, ignore fallbacks)
const varRegex = /var\(--([a-z0-9-]+)/g
const usedVars = new Set<string>()
let match: RegExpExecArray | null
while ((match = varRegex.exec(css)) !== null) {
usedVars.add(match[1])
}
// Collect all CSS var names from the schema
const schemaVars = new Set<string>()
for (const section of schema) {
for (const prop of section.properties) schemaVars.add(prop.cssVar)
for (const sub of section.subsections) {
for (const prop of sub.properties) schemaVars.add(prop.cssVar)
}
}
// Base UI color vars set by the theme color system (not in theme.json schema)
const baseUIVars = new Set([
'border-primary', 'bg-primary', 'bg-card', 'bg-hover-subtle', 'bg-selected',
'text-primary', 'text-secondary', 'text-muted', 'text-heading', 'text-tertiary',
'accent-blue',
])
for (const varName of usedVars) {
expect(
schemaVars.has(varName) || baseUIVars.has(varName),
).toBe(true)
}
})
})
describe('formatValueForFrontmatter', () => {