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.ios.scss

@@ -4,7 +4,7 @@
 // iOS Menu Button
 // --------------------------------------------------
 
-.menu-button-ios .menu-button-inner {
+.menu-button-inner {
   @include padding(0);
   @include margin(2px, 0, 0, 0);
 
@@ -27,7 +27,7 @@
   }
 }
 
-.menu-button-ios ion-icon {
+ion-icon {
   @include padding(0);
   @include margin(0, -3px, 0, 0);
 

core/src/components/menu-button/menu-button.ios.vars.scss

@@ -7,4 +7,4 @@
 $menu-button-ios-button-z-index:      $z-index-toolbar-buttons !default;
 
 /// @prop - Text color of the Menu button
-$menu-button-ios-color:               ion-color($colors-ios, primary, base, ios) !default;
+$menu-button-ios-color:               ion-color(primary, base) !default;

core/src/components/menu-button/menu-button.md.scss

@@ -4,7 +4,7 @@
 // MD Menu Button
 // --------------------------------------------------
 
-.menu-button-md .menu-button-inner {
+.menu-button-inner {
   @include margin(2px, 6px, 0, 0);
   @include padding(0, 5px);
 
@@ -25,11 +25,11 @@
   }
 }
 
-.menu-button-md ion-icon {
+ion-icon {
   @include padding-horizontal(null, 0.3em);
   @include margin(0);
   @include padding(0, 6px);
-  @include text-align(start);
+  text-align: start;
 
   font-size: 24px;
   font-weight: normal;

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;
 }

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>
     );
   }