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/fab-button/fab-button.tsx

@@ -1,13 +1,14 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Color, CssClassMap, Mode } from '../../interface';
-import { createThemedClasses, getElementClassMap } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-fab-button',
   styleUrls: {
     ios: 'fab-button.ios.scss',
     md: 'fab-button.md.scss'
-  }
+  },
+  shadow: true
 })
 export class FabButton {
   private inList = false;
@@ -64,39 +65,39 @@ export class FabButton {
   private getFabClassMap(): CssClassMap {
     return {
       'fab-button-in-list': this.inList,
-      [`fab-button-${this.mode}-in-list`]: this.inList,
-      [`fab-button-translucent-${this.mode}-in-list`]:
-        this.inList && this.translucent,
+      'fab-button-translucent-in-list': this.inList && this.translucent,
       'fab-button-close-active': this.activated,
       'fab-button-show': this.show
     };
   }
 
-  render() {
-    const themedClasses = createThemedClasses(
-      this.mode,
-      this.color,
-      'fab-button'
-    );
-    const translucentClasses = this.translucent
-      ? createThemedClasses(this.mode, this.color, 'fab-button-translucent')
-      : {};
-    const hostClasses = getElementClassMap(this.el.classList);
-    const TagType = this.href ? 'a' : 'button';
-    const fabClasses = {
-      ...this.getFabClassMap(),
-      ...themedClasses,
-      ...translucentClasses,
-      ...hostClasses
+  hostData() {
+
+    return {
+      'tappable': true,
+      class: {
+        ...createColorClasses(this.color),
+        ...this.getFabClassMap(),
+        'fab-button-translucent': this.translucent
+      }
     };
+  }
+
+  render() {
+    const TagType = this.href ? 'a' : 'button';
 
     return (
-      <TagType class={fabClasses} disabled={this.disabled} href={this.href}>
-        <ion-icon name="close" class="fab-button-close-icon" />
-        <span class="fab-button-inner">
-          <slot />
+      <TagType
+        class="fab-button-native"
+        disabled={this.disabled}
+        href={this.href}>
+        <span class="fab-button-close-icon">
+          <ion-icon name="close"></ion-icon>
         </span>
-        {this.mode === 'md' && <ion-ripple-effect tapClick={true} />}
+        <span class="fab-button-inner">
+          <slot></slot>
+        </span>
+        { this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
       </TagType>
     );
   }