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

@@ -1,4 +1,6 @@
 import { Component } from '@stencil/core';
+import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 
 @Component({
@@ -6,9 +8,15 @@ import { Component } from '@stencil/core';
   styleUrls: {
     ios: 'item-group.ios.scss',
     md: 'item-group.md.scss'
-  },
-  host: {
-    theme: 'item-group'
   }
 })
-export class ItemGroup {}
+export class ItemGroup {
+
+  mode!: Mode;
+
+  hostData() {
+    return {
+      class: createThemedClasses(this.mode, 'item-group')
+    };
+  }
+}