fix(components): include mode classes on components for use in shadow (#17838)

- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling

fixes #17608

core/src/components/modal/modal.tsx

@@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
 import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
-import { createThemedClasses, getClassMap } from '../../utils/theme';
+import { getClassMap } from '../../utils/theme';
 import { deepReady } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -193,7 +193,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       'no-router': true,
       'aria-modal': 'true',
       class: {
-        ...createThemedClasses(this.mode, 'modal'),
+        [`${this.mode}`]: true,
         ...getClassMap(this.cssClass)
       },
       style: {
@@ -203,7 +203,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const dialogClasses = createThemedClasses(this.mode, 'modal-wrapper');
+    const dialogClasses = {
+      [`modal-wrapper`]: true,
+      [`${this.mode}`]: true,
+    };
 
     return [
       <ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss}/>,