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

@@ -1,6 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Color, Config, Mode } from '../../interface';
-import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
+import { createColorClasses, openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-back-button',
@@ -8,9 +8,7 @@ import { createThemedClasses, getElementClassMap, openURL } from '../../utils/th
     ios: 'back-button.ios.scss',
     md: 'back-button.md.scss'
   },
-  host: {
-    theme: 'back-button'
-  }
+  scoped: true
 })
 export class BackButton {
 
@@ -46,42 +44,43 @@ export class BackButton {
   @Prop() text?: string;
 
 
-  private onClick(ev: Event) {
+  private async onClick(ev: Event) {
     const nav = this.el.closest('ion-nav');
     if (nav && nav.canGoBack()) {
       ev.preventDefault();
-      nav.pop();
+      if (!nav.isAnimating()) {
+        nav.pop();
+      }
     } else if (this.defaultHref) {
       openURL(this.win, this.defaultHref, ev, 'back');
     }
   }
 
   hostData() {
+    const showBackButton = !!this.defaultHref;
+
     return {
       class: {
-        'show-back-button': !!this.defaultHref
-      }
+        ...createColorClasses(this.color),
+        'button': true,
+        'show-back-button': showBackButton
+      },
+      'tappable': true,
     };
   }
 
   render() {
     const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back');
     const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', 'Back');
-    const themedClasses = createThemedClasses(this.mode, this.color, 'back-button');
-
-    const backButtonClasses = {
-      ...themedClasses,
-      ...getElementClassMap(this.el.classList),
-    };
 
     return (
       <button
-        class={backButtonClasses}
+        class="back-button-native"
         onClick={(ev) => this.onClick(ev)}>
         <span class="back-button-inner">
           { backButtonIcon && <ion-icon icon={backButtonIcon}/> }
           { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
-          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
         </span>
       </button>
     );