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/utils/media.ts

@@ -12,7 +12,10 @@ export const SIZE_TO_MEDIA: any = {
 // Check if the window matches the media query
 // at the breakpoint passed
 // e.g. isMatch('sm') => true if screen width exceeds 576px
-export function isMatch(breakpoint: string) {
+export function isMatch(breakpoint: string | undefined) {
+  if (!breakpoint) {
+    return true;
+  }
   const mediaQuery = SIZE_TO_MEDIA[breakpoint];
   if (mediaQuery && matchMedia(mediaQuery)) {
     const media = matchMedia(mediaQuery);