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/item-option/item-option.tsx

@@ -1,17 +1,19 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Element, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-item-option',
-  host: {
-    theme: 'item-option'
-  },
   styleUrls: {
     ios: 'item-option.ios.scss',
     md: 'item-option.md.scss'
-  }
+  },
+  shadow: true
 })
 export class ItemOption {
+
+  @Element() el!: HTMLElement;
+
   /**
    * The color to use for the option
    */
@@ -47,6 +49,7 @@ export class ItemOption {
   hostData() {
     return {
       class: {
+        ...createColorClasses(this.color),
         'item-option-expandable': this.expandable
       }
     };
@@ -57,7 +60,7 @@ export class ItemOption {
 
     return (
       <TagType
-        class="item-option-button"
+        class="item-option-native"
         disabled={this.disabled}
         href={this.href}
         onClick={this.clickedOptionButton.bind(this)}
@@ -66,7 +69,7 @@ export class ItemOption {
           <slot name="start" />
           <slot name="top" />
           <slot name="icon-only" />
-          <slot />
+          <slot></slot>
           <slot name="bottom" />
           <slot name="end" />
         </span>