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/tab/tab.tsx

@@ -42,7 +42,7 @@ export class Tab {
   /**
    * The badge color for the tab button.
    */
-  @Prop() badgeColor: Color = 'default';
+  @Prop() badgeColor?: Color;
 
   /**
    * The component to display inside of the tab.
@@ -62,7 +62,7 @@ export class Tab {
   /**
    * If true, the tab will be selected. Defaults to `false`.
    */
-  @Prop({ mutable: true }) selected = false;
+  @Prop() selected = false;
 
   @Watch('selected')
   selectedChanged(selected: boolean) {