diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index e336d995c3..295303dbd1 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -56,6 +56,7 @@ html.ios.ios {
 html.ionic,
 html.ionic.ios,
 html.ionic.md {
+  /* TODO: remove this with the ionic theme updates */
   --ion-background-color: var(--background);
   --ion-font-family: initial;
 }
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png
index c08d444771..20593189e8 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png
index cdaceec423..b134999aaf 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png
index 268328bb89..8789193984 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png
index 670ee27908..0210455351 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png
index c3e73112e6..5cce0bb699 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png
index dc62d93eef..b127905584 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png
index 754a18bf79..64295791ae 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png
index d72ae7a677..c65f80334d 100644
Binary files a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Firefox-linux.png
index d8fd77a744..17dc865799 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png
index d8fd77a744..17dc865799 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png
index 0e0aa9cbf0..b4d9c4f07a 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png
index 9e820d4224..4c02c43db3 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png
index a661ee1c11..c8939a3163 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png
index 3c47929e54..8282467f29 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png
index 2f544ff2cf..3fc0f0b6ec 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png
index 0f6fcaa3d6..5019daa80c 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png
index b1c49bd542..9c566abce9 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png
index 7e75b1985e..1c7457bc42 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png
index 6040139a97..042ae84cca 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png
index 8f4cf8a10b..c9432eed00 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png
index 9f980071ba..dd828dc199 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png
index e14723864b..dff04b6d3b 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png
index 9b741bdb0e..fc04d6dc84 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png
index 23a75b0b92..dbd06f3842 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png
index ee262a07c3..212f963491 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png
index 8333d4ffef..f839e76a28 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png
index 26b1a4465f..991a9e00cf 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png
index e8a2e4e3ea..90602d8cfa 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 3d7a727592..5d1aa62b4b 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -4,24 +4,6 @@
 @import "../components/menu/menu.md.vars";
 @import "../components/modal/modal.native.vars";
 
-// Ionic Colors
-// --------------------------------------------------
-
-:root {
-  /**
-   * Set the theme colors from the
-   * `native.theme.default.scss` file.
-   */
-  @include set-theme-colors($colors);
-  @include generate-color-variables();
-
-  @each $color-name, $value in $colors {
-    .ion-color-#{$color-name} {
-      @include generate-color($color-name);
-    }
-  }
-}
-
 // Ionic Font Family
 // --------------------------------------------------
 
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index a81974eab6..5ceea8d614 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -4,19 +4,6 @@
 // --------------------------------------------------
 
 :root {
-  /**
-   * Set the theme colors from the
-   * `ionic.theme.default.scss` file.
-   */
-  @include globals.set-theme-colors(globals.$ionic-colors);
-  @include globals.generate-color-variables();
-
-  @each $color-name, $value in globals.$ionic-colors {
-    .ion-color-#{$color-name} {
-      @include globals.generate-color($color-name);
-    }
-  }
-
   /* Default background color of all components to default background surface token */
   --background: #{globals.$ion-bg-surface-default};
 }
diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss
index 1d154358b0..75e0611caf 100644
--- a/core/src/css/palettes/dark.scss
+++ b/core/src/css/palettes/dark.scss
@@ -86,6 +86,7 @@ $colors: (
       --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
       --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
       --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+      --ion-color-#{$color-name}-foreground: #{map.get($value, foreground)};
     }
   }
 }
diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss
index 2cfa316955..c39338396d 100644
--- a/core/src/css/palettes/high-contrast-dark.scss
+++ b/core/src/css/palettes/high-contrast-dark.scss
@@ -113,6 +113,7 @@ $lightest-text-color: $text-color;
       --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
       --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
       --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+      --ion-color-#{$color-name}-foreground: #{map.get($value, foreground)};
     }
   }
 }
diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss
index 882f3ba0e9..97153f3df5 100644
--- a/core/src/css/palettes/high-contrast.scss
+++ b/core/src/css/palettes/high-contrast.scss
@@ -136,6 +136,7 @@ $lightest-text-color: #888888;
       --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
       --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
       --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+      --ion-color-#{$color-name}-foreground: #{map.get($value, foreground)};
     }
   }
 }
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 95e788aeb5..507262f3a7 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -4,7 +4,8 @@ import { applyGlobalTheme, getCustomTheme } from '@utils/theme';
 
 import type { IonicConfig, Mode, Theme } from '../interface';
 import { defaultTheme as baseTheme } from '../themes/base/default.tokens';
