@hadoku/themes 0.0.0-stage → 5.12.16

package/package.json

@@ -1,6 +1,85 @@
 {
   "name": "@hadoku/themes",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "5.12.16",
+  "description": "18 beautiful themes with a symmetric, WCAG-verified token set and a complete Tailwind v4 color mapping - Light, Dark, Strawberry, Ocean, Cyberpunk, Coffee, Lavender, Nature, Pink, Izakaya",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WolffM/hadoku-task.git",
+    "directory": "themes"
+  },
+  "files": [
+    "dist",
+    "src/style.css",
+    "src/advanced.css",
+    "src/tailwind-integration.css",
+    "src/tailwind-colors.css",
+    "src/icons.css",
+    "src/icons",
+    "scripts",
+    "README.md",
+    "THEME_USAGE_GUIDE.md",
+    "LICENSE-lucide"
+  ],
+  "exports": {
+    "./style.css": "./src/style.css",
+    "./advanced.css": "./src/advanced.css",
+    "./tailwind-integration.css": "./src/tailwind-integration.css",
+    "./tailwind-colors.css": "./src/tailwind-colors.css",
+    "./icons.css": "./src/icons.css",
+    "./THEME_USAGE_GUIDE.md": "./THEME_USAGE_GUIDE.md",
+    "./check-usage": "./scripts/check-usage.mjs",
+    "./contract": {
+      "types": "./scripts/lib/contract.d.mts",
+      "default": "./scripts/lib/contract.mjs"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "default": "./dist/icons/index.js"
+    },
+    "./icons/react": {
+      "types": "./dist/icons/Icon.d.ts",
+      "default": "./dist/icons/Icon.js"
+    },
+    "./platform": {
+      "types": "./dist/platform/index.d.ts",
+      "default": "./dist/platform/index.js"
+    },
+    "./platform/react": {
+      "types": "./dist/platform/usePlatform.d.ts",
+      "default": "./dist/platform/usePlatform.js"
+    },
+    "./check-icons": "./scripts/check-icons.mjs"
+  },
+  "keywords": [
+    "themes",
+    "css-variables",
+    "design-tokens",
+    "dark-mode",
+    "color-schemes",
+    "tailwind-v4",
+    "hadoku"
+  ],
+  "author": "WolffM",
+  "license": "MIT",
+  "dependencies": {
+    "@wolffm/prefs-client": "npm:@hadoku/prefs-client@^1.1.1",
+    "zod": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "bin": {
+    "hadoku-check-icons": "./scripts/check-icons.mjs",
+    "hadoku-codemod-icons": "./scripts/codemod-icons.mjs"
+  }
+}

package/scripts/audit-tokens.mjs

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+/**
+ * Reports the current state of the token matrix: which tokens each theme
+ * defines, where families are asymmetric, and which WCAG pairs pass.
+ *
+ * Read-only. Run before and after a normalization to see exactly what moved.
+ */
+
+import { parseThemes, allTokenNames, THEMES, FAMILIES, isDarkTheme } from './lib/parse-themes.mjs'
+import { contrast, ratio } from './lib/color.mjs'
+
+const themes = parseThemes()
+const names = allTokenNames(themes)
+
+/* ---- 1. Presence matrix: which themes define which token ---- */
+const missing = []
+for (const name of names) {
+  const absent = THEMES.filter(t => !themes[t][name])
+  if (absent.length) missing.push({ name, absent })
+}
+
+console.log(`# Token audit\n`)
+console.log(`Themes: ${THEMES.length}   Distinct --color-* tokens: ${names.length}\n`)
+
+console.log(`## Per-theme drift (token defined in some themes but not others)`)
+if (!missing.length) {
+  console.log('None — every token is defined in all 18 themes.\n')
+} else {
+  for (const { name, absent } of missing) {
+    console.log(`- ${name} — missing in ${absent.length}: ${absent.join(', ')}`)
+  }
+  console.log('')
+}
+
+/* ---- 2. Family symmetry ---- */
+const suffixes = new Set()
+for (const name of names) {
+  for (const f of FAMILIES) {
+    if (name === `--color-${f}`) suffixes.add('')
+    else if (name.startsWith(`--color-${f}-`)) suffixes.add(name.slice(`--color-${f}`.length))
+  }
+}
+const sortedSuffixes = [...suffixes].sort()
+
+console.log(`## Family symmetry (✓ = defined in all 18 themes)`)
+console.log(`| family | ${sortedSuffixes.map(s => `\`${s || 'base'}\``).join(' | ')} | on-<f> |`)
+console.log(`|---|${sortedSuffixes.map(() => ':-:').join('|')}|:-:|`)
+for (const f of FAMILIES) {
+  const cells = sortedSuffixes.map(s => {
+    const name = `--color-${f}${s}`
+    const count = THEMES.filter(t => themes[t][name]).length
+    return count === THEMES.length ? '✓' : count === 0 ? '✗' : `${count}/18`
+  })
+  const onCount = THEMES.filter(t => themes[t][`--color-on-${f}`]).length
+  console.log(
+    `| ${f} | ${cells.join(' | ')} | ${onCount === THEMES.length ? '✓' : `${onCount}/18`} |`
+  )
+}
+console.log('')
+
+/* ---- 3. WCAG pairs ---- */
+/* Three contracts from docs/THEME_SYSTEM_RULES.md:
+   §1 on-<f>    vs <f>        — text on a filled button
+   §1 on-<f>    vs <f>-dark   — same button in its hover/active state
+   §2 on-<f>-bg vs <f>-bg     — badge text on its tint (the pair §2 flags P1) */
+const failures = { filled: [], hover: [], badge: [] }
+
+for (const theme of THEMES) {
+  const tk = themes[theme]
+  // Translucent -bg tints composite over the card surface they sit on.
+  const surface =
+    tk['--color-bg-card'] || tk['--color-bg'] || (isDarkTheme(theme) ? '#000' : '#fff')
+
+  for (const f of FAMILIES) {
+    const base = tk[`--color-${f}`]
+    const on = tk[`--color-on-${f}`]
+    const dark = tk[`--color-${f}-dark`]
+    const tint = tk[`--color-${f}-bg`]
+    const onTint = tk[`--color-on-${f}-bg`]
+
+    const check = (bucket, fg, bg) => {
+      if (!fg || !bg) return
+      const r = contrast(fg, bg, surface)
+      if (r < 4.5) failures[bucket].push({ theme, f, fg, bg, r: ratio(r) })
+    }
+
+    check('filled', on, base)
+    check('hover', on, dark)
+    check('badge', onTint, tint)
+  }
+}
+
+const report = (title, rows, contract) => {
+  console.log(`## ${title}`)
+  console.log(`_${contract}_\n`)
+  if (!rows.length) {
+    console.log('All pairs pass.\n')
+    return
+  }
+  console.log(`**${rows.length} failing pairs**\n`)
+  console.log('| theme | family | fg | bg | ratio |')
+  console.log('|---|---|---|---|--:|')
+  for (const r of rows)
+    console.log(`| ${r.theme} | ${r.f} | \`${r.fg}\` | \`${r.bg}\` | ${r.r}:1 |`)
+  console.log('')
+}
+
+report(
+  'Filled-button contrast — `on-<f>` on `<f>`',
+  failures.filled,
+  'THEME_SYSTEM_RULES §1: must be ≥ 4.5:1'
+)
+report(
+  'Button hover contrast — `on-<f>` on `<f>-dark`',
+  failures.hover,
+  'THEME_SYSTEM_RULES §1 + §6: the hover state carries the same text, so it must clear 4.5:1 too'
+)
+report(
+  'Badge contrast — `on-<f>-bg` on `<f>-bg`',
+  failures.badge,
+  'THEME_SYSTEM_RULES §2: must be ≥ 4.5:1 (closes the P1 unvalidated-pair item)'
+)
+
+const total = failures.filled.length + failures.hover.length + failures.badge.length
+console.log(`---\n**Total WCAG failures: ${total}**`)
+process.exitCode = 0 // audit is informational; check-contrast.mjs is the gate

