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/row/row.scss

@@ -0,0 +1,9 @@
+@import "./row.vars";
+
+// Row
+// --------------------------------------------------
+
+:host {
+  display: flex;
+  flex-wrap: wrap;
+}

core/src/components/row/row.tsx

@@ -1,7 +1,12 @@
 import { Component } from '@stencil/core';
 
-
 @Component({
-  tag: 'ion-row'
+  tag: 'ion-row',
+  styleUrl: 'row.scss',
+  shadow: true
 })
-export class Row {}
+export class Row {
+  render() {
+    return <slot></slot>;
+  }
+}

core/src/components/row/row.vars.scss

@@ -0,0 +1,5 @@
+@import "../../themes/ionic.globals";
+@import "../grid/grid.mixins";
+
+// Row
+// --------------------------------------------------