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/menu-button/menu-button.scss

@@ -3,14 +3,22 @@
 // Menu Button
 // --------------------------------------------------
 
-.menu-button button {
+:host {
+  pointer-events: all;
+}
+
+button {
   @include font-smoothing();
-  @include text-align(center);
-  @include appearance(none);
+  text-align: center;
+
+  margin: 0;
+  padding: 0;
 
   position: relative;
   z-index: 0;
-  display: inline-flex;
+  display: flex;
+  color: inherit;
+
   flex-flow: row nowrap;
   flex-shrink: 0;
   align-items: center;
@@ -24,13 +32,13 @@
   text-overflow: ellipsis;
   text-transform: none;
 
+  background: transparent;
+
   white-space: nowrap;
   cursor: pointer;
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  transition: background-color, opacity 100ms linear;
 
   font-kerning: none;
   user-select: none;
+
+  appearance: none;
 }