@troshab/slidev-theme-troshab 0.1.0

package/scripts/contrast-audit.mjs

@@ -0,0 +1,299 @@
+#!/usr/bin/env node
+
+/**
+ * WCAG Contrast Audit for slidev-theme-troshab
+ *
+ * Dual standard: WCAG 2.x ratio + APCA Lc checked in parallel.
+ * Run: node scripts/contrast-audit.mjs
+ *
+ * Standards:
+ *   - WCAG 2.x:  4.5:1 AA (normal text), 3:1 AA (large text >=24px)
+ *   - APCA Bronze: body Lc 75+, content Lc 60+, large Lc 45+, non-text Lc 15+
+ *   - Non-text:   3:1 AA (borders, icons, chart lines, focus rings)
+ *   - BDA spacing: word-spacing >= 3.5x letter-spacing
+ *
+ * Scientific basis:
+ *   - Stevens (1961) power law → APCA nonlinear luminance model
+ *   - Legge & Rubin (1986, JOSA A) → polarity sensitivity (~15-20%)
+ *   - Campbell & Robson (1968, J. Physiology) → spatial frequency / CSF
+ *   - Legge et al. (1985, JOSA A) → Lc 90 for max reading speed
+ *   - Arditi & Cho (2005, IOVS) → Lc 60 for short-read content (24px+)
+ *   - Zorzi et al. (2012, PNAS 109:11455) → letter-spacing reduces crowding
+ *   - BDA Style Guide (2018) → word/letter ratio >= 3.5x
+ */
+
+import { readFileSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import {
+  contrastRatio, apcaContrast,
+  parsePalette, parseSemanticTokens,
+  resolveHex, fmt, fmtLc,
+} from './shared/css-utils.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// ---------------------------------------------------------------------------
+// Paths
+// ---------------------------------------------------------------------------
+
+const colorsPath = resolve(__dirname, '..', 'styles', 'colors.css')
+const basePath = resolve(__dirname, '..', 'styles', 'base.css')
+
+// ---------------------------------------------------------------------------
+// Parse
+// ---------------------------------------------------------------------------
+
+const palette = parsePalette(colorsPath)
+const { light, dark } = parseSemanticTokens(colorsPath)
+
+function sem(theme, varName) {
+  return resolveHex(palette, theme === 'light' ? light : dark, varName)
+}
+
+// ---------------------------------------------------------------------------
+// APCA thresholds (Bronze level)
+// ---------------------------------------------------------------------------
+
+function apcaThreshold(sizeHint) {
+  // sizeHint like "base(24px)", "small(18px)", "h1(57px)", "h2(43px)", "non-text"
+  if (sizeHint === 'non-text') return 15
+  const pxMatch = sizeHint.match(/(\d+)px/)
+  if (!pxMatch) return 75 // default: body
+  const px = parseInt(pxMatch[1])
+  if (px >= 36) return 45  // large headlines
+  if (px >= 24) return 60  // content text (headings, 1-2 lines)
+  return 75                // body text (reading blocks)
+}
+
+function dualStatus(ratio, minRatio, lc, minLc) {
+  const wcagOk = ratio >= minRatio
+  const apcaOk = Math.abs(lc) >= minLc
+  if (wcagOk && apcaOk) return 'OK'
+  if (!wcagOk) return 'FAIL'
+  // WCAG passes but APCA fails — warn (APCA draft)
+  return 'WARN'
+}
+
+function statusIcon(s) {
+  if (s === 'FAIL') return '!'
+  if (s === 'WARN') return '~'
+  return ' '
+}
+
+function wcagLabel(ratio, isLarge) {
+  const minAA = isLarge ? 3.0 : 4.5
+  const minAAA = isLarge ? 4.5 : 7.0
+  if (ratio >= minAAA) return 'AAA'
+  if (ratio >= minAA) return 'AA '
+  return 'FAIL'
+}
+
+// ---------------------------------------------------------------------------
+// Parse spacing from base.css
+// ---------------------------------------------------------------------------
+
+function parseSpacing(path) {
+  const css = readFileSync(path, 'utf8')
+  const letterMatch = css.match(/--letter-spacing-body:\s*([\d.]+)em/)
+  const wordMatch = css.match(/--word-spacing-body:\s*([\d.]+)em/)
+  return {
+    letterSpacing: letterMatch ? parseFloat(letterMatch[1]) : null,
+    wordSpacing: wordMatch ? parseFloat(wordMatch[1]) : null,
+  }
+}
+
+// ===== MAIN =====
+
+console.log('WCAG + APCA Contrast Audit - slidev-theme-troshab')
+console.log('='.repeat(76))
+
+let issues = []
+
+// --- Section 1: Text contrast ---
+
+console.log('\n1. TEXT CONTRAST')
+console.log('   WCAG 2.x: normal <=24px 4.5:1 AA / 7:1 AAA | large >=24px 3:1 AA / 4.5:1 AAA')
+console.log('   APCA Bronze: body(<=24px) Lc 75+ | content(24px) Lc 60+ | large(>=36px) Lc 45+')
+console.log('-'.repeat(76))
+
+const textPairs = [
+  { name: 'text / bg', fg: 'text', bg: 'bg', size: 'base(24px)' },
+  { name: 'text-secondary / bg', fg: 'text-secondary', bg: 'bg', size: 'base(24px)' },
+  { name: 'text-tertiary / bg', fg: 'text-tertiary', bg: 'bg', size: 'small(18px)' },
+  { name: 'primary / bg', fg: 'primary', bg: 'bg', size: 'base(24px)' },
+  { name: 'success / bg', fg: 'success', bg: 'bg', size: 'base(24px)' },
+  { name: 'warning / bg', fg: 'warning', bg: 'bg', size: 'base(24px)' },
+  { name: 'danger / bg', fg: 'danger', bg: 'bg', size: 'base(24px)' },
+  { name: 'info / bg', fg: 'info', bg: 'bg', size: 'base(24px)' },
+  { name: 'accent / bg', fg: 'accent', bg: 'bg', size: 'base(24px)' },
+  { name: 'secondary / bg', fg: 'secondary', bg: 'bg', size: 'base(24px)' },
+]
+
+for (const theme of ['light', 'dark']) {
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+  for (const pair of textPairs) {
+    const fgHex = sem(theme, pair.fg)
+    const bgHex = sem(theme, pair.bg)
+    if (!fgHex || !bgHex) {
+      console.log(`  ? ${pair.name}: missing (${pair.fg}=${fgHex}, ${pair.bg}=${bgHex})`)
+      continue
+    }
+    const ratio = contrastRatio(fgHex, bgHex)
+    const lc = apcaContrast(fgHex, bgHex)
+    const isLarge = pair.size.includes('24px') || pair.size.includes('h1') || pair.size.includes('h2')
+    const minAA = isLarge ? 3.0 : 4.5
+    const minLc = apcaThreshold(pair.size)
+    const wLabel = wcagLabel(ratio, isLarge)
+    const status = dualStatus(ratio, minAA, lc, minLc)
+    const icon = statusIcon(status)
+    console.log(`  ${icon} ${pair.name.padEnd(25)} ${fmt(ratio).padStart(8)}  ${wLabel}  [${pair.size.padEnd(12)}]  ${fmtLc(lc)}  (${minLc}+ ${status})`)
+    if (status === 'FAIL') issues.push(`[${theme}] ${pair.name}: ${fmt(ratio)} < ${minAA}:1`)
+    if (status === 'WARN') issues.push(`[${theme}] ${pair.name}: APCA ${fmtLc(lc)} < Lc ${minLc} (WCAG OK)`)
+  }
+}
+
+// --- Section 2: Non-text contrast ---
+
+console.log('\n\n2. NON-TEXT CONTRAST (WCAG 3:1, APCA Lc 15+)')
+console.log('-'.repeat(76))
+
+const nonTextPairs = [
+  { name: 'border / bg', fg: 'border', bg: 'bg' },
+  { name: 'border-strong / bg', fg: 'border-strong', bg: 'bg' },
+  { name: 'border / bg-soft', fg: 'border', bg: 'bg-soft' },
+  { name: 'border-strong / bg-soft', fg: 'border-strong', bg: 'bg-soft' },
+  { name: 'border / bg-muted', fg: 'border', bg: 'bg-muted' },
+  { name: 'border-strong / bg-muted', fg: 'border-strong', bg: 'bg-muted' },
+]
+
+for (const theme of ['light', 'dark']) {
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+  for (const pair of nonTextPairs) {
+    const fgHex = sem(theme, pair.fg)
+    const bgHex = sem(theme, pair.bg)
+    if (!fgHex || !bgHex) continue
+    const ratio = contrastRatio(fgHex, bgHex)
+    const lc = apcaContrast(fgHex, bgHex)
+    const status = dualStatus(ratio, 3.0, lc, 15)
+    const icon = statusIcon(status)
+    console.log(`  ${icon} ${pair.name.padEnd(28)} ${fmt(ratio).padStart(8)}  ${fmtLc(lc)}  (15+ ${status})`)
+    if (status === 'FAIL') issues.push(`[${theme}] non-text ${pair.name}: ${fmt(ratio)} < 3:1`)
+  }
+}
+
+// --- Section 3: Focus ring ---
+
+console.log('\n\n3. FOCUS RING (WCAG 3:1, APCA Lc 15+)')
+console.log('-'.repeat(76))
+
+for (const theme of ['light', 'dark']) {
+  const ringHex = sem(theme, 'primary')
+  const bgHex = sem(theme, 'bg')
+  if (!ringHex || !bgHex) continue
+  const ratio = contrastRatio(ringHex, bgHex)
+  const lc = apcaContrast(ringHex, bgHex)
+  const status = dualStatus(ratio, 3.0, lc, 15)
+  console.log(`  ${theme.padEnd(6)} primary / bg  ${fmt(ratio).padStart(8)}  ${fmtLc(lc)}  (${status})`)
+  if (status === 'FAIL') issues.push(`[${theme}] focus ring: ${fmt(ratio)} < 3:1`)
+}
+
+// --- Section 4: Tint readability ---
+
+console.log('\n\n4. TINT BACKGROUNDS (text on -tint vars, WCAG 4.5:1, APCA Lc 75+)')
+console.log('-'.repeat(76))
+
+const tintPairs = [
+  { name: 'text on primary-tint', text: 'text', tint: 'primary-tint' },
+  { name: 'text on success-tint', text: 'text', tint: 'success-tint' },
+  { name: 'text on warning-tint', text: 'text', tint: 'warning-tint' },
+  { name: 'text on danger-tint', text: 'text', tint: 'danger-tint' },
+  { name: 'text on info-tint', text: 'text', tint: 'info-tint' },
+]
+
+for (const theme of ['light', 'dark']) {
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+  for (const pair of tintPairs) {
+    const textHex = sem(theme, pair.text)
+    const tintHex = sem(theme, pair.tint)
+    if (!textHex || !tintHex) continue
+    const ratio = contrastRatio(textHex, tintHex)
+    const lc = apcaContrast(textHex, tintHex)
+    const status = dualStatus(ratio, 4.5, lc, 75)
+    const icon = statusIcon(status)
+    console.log(`  ${icon} ${pair.name.padEnd(28)} ${fmt(ratio).padStart(8)}  ${fmtLc(lc)}  (75+ ${status})`)
+    if (status === 'FAIL') issues.push(`[${theme}] tint ${pair.name}: ${fmt(ratio)} < 4.5:1`)
+    if (status === 'WARN') issues.push(`[${theme}] tint ${pair.name}: APCA ${fmtLc(lc)} < Lc 75 (WCAG OK)`)
+  }
+}
+
+// --- Section 5: Foreground pairs ---
+
+console.log('\n\n5. FOREGROUND PAIRS (text on semantic bg, WCAG 4.5:1, APCA Lc 60+)')
+console.log('-'.repeat(76))
+
+const fgPairs = ['primary', 'success', 'warning', 'danger', 'info', 'secondary', 'accent']
+
+for (const theme of ['light', 'dark']) {
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+  for (const name of fgPairs) {
+    const bgHex = sem(theme, name)
+    const fgHex = sem(theme, name + '-foreground')
+    if (!bgHex || !fgHex) continue
+    const ratio = contrastRatio(fgHex, bgHex)
+    const lc = apcaContrast(fgHex, bgHex)
+    // Foreground pairs are typically short labels on buttons — content text Lc 60
+    const status = dualStatus(ratio, 4.5, lc, 60)
+    const icon = statusIcon(status)
+    const wLabel = ratio >= 4.5 ? 'OK  ' : ratio >= 3.0 ? 'AA-L' : 'FAIL'
+    console.log(`  ${icon} ${(name + '-fg / ' + name).padEnd(28)} ${fmt(ratio).padStart(8)}  ${wLabel}  ${fmtLc(lc)}  (60+ ${status})`)
+    if (ratio < 4.5) issues.push(`[${theme}] foreground ${name}-fg / ${name}: ${fmt(ratio)} < 4.5:1`)
+  }
+}
+
+// --- Section 6: BDA Spacing ---
+
+console.log('\n\n6. BDA DYSLEXIA SPACING')
+console.log('-'.repeat(76))
+
+const spacing = parseSpacing(basePath)
+if (spacing.letterSpacing && spacing.wordSpacing) {
+  const ratio = spacing.wordSpacing / spacing.letterSpacing
+  const required = 3.5
+  const status = ratio >= required ? 'OK' : 'FAIL'
+  console.log(`  letter-spacing: ${spacing.letterSpacing}em`)
+  console.log(`  word-spacing:   ${spacing.wordSpacing}em`)
+  console.log(`  ratio:          ${ratio.toFixed(1)}x  (BDA requires >= ${required}x)`)
+  console.log(`  status:         ${status}`)
+  if (ratio < required) {
+    issues.push(`[spacing] word/letter ratio ${ratio.toFixed(1)}x < 3.5x`)
+    console.log(`  fix:            word-spacing >= ${(spacing.letterSpacing * required).toFixed(3)}em`)
+  }
+}
+
+// --- Summary ---
+
+console.log('\n' + '='.repeat(76))
+console.log('SUMMARY')
+console.log('='.repeat(76))
+
+if (issues.length === 0) {
+  console.log('\nAll checks passed!')
+} else {
+  const fails = issues.filter(i => !i.includes('APCA'))
+  const warns = issues.filter(i => i.includes('APCA'))
+  if (fails.length > 0) {
+    console.log(`\n${fails.length} FAIL(s):`)
+    fails.forEach((issue, i) => console.log(`  ${i + 1}. ${issue}`))
+  }
+  if (warns.length > 0) {
+    console.log(`\n${warns.length} WARN(s) (APCA draft):`)
+    warns.forEach((issue, i) => console.log(`  ${i + 1}. ${issue}`))
+  }
+}
+
+console.log()
+
+// Exit code: FAIL = 1, WARN-only = 0
+const hasFail = issues.some(i => !i.includes('APCA'))
+process.exit(hasFail ? 1 : 0)

package/scripts/generate-palette.mjs

@@ -0,0 +1,395 @@
+#!/usr/bin/env node
+
+/**
+ * Dracula / Alucard Palette Generator
+ *
+ * Generates 11-shade OKLCH ramps (50-950) from Dracula and Alucard base colors.
+ * Pure math - no npm dependencies.
+ *
+ * Usage: node scripts/generate-palette.mjs
+ * Output: CSS custom properties ready to paste into colors.css
+ *
+ * Color science:
+ *   sRGB -> linear RGB -> XYZ D65 -> OKLCH
+ *   Vary Lightness while preserving Chroma and Hue
+ *   OKLCH -> XYZ D65 -> linear RGB -> sRGB (gamut-clamp)
+ */
+
+// ===========================================================================
+// Dracula base colors (from spec.draculatheme.com)
+// ===========================================================================
+
+const DRACULA = {
+  'drac-bg':      { dark: '#282A36', darkAlt: '#44475A' },
+  'drac-fg':      { dark: '#F8F8F2', light: '#1F1F1F' },
+  'drac-comment': { dark: '#6272A4', light: '#6C664B' },
+  'drac-cyan':    { dark: '#8BE9FD', light: '#036A96' },
+  'drac-green':   { dark: '#50FA7B', light: '#14710A' },
+  'drac-orange':  { dark: '#FFB86C', light: '#A34D14' },
+  'drac-pink':    { dark: '#FF79C6', light: '#A3144D' },
+  'drac-purple':  { dark: '#BD93F9', light: '#644AC9' },
+  'drac-red':     { dark: '#FF5555', light: '#CB3A2A' },
+  'drac-yellow':  { dark: '#F1FA8C', light: '#846E15' },
+}
+
+// Alucard background (warm cream)
+const ALUCARD_BG = '#FFFBEB'
+
+// ===========================================================================
+// sRGB <-> Linear RGB
+// ===========================================================================
+
+function hexToRgb(hex) {
+  hex = hex.replace('#', '')
+  return [
+    parseInt(hex.slice(0, 2), 16) / 255,
+    parseInt(hex.slice(2, 4), 16) / 255,
+    parseInt(hex.slice(4, 6), 16) / 255,
+  ]
+}
+
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+}
+
+function linearToSrgb(c) {
+  c = Math.max(0, Math.min(1, c))
+  return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055
+}
+
+function rgbToHex(r, g, b) {
+  const toHex = v => {
+    const clamped = Math.max(0, Math.min(255, Math.round(v * 255)))
+    return clamped.toString(16).padStart(2, '0')
+  }
+  return '#' + toHex(r) + toHex(g) + toHex(b)
+}
+
+// ===========================================================================
+// Linear RGB <-> XYZ D65
+// ===========================================================================
+
+function linearRgbToXyz(r, g, b) {
+  return [
+    0.4123907993 * r + 0.3575843394 * g + 0.1804807884 * b,
+    0.2126390059 * r + 0.7151686788 * g + 0.0721923154 * b,
+    0.0193308187 * r + 0.1191947798 * g + 0.9505321522 * b,
+  ]
+}
+
+function xyzToLinearRgb(x, y, z) {
+  return [
+     3.2409699419 * x - 1.5373831776 * y - 0.4986107603 * z,
+    -0.9692436363 * x + 1.8759675015 * y + 0.0415550574 * z,
+     0.0556300797 * x - 0.2039769589 * y + 1.0569715142 * z,
+  ]
+}
+
+// ===========================================================================
+// XYZ D65 <-> OKLab
+// ===========================================================================
+
+function xyzToOklab(x, y, z) {
+  const l_ = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z
+  const m_ = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z
+  const s_ = 0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z
+
+  const l = Math.cbrt(l_)
+  const m = Math.cbrt(m_)
+  const s = Math.cbrt(s_)
+
+  return [
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+  ]
+}
+
+function oklabToXyz(L, a, b) {
+  const l = L + 0.3963377774 * a + 0.2158037573 * b
+  const m = L - 0.1055613458 * a - 0.0638541728 * b
+  const s = L - 0.0894841775 * a - 1.2914855480 * b
+
+  const l3 = l * l * l
+  const m3 = m * m * m
+  const s3 = s * s * s
+
+  return [
+    1.2270138511 * l3 - 0.5577999807 * m3 + 0.2812561490 * s3,
+   -0.0405801784 * l3 + 1.1122568696 * m3 - 0.0716766787 * s3,
+   -0.0763812845 * l3 - 0.4214819784 * m3 + 1.5861632204 * s3,
+  ]
+}
+
+// ===========================================================================
+// OKLab <-> OKLCH
+// ===========================================================================
+
+function oklabToOklch(L, a, b) {
+  const C = Math.sqrt(a * a + b * b)
+  let h = Math.atan2(b, a) * (180 / Math.PI)
+  if (h < 0) h += 360
+  return [L, C, h]
+}
+
+function oklchToOklab(L, C, h) {
+  const hRad = h * (Math.PI / 180)
+  return [L, C * Math.cos(hRad), C * Math.sin(hRad)]
+}
+
+// ===========================================================================
+// Full pipeline: hex -> OKLCH and back
+// ===========================================================================
+
+function hexToOklch(hex) {
+  const [r, g, b] = hexToRgb(hex).map(srgbToLinear)
+  const [x, y, z] = linearRgbToXyz(r, g, b)
+  const [L, a, ob] = xyzToOklab(x, y, z)
+  return oklabToOklch(L, a, ob)
+}
+
+function oklchToHex(L, C, h) {
+  const [oL, oa, ob] = oklchToOklab(L, C, h)
+  const [x, y, z] = oklabToXyz(oL, oa, ob)
+  let [r, g, b] = xyzToLinearRgb(x, y, z)
+  return rgbToHex(linearToSrgb(r), linearToSrgb(g), linearToSrgb(b))
+}
+
+// ===========================================================================
+// Gamut-aware OKLCH -> hex with chroma reduction
+// ===========================================================================
+
+function isInGamut(r, g, b) {
+  const eps = -0.001
+  return r >= eps && r <= 1.001 && g >= eps && g <= 1.001 && b >= eps && b <= 1.001
+}
+
+function oklchToHexGamut(L, C, h) {
+  // Binary search: reduce chroma until in sRGB gamut
+  let lo = 0, hi = C
+  // First check if full chroma is in gamut
+  {
+    const [oL, oa, ob] = oklchToOklab(L, hi, h)
+    const [x, y, z] = oklabToXyz(oL, oa, ob)
+    const [r, g, b] = xyzToLinearRgb(x, y, z)
+    if (isInGamut(r, g, b)) {
+      return rgbToHex(linearToSrgb(r), linearToSrgb(g), linearToSrgb(b))
+    }
+  }
+  // Binary search
+  for (let i = 0; i < 32; i++) {
+    const mid = (lo + hi) / 2
+    const [oL, oa, ob] = oklchToOklab(L, mid, h)
+    const [x, y, z] = oklabToXyz(oL, oa, ob)
+    const [r, g, b] = xyzToLinearRgb(x, y, z)
+    if (isInGamut(r, g, b)) {
+      lo = mid
+    } else {
+      hi = mid
+    }
+  }
+  const [oL, oa, ob] = oklchToOklab(L, lo, h)
+  const [x, y, z] = oklabToXyz(oL, oa, ob)
+  const [r, g, b] = xyzToLinearRgb(x, y, z)
+  return rgbToHex(linearToSrgb(r), linearToSrgb(g), linearToSrgb(b))
+}
+
+// ===========================================================================
+// Shade ramp generation
+// ===========================================================================
+
+/**
+ * Target OKLCH Lightness values for each shade level.
+ * Calibrated to match Tailwind's perceptual distribution.
+ * Shade 50 = lightest, 950 = darkest.
+ */
+const SHADE_LIGHTNESS = {
+  50:  0.97,
+  100: 0.93,
+  200: 0.87,
+  300: 0.78,
+  400: 0.68,
+  500: 0.57,
+  600: 0.48,
+  700: 0.40,
+  800: 0.32,
+  900: 0.24,
+  950: 0.16,
+}
+
+const SHADE_LEVELS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+/**
+ * Generate 11-shade ramp from a base color hex.
+ * Preserves hue, scales chroma proportionally with lightness.
+ */
+function generateRamp(baseHex, familyName) {
+  const [baseL, baseC, baseH] = hexToOklch(baseHex)
+
+  const shades = {}
+  for (const shade of SHADE_LEVELS) {
+    const targetL = SHADE_LIGHTNESS[shade]
+    // Scale chroma: reduce proportionally as we move away from base lightness
+    // toward extremes (very light or very dark), where sRGB gamut narrows
+    let chromaScale
+    if (targetL > 0.9) {
+      // Very light: aggressively reduce chroma
+      chromaScale = 0.15 + 0.85 * ((0.97 - targetL) / 0.07)
+      chromaScale = Math.max(0.05, chromaScale)
+    } else if (targetL < 0.2) {
+      // Very dark: reduce chroma
+      chromaScale = 0.3 + 0.7 * (targetL / 0.2)
+    } else {
+      // Mid-range: preserve chroma, slightly boosted near base
+      const dist = Math.abs(targetL - baseL)
+      chromaScale = 1.0 - dist * 0.3
+      chromaScale = Math.max(0.4, Math.min(1.2, chromaScale))
+    }
+    const targetC = baseC * chromaScale
+    const hex = oklchToHexGamut(targetL, targetC, baseH)
+    shades[shade] = hex
+  }
+  return shades
+}
+
+/**
+ * Generate neutral ramp (low chroma, warm or cool).
+ * Chroma is much lower than chromatic families.
+ */
+function generateNeutralRamp(baseHex, familyName) {
+  const [baseL, baseC, baseH] = hexToOklch(baseHex)
+  // Neutrals get very low chroma (warm or cool tint)
+  const neutralChroma = Math.min(baseC, 0.02)
+
+  const shades = {}
+  for (const shade of SHADE_LEVELS) {
+    const targetL = SHADE_LIGHTNESS[shade]
+    // Chroma tapers even more at extremes for neutrals
+    let cScale
+    if (targetL > 0.9) {
+      cScale = 0.3
+    } else if (targetL < 0.2) {
+      cScale = 0.5
+    } else {
+      cScale = 1.0
+    }
+    const targetC = neutralChroma * cScale
+    const hex = oklchToHexGamut(targetL, targetC, baseH)
+    shades[shade] = hex
+  }
+  return shades
+}
+
+// ===========================================================================
+// Generate all families
+// ===========================================================================
+
+const families = {}
+
+// --- Neutral families ---
+
+// drac-bg: dark neutral (cool, from Dracula Background #282A36)
+families['drac-bg'] = generateNeutralRamp(DRACULA['drac-bg'].dark, 'drac-bg')
+
+// drac-fg: warm neutral (from Foreground #F8F8F2 / #1F1F1F)
+families['drac-fg'] = generateNeutralRamp(DRACULA['drac-fg'].dark, 'drac-fg')
+
+// alu-bg: warm cream neutral (from Alucard Background #FFFBEB)
+families['alu-bg'] = generateNeutralRamp(ALUCARD_BG, 'alu-bg')
+
+// --- Chromatic families (dark base = primary reference) ---
+
+for (const [name, colors] of Object.entries(DRACULA)) {
+  if (['drac-bg', 'drac-fg'].includes(name)) continue
+  // Use dark variant as the chromatic reference (brighter, more saturated)
+  families[name] = generateRamp(colors.dark, name)
+}
+
+// ===========================================================================
+// WCAG 2.x contrast ratio (for verification)
+// ===========================================================================
+
+function relLum(hex) {
+  const [r, g, b] = hexToRgb(hex).map(srgbToLinear)
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+function contrast(hex1, hex2) {
+  const L1 = relLum(hex1), L2 = relLum(hex2)
+  return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05)
+}
+
+// ===========================================================================
+// Output
+// ===========================================================================
+
+console.log('/* ===========================================')
+console.log('   Generated Dracula/Alucard Palette')
+console.log('   11 families x 11 shades = 121 CSS vars')
+console.log('   Generated: ' + new Date().toISOString().split('T')[0])
+console.log('   =========================================== */')
+console.log('')
+console.log(':root {')
+console.log('  /* --- Black & White --- */')
+console.log('  --color-black: #000000;')
+console.log('  --color-white: #ffffff;')
+
+for (const [family, shades] of Object.entries(families)) {
+  const isNeutral = ['drac-bg', 'drac-fg', 'alu-bg'].includes(family)
+  const label = isNeutral ? '(neutral)' : '(chromatic)'
+  console.log('')
+  console.log(`  /* --- ${family} ${label} --- */`)
+  for (const shade of SHADE_LEVELS) {
+    const hex = shades[shade]
+    console.log(`  --color-${family}-${shade}: ${hex};`)
+  }
+}
+
+console.log('}')
+
+// ===========================================================================
+// Verification: contrast of key semantic pairs
+// ===========================================================================
+
+console.log('')
+console.log('/* === Contrast Verification ===')
+
+// Dark theme: text (drac-fg-50) on bg (drac-bg-900)
+const darkText = families['drac-fg'][50]
+const darkBg = families['drac-bg'][900]
+console.log(`   Dark text/bg: ${darkText} on ${darkBg} = ${contrast(darkText, darkBg).toFixed(2)}:1`)
+
+// Light theme: text (drac-fg-900) on bg (alu-bg-50)
+const lightText = families['drac-fg'][900]
+const lightBg = families['alu-bg'][50]
+console.log(`   Light text/bg: ${lightText} on ${lightBg} = ${contrast(lightText, lightBg).toFixed(2)}:1`)
+
+// Dark primary: drac-cyan-400 on drac-bg-900
+const darkPrimary = families['drac-cyan'][400]
+console.log(`   Dark primary/bg: ${darkPrimary} on ${darkBg} = ${contrast(darkPrimary, darkBg).toFixed(2)}:1`)
+
+// Light primary: drac-purple-700 on alu-bg-50
+const lightPrimary = families['drac-purple'][700]
+console.log(`   Light primary/bg: ${lightPrimary} on ${lightBg} = ${contrast(lightPrimary, lightBg).toFixed(2)}:1`)
+
+// Dark danger: drac-red-300 on drac-bg-900
+const darkDanger = families['drac-red'][300]
+console.log(`   Dark danger/bg: ${darkDanger} on ${darkBg} = ${contrast(darkDanger, darkBg).toFixed(2)}:1`)
+
+// Dark accent: drac-purple-300 on drac-bg-900
+const darkAccent = families['drac-purple'][300]
+console.log(`   Dark accent/bg: ${darkAccent} on ${darkBg} = ${contrast(darkAccent, darkBg).toFixed(2)}:1`)
+
+// Dark secondary text: drac-comment-200 on drac-bg-900
+const darkSecText = families['drac-comment'][200]
+console.log(`   Dark secondary/bg: ${darkSecText} on ${darkBg} = ${contrast(darkSecText, darkBg).toFixed(2)}:1`)
+
+// Shiki dark: drac-cyan-400 on drac-bg-800
+const shikiBgDark = families['drac-bg'][800]
+console.log(`   Shiki dark cyan/bg: ${darkPrimary} on ${shikiBgDark} = ${contrast(darkPrimary, shikiBgDark).toFixed(2)}:1`)
+
+// Shiki light: drac-purple-700 on alu-bg-200
+const shikiBgLight = families['alu-bg'][200]
+console.log(`   Shiki light purple/bg: ${lightPrimary} on ${shikiBgLight} = ${contrast(lightPrimary, shikiBgLight).toFixed(2)}:1`)
+
+console.log('   === */')