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/badge/badge.tsx

@@ -1,5 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-badge',
@@ -7,13 +8,11 @@ import { Color, Mode } from '../../interface';
     ios: 'badge.ios.scss',
     md: 'badge.md.scss'
   },
-  host: {
-    theme: 'badge'
-  }
+  shadow: true
 })
 export class Badge {
   /**
-   * The color the badge should be
+   * The color the badge should be.
    */
   @Prop() color?: Color;
 
@@ -22,4 +21,14 @@ export class Badge {
    * Possible values are: `"ios"` or `"md"`.
    */
   @Prop() mode!: Mode;
+
+  hostData() {
+    return {
+      class: createColorClasses(this.color)
+    };
+  }
+
+  render() {
+    return <slot></slot>;
+  }
 }