package/scripts/check-contrast.mjs

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+/**
+ * Gate: the token set must be structurally symmetric and every WCAG pair in
+ * docs/THEME_SYSTEM_RULES.md must hold, in all 18 themes.
+ *
+ * audit-tokens.mjs reports; this one fails the build. The rules themselves live
+ * in lib/contract.mjs, which the hosted theme editor and the worker's save route
+ * run too — so an editor save cannot pass a gate this script would fail.
+ */
+
+import { parseThemes } from './lib/parse-themes.mjs'
+import { checkThemes, THEMES, WCAG_PAIR_COUNT } from './lib/contract.mjs'
+
+const problems = checkThemes(parseThemes())
+
+if (problems.length) {
+  console.error(`check-contrast: FAILED — ${problems.length} problem(s)\n`)
+  for (const p of problems) console.error(`  ${p}`)
+  process.exit(1)
+}
+
+console.log(
+  `check-contrast: OK — ${THEMES.length} themes, symmetric token set, ${WCAG_PAIR_COUNT} WCAG pairs pass, surfaces separated.`
+)

package/scripts/check-docs.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+/**
+ * Gate: THEME_USAGE_GUIDE.md must list exactly the tokens that exist.
+ *
+ * A usage guide that drifts from the stylesheet is worse than none — it is a
+ * confident, wrong answer, and it is what agents read first. This fails the
+ * build in both directions: a token missing from the guide, or a token named
+ * in the guide that no longer exists.
+ */
+
+import { readFileSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { parseThemes, allTokenNames, THEMES } from './lib/parse-themes.mjs'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const GUIDE = resolve(here, '../THEME_USAGE_GUIDE.md')
+
+const themes = parseThemes()
+const actual = new Set(allTokenNames(themes).filter(n => THEMES.every(t => themes[t][n])))
+
+const text = readFileSync(GUIDE, 'utf8')
+// Only count tokens inside the "Complete token list" section's tables — the
+// anti-pattern table deliberately names removed tokens.
+const listStart = text.indexOf('## Complete token list')
+const listEnd = text.indexOf('## Anti-patterns')
+if (listStart < 0 || listEnd < 0) {
+  console.error(
+    'check-docs: FAILED — could not locate the token-list section in THEME_USAGE_GUIDE.md'
+  )
+  process.exit(1)
+}
+const documented = new Set(
+  [...text.slice(listStart, listEnd).matchAll(/`(--color-[a-z0-9-]+)`/g)].map(m => m[1])
+)
+
+const undocumented = [...actual].filter(t => !documented.has(t)).sort()
+const stale = [...documented].filter(t => !actual.has(t)).sort()
+
+if (undocumented.length || stale.length) {
+  console.error('check-docs: FAILED — THEME_USAGE_GUIDE.md is out of sync with style.css\n')
+  if (undocumented.length) {
+    console.error(`  Tokens missing from the guide (${undocumented.length}):`)
+    for (const t of undocumented) console.error(`    ${t}`)
+  }
+  if (stale.length) {
+    console.error(`  Tokens in the guide that no longer exist (${stale.length}):`)
+    for (const t of stale) console.error(`    ${t}`)
+  }
+  process.exit(1)
+}
+
+console.log(`check-docs: OK — THEME_USAGE_GUIDE.md documents all ${actual.size} tokens.`)