feat: add ionic theme architecture (#29132)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Adds the base architecture to add a new theme configuration to Ionic
Framework components.
- Components can now specify an additional stylesheet for the `ionic`
theme.
- Developers can specify the `theme` and `mode` independently to control
look and feel of a component.

Test infrastructure has been updated to add support for testing the
theme configuration with Playwright.
- Existing `themes` test configuration has been renamed to `palettes`

This PR is just the initial effort to decouple Ionic's architecture to
separate look and feel and allow our dev team to start introducing the
new component appearance to the UI. There will be additional changes
required to completely add support for the Ionic theme. These changes
are targeted against the `next` branch and are not expected to be used
in a production environment at this time.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/src/components/toggle/toggle.tsx

@@ -8,13 +8,14 @@ import { createColorClasses, hostContext } from '@utils/theme';
 import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import type { Color, Gesture, GestureDetail, Mode } from '../../interface';
+import { getIonTheme } from '../../global/ionic-global';
+import type { Color, Gesture, GestureDetail, Theme } from '../../interface';
 
 import type { ToggleChangeEventDetail } from './toggle-interface';
 
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -27,6 +28,7 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
   styleUrls: {
     ios: 'toggle.ios.scss',
     md: 'toggle.md.scss',
+    ionic: 'toggle.md.scss',
   },
   shadow: true,
 })
@@ -240,15 +242,15 @@ export class Toggle implements ComponentInterface {
     this.ionBlur.emit();
   };
 
-  private getSwitchLabelIcon = (mode: Mode, checked: boolean) => {
-    if (mode === 'md') {
+  private getSwitchLabelIcon = (theme: Theme, checked: boolean) => {
+    if (theme === 'md') {
       return checked ? checkmarkOutline : removeOutline;
     }
     return checked ? removeOutline : ellipseOutline;
   };
 
-  private renderOnOffSwitchLabels(mode: Mode, checked: boolean) {
-    const icon = this.getSwitchLabelIcon(mode, checked);
+  private renderOnOffSwitchLabels(theme: Theme, checked: boolean) {
+    const icon = this.getSwitchLabelIcon(theme, checked);
 
     return (
       <ion-icon
@@ -263,7 +265,7 @@ export class Toggle implements ComponentInterface {
   }
 
   private renderToggleControl() {
-    const mode = getIonMode(this);
+    const theme = getIonTheme(this);
 
     const { enableOnOffLabels, checked } = this;
     return (
@@ -272,10 +274,10 @@ export class Toggle implements ComponentInterface {
          since the wrapper is translated when the handle is interacted with and
          this would move the on/off labels outside of the view box */}
         {enableOnOffLabels &&
-          mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)]}
+          theme === 'ios' && [this.renderOnOffSwitchLabels(theme, true), this.renderOnOffSwitchLabels(theme, false)]}
         <div class="toggle-icon-wrapper">
           <div class="toggle-inner" part="handle">
-            {enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)}
+            {enableOnOffLabels && theme === 'md' && this.renderOnOffSwitchLabels(theme, checked)}
           </div>
         </div>
       </div>
@@ -289,7 +291,7 @@ export class Toggle implements ComponentInterface {
   render() {
     const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
 
-    const mode = getIonMode(this);
+    const theme = getIonTheme(this);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -298,7 +300,7 @@ export class Toggle implements ComponentInterface {
       <Host
         onClick={this.onClick}
         class={createColorClasses(color, {
-          [mode]: true,
+          [theme]: true,
           'in-item': hostContext('ion-item', el),
           'toggle-activated': activated,
           'toggle-checked': checked,