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/picker-controller/picker-controller.tsx

@@ -33,7 +33,7 @@ export class PickerController implements OverlayController {
    * Create a picker overlay with picker options.
    */
   @Method()
-  create(opts?: PickerOptions): Promise<HTMLIonPickerElement | null> {
+  create(opts?: PickerOptions): Promise<HTMLIonPickerElement> {
     return createOverlay(this.doc.createElement('ion-picker'), opts);
   }