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

@@ -1,6 +1,7 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { CheckboxInput, CheckedInputChangeEvent, Color, CssClassMap, Mode, StyleEvent } from '../../interface';
+import { CheckboxInput, CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 
 @Component({
@@ -9,9 +10,7 @@ import { deferEvent } from '../../utils/helpers';
     ios: 'checkbox.ios.scss',
     md: 'checkbox.md.scss'
   },
-  host: {
-    theme: 'checkbox'
-  }
+  shadow: true
 })
 export class Checkbox implements CheckboxInput {
 
@@ -94,8 +93,8 @@ export class Checkbox implements CheckboxInput {
   @Watch('disabled')
   emitStyle() {
     this.ionStyle.emit({
-      'checkbox-disabled': this.disabled,
       'checkbox-checked': this.checked,
+      'interactive-disabled': this.disabled,
     });
   }
 
@@ -119,21 +118,19 @@ export class Checkbox implements CheckboxInput {
   hostData() {
     return {
       class: {
+        ...createColorClasses(this.color),
+        'in-item': hostContext('.item', this.el),
         'checkbox-checked': this.checked,
         'checkbox-disabled': this.disabled,
-        'checkbox-key': this.keyFocus
+        'checkbox-key': this.keyFocus,
+        'interactive': true
       }
     };
   }
 
   render() {
-    const checkboxClasses: CssClassMap = {
-      'checkbox-icon': true,
-      'checkbox-checked': this.checked
-    };
-
     return [
-      <div class={checkboxClasses}>
+      <div class="checkbox-icon">
         <div class="checkbox-inner"></div>
       </div>,
       <input