nuxt-ignis 0.3.0 → 0.3.1

package/.nuxt/ui.css

@@ -0,0 +1,143 @@
+@source "./ui";
+
+@theme default inline {
+  --color-old-neutral-50: oklch(98.5% 0 0);
+  --color-old-neutral-100: oklch(97% 0 0);
+  --color-old-neutral-200: oklch(92.2% 0 0);
+  --color-old-neutral-300: oklch(87% 0 0);
+  --color-old-neutral-400: oklch(70.8% 0 0);
+  --color-old-neutral-500: oklch(55.6% 0 0);
+  --color-old-neutral-600: oklch(43.9% 0 0);
+  --color-old-neutral-700: oklch(37.1% 0 0);
+  --color-old-neutral-800: oklch(26.9% 0 0);
+  --color-old-neutral-900: oklch(20.5% 0 0);
+  --color-old-neutral-950: oklch(14.5% 0 0);
+  --color-primary-50: var(--ui-color-primary-50);
+	--color-primary-100: var(--ui-color-primary-100);
+	--color-primary-200: var(--ui-color-primary-200);
+	--color-primary-300: var(--ui-color-primary-300);
+	--color-primary-400: var(--ui-color-primary-400);
+	--color-primary-500: var(--ui-color-primary-500);
+	--color-primary-600: var(--ui-color-primary-600);
+	--color-primary-700: var(--ui-color-primary-700);
+	--color-primary-800: var(--ui-color-primary-800);
+	--color-primary-900: var(--ui-color-primary-900);
+	--color-primary-950: var(--ui-color-primary-950);
+	--color-secondary-50: var(--ui-color-secondary-50);
+	--color-secondary-100: var(--ui-color-secondary-100);
+	--color-secondary-200: var(--ui-color-secondary-200);
+	--color-secondary-300: var(--ui-color-secondary-300);
+	--color-secondary-400: var(--ui-color-secondary-400);
+	--color-secondary-500: var(--ui-color-secondary-500);
+	--color-secondary-600: var(--ui-color-secondary-600);
+	--color-secondary-700: var(--ui-color-secondary-700);
+	--color-secondary-800: var(--ui-color-secondary-800);
+	--color-secondary-900: var(--ui-color-secondary-900);
+	--color-secondary-950: var(--ui-color-secondary-950);
+	--color-success-50: var(--ui-color-success-50);
+	--color-success-100: var(--ui-color-success-100);
+	--color-success-200: var(--ui-color-success-200);
+	--color-success-300: var(--ui-color-success-300);
+	--color-success-400: var(--ui-color-success-400);
+	--color-success-500: var(--ui-color-success-500);
+	--color-success-600: var(--ui-color-success-600);
+	--color-success-700: var(--ui-color-success-700);
+	--color-success-800: var(--ui-color-success-800);
+	--color-success-900: var(--ui-color-success-900);
+	--color-success-950: var(--ui-color-success-950);
+	--color-info-50: var(--ui-color-info-50);
+	--color-info-100: var(--ui-color-info-100);
+	--color-info-200: var(--ui-color-info-200);
+	--color-info-300: var(--ui-color-info-300);
+	--color-info-400: var(--ui-color-info-400);
+	--color-info-500: var(--ui-color-info-500);
+	--color-info-600: var(--ui-color-info-600);
+	--color-info-700: var(--ui-color-info-700);
+	--color-info-800: var(--ui-color-info-800);
+	--color-info-900: var(--ui-color-info-900);
+	--color-info-950: var(--ui-color-info-950);
+	--color-warning-50: var(--ui-color-warning-50);
+	--color-warning-100: var(--ui-color-warning-100);
+	--color-warning-200: var(--ui-color-warning-200);
+	--color-warning-300: var(--ui-color-warning-300);
+	--color-warning-400: var(--ui-color-warning-400);
+	--color-warning-500: var(--ui-color-warning-500);
+	--color-warning-600: var(--ui-color-warning-600);
+	--color-warning-700: var(--ui-color-warning-700);
+	--color-warning-800: var(--ui-color-warning-800);
+	--color-warning-900: var(--ui-color-warning-900);
+	--color-warning-950: var(--ui-color-warning-950);
+	--color-error-50: var(--ui-color-error-50);
+	--color-error-100: var(--ui-color-error-100);
+	--color-error-200: var(--ui-color-error-200);
+	--color-error-300: var(--ui-color-error-300);
+	--color-error-400: var(--ui-color-error-400);
+	--color-error-500: var(--ui-color-error-500);
+	--color-error-600: var(--ui-color-error-600);
+	--color-error-700: var(--ui-color-error-700);
+	--color-error-800: var(--ui-color-error-800);
+	--color-error-900: var(--ui-color-error-900);
+	--color-error-950: var(--ui-color-error-950);
+	--color-neutral-50: var(--ui-color-neutral-50);
+	--color-neutral-100: var(--ui-color-neutral-100);
+	--color-neutral-200: var(--ui-color-neutral-200);
+	--color-neutral-300: var(--ui-color-neutral-300);
+	--color-neutral-400: var(--ui-color-neutral-400);
+	--color-neutral-500: var(--ui-color-neutral-500);
+	--color-neutral-600: var(--ui-color-neutral-600);
+	--color-neutral-700: var(--ui-color-neutral-700);
+	--color-neutral-800: var(--ui-color-neutral-800);
+	--color-neutral-900: var(--ui-color-neutral-900);
+	--color-neutral-950: var(--ui-color-neutral-950);
+  --color-primary: var(--ui-primary);
+	--color-secondary: var(--ui-secondary);
+	--color-success: var(--ui-success);
+	--color-info: var(--ui-info);
+	--color-warning: var(--ui-warning);
+	--color-error: var(--ui-error);
+  --radius-xs: calc(var(--ui-radius) * 0.5);
+  --radius-sm: var(--ui-radius);
+  --radius-md: calc(var(--ui-radius) * 1.5);
+  --radius-lg: calc(var(--ui-radius) * 2);
+  --radius-xl: calc(var(--ui-radius) * 3);
+  --radius-2xl: calc(var(--ui-radius) * 4);
+  --radius-3xl: calc(var(--ui-radius) * 6);
+  --text-color-dimmed: var(--ui-text-dimmed);
+  --text-color-muted: var(--ui-text-muted);
+  --text-color-toned: var(--ui-text-toned);
+  --text-color-default: var(--ui-text);
+  --text-color-highlighted: var(--ui-text-highlighted);
+  --text-color-inverted: var(--ui-text-inverted);
+  --background-color-default: var(--ui-bg);
+  --background-color-muted: var(--ui-bg-muted);
+  --background-color-elevated: var(--ui-bg-elevated);
+  --background-color-accented: var(--ui-bg-accented);
+  --background-color-inverted: var(--ui-bg-inverted);
+  --background-color-border: var(--ui-border);
+  --border-color-default: var(--ui-border);
+  --border-color-muted: var(--ui-border-muted);
+  --border-color-accented: var(--ui-border-accented);
+  --border-color-inverted: var(--ui-border-inverted);
+  --border-color-bg: var(--ui-bg);
+  --ring-color-default: var(--ui-border);
+  --ring-color-muted: var(--ui-border-muted);
+  --ring-color-accented: var(--ui-border-accented);
+  --ring-color-inverted: var(--ui-border-inverted);
+  --ring-color-bg: var(--ui-bg);
+  --ring-offset-color-default: var(--ui-border);
+  --ring-offset-color-muted: var(--ui-border-muted);
+  --ring-offset-color-accented: var(--ui-border-accented);
+  --ring-offset-color-inverted: var(--ui-border-inverted);
+  --ring-offset-color-bg: var(--ui-bg);
+  --divide-color-default: var(--ui-border);
+  --divide-color-muted: var(--ui-border-muted);
+  --divide-color-accented: var(--ui-border-accented);
+  --divide-color-inverted: var(--ui-border-inverted);
+  --divide-color-bg: var(--ui-bg);
+  --outline-color-default: var(--ui-border);
+  --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-default: var(--ui-border);
+  --stroke-inverted: var(--ui-border-inverted);
+  --fill-default: var(--ui-border);
+  --fill-inverted: var(--ui-border-inverted);
+}

