@troshab/slidev-theme-troshab 0.1.0

package/scripts/integrity-audit.mjs

@@ -0,0 +1,357 @@
+#!/usr/bin/env node
+
+/**
+ * Color Integrity Audit for slidev-theme-troshab
+ *
+ * Ensures the 3-layer color architecture stays clean:
+ *   Layer 1 (Palette): hex ONLY in styles/colors.css
+ *   Layer 2 (Semantic): only var() refs in :root/.dark blocks
+ *   Layer 3 (Usage): components/layouts/slides use only semantic vars
+ *
+ * Run: node scripts/integrity-audit.mjs
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs'
+import { resolve, dirname, extname, relative } from 'path'
+import { fileURLToPath } from 'url'
+import { parsePalette, parseSemanticTokens } from './shared/css-utils.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const root = resolve(__dirname, '..')
+
+// ---------------------------------------------------------------------------
+// File collection
+// ---------------------------------------------------------------------------
+
+function collectFiles(dir, extensions) {
+  const results = []
+  let entries
+  try { entries = readdirSync(dir) } catch { return results }
+  for (const entry of entries) {
+    const full = resolve(dir, entry)
+    let stat
+    try { stat = statSync(full) } catch { continue }
+    if (stat.isDirectory()) {
+      if (entry === 'node_modules' || entry === '.git' || entry === 'dist' || entry === 'slides-export') continue
+      results.push(...collectFiles(full, extensions))
+    } else if (extensions.includes(extname(entry))) {
+      results.push(full)
+    }
+  }
+  return results
+}
+
+// ---------------------------------------------------------------------------
+// Known CSS variable definitions
+// ---------------------------------------------------------------------------
+
+const colorsPath = resolve(root, 'styles', 'colors.css')
+const palette = parsePalette(colorsPath)
+const { light, dark } = parseSemanticTokens(colorsPath)
+
+// Build set of all defined --color-* var names (without prefix)
+const definedVars = new Set([
+  ...Object.keys(palette),
+  ...Object.keys(light),
+  ...Object.keys(dark),
+])
+
+// Also parse raw CSS for any additional vars (gradients, charts, shiki)
+const colorsCss = readFileSync(colorsPath, 'utf8')
+const allCssVarDefs = new Set()
+for (const m of colorsCss.matchAll(/--([\w-]+)\s*:/g)) {
+  allCssVarDefs.add(m[1])
+}
+
+// Vars from base.css
+const baseCss = readFileSync(resolve(root, 'styles', 'base.css'), 'utf8')
+for (const m of baseCss.matchAll(/--([\w-]+)\s*:/g)) {
+  allCssVarDefs.add(m[1])
+}
+
+// Vars from motion.css
+const motionCss = readFileSync(resolve(root, 'styles', 'motion.css'), 'utf8')
+for (const m of motionCss.matchAll(/--([\w-]+)\s*:/g)) {
+  allCssVarDefs.add(m[1])
+}
+
+// ---------------------------------------------------------------------------
+// Checks
+// ---------------------------------------------------------------------------
+
+let issues = []
+let warns = []
+
+// Hex pattern: #xxx, #xxxxxx, #xxxxxxxx (but not inside CSS var definitions)
+const HEX_RE = /#(?:[0-9a-fA-F]{3}){1,2}(?:[0-9a-fA-F]{2})?\b/g
+
+// Allowed hex locations
+const ALLOWED_HEX_FILES = new Set([
+  resolve(root, 'styles', 'colors.css'),
+])
+
+// Files where hex in comments is OK (documentation)
+function isComment(line) {
+  const trimmed = line.trim()
+  return trimmed.startsWith('//') || trimmed.startsWith('/*') || trimmed.startsWith('*') || trimmed.startsWith('<!--')
+}
+
+// ===== MAIN =====
+
+console.log('Color Integrity Audit - slidev-theme-troshab')
+console.log('='.repeat(76))
+
+// --- Section 1: Hex leakage ---
+
+console.log('\n1. HEX LEAKAGE (no raw hex outside colors.css)')
+console.log('-'.repeat(76))
+
+const scanFiles = [
+  ...collectFiles(resolve(root, 'components'), ['.vue']),
+  ...collectFiles(resolve(root, 'layouts'), ['.vue']),
+  ...collectFiles(resolve(root, 'composables'), ['.ts']),
+  ...collectFiles(resolve(root, 'setup'), ['.ts']),
+  ...collectFiles(resolve(root, 'example_slides'), ['.md']),
+  ...collectFiles(resolve(root, 'styles'), ['.css']),
+]
+
+let hexLeaks = 0
+for (const file of scanFiles) {
+  if (ALLOWED_HEX_FILES.has(file)) continue
+  const content = readFileSync(file, 'utf8')
+  const lines = content.split('\n')
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (isComment(line)) continue
+    // Skip hex inside SVG path data (d="M...")
+    if (/\bd="[^"]*"/.test(line)) continue
+
+    const matches = line.matchAll(HEX_RE)
+    for (const m of matches) {
+      // Skip hex inside HTML entities like &#x27;
+      const before = line.slice(Math.max(0, m.index - 2), m.index)
+      if (before.endsWith('&#') || before.endsWith('&')) continue
+      // Skip hex inside URL encoded strings
+      if (before.endsWith('%')) continue
+
+      const rel = relative(root, file)
+      console.log(`  ! ${rel}:${i + 1}  ${m[0]}  "${line.trim().slice(0, 60)}"`)
+      issues.push(`Hex ${m[0]} in ${rel}:${i + 1}`)
+      hexLeaks++
+    }
+  }
+}
+
+if (hexLeaks === 0) {
+  console.log(`  Scanned ${scanFiles.length - ALLOWED_HEX_FILES.size} files: no hex leaks found.    OK`)
+}
+
+// --- Section 2: Undefined CSS variable references ---
+
+console.log('\n\n2. UNDEFINED CSS VARIABLE REFERENCES')
+console.log('-'.repeat(76))
+
+const varRefFiles = [
+  ...collectFiles(resolve(root, 'components'), ['.vue']),
+  ...collectFiles(resolve(root, 'layouts'), ['.vue']),
+  ...collectFiles(resolve(root, 'styles'), ['.css']),
+]
+
+let undefinedRefs = 0
+const VAR_REF_RE = /var\(--([\w-]+)\)/g
+
+// Known external vars (from Slidev/UnoCSS/browser, not ours to define)
+const EXTERNAL_VARS = new Set([
+  'slidev-slide-scale',
+  'un-default',
+  'at-apply',
+])
+
+for (const file of varRefFiles) {
+  const content = readFileSync(file, 'utf8')
+  const lines = content.split('\n')
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (isComment(line)) continue
+
+    const matches = line.matchAll(VAR_REF_RE)
+    for (const m of matches) {
+      const varName = m[1]
+      if (allCssVarDefs.has(varName)) continue
+      if (EXTERNAL_VARS.has(varName)) continue
+      // Component-local vars (defined in <style> or set via :style binding)
+      if (content.includes(`--${varName}:`)) continue
+      if (content.includes(`'--${varName}'`)) continue
+
+      const rel = relative(root, file)
+      console.log(`  ~ ${rel}:${i + 1}  var(--${varName})  (not in global CSS)`)
+      warns.push(`Undefined var(--${varName}) in ${rel}:${i + 1}`)
+      undefinedRefs++
+    }
+  }
+}
+
+if (undefinedRefs === 0) {
+  console.log(`  Scanned ${varRefFiles.length} files: all var() references resolve.    OK`)
+}
+
+// --- Section 3: Inline styles with hardcoded colors in slides ---
+
+console.log('\n\n3. HARDCODED COLORS IN SLIDES')
+console.log('-'.repeat(76))
+
+const slideFiles = collectFiles(resolve(root, 'example_slides'), ['.md'])
+const INLINE_COLOR_RE = /style\s*=\s*"[^"]*(?:color|background|border-color)\s*:\s*(?!var\()[^"]*"/gi
+
+let slideColorLeaks = 0
+for (const file of slideFiles) {
+  const content = readFileSync(file, 'utf8')
+  const lines = content.split('\n')
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const matches = line.matchAll(INLINE_COLOR_RE)
+    for (const m of matches) {
+      // Allow style="...color: var(--..." patterns
+      if (/color\s*:\s*var\(--/.test(m[0])) continue
+      // Allow non-color styles like width/height that happen to match
+      if (!/(?:color|background|border-color)\s*:\s*[^v]/.test(m[0])) continue
+
+      const rel = relative(root, file)
+      console.log(`  ! ${rel}:${i + 1}  "${m[0].slice(0, 60)}"`)
+      issues.push(`Inline color in ${rel}:${i + 1}`)
+      slideColorLeaks++
+    }
+  }
+}
+
+if (slideColorLeaks === 0) {
+  console.log(`  Scanned ${slideFiles.length} slide files: no hardcoded colors.    OK`)
+}
+
+// --- Section 4: color-mix() with raw hex (should use vars) ---
+
+console.log('\n\n4. color-mix() WITH RAW HEX (should use CSS vars)')
+console.log('-'.repeat(76))
+
+const COLOR_MIX_HEX_RE = /color-mix\([^)]*#[0-9a-fA-F]/g
+
+let colorMixHexCount = 0
+for (const file of [...scanFiles]) {
+  if (ALLOWED_HEX_FILES.has(file)) continue
+  const content = readFileSync(file, 'utf8')
+  const lines = content.split('\n')
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (isComment(line)) continue
+    const matches = line.matchAll(COLOR_MIX_HEX_RE)
+    for (const m of matches) {
+      const rel = relative(root, file)
+      console.log(`  ! ${rel}:${i + 1}  "${m[0].slice(0, 60)}"`)
+      issues.push(`color-mix() with hex in ${rel}:${i + 1}`)
+      colorMixHexCount++
+    }
+  }
+}
+
+if (colorMixHexCount === 0) {
+  console.log(`  All color-mix() calls use CSS variables.    OK`)
+}
+
+// --- Section 5: Foreground pair completeness ---
+
+console.log('\n\n5. FOREGROUND PAIR COMPLETENESS')
+console.log('   Every --color-{name} semantic bg needs --color-{name}-foreground')
+console.log('-'.repeat(76))
+
+const semanticBgs = ['primary', 'success', 'warning', 'danger', 'info', 'secondary', 'accent']
+let missingFg = 0
+
+for (const name of semanticBgs) {
+  const hasFg = definedVars.has(name + '-foreground')
+  if (hasFg) {
+    console.log(`    --color-${name}-foreground`.padEnd(42) + 'defined'.padEnd(12) + 'OK')
+  } else {
+    console.log(`  ! --color-${name}-foreground`.padEnd(42) + 'MISSING'.padEnd(12) + 'FAIL')
+    issues.push(`Missing --color-${name}-foreground pair`)
+    missingFg++
+  }
+}
+
+// Also check tint pairs
+const tintNames = ['primary-tint', 'success-tint', 'warning-tint', 'danger-tint', 'info-tint']
+for (const name of tintNames) {
+  const hasTint = definedVars.has(name)
+  if (hasTint) {
+    console.log(`    --color-${name}`.padEnd(42) + 'defined'.padEnd(12) + 'OK')
+  } else {
+    console.log(`  ! --color-${name}`.padEnd(42) + 'MISSING'.padEnd(12) + 'FAIL')
+    issues.push(`Missing --color-${name}`)
+    missingFg++
+  }
+}
+
+// --- Section 6: Duplicate color maps ---
+
+console.log('\n\n6. COMPONENT COLOR MAP CONSISTENCY')
+console.log('   Check that local colorVarMap in components cover all semantic colors')
+console.log('-'.repeat(76))
+
+const componentFiles = collectFiles(resolve(root, 'components'), ['.vue'])
+const COLORMAP_RE = /const\s+(\w*[Cc]olor\w*)\s*(?::\s*[^=]+)?\s*=\s*\{([^}]+)\}/gs
+
+let mapIssues = 0
+for (const file of componentFiles) {
+  const content = readFileSync(file, 'utf8')
+  const maps = content.matchAll(COLORMAP_RE)
+  for (const m of maps) {
+    const mapName = m[1]
+    const body = m[2]
+    // Extract keys from the map
+    const keys = [...body.matchAll(/(\w+)\s*:/g)].map(k => k[1])
+    // Check if it covers the basic semantic set
+    const missing = semanticBgs.filter(s => !keys.includes(s))
+    const rel = relative(root, file)
+    if (missing.length > 0 && keys.length >= 3) {
+      // Only warn if the map has at least 3 entries (skip small purpose-specific maps)
+      console.log(`  ~ ${rel}: ${mapName} missing: ${missing.join(', ')}`)
+      warns.push(`${rel}: ${mapName} missing semantic colors: ${missing.join(', ')}`)
+      mapIssues++
+    }
+  }
+}
+
+if (mapIssues === 0) {
+  console.log(`  All component color maps cover semantic colors.    OK`)
+}
+
+// --- Summary ---
+
+console.log('\n' + '='.repeat(76))
+console.log('SUMMARY')
+console.log('='.repeat(76))
+
+const stats = [
+  `Files scanned: ${scanFiles.length}`,
+  `Hex leaks: ${hexLeaks}`,
+  `Undefined vars: ${undefinedRefs}`,
+  `Slide color leaks: ${slideColorLeaks}`,
+  `color-mix hex: ${colorMixHexCount}`,
+  `Missing foreground pairs: ${missingFg}`,
+]
+console.log(`\n  ${stats.join(' | ')}`)
+
+if (issues.length === 0 && warns.length === 0) {
+  console.log('\n  All integrity checks passed!')
+} else {
+  if (issues.length > 0) {
+    console.log(`\n  ${issues.length} FAIL(s):`)
+    issues.forEach((issue, i) => console.log(`    ${i + 1}. ${issue}`))
+  }
+  if (warns.length > 0) {
+    console.log(`\n  ${warns.length} WARN(s):`)
+    warns.forEach((w, i) => console.log(`    ${i + 1}. ${w}`))
+  }
+}
+
+console.log()
+process.exit(issues.length > 0 ? 1 : 0)

package/scripts/shared/css-utils.mjs

@@ -0,0 +1,216 @@
+/**
+ * Shared CSS utilities for accessibility audit scripts.
+ *
+ * Color math (WCAG 2.x + APCA), CSS parsing, formatting.
+ */
+
+import { readFileSync } from 'fs'
+
+// ---------------------------------------------------------------------------
+// sRGB → linear channel
+// ---------------------------------------------------------------------------
+
+export function hexToLinear(hex) {
+  hex = hex.replace('#', '')
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  const r = parseInt(hex.slice(0, 2), 16) / 255
+  const g = parseInt(hex.slice(2, 4), 16) / 255
+  const b = parseInt(hex.slice(4, 6), 16) / 255
+  return [r, g, b].map(c =>
+    c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  )
+}
+
+// ---------------------------------------------------------------------------
+// WCAG 2.x relative luminance
+// ---------------------------------------------------------------------------
+
+export function relativeLuminance(hex) {
+  const [r, g, b] = hexToLinear(hex)
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+// ---------------------------------------------------------------------------
+// WCAG 2.x contrast ratio
+// ---------------------------------------------------------------------------
+
+export function contrastRatio(hex1, hex2) {
+  const L1 = relativeLuminance(hex1)
+  const L2 = relativeLuminance(hex2)
+  const lighter = Math.max(L1, L2)
+  const darker = Math.min(L1, L2)
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+// ---------------------------------------------------------------------------
+// APCA (Accessible Perceptual Contrast Algorithm) — Lc value
+//
+// Public domain formula from Myndex/SAPC-APCA.
+// Returns signed Lc: positive = dark-on-light, negative = light-on-dark.
+// Magnitude is what matters for thresholds (use Math.abs).
+// ---------------------------------------------------------------------------
+
+export function apcaContrast(fgHex, bgHex) {
+  // sRGB → Y (linearised luminance) with APCA coefficients
+  function sRGBtoY(hex) {
+    const [rL, gL, bL] = hexToLinear(hex)
+    // APCA uses slightly different coefficients than WCAG 2.x
+    let Y = 0.2126729 * rL + 0.7151522 * gL + 0.0721750 * bL
+    // Soft-clamp black
+    if (Y < 0.022) Y += Math.pow(0.022 - Y, 1.414)
+    return Y
+  }
+
+  const Ytxt = sRGBtoY(fgHex)
+  const Ybg = sRGBtoY(bgHex)
+
+  let Sapc
+  // Normal polarity: dark text on light bg
+  if (Ybg > Ytxt) {
+    Sapc = (Math.pow(Ybg, 0.56) - Math.pow(Ytxt, 0.57)) * 1.14
+  } else {
+    // Reverse polarity: light text on dark bg
+    Sapc = (Math.pow(Ybg, 0.65) - Math.pow(Ytxt, 0.62)) * 1.14
+  }
+
+  // Clamp low contrast
+  if (Math.abs(Sapc) < 0.1) return 0
+
+  // Apply offset
+  if (Sapc > 0) {
+    Sapc -= 0.027
+  } else {
+    Sapc += 0.027
+  }
+
+  return Sapc * 100
+}
+
+// ---------------------------------------------------------------------------
+// CSS parsing
+// ---------------------------------------------------------------------------
+
+/** Find the index of the closing brace that matches the opening `{` after startOfBlock. */
+export function findMatchingBrace(str, startOfBlock) {
+  const braceStart = str.indexOf('{', startOfBlock)
+  if (braceStart < 0) return -1
+  let depth = 0
+  for (let i = braceStart; i < str.length; i++) {
+    if (str[i] === '{') depth++
+    if (str[i] === '}') { depth--; if (depth === 0) return i }
+  }
+  return -1
+}
+
+/** Extract hex palette `--color-{name}: #{hex};` from colors.css. */
+export function parsePalette(cssPath) {
+  const css = readFileSync(cssPath, 'utf8')
+  const palette = {}
+  const re = /--color-([\w-]+):\s*#([0-9a-fA-F]{3,8})\s*;/g
+  let m
+  while ((m = re.exec(css)) !== null) {
+    palette[m[1]] = '#' + m[2]
+  }
+  return palette
+}
+
+/** Extract light/dark semantic `var()` maps from colors.css. */
+export function parseSemanticTokens(cssPath) {
+  const css = readFileSync(cssPath, 'utf8')
+
+  const darkStart = css.indexOf('.dark {')
+  const darkEnd = darkStart >= 0 ? findMatchingBrace(css, darkStart) : -1
+
+  function extractVarRefs(text) {
+    const tokens = {}
+    const re = /--color-([\w-]+):\s*var\(--color-([\w-]+)\)\s*;/g
+    let m
+    while ((m = re.exec(text)) !== null) {
+      tokens[m[1]] = m[2]
+    }
+    return tokens
+  }
+
+  const darkBlock = darkStart >= 0 && darkEnd >= 0
+    ? css.slice(darkStart, darkEnd + 1)
+    : ''
+
+  const lightBlock = darkStart >= 0
+    ? css.slice(0, darkStart) + css.slice(darkEnd + 1)
+    : css
+
+  const light = extractVarRefs(lightBlock)
+  const dark = { ...light, ...extractVarRefs(darkBlock) }
+
+  return { light, dark }
+}
+
+/** Parse chart-N vars: `--chart-N: var(--color-XXX);` from colors.css. */
+export function parseChartTokens(cssPath) {
+  const css = readFileSync(cssPath, 'utf8')
+
+  const darkStart = css.indexOf('.dark {')
+  const darkEnd = darkStart >= 0 ? findMatchingBrace(css, darkStart) : -1
+
+  function extractCharts(text) {
+    const tokens = {}
+    const re = /--chart-(\d+):\s*var\(--color-([\w-]+)\)\s*;/g
+    let m
+    while ((m = re.exec(text)) !== null) {
+      tokens[parseInt(m[1])] = m[2]
+    }
+    return tokens
+  }
+
+  const darkBlock = darkStart >= 0 && darkEnd >= 0
+    ? css.slice(darkStart, darkEnd + 1)
+    : ''
+  const lightBlock = darkStart >= 0
+    ? css.slice(0, darkStart) + css.slice(darkEnd + 1)
+    : css
+
+  const lightCharts = extractCharts(lightBlock)
+  const darkCharts = { ...lightCharts, ...extractCharts(darkBlock) }
+
+  return { light: lightCharts, dark: darkCharts }
+}
+
+/** Resolve a semantic var name to hex via palette. */
+export function resolveHex(palette, semanticMap, varName) {
+  const paletteRef = semanticMap[varName]
+  if (!paletteRef) return null
+  return palette[paletteRef] || null
+}
+
+/** Extract a single CSS custom property value (raw string) from CSS text. */
+export function parseCssVar(css, varName) {
+  const re = new RegExp(`${varName}:\\s*([^;]+)\\s*;`)
+  const m = css.match(re)
+  return m ? m[1].trim() : null
+}
+
+/** Find all matches of a regex pattern in CSS text. Returns array of match objects. */
+export function scanCssPattern(css, pattern) {
+  const re = pattern instanceof RegExp ? pattern : new RegExp(pattern, 'g')
+  const matches = []
+  let m
+  while ((m = re.exec(css)) !== null) {
+    matches.push(m)
+  }
+  return matches
+}
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+/** Format WCAG 2.x ratio as "N.NN:1". */
+export function fmt(ratio) {
+  return ratio.toFixed(2) + ':1'
+}
+
+/** Format APCA Lc as "Lc NN". */
+export function fmtLc(lc) {
+  const abs = Math.abs(lc)
+  return 'Lc ' + (abs < 10 ? ' ' : '') + abs.toFixed(0)
+}