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/themes/ionic.functions.string.scss

@@ -1,3 +1,7 @@
+
+// String Util Functions
+// --------------------------------------------------
+
 // String Replace Function
 // --------------------------------------------------
 
@@ -36,24 +40,8 @@
   @return $split-arr;
 }
 
-@function str-last-index($str, $search) {
-  $split: str-split($str, $search);
-  $len: length($split);
 
-  @if ($len > 1) {
-    $count: 0;
-    @for $i from 1 through ($len - 1) {
-      $item: nth($split, $i);
-      $count: $count + str-length($item);
-    }
-
-    @return $count + $len;
-  } @else {
-    @error "str-last-index was unable to find any instances of '#{$search}' inside '#{$str}'";
-  }
-}
-
-// Str extract between start and end
+// Str Extract Function
 // --------------------------------------------------
 
 @function str-extract($string, $start, $end) {
@@ -71,6 +59,10 @@
   @return null;
 }
 
+
+// Str Contains Function
+// --------------------------------------------------
+
 @function str-contains($string, $needle) {
   @if (type-of($string) == string) {
     @return str-index($string, $needle) != null;
@@ -78,3 +70,12 @@
 
   @return false;
 }
+
+// URL Encode Function
+// --------------------------------------------------
+
+@function url-encode($val) {
+  $spaces: str-replace($val, " ", "%20");
+  $encoded: str-replace($spaces, "#", "%23");
+  @return $encoded;
+}