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/split-pane/split-pane.tsx

@@ -1,4 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
@@ -17,15 +19,14 @@ const QUERY: { [key: string]: string }  = {
   styleUrls: {
     ios: 'split-pane.ios.scss',
     md: 'split-pane.md.scss'
-  },
-  host: {
-    theme: 'split-pane'
   }
 })
 export class SplitPane {
 
   private rmL: any;
 
+  mode!: Mode;
+
   @Element() el!: HTMLElement;
   @State() visible = false;
 
@@ -155,6 +156,7 @@ export class SplitPane {
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'split-pane'),
         'split-pane-visible': this.visible
       }
     };