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/css/float-elements.scss

@@ -0,0 +1,28 @@
+@import "../themes/ionic.globals";
+@import "../themes/ionic.mixins";
+
+
+// Creates text transform attributes based on screen size
+@each $breakpoint in map-keys($screen-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
+
+  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
+    // Provide `[float-{bp}]` attributes for floating the element based
+    // on the breakpoint
+    [float#{$infix}-left] {
+      @include float(left, !important);
+    }
+
+    [float#{$infix}-right] {
+      @include float(right, !important);
+    }
+
+    [float#{$infix}-start] {
+      @include float(start, !important);
+    }
+
+    [float#{$infix}-end] {
+      @include float(end, !important);
+    }
+  }
+}