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>

.github/COMPONENT-GUIDE.md

@@ -18,6 +18,7 @@
   * [Component Structure](#component-structure-1)
 - [Converting Scoped to Shadow](#converting-scoped-to-shadow)
 - [RTL](#rtl)
+- [Themes vs. Modes](#themes-vs-modes)
 
 ## Button States
 
@@ -342,7 +343,7 @@ The ripple effect should be added to elements for Material Design. It *requires*
 
 ```jsx
  render() {
-  const mode = getIonMode(this);
+  const theme = getIonTheme(this);
 
 return (
   <Host
@@ -352,7 +353,7 @@ return (
   >
     <button>
       <slot></slot>
-      {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+      {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
     </button>
   </Host>
 );
@@ -768,3 +769,37 @@ class={{
   transform-origin: right center;
 }
 ```
+
+## Themes vs. Modes
+
+Themes and modes are two different concepts in Ionic. Themes refer to the "look" of the component, such as the stylesheet that is used. Modes refer to the "behavior" of the component, such as the platform specific behaviors on iOS and Android.
+
+To detect the theme, you can use the `getIonTheme` function:
+
+```tsx
+const theme = getIonTheme(this);
+
+return (
+  <Host class={theme}>
+    {theme === "md" && <ion-ripple-effect></ion-ripple-effect>}
+  </Host>
+);
+```
+
+Theme can be both used for styling decisions and conditional rendering of elements. For example, the ripple effect is only used in the Material Design theme.
+
+To detect the mode, you can use the `getIonMode` function:
+
+```tsx
+const mode = getIonMode(this);
+
+if (mode === "ios") {
+  enableRubberBandScrolling();
+}
+```
+
+Mode can be used for behavior tied to the platform the app is running on. For example, iOS has rubber band scrolling, while Android does not.
+
+Use mode for functionality that remains consistent across all themes but is intended specifically for a certain platform.
+
+Functionality that is applied only to a specific theme should use theme.