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

@@ -3,24 +3,51 @@
 // Checkbox
 // --------------------------------------------------
 
-ion-checkbox {
+:host {
+  --ion-color-base: #{ion-color(primary, base)};
+  --ion-color-contrast: #{ion-color(primary, contrast)};
+
+  --background: var(--unchecked-backgroud);
+  --border-color: var(--unchecked-border-color);
+
+  --checked-border-color: #{current-color(base)};
+  --checked-background: #{current-color(base)};
+
   position: relative;
   display: inline-block;
 }
 
-ion-checkbox input {
-  @include position(0, null, null, 0);
-  @include margin(0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-
-  appearance: none;
+:host(.checkbox-checked) {
+  --background: var(--checked-background);
+  --border-color: var(--checked-border-color);
+}
+
+:host(.checkbox-checked) .checkbox-inner {
+  opacity: 1;
+}
+
+input {
+  @include input-cover();
+}
+
+.checkbox-icon {
+  @include border-radius(var(--border-radius));
+
+  position: relative;
+
+  width: var(--size);
+  height: var(--size);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background-color: var(--background);
+
+  contain: strict;
+}
+
+.checkbox-inner {
+  border-color: #{current-color(contrast)};
+  opacity: 0;
 }