feat(themes): add ionic theme tokens

core/package.json

@@ -76,11 +76,12 @@
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.css && npm run build.newTokens && 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=www/themes --outbase=src/themes && esbuild src/utils/theme.ts --bundle --format=esm --platform=browser --target=es2017 --outfile=www/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",
@@ -94,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 && stencil build --dev --watch --serve",
+    "start": "npm run build.css && npm run build.newTokens && 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/testing/scripts.js

@@ -15,28 +15,15 @@
   }
 
   /**
-   * The term `palette` is used to as a param to match the
-   * Ionic docs, plus here is already a `ionic:theme` query being
-   * used for `md`, `ios`, and `ionic` themes.
-   */
-  const palette = window.location.search.match(/palette=([a-z]+)/);
-  if (palette && palette[1] !== 'light') {
-    const linkTag = document.createElement('link');
-    linkTag.setAttribute('rel', 'stylesheet');
-    linkTag.setAttribute('type', 'text/css');
-    linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
-    document.head.appendChild(linkTag);
-  }
-
-  /**
-  * The `ionic` theme uses a different stylesheet than the `iOS` and `md` themes.
-  * This is to ensure that the `ionic` theme is loaded when the `ionic:theme=ionic`
-  * or when the HTML tag has the `theme="ionic"` attribute. This is useful for
-  * the snapshot tests, where the `ionic` theme is not loaded by default.
+  * The `theme` query param is used to load a specific theme.
+  * This can be `ionic`, `ios`, or `md`. Default to `md` for tests.
   */
   const themeQuery = window.location.search.match(/ionic:theme=([a-z]+)/);
   const themeAttr = document.documentElement.getAttribute('theme');
+  const themeName = themeQuery?.[1] || themeAttr || 'md';
 
+  // TODO(): Remove this when the tokens are working for all components
+  // and the themes all use the same bundle
   if ((themeQuery && themeQuery[1] === 'ionic') || themeAttr === 'ionic') {
     const ionicThemeLinkTag = document.querySelector('link[href*="css/ionic/bundle.ionic.css"]');
 
@@ -54,6 +41,51 @@
     }
   }
 
+  /**
+   * The `palette` query param is used to load a specific palette
+   * for the theme. This can be `light`, `dark`, `high-contrast`,
+   * or `high-contrast-dark`. Default to `light` for tests.
+   */
+  const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
+  const paletteName = paletteQuery?.[1] || 'light';
+
+  // Load theme tokens dynamically instead of stylesheets
+  if (themeName && ['ionic', 'ios', 'md'].includes(themeName)) {
+    loadThemeTokens(themeName, paletteName);
+  }
+
+  async function loadThemeTokens(themeName, paletteName) {
+    try {
+      // Dynamically import the theme tokens
+      const defaultTokens = await import(`/www/themes/${themeName}/default.tokens.js`);
+      const theme = defaultTokens.defaultTheme;
+
+      // If a specific palette is requested, modify the palette structure
+      // to set the enabled property to 'always'
+      if (paletteName === 'dark' && theme.palette?.dark) {
+        theme.palette.dark.enabled = 'always';
+      }
+
+      // Apply the theme tokens to Ionic config
+      window.Ionic = window.Ionic || {};
+      window.Ionic.config = window.Ionic.config || {};
+      window.Ionic.config.customTheme = theme;
+
+      // Re-apply the global theme
+      if (window.Ionic.config.get && window.Ionic.config.set) {
+        import('/www/themes/utils/theme.js').then(themeModule => {
+          themeModule.applyGlobalTheme(theme);
+        }).catch(() => {
+          console.info('Could not reapply theme - theme module not found');
+        });
+      }
+
+      console.info(`Loaded ${themeName} theme with palette ${paletteName}:`, theme);
+    } catch (error) {
+      console.info(`Failed to load theme tokens for ${themeName}:`, error);
+    }
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 

core/src/components/accordion-group/test/expand/accordion-group.e2e.ts

@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group>
@@ -47,8 +47,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first">
@@ -87,8 +87,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group expand="inset">
@@ -125,8 +125,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first" expand="inset">

core/src/components/accordion-group/test/shape/accordion-group.e2e.ts

@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #222;
+            .ionic {
+              --ion-background-color: #222;
             }
           </style>
 

core/src/components/accordion/test/shape/accordion.e2e.ts

@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #222;
+            .ionic {
+              --ion-background-color: #222;
             }
           </style>
 

core/src/components/progress-bar/test/shape/progress-bar.e2e.ts

@@ -7,8 +7,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
       await page.setContent(
         `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
 
             .container {
@@ -32,8 +32,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
       await page.setContent(
         `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
 
             .container {

core/src/components/searchbar/test/shape/searchbar.e2e.ts

@@ -13,8 +13,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #000;
+            .ionic {
+              --ion-background-color: #000;
             }
           </style>
 

core/src/components/tab-bar/test/basic/tab-bar.e2e.ts

@@ -10,8 +10,8 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf
       await page.setContent(
         `
         <style>
-          :root {
-            --background: #ccc7c7;
+          .ionic {
+            --ion-background-color: #ccc7c7;
           }
         </style>
 

core/src/components/tab-bar/test/shape/tab-bar.e2e.ts

@@ -12,8 +12,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
 
@@ -22,12 +22,12 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="2">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="3">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
@@ -48,8 +48,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
 
@@ -58,12 +58,12 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="2">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="3">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
@@ -84,8 +84,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
 
@@ -94,12 +94,12 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="2">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="3">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>

core/src/global/ionic-global.ts

@@ -4,7 +4,6 @@ import { applyGlobalTheme, getCustomTheme } from '@utils/theme';
 
 import type { IonicConfig, Mode, Theme } from '../interface';
 import { defaultTheme as baseTheme } from '../themes/base/default.tokens';
-import { defaultTheme as ionicTheme } from '../themes/ionic/default.tokens';
 import type { BaseTheme } from '../themes/themes.interfaces';
 import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
 import { isPlatform, setupPlatforms } from '../utils/platform';
@@ -156,11 +155,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
     config.set('customTheme', combinedTheme);
   } else {
     applyGlobalTheme(baseTheme);
-  }
-
-  // TODO(): remove this when we update the ionic theme
-  if (defaultTheme === 'ionic') {
-    applyGlobalTheme(ionicTheme);
+    config.set('customTheme', baseTheme);
   }
 
   if (config.getBoolean('_testing')) {