Merge branch 'v4' of https://github.com/primefaces/primevue into v4

assets/styles/primevue.css

@@ -1,3 +0,0 @@
-/**
- * The primevue[.min].css has been deprecated. In order not to break existing projects, it is currently included in the build as an empty file.
- */

build-meta.js

@@ -2,23 +2,25 @@ const fs = require('fs-extra');
 const path = require('path');
 
 function copyDependencies(inFolder, outFolder, subFolder) {
-    fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true })
+    fs.readdirSync(inFolder, { withFileTypes: true }).forEach((entry) => {
-        .filter((dir) => dir.isDirectory())
+        const fileName = entry.name;
-        .forEach(({ name: folderName }) => {
+        const sourcePath = path.join(inFolder, fileName);
-            fs.readdirSync(path.resolve(__dirname, inFolder + folderName)).forEach((file) => {
+        const destPath = path.join(outFolder, fileName);
-                if (file === 'package.json' || file.endsWith('d.ts') || file.endsWith('vue')) {
-                    fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file);
-                }
-            });
 
-            if (subFolder) {
+        if (entry.isDirectory()) {
-                try {
+            copyDependencies(sourcePath, destPath, subFolder);
-                    fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => {
+        } else {
-                        if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) {
+            if (fileName === 'package.json' || fileName.endsWith('d.ts') || fileName.endsWith('.vue')) {
-                            fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile);
+                if (subFolder && sourcePath.includes(subFolder)) {
+                    const subDestPath = path.join(outFolder, fileName.replace(subFolder, ''));
+
+                    fs.ensureDirSync(path.dirname(subDestPath));
+                    fs.copyFileSync(sourcePath, subDestPath);
+                } else {
+                    fs.ensureDirSync(path.dirname(destPath));
+                    fs.copyFileSync(sourcePath, destPath);
+                }
             }
-                    });
-                } catch {}
         }
     });
 }