-import type { Theme 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';
 
@@ -157,6 +158,11 @@ export const initialize = (userConfig: IonicConfig = {}) => {
     applyGlobalTheme(baseTheme);
   }
 
+  // TODO(): remove this when we update the ionic theme
+  if (defaultTheme === 'ionic') {
+    applyGlobalTheme(ionicTheme);
+  }
+
   if (config.getBoolean('_testing')) {
     config.set('animated', false);
   }
diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts
index e69de29bb2..0a18504415 100644
--- a/core/src/themes/base/dark.tokens.ts
+++ b/core/src/themes/base/dark.tokens.ts
@@ -0,0 +1,164 @@
+import { mix } from '../../utils/theme';
+import type { DarkTheme } from '../themes.interfaces';
+
+const colors = {
+  primary: '#4d8dff',
+  secondary: '#46b1ff',
+  tertiary: '#8482fb',
+  success: '#2dd55b',
+  warning: '#ffce31',
+  danger: '#f24c58',
+  light: '#222428',
+  medium: '#989aa2',
+  dark: '#f4f5f8',
+};
+
+export const darkTheme: DarkTheme = {
+  enabled: 'never',
+  color: {
+    primary: {
+      bold: {
+        base: colors.primary,
+        contrast: '#000',
+        foreground: mix(colors.primary, '#000', '4%'),
+        shade: mix(colors.primary, '#000', '4%'),
+        tint: mix(colors.primary, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.primary, '8%'),
+        contrast: colors.primary,
+        foreground: mix(colors.primary, '#000', '4%'),
+        shade: mix('#000', colors.primary, '4%'),
+        tint: mix('#000', colors.primary, '12%'),
+      },
+    },
+    secondary: {
+      bold: {
+        base: colors.secondary,
+        contrast: '#000',
+        foreground: mix(colors.secondary, '#000', '4%'),
+        shade: mix(colors.secondary, '#000', '4%'),
+        tint: mix(colors.secondary, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.secondary, '8%'),
+        contrast: colors.secondary,
+        foreground: mix(colors.secondary, '#000', '4%'),
+        shade: mix('#000', colors.secondary, '4%'),
+        tint: mix('#000', colors.secondary, '12%'),
+      },
+    },
+    tertiary: {
+      bold: {
+        base: colors.tertiary,
+        contrast: '#000',
+        foreground: mix(colors.tertiary, '#000', '4%'),
+        shade: mix(colors.tertiary, '#000', '4%'),
+        tint: mix(colors.tertiary, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.tertiary, '8%'),
+        contrast: colors.tertiary,
+        foreground: mix(colors.tertiary, '#000', '4%'),
+        shade: mix('#000', colors.tertiary, '4%'),
+        tint: mix('#000', colors.tertiary, '12%'),
+      },
+    },
+    success: {
+      bold: {
+        base: colors.success,
+        contrast: '#000',
+        foreground: mix(colors.success, '#000', '4%'),
+        shade: mix(colors.success, '#000', '4%'),
+        tint: mix(colors.success, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.success, '8%'),
+        contrast: colors.success,
+        foreground: mix(colors.success, '#000', '4%'),
+        shade: mix('#000', colors.success, '4%'),
+        tint: mix('#000', colors.success, '12%'),
+      },
+    },
+    warning: {
+      bold: {
+        base: colors.warning,
+        contrast: '#000',
+        foreground: mix(colors.warning, '#000', '4%'),
+        shade: mix(colors.warning, '#000', '4%'),
+        tint: mix(colors.warning, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.warning, '8%'),
+        contrast: colors.warning,
+        foreground: mix(colors.warning, '#000', '4%'),
+        shade: mix('#000', colors.warning, '4%'),
+        tint: mix('#000', colors.warning, '12%'),
+      },
+    },
+    danger: {
+      bold: {
+        base: colors.danger,
+        contrast: '#000',
+        foreground: mix(colors.danger, '#000', '4%'),
+        shade: mix(colors.danger, '#000', '4%'),
+        tint: mix(colors.danger, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.danger, '8%'),
+        contrast: colors.danger,
+        foreground: mix(colors.danger, '#000', '4%'),
+        shade: mix('#000', colors.danger, '4%'),
+        tint: mix('#000', colors.danger, '12%'),
+      },
+    },
+    light: {
+      bold: {
+        base: colors.light,
+        contrast: '#fff',
+        foreground: mix(colors.light, '#000', '4%'),
+        shade: mix(colors.light, '#000', '4%'),
+        tint: mix(colors.light, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.light, '8%'),
+        contrast: colors.light,
+        foreground: mix(colors.light, '#000', '4%'),
+        shade: mix('#000', colors.light, '4%'),
+        tint: mix('#000', colors.light, '12%'),
+      },
+    },
+    medium: {
+      bold: {
+        base: colors.medium,
+        contrast: '#000',
+        foreground: mix(colors.medium, '#000', '4%'),
+        shade: mix(colors.medium, '#000', '4%'),
+        tint: mix(colors.medium, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.medium, '8%'),
+        contrast: colors.medium,
+        foreground: mix(colors.medium, '#000', '4%'),
+        shade: mix('#000', colors.medium, '4%'),
+        tint: mix('#000', colors.medium, '12%'),
+      },
+    },
+    dark: {
+      bold: {
+        base: colors.dark,
+        contrast: '#000',
+        foreground: mix(colors.dark, '#000', '4%'),
+        shade: mix(colors.dark, '#000', '4%'),
+        tint: mix(colors.dark, '#fff', '12%'),
+      },
+      subtle: {
+        base: mix('#000', colors.dark, '8%'),
+        contrast: colors.dark,
+        foreground: mix(colors.dark, '#000', '4%'),
+        shade: mix('#000', colors.dark, '4%'),
+        tint: mix('#000', colors.dark, '12%'),
+      },
+    },
+  },
+};
diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts
index 7278514d48..e6009c9c4e 100644
--- a/core/src/themes/base/default.tokens.ts
+++ b/core/src/themes/base/default.tokens.ts
@@ -1,10 +1,100 @@
-export const defaultTheme = {
+import type { DefaultTheme } from '../themes.interfaces';
+
+import { darkTheme } from './dark.tokens';
+import { lightTheme } from './light.tokens';
+
+export const defaultTheme: DefaultTheme = {
   palette: {
-    light: {},
-    dark: {
-      enabled: 'system',
-    },
+    light: lightTheme,
+    dark: darkTheme,
+  },
+
+  spacing: {
+    none: '0',
+    xxs: '4px',
+    xs: '6px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    xxl: '32px',
+  },
+
+  scaling: {
+    0: '0',
+    100: '4px',
+    150: '6px',
+    200: '8px',
+    250: '10px',
+    300: '12px',
+    350: '14px',
+    400: '16px',
+    450: '18px',
+    500: '20px',
+    550: '22px',
+    600: '24px',
+    650: '26px',
+    700: '28px',
+    750: '30px',
+    800: '32px',
+    850: '34px',
+    900: '36px',
+  },
+
+  borderWidth: {
+    none: '0',
+    xxs: '1px',
+    xs: '2px',
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '10px',
+    xxl: '12px',
+  },
+
+  radii: {
+    none: '0',
+    xxs: '1px',
+    xs: '2px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    xxl: '32px',
+  },
+
+  dynamicFont: '-apple-system-body',
+
+  fontSize: {
+    root: '16px',
+    xxs: '10px',
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '18px',
+    xl: '20px',
+    xxl: '24px',
+  },
+
+  fontWeight: {
+    thin: '100',
+    extraLight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semiBold: '600',
+    bold: '700',
+    extraBold: '800',
+    black: '900',
+  },
+
+  lineHeight: {
+    xxs: '1',
+    xs: '1.2',
+    sm: '1.4',
+    md: '1.6',
+    lg: '1.8',
+    xl: '2',
+    xxl: '2.4',
   },
 };
-
-export type Theme = typeof defaultTheme;
diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts
index e69de29bb2..f584b3279c 100644
--- a/core/src/themes/base/light.tokens.ts
+++ b/core/src/themes/base/light.tokens.ts
@@ -0,0 +1,163 @@
+import { mix } from '../../utils/theme';
+import type { LightTheme } from '../themes.interfaces';
+
+const colors = {
+  primary: '#0054e9',
+  secondary: '#0163aa',
+  tertiary: '#6030ff',
+  success: '#2dd55b',
+  warning: '#ffc409',
+  danger: '#c5000f',
+  light: '#f4f5f8',
+  medium: '#636469',
+  dark: '#222428',
+};
+
+export const lightTheme: LightTheme = {
+  color: {
+    primary: {
+      bold: {
+        base: colors.primary,
+        contrast: '#fff',
+        foreground: mix(colors.primary, '#000', '12%'),
+        shade: mix(colors.primary, '#000', '12%'),
+        tint: mix(colors.primary, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.primary, '8%'),
+        contrast: colors.primary,
+        foreground: mix(colors.primary, '#000', '12%'),
+        shade: mix('#fff', colors.primary, '12%'),
+        tint: mix('#fff', colors.primary, '4%'),
+      },
+    },
+    secondary: {
+      bold: {
+        base: colors.secondary,
+        contrast: '#fff',
+        foreground: mix(colors.secondary, '#000', '12%'),
+        shade: mix(colors.secondary, '#000', '12%'),
+        tint: mix(colors.secondary, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.secondary, '8%'),
+        contrast: colors.secondary,
+        foreground: mix(colors.secondary, '#000', '12%'),
+        shade: mix('#fff', colors.secondary, '12%'),
+        tint: mix('#fff', colors.secondary, '4%'),
+      },
+    },
+    tertiary: {
+      bold: {
+        base: colors.tertiary,
+        contrast: '#fff',
+        foreground: mix(colors.tertiary, '#000', '12%'),
+        shade: mix(colors.tertiary, '#000', '12%'),
+        tint: mix(colors.tertiary, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.tertiary, '8%'),
+        contrast: colors.tertiary,
+        foreground: mix(colors.tertiary, '#000', '12%'),
+        shade: mix('#fff', colors.tertiary, '12%'),
+        tint: mix('#fff', colors.tertiary, '4%'),
+      },
+    },
+    success: {
+      bold: {
+        base: colors.success,
+        contrast: '#000',
+        foreground: mix(colors.success, '#000', '12%'),
+        shade: mix(colors.success, '#000', '12%'),
+        tint: mix(colors.success, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.success, '8%'),
+        contrast: colors.success,
+        foreground: mix(colors.success, '#000', '12%'),
+        shade: mix('#fff', colors.success, '12%'),
+        tint: mix('#fff', colors.success, '4%'),
+      },
+    },
+    warning: {
+      bold: {
+        base: colors.warning,
+        contrast: '#000',
+        foreground: mix(colors.warning, '#000', '12%'),
+        shade: mix(colors.warning, '#000', '12%'),
+        tint: mix(colors.warning, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.warning, '8%'),
+        contrast: colors.warning,
+        foreground: mix(colors.warning, '#000', '12%'),
+        shade: mix('#fff', colors.warning, '12%'),
+        tint: mix('#fff', colors.warning, '4%'),
+      },
+    },
+    danger: {
+      bold: {
+        base: colors.danger,
+        contrast: '#fff',
+        foreground: mix(colors.danger, '#000', '12%'),
+        shade: mix(colors.danger, '#000', '12%'),
+        tint: mix(colors.danger, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.danger, '8%'),
+        contrast: colors.danger,
+        foreground: mix(colors.danger, '#000', '12%'),
+        shade: mix('#fff', colors.danger, '12%'),
+        tint: mix('#fff', colors.danger, '4%'),
+      },
+    },
+    light: {
+      bold: {
+        base: colors.light,
+        contrast: '#000',
+        foreground: mix(colors.light, '#000', '12%'),
+        shade: mix(colors.light, '#000', '12%'),
+        tint: mix(colors.light, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.light, '8%'),
+        contrast: colors.light,
+        foreground: mix(colors.light, '#000', '12%'),
+        shade: mix('#fff', colors.light, '12%'),
+        tint: mix('#fff', colors.light, '4%'),
+      },
+    },
+    medium: {
+      bold: {
+        base: colors.medium,
+        contrast: '#fff',
+        foreground: mix(colors.medium, '#000', '12%'),
+        shade: mix(colors.medium, '#000', '12%'),
+        tint: mix(colors.medium, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.medium, '8%'),
+        contrast: colors.medium,
+        foreground: mix(colors.medium, '#000', '12%'),
+        shade: mix('#fff', colors.medium, '12%'),
+        tint: mix('#fff', colors.medium, '4%'),
+      },
+    },
+    dark: {
+      bold: {
+        base: colors.dark,
+        contrast: '#fff',
+        foreground: mix(colors.dark, '#000', '12%'),
+        shade: mix(colors.dark, '#000', '12%'),
+        tint: mix(colors.dark, '#fff', '10%'),
+      },
+      subtle: {
+        base: mix('#fff', colors.dark, '8%'),
+        contrast: colors.dark,
+        foreground: mix(colors.dark, '#000', '12%'),
+        shade: mix('#fff', colors.dark, '12%'),
+        tint: mix('#fff', colors.dark, '4%'),
+      },
+    },
+  },
+};
diff --git a/core/src/themes/functions.color.scss b/core/src/themes/functions.color.scss
index a48b8e18c0..e6f9ab60cc 100644
--- a/core/src/themes/functions.color.scss
+++ b/core/src/themes/functions.color.scss
@@ -1,11 +1,5 @@
 @use "sass:map";
 
-// Set the theme colors map to be used by the color functions
-// --------------------------------------------------------------------------------------------
-@mixin set-theme-colors($colorsMap) {
-  $theme-colors: $colorsMap !global;
-}
-
 // Gets the active color's css variable from a variation. Alpha is optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
@@ -25,50 +19,49 @@
 // Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
-// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
-// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
-// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+// ion-color(primary, base) => var(--ion-color-primary, var(--ion-color-primary-bold))
+// ion-color(primary, contrast) => var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast))
+// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.5)
+// ion-color(primary, base, null, true) => var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb))
+// ion-color(primary, base, null, null, true) => var(--ion-color-primary-subtle)
+// ion-color(primary, foreground, null, null, true) => var(--ion-color-primary-subtle-foreground)
 // --------------------------------------------------------------------------------------------
 @function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
-  @if not($theme-colors) {
-    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
-  }
-
-  $values: map.get($theme-colors, $name);
-  $values: map.get($values, if($subtle, subtle, bold));
-
-  $value: map.get($values, $variation);
-
-  // TODO(FW-6417): this can be removed when foreground is required
-  // Fallback to "base" variant when "foreground" variant is undefined
-  @if ($variation == foreground and $value == null) {
-    $variation: base;
-    $value: map.get($values, $variation);
-  }
-
-  // If the color requested is subtle we return `--ion-color-{color}-subtle-contrast`,
-  // otherwise we return `--ion-color-{color}-contrast`.
-  $variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
-
-  // If the variation being used is "base", we do not include the variant.
-  // If the color requested is subtle we return `--ion-color-{color}-subtle`,
-  // otherwise we return `--ion-color-{color}`.
-  @if ($variation == base) {
-    $variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
+  // Build base variable name
+  $base-variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
+  $variation-suffix: if($variation == base, "", "-#{$variation}");
+  $variable: "#{$base-variable}#{$variation-suffix}";
+
+  // Build fallback variable name (only for bold colors)
+  $fallback-variable: null;
+  @if (not $subtle) {
+    $fallback-base: "--ion-color-#{$name}-bold";
+    $fallback-variable: "#{$fallback-base}#{$variation-suffix}";
   }
 
+  // Handle alpha transparency
   @if ($alpha) {
-    $value: color-to-rgb-list($value);
+    $rgb-var: "#{$variable}-rgb";
+    $fallback-rgb: if($fallback-variable, "#{$fallback-variable}-rgb", null);
 
-    @return rgba(var(#{$variable}-rgb, $value), $alpha);
+    @if ($fallback-rgb) {
+      @return rgba(var(#{$rgb-var}, var(#{$fallback-rgb})), $alpha);
+    } @else {
+      @return rgba(var(#{$rgb-var}), $alpha);
+    }
   }
 
+  // Handle RGB variables
   @if ($rgb) {
-    $value: color-to-rgb-list($value);
-    $variable: #{$variable}-rgb;
+    $variable: "#{$variable}-rgb";
+    $fallback-variable: if($fallback-variable, "#{$fallback-variable}-rgb", null);
   }
 
-  @return var(#{$variable}, $value);
+  @if ($fallback-variable) {
+    @return var(#{$variable}, var(#{$fallback-variable}));
+  } @else {
+    @return var(#{$variable});
+  }
 }
 
 // Mixes a color with black to create its shade.
@@ -97,158 +90,3 @@
   }
   @return #{red($color)}, #{green($color)}, #{blue($color)};
 }
-
-// Generates color variants for the specified color based on the
-// colors map for whichever hue is passed (bold, subtle).
-// --------------------------------------------------------------------------------------------
-// Example usage (bold):
-// .ion-color-primary {
-//   @include generate-color-variants("primary");
-// }
-//
-// Example output (bold):
-// .ion-color-primary {
-//   --ion-color-base: var(--ion-color-primary-base, #105cef) !important;
-//   --ion-color-base-rgb: var(--ion-color-primary-base-rgb, 16, 92, 239) !important;
-//   --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
-//   --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
-//   --ion-color-shade: var(--ion-color-primary-shade, #0f54da) !important;
-//   --ion-color-tint: var(--ion-color-primary-tint, #94a5f4) !important;
-// }
-// --------------------------------------------------------------------------------------------
-// Example usage (subtle):
-// .ion-color-primary {
-//   @include generate-color-variants("primary", "subtle")
-// }
-//
-// Example output (subtle):
-// .ion-color-primary {
-//   --ion-color-subtle-base: var(--ion-color-primary-subtle-base, #f2f4fd) !important;
-//   --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-base-rgb, 242, 244, 253) !important;
-//   --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast, #105cef) !important;
-//   --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb, 16, 92, 239) !important;
-//   --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade, #d0d7fa) !important;
-//   --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint, #e9ecfc) !important;
-// }
-// --------------------------------------------------------------------------------------------
-@mixin generate-color-variants($color-name, $hue: "bold") {
-  @if not($theme-colors) {
-    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
-  }
-
-  // Grab the different hue color maps for the
-  // specified color and then grab the map of color variants
-  $hue-colors: map.get($theme-colors, $color-name);
-  $color-variants: map.get($hue-colors, $hue);
-
-  $prefix: if($hue == "subtle", "-subtle", "");
-
-  // TODO(FW-6417) this @if can be removed if we add subtle colors for ios and md
-  // Only proceed if the color variants exist
-  @if $color-variants {
-    // Grab the individual color variants
-    $base: map.get($color-variants, base);
-    $base-rgb: map.get($color-variants, base-rgb);
-    $contrast: map.get($color-variants, contrast);
-    $contrast-rgb: map.get($color-variants, contrast-rgb);
-    $shade: map.get($color-variants, shade);
-    $tint: map.get($color-variants, tint);
-    $foreground: map.get($color-variants, foreground);
-
-    // Generate CSS variables dynamically
-    --ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
-    --ion-color#{$prefix}-base-rgb: var(--ion-color-#{$color-name}#{$prefix}-rgb, #{$base-rgb}) !important;
-    --ion-color#{$prefix}-contrast: var(--ion-color-#{$color-name}#{$prefix}-contrast, #{$contrast}) !important;
-    --ion-color#{$prefix}-contrast-rgb: var(
-      --ion-color-#{$color-name}#{$prefix}-contrast-rgb,
-      #{$contrast-rgb}
-    ) !important;
-    --ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
-    --ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
-    // TODO(FW-6417): remove the fallback variable when the foreground variable is
-    // required by all palettes for all themes:
-    // --ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
-    --ion-color#{$prefix}-foreground: var(
-      --ion-color-#{$color-name}#{$prefix}-foreground,
-      var(--ion-color-#{$color-name}#{$prefix}, #{$foreground})
-    ) !important;
-  }
-}
-
-// Generates both bold and subtle color variables
-// for the specified color in the colors map.
-// --------------------------------------------------------------------------------------------
-@mixin generate-color($color-name) {
-  @include generate-color-variants($color-name);
-  @include generate-color-variants($color-name, "subtle");
-}
-
-// Generates color variables for all colors in the colors map for both hues (bold, subtle).
-// --------------------------------------------------------------------------------------------
-// Example usage:
-// :root {
-//   generate-color-variables()
-// }
-//
-// Example output:
-// :root {
-//   --ion-color-primary: #105cef;
-//   --ion-color-primary-rgb: 16, 92, 239;
-//   --ion-color-primary-contrast: #ffffff;
-//   --ion-color-primary-contrast-rgb: 255, 255, 255;
-//   --ion-color-primary-shade: #0f54da;
-//   --ion-color-primary-tint: #94a5f4;
-//   --ion-color-primary-foreground: #105cef;
-//   --ion-color-primary-subtle: #f2f4fd;
-//   --ion-color-primary-subtle-rgb: 242, 244, 253;
-//   --ion-color-primary-subtle-contrast: #105cef;
-//   --ion-color-primary-subtle-contrast-rgb: 16, 92, 239;
-//   --ion-color-primary-subtle-shade: #d0d7fa;
-//   --ion-color-primary-subtle-tint: #e9ecfc;
-//   --ion-color-primary-foreground: #105cef;
-//   ...
-//   --ion-color-dark: #292929;
-//   --ion-color-dark-rgb: 41, 41, 41;
-//   --ion-color-dark-contrast: #ffffff;
-//   --ion-color-dark-contrast-rgb: 255, 255, 255;
-//   --ion-color-dark-shade: #242424;
-//   --ion-color-dark-tint: #4e4e4e;
-//   --ion-color-dark-foreground: #242424;
-//   --ion-color-dark-subtle: #f5f5f5;
-//   --ion-color-dark-subtle-rgb: 245, 245, 245;
-//   --ion-color-dark-subtle-contrast: #292929;
-//   --ion-color-dark-subtle-contrast-rgb: 41, 41, 41;
-//   --ion-color-dark-subtle-shade: #e0e0e0;
-//   --ion-color-dark-subtle-tint: #efefef;
-//   --ion-color-dark-subtle-foreground: #242424;
-// }
-// --------------------------------------------------------------------------------------------
-@mixin generate-color-variables() {
-  @if not($theme-colors) {
-    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color().';
-  }
-
-  @each $color-name, $value in $theme-colors {
-    @each $hue in (bold, subtle) {
-      $colors: map.get($value, $hue);
-
-      @if $colors != null {
-        $prefix: if($hue == subtle, "-subtle", "");
-
-        --ion-color-#{$color-name}#{$prefix}: #{map.get($colors, base)};
-        --ion-color-#{$color-name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
-        --ion-color-#{$color-name}#{$prefix}-contrast: #{map.get($colors, contrast)};
-        --ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
-        --ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
-        --ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
-        // TODO(FW-6417): this "if" can be removed when foreground is defined for ios/md
-        // themes. It should not be added until we want foreground to be required for
-        // ios and md because this will be a breaking change, requiring users to add
-        // `--ion-color-{color}-foreground` in order to override the default colors
-        @if (map.get($colors, foreground)) {
-          --ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
-        }
-      }
-    }
-  }
-}
diff --git a/core/src/themes/ionic/dark.tokens.ts b/core/src/themes/ionic/dark.tokens.ts
index e69de29bb2..be0b93d494 100644
--- a/core/src/themes/ionic/dark.tokens.ts
+++ b/core/src/themes/ionic/dark.tokens.ts
@@ -0,0 +1,5 @@
+import type { DarkTheme } from '../themes.interfaces';
+
+export const darkTheme: DarkTheme = {
+  enabled: 'never',
+};
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index e69de29bb2..15df8d0c2c 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -0,0 +1,11 @@
+import type { DefaultTheme } from '../themes.interfaces';
+
+import { darkTheme } from './dark.tokens';
+import { lightTheme } from './light.tokens';
+
+export const defaultTheme: DefaultTheme = {
+  palette: {
+    light: lightTheme,
+    dark: darkTheme,
+  },
+};
diff --git a/core/src/themes/ionic/ionic.globals.scss b/core/src/themes/ionic/ionic.globals.scss
index 17d0169994..4b93206b68 100644
--- a/core/src/themes/ionic/ionic.globals.scss
+++ b/core/src/themes/ionic/ionic.globals.scss
@@ -16,4 +16,3 @@
 // Default Theme
 @use "./ionic.theme.default" as ionicTheme;
 @forward "./ionic.theme.default";
-@include color.set-theme-colors(ionicTheme.$ionic-colors);
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
index 267a128206..30e6ca36c1 100644
--- a/core/src/themes/ionic/ionic.theme.default.scss
+++ b/core/src/themes/ionic/ionic.theme.default.scss
@@ -7,206 +7,6 @@
 // between modes. This should only include variables
 // used to theme the application colors.
 
-// Default Ionic Colors
-// -------------------------------------------------------------------------------------------
-// Color map should provide
-// - bold: a map of the bold color variations
-// - subtle: a map of the subtle color variations
-//
-// Each hue color map should provide
-// - base: The main color used for backgrounds
-// - base-rgb: The base color in RGB format
-// - contrast: A color that ensures readable text on the base color
-// - contrast-rgb: The contrast color in RGB format
-// - shade: A darker variant of the base color, used for pressed/active states
-// - tint: A lighter variant of the base color, used for ?
-// - foreground: The main color used for text and foreground elements
-
-// TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
-// ios and md. This will allow us to have a single color map.
-$ionic-colors: (
-  primary: (
-    bold: (
-      base: globals.$ion-bg-primary-base-default,
-      base-rgb: globals.$ion-bg-primary-base-default-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-bg-primary-base-press,
-      tint: globals.$ion-semantics-primary-600,
-      foreground: globals.$ion-text-primary,
-    ),
-    subtle: (
-      base: globals.$ion-bg-primary-subtle-default,
-      base-rgb: globals.$ion-bg-primary-subtle-default-rgb,
-      contrast: globals.$ion-text-primary,
-      contrast-rgb: globals.$ion-text-primary-rgb,
-      shade: globals.$ion-bg-primary-subtle-press,
-      tint: globals.$ion-semantics-primary-200,
-      foreground: globals.$ion-text-primary,
-    ),
-  ),
-  secondary: (
-    bold: (
-      base: globals.$ion-bg-info-base-default,
-      base-rgb: globals.$ion-bg-info-base-default-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-bg-info-base-press,
-      tint: globals.$ion-semantics-info-700,
-      foreground: globals.$ion-text-info,
-    ),
-    subtle: (
-      base: globals.$ion-bg-info-subtle-default,
-      base-rgb: globals.$ion-bg-info-subtle-default-rgb,
-      contrast: globals.$ion-text-info,
-      contrast-rgb: globals.$ion-text-info-rgb,
-      shade: globals.$ion-bg-info-subtle-press,
-      tint: globals.$ion-semantics-info-200,
-      foreground: globals.$ion-text-info,
-    ),
-  ),
-  tertiary: (
-    bold: (
-      base: globals.$ion-primitives-violet-700,
-      base-rgb: globals.$ion-primitives-violet-700-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-primitives-violet-800,
-      tint: globals.$ion-primitives-violet-600,
-      foreground: globals.$ion-primitives-violet-700,
-    ),
-    subtle: (
-      base: globals.$ion-primitives-violet-100,
-      base-rgb: globals.$ion-primitives-violet-100-rgb,
-      contrast: globals.$ion-primitives-violet-700,
-      contrast-rgb: globals.$ion-primitives-violet-700-rgb,
-      shade: globals.$ion-primitives-violet-300,
-      tint: globals.$ion-primitives-violet-200,
-      foreground: globals.$ion-primitives-violet-700,
-    ),
-  ),
-  success: (
-    bold: (
-      base: globals.$ion-bg-success-base-default,
-      base-rgb: globals.$ion-bg-success-base-default-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-bg-success-base-press,
-      tint: globals.$ion-semantics-success-800,
-      foreground: globals.$ion-text-success,
-    ),
-    subtle: (
-      base: globals.$ion-bg-success-subtle-default,
-      base-rgb: globals.$ion-bg-success-subtle-default-rgb,
-      contrast: globals.$ion-text-success,
-      contrast-rgb: globals.$ion-text-success-rgb,
-      shade: globals.$ion-bg-success-subtle-press,
-      tint: globals.$ion-semantics-success-200,
-      foreground: globals.$ion-text-success,
-    ),
-  ),
-  warning: (
-    bold: (
-      base: globals.$ion-bg-warning-base-default,
-      base-rgb: globals.$ion-bg-warning-base-default-rgb,
-      contrast: globals.$ion-text-default,
-      contrast-rgb: globals.$ion-text-default-rgb,
-      shade: globals.$ion-bg-warning-base-press,
-      tint: globals.$ion-primitives-yellow-300,
-      foreground: globals.$ion-text-warning,
-    ),
-    subtle: (
-      base: globals.$ion-bg-warning-subtle-default,
-      base-rgb: globals.$ion-bg-warning-subtle-default-rgb,
-      contrast: globals.$ion-text-warning,
-      contrast-rgb: globals.$ion-text-warning-rgb,
-      shade: globals.$ion-bg-warning-subtle-press,
-      tint: globals.$ion-primitives-yellow-100,
-      foreground: globals.$ion-text-warning,
-    ),
-  ),
-  danger: (
-    bold: (
-      base: globals.$ion-bg-danger-base-default,
-      base-rgb: globals.$ion-bg-danger-base-default-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-bg-danger-base-press,
-      tint: globals.$ion-semantics-danger-700,
-      foreground: globals.$ion-text-danger,
-    ),
-    subtle: (
-      base: globals.$ion-bg-danger-subtle-default,
-      base-rgb: globals.$ion-bg-danger-subtle-default-rgb,
-      contrast: globals.$ion-text-danger,
-      contrast-rgb: globals.$ion-text-danger-rgb,
-      shade: globals.$ion-bg-danger-subtle-press,
-      tint: globals.$ion-semantics-danger-200,
-      foreground: globals.$ion-text-danger,
-    ),
-  ),
-  light: (
-    bold: (
-      base: globals.$ion-bg-neutral-base-default,
-      base-rgb: globals.$ion-bg-neutral-base-default-rgb,
-      contrast: globals.$ion-text-default,
-      contrast-rgb: globals.$ion-text-default-rgb,
-      shade: globals.$ion-primitives-neutral-600,
-      tint: globals.$ion-primitives-neutral-400,
-      foreground: globals.$ion-text-default,
-    ),
-    subtle: (
-      base: globals.$ion-bg-neutral-subtlest-default,
-      base-rgb: globals.$ion-bg-neutral-subtlest-default-rgb,
-      contrast: globals.$ion-text-default,
-      contrast-rgb: globals.$ion-text-default-rgb,
-      shade: globals.$ion-bg-neutral-subtlest-press,
-      tint: globals.$ion-primitives-neutral-100,
-      foreground: globals.$ion-text-default,
-    ),
-  ),
-  medium: (
-    bold: (
-      base: globals.$ion-bg-neutral-bold-default,
-      base-rgb: globals.$ion-bg-neutral-bold-default-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-bg-neutral-bold-press,
-      tint: globals.$ion-primitives-neutral-900,
-      foreground: globals.$ion-text-default,
-    ),
-    subtle: (
-      base: globals.$ion-bg-neutral-subtle-default,
-      base-rgb: globals.$ion-bg-neutral-subtle-default-rgb,
-      contrast: globals.$ion-text-subtlest,
-      contrast-rgb: globals.$ion-text-subtlest-rgb,
-      shade: globals.$ion-bg-neutral-subtle-press,
-      tint: globals.$ion-primitives-neutral-100,
-      foreground: globals.$ion-text-default,
-    ),
-  ),
-  dark: (
-    bold: (
-      base: globals.$ion-bg-neutral-boldest-default,
-      base-rgb: globals.$ion-bg-neutral-boldest-default-rgb,
-      contrast: globals.$ion-text-inverse,
-      contrast-rgb: globals.$ion-text-inverse-rgb,
-      shade: globals.$ion-bg-neutral-boldest-press,
-      tint: globals.$ion-primitives-neutral-1100,
-      foreground: globals.$ion-text-default,
-    ),
-    subtle: (
-      base: globals.$ion-bg-neutral-subtle-default,
-      base-rgb: globals.$ion-bg-neutral-subtle-default-rgb,
-      contrast: globals.$ion-text-subtle,
-      contrast-rgb: globals.$ion-text-subtle-rgb,
-      shade: globals.$ion-bg-neutral-subtle-press,
-      tint: globals.$ion-primitives-neutral-100,
-      foreground: globals.$ion-text-default,
-    ),
-  ),
-);
-
 // Ionic Tabs & Tab Bar
 // --------------------------------------------------
 
diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts
index e69de29bb2..2ef8696a57 100644
--- a/core/src/themes/ionic/light.tokens.ts
+++ b/core/src/themes/ionic/light.tokens.ts
@@ -0,0 +1,151 @@
+import type { LightTheme } from '../themes.interfaces';
+
+// TODO(): this should be removed when we update the ionic theme
+export const lightTheme: LightTheme = {
+  color: {
+    primary: {
+      bold: {
+        base: '#105cef', // $ion-bg-primary-base-default
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#0d4bc3', // $ion-bg-primary-base-press
+        tint: '#6986f2', // $ion-semantics-primary-600
+        foreground: '#0d4bc3', // $ion-text-primary
+      },
+      subtle: {
+        base: '#f2f4fd', // $ion-bg-primary-subtle-default
+        contrast: '#0d4bc3', // $ion-text-primary
+        shade: '#d0d7fa', // $ion-bg-primary-subtle-press
+        tint: '#e9ecfc', // $ion-semantics-primary-200
+        foreground: '#0d4bc3', // $ion-text-primary
+      },
+    },
+    secondary: {
+      bold: {
+        base: '#0d4bc3', // $ion-bg-info-base-default
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#09358a', // $ion-bg-info-base-press
+        tint: '#105cef', // $ion-semantics-info-700
+        foreground: '#0d4bc3', // $ion-text-info
+      },
+      subtle: {
+        base: '#f2f4fd', // $ion-bg-info-subtle-default
+        contrast: '#0d4bc3', // $ion-text-info
+        shade: '#d0d7fa', // $ion-bg-info-subtle-press
+        tint: '#e9ecfc', // $ion-semantics-info-200
+        foreground: '#0d4bc3', // $ion-text-info
+      },
+    },
+    tertiary: {
+      bold: {
+        base: '#7c20f2', // $ion-primitives-violet-700
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#711ddd', // $ion-primitives-violet-800
+        tint: '#9a6cf4', // $ion-primitives-violet-600
+        foreground: '#7c20f2', // $ion-primitives-violet-700
+      },
+      subtle: {
+        base: '#f5f2fe', // $ion-primitives-violet-100
+        contrast: '#7c20f2', // $ion-primitives-violet-700
+        shade: '#dcd1fb', // $ion-primitives-violet-300
+        tint: '#eee9fd', // $ion-primitives-violet-200
+        foreground: '#7c20f2', // $ion-primitives-violet-700
+      },
+    },
+    success: {
+      bold: {
+        base: '#126f23', // $ion-bg-success-base-default
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#093811', // $ion-bg-success-base-press
+        tint: '#178a2b', // $ion-semantics-success-800
+        foreground: '#126f23', // $ion-text-success
+      },
+      subtle: {
+        base: '#ebf9ec', // $ion-bg-success-subtle-default
+        contrast: '#126f23', // $ion-text-success
+        shade: '#b3ebb7', // $ion-bg-success-subtle-press
+        tint: '#dcf5de', // $ion-semantics-success-200
+        foreground: '#126f23', // $ion-text-success
+      },
+    },
+    warning: {
+      bold: {
+        base: '#ffd600', // $ion-bg-warning-base-default
+        contrast: '#242424', // $ion-text-default
+        shade: '#df9c00', // $ion-bg-warning-base-press
+        tint: '#ffebb1', // $ion-primitives-yellow-300
+        foreground: '#704b02', // $ion-text-warning
+      },
+      subtle: {
+        base: '#fff5db', // $ion-bg-warning-subtle-default
+        contrast: '#704b02', // $ion-text-warning
+        shade: '#ffe07b', // $ion-bg-warning-subtle-press
+        tint: '#fff9ea', // $ion-primitives-yellow-100
+        foreground: '#704b02', // $ion-text-warning
+      },
+    },
+    danger: {
+      bold: {
+        base: '#bf2222', // $ion-bg-danger-base-default
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#761515', // $ion-bg-danger-base-press
+        tint: '#e52929', // $ion-semantics-danger-700
+        foreground: '#991b1b', // $ion-text-danger
+      },
+      subtle: {
+        base: '#feeded', // $ion-bg-danger-subtle-default
+        contrast: '#991b1b', // $ion-text-danger
+        shade: '#fcc1c1', // $ion-bg-danger-subtle-press
+        tint: '#fde1e1', // $ion-semantics-danger-200
+        foreground: '#991b1b', // $ion-text-danger
+      },
+    },
+    light: {
+      bold: {
+        base: '#a2a2a2', // $ion-bg-neutral-base-default
+        contrast: '#242424', // $ion-text-default
+        shade: '#8c8c8c', // $ion-primitives-neutral-600
+        tint: '#d5d5d5', // $ion-primitives-neutral-400
+        foreground: '#242424', // $ion-text-default
+      },
+      subtle: {
+        base: '#ffffff', // $ion-bg-neutral-subtlest-default
+        contrast: '#242424', // $ion-text-default
+        shade: '#efefef', // $ion-bg-neutral-subtlest-press
+        tint: '#f5f5f5', // $ion-primitives-neutral-100
+        foreground: '#242424', // $ion-text-default
+      },
+    },
+    medium: {
+      bold: {
+        base: '#3b3b3b', // $ion-bg-neutral-bold-default
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#242424', // $ion-bg-neutral-bold-press
+        tint: '#4e4e4e', // $ion-primitives-neutral-900
+        foreground: '#242424', // $ion-text-default
+      },
+      subtle: {
+        base: '#efefef', // $ion-bg-neutral-subtle-default
+        contrast: '#626262', // $ion-text-subtlest
+        shade: '#d5d5d5', // $ion-bg-neutral-subtle-press
+        tint: '#f5f5f5', // $ion-primitives-neutral-100
+        foreground: '#242424', // $ion-text-default
+      },
+    },
+    dark: {
+      bold: {
+        base: '#242424', // $ion-bg-neutral-boldest-default
+        contrast: '#ffffff', // $ion-text-inverse
+        shade: '#111111', // $ion-bg-neutral-boldest-press
+        tint: '#292929', // $ion-primitives-neutral-1100
+        foreground: '#242424', // $ion-text-default
+      },
+      subtle: {
+        base: '#efefef', // $ion-bg-neutral-subtle-default
+        contrast: '#3b3b3b', // $ion-text-subtle
+        shade: '#d5d5d5', // $ion-bg-neutral-subtle-press
+        tint: '#f5f5f5', // $ion-primitives-neutral-100
+        foreground: '#242424', // $ion-text-default
+      },
+    },
+  },
+};
diff --git a/core/src/themes/ionic/test/colors/theme.e2e.ts b/core/src/themes/ionic/test/colors/theme.e2e.ts
index 662a9ef303..2adccbad0c 100644
--- a/core/src/themes/ionic/test/colors/theme.e2e.ts
+++ b/core/src/themes/ionic/test/colors/theme.e2e.ts
@@ -66,7 +66,8 @@ const styleTestHelpers = `
 configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
   const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 
-  test.describe(title('palette colors: bold'), () => {
+  // TODO: Re-enable this test once the colors have been finalized
+  test.describe.skip(title('palette colors: bold'), () => {
     test.beforeEach(({ skip }) => {
       skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
       skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
@@ -133,7 +134,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
     }
   });
 
-  test.describe(title('palette colors: subtle'), () => {
+  // TODO: Re-enable this test once the colors have been finalized
+  test.describe.skip(title('palette colors: subtle'), () => {
     test.beforeEach(({ skip }) => {
       skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
       skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
diff --git a/core/src/themes/native/native.globals.scss b/core/src/themes/native/native.globals.scss
index 264098e975..b87ed699bd 100644
--- a/core/src/themes/native/native.globals.scss
+++ b/core/src/themes/native/native.globals.scss
@@ -13,7 +13,6 @@
 
 // Default Theme
 @import "./native.theme.default";
-@include set-theme-colors($colors);
 
 // Default General
 // --------------------------------------------------
diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss
index 22edeb872f..db4819c8a9 100644
--- a/core/src/themes/native/native.theme.default.scss
+++ b/core/src/themes/native/native.theme.default.scss
@@ -4,119 +4,6 @@
 // between modes. This should only include variables
 // used to theme the application colors.
 
-// Default Ionic Colors
-// -------------------------------------------------------------------------------------------
-// Color map should provide
-// - base: The main color used for backgrounds
-// - base-rgb: The base color in RGB format
-// - contrast: A color that ensures readable text on the base color
-// - contrast-rgb: The contrast color in RGB format
-// - shade: 12% darker version of the base color (mix with black), used for pressed/active states
-// - tint: 10% lighter version of the base color (mix with white), used for focused/hover states
-
-$primary: #0054e9;
-$secondary: #0163aa;
-$tertiary: #6030ff;
-$success: #2dd55b;
-$warning: #ffc409;
-$danger: #c5000f;
-$light: #f4f5f8;
-$medium: #636469;
-$dark: #222428;
-
-$colors: (
-  primary: (
-    bold: (
-      base: $primary,
-      base-rgb: color-to-rgb-list($primary),
-      contrast: #fff,
-      contrast-rgb: color-to-rgb-list(#fff),
-      shade: get-color-shade($primary),
-      tint: get-color-tint($primary),
-    ),
-  ),
-  secondary: (
-    bold: (
-      base: $secondary,
-      base-rgb: color-to-rgb-list($secondary),
-      contrast: #fff,
-      contrast-rgb: color-to-rgb-list(#fff),
-      shade: get-color-shade($secondary),
-      tint: get-color-tint($secondary),
-    ),
-  ),
-  tertiary: (
-    bold: (
-      base: $tertiary,
-      base-rgb: color-to-rgb-list($tertiary),
-      contrast: #fff,
-      contrast-rgb: color-to-rgb-list(#fff),
-      shade: get-color-shade($tertiary),
-      tint: get-color-tint($tertiary),
-    ),
-  ),
-  success: (
-    bold: (
-      base: $success,
-      base-rgb: color-to-rgb-list($success),
-      contrast: #000,
-      contrast-rgb: color-to-rgb-list(#000),
-      shade: get-color-shade($success),
-      tint: get-color-tint($success),
-    ),
-  ),
-  warning: (
-    bold: (
-      base: $warning,
-      base-rgb: color-to-rgb-list($warning),
-      contrast: #000,
-      contrast-rgb: color-to-rgb-list(#000),
-      shade: get-color-shade($warning),
-      tint: get-color-tint($warning),
-    ),
-  ),
-  danger: (
-    bold: (
-      base: $danger,
-      base-rgb: color-to-rgb-list($danger),
-      contrast: #fff,
-      contrast-rgb: color-to-rgb-list(#fff),
-      shade: get-color-shade($danger),
-      tint: get-color-tint($danger),
-    ),
-  ),
-  light: (
-    bold: (
-      base: $light,
-      base-rgb: color-to-rgb-list($light),
-      contrast: #000,
-      contrast-rgb: color-to-rgb-list(#000),
-      shade: get-color-shade($light),
-      tint: get-color-tint($light),
-    ),
-  ),
-  medium: (
-    bold: (
-      base: $medium,
-      base-rgb: color-to-rgb-list($medium),
-      contrast: #fff,
-      contrast-rgb: color-to-rgb-list(#fff),
-      shade: get-color-shade($medium),
-      tint: get-color-tint($medium),
-    ),
-  ),
-  dark: (
-    bold: (
-      base: $dark,
-      base-rgb: color-to-rgb-list($dark),
-      contrast: #fff,
-      contrast-rgb: color-to-rgb-list(#fff),
-      shade: get-color-shade($dark),
-      tint: get-color-tint($dark),
-    ),
-  ),
-);
-
 // Default Foreground and Background Colors
 // -------------------------------------------------------------------------------------------
 // Used internally to calculate the default steps
diff --git a/core/src/themes/native/test/colors/index.html b/core/src/themes/native/test/colors/index.html
index aa535a56e4..7e3f8484f8 100644
--- a/core/src/themes/native/test/colors/index.html
+++ b/core/src/themes/native/test/colors/index.html
@@ -328,12 +328,10 @@
       });
 
       function togglePalette(palette) {
-        let cssFile = `/css/palettes/${palette}.always.css`;
-        if (palette === 'default') {
-          // TODO FW-5862 update this to not
-          // load a file when default is set. The light
-          // palette is automatically set when importing ionic.bundle.css
-          cssFile = `/src/themes/test/default.css`;
+        let cssFile = '';
+
+        if (palette === 'dark') {
+          cssFile = `/css/palettes/${palette}.always.css`;
         }
 
         var oldLink = document.getElementById('palette');
diff --git a/core/src/themes/native/test/colors/theme.e2e.ts b/core/src/themes/native/test/colors/theme.e2e.ts
index 10be53211c..46e11d1afe 100644
--- a/core/src/themes/native/test/colors/theme.e2e.ts
+++ b/core/src/themes/native/test/colors/theme.e2e.ts
@@ -230,36 +230,6 @@ configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-
 
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('colors: custom'), () => {
-    // TODO(): this test can be removed when foreground is a required variant
-    // for ios and md themes
-    test(`overriding secondary color without foreground variant should style text properly`, async ({ page }) => {
-      await page.setContent(
-        `${styleTestHelpers}
-
-        <style>
-          :root {
-            --ion-color-secondary: #ff6c52;
-            --ion-color-secondary-rgb: 255,108,82;
-            --ion-color-secondary-contrast: #000000;
-            --ion-color-secondary-contrast-rgb: 0,0,0;
-            --ion-color-secondary-shade: #e05f48;
-            --ion-color-secondary-tint: #ff7b63;
-          }
-        </style>
-
-        <main class="ion-color-secondary">
-          <p class="ion-color">Hello World</p>
-        </main>`,
-        config
-      );
-
-      const paragraph = await page.locator('p');
-      const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
-
-      // Ensure the color matches --ion-color-secondary
-      expect(color).toBe('rgb(255, 108, 82)');
-    });
-
     test(`overriding secondary color with foreground variant should style text properly`, async ({ page }) => {
       await page.setContent(
         `${styleTestHelpers}
diff --git a/core/src/themes/test/basic/index.html b/core/src/themes/test/basic/index.html
new file mode 100644
index 0000000000..81bfba8139
--- /dev/null
+++ b/core/src/themes/test/basic/index.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Themes - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <link id="palette" rel="stylesheet" />
+
+    <style>
+      .grid {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        margin: 40px 0;
+      }
+
+      .column {
+        min-width: 400px;
+      }
+
+      h2 {
+        margin: 0;
+      }
+
+      [class^='ion-scaling-'],
+      [class^='ion-spacing-'],
+      [class^='ion-radii-'],
+      [class^='ion-border-width-'] {
+        margin: 10px;
+      }
+
+      [class^='ion-scaling-'] {
+        background: #ededed;
+      }
+
+      [class^='ion-spacing-'] {
+        background: #e0ee99;
+      }
+
+      .spacing-inner {
+        background: #ededed;
+      }
+
+      [class^='ion-radii-'] {
+        border-width: 2px;
+      }
+
+      [class^='ion-radii-'],
+      [class^='ion-border-width-'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-style: solid;
+        border-color: #ddd;
+        height: 100px;
+        width: 100px;
+      }
+
+      /* Scaling */
+      .ion-scaling-0 {
+        height: var(--ion-scaling-0);
+      }
+      .ion-scaling-100 {
+        height: var(--ion-scaling-100);
+      }
+      .ion-scaling-150 {
+        height: var(--ion-scaling-150);
+      }
+      .ion-scaling-200 {
+        height: var(--ion-scaling-200);
+      }
+      .ion-scaling-250 {
+        height: var(--ion-scaling-250);
+      }
+      .ion-scaling-300 {
+        height: var(--ion-scaling-300);
+      }
+      .ion-scaling-350 {
+        height: var(--ion-scaling-350);
+      }
+      .ion-scaling-400 {
+        height: var(--ion-scaling-400);
+      }
+      .ion-scaling-450 {
+        height: var(--ion-scaling-450);
+      }
+      .ion-scaling-500 {
+        height: var(--ion-scaling-500);
+      }
+      .ion-scaling-550 {
+        height: var(--ion-scaling-550);
+      }
+      .ion-scaling-600 {
+        height: var(--ion-scaling-600);
+      }
+      .ion-scaling-650 {
+        height: var(--ion-scaling-650);
+      }
+      .ion-scaling-700 {
+        height: var(--ion-scaling-700);
+      }
+      .ion-scaling-750 {
+        height: var(--ion-scaling-750);
+      }
+      .ion-scaling-800 {
+        height: var(--ion-scaling-800);
+      }
+      .ion-scaling-850 {
+        height: var(--ion-scaling-850);
+      }
+      .ion-scaling-900 {
+        height: var(--ion-scaling-900);
+      }
+
+      /* Spacing */
+      .ion-spacing-none {
+        padding: var(--ion-spacing-none);
+      }
+      .ion-spacing-xxs {
+        padding: var(--ion-spacing-xxs);
+      }
+      .ion-spacing-xs {
+        padding: var(--ion-spacing-xs);
+      }
+      .ion-spacing-sm {
+        padding: var(--ion-spacing-sm);
+      }
+      .ion-spacing-md {
+        padding: var(--ion-spacing-md);
+      }
+      .ion-spacing-lg {
+        padding: var(--ion-spacing-lg);
+      }
+      .ion-spacing-xl {
+        padding: var(--ion-spacing-xl);
+      }
+      .ion-spacing-xxl {
+        padding: var(--ion-spacing-xxl);
+      }
+
+      /* Radii */
+      .ion-radii-none {
+        border-radius: var(--ion-radii-none);
+      }
+      .ion-radii-xxs {
+        border-radius: var(--ion-radii-xxs);
+      }
+      .ion-radii-xs {
+        border-radius: var(--ion-radii-xs);
+      }
+      .ion-radii-sm {
+        border-radius: var(--ion-radii-sm);
+      }
+      .ion-radii-md {
+        border-radius: var(--ion-radii-md);
+      }
+      .ion-radii-lg {
+        border-radius: var(--ion-radii-lg);
+      }
+      .ion-radii-xl {
+        border-radius: var(--ion-radii-xl);
+      }
+      .ion-radii-xxl {
+        border-radius: var(--ion-radii-xxl);
+      }
+
+      /* Border Width */
+      .ion-border-width-none {
+        border-width: var(--ion-border-width-none);
+      }
+      .ion-border-width-xxs {
+        border-width: var(--ion-border-width-xxs);
+      }
+      .ion-border-width-xs {
+        border-width: var(--ion-border-width-xs);
+      }
+      .ion-border-width-sm {
+        border-width: var(--ion-border-width-sm);
+      }
+      .ion-border-width-md {
+        border-width: var(--ion-border-width-md);
+      }
+      .ion-border-width-lg {
+        border-width: var(--ion-border-width-lg);
+      }
+      .ion-border-width-xl {
+        border-width: var(--ion-border-width-xl);
+      }
+      .ion-border-width-xxl {
+        border-width: var(--ion-border-width-xxl);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Themes - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-text-center">
+        <div class="grid">
+          <div class="column">
+            <h2>Scaling</h2>
+            <div class="ion-scaling-0"></div>
+            <div class="ion-scaling-100"></div>
+            <div class="ion-scaling-150"></div>
+            <div class="ion-scaling-200"></div>
+            <div class="ion-scaling-250"></div>
+            <div class="ion-scaling-300"></div>
+            <div class="ion-scaling-350"></div>
+            <div class="ion-scaling-400"></div>
+            <div class="ion-scaling-450"></div>
+            <div class="ion-scaling-500"></div>
+            <div class="ion-scaling-550"></div>
+            <div class="ion-scaling-600"></div>
+            <div class="ion-scaling-650"></div>
+            <div class="ion-scaling-700"></div>
+            <div class="ion-scaling-750"></div>
+            <div class="ion-scaling-800"></div>
+            <div class="ion-scaling-850"></div>
+            <div class="ion-scaling-900"></div>
+          </div>
+          <div class="column">
+            <h2>Spacing</h2>
+            <div class="ion-spacing-none">
+              <div class="spacing-inner">none</div>
+            </div>
+            <div class="ion-spacing-xxs">
+              <div class="spacing-inner">xxs</div>
+            </div>
+            <div class="ion-spacing-xs">
+              <div class="spacing-inner">xs</div>
+            </div>
+            <div class="ion-spacing-sm">
+              <div class="spacing-inner">sm</div>
+            </div>
+            <div class="ion-spacing-md">
+              <div class="spacing-inner">md</div>
+            </div>
+            <div class="ion-spacing-lg">
+              <div class="spacing-inner">lg</div>
+            </div>
+            <div class="ion-spacing-xl">
+              <div class="spacing-inner">xl</div>
+            </div>
+            <div class="ion-spacing-xxl">
+              <div class="spacing-inner">xxl</div>
+            </div>
+          </div>
+          <div class="column">
+            <h2>Radii</h2>
+            <div class="ion-radii-none">none</div>
+            <div class="ion-radii-xxs">xxs</div>
+            <div class="ion-radii-xs">xs</div>
+            <div class="ion-radii-sm">sm</div>
+            <div class="ion-radii-md">md</div>
+            <div class="ion-radii-lg">lg</div>
+            <div class="ion-radii-xl">xl</div>
+            <div class="ion-radii-xxl">xxl</div>
+          </div>
+          <div class="column">
+            <h2>Border Width</h2>
+            <div class="ion-border-width-none">none</div>
+            <div class="ion-border-width-xxs">xxs</div>
+            <div class="ion-border-width-xs">xs</div>
+            <div class="ion-border-width-sm">sm</div>
+            <div class="ion-border-width-md">md</div>
+            <div class="ion-border-width-lg">lg</div>
+            <div class="ion-border-width-xl">xl</div>
+            <div class="ion-border-width-xxl">xxl</div>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/themes/test/color/index.html b/core/src/themes/test/color/index.html
new file mode 100644
index 0000000000..fb18697829
--- /dev/null
+++ b/core/src/themes/test/color/index.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Themes - Color</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <link id="palette" rel="stylesheet" />
+
+    <style>
+      .grid {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        margin: 40px 0;
+      }
+
+      .column {
+        min-width: 400px;
+        max-width: 500px;
+      }
+
+      .row {
+        display: flex;
+        justify-content: center;
+        margin: 16px 10px;
+        gap: 10px;
+      }
+
+      h2 {
+        margin: 0;
+      }
+
+      .ion-color {
+        padding: 10px;
+        display: inline-block;
+        min-width: 80px;
+      }
+
+      /* Bold Colors */
+      .ion-color.ion-color-bold {
+        background: var(--ion-color-base);
+        color: var(--ion-color-contrast);
+      }
+
+      .ion-color.ion-color-bold.ion-color-foreground {
+        background: transparent;
+        color: var(--ion-color-foreground);
+      }
+
+      .ion-color.ion-color-bold.ion-color-shade {
+        background: var(--ion-color-shade);
+        color: var(--ion-color-contrast);
+      }
+
+      .ion-color.ion-color-bold.ion-color-tint {
+        background: var(--ion-color-tint);
+        color: var(--ion-color-contrast);
+      }
+
+      /* Subtle Colors */
+      .ion-color.ion-color-subtle {
+        background: var(--ion-color-subtle-base);
+        color: var(--ion-color-subtle-contrast);
+      }
+
+      .ion-color.ion-color-subtle.ion-color-foreground {
+        background: transparent;
+        color: var(--ion-color-subtle-foreground);
+      }
+
+      .ion-color.ion-color-subtle.ion-color-shade {
+        background: var(--ion-color-subtle-shade);
+        color: var(--ion-color-subtle-contrast);
+      }
+
+      .ion-color.ion-color-subtle.ion-color-tint {
+        background: var(--ion-color-subtle-tint);
+        color: var(--ion-color-subtle-contrast);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Themes - Color</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-text-center">
+        <div class="grid">
+          <div class="column">
+            <h2>Bold Colors</h2>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-primary">Base</span>
+              <span class="ion-color ion-color-bold ion-color-primary ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-primary ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-primary ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-secondary">Base</span>
+              <span class="ion-color ion-color-bold ion-color-secondary ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-secondary ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-secondary ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-tertiary">Base</span>
+              <span class="ion-color ion-color-bold ion-color-tertiary ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-tertiary ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-tertiary ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-success">Base</span>
+              <span class="ion-color ion-color-bold ion-color-success ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-success ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-success ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-warning">Base</span>
+              <span class="ion-color ion-color-bold ion-color-warning ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-warning ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-warning ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-danger">Base</span>
+              <span class="ion-color ion-color-bold ion-color-danger ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-danger ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-danger ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-light">Base</span>
+              <span class="ion-color ion-color-bold ion-color-light ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-light ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-light ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-medium">Base</span>
+              <span class="ion-color ion-color-bold ion-color-medium ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-medium ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-medium ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-bold ion-color-dark">Base</span>
+              <span class="ion-color ion-color-bold ion-color-dark ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-bold ion-color-dark ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-bold ion-color-dark ion-color-foreground">Foreground</span>
+            </div>
+          </div>
+
+          <div class="column">
+            <h2>Subtle Colors</h2>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-primary">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-primary ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-primary ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-primary ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-secondary">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-secondary ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-secondary ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-secondary ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-tertiary">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-tertiary ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-tertiary ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-tertiary ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-success">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-success ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-success ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-success ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-warning">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-warning ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-warning ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-warning ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-danger">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-danger ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-danger ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-danger ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-light">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-light ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-light ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-light ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-medium">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-medium ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-medium ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-medium ion-color-foreground">Foreground</span>
+            </div>
+
+            <div class="row">
+              <span class="ion-color ion-color-subtle ion-color-dark">Base</span>
+              <span class="ion-color ion-color-subtle ion-color-dark ion-color-shade">Shade</span>
+              <span class="ion-color ion-color-subtle ion-color-dark ion-color-tint">Tint</span>
+              <span class="ion-color ion-color-subtle ion-color-dark ion-color-foreground">Foreground</span>
+            </div>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/themes/test/typography/index.html b/core/src/themes/test/typography/index.html
new file mode 100644
index 0000000000..8c2b7d3557
--- /dev/null
+++ b/core/src/themes/test/typography/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Themes - Typography</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <link id="palette" rel="stylesheet" />
+
+    <style>
+      .grid {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        margin: 40px 0;
+      }
+
+      .column {
+        min-width: 400px;
+        max-width: 500px;
+      }
+
+      h2 {
+        margin: 0;
+      }
+
+      /* Font Size */
+      .ion-font-size-xs {
+        font-size: var(--ion-font-size-xs);
+      }
+
+      .ion-font-size-sm {
+        font-size: var(--ion-font-size-sm);
+      }
+
+      .ion-font-size-md {
+        font-size: var(--ion-font-size-md);
+      }
+
+      .ion-font-size-lg {
+        font-size: var(--ion-font-size-lg);
+      }
+
+      .ion-font-size-xl {
+        font-size: var(--ion-font-size-xl);
+      }
+
+      .ion-font-size-xxl {
+        font-size: var(--ion-font-size-xxl);
+      }
+
+      /* Font Weight */
+      .ion-font-weight-thin {
+        font-weight: var(--ion-font-weight-thin);
+      }
+
+      .ion-font-weight-extra-light {
+        font-weight: var(--ion-font-weight-extra-light);
+      }
+
+      .ion-font-weight-light {
+        font-weight: var(--ion-font-weight-light);
+      }
+
+      .ion-font-weight-normal {
+        font-weight: var(--ion-font-weight-normal);
+      }
+
+      .ion-font-weight-medium {
+        font-weight: var(--ion-font-weight-medium);
+      }
+
+      .ion-font-weight-semi-bold {
+        font-weight: var(--ion-font-weight-semi-bold);
+      }
+
+      .ion-font-weight-bold {
+        font-weight: var(--ion-font-weight-bold);
+      }
+
+      .ion-font-weight-extra-bold {
+        font-weight: var(--ion-font-weight-extra-bold);
+      }
+
+      .ion-font-weight-black {
+        font-weight: var(--ion-font-weight-black);
+      }
+
+      /* Line Height */
+      [class^='ion-line-height-'] {
+        border: 1px solid #ddd;
+      }
+
+      .ion-line-height-xxs {
+        line-height: var(--ion-line-height-xxs);
+      }
+
+      .ion-line-height-xs {
+        line-height: var(--ion-line-height-xs);
+      }
+
+      .ion-line-height-sm {
+        line-height: var(--ion-line-height-sm);
+      }
+
+      .ion-line-height-md {
+        line-height: var(--ion-line-height-md);
+      }
+
+      .ion-line-height-lg {
+        line-height: var(--ion-line-height-lg);
+      }
+
+      .ion-line-height-xl {
+        line-height: var(--ion-line-height-xl);
+      }
+
+      .ion-line-height-xxl {
+        line-height: var(--ion-line-height-xxl);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Themes - Typography</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-text-center">
+        <div class="grid">
+          <div class="column">
+            <h2>Font Size</h2>
+            <p class="ion-font-size-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-size-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-size-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-size-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-size-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-size-xxl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+          </div>
+          <div class="column">
+            <h2>Font Weight</h2>
+            <p class="ion-font-weight-thin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-weight-extra-light">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+            <p class="ion-font-weight-light">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+            <p class="ion-font-weight-normal">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+            <p class="ion-font-weight-medium">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+            <p class="ion-font-weight-semi-bold">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+            <p class="ion-font-weight-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-font-weight-extra-bold">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+            <p class="ion-font-weight-black">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+            </p>
+          </div>
+          <div class="column">
+            <h2>Line Height</h2>
+            <p class="ion-line-height-xxs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-line-height-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-line-height-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-line-height-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-line-height-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-line-height-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+            <p class="ion-line-height-xxl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
new file mode 100644
index 0000000000..3d5ac09a4e
--- /dev/null
+++ b/core/src/themes/themes.interfaces.ts
@@ -0,0 +1,145 @@
+// Platform-specific theme
+export type PlatformTheme = Omit<BaseTheme, 'ios' | 'md'>;
+
+// Base tokens for all palettes
+export type BaseTheme = {
+  // SPACE TOKENS
+  spacing?: {
+    none?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+  };
+
+  scaling?: {
+    0?: string;
+    100?: string;
+    150?: string;
+    200?: string;
+    250?: string;
+    300?: string;
+    350?: string;
+    400?: string;
+    450?: string;
+    500?: string;
+    550?: string;
+    600?: string;
+    650?: string;
+    700?: string;
+    750?: string;
+    800?: string;
+    850?: string;
+    900?: string;
+  };
+
+  // APPEARANCE TOKENS
+  borderWidth?: {
+    none?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+  };
+
+  radii?: {
+    none?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+  };
+
+  // TYPOGRAPHY TOKENS
+  dynamicFont?: string;
+  fontFamily?: string;
+
+  fontWeight?: {
+    thin?: string;
+    extraLight?: string;
+    light?: string;
+    normal?: string;
+    medium?: string;
+    semiBold?: string;
+    bold?: string;
+    extraBold?: string;
+    black?: string;
+  };
+
+  fontSize?: {
+    root?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+  };
+
+  lineHeight?: {
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+  };
+
+  // COMPONENT OVERRIDES
+  components?: {
+    [key: string]: {
+      [key: string]: string;
+    };
+  };
+
+  // COLOR TOKENS
+  color?: {
+    [key: string]: {
+      bold: {
+        base: string;
+        contrast: string;
+        foreground: string;
+        shade: string;
+        tint: string;
+      };
+      subtle: {
+        base: string;
+        contrast: string;
+        foreground: string;
+        shade: string;
+        tint: string;
+      };
+    };
+  };
+
+  // PLATFORM SPECIFIC OVERRIDES
+  ios?: PlatformTheme;
+  md?: PlatformTheme;
+};
+
+// Dark theme interface
+export type DarkTheme = BaseTheme & {
+  enabled: 'system' | 'always' | 'never' | 'class';
+};
+
+// Light theme interface
+export type LightTheme = BaseTheme;
+
+// Default theme interface
+export type DefaultTheme = BaseTheme & {
+  palette?: {
+    light?: LightTheme;
+    dark?: DarkTheme;
+  };
+};
diff --git a/core/src/utils/helpers.spec.ts b/core/src/utils/test/helpers.spec.ts
similarity index 96%
rename from core/src/utils/helpers.spec.ts
rename to core/src/utils/test/helpers.spec.ts
index 40b4f44a9c..42dcb616b1 100644
--- a/core/src/utils/helpers.spec.ts
+++ b/core/src/utils/test/helpers.spec.ts
@@ -1,4 +1,4 @@
-import { deepMerge, inheritAriaAttributes } from './helpers';
+import { deepMerge, inheritAriaAttributes } from '../helpers';
 
 describe('inheritAriaAttributes', () => {
   it('should inherit aria attributes', () => {
diff --git a/core/src/utils/test/theme.spec.ts b/core/src/utils/test/theme.spec.ts
index 8b28eba220..63382768cf 100644
--- a/core/src/utils/test/theme.spec.ts
+++ b/core/src/utils/test/theme.spec.ts
@@ -1,4 +1,20 @@
-import { getClassList, getClassMap } from '../theme';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Buttons } from '../../components/buttons/buttons';
+import { CardContent } from '../../components/card-content/card-content';
+import { Chip } from '../../components/chip/chip';
+import {
+  generateColorClasses,
+  generateComponentThemeCSS,
+  generateCSSVars,
+  generateGlobalThemeCSS,
+  getClassList,
+  getClassMap,
+  getCustomTheme,
+  hexToRgb,
+  injectCSS,
+  mix,
+} from '../theme';
 
 describe('getClassList()', () => {
   it('should parse string', () => {
@@ -62,3 +78,714 @@ describe('getClassMap()', () => {
     });
   });
 });
+
+describe('getCustomTheme', () => {
+  const baseCustomTheme = {
+    radii: {
+      sm: '14px',
+      md: '18px',
+      lg: '22px',
+    },
+    components: {
+      IonChip: {
+        hue: {
+          subtle: {
+            bg: 'red',
+            color: 'white',
+          },
+        },
+      },
+    },
+  };
+
+  const iosOverride = {
+    components: {
+      IonChip: {
+        hue: {
+          subtle: {
+            bg: 'blue',
+          },
+        },
+      },
+    },
+  };
+
+  const mdOverride = {
+    components: {
+      IonChip: {
+        hue: {
+          subtle: {
+            bg: 'green',
+          },
+        },
+      },
+    },
+  };
+
+  it('should return the custom theme if no mode overrides exist', () => {
+    const customTheme = { ...baseCustomTheme };
+
+    const result = getCustomTheme(customTheme, 'ios');
+
+    expect(result).toEqual(customTheme);
+  });
+
+  it('should combine only with ios overrides if mode is ios', () => {
+    const customTheme = {
+      ...baseCustomTheme,
+      ios: iosOverride,
+      md: mdOverride,
+    };
+
+    const result = getCustomTheme(customTheme, 'ios');
+
+    const expected = {
+      ...baseCustomTheme,
+      components: {
+        IonChip: {
+          hue: {
+            subtle: {
+              bg: 'blue',
+              color: 'white',
+            },
+          },
+        },
+      },
+    };
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should combine only with md overrides if mode is md', () => {
+    const customTheme = {
+      ...baseCustomTheme,
+      ios: iosOverride,
+      md: mdOverride,
+    };
+
+    const result = getCustomTheme(customTheme, 'md');
+
+    const expected = {
+      ...baseCustomTheme,
+      components: {
+        IonChip: {
+          hue: {
+            subtle: {
+              bg: 'green',
+              color: 'white',
+            },
+          },
+        },
+      },
+    };
+
+    expect(result).toEqual(expected);
+  });
+});
+
+describe('generateCSSVars', () => {
+  it('should not generate CSS variables for an empty theme', () => {
+    const theme = {
+      palette: {
+        light: {},
+        dark: {},
+      },
+    };
+
+    const css = generateCSSVars(theme);
+    expect(css).toBe('');
+  });
+
+  it('should generate CSS variables for a given theme', () => {
+    const theme = {
+      palette: {
+        light: {},
+        dark: {
+          enabled: 'system',
+        },
+      },
+      borderWidth: {
+        sm: '4px',
+      },
+      spacing: {
+        md: '12px',
+      },
+      scaling: {
+        0: '0',
+      },
+      radii: {
+        lg: '8px',
+      },
+      dynamicFont: '-apple-system-body',
+      fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
+      fontWeights: {
+        semiBold: '600',
+      },
+      fontSizes: {
+        sm: '14px',
+        md: '16px',
+      },
+      lineHeights: {
+        sm: '1.2',
+      },
+      components: {},
+    };
+
+    const css = generateCSSVars(theme);
+
+    expect(css).toContain('--ion-palette-dark-enabled: system;');
+    expect(css).toContain('--ion-border-width-sm: 4px;');
+    expect(css).toContain('--ion-spacing-md: 12px;');
+    expect(css).toContain('--ion-scaling-0: 0;');
+    expect(css).toContain('--ion-radii-lg: 8px;');
+    expect(css).toContain('--ion-dynamic-font: -apple-system-body;');
+    expect(css).toContain('--ion-font-family: Roboto, "Helvetica Neue", sans-serif;');
+    expect(css).toContain('--ion-font-weights-semi-bold: 600;');
+    expect(css).toContain('--ion-font-sizes-sm: 14px;');
+    expect(css).toContain('--ion-font-sizes-sm-rem: 0.875rem;');
+    expect(css).toContain('--ion-font-sizes-md: 16px;');
+    expect(css).toContain('--ion-font-sizes-md-rem: 1rem;');
+    expect(css).toContain('--ion-line-heights-sm: 1.2;');
+  });
+});
+
+describe('injectCSS', () => {
+  it('should inject CSS into the head', () => {
+    const css = 'body { background-color: red; }';
+    injectCSS(css);
+    expect(document.head.innerHTML).toContain(`<style>${css}</style>`);
+  });
+
+  it('should inject CSS into an element', async () => {
+    const page = await newSpecPage({
+      components: [CardContent],
+      html: '<ion-card-content></ion-card-content>',
+    });
+
+    const target = page.body.querySelector('ion-card-content')!;
+
+    const css = ':host { background-color: red; }';
+    injectCSS(css, target);
+
+    expect(target.innerHTML).toContain(`<style>${css}</style>`);
+  });
+
+  it('should inject CSS into an element with a shadow root', async () => {
+    const page = await newSpecPage({
+      components: [Chip],
+      html: '<ion-chip></ion-chip>',
+    });
+
+    const target = page.body.querySelector('ion-chip')!;
+    const shadowRoot = target.shadowRoot;
+    expect(shadowRoot).toBeTruthy();
+
+    const css = ':host { background-color: red; }';
+    injectCSS(css, shadowRoot!);
+
+    expect(shadowRoot!.innerHTML).toContain(`<style>${css}</style>`);
+  });
+
+  it('should inject CSS into a scoped element', async () => {
+    const page = await newSpecPage({
+      components: [Buttons],
+      html: '<ion-buttons></ion-buttons>',
+    });
+
+    const target = page.body.querySelector('ion-buttons')!;
+
+    const css = ':host { background-color: red; }';
+    injectCSS(css, target);
+
+    expect(target.innerHTML).toContain(`<style>${css}</style>`);
+  });
+});
+
+describe('generateGlobalThemeCSS', () => {
+  it('should generate global CSS for a given theme', () => {
+    const theme = {
+      palette: {
+        light: {},
+        dark: {
+          enabled: 'never',
+        },
+      },
+      borderWidth: {
+        sm: '4px',
+      },
+      spacing: {
+        md: '12px',
+      },
+      dynamicFont: '-apple-system-body',
+    };
+
+    const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
+
+    const expectedCSS = `
+      :root {
+        --ion-border-width-sm: 4px;
+        --ion-spacing-md: 12px;
+        --ion-dynamic-font: -apple-system-body;
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+
+  it('should generate global CSS for a given theme with light palette', () => {
+    const theme = {
+      palette: {
+        light: {
+          color: {
+            primary: {
+              bold: {
+                base: '#0054e9',
+                contrast: '#ffffff',
+                shade: '#0041c4',
+                tint: '#0065ff',
+              },
+              subtle: {
+                base: '#0054e9',
+                contrast: '#ffffff',
+                shade: '#0041c4',
+                tint: '#0065ff',
+              },
+            },
+            red: {
+              50: '#ffebee',
+              100: '#ffcdd2',
+              200: '#ef9a9a',
+            },
+          },
+        },
+        dark: {
+          enabled: 'never',
+        },
+      },
+      borderWidth: {
+        sm: '4px',
+      },
+      spacing: {
+        md: '12px',
+      },
+      dynamicFont: '-apple-system-body',
+    };
+
+    const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
+
+    const expectedCSS = `
+      :root {
+        --ion-border-width-sm: 4px;
+        --ion-spacing-md: 12px;
+        --ion-dynamic-font: -apple-system-body;
+
+        --ion-color-primary-bold: #0054e9;
+        --ion-color-primary-bold-rgb: 0, 84, 233;
+        --ion-color-primary-bold-contrast: #ffffff;
+        --ion-color-primary-bold-contrast-rgb: 255, 255, 255;
+        --ion-color-primary-bold-shade: #0041c4;
+        --ion-color-primary-bold-tint: #0065ff;
+        --ion-color-primary-subtle: #0054e9;
+        --ion-color-primary-subtle-rgb: 0, 84, 233;
+        --ion-color-primary-subtle-contrast: #ffffff;
+        --ion-color-primary-subtle-contrast-rgb: 255, 255, 255;
+        --ion-color-primary-subtle-shade: #0041c4;
+        --ion-color-primary-subtle-tint: #0065ff;
+        --ion-color-red-50: #ffebee;
+        --ion-color-red-100: #ffcdd2;
+        --ion-color-red-200: #ef9a9a;
+      }
+
+      :root .ion-color-primary {
+        --ion-color-base: var(--ion-color-primary, var(--ion-color-primary-bold)) !important;
+        --ion-color-base-rgb: var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)) !important;
+        --ion-color-contrast: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast)) !important;
+        --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, var(--ion-color-primary-bold-contrast-rgb)) !important;
+        --ion-color-shade: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade)) !important;
+        --ion-color-tint: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint)) !important;
+        --ion-color-foreground: var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground)) !important;
+
+        --ion-color-subtle-base: var(--ion-color-primary-subtle) !important;
+        --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-rgb) !important;
+        --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast) !important;
+        --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb) !important;
+        --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade) !important;
+        --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint) !important;
+        --ion-color-subtle-foreground: var(--ion-color-primary-subtle-foreground) !important;
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+
+  it('should not include component or palette variables in global CSS', () => {
+    const theme = {
+      palette: {
+        light: {},
+        dark: {
+          enabled: 'never',
+        },
+      },
+      borderWidth: {
+        sm: '4px',
+      },
+      spacing: {
+        md: '12px',
+      },
+      components: {
+        IonChip: {
+          hue: {
+            subtle: {
+              bg: 'red',
+            },
+          },
+          shape: {
+            round: {
+              borderRadius: '4px',
+            },
+          },
+        },
+        IonButton: {
+          color: {
+            primary: {
+              bg: 'blue',
+            },
+          },
+        },
+      },
+    };
+
+    const css = generateGlobalThemeCSS(theme);
+
+    // Should include global design tokens
+    expect(css).toContain('--ion-border-width-sm: 4px');
+    expect(css).toContain('--ion-spacing-md: 12px');
+
+    // Should NOT include component variables
+    expect(css).not.toContain('--ion-components-ion-chip-hue-subtle-bg');
+    expect(css).not.toContain('--ion-components-ion-chip-shape-round-border-radius');
+    expect(css).not.toContain('--ion-components-ion-button-color-primary-bg');
+    expect(css).not.toContain('components');
+
+    // Should NOT include palette variables
+    expect(css).not.toContain('--ion-color-palette-dark-enabled-never');
+    expect(css).not.toContain('palette');
+  });
+
+  it('should generate global CSS for a given theme with dark palette enabled for system preference', () => {
+    const theme = {
+      palette: {
+        light: {},
+        dark: {
+          enabled: 'system',
+          color: {
+            primary: {
+              bold: {
+                base: '#0054e9',
+                contrast: '#ffffff',
+                shade: '#0041c4',
+                tint: '#0065ff',
+              },
+              subtle: {
+                base: '#0054e9',
+                contrast: '#ffffff',
+                shade: '#0041c4',
+                tint: '#0065ff',
+              },
+            },
+            red: {
+              50: '#ffebee',
+              100: '#ffcdd2',
+              200: '#ef9a9a',
+            },
+          },
+        },
+      },
+      borderWidth: {
+        sm: '4px',
+      },
+      spacing: {
+        md: '12px',
+      },
+      dynamicFont: '-apple-system-body',
+    };
+
+    const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
+
+    const expectedCSS = `
+      :root {
+        --ion-border-width-sm: 4px;
+        --ion-spacing-md: 12px;
+        --ion-dynamic-font: -apple-system-body;
+      }
+
+      @media(prefers-color-scheme: dark) {
+        :root {
+          --ion-enabled: system;
+          --ion-color-primary-bold: #0054e9;
+          --ion-color-primary-bold-rgb: 0, 84, 233;
+          --ion-color-primary-bold-contrast: #ffffff;
+          --ion-color-primary-bold-contrast-rgb: 255, 255, 255;
+          --ion-color-primary-bold-shade: #0041c4;
+          --ion-color-primary-bold-tint: #0065ff;
+          --ion-color-primary-subtle: #0054e9;
+          --ion-color-primary-subtle-rgb: 0, 84, 233;
+          --ion-color-primary-subtle-contrast: #ffffff;
+          --ion-color-primary-subtle-contrast-rgb: 255, 255, 255;
+          --ion-color-primary-subtle-shade: #0041c4;
+          --ion-color-primary-subtle-tint: #0065ff;
+          --ion-color-red-50: #ffebee;
+          --ion-color-red-100: #ffcdd2;
+          --ion-color-red-200: #ef9a9a;
+        }
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+});
+
+describe('generateComponentThemeCSS', () => {
+  it('should generate component theme CSS for a given theme', () => {
+    const IonChip = {
+      hue: {
+        subtle: {
+          bg: 'red',
+          color: 'white',
+          borderColor: 'black',
+        },
+        bold: {
+          bg: 'blue',
+          color: 'white',
+          borderColor: 'black',
+        },
+      },
+    };
+
+    const css = generateComponentThemeCSS(IonChip, 'chip').replace(/\s/g, '');
+
+    const expectedCSS = `
+      :host(.chip-themed) {
+        --ion-chip-hue-subtle-bg: red;
+        --ion-chip-hue-subtle-color: white;
+        --ion-chip-hue-subtle-border-color: black;
+        --ion-chip-hue-bold-bg: blue;
+        --ion-chip-hue-bold-color: white;
+        --ion-chip-hue-bold-border-color: black;
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+});
+
+describe('generateColorClasses', () => {
+  let consoleWarnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleWarnSpy = jest.spyOn(console, 'warn');
+    // Suppress console.warn output from polluting the test output
+    consoleWarnSpy.mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore();
+  });
+
+  it('should generate color classes for a given theme', () => {
+    const theme = {
+      palette: {
+        light: {
+          color: {
+            primary: {
+              bold: {
+                base: '#0054e9',
+                contrast: '#ffffff',
+                foreground: '#000000',
+                shade: '#0041c4',
+                tint: '#0065ff',
+              },
+              subtle: {
+                base: '#0054e9',
+                contrast: '#ffffff',
+                foreground: '#000000',
+                shade: '#0041c4',
+                tint: '#0065ff',
+              },
+            },
+          },
+        },
+      },
+    };
+
+    const css = generateColorClasses(theme).replace(/\s/g, '');
+
+    const expectedCSS = `
+      :root .ion-color-primary {
+        --ion-color-base: var(--ion-color-primary, var(--ion-color-primary-bold)) !important;
+        --ion-color-base-rgb: var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)) !important;
+        --ion-color-contrast: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast)) !important;
+        --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, var(--ion-color-primary-bold-contrast-rgb)) !important;
+        --ion-color-shade: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade)) !important;
+        --ion-color-tint: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint)) !important;
+        --ion-color-foreground: var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground)) !important;
+
+        --ion-color-subtle-base: var(--ion-color-primary-subtle) !important;
+        --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-rgb) !important;
+        --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast) !important;
+        --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb) !important;
+        --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade) !important;
+        --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint) !important;
+        --ion-color-subtle-foreground: var(--ion-color-primary-subtle-foreground) !important;
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+
+  it('should not generate color classes for a given theme without colors', () => {
+    const theme = {
+      spacing: {
+        xs: '12px',
+        sm: '12px',
+        md: '12px',
+        lg: '12px',
+        xl: '12px',
+        xxl: '12px',
+      },
+    };
+
+    const css = generateColorClasses(theme).replace(/\s/g, '');
+
+    expect(css).toBe('');
+  });
+
+  it('should not generate color classes for a given theme with an invalid string color value', () => {
+    const theme = {
+      spacing: {
+        xs: '12px',
+        sm: '12px',
+        md: '12px',
+        lg: '12px',
+        xl: '12px',
+        xxl: '12px',
+      },
+      color: 'red',
+    };
+
+    const css = generateColorClasses(theme).replace(/\s/g, '');
+
+    // Only check the first log to get the string message
+    expect(consoleWarnSpy.mock.calls[0][0]).toContain(
+      '[Ionic Warning]: Invalid color configuration in theme. Expected color to be an object, but found string.'
+    );
+
+    expect(css).toBe('');
+  });
+
+  it('should not generate color classes for a given theme with an invalid array color value', () => {
+    const theme = {
+      spacing: {
+        xs: '12px',
+        sm: '12px',
+        md: '12px',
+        lg: '12px',
+        xl: '12px',
+        xxl: '12px',
+      },
+      color: ['red', 'blue', 'yellow'],
+    };
+
+    const css = generateColorClasses(theme).replace(/\s/g, '');
+
+    // Only check the first log to get the string message
+    expect(consoleWarnSpy.mock.calls[0][0]).toContain(
+      '[Ionic Warning]: Invalid color configuration in theme. Expected color to be an object, but found array.'
+    );
+
+    expect(css).toBe('');
+  });
+});
+
+describe('hexToRgb()', () => {
+  it('should convert 6-digit hex colors to RGB strings', () => {
+    expect(hexToRgb('#ffffff')).toBe('255, 255, 255');
+    expect(hexToRgb('#000000')).toBe('0, 0, 0');
+    expect(hexToRgb('#ff0000')).toBe('255, 0, 0');
+    expect(hexToRgb('#00ff00')).toBe('0, 255, 0');
+    expect(hexToRgb('#0000ff')).toBe('0, 0, 255');
+    expect(hexToRgb('#3880ff')).toBe('56, 128, 255');
+  });
+
+  it('should convert 3-digit hex colors to RGB strings', () => {
+    expect(hexToRgb('#fff')).toBe('255, 255, 255');
+    expect(hexToRgb('#000')).toBe('0, 0, 0');
+    expect(hexToRgb('#f00')).toBe('255, 0, 0');
+    expect(hexToRgb('#0f0')).toBe('0, 255, 0');
+    expect(hexToRgb('#00f')).toBe('0, 0, 255');
+    expect(hexToRgb('#abc')).toBe('170, 187, 204');
+  });
+
+  it('should handle hex colors without hash prefix', () => {
+    expect(hexToRgb('ffffff')).toBe('255, 255, 255');
+    expect(hexToRgb('fff')).toBe('255, 255, 255');
+    expect(hexToRgb('3880ff')).toBe('56, 128, 255');
+  });
+});
+
+describe('mix()', () => {
+  it('should mix two hex colors by weight percentage', () => {
+    // Mix white into black
+    expect(mix('#000000', '#ffffff', '0%')).toBe('#000000');
+    expect(mix('#000000', '#ffffff', '50%')).toBe('#808080');
+    expect(mix('#000000', '#ffffff', '100%')).toBe('#ffffff');
+  });
+
+  it('should mix colors with different percentages', () => {
+    // Mix red into blue
+    expect(mix('#0000ff', '#ff0000', '25%')).toBe('#4000bf');
+    expect(mix('#0000ff', '#ff0000', '75%')).toBe('#bf0040');
+  });
+
+  it('should handle 3-digit hex colors', () => {
+    expect(mix('#000', '#fff', '50%')).toBe('#808080');
+    expect(mix('#f00', '#0f0', '50%')).toBe('#808000');
+
+    // 3-digit + 6-digit
+    expect(mix('#000', '#ffffff', '50%')).toBe('#808080');
+    expect(mix('#000000', '#fff', '50%')).toBe('#808080');
+  });
+
+  it('should handle hex colors without hash prefix', () => {
+    expect(mix('000000', 'ffffff', '50%')).toBe('#808080');
+    expect(mix('f00', '0f0', '50%')).toBe('#808000');
+
+    // With and without hash prefix
+    expect(mix('#000000', 'ffffff', '50%')).toBe('#808080');
+    expect(mix('f00', '#0f0', '50%')).toBe('#808000');
+  });
+
+  it('should handle fractional percentages', () => {
+    expect(mix('#000000', '#ffffff', '12.5%')).toBe('#202020');
+    expect(mix('#ffffff', '#000000', '87.5%')).toBe('#202020');
+  });
+
+  it('should work with real-world color examples', () => {
+    // Mix primary Ionic blue with white
+    expect(mix('#3880ff', '#ffffff', '10%')).toBe('#4c8dff');
+
+    // Mix primary Ionic blue with black for shade
+    expect(mix('#3880ff', '#000000', '12%')).toBe('#3171e0');
+  });
+
+  it('should handle edge cases', () => {
+    // Same colors should return base color regardless of weight
+    expect(mix('#ff0000', '#ff0000', '50%')).toBe('#ff0000');
+
+    // Zero weight should return base color
+    expect(mix('#123456', '#abcdef', '0%')).toBe('#123456');
+
+    // 100% weight should return mix color
+    expect(mix('#123456', '#abcdef', '100%')).toBe('#abcdef');
+  });
+});
diff --git a/core/src/utils/theme.spec.ts b/core/src/utils/theme.spec.ts
deleted file mode 100644
index 9a5fb6d38f..0000000000
--- a/core/src/utils/theme.spec.ts
+++ /dev/null
@@ -1,466 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { CardContent } from '../components/card-content/card-content';
-import { Chip } from '../components/chip/chip';
-
-import { generateComponentThemeCSS, generateCSSVars, generateGlobalThemeCSS, getCustomTheme, injectCSS } from './theme';
-
-describe('getCustomTheme', () => {
-  const baseCustomTheme = {
-    radii: {
-      sm: '14px',
-      md: '18px',
-      lg: '22px',
-    },
-    components: {
-      IonChip: {
-        hue: {
-          subtle: {
-            bg: 'red',
-            color: 'white',
-          },
-        },
-      },
-    },
-  };
-
-  const iosOverride = {
-    components: {
-      IonChip: {
-        hue: {
-          subtle: {
-            bg: 'blue',
-          },
-        },
-      },
-    },
-  };
-
-  const mdOverride = {
-    components: {
-      IonChip: {
-        hue: {
-          subtle: {
-            bg: 'green',
-          },
-        },
-      },
-    },
-  };
-
-  it('should return the custom theme if no mode overrides exist', () => {
-    const customTheme = { ...baseCustomTheme };
-
-    const result = getCustomTheme(customTheme, 'ios');
-
-    expect(result).toEqual(customTheme);
-  });
-
-  it('should combine only with ios overrides if mode is ios', () => {
-    const customTheme = {
-      ...baseCustomTheme,
-      ios: iosOverride,
-      md: mdOverride,
-    };
-
-    const result = getCustomTheme(customTheme, 'ios');
-
-    const expected = {
-      ...baseCustomTheme,
-      components: {
-        IonChip: {
-          hue: {
-            subtle: {
-              bg: 'blue',
-              color: 'white',
-            },
-          },
-        },
-      },
-    };
-
-    expect(result).toEqual(expected);
-  });
-
-  it('should combine only with md overrides if mode is md', () => {
-    const customTheme = {
-      ...baseCustomTheme,
-      ios: iosOverride,
-      md: mdOverride,
-    };
-
-    const result = getCustomTheme(customTheme, 'md');
-
-    const expected = {
-      ...baseCustomTheme,
-      components: {
-        IonChip: {
-          hue: {
-            subtle: {
-              bg: 'green',
-              color: 'white',
-            },
-          },
-        },
-      },
-    };
-
-    expect(result).toEqual(expected);
-  });
-});
-
-describe('generateCSSVars', () => {
-  it('should not generate CSS variables for an empty theme', () => {
-    const theme = {
-      palette: {
-        light: {},
-        dark: {},
-      },
-    };
-
-    const css = generateCSSVars(theme);
-    expect(css).toBe('');
-  });
-
-  it('should generate CSS variables for a given theme', () => {
-    const theme = {
-      palette: {
-        light: {},
-        dark: {
-          enabled: 'system',
-        },
-      },
-      borderWidth: {
-        sm: '4px',
-      },
-      spacing: {
-        md: '12px',
-      },
-      scaling: {
-        0: '0',
-      },
-      radii: {
-        lg: '8px',
-      },
-      dynamicFont: '-apple-system-body',
-      fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
-      fontWeights: {
-        semiBold: '600',
-      },
-      fontSizes: {
-        sm: '14px',
-        md: '16px',
-      },
-      lineHeights: {
-        sm: '1.2',
-      },
-      components: {},
-    };
-
-    const css = generateCSSVars(theme);
-
-    expect(css).toContain('--ion-palette-dark-enabled: system;');
-    expect(css).toContain('--ion-border-width-sm: 4px;');
-    expect(css).toContain('--ion-spacing-md: 12px;');
-    expect(css).toContain('--ion-scaling-0: 0;');
-    expect(css).toContain('--ion-radii-lg: 8px;');
-    expect(css).toContain('--ion-dynamic-font: -apple-system-body;');
-    expect(css).toContain('--ion-font-family: Roboto, "Helvetica Neue", sans-serif;');
-    expect(css).toContain('--ion-font-weights-semi-bold: 600;');
-    expect(css).toContain('--ion-font-sizes-sm: 14px;');
-    expect(css).toContain('--ion-font-sizes-sm-rem: 0.875rem;');
-    expect(css).toContain('--ion-font-sizes-md: 16px;');
-    expect(css).toContain('--ion-font-sizes-md-rem: 1rem;');
-    expect(css).toContain('--ion-line-heights-sm: 1.2;');
-  });
-});
-
-describe('injectCSS', () => {
-  it('should inject CSS into the head', () => {
-    const css = 'body { background-color: red; }';
-    injectCSS(css);
-    expect(document.head.innerHTML).toContain(`<style>${css}</style>`);
-  });
-
-  it('should inject CSS into an element', async () => {
-    const page = await newSpecPage({
-      components: [CardContent],
-      html: '<ion-card-content></ion-card-content>',
-    });
-
-    const target = page.body.querySelector('ion-card-content')!;
-
-    const css = ':host { background-color: red; }';
-    injectCSS(css, target);
-
-    expect(target.innerHTML).toContain(`<style>${css}</style>`);
-  });
-
-  it('should inject CSS into an element with a shadow root', async () => {
-    const page = await newSpecPage({
-      components: [Chip],
-      html: '<ion-chip></ion-chip>',
-    });
-
-    const target = page.body.querySelector('ion-chip')!;
-    const shadowRoot = target.shadowRoot;
-    expect(shadowRoot).toBeTruthy();
-
-    const css = ':host { background-color: red; }';
-    injectCSS(css, shadowRoot!);
-
-    expect(shadowRoot!.innerHTML).toContain(`<style>${css}</style>`);
-  });
-});
-
-describe('generateGlobalThemeCSS', () => {
-  it('should generate global CSS for a given theme', () => {
-    const theme = {
-      palette: {
-        light: {},
-        dark: {
-          enabled: 'never',
-        },
-      },
-      borderWidth: {
-        sm: '4px',
-      },
-      spacing: {
-        md: '12px',
-      },
-      dynamicFont: '-apple-system-body',
-    };
-
-    const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
-
-    const expectedCSS = `
-      :root {
-        --ion-border-width-sm: 4px;
-        --ion-spacing-md: 12px;
-        --ion-dynamic-font: -apple-system-body;
-      }
-    `.replace(/\s/g, '');
-
-    expect(css).toBe(expectedCSS);
-  });
-
-  it('should generate global CSS for a given theme with light palette', () => {
-    const theme = {
-      palette: {
-        light: {
-          color: {
-            primary: {
-              bold: {
-                base: '#0054e9',
-                contrast: '#ffffff',
-                shade: '#0041c4',
-                tint: '#0065ff',
-              },
-              subtle: {
-                base: '#0054e9',
-                contrast: '#ffffff',
-                shade: '#0041c4',
-                tint: '#0065ff',
-              },
-            },
-            red: {
-              50: '#ffebee',
-              100: '#ffcdd2',
-              200: '#ef9a9a',
-            },
-          },
-        },
-        dark: {
-          enabled: 'never',
-        },
-      },
-      borderWidth: {
-        sm: '4px',
-      },
-      spacing: {
-        md: '12px',
-      },
-      dynamicFont: '-apple-system-body',
-    };
-
-    const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
-
-    const expectedCSS = `
-      :root {
-        --ion-border-width-sm: 4px;
-        --ion-spacing-md: 12px;
-        --ion-dynamic-font: -apple-system-body;
-
-        --ion-color-primary-bold: #0054e9;
-        --ion-color-primary-bold-contrast: #ffffff;
-        --ion-color-primary-bold-shade: #0041c4;
-        --ion-color-primary-bold-tint: #0065ff;
-        --ion-color-primary-subtle: #0054e9;
-        --ion-color-primary-subtle-contrast: #ffffff;
-        --ion-color-primary-subtle-shade: #0041c4;
-        --ion-color-primary-subtle-tint: #0065ff;
-        --ion-color-red-50: #ffebee;
-        --ion-color-red-100: #ffcdd2;
-        --ion-color-red-200: #ef9a9a;
-      }
-    `.replace(/\s/g, '');
-
-    expect(css).toBe(expectedCSS);
-  });
-
-  it('should not include component or palette variables in global CSS', () => {
-    const theme = {
-      palette: {
-        light: {},
-        dark: {
-          enabled: 'never',
-        },
-      },
-      borderWidth: {
-        sm: '4px',
-      },
-      spacing: {
-        md: '12px',
-      },
-      components: {
-        IonChip: {
-          hue: {
-            subtle: {
-              bg: 'red',
-            },
-          },
-          shape: {
-            round: {
-              borderRadius: '4px',
-            },
-          },
-        },
-        IonButton: {
-          color: {
-            primary: {
-              bg: 'blue',
-            },
-          },
-        },
-      },
-    };
-
-    const css = generateGlobalThemeCSS(theme);
-
-    // Should include global design tokens
-    expect(css).toContain('--ion-border-width-sm: 4px');
-    expect(css).toContain('--ion-spacing-md: 12px');
-
-    // Should NOT include component variables
-    expect(css).not.toContain('--ion-components-ion-chip-hue-subtle-bg');
-    expect(css).not.toContain('--ion-components-ion-chip-shape-round-border-radius');
-    expect(css).not.toContain('--ion-components-ion-button-color-primary-bg');
-    expect(css).not.toContain('components');
-
-    // Should NOT include palette variables
-    expect(css).not.toContain('--ion-color-palette-dark-enabled-never');
-    expect(css).not.toContain('palette');
-  });
-
-  it('should generate global CSS for a given theme with dark palette enabled for system preference', () => {
-    const theme = {
-      palette: {
-        light: {},
-        dark: {
-          enabled: 'system',
-          color: {
-            primary: {
-              bold: {
-                base: '#0054e9',
-                contrast: '#ffffff',
-                shade: '#0041c4',
-                tint: '#0065ff',
-              },
-              subtle: {
-                base: '#0054e9',
-                contrast: '#ffffff',
-                shade: '#0041c4',
-                tint: '#0065ff',
-              },
-            },
-            red: {
-              50: '#ffebee',
-              100: '#ffcdd2',
-              200: '#ef9a9a',
-            },
-          },
-        },
-      },
-      borderWidth: {
-        sm: '4px',
-      },
-      spacing: {
-        md: '12px',
-      },
-      dynamicFont: '-apple-system-body',
-    };
-
-    const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
-
-    const expectedCSS = `
-      :root {
-        --ion-border-width-sm: 4px;
-        --ion-spacing-md: 12px;
-        --ion-dynamic-font: -apple-system-body;
-      }
-
-      @media(prefers-color-scheme: dark) {
-        :root {
-          --ion-enabled: system;
-          --ion-color-primary-bold: #0054e9;
-          --ion-color-primary-bold-contrast: #ffffff;
-          --ion-color-primary-bold-shade: #0041c4;
-          --ion-color-primary-bold-tint: #0065ff;
-          --ion-color-primary-subtle: #0054e9;
-          --ion-color-primary-subtle-contrast: #ffffff;
-          --ion-color-primary-subtle-shade: #0041c4;
-          --ion-color-primary-subtle-tint: #0065ff;
-          --ion-color-red-50: #ffebee;
-          --ion-color-red-100: #ffcdd2;
-          --ion-color-red-200: #ef9a9a;
-        }
-      }
-    `.replace(/\s/g, '');
-
-    expect(css).toBe(expectedCSS);
-  });
-});
-
-describe('generateComponentThemeCSS', () => {
-  it('should generate component theme CSS for a given theme', () => {
-    const IonChip = {
-      hue: {
-        subtle: {
-          bg: 'red',
-          color: 'white',
-          borderColor: 'black',
-        },
-        bold: {
-          bg: 'blue',
-          color: 'white',
-          borderColor: 'black',
-        },
-      },
-    };
-
-    const css = generateComponentThemeCSS(IonChip, 'chip').replace(/\s/g, '');
-
-    const expectedCSS = `
-      :host(.chip-themed) {
-        --ion-chip-hue-subtle-bg: red;
-        --ion-chip-hue-subtle-color: white;
-        --ion-chip-hue-subtle-border-color: black;
-        --ion-chip-hue-bold-bg: blue;
-        --ion-chip-hue-bold-color: white;
-        --ion-chip-hue-bold-border-color: black;
-      }
-    `.replace(/\s/g, '');
-
-    expect(css).toBe(expectedCSS);
-  });
-});
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index d71fe43a38..419cb99d81 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -1,3 +1,5 @@
+import { printIonWarning } from '@utils/logging';
+
 import type { Color, CssClassMap } from '../interface';
 
 import { deepMerge } from './helpers';
@@ -89,6 +91,31 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX):
         return [`${prefix.slice(0, -1)}: ${val};`];
       }
 
+      // Generate rgb variables for base and contrast color variants
+      // These are only generated when processing global color objects,
+      // not component-level color overrides
+      // TODO(): this only works with hex values
+      if ((key === 'bold' || key === 'subtle') && prefix.includes('color')) {
+        if (typeof val === 'object' && val !== null) {
+          return Object.entries(val).flatMap(([property, hexValue]) => {
+            if (typeof hexValue === 'string' && hexValue.startsWith('#')) {
+              // For 'base' property, don't include the property name in the CSS variable
+              const varName = property === 'base' ? `${prefix}${key}` : `${prefix}${key}-${property}`;
+              const cssVars = [`${varName}: ${hexValue};`];
+
+              // Only add RGB values for base and contrast
+              if (property === 'base' || property === 'contrast') {
+                const rgbVarName = property === 'base' ? `${prefix}${key}-rgb` : `${prefix}${key}-${property}-rgb`;
+                cssVars.push(`${rgbVarName}: ${hexToRgb(hexValue)};`);
+              }
+
+              return cssVars;
+            }
+            return [];
+          });
+        }
+      }
+
       // If it's a font-sizes key, create rem version
       // This is necessary to support the dynamic font size feature
       if (key === 'font-sizes' && typeof val === 'object' && val !== null) {
@@ -114,6 +141,106 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX):
   return cssProps.join('\n');
 };
 
+/**
+ * Generates a CSS class containing the CSS variables for each color
+ * in the theme. Each color has generic bold and subtle variables that are mapped
+ * to the specific color's bold and subtle variables. The bold colors will temporarily
+ * include a fallback to remove the bold prefix. For example, the primary
+ * color will return the following CSS class:
+ *
+ * ```css
+ * :root .ion-color-primary {
+ *   --ion-color-base: var(--ion-color-primary, var(--ion-color-primary-bold));
+ *   --ion-color-base-rgb: var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb));
+ *   --ion-color-contrast: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
+ *   --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, var(--ion-color-primary-bold-contrast-rgb));
+ *   --ion-color-shade: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
+ *   --ion-color-tint: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint));
+ *   --ion-color-foreground: var(--ion-color-primary, var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground)));
+ *
+ *   --ion-color-subtle-base: var(--ion-color-primary-subtle);
+ *   --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-rgb);
+ *   --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast);
+ *   --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb);
+ *   --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade);
+ *   --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint);
+ *   --ion-color-subtle-foreground: var(--ion-color-primary-subtle-foreground);
+ * }
+ * ```
+ *
+ * @param theme The theme object containing color definitions
+ * @returns CSS string with .ion-color-{colorName} utility classes
+ */
+export const generateColorClasses = (theme: any): string => {
+  // Look for colors in the light palette first, then fallback to the
+  // direct color property if there is no light palette
+  const colors = theme?.palette?.light?.color || theme?.color;
+
+  if (!colors) {
+    return '';
+  }
+
+  if (typeof colors !== 'object' || Array.isArray(colors)) {
+    const colorsType = Array.isArray(colors) ? 'array' : typeof colors;
+    printIonWarning(
+      `Invalid color configuration in theme. Expected color to be an object, but found ${colorsType}.`,
+      theme
+    );
+
+    return '';
+  }
+
+  const generatedColorClasses: string[] = [];
+
+  Object.keys(colors).forEach((colorName) => {
+    const colorVariants = colors[colorName];
+    if (!colorVariants || typeof colorVariants !== 'object') return;
+
+    const cssVariableRules: string[] = [];
+
+    // Generate CSS variables for bold variant
+    // Includes base color variables without the bold modifier for
+    // backwards compatibility.
+    // TODO: Remove the fallbacks once the bold variables are the default
+    if (colorVariants.bold) {
+      cssVariableRules.push(
+        `--ion-color-base: var(--ion-color-${colorName}, var(--ion-color-${colorName}-bold)) !important;`,
+        `--ion-color-base-rgb: var(--ion-color-${colorName}-rgb, var(--ion-color-${colorName}-bold-rgb)) !important;`,
+        `--ion-color-contrast: var(--ion-color-${colorName}-contrast, var(--ion-color-${colorName}-bold-contrast)) !important;`,
+        `--ion-color-contrast-rgb: var(--ion-color-${colorName}-contrast-rgb, var(--ion-color-${colorName}-bold-contrast-rgb)) !important;`,
+        `--ion-color-shade: var(--ion-color-${colorName}-shade, var(--ion-color-${colorName}-bold-shade)) !important;`,
+        `--ion-color-tint: var(--ion-color-${colorName}-tint, var(--ion-color-${colorName}-bold-tint)) !important;`,
+        `--ion-color-foreground: var(--ion-color-${colorName}-foreground, var(--ion-color-${colorName}-bold-foreground)) !important;`
+      );
+    }
+
+    // Generate CSS variables for subtle variant
+    if (colorVariants.subtle) {
+      cssVariableRules.push(
+        `--ion-color-subtle-base: var(--ion-color-${colorName}-subtle) !important;`,
+        `--ion-color-subtle-base-rgb: var(--ion-color-${colorName}-subtle-rgb) !important;`,
+        `--ion-color-subtle-contrast: var(--ion-color-${colorName}-subtle-contrast) !important;`,
+        `--ion-color-subtle-contrast-rgb: var(--ion-color-${colorName}-subtle-contrast-rgb) !important;`,
+        `--ion-color-subtle-shade: var(--ion-color-${colorName}-subtle-shade) !important;`,
+        `--ion-color-subtle-tint: var(--ion-color-${colorName}-subtle-tint) !important;`,
+        `--ion-color-subtle-foreground: var(--ion-color-${colorName}-subtle-foreground) !important;`
+      );
+    }
+
+    if (cssVariableRules.length > 0) {
+      const colorUtilityClass = `
+        :root .ion-color-${colorName} {
+          ${cssVariableRules.join('\n  ')}
+        }
+      `;
+
+      generatedColorClasses.push(colorUtilityClass);
+    }
+  });
+
+  return generatedColorClasses.join('\n');
+};
+
 /**
  * Creates a style element and injects its CSS into a target element
  * @param css The CSS string to inject
@@ -142,6 +269,7 @@ export const generateGlobalThemeCSS = (theme: any): string => {
   }
 
   // Exclude components and palette from the default tokens
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { palette, components, ...defaultTokens } = theme;
 
   // Generate CSS variables for the default design tokens
@@ -150,29 +278,46 @@ export const generateGlobalThemeCSS = (theme: any): string => {
   // Generate CSS variables for the light color palette
   const lightTokensCSS = generateCSSVars(palette.light);
 
+  // Generate CSS variables for the dark color palette
+  const darkTokensCSS = generateCSSVars(palette.dark);
+
+  // Include CSS variables for the dark color palette instead of
+  // the light palette if dark palette enabled is 'always'
+  const paletteTokensCSS = palette.dark.enabled === 'always' ? darkTokensCSS : lightTokensCSS;
+
   let css = `
     ${CSS_ROOT_SELECTOR} {
       ${defaultTokensCSS}
-      ${lightTokensCSS}
+      ${paletteTokensCSS}
     }
   `;
 
-  // Generate CSS variables for the dark color palette if it
-  // is enabled for system preference
-  if (palette.dark.enabled === 'system') {
-    const darkTokensCSS = generateCSSVars(palette.dark);
-    if (darkTokensCSS.length > 0) {
-      css += `
-        @media (prefers-color-scheme: dark) {
-          ${CSS_ROOT_SELECTOR} {
-            ${darkTokensCSS}
-          }
-        }
-      `;
-    }
+  // Include CSS variables for the dark color palette inside of a
+  // class if dark palette enabled is 'class'
+  if (palette.dark.enabled === 'class') {
+    css += `
+      .ion-palette-dark {
+        ${darkTokensCSS}
+      }
+    `;
   }
 
-  return css;
+  // Include CSS variables for the dark color palette inside of the
+  // dark color scheme media query if dark palette enabled is 'system'
+  if (palette.dark.enabled === 'system') {
+    css += `
+      @media (prefers-color-scheme: dark) {
+        ${CSS_ROOT_SELECTOR} {
+          ${darkTokensCSS}
+        }
+      }
+    `;
+  }
+
+  // Add color classes
+  const colorClasses = generateColorClasses(theme);
+
+  return css + '\n' + colorClasses;
 };
 
 /**
@@ -254,3 +399,69 @@ export const applyComponentTheme = (element: HTMLElement): void => {
     injectCSS(css, root);
   }
 };
+
+/**
+ * Parses a hex color string and returns RGB values as an array.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB values as `[r, g, b]` array
+ */
+const parseHex = (hex: string): [number, number, number] => {
+  const cleanHex = hex.replace('#', '');
+
+  // Short hex format like 'fff' → expand to 'ffffff'
+  if (cleanHex.length === 3) {
+    return [
+      parseInt(cleanHex[0] + cleanHex[0], 16),
+      parseInt(cleanHex[1] + cleanHex[1], 16),
+      parseInt(cleanHex[2] + cleanHex[2], 16),
+    ];
+    // Full hex format like 'ffffff'
+  } else {
+    return [
+      parseInt(cleanHex.substring(0, 2), 16),
+      parseInt(cleanHex.substring(2, 4), 16),
+      parseInt(cleanHex.substring(4, 6), 16),
+    ];
+  }
+};
+
+/**
+ * Converts a hex color to a string of RGB comma-separated values.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB string (e.g. `'255, 255, 255'`)
+ */
+export const hexToRgb = (hex: string): string => {
+  const [r, g, b] = parseHex(hex);
+  return `${r}, ${g}, ${b}`;
+};
+
+/**
+ * Mixes two hex colors by a given weight percentage and returns
+ * it as a hex color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ * @param weight Weight percentage as string - how much of mixColor to mix into baseColor (e.g. `'12%'`)
+ *
+ * @returns Mixed hex color (e.g. `'#004acd'`)
+ */
+export const mix = (baseColor: string, mixColor: string, weight: string): string => {
+  // Parse weight percentage
+  const w = parseFloat(weight.replace('%', '')) / 100;
+
+  // Parse both colors
+  const [baseR, baseG, baseB] = parseHex(baseColor);
+  const [mixR, mixG, mixB] = parseHex(mixColor);
+
+  // Mix mixColor into baseColor by weight
+  const r = Math.round(baseR * (1 - w) + mixR * w);
+  const g = Math.round(baseG * (1 - w) + mixG * w);
+  const b = Math.round(baseB * (1 - w) + mixB * w);
+
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};