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/split-pane/split-pane.scss

@@ -43,23 +43,6 @@
   display: none;
 }
 
-.split-pane-visible > ion-menu {
-  > .menu-inner {
-    @include position-horizontal(0, 0);
-
-    // scss-lint:disable ImportantRule
-    width: auto;
-
-    box-shadow: none !important;
-    transform: none !important;
-  }
-
-  > .ion-backdrop {
-    // scss-lint:disable ImportantRule
-    display: hidden !important;
-  }
-}
-
 .split-pane-visible > .split-pane-side[side=start] {
   @include multi-dir() {
     order: -1;