refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -1,26 +1,24 @@
 import { Component, Prop } from '@stencil/core';
-import { Config } from '../../interface';
+import { Config, Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-infinite-scroll-content',
   styleUrls: {
     ios: 'infinite-scroll-content.ios.scss',
     md: 'infinite-scroll-content.md.scss'
-  },
-  host: {
-    theme: 'infinite-scroll-content'
   }
 })
 export class InfiniteScrollContent {
 
-  @Prop({ context: 'config' })
-  config!: Config;
+  mode!: Mode;
+
+  @Prop({ context: 'config' }) config!: Config;
 
   /**
    * An animated SVG spinner that shows while loading.
    */
-  @Prop({ mutable: true })
-  loadingSpinner?: string;
+  @Prop({ mutable: true }) loadingSpinner?: string;
 
   /**
    * Optional text to display while loading.
@@ -36,6 +34,12 @@ export class InfiniteScrollContent {
     }
   }
 
+  hostData() {
+    return {
+      class: createThemedClasses(this.mode, 'infinite-scroll-content')
+    };
+  }
+
   render() {
     return (
       <div class="infinite-loading">