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-controller/animations/overlay.ts

@@ -30,8 +30,6 @@ export function menuOverlayAnimation(Animation: Animation, _: HTMLElement, menu:
     .addElement(menu.backdropEl)
     .fromTo('opacity', 0.01, 0.3);
 
-
-
   return baseAnimation(Animation).then(animation => {
     return animation.add(menuAni)
       .add(backdropAni);