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/backdrop/backdrop.ios.scss

@@ -1,6 +1,6 @@
 @import "./backdrop";
 @import "./backdrop.ios.vars";
 
-.backdrop-ios {
+:host {
   background-color: $backdrop-ios-color;
 }

core/src/components/backdrop/backdrop.md.scss

@@ -1,6 +1,6 @@
 @import "./backdrop";
 @import "./backdrop.md.vars";
 
-.backdrop-md {
+:host {
   background-color: $backdrop-md-color;
 }

core/src/components/backdrop/backdrop.scss

@@ -3,7 +3,7 @@
 // Backdrop
 // --------------------------------------------------
 
-ion-backdrop {
+:host {
   @include position(0, 0, 0, 0);
 
   position: absolute;

core/src/components/backdrop/backdrop.tsx

@@ -7,9 +7,7 @@ import { now } from '../../utils/helpers';
     ios: 'backdrop.ios.scss',
     md: 'backdrop.md.scss'
   },
-  host: {
-    theme: 'backdrop'
-  }
+  shadow: true
 })
 export class Backdrop {