chore(themes): update paths for generated theme files

Author: brandyscarney

.gitignore

@@ -23,6 +23,7 @@ temp/
 core/theme-builder/
 core/test-components/
 core/css/
+core/themes/
 $RECYCLE.BIN/
 
 .DS_Store

core/package.json

@@ -76,12 +76,12 @@
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && npm run build.newTokens && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.css && npm run build.themes && stencil build --es5 --docs-json dist/docs.json",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "build.tokens": "npx build.tokens --config scripts/tokens/index.mjs && npm run prettier.tokens",
-    "build.newTokens": "esbuild src/themes/*/*.tokens.ts --bundle --format=esm --platform=browser --target=es2017 --outdir=dist/themes --outbase=src/themes && esbuild src/utils/theme.ts --bundle --format=esm --platform=browser --target=es2017 --outfile=dist/themes/utils/theme.js",
+    "build.themes": "esbuild src/themes/*/*.tokens.ts --bundle --format=esm --platform=browser --target=es2017 --outdir=themes --outbase=src/themes && esbuild src/utils/theme.ts --bundle --format=esm --platform=browser --target=es2017 --outfile=themes/utils/theme.js",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",
@@ -95,7 +95,7 @@
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"",
     "prettier.tokens": "prettier \"./src/foundations/*.{scss, html}\" --write --cache",
-    "start": "npm run build.css && npm run build.newTokens && stencil build --dev --watch --serve",
+    "start": "npm run build.css && npm run build.themes && stencil build --dev --watch --serve",
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
     "test.e2e": "npx playwright test",

core/scripts/clean.js

@@ -4,7 +4,8 @@ const path = require('path');
 
 const cleanDirs = [
   'dist',
-  'css'
+  'css',
+  'themes'
 ];
 
 cleanDirs.forEach(dir => {

core/scripts/testing/scripts.js

@@ -60,32 +60,9 @@
 
   async function loadThemeTokens(themeName, paletteName) {
     try {
-      // Try multiple import paths to ensure compatibility across environments
-      let defaultTokens;
-      let theme;
-
-      // Get the base URL from the current location
-      const baseUrl = window.location.origin;
-
-      // First try the base URL path
-      try {
-        defaultTokens = await import(`${baseUrl}/dist/themes/${themeName}/default.tokens.js`);
-        theme = defaultTokens.defaultTheme;
-      } catch (baseUrlError) {
-        // Try relative dist path
-        try {
-          defaultTokens = await import(`../../../../../dist/themes/${themeName}/default.tokens.js`);
-          theme = defaultTokens.defaultTheme;
-        } catch (relativeDistError) {
-          // Try absolute dist path
-          try {
-            defaultTokens = await import(`/dist/themes/${themeName}/default.tokens.js`);
-            theme = defaultTokens.defaultTheme;
-          } catch (absoluteDistError) {
-            // All import attempts failed
-          }
-        }
-      }
+      // Load theme tokens
+      const defaultTokens = await import(`/themes/${themeName}/default.tokens.js`);
+      let theme = defaultTokens.defaultTheme;
 
       // If a specific palette is requested, modify the palette structure
       // to set the enabled property to 'always'
@@ -98,26 +75,13 @@
       window.Ionic.config = window.Ionic.config || {};
       window.Ionic.config.customTheme = theme;
 
-      // Re-apply the global theme with multiple fallback paths
+      // Re-apply the global theme
       if (window.Ionic.config.get && window.Ionic.config.set) {
-        const themeUtilsPaths = [
-          `${baseUrl}/dist/themes/utils/theme.js`,
-          '../../../../../dist/themes/utils/theme.js',
-          '/dist/themes/utils/theme.js'
-        ];
-
-        for (const path of themeUtilsPaths) {
-          try {
-            const themeModule = await import(path);
-            themeModule.applyGlobalTheme(theme);
-            break;
-          } catch (error) {
-            // Continue to next path
-          }
-        }
+        const themeModule = await import('/themes/utils/theme.js');
+        themeModule.applyGlobalTheme(theme);
       }
     } catch (error) {
-      console.warn(`Failed to load theme tokens for ${themeName}:`, error);
+      console.error(`Failed to load theme tokens for ${themeName}:`, error);
     }
   }