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/css/padding.scss

@@ -0,0 +1,108 @@
+@import "../themes/ionic.globals";
+@import "../themes/ionic.mixins";
+
+$padding: var(--ion-padding, 16px);
+$margin: var(--ion-margin, 16px);
+
+[no-padding] {
+  @include padding(0);
+
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+
+[padding] {
+  @include padding($padding);
+
+  --padding-start: #{$padding};
+  --padding-end: #{$padding};
+  --padding-top: #{$padding};
+  --padding-bottom: #{$padding};
+}
+
+[padding-top] {
+  @include padding($padding, null, null, null);
+
+  --padding-top: #{$padding};
+}
+
+[padding-start] {
+  @include padding-horizontal($padding, null);
+
+  --padding-start: #{$padding};
+}
+
+[padding-end] {
+  @include padding-horizontal(null, $padding);
+
+  --padding-end: #{$padding};
+}
+
+[padding-bottom] {
+  @include padding(null, null, $padding, null);
+
+  --padding-bottom: #{$padding};
+}
+
+[padding-vertical] {
+  @include padding($padding, null, $padding, null);
+
+  --padding-top: #{$padding};
+  --padding-bottom: #{$padding};
+}
+
+[padding-horizontal] {
+  @include padding-horizontal($padding);
+
+  --padding-start: #{$padding};
+  --padding-end: #{$padding};
+}
+
+
+// Content Margin
+// --------------------------------------------------
+
+ion-app [no-margin] {
+  @include margin(0);
+}
+
+[margin] {
+  @include margin($margin);
+}
+
+[margin-top] {
+  @include margin($margin, null, null, null);
+}
+
+[margin-left] {
+  // scss-lint:disable PropertySpelling
+  margin-left: $margin;
+}
+
+[margin-start] {
+  @include margin-horizontal($margin, null);
+}
+
+[margin-right] {
+  // scss-lint:disable PropertySpelling
+  margin-right: $margin;
+}
+
+[margin-end] {
+  @include margin-horizontal(null, $margin);
+}
+
+[margin-bottom] {
+  @include margin(null, null, $margin, null);
+}
+
+[margin-vertical] {
+  @include margin($margin, null, $margin, null);
+}
+
+[margin-horizontal] {
+  @include margin-horizontal($margin);
+}
+