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/segment-button/segment-button.tsx

@@ -1,15 +1,13 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 import { Color, Mode } from '../../interface';
-import { createThemedClasses, getElementClassMap } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 
 let ids = 0;
 
 @Component({
   tag: 'ion-segment-button',
-  styleUrls: {
-    ios: 'segment-button.ios.scss',
-    md: 'segment-button.md.scss'
-  }
+  styleUrl: 'segment-button.scss',
+  shadow: true
 })
 export class SegmentButton {
 
@@ -37,12 +35,6 @@ export class SegmentButton {
    */
   @Prop() disabled = false;
 
-  /**
-   * Contains a URL or a URL fragment that the hyperlink points to.
-   * If this property is set, an anchor tag will be rendered.
-   */
-  @Prop() href?: string;
-
   /**
    * The value of the segment button.
    */
@@ -60,33 +52,28 @@ export class SegmentButton {
     }
   }
 
-  render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
-    const hostClasses = getElementClassMap(this.el.classList);
-
-    const buttonClasses = {
-      'segment-button-disabled': this.disabled,
-      'segment-checked': this.checked,
-      ...themedClasses,
-      ...hostClasses,
+  hostData() {
+    const { disabled, checked, color } = this;
+    return {
+      class: {
+        ...createColorClasses(color),
+        'segment-button-disabled': disabled,
+        'segment-checked': checked,
+      },
+      'tappable': true,
     };
+  }
 
-    const TagType = this.href ? 'a' : 'button';
-    const attrs = (TagType === 'button')
-      ? {type: 'button'}
-      : {};
-
+  render() {
     return [
-      <TagType
-       {...attrs}
+      <button
         aria-pressed={this.checked}
-        class={buttonClasses}
+        class="segment-button-native"
         disabled={this.disabled}
-        href={this.href}
         onClick={() => this.checked = true }>
           <slot></slot>
-          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
-      </TagType>
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
+      </button>
     ];
   }
 }