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/utils/helpers.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@stencil/core';
+import { Side } from '../interface';
 
 export function reorderArray(array: any[], indexes: {from: number, to: number}): any[] {
   const element = array[indexes.from];
@@ -39,7 +40,6 @@ export function pointerCoord(ev: any): {x: number, y: number} {
   }
   return {x: 0, y: 0};
 }
-export type Side = 'start' | 'end';
 
 /**
  * @hidden