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

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Config } from '../../interface';
+import { Config, Mode } from '../../interface';
 
 @Component({
   tag: 'ion-menu-button',
@@ -7,13 +7,13 @@ import { Config } from '../../interface';
     ios: 'menu-button.ios.scss',
     md: 'menu-button.md.scss'
   },
-  host: {
-    theme: 'menu-button'
-  }
+  shadow: true
 })
 export class MenuButton {
-  @Prop({ context: 'config' })
-  config!: Config;
+
+  mode!: Mode;
+
+  @Prop({ context: 'config' }) config!: Config;
 
   /**
    * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
@@ -29,11 +29,11 @@ export class MenuButton {
     const menuIcon = this.config.get('menuIcon', 'menu');
     return (
       <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
-        <ion-button>
+        <button>
           <slot>
             <ion-icon icon={menuIcon} slot="icon-only" />
           </slot>
-        </ion-button>
+        </button>
       </ion-menu-toggle>
     );
   }