package/features.ts

@@ -2,6 +2,7 @@ import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
 import { defu } from 'defu'
 import OpenProps from 'open-props'
+import tailwindcss from '@tailwindcss/vite'
 import { log } from './utils/consola'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
@@ -60,8 +61,13 @@ export function setFeatures() {
   // (excluded unless enabled)
 
   // ui
-  const uiPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_UI
-  if (uiPreset === 'nuxt-ui' || (!uiPreset && process.env.NUXT_PUBLIC_IGNIS_UI === 'true')) {
+  let uiPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_UI
+  if (uiPreset && !['nuxt-ui', 'tailwind'].includes(uiPreset)) {
+    // surpress other values
+    process.env.NUXT_PUBLIC_IGNIS_PRESET_UI = uiPreset = 'off'
+  }
+
+  if (uiPreset === 'nuxt-ui' || process.env.NUXT_PUBLIC_IGNIS_UI === 'true') {
     nuxtConfig.modules.push('@nuxt/ui')
     // import tailwind css file
     nuxtConfig = defu({
@@ -78,26 +84,31 @@ export function setFeatures() {
     }, nuxtConfig)
 
     // evaluate separate Tailwind CSS module
-    if (uiPreset === 'tailwind' || (!uiPreset && process.env.NUXT_PUBLIC_IGNIS_TAILWIND === 'true')) {
-      nuxtConfig.modules.push('@nuxtjs/tailwindcss')
+    if (uiPreset === 'tailwind' || (process.env.NUXT_PUBLIC_IGNIS_TAILWIND === 'true' && uiPreset !== 'nuxt-ui')) {
+      // nuxtConfig.modules.push('@nuxtjs/tailwindcss') // temporary disabled until v7 is released
+      extras.push('Tailwind CSS')
       // import tailwind css file
       nuxtConfig = defu({
         css: [join(currentDir, './assets/css/tailwind.css')],
+        vite: {
+          plugins: [tailwindcss()], // temporary integration using Vite plugin directly
+        },
       }, nuxtConfig)
     }
   }
-  // surpress other values
-  if (!uiPreset || !['nuxt-ui', 'tailwind'].includes(uiPreset)) {
-    process.env.NUXT_PUBLIC_IGNIS_PRESET_UI = 'off'
-  }
 
   // database
-  const dbPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_DB
-  if (dbPreset === 'neon' || (!dbPreset && process.env.NUXT_PUBLIC_IGNIS_NEON === 'true')) {
+  let dbPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_DB
+  if (dbPreset && !['neon', 'supabase'].includes(dbPreset)) {
+    // surpress other values
+    process.env.NUXT_PUBLIC_IGNIS_PRESET_DB = dbPreset = 'off'
+  }
+
+  if (dbPreset === 'neon' || process.env.NUXT_PUBLIC_IGNIS_NEON === 'true') {
     // module definition
     nuxtConfig.modules.push('nuxt-neon')
   }
-  if (dbPreset === 'supabase' || (!dbPreset && process.env.NUXT_PUBLIC_IGNIS_SUPABASE === 'true')) {
+  if (dbPreset === 'supabase' || process.env.NUXT_PUBLIC_IGNIS_SUPABASE === 'true') {
     // module definition
     nuxtConfig.modules.push('@nuxtjs/supabase')
     // module-specific config key
@@ -107,10 +118,6 @@ export function setFeatures() {
       },
     }, nuxtConfig)
   }
-  if (dbPreset && dbPreset !== 'neon' && dbPreset !== 'supabase') {
-    // surpress other values
-    process.env.NUXT_PUBLIC_IGNIS_PRESET_DB = 'off'
-  }
 
   // i18n
   if (process.env.NUXT_PUBLIC_IGNIS_I18N_ENABLED === 'true') {
@@ -135,11 +142,16 @@ export function setFeatures() {
   }
 
   // forms
-  const formsPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_FORMS
-  if (formsPreset === 'vueform' || (!formsPreset && process.env.NUXT_PUBLIC_IGNIS_VUEFORM === 'true')) {
+  let formsPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_FORMS
+  if (formsPreset && !['vueform', 'formkit'].includes(formsPreset)) {
+    // surpress other values
+    process.env.NUXT_PUBLIC_IGNIS_PRESET_FORMS = formsPreset = 'off'
+  }
+
+  if (formsPreset === 'vueform' || process.env.NUXT_PUBLIC_IGNIS_VUEFORM === 'true') {
     nuxtConfig.modules.push('@vueform/nuxt')
   }
-  if (formsPreset === 'formkit' || (!formsPreset && process.env.NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED === 'true')) {
+  if (formsPreset === 'formkit' || process.env.NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED === 'true') {
     // module definition
     nuxtConfig.modules.push('@formkit/nuxt')
     // module-specific config key
@@ -150,10 +162,6 @@ export function setFeatures() {
       },
     }, nuxtConfig)
   }
-  if (formsPreset && formsPreset !== 'vueform' && formsPreset !== 'formkit') {
-    // surpress other values
-    process.env.NUXT_PUBLIC_IGNIS_PRESET_FORMS = 'off'
-  }
 
   // seo
   // 2025/04 - must be before @nuxt/content (https://nuxtseo.com/docs/nuxt-seo/guides/nuxt-content)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ignis",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Enhanced and customizable Nuxt application starter pack",
   "keywords": [
     "nuxt",
@@ -40,6 +40,7 @@
     "@vueform/nuxt": "1.13.0",
     "@vueuse/core": "13.2.0",
     "@vueuse/nuxt": "13.2.0",
+    "@tailwindcss/vite": "4.1.7",
     "consola": "3.4.2",
     "defu": "6.1.4",
     "elrh-pslo": "1.1.6",

package/tailwind.config.ts

@@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin'
 module.exports = {
   content: [
     // include Nuxt Content files into array scanned by Tailwind CSS
-    '{srcDir}/content/**/*.{md,yml,json}',
+    'srcDir/content/**/*.{md,yml,json}',
   ],
   theme: {
     // example of extending Tailwind CSS with custom color