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/gesture-controller/gesture-controller.tsx

@@ -1,11 +1,12 @@
 import { Component, Event, EventEmitter, Method } from '@stencil/core';
-import { BlockerConfig, GestureConfig } from '../../interface';
-import { BlockerDelegate, GestureDelegate } from './gesture-controller-utils';
+import { BlockerConfig, BlockerDelegate, GestureConfig, GestureDelegate } from '../../interface';
+import { BlockerDelegate as BD, GestureDelegate as GD } from './gesture-controller-utils';
 
 @Component({
   tag: 'ion-gesture-controller'
 })
 export class GestureController {
+
   private gestureId = 0;
   private requestedStart = new Map<number, number>();
   private disabledGestures = new Map<string, Set<number>>();
@@ -23,7 +24,7 @@ export class GestureController {
   @Method()
   create(config: GestureConfig): Promise<GestureDelegate> {
     return Promise.resolve(
-      new GestureDelegate(
+      new GD(
         this,
         this.newID(),
         config.name,
@@ -38,7 +39,7 @@ export class GestureController {
    */
   @Method()
   createBlocker(opts: BlockerConfig = {}): BlockerDelegate {
-    return new BlockerDelegate(
+    return new BD(
       this.newID(),
       this,
       opts.disable,