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

@@ -6,16 +6,14 @@ import {
   Method,
   Prop
 } from '@stencil/core';
-import { Side, isEndSide } from '../../utils/helpers';
+import { Side } from '../../interface';
+import { isEndSide } from '../../utils/helpers';
 
 @Component({
   tag: 'ion-item-options',
   styleUrls: {
     ios: 'item-options.ios.scss',
     md: 'item-options.md.scss'
-  },
-  host: {
-    theme: 'item-options'
   }
 })
 export class ItemOptions {
@@ -51,10 +49,11 @@ export class ItemOptions {
   }
 
   hostData() {
+    const isEnd = this.isEndSide();
     return {
       class: {
-        'item-options-start': !this.isEndSide(),
-        'item-options-end': this.isEndSide()
+        'item-options-start': !isEnd,
+        'item-options-end': isEnd
       }
     };
   }