@soulbatical/tetra-dev-toolkit 1.20.18 → 1.20.19

package/bin/tetra-dark-mode-fix.js

@@ -0,0 +1,355 @@
+#!/usr/bin/env node
+
+/**
+ * Tetra Dark Mode Autofix
+ *
+ * Mechanically replaces hardcoded Tailwind colors with Tetra design tokens.
+ * Run on a clean git branch so you can easily revert.
+ *
+ * Usage:
+ *   node tetra-dark-mode-fix.js                  # Dry run (shows what would change)
+ *   node tetra-dark-mode-fix.js --apply           # Apply changes
+ *   node tetra-dark-mode-fix.js --apply --verbose  # Apply + show each replacement
+ *
+ * Strategy:
+ *   1. PAIRED replacements first (bg-white dark:bg-gray-900 → bg-background)
+ *   2. NEUTRAL unpaired (bg-white → bg-background, text-gray-500 → text-muted-foreground)
+ *   3. SEMANTIC unpaired (bg-green-50 → bg-success-subtle, text-red-600 → text-danger-foreground)
+ *   4. HOVER/FOCUS modifiers (hover:bg-gray-100 → hover:bg-accent)
+ *   5. Remove orphaned dark: classes that no longer have a light counterpart
+ */
+
+import { readFileSync, writeFileSync } from 'fs'
+import { join } from 'path'
+import { glob } from 'glob'
+
+const args = process.argv.slice(2)
+const APPLY = args.includes('--apply')
+const VERBOSE = args.includes('--verbose')
+const projectRoot = process.cwd()
+
+// ============================================================================
+// REPLACEMENT RULES — ordered from most specific to least specific
+// ============================================================================
+
+/**
+ * PAIRED rules: match "light-class dark:dark-class" and replace both with a single token.
+ * These run FIRST to avoid partial matches.
+ */
+const PAIRED_RULES = [
+  // ── Backgrounds ──
+  [/\bbg-white\s+dark:bg-(?:gray|slate|zinc|neutral)-(?:900|950)\b/g, 'bg-background'],
+  [/\bdark:bg-(?:gray|slate|zinc|neutral)-(?:900|950)\s+bg-white\b/g, 'bg-background'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-50\s+dark:bg-(?:gray|slate|zinc|neutral)-(?:900|950)\b/g, 'bg-background'],
+  [/\bdark:bg-(?:gray|slate|zinc|neutral)-(?:900|950)\s+bg-(?:gray|slate|zinc|neutral)-50\b/g, 'bg-background'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-100\s+dark:bg-(?:gray|slate|zinc|neutral)-(?:800|900)\b/g, 'bg-secondary'],
+  [/\bdark:bg-(?:gray|slate|zinc|neutral)-(?:800|900)\s+bg-(?:gray|slate|zinc|neutral)-100\b/g, 'bg-secondary'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-200\s+dark:bg-(?:gray|slate|zinc|neutral)-(?:700|800)\b/g, 'bg-muted'],
+  [/\bdark:bg-(?:gray|slate|zinc|neutral)-(?:700|800)\s+bg-(?:gray|slate|zinc|neutral)-200\b/g, 'bg-muted'],
+  // ── Text ──
+  [/\btext-(?:gray|slate|zinc|neutral)-900\s+dark:text-(?:gray|slate|zinc|neutral)-(?:50|100)\b/g, 'text-foreground'],
+  [/\bdark:text-(?:gray|slate|zinc|neutral)-(?:50|100)\s+text-(?:gray|slate|zinc|neutral)-900\b/g, 'text-foreground'],
+  [/\btext-(?:gray|slate|zinc|neutral)-(?:700|800)\s+dark:text-(?:gray|slate|zinc|neutral)-(?:200|300)\b/g, 'text-foreground'],
+  [/\bdark:text-(?:gray|slate|zinc|neutral)-(?:200|300)\s+text-(?:gray|slate|zinc|neutral)-(?:700|800)\b/g, 'text-foreground'],
+  [/\btext-(?:gray|slate|zinc|neutral)-(?:500|600)\s+dark:text-(?:gray|slate|zinc|neutral)-(?:300|400)\b/g, 'text-muted-foreground'],
+  [/\bdark:text-(?:gray|slate|zinc|neutral)-(?:300|400)\s+text-(?:gray|slate|zinc|neutral)-(?:500|600)\b/g, 'text-muted-foreground'],
+  // ── Borders ──
+  [/\bborder-(?:gray|slate|zinc|neutral)-(?:200|300)\s+dark:border-(?:gray|slate|zinc|neutral)-(?:600|700|800)\b/g, 'border-border'],
+  [/\bdark:border-(?:gray|slate|zinc|neutral)-(?:600|700|800)\s+border-(?:gray|slate|zinc|neutral)-(?:200|300)\b/g, 'border-border'],
+  // ── Divide ──
+  [/\bdivide-(?:gray|slate|zinc|neutral)-(?:200|300)\s+dark:divide-(?:gray|slate|zinc|neutral)-(?:600|700|800)\b/g, 'divide-border'],
+  // ── Ring ──
+  [/\bring-(?:gray|slate|zinc|neutral)-(?:200|300)\s+dark:ring-(?:gray|slate|zinc|neutral)-(?:600|700|800)\b/g, 'ring-ring'],
+  // ── Hover backgrounds ──
+  [/\bhover:bg-(?:gray|slate|zinc|neutral)-(?:50|100)\s+dark:hover:bg-(?:gray|slate|zinc|neutral)-(?:800|900)\b/g, 'hover:bg-accent'],
+  [/\bdark:hover:bg-(?:gray|slate|zinc|neutral)-(?:800|900)\s+hover:bg-(?:gray|slate|zinc|neutral)-(?:50|100)\b/g, 'hover:bg-accent'],
+  // ── Hover text ──
+  [/\bhover:text-(?:gray|slate|zinc|neutral)-900\s+dark:hover:text-(?:gray|slate|zinc|neutral)-(?:50|100)\b/g, 'hover:text-foreground'],
+  // ── Hover borders ──
+  [/\bhover:border-(?:gray|slate|zinc|neutral)-(?:300|400)\s+dark:hover:border-(?:gray|slate|zinc|neutral)-(?:500|600)\b/g, 'hover:border-border'],
+]
+
+/**
+ * UNPAIRED neutral rules: single class → token.
+ * Run AFTER paired rules so we don't break paired sets.
+ */
+const UNPAIRED_NEUTRAL_RULES = [
+  // Backgrounds (including opacity suffixes like bg-black/50)
+  [/\bbg-white\b/g, 'bg-background'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-50\b/g, 'bg-background'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-100\b/g, 'bg-secondary'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-200\b/g, 'bg-muted'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-(?:300|400|500|600|700)\b/g, 'bg-muted'],
+  [/\bbg-(?:gray|slate|zinc|neutral)-(?:800|900|950)\b/g, 'bg-foreground'],
+  [/\bbg-black(?:\/\d+)?\b/g, 'bg-foreground/50'],
+  // Text (including white on dark surfaces)
+  [/\btext-(?:gray|slate|zinc|neutral)-(?:900|950)\b/g, 'text-foreground'],
+  [/\btext-(?:gray|slate|zinc|neutral)-(?:700|800)\b/g, 'text-foreground'],
+  [/\btext-(?:gray|slate|zinc|neutral)-(?:500|600)\b/g, 'text-muted-foreground'],
+  [/\btext-(?:gray|slate|zinc|neutral)-(?:100|200|300|400)\b/g, 'text-muted-foreground'],
+  [/\btext-black\b/g, 'text-foreground'],
+  [/\btext-white\b/g, 'text-primary-foreground'],
+  // Borders
+  [/\bborder-(?:gray|slate|zinc|neutral)-\d+\b/g, 'border-border'],
+  // Divide (all shades)
+  [/\bdivide-(?:gray|slate|zinc|neutral)-\d+\b/g, 'divide-border'],
+  // Ring
+  [/\bring-(?:gray|slate|zinc|neutral)-\d+\b/g, 'ring-ring'],
+  // Placeholder
+  [/\bplaceholder-(?:gray|slate|zinc|neutral)-\d+\b/g, 'placeholder:text-muted-foreground'],
+  // Fill / Stroke
+  [/\bfill-(?:gray|slate|zinc|neutral)-\d+\b/g, 'fill-muted-foreground'],
+  [/\bstroke-(?:gray|slate|zinc|neutral)-\d+\b/g, 'stroke-border'],
+  // Hover
+  [/\bhover:bg-(?:gray|slate|zinc|neutral)-(?:50|100)\b/g, 'hover:bg-accent'],
+  [/\bhover:bg-(?:gray|slate|zinc|neutral)-(?:200|300)\b/g, 'hover:bg-accent'],
+  [/\bhover:text-(?:gray|slate|zinc|neutral)-(?:700|800|900)\b/g, 'hover:text-foreground'],
+  [/\bhover:text-(?:gray|slate|zinc|neutral)-(?:500|600)\b/g, 'hover:text-muted-foreground'],
+  [/\bhover:border-(?:gray|slate|zinc|neutral)-(?:300|400|500)\b/g, 'hover:border-border'],
+  // Focus
+  [/\bfocus:ring-(?:gray|slate|zinc|neutral)-(?:300|400|500)\b/g, 'focus:ring-ring'],
+  [/\bfocus:border-(?:gray|slate|zinc|neutral)-(?:300|400|500)\b/g, 'focus:border-ring'],
+]
+
+/**
+ * SEMANTIC color rules: map colored classes to semantic tokens.
+ */
+const SEMANTIC_RULES = [
+  // ── Success (green/emerald) ──
+  [/\bbg-(?:green|emerald)-(?:50|100)\b/g, 'bg-success-subtle'],
+  [/\bbg-(?:green|emerald)-(?:500|600)\b/g, 'bg-success'],
+  [/\btext-(?:green|emerald)-(?:400|500|600|700|800|900)\b/g, 'text-success-foreground'],
+  [/\bborder-(?:green|emerald)-(?:200|300|400)\b/g, 'border-success'],
+  // ── Danger (red/rose) ──
+  [/\bbg-(?:red|rose)-(?:50|100)\b/g, 'bg-danger-subtle'],
+  [/\bbg-(?:red|rose)-(?:500|600)\b/g, 'bg-destructive'],
+  [/\btext-(?:red|rose)-(?:400|500|600|700|800|900)\b/g, 'text-danger-foreground'],
+  [/\bborder-(?:red|rose)-(?:200|300|400)\b/g, 'border-destructive'],
+  // ── Warning (amber/yellow/orange) ──
+  [/\bbg-(?:amber|yellow|orange)-(?:50|100)\b/g, 'bg-warning-subtle'],
+  [/\bbg-(?:amber|yellow|orange)-(?:500|600)\b/g, 'bg-warning'],
+  [/\btext-(?:amber|yellow|orange)-(?:400|500|600|700|800|900)\b/g, 'text-warning-foreground'],
+  [/\bborder-(?:amber|yellow|orange)-(?:200|300|400)\b/g, 'border-warning'],
+  // ── Info (blue/sky/cyan) ──
+  [/\bbg-(?:blue|sky|cyan)-(?:50|100)\b/g, 'bg-info-subtle'],
+  [/\bbg-(?:blue|sky|cyan)-(?:500|600)\b/g, 'bg-info'],
+  [/\btext-(?:blue|sky|cyan)-(?:400|500|600|700|800|900)\b/g, 'text-info-foreground'],
+  [/\bborder-(?:blue|sky|cyan)-(?:200|300|400)\b/g, 'border-info'],
+]
+
+/**
+ * BRAND color rules: map indigo/violet/purple to brand tokens.
+ * Projects override --tetra-brand-* in their globals.css.
+ */
+const BRAND_RULES = [
+  // ── Primary brand (indigo/violet → brand) ──
+  [/\bbg-(?:indigo|violet)-(?:50|100)\b/g, 'bg-brand-subtle'],
+  [/\bbg-(?:indigo|violet)-(?:500|600)\b/g, 'bg-brand'],
+  [/\bbg-(?:indigo|violet)-(?:700|800)\b/g, 'bg-brand-hover'],
+  [/\bbg-(?:indigo|violet)-(?:900|950)(?:\/\d+)?\b/g, 'bg-brand/10'],
+  [/\btext-(?:indigo|violet)-(?:400|500)\b/g, 'text-brand-text'],
+  [/\btext-(?:indigo|violet)-(?:600|700)\b/g, 'text-brand-text'],
+  [/\btext-(?:indigo|violet)-(?:800|900)\b/g, 'text-brand-text'],
+  [/\bborder-(?:indigo|violet)-(?:200|300)\b/g, 'border-brand/30'],
+  [/\bborder-(?:indigo|violet)-(?:400|500)\b/g, 'border-brand'],
+  [/\bborder-(?:indigo|violet)-(?:600)\b/g, 'border-brand'],
+  [/\bring-(?:indigo|violet)-(?:100|200)\b/g, 'ring-brand/20'],
+  [/\bring-(?:indigo|violet)-(?:500|600)\b/g, 'ring-brand-ring'],
+  [/\bhover:bg-(?:indigo|violet)-(?:500|600|700)\b/g, 'hover:bg-brand-hover'],
+  [/\bhover:text-(?:indigo|violet)-(?:300|400)\b/g, 'hover:text-brand-text'],
+  [/\bfocus:ring-(?:indigo|violet)-(?:500|600)\b/g, 'focus:ring-brand-ring'],
+  [/\bfocus:border-(?:indigo|violet)-(?:500|600)\b/g, 'focus:border-brand'],
+  // ── Alt brand (purple/fuchsia → brand-alt) ──
+  [/\bbg-(?:purple|fuchsia)-(?:50|100)\b/g, 'bg-brand-alt-subtle'],
+  [/\bbg-(?:purple|fuchsia)-(?:500|600)\b/g, 'bg-brand-alt'],
+  [/\bbg-(?:purple|fuchsia)-(?:700|800)\b/g, 'bg-brand-alt-hover'],
+  [/\bbg-(?:purple|fuchsia)-(?:900)(?:\/\d+)?\b/g, 'bg-brand-alt/10'],
+  [/\btext-(?:purple|fuchsia)-(?:400|500)\b/g, 'text-brand-alt-text'],
+  [/\btext-(?:purple|fuchsia)-(?:600|700)\b/g, 'text-brand-alt-text'],
+  [/\btext-(?:purple|fuchsia)-(?:800|900)\b/g, 'text-brand-alt-text'],
+  [/\bborder-(?:purple|fuchsia)-(?:200|300)\b/g, 'border-brand-alt/30'],
+  [/\bborder-(?:purple|fuchsia)-(?:500)\b/g, 'border-brand-alt'],
+  [/\bring-(?:purple|fuchsia)-(?:500|600)\b/g, 'ring-brand-alt'],
+  [/\bhover:bg-(?:purple|fuchsia)-(?:500|600|700)\b/g, 'hover:bg-brand-alt-hover'],
+  [/\bfocus:ring-(?:purple|fuchsia)-(?:500|600)\b/g, 'focus:ring-brand-alt'],
+  // ── Platform A: pink (Instagram, etc.) ──
+  [/\bbg-pink-(?:50|100)\b/g, 'bg-platform-a-subtle'],
+  [/\bbg-pink-(?:400|500|600)\b/g, 'bg-platform-a'],
+  [/\bbg-pink-(?:900)(?:\/\d+)?\b/g, 'bg-platform-a/10'],
+  [/\btext-pink-(?:400|500)\b/g, 'text-platform-a-text'],
+  [/\btext-pink-(?:600|700|800)\b/g, 'text-platform-a-text'],
+  [/\bborder-pink-(?:200|300)\b/g, 'border-platform-a/30'],
+  [/\bborder-pink-(?:500)\b/g, 'border-platform-a'],
+  // ── Platform B: teal (TikTok, etc.) ──
+  [/\bbg-teal-(?:50|100)\b/g, 'bg-platform-b-subtle'],
+  [/\bbg-teal-(?:400|500|600)\b/g, 'bg-platform-b'],
+  [/\bbg-teal-(?:900)(?:\/\d+)?\b/g, 'bg-platform-b/10'],
+  [/\btext-teal-(?:400|500)\b/g, 'text-platform-b-text'],
+  [/\btext-teal-(?:600|700|800)\b/g, 'text-platform-b-text'],
+  [/\bborder-teal-(?:200|300)\b/g, 'border-platform-b/30'],
+  [/\bborder-teal-(?:500)\b/g, 'border-platform-b'],
+  // ── Platform C: orange/amber (Reddit, warnings, etc.) ──
+  [/\bbg-(?:orange|amber)-(?:50|100)\b/g, 'bg-platform-c-subtle'],
+  [/\bbg-(?:orange|amber)-(?:400|500|600)\b/g, 'bg-platform-c'],
+  [/\bbg-(?:orange|amber)-(?:700|800|900)(?:\/\d+)?\b/g, 'bg-platform-c/10'],
+  [/\bbg-(?:orange|amber)-(?:950)(?:\/\d+)?\b/g, 'bg-platform-c/10'],
+  [/\btext-(?:orange|amber)-(?:400|500|600)\b/g, 'text-platform-c-text'],
+  [/\btext-(?:orange|amber)-(?:700|800)\b/g, 'text-platform-c-text'],
+  [/\bborder-(?:orange|amber)-(?:200|300|500)\b/g, 'border-platform-c/30'],
+  [/\bborder-(?:orange|amber)-(?:800)\b/g, 'border-platform-c'],
+  [/\bring-(?:orange|amber)-(?:300|400|500)(?:\/\d+)?\b/g, 'ring-platform-c/40'],
+  [/\bhover:bg-(?:orange|amber)-(?:200|700)\b/g, 'hover:bg-platform-c-subtle'],
+  [/\bhover:border-(?:orange|amber)-(?:500)(?:\/\d+)?\b/g, 'hover:border-platform-c'],
+  // ── Platform D: purple (decorative, Twitch, etc.) ──
+  [/\bborder-purple-(?:400|600)\b/g, 'border-platform-d'],
+  [/\bbg-purple-(?:200|400)\b/g, 'bg-platform-d-subtle'],
+  [/\bhover:bg-purple-(?:200)\b/g, 'hover:bg-platform-d-subtle'],
+  [/\bhover:text-purple-(?:200|300)\b/g, 'hover:text-platform-d-text'],
+  [/\bhover:border-purple-(?:400)\b/g, 'hover:border-platform-d'],
+  // ── Remaining: emerald borders/hovers ──
+  [/\bborder-emerald-(?:500)\b/g, 'border-success'],
+  [/\bhover:border-emerald-(?:500)(?:\/\d+)?\b/g, 'hover:border-success'],
+  [/\bhover:bg-emerald-(?:900)(?:\/\d+)?\b/g, 'hover:bg-success/10'],
+]
+
+/**
+ * ORPHAN dark: cleanup — remove dark: classes whose light counterpart was already replaced.
+ * These are now redundant because tokens handle dark mode automatically.
+ */
+const ORPHAN_DARK_RULES = [
+  // Backgrounds
+  [/\s*\bdark:bg-(?:gray|slate|zinc|neutral)-(?:50|100|200|300|400|500|600|700|800|900|950)\b/g, ''],
+  [/\s*\bdark:bg-(?:gray|slate|zinc|neutral)-(?:900|950)\/\d+\b/g, ''],
+  // Text
+  [/\s*\bdark:text-(?:gray|slate|zinc|neutral)-(?:50|100|200|300|400|500|600|700|800|900|950)\b/g, ''],
+  // Borders
+  [/\s*\bdark:border-(?:gray|slate|zinc|neutral)-(?:50|100|200|300|400|500|600|700|800|900|950)\b/g, ''],
+  // Divide
+  [/\s*\bdark:divide-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  // Ring
+  [/\s*\bdark:ring-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  // Hover
+  [/\s*\bdark:hover:bg-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  [/\s*\bdark:hover:text-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  [/\s*\bdark:hover:border-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  // Focus
+  [/\s*\bdark:focus:ring-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  [/\s*\bdark:focus:border-(?:gray|slate|zinc|neutral)-\d+\b/g, ''],
+  // Semantic dark overrides
+  [/\s*\bdark:bg-(?:green|emerald|red|rose|amber|yellow|orange|blue|sky|cyan)-\d+(?:\/\d+)?\b/g, ''],
+  [/\s*\bdark:text-(?:green|emerald|red|rose|amber|yellow|orange|blue|sky|cyan)-\d+\b/g, ''],
+  [/\s*\bdark:border-(?:green|emerald|red|rose|amber|yellow|orange|blue|sky|cyan)-\d+\b/g, ''],
+  // Brand dark overrides
+  [/\s*\bdark:bg-(?:indigo|violet|purple|fuchsia)-\d+(?:\/\d+)?\b/g, ''],
+  [/\s*\bdark:text-(?:indigo|violet|purple|fuchsia)-\d+\b/g, ''],
+  [/\s*\bdark:border-(?:indigo|violet|purple|fuchsia)-\d+\b/g, ''],
+  [/\s*\bdark:ring-(?:indigo|violet|purple|fuchsia)-\d+(?:\/\d+)?\b/g, ''],
+  [/\s*\bdark:hover:bg-(?:indigo|violet|purple|fuchsia)-\d+(?:\/\d+)?\b/g, ''],
+  // Platform dark overrides
+  [/\s*\bdark:(?:bg|text|border|ring)-(?:pink|teal|orange|amber)-\d+(?:\/\d+)?\b/g, ''],
+  [/\s*\bdark:hover:(?:bg|text|border)-(?:pink|teal|orange|amber)-\d+(?:\/\d+)?\b/g, ''],
+]
+
+// ============================================================================
+// APPLY
+// ============================================================================
+
+const frontendDir = join(projectRoot, 'frontend', 'src')
+const files = [
+  ...glob.sync('**/*.tsx', { cwd: frontendDir, ignore: ['**/node_modules/**', '**/.next/**'] }),
+  ...glob.sync('**/*.jsx', { cwd: frontendDir, ignore: ['**/node_modules/**', '**/.next/**'] }),
+]
+
+let totalReplacements = 0
+let totalFiles = 0
+const stats = { paired: 0, neutral: 0, semantic: 0, brand: 0, orphanDark: 0 }
+
+for (const file of files) {
+  const fullPath = join(frontendDir, file)
+  const original = readFileSync(fullPath, 'utf-8')
+  let content = original
+
+  // Phase 1: Paired replacements
+  for (const [re, token] of PAIRED_RULES) {
+    re.lastIndex = 0
+    content = content.replace(re, (match) => {
+      stats.paired++
+      if (VERBOSE) console.log(`  [paired] ${file}: ${match} → ${token}`)
+      return token
+    })
+  }
+
+  // Phase 2: Unpaired neutrals
+  for (const [re, token] of UNPAIRED_NEUTRAL_RULES) {
+    re.lastIndex = 0
+    content = content.replace(re, (match) => {
+      stats.neutral++
+      if (VERBOSE) console.log(`  [neutral] ${file}: ${match} → ${token}`)
+      return token
+    })
+  }
+
+  // Phase 3: Semantics
+  for (const [re, token] of SEMANTIC_RULES) {
+    re.lastIndex = 0
+    content = content.replace(re, (match) => {
+      stats.semantic++
+      if (VERBOSE) console.log(`  [semantic] ${file}: ${match} → ${token}`)
+      return token
+    })
+  }
+
+  // Phase 3b: Brand colors
+  for (const [re, token] of BRAND_RULES) {
+    re.lastIndex = 0
+    content = content.replace(re, (match) => {
+      stats.brand++
+      if (VERBOSE) console.log(`  [brand] ${file}: ${match} → ${token}`)
+      return token
+    })
+  }
+
+  // Phase 4: Orphan dark: cleanup
+  for (const [re, replacement] of ORPHAN_DARK_RULES) {
+    re.lastIndex = 0
+    content = content.replace(re, (match) => {
+      stats.orphanDark++
+      if (VERBOSE) console.log(`  [orphan-dark] ${file}: removed ${match.trim()}`)
+      return replacement
+    })
+  }
+
+  // Clean up double/triple spaces left by removals
+  content = content.replace(/  +/g, ' ')
+  // Clean up space before closing quote
+  content = content.replace(/ "/g, '"').replace(/ '/g, "'")
+  // But restore intentional space-before-quote in template literals etc.
+  // Actually, be conservative — only clean within className attributes
+  // This simple approach works for most cases
+
+  if (content !== original) {
+    totalFiles++
+    const currentTotal = stats.paired + stats.neutral + stats.semantic + stats.brand + stats.orphanDark
+    const replacements = currentTotal - totalReplacements
+    totalReplacements = currentTotal
+    console.log(`${APPLY ? '✅' : '📋'} ${file} (${replacements} changes)`)
+
+    if (APPLY) {
+      writeFileSync(fullPath, content, 'utf-8')
+    }
+  }
+}
+
+console.log('')
+console.log(`${'='.repeat(60)}`)
+const total = stats.paired + stats.neutral + stats.semantic + stats.brand + stats.orphanDark
+console.log(`${APPLY ? 'APPLIED' : 'DRY RUN'} — ${totalFiles} files, ${total} total replacements`)
+console.log(`  Paired (light+dark → token):  ${stats.paired}`)
+console.log(`  Neutral (single → token):     ${stats.neutral}`)
+console.log(`  Semantic (color → token):      ${stats.semantic}`)
+console.log(`  Brand (indigo/purple → token): ${stats.brand}`)
+console.log(`  Orphan dark: removed:          ${stats.orphanDark}`)
+console.log('')
+if (!APPLY) {
+  console.log('Run with --apply to write changes. Make sure you are on a clean branch!')
+}

package/lib/checks/codeQuality/dark-mode-compliance.js

@@ -0,0 +1,512 @@
+/**
+ * Code Quality Check: Dark Mode Compliance (HARD MODE)
+ *
+ * Zero-tolerance check that enforces Tetra design tokens for ALL color usage
+ * in frontend components. No hardcoded Tailwind colors allowed.
+ *
+ * WHAT IT CATCHES:
+ *   - CRITICAL: Hardcoded neutral colors (bg-white, text-gray-*, border-gray-*)
+ *   - CRITICAL: Hardcoded semantic colors (bg-red-*, text-green-*, border-blue-*)
+ *   - CRITICAL: hover:/focus: with hardcoded colors
+ *   - CRITICAL: placeholder/ring/outline/divide with hardcoded neutrals
+ *   - HIGH:     Paired dark: overrides (works but must use tokens)
+ *   - HIGH:     Arbitrary color values (bg-[#fff], text-[#333])
+ *   - HIGH:     Gradient from/to/via with hardcoded neutrals
+ *   - MEDIUM:   Inline style= with hardcoded colors
+ *
+ * TOKEN MAPPING (what to use instead):
+ *
+ *   NEUTRALS:
+ *   bg-white / bg-gray-50            →  bg-background
+ *   bg-gray-100                      →  bg-secondary  (or bg-muted)
+ *   bg-gray-200                      →  bg-muted
+ *   text-gray-900 / text-black       →  text-foreground
+ *   text-gray-700/800                →  text-foreground
+ *   text-gray-500/600                →  text-muted-foreground
+ *   text-gray-300/400                →  text-muted-foreground
+ *   border-gray-200/300              →  border-border
+ *   hover:bg-gray-100                →  hover:bg-accent
+ *   ring-gray-*                      →  ring-ring
+ *   placeholder-gray-*               →  placeholder:text-muted-foreground
+ *
+ *   SEMANTIC STATUS:
+ *   bg-green-50/100                  →  bg-success-subtle
+ *   text-green-600/700               →  text-success-foreground
+ *   bg-red-50/100                    →  bg-danger-subtle (or bg-destructive)
+ *   text-red-600/700                 →  text-danger-foreground
+ *   bg-amber-50/100 / bg-yellow-*    →  bg-warning-subtle
+ *   text-amber-600/700               →  text-warning-foreground
+ *   bg-blue-50/100                   →  bg-info-subtle
+ *   text-blue-600/700                →  text-info-foreground
+ *
+ *   BRAND/PLATFORM specific colors (indigo, purple, teal, etc.) must be
+ *   whitelisted per-project in .tetra-audit.json → codeQuality.darkModeCompliance.whitelistClasses
+ *
+ * Severity: high — dark mode violations create visible UX issues
+ */
+
+import { readFileSync, existsSync } from 'fs'
+import { join } from 'path'
+import { glob } from 'glob'
+
+// ============================================================================
+// META
+// ============================================================================
+
+export const meta = {
+  id: 'dark-mode-compliance',
+  name: 'Dark Mode Compliance',
+  category: 'codeQuality',
+  severity: 'high',
+  description: 'Zero-tolerance enforcement of Tetra design tokens — no hardcoded Tailwind colors'
+}
+
+// ============================================================================
+// NEUTRAL COLOR RULES
+// ============================================================================
+
+/** Gray-scale families treated as "neutral" — all must use tokens */
+const NEUTRAL_SCALES = '(?:gray|slate|zinc|neutral|stone)'
+
+/**
+ * Every hardcoded neutral class and its token replacement.
+ * The check scans for these in className strings and inline style strings.
+ */
+const NEUTRAL_RULES = [
+  // ── Backgrounds ──
+  { re: `bg-white`,                                 token: 'bg-background' },
+  { re: `bg-${NEUTRAL_SCALES}-50`,                  token: 'bg-background' },
+  { re: `bg-${NEUTRAL_SCALES}-100`,                 token: 'bg-secondary' },
+  { re: `bg-${NEUTRAL_SCALES}-200`,                 token: 'bg-muted' },
+  { re: `bg-${NEUTRAL_SCALES}-(?:300|400)`,          token: 'bg-muted (or custom token)' },
+  { re: `bg-${NEUTRAL_SCALES}-(?:500|600)`,          token: 'bg-muted-foreground (via CSS var)' },
+  { re: `bg-${NEUTRAL_SCALES}-(?:700|800)`,          token: 'bg-foreground/10 (or inverse token)' },
+  { re: `bg-${NEUTRAL_SCALES}-(?:900|950)`,          token: 'bg-foreground (or inverse)' },
+  { re: `bg-black`,                                 token: 'bg-foreground' },
+  // ── Text ──
+  { re: `text-${NEUTRAL_SCALES}-(?:900|950)`,        token: 'text-foreground' },
+  { re: `text-${NEUTRAL_SCALES}-(?:700|800)`,        token: 'text-foreground' },
+  { re: `text-${NEUTRAL_SCALES}-(?:500|600)`,        token: 'text-muted-foreground' },
+  { re: `text-${NEUTRAL_SCALES}-(?:300|400)`,        token: 'text-muted-foreground' },
+  { re: `text-${NEUTRAL_SCALES}-(?:100|200)`,        token: 'text-muted-foreground' },
+  { re: `text-black`,                               token: 'text-foreground' },
+  { re: `text-white`,                               token: 'text-background (or text-primary-foreground)' },
+  // ── Borders ──
+  { re: `border-${NEUTRAL_SCALES}-(?:200|300)`,      token: 'border-border' },
+  { re: `border-${NEUTRAL_SCALES}-(?:100|150)`,      token: 'border-border' },
+  { re: `border-${NEUTRAL_SCALES}-(?:400|500|600)`,  token: 'border-border' },
+  { re: `border-${NEUTRAL_SCALES}-(?:700|800)`,      token: 'border-border' },
+  // ── Divide ──
+  { re: `divide-${NEUTRAL_SCALES}-\\d+`,             token: 'divide-border' },
+  // ── Ring ──
+  { re: `ring-${NEUTRAL_SCALES}-\\d+`,               token: 'ring-ring' },
+  // ── Outline ──
+  { re: `outline-${NEUTRAL_SCALES}-\\d+`,            token: 'outline-ring' },
+  // ── Placeholder ──
+  { re: `placeholder-${NEUTRAL_SCALES}-\\d+`,        token: 'placeholder:text-muted-foreground' },
+  // ── Shadow (color) ──
+  { re: `shadow-${NEUTRAL_SCALES}-\\d+`,             token: 'shadow (no color class needed)' },
+  // ── Gradient ──
+  { re: `from-white`,                               token: 'from-background' },
+  { re: `from-${NEUTRAL_SCALES}-\\d+`,               token: 'from-background/muted/secondary' },
+  { re: `to-white`,                                 token: 'to-background' },
+  { re: `to-${NEUTRAL_SCALES}-\\d+`,                 token: 'to-background/muted/secondary' },
+  { re: `via-white`,                                token: 'via-background' },
+  { re: `via-${NEUTRAL_SCALES}-\\d+`,                token: 'via-background/muted/secondary' },
+  // ── Caret, fill, stroke, decoration ──
+  { re: `caret-${NEUTRAL_SCALES}-\\d+`,              token: 'caret-foreground' },
+  { re: `fill-${NEUTRAL_SCALES}-\\d+`,               token: 'fill-foreground (or fill-muted-foreground)' },
+  { re: `stroke-${NEUTRAL_SCALES}-\\d+`,             token: 'stroke-foreground (or stroke-border)' },
+  { re: `decoration-${NEUTRAL_SCALES}-\\d+`,         token: 'decoration-foreground' },
+]
+
+// Compile to real regexes
+const COMPILED_NEUTRAL_RULES = NEUTRAL_RULES.map(r => ({
+  regex: new RegExp(`\\b${r.re}\\b`),
+  token: r.token,
+  source: r.re,
+}))
+
+// ============================================================================
+// SEMANTIC COLOR RULES
+// ============================================================================
+
+/**
+ * Semantic colors (red, green, amber, blue) should use Tetra semantic tokens.
+ * Other hues (indigo, purple, pink, teal, etc.) are "brand" and must be
+ * whitelisted per-project.
+ */
+const SEMANTIC_MAPPINGS = [
+  // ── Success (green/emerald) ──
+  { scales: '(?:green|emerald)', shades: '(?:50|100)',     util: 'bg',     token: 'bg-success-subtle' },
+  { scales: '(?:green|emerald)', shades: '(?:500|600)',    util: 'bg',     token: 'bg-success' },
+  { scales: '(?:green|emerald)', shades: '(?:600|700)',    util: 'text',   token: 'text-success-foreground' },
+  { scales: '(?:green|emerald)', shades: '(?:800|900)',    util: 'text',   token: 'text-success-foreground' },
+  { scales: '(?:green|emerald)', shades: '(?:200|300)',    util: 'border', token: 'border-success' },
+  // ── Danger (red/rose) ──
+  { scales: '(?:red|rose)',      shades: '(?:50|100)',     util: 'bg',     token: 'bg-danger-subtle (or bg-destructive/10)' },
+  { scales: '(?:red|rose)',      shades: '(?:500|600)',    util: 'bg',     token: 'bg-destructive' },
+  { scales: '(?:red|rose)',      shades: '(?:600|700)',    util: 'text',   token: 'text-danger-foreground (or text-destructive)' },
+  { scales: '(?:red|rose)',      shades: '(?:800|900)',    util: 'text',   token: 'text-danger-foreground' },
+  { scales: '(?:red|rose)',      shades: '(?:200|300)',    util: 'border', token: 'border-destructive' },
+  // ── Warning (amber/yellow/orange) ──
+  { scales: '(?:amber|yellow|orange)', shades: '(?:50|100)', util: 'bg',   token: 'bg-warning-subtle' },
+  { scales: '(?:amber|yellow|orange)', shades: '(?:500|600)', util: 'bg',  token: 'bg-warning' },
+  { scales: '(?:amber|yellow|orange)', shades: '(?:600|700)', util: 'text', token: 'text-warning-foreground' },
+  { scales: '(?:amber|yellow|orange)', shades: '(?:800|900)', util: 'text', token: 'text-warning-foreground' },
+  { scales: '(?:amber|yellow|orange)', shades: '(?:200|300)', util: 'border', token: 'border-warning' },
+  // ── Info (blue/sky/cyan) ──
+  { scales: '(?:blue|sky|cyan)',  shades: '(?:50|100)',    util: 'bg',     token: 'bg-info-subtle' },
+  { scales: '(?:blue|sky|cyan)',  shades: '(?:500|600)',   util: 'bg',     token: 'bg-info' },
+  { scales: '(?:blue|sky|cyan)',  shades: '(?:600|700)',   util: 'text',   token: 'text-info-foreground' },
+  { scales: '(?:blue|sky|cyan)',  shades: '(?:800|900)',   util: 'text',   token: 'text-info-foreground' },
+  { scales: '(?:blue|sky|cyan)',  shades: '(?:200|300)',   util: 'border', token: 'border-info' },
+]
+
+const COMPILED_SEMANTIC_RULES = SEMANTIC_MAPPINGS.map(r => ({
+  regex: new RegExp(`\\b${r.util}-${r.scales}-${r.shades}\\b`),
+  token: r.token,
+}))
+
+/**
+ * "Brand" color hues — these need project-specific whitelisting.
+ * If NOT whitelisted, they get flagged as MEDIUM (not critical, but suspicious).
+ */
+const BRAND_HUES = '(?:indigo|violet|purple|fuchsia|pink|teal|lime)'
+const BRAND_REGEX = new RegExp(`\\b(?:bg|text|border)-${BRAND_HUES}-\\d+\\b`)
+
+// ============================================================================
+// MODIFIERS — hover:/focus:/etc. with hardcoded colors
+// ============================================================================
+
+const MODIFIER_PREFIXES = [
+  'hover:', 'focus:', 'focus-within:', 'focus-visible:',
+  'active:', 'group-hover:', 'peer-hover:',
+  'dark:hover:', 'dark:focus:',
+]
+
+// ============================================================================
+// ARBITRARY VALUES — bg-[#fff], text-[#333]
+// ============================================================================
+
+const ARBITRARY_COLOR_RE = /\b(?:bg|text|border|ring|fill|stroke|from|to|via|outline|shadow|caret|decoration)-\[#[0-9a-fA-F]+\]/g
+
+// ============================================================================
+// INLINE STYLE COLORS
+// ============================================================================
+
+const INLINE_COLOR_RE = /style=\{?\{[^}]*(?:color|background|backgroundColor|borderColor)\s*:\s*['"]?#[0-9a-fA-F]/
+
+// ============================================================================
+// CONFIG & WHITELIST
+// ============================================================================
+
+const IGNORE_PATTERNS = [
+  '**/node_modules/**',
+  '**/.next/**',
+  '**/dist/**',
+  '**/build/**',
+  '**/*.test.*',
+  '**/*.spec.*',
+  '**/__tests__/**',
+  '**/storybook/**',
+]
+
+function loadWhitelist(projectRoot, config) {
+  const dmConfig = config.codeQuality?.darkModeCompliance || {}
+  return {
+    dirs: dmConfig.whitelistDirs || [],
+    files: dmConfig.whitelistFiles || [],
+    /** Exact class names that are allowed (e.g. 'bg-indigo-500' for brand color) */
+    classes: new Set(dmConfig.whitelistClasses || []),
+    /** Regex patterns for whitelisted classes */
+    classPatterns: (dmConfig.whitelistClassPatterns || []).map(p => new RegExp(p)),
+    maxFindings: dmConfig.maxFindings || 80,
+  }
+}
+
+function isWhitelistedClass(cls, whitelist) {
+  if (whitelist.classes.has(cls)) return true
+  return whitelist.classPatterns.some(re => re.test(cls))
+}
+
+// ============================================================================
+// LINE SCANNER
+// ============================================================================
+
+/**
+ * Extract class-containing strings from a line of JSX/TSX.
+ */
+function extractClassStrings(line) {
+  const results = []
+  let m
+
+  // className="..." or class="..."
+  const staticRe = /(?:className|class)=["']([^"']+)["']/g
+  while ((m = staticRe.exec(line)) !== null) {
+    results.push(m[1])
+  }
+
+  // className={`...`}
+  const templateRe = /(?:className|class)=\{`([^`]+)`\}/g
+  while ((m = templateRe.exec(line)) !== null) {
+    results.push(m[1])
+  }
+
+  // String literals containing color classes (ternaries, cn() args, etc.)
+  const stringRe = /['"]([^'"]*\b(?:bg-|text-|border-|ring-|divide-|from-|to-|via-|placeholder-|outline-|shadow-|fill-|stroke-|caret-|decoration-)[^'"]*)['"]/g
+  while ((m = stringRe.exec(line)) !== null) {
+    results.push(m[1])
+  }
+
+  return results
+}
+
+/**
+ * Scan a single class string for all violations.
+ */
+function scanClassString(classStr, whitelist) {
+  const violations = []
+
+  // Split into individual classes (handles spaces, newlines, ${} gaps)
+  const classes = classStr.split(/\s+/).filter(Boolean)
+
+  for (const cls of classes) {
+    // Strip modifier prefixes for matching (hover:bg-gray-100 → bg-gray-100)
+    let baseCls = cls
+    let modifier = ''
+    for (const mod of MODIFIER_PREFIXES) {
+      if (cls.startsWith(mod)) {
+        modifier = mod
+        baseCls = cls.slice(mod.length)
+        break
+      }
+    }
+    // Handle dark: prefix (we flag the existence of dark: as needing removal)
+    if (cls.startsWith('dark:') && !modifier) {
+      // dark: classes are flagged separately as "should not exist"
+      continue
+    }
+
+    if (isWhitelistedClass(baseCls, whitelist) || isWhitelistedClass(cls, whitelist)) continue
+
+    // Check neutral rules
+    for (const rule of COMPILED_NEUTRAL_RULES) {
+      if (rule.regex.test(baseCls)) {
+        violations.push({
+          severity: modifier ? 'critical' : 'critical',
+          cls,
+          token: modifier ? `${modifier}${rule.token}` : rule.token,
+          type: 'neutral',
+        })
+        break // One match per class is enough
+      }
+    }
+
+    // Check semantic rules
+    for (const rule of COMPILED_SEMANTIC_RULES) {
+      if (rule.regex.test(baseCls)) {
+        violations.push({
+          severity: 'critical',
+          cls,
+          token: rule.token,
+          type: 'semantic',
+        })
+        break
+      }
+    }
+
+    // Check brand colors (not critical, but flagged)
+    if (BRAND_REGEX.test(baseCls)) {
+      violations.push({
+        severity: 'medium',
+        cls,
+        token: 'whitelist or create project token',
+        type: 'brand',
+      })
+    }
+  }
+
+  return violations
+}
+
+// ============================================================================
+// MAIN CHECK
+// ============================================================================
+
+export async function run(config, projectRoot) {
+  const result = {
+    passed: true,
+    findings: [],
+    summary: { total: 0, critical: 0, high: 0, medium: 0, low: 0 },
+    details: {
+      neutralViolations: 0,
+      semanticViolations: 0,
+      brandViolations: 0,
+      arbitraryViolations: 0,
+      inlineStyleViolations: 0,
+      darkPrefixCount: 0,
+      pairedDarkOverrides: 0,
+      filesScanned: 0,
+      filesWithViolations: 0,
+      topOffenders: [],
+    }
+  }
+
+  const whitelist = loadWhitelist(projectRoot, config)
+
+  // Find frontend source files
+  const frontendDir = join(projectRoot, 'frontend', 'src')
+  if (!existsSync(frontendDir)) {
+    result.findings.push({
+      file: 'project',
+      line: 0,
+      severity: 'low',
+      message: 'No frontend/src directory found — skipping dark mode check',
+    })
+    return result
+  }
+
+  let files = []
+  for (const pattern of ['**/*.tsx', '**/*.jsx']) {
+    const found = glob.sync(pattern, {
+      cwd: frontendDir,
+      ignore: IGNORE_PATTERNS,
+      absolute: false,
+    })
+    files.push(...found)
+  }
+  files = [...new Set(files)]
+  result.details.filesScanned = files.length
+
+  const fileStats = []
+
+  for (const file of files) {
+    const relPath = `frontend/src/${file}`
+
+    if (whitelist.files.some(w => relPath.includes(w))) continue
+    if (whitelist.dirs.some(d => relPath.includes(d))) continue
+
+    let content
+    try {
+      content = readFileSync(join(frontendDir, file), 'utf-8')
+    } catch {
+      continue
+    }
+
+    const lines = content.split('\n')
+    let fileViolationCount = 0
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i]
+
+      // ── 1. Class string violations (neutrals + semantics + brand) ──
+      const classStrings = extractClassStrings(line)
+      for (const classStr of classStrings) {
+        const violations = scanClassString(classStr, whitelist)
+        for (const v of violations) {
+          fileViolationCount++
+          result.summary[v.severity]++
+          result.summary.total++
+          result.passed = false
+
+          if (v.type === 'neutral') result.details.neutralViolations++
+          if (v.type === 'semantic') result.details.semanticViolations++
+          if (v.type === 'brand') result.details.brandViolations++
+
+          if (result.findings.length < whitelist.maxFindings) {
+            result.findings.push({
+              file: relPath,
+              line: i + 1,
+              severity: v.severity,
+              message: `\`${v.cls}\` → use \`${v.token}\``,
+              fix: `Replace \`${v.cls}\` with \`${v.token}\``,
+            })
+          }
+        }
+
+        // ── 2. Paired dark: overrides (have both light + dark: → should use token) ──
+        const hasDarkOverride = /\bdark:(?:bg|text|border)-/.test(classStr)
+        const hasLightNeutral = COMPILED_NEUTRAL_RULES.some(r => r.regex.test(classStr))
+        if (hasDarkOverride && hasLightNeutral) {
+          result.details.pairedDarkOverrides++
+        }
+      }
+
+      // ── 3. Arbitrary color values ──
+      ARBITRARY_COLOR_RE.lastIndex = 0
+      let arbMatch
+      while ((arbMatch = ARBITRARY_COLOR_RE.exec(line)) !== null) {
+        fileViolationCount++
+        result.details.arbitraryViolations++
+        result.summary.high++
+        result.summary.total++
+        result.passed = false
+
+        if (result.findings.length < whitelist.maxFindings) {
+          result.findings.push({
+            file: relPath,
+            line: i + 1,
+            severity: 'high',
+            message: `Arbitrary color \`${arbMatch[0]}\` → use CSS variable or Tetra token`,
+          })
+        }
+      }
+
+      // ── 4. Inline style colors ──
+      if (INLINE_COLOR_RE.test(line)) {
+        fileViolationCount++
+        result.details.inlineStyleViolations++
+        result.summary.high++
+        result.summary.total++
+        result.passed = false
+
+        if (result.findings.length < whitelist.maxFindings) {
+          result.findings.push({
+            file: relPath,
+            line: i + 1,
+            severity: 'high',
+            message: 'Inline style with hardcoded color → use Tetra CSS variable: var(--tetra-*)',
+          })
+        }
+      }
+
+      // ── 5. Count dark: prefixes (goal: 0) ──
+      const darkCount = (line.match(/\bdark:/g) || []).length
+      result.details.darkPrefixCount += darkCount
+    }
+
+    if (fileViolationCount > 0) {
+      result.details.filesWithViolations++
+      fileStats.push({ file: relPath, violations: fileViolationCount })
+    }
+  }
+
+  // Top offenders
+  fileStats.sort((a, b) => b.violations - a.violations)
+  result.details.topOffenders = fileStats.slice(0, 10)
+
+  // Summary finding
+  if (!result.passed) {
+    const d = result.details
+    result.findings.unshift({
+      file: 'project',
+      line: 0,
+      severity: 'high',
+      message: [
+        `Dark mode compliance FAILED:`,
+        `${d.neutralViolations} neutral color violations,`,
+        `${d.semanticViolations} semantic color violations,`,
+        `${d.brandViolations} brand color violations (whitelist or tokenize),`,
+        `${d.arbitraryViolations} arbitrary [#hex] colors,`,
+        `${d.inlineStyleViolations} inline style colors,`,
+        `${d.darkPrefixCount} dark: prefixes (goal: 0).`,
+        `Fix: replace ALL hardcoded colors with Tetra tokens.`,
+        `Docs: bg-background, text-foreground, text-muted-foreground, border-border,`,
+        `bg-success-subtle, text-danger-foreground, bg-warning-subtle, bg-info-subtle.`,
+      ].join(' '),
+    })
+  }
+
+  return result
+}

package/lib/runner.js

@@ -24,6 +24,7 @@ import * as apiResponseFormat from './checks/codeQuality/api-response-format.js'
 import * as fileSize from './checks/codeQuality/file-size.js'
 import * as namingConventions from './checks/codeQuality/naming-conventions.js'
 import * as routeSeparation from './checks/codeQuality/route-separation.js'
+import * as darkModeCompliance from './checks/codeQuality/dark-mode-compliance.js'
 import * as gitignoreValidation from './checks/security/gitignore-validation.js'
 import * as routeConfigAlignment from './checks/security/route-config-alignment.js'
 import * as rlsLiveAudit from './checks/security/rls-live-audit.js'
@@ -124,7 +125,8 @@ const ALL_CHECKS = {
     apiResponseFormat,
     fileSize,
     namingConventions,
-    routeSeparation
+    routeSeparation,
+    darkModeCompliance
   ],
   supabase: [
     rlsPolicyAudit,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soulbatical/tetra-dev-toolkit",
-  "version": "1.20.18",
+  "version": "1.20.19",
   "publishConfig": {
     "access": "restricted"
   },