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

@@ -3,19 +3,15 @@ import { Component, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-grid',
-  styleUrls: {
-    ios: 'grid.ios.scss',
-    md: 'grid.md.scss'
-  },
-  host: {
-    theme: 'grid'
-  }
+  styleUrl: 'grid.scss',
+  shadow: true
 })
 export class Grid {
+
   /**
    * If true, the grid will have a fixed width based on the screen size. Defaults to `false`.
    */
-  @Prop() fixed?: boolean;
+  @Prop() fixed = false;
 
   hostData() {
     return {
@@ -24,4 +20,8 @@ export class Grid {
       }
     };
   }
+
+  render() {
+    return <slot></slot>;
+  }
 }