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

@@ -8,6 +8,7 @@ import {
   Watch
 } from '@stencil/core';
 import { Color, Mode, StyleEvent } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-label',
@@ -15,9 +16,7 @@ import { Color, Mode, StyleEvent } from '../../interface';
     ios: 'label.ios.scss',
     md: 'label.md.scss'
   },
-  host: {
-    theme: 'label'
-  }
+  scoped: true
 })
 export class Label {
   @Element() el!: HTMLElement;
@@ -56,7 +55,8 @@ export class Label {
   @Watch('position')
   positionChanged() {
     const position = this.position;
-    return this.ionStyle.emit({
+    this.ionStyle.emit({
+      'label': true,
       [`label-${position}`]: !!position
     });
   }
@@ -65,8 +65,8 @@ export class Label {
     const position = this.position;
     return {
       class: {
+        ...createColorClasses(this.color),
         [`label-${position}`]: !!position,
-        [`label-${this.mode}-${position}`]: !!position
       }
     };
   }