feat(themes): add ionic theme tokens

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/themes core/hydrate core/loader core/src/components.d.ts

.github/workflows/actions/build-core/action.yml

@@ -33,4 +33,4 @@ runs:
         output: core/CoreBuild.zip
         # Include generated proxy files from Stencil output targets so
         # framework builds can detect when they need to be updated
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts
+        paths: core/dist core/components core/src/foundations core/css core/themes core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts

.gitignore

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

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.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.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",
@@ -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.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

@@ -1,3 +1,4 @@
+const DEFAULT_THEME = 'md';
 
 (function() {
 
@@ -15,28 +16,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 themeQuery = window.location.search.match(/ionic:theme=([a-z0-9]+)/i);
   const themeAttr = document.documentElement.getAttribute('theme');
+  const themeName = themeQuery?.[1] || themeAttr || DEFAULT_THEME;
 
+  // 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 +42,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 if the theme is valid
+  const validThemes = ['ionic', 'ios', 'md'];
+  if (themeName && validThemes.includes(themeName)) {
+    loadThemeTokens(themeName, paletteName);
+  } else if(themeName) {
+    console.warn(
+      `Unsupported theme "${themeName}". Supported themes are: ${validThemes.join(', ')}. Defaulting to ${DEFAULT_THEME}.`
+    );
+  }
+
+  async function loadThemeTokens(themeName, paletteName) {
+    try {
+      // Load the default tokens for the theme
+      const defaultTokens = await import(`/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) {
+        const themeModule = await import('/themes/utils/theme.js');
+        themeModule.applyGlobalTheme(theme);
+      }
+    } catch (error) {
+      console.error(`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')) {