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

@@ -1,10 +1,11 @@
 import { Component } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-buttons',
-  host: {
-    theme: 'bar-buttons'
-  }
+  styleUrls: {
+    ios: 'buttons.ios.scss',
+    md: 'buttons.md.scss'
+  },
+  scoped: true,
 })
 export class Buttons {}