@lucaismyname/create-l1-stack 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucaismyname/create-l1-stack",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -14,6 +14,104 @@ const TEMPLATE_PKG_TS = '@lucaismyname/l1-template-ts'
 const TEMPLATE_PKG_JS = '@lucaismyname/l1-template-js'
 const TEMPLATE_PATH_PREFIX = 'package/template/'
 
+const THEME_PRESETS = {
+  slate: {
+    light: {
+      primary: 'oklch(0.205 0 0)',
+      primaryForeground: 'oklch(0.985 0 0)',
+      ring: 'oklch(0.708 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.922 0 0)',
+      primaryForeground: 'oklch(0.205 0 0)',
+      ring: 'oklch(0.556 0 0)',
+    },
+  },
+  blue: {
+    light: {
+      primary: 'oklch(0.62 0.19 255)',
+      primaryForeground: 'oklch(0.98 0 0)',
+      ring: 'oklch(0.62 0.19 255)',
+    },
+    dark: {
+      primary: 'oklch(0.78 0.14 255)',
+      primaryForeground: 'oklch(0.18 0 0)',
+      ring: 'oklch(0.78 0.14 255)',
+    },
+  },
+  emerald: {
+    light: {
+      primary: 'oklch(0.67 0.17 155)',
+      primaryForeground: 'oklch(0.98 0 0)',
+      ring: 'oklch(0.67 0.17 155)',
+    },
+    dark: {
+      primary: 'oklch(0.78 0.14 155)',
+      primaryForeground: 'oklch(0.18 0 0)',
+      ring: 'oklch(0.78 0.14 155)',
+    },
+  },
+  violet: {
+    light: {
+      primary: 'oklch(0.62 0.23 300)',
+      primaryForeground: 'oklch(0.98 0 0)',
+      ring: 'oklch(0.62 0.23 300)',
+    },
+    dark: {
+      primary: 'oklch(0.75 0.18 300)',
+      primaryForeground: 'oklch(0.18 0 0)',
+      ring: 'oklch(0.75 0.18 300)',
+    },
+  },
+  rose: {
+    light: {
+      primary: 'oklch(0.62 0.24 20)',
+      primaryForeground: 'oklch(0.98 0 0)',
+      ring: 'oklch(0.62 0.24 20)',
+    },
+    dark: {
+      primary: 'oklch(0.74 0.18 20)',
+      primaryForeground: 'oklch(0.18 0 0)',
+      ring: 'oklch(0.74 0.18 20)',
+    },
+  },
+}
+
+function updateCssVarInBlock(css, blockSelector, varName, value) {
+  const blockRe = new RegExp(`(${blockSelector}\\s*\\{)([\\s\\S]*?)(\\})`, 'm')
+  const match = css.match(blockRe)
+  if (!match) return css
+
+  const [full, open, body, close] = match
+  const varRe = new RegExp(`(^\\s*${varName}:\\s*)([^;]+)(;\\s*$)`, 'm')
+  if (!varRe.test(body)) return css
+
+  const nextBody = body.replace(varRe, `$1${value}$3`)
+  return css.replace(full, `${open}${nextBody}${close}`)
+}
+
+async function applyPrimaryTheme(targetDir, preset) {
+  const indexCssPath = path.join(targetDir, 'src', 'index.css')
+  try {
+    const css = await fs.readFile(indexCssPath, 'utf8')
+    let next = css
+
+    next = updateCssVarInBlock(next, ':root', '--primary', preset.light.primary)
+    next = updateCssVarInBlock(next, ':root', '--primary-foreground', preset.light.primaryForeground)
+    next = updateCssVarInBlock(next, ':root', '--ring', preset.light.ring)
+
+    next = updateCssVarInBlock(next, '\\.dark', '--primary', preset.dark.primary)
+    next = updateCssVarInBlock(next, '\\.dark', '--primary-foreground', preset.dark.primaryForeground)
+    next = updateCssVarInBlock(next, '\\.dark', '--ring', preset.dark.ring)
+
+    if (next !== css) {
+      await fs.writeFile(indexCssPath, next, 'utf8')
+    }
+  } catch {
+    // ignore if index.css doesn't exist
+  }
+}
+
 function toKebabCaseName(input) {
   return input
     .trim()
@@ -143,6 +241,22 @@ async function main() {
     process.exit(0)
   }
 
+  const primaryColor = await select({
+    message: 'Primary color',
+    options: [
+      { value: 'slate', label: 'Slate (default)' },
+      { value: 'blue', label: 'Blue' },
+      { value: 'emerald', label: 'Emerald' },
+      { value: 'violet', label: 'Violet' },
+      { value: 'rose', label: 'Rose' },
+    ],
+    initialValue: 'slate',
+  })
+  if (isCancel(primaryColor)) {
+    cancel('Cancelled')
+    process.exit(0)
+  }
+
   const targetDir = path.resolve(process.cwd(), projectName)
   // NOTE: npm downloads the CLI package before prompts run.
   // To avoid downloading both templates, we fetch only the chosen template from npm.
@@ -194,6 +308,8 @@ async function main() {
     }
   }
 
+  await applyPrimaryTheme(targetDir, THEME_PRESETS[primaryColor] ?? THEME_PRESETS.slate)
+
   // Update package name
   const pkgJsonPath = path.join(targetDir, 'package.json')
   const pkg = await fse.readJson(pkgJsonPath)