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

@@ -1,5 +1,6 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, State } from '@stencil/core';
-import { GestureDetail, QueueController } from '../../interface';
+import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State } from '@stencil/core';
+import { GestureDetail, Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 const enum RefresherState {
   Inactive = 1 << 0,
@@ -17,9 +18,6 @@ const enum RefresherState {
   styleUrls: {
     ios: 'refresher.ios.scss',
     md: 'refresher.md.scss'
-  },
-  host: {
-    theme: 'refresher'
   }
 })
 export class Refresher {
@@ -27,9 +25,11 @@ export class Refresher {
   private appliedStyles = false;
   private didStart = false;
   private progress = 0;
-  private scrollEl: HTMLElement | null = null;
+  private scrollEl?: HTMLIonScrollElement;
 
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  mode!: Mode;
+
+  @Prop({ context: 'queue' }) queue!: QueueApi;
 
   /**
    * The current state which the refresher is in. The refresher's states include:
@@ -93,7 +93,7 @@ export class Refresher {
    */
   @Event() ionStart!: EventEmitter<void>;
 
-  componentDidLoad() {
+  async componentDidLoad() {
     if (this.el.getAttribute('slot') !== 'fixed') {
       console.error('Make sure you use: <ion-refresher slot="fixed">');
       return;
@@ -103,14 +103,17 @@ export class Refresher {
       console.error('ion-refresher is not attached');
       return;
     }
-    this.scrollEl = parentElement.querySelector('ion-scroll') as HTMLElement;
-    if (!this.scrollEl) {
+    const contentEl = parentElement.querySelector('ion-content');
+    if (contentEl) {
+      await contentEl.componentOnReady();
+      this.scrollEl = contentEl.getScrollElement();
+    } else {
       console.error('ion-refresher didn\'t attached, make sure if parent is a ion-content');
     }
   }
 
   componentDidUnload() {
-    this.scrollEl = null;
+    this.scrollEl = undefined;
   }
 
   /**
@@ -333,6 +336,8 @@ export class Refresher {
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'refresher'),
+
         'refresher-active': this.state !== RefresherState.Inactive,
         'refresher-pulling': this.state === RefresherState.Pulling,
         'refresher-ready': this.state === RefresherState.Ready,