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/select-popover/select-popover.tsx

@@ -1,14 +1,14 @@
 import { Component, Listen, Prop } from '@stencil/core';
 import { Mode, SelectPopoverOption } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 
 @Component({
   tag: 'ion-select-popover',
-  host: {
-    theme: 'select-popover'
-  }}
-)
+  styleUrl: 'select-popover.scss'
+})
 export class SelectPopover {
+
   mode!: Mode;
 
   /** Header text for the popover */
@@ -29,13 +29,19 @@ export class SelectPopover {
     option && option.handler && option.handler();
   }
 
+  hostData() {
+    return {
+      class: createThemedClasses(this.mode, 'select-popover')
+    };
+  }
+
   render() {
     return (
       <ion-list>
         { this.header ? <ion-list-header>{this.header}</ion-list-header> : null }
         { this.subHeader || this.message
-          ? <ion-item text-wrap>
-              <ion-label>
+          ? <ion-item>
+              <ion-label text-wrap>
                 { this.subHeader ? <h3>{this.subHeader}</h3> : null }
                 { this.message ? <p>{this.message}</p> : null }
               </ion-label>