@@ -26,6 +28,7 @@ function copyDependencies(inFolder, outFolder, subFolder) {
 copyDependencies('./components/lib/', 'dist/', '/style');
 copyDependencies('./components/lib/icons/', 'dist/icons/');
 copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');
+copyDependencies('./components/lib/themes/', 'dist/themes/');
 
 fs.copySync(path.resolve(__dirname, './components/lib/ts-helpers.d.ts'), 'dist/ts-helpers.d.ts');
 fs.copySync(path.resolve(__dirname, './README.md'), 'dist/README.md');

components/lib/themes/actions/index.js

@@ -0,0 +1,5 @@
+export { default as extendPreset } from './extendPreset';
+export { default as updatePreset } from './updatePreset';
+export { default as updatePrimary } from './updatePrimary';
+export { default as updateSurface } from './updateSurface';
+export { default as updateTheme } from './updateTheme';

components/lib/themes/actions/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/actions/updatePreset.js

@@ -1,8 +1,7 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
-const VARIABLE = Theme.defaults.variable;
-
 export default (preset) => {
+    const VARIABLE = Theme.defaults.variable;
     const newPreset = SharedUtils.object.mergeKeysByRegex(Theme.getPreset(), preset, VARIABLE.excludedKeyRegex);
 
     Theme.setPreset(newPreset);

components/lib/themes/actions/updatePrimary.js

@@ -0,0 +1,15 @@
+import Theme from 'primevue/themes';
+
+export default (primary) => {
+    const { primitive, semantic, components, directives } = Theme.getPreset();
+    const newPreset = {
+        primitive,
+        semantic: { ...semantic, primary },
+        components,
+        directives
+    };
+
+    Theme.setPreset(newPreset);
+
+    return newPreset;
+};

components/lib/themes/actions/updateSurface.js

@@ -0,0 +1,22 @@
+import Theme from 'primevue/themes';
+
+export default (surface) => {
+    const { primitive, semantic, components, directives } = Theme.getPreset();
+    const hasLightDark = surface?.hasOwnProperty('light') || surface?.hasOwnProperty('dark');
+    const newColorScheme = {
+        colorScheme: {
+            light: { ...semantic?.colorScheme?.light, ...{ surface: hasLightDark ? surface?.light : surface } },
+            dark: { ...semantic?.colorScheme?.dark, ...{ surface: hasLightDark ? surface?.dark : surface } }
+        }
+    };
+    const newPreset = {
+        primitive,
+        semantic: { ...semantic, ...newColorScheme },
+        components,
+        directives
+    };
+
+    Theme.setPreset(newPreset);
+
+    return newPreset;
+};

components/lib/themes/helpers/dt.js

@@ -1,7 +1,5 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
-const VARIABLE = Theme.defaults.variable;
-
 export const $dt = (tokenPath, type) => {
     const config = Theme.getPConfig();
 
@@ -10,6 +8,7 @@ export const $dt = (tokenPath, type) => {
 
 export const dt = (theme = {}, tokenPath, type) => {
     if (tokenPath) {
+        const VARIABLE = Theme.defaults.variable;
         const { prefix, transform } = theme?.options || {};
         const regex = /{([^}]*)}/g;
         const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`;

components/lib/themes/helpers/index.js

@@ -0,0 +1,3 @@
+export * from './color/index.js';
+export * from './dt';
+export { default as toVariables } from './toVariables';

components/lib/themes/helpers/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/helpers/toVariables.js

@@ -1,8 +1,7 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
-const VARIABLE = Theme.defaults.variable;
-
 export default function (theme, options = {}) {
+    const VARIABLE = Theme.defaults.variable;
     const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
 
     const _toVariables = (_theme, _prefix = '') => {

components/lib/themes/index.js

@@ -1,2 +1,5 @@
+export * from 'primevue/themes/actions';
 export { default } from 'primevue/themes/config';
-export * from './utils';
+export * from 'primevue/themes/helpers';
+export { default as ThemeService } from 'primevue/themes/service';
+export * from 'primevue/themes/utils';

components/lib/themes/primeone/base/calendar/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/base/global/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/base/index.js

@@ -84,8 +84,8 @@ import treeselect from 'primevue/themes/primeone/base/treeselect';
 import treetable from 'primevue/themes/primeone/base/treetable';
 
 export default {
-    components: {
     global,
+    components: {
         accordion,
         autocomplete,
         avatar,

components/lib/themes/primeone/presets/aura/avatar/index.js

@@ -2,7 +2,7 @@ export default {
     colorScheme: {
         light: {
             root: {
-                background: '{surface.200}',
+                background: '{surface.200}'
             },
             grouped: {
                 borderColor: '{surface.0}'
@@ -10,7 +10,7 @@ export default {
         },
         dark: {
             root: {
-                background: '{surface.700}',
+                background: '{surface.700}'
             },
             grouped: {
                 borderColor: '{surface.900}'

components/lib/themes/primeone/presets/aura/floatlabel/index.js

@@ -2,6 +2,6 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
-        invalidColor: '{form.field.float.label.invalid.color}',
+        invalidColor: '{form.field.float.label.invalid.color}'
     }
 };

components/lib/themes/service/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/utils/index.js

@@ -1,9 +1,2 @@
-export * from './color';
-export * from './dt';
-export { default as extendPreset } from './extendPreset';
-export { default as ThemeService } from './service';
 export { default as SharedUtils } from './sharedUtils';
 export { default as ThemeUtils } from './themeUtils';
-export { default as toVariables } from './toVariables';
-export { default as updatePreset } from './updatePreset';
-export { default as updateTheme } from './updateTheme';

components/lib/themes/utils/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/utils/themeUtils.js

@@ -56,18 +56,14 @@ export default {
             const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : '';
 
             primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
-            semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults)}${this._transformCSS(
+
-                name,
+            const semantic_light_css = this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
-                `${dark_css}color-scheme:dark`,
+            const semantic_dark_css = this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
-                'dark',
+
-                'variable',
+            semantic_css = `${semantic_light_css}${semantic_dark_css}`;
-                options,
-                set,
-                defaults
-            )}`;
         }
 
-        global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) });
+        global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) });
 
         return {
             primitive: primitive_css,

components/lib/togglebutton/ToggleButton.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type ToggleButtonPassThroughOptionType<T = any> = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions<T = any>) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
+export declare type ToggleButtonPassThroughOptionType<T = any> = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions<T>) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

layouts/AppConfigurator.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { palette, $dt, updatePreset, updateTheme } from 'primevue/themes';
+import { updatePrimary, updateSurface } from 'primevue/themes';
 
 export default {
     data() {
@@ -101,7 +101,10 @@ export default {
             document.startViewTransition(() => this.applyTheme(type, color));
         },
         applyTheme(type, color) {
-            updatePreset({
+            if (type === 'primary') updatePrimary(color.palette);
+            else if (type === 'surface') updateSurface(color.palette);
+
+            /*updatePreset({
                 semantic:
                     type === 'surface'
                         ? {
@@ -112,7 +115,7 @@ export default {
                               }
                           }
                         : { [type]: color.palette }
-            });
+            });*/
 
             /*for (const shade in color.palette) {
                 document.documentElement.style.setProperty(`--p-${type}-${shade}`, `${color.palette[shade]}`);

nuxt-vite.config.js

@@ -162,102 +162,54 @@ const ICON_ALIAS = {
     'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue')
 };
 
-const THEME_COMPONENTS = [
+// prettier-ignore
-    'accordion',
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable'];
-    'autocomplete',
+
-    'avatar',
+const createThemeAlias = (design, presets) => {
-    'badge',
+    const baseAlias = THEME_COMPONENTS.reduce((acc, name) => {
-    'blockui',
+        acc[`primevue/themes/${design}/base/${name}`] = path.resolve(__dirname, `./components/lib/themes/${design}/base/${name}/index.js`);
-    'breadcrumb',
+
-    'button',
+        return acc;
-    'calendar',
+    }, {});
-    'card',
+
-    'carousel',
+    const presetAlias = presets?.reduce((p_acc, p_name) => {
-    'cascadeselect',
+        const p_alias = THEME_COMPONENTS.reduce((acc, name) => {
-    'checkbox',
+            acc[`primevue/themes/${design}/presets/${p_name}/${name}`] = path.resolve(__dirname, `./components/lib/themes/${design}/presets/${p_name}/${name}/index.js`);
-    'chip',
+
-    'chips',
+            return acc;
-    'colorpicker',
+        }, {});
-    'confirmdialog',
+
-    'confirmpopup',
+        p_acc = { ...p_acc, ...p_alias };
-    'contextmenu',
+
-    'datatable',
+        return p_acc;
-    'dataview',
+    }, {});
-    'dialog',
+
-    'divider',
+    const otherAlias = presets?.reduce((p_acc, p_name) => {
-    'dock',
+        p_acc = {
-    'dropdown',
+            ...p_acc,
-    'editor',
+            [`primevue/themes/${design}/presets/${p_name}`]: path.resolve(__dirname, `./components/lib/themes/${design}/presets/${p_name}/index.js`),
-    'fieldset',
+            [`primevue/themes/${design}/${p_name}`]: path.resolve(__dirname, `./components/lib/themes/${design}/${p_name}/index.js`)
-    'fileupload',
+        };
-    'floatlabel',
+
-    'galleria',
+        return p_acc;
-    'iconfield',
+    }, {});
-    'image',
+
-    'inlinemessage',
+    const coreAlias = {
-    'inplace',
+        [`primevue/themes/${design}/base/global`]: path.resolve(__dirname, `./components/lib/themes/${design}/base/global/index.js`),
-    'inputgroup',
+        [`primevue/themes/${design}/base`]: path.resolve(__dirname, `./components/lib/themes/${design}/base/index.js`),
-    'inputnumber',
+        [`primevue/themes/${design}`]: path.resolve(__dirname, `./components/lib/themes/${design}/index.js`)
-    'inputotp',
+    };
-    'inputswitch',
+
-    'inputtext',
+    return { ...baseAlias, ...presetAlias, ...otherAlias, ...coreAlias };
-    'knob',
+};
-    'listbox',
+
-    'megamenu',
-    'menu',
-    'menubar',
-    'message',
-    'metergroup',
-    'multiselect',
-    'orderlist',
-    'organizationchart',
-    'overlaypanel',
-    'paginator',
-    'panel',
-    'panelmenu',
-    'password',
-    'picklist',
-    'progressbar',
-    'progressspinner',
-    'radiobutton',
-    'rating',
-    'scrollpanel',
-    'scrolltop',
-    'selectbutton',
-    'sidebar',
-    'skeleton',
-    'slider',
-    'speeddial',
-    'splitbutton',
-    'splitter',
-    'steps',
-    'stepper',
-    'tabmenu',
-    'tabview',
-    'tag',
-    'terminal',
-    'textarea',
-    'tieredmenu',
-    'timeline',
-    'toast',
-    'togglebutton',
-    'toolbar',
-    'tooltip',
-    'tree',
-    'treeselect',
-    'treetable'
-];
 const THEME_ALIAS = {
-    'primevue/themes/primeone/base/global': path.resolve(__dirname, './components/lib/themes/primeone/base/global.js'),
-    ...THEME_COMPONENTS.reduce((acc, name) => ((acc[`primevue/themes/primeone/presets/aura/${name}`] = path.resolve(__dirname, `./components/lib/themes/primeone/presets/aura/${name}/index.js`)), acc), {}),
-    ...THEME_COMPONENTS.reduce((acc, name) => ((acc[`primevue/themes/primeone/base/${name}`] = path.resolve(__dirname, `./components/lib/themes/primeone/base/${name}/index.js`)), acc), {}),
-    'primevue/themes/primeone/base': path.resolve(__dirname, './components/lib/themes/primeone/base/index.js'),
-    'primevue/themes/primeone/presets/aura': path.resolve(__dirname, './components/lib/themes/primeone/presets/aura/index.js'),
-    'primevue/themes/primeone/presets': path.resolve(__dirname, './components/lib/themes/primeone/presets/index.js'),
-    'primevue/themes/primeone/aura': path.resolve(__dirname, './components/lib/themes/primeone/aura/index.js'),
-    'primevue/themes/primeone': path.resolve(__dirname, './components/lib/themes/primeone/index.js'),
-    'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'),
     'primevue/themes/utils': path.resolve(__dirname, './components/lib/themes/utils/index.js'),
+    'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'),
+    'primevue/themes/service': path.resolve(__dirname, './components/lib/themes/service/index.js'),
+    'primevue/themes/helpers': path.resolve(__dirname, './components/lib/themes/helpers/index.js'),
+    'primevue/themes/actions': path.resolve(__dirname, './components/lib/themes/actions/index.js'),
+    ...createThemeAlias('primeone', ['aura']),
     'primevue/themes': path.resolve(__dirname, './components/lib/themes/index.js')
 };
 

rollup.config.js

@@ -173,6 +173,57 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/virtualscroller/style': 'primevue.virtualscroller.style'
 };
 
+// prettier-ignore
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable'];
+
+const createThemeDependencies = (design, presets) => {
+    const baseDeps = THEME_COMPONENTS.reduce((acc, name) => {
+        acc[`primevue/themes/${design}/base/${name}`] = `primevue.themes.${design}.base.${name}`;
+
+        return acc;
+    }, {});
+
+    const presetDeps = presets?.reduce((p_acc, p_name) => {
+        const p_alias = THEME_COMPONENTS.reduce((acc, name) => {
+            acc[`primevue/themes/${design}/presets/${p_name}/${name}`] = `primevue.themes.${design}.presets.${p_name}.${name}`;
+
+            return acc;
+        }, {});
+
+        p_acc = { ...p_acc, ...p_alias };
+
+        return p_acc;
+    }, {});
+
+    const otherDeps = presets?.reduce((p_acc, p_name) => {
+        p_acc = {
+            ...p_acc,
+            [`primevue/themes/${design}/presets/${p_name}`]: `primevue.themes.${design}.presets.${p_name}`,
+            [`primevue/themes/${design}/${p_name}`]: `primevue.themes.${design}.${p_name}`
+        };
+
+        return p_acc;
+    }, {});
+
+    const coreDeps = {
+        [`primevue/themes/${design}/base/global`]: `primevue.themes.${design}.base.global`,
+        [`primevue/themes/${design}/base`]: `primevue.themes.${design}.base`,
+        [`primevue/themes/${design}`]: `primevue.themes.${design}`
+    };
+
+    return { ...baseDeps, ...presetDeps, ...otherDeps, ...coreDeps };
+};
+
+const CORE_THEME_DEPENDENCIES = {
+    ...createThemeDependencies('primeone', ['aura']),
+    'primevue/themes/actions': 'primevue.themes.actions',
+    'primevue/themes/config': 'primevue.themes.config',
+    'primevue/themes/helpers': 'primevue.themes.helpers',
+    'primevue/themes/service': 'primevue.themes.service',
+    'primevue/themes/utils': 'primevue.themes.utils',
+    'primevue/themes': 'primevue.themes'
+};
+
 const CORE_DEPENDENCIES = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
@@ -212,7 +263,8 @@ const CORE_DEPENDENCIES = {
     'primevue/badge': 'primevue.badge',
     'primevue/listbox': 'primevue.listbox',
     'primevue/togglebutton': 'primevue.togglebutton',
-    ...CORE_PASSTHROUGH_DEPENDENCIES
+    ...CORE_PASSTHROUGH_DEPENDENCIES,
+    ...CORE_THEME_DEPENDENCIES
 };
 
 // dependencies
@@ -405,6 +457,36 @@ function addStyle() {
         });
 }
 
+function traverseDir(dir, condition, callback) {
+    try {
+        const files = fs.readdirSync(dir);
+
+        files.forEach((file) => {
+            const filePath = path.join(dir, file);
+            const fileStat = fs.statSync(filePath);
+
+            if (fileStat.isDirectory()) {
+                traverseDir(filePath, condition, callback);
+            } else if (condition?.(file) && fileStat.isFile()) {
+                callback?.(file, filePath, dir);
+            }
+        });
+    } catch {}
+}
+
+function addThemes() {
+    traverseDir(
+        path.resolve(__dirname, './components/lib/themes'),
+        (file) => file === 'index.js',
+        (file, filePath, folderPath) => {
+            const searchFolder = '/components/lib/';
+            const fpath = folderPath.substring(folderPath.indexOf(searchFolder) + searchFolder.length);
+
+            addEntry(fpath, file, 'index');
+        }
+    );
+}
+
 function addDirectives() {
     addEntry('basedirective', 'BaseDirective.js', 'basedirective');
     addEntry('badgedirective', 'BadgeDirective.js', 'badgedirective');
@@ -421,7 +503,6 @@ function addConfig() {
 
 function addPassThrough() {
     addEntry('passthrough', 'index.js', 'index');
-    addEntry('passthrough/tailwind', 'index.js', 'index');
 }
 
 function addUtils() {
@@ -499,6 +580,7 @@ function addPackageJson() {
 
 addUtils();
 addStyle();
+addThemes();
 addBase();
 addApi();
 addConfig();