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/card-header/card-header.tsx

@@ -1,7 +1,6 @@
 import { Component, Prop } from '@stencil/core';
-
 import { Color, Mode } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-card-header',
@@ -9,9 +8,7 @@ import { createThemedClasses } from '../../utils/theme';
     ios: 'card-header.ios.scss',
     md: 'card-header.md.scss'
   },
-  host: {
-    theme: 'card-header'
-  }
+  shadow: true
 })
 export class CardHeader {
   /**
@@ -31,16 +28,15 @@ export class CardHeader {
   @Prop() translucent = false;
 
   hostData() {
-    const themedClasses = this.translucent
-      ? createThemedClasses(this.mode, this.color, 'card-header-translucent')
-      : {};
-
-    const hostClasses = {
-      ...themedClasses
-    };
-
     return {
-      class: hostClasses
+      class: {
+        ...createColorClasses(this.color),
+        'card-header-translucent': this.translucent,
+      }
     };
   }
+
+  render() {
+    return <slot></slot>;
+  }
 }