Merge branch 'ROU-11323' into ROU-11324

Author: OS-pedrolourenco

core/src/components/item/item.common.scss

@@ -1,4 +1,3 @@
-@import "../../themes/functions.string";
 @import "../../themes/mixins";
 
 // Item

core/src/components/radio/radio.common.scss

@@ -1,4 +1,3 @@
-@import "../../themes/functions.string";
 @import "../../themes/mixins";
 @import "./radio.vars.scss";
 

core/src/components/range/range.common.scss

@@ -1,5 +1,4 @@
 @import "../../themes/mixins";
-@import "../../themes/functions.string";
 @import "./range.vars.scss";
 
 // Range

core/src/components/range/range.ionic.scss

@@ -12,7 +12,7 @@
   --knob-handle-size: #{globals.$ion-scale-1000};
   --bar-height: #{globals.$ion-scale-200};
   --bar-background: #{globals.$ion-primitives-neutral-100};
-  --bar-background-active: #{ion-color(primary, base)};
+  --bar-background-active: #{globals.ion-color(primary, base)};
   --bar-border-radius: #{globals.$ion-border-radius-400};
   --height: 42px;
 
@@ -31,7 +31,7 @@
 
 :host(.ion-color) .range-bar-active,
 :host(.ion-color) .range-tick-active {
-  background: current-color(base);
+  background: globals.current-color(base);
 }
 
 ::slotted(ion-icon[slot]) {
@@ -63,7 +63,7 @@
   * overlapping the range. The buffer is added to the
   * bottom of the range label instead of the host.
   */
-  @include padding(calc(#{globals.$ion-space-200} + dynamic-font(12px)), null, null, null);
+  @include padding(calc(globals.$ion-space-200 + globals.dynamic-font(12px)), null, null, null);
 }
 
 :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
@@ -72,7 +72,7 @@
   * margin to the bottom of the label, it provides a buffer
   * for the pin to move into when it is pressed.
   */
-  @include margin(null, null, calc(#{globals.$ion-space-200} + dynamic-font(12px)), null);
+  @include margin(null, null, calc(globals.$ion-space-200 + globals.dynamic-font(12px)), null);
 }
 
 .range-bar-active {
@@ -84,16 +84,16 @@
 
   &.has-ticks {
     @include border-radius(0);
-    @include margin(null, calc(-1 * #{globals.$ion-scale-100} * 0.5), null, calc(-1 * #{globals.$ion-scale-100} * 0.5));
+    @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5));
   }
 }
 
 .range-tick {
-  @include margin-horizontal(calc(#{globals.$ion-scale-100} * -0.5), null);
+  @include margin-horizontal(calc(globals.$ion-scale-100 * -0.5), null);
   @include border-radius(globals.$ion-border-radius-0);
 
   position: absolute;
-  top: calc((42px * 0.5) - (#{globals.$ion-scale-300} * 0.5));
+  top: calc((42px * 0.5) - (globals.$ion-scale-300 * 0.5));
 
   width: globals.$ion-scale-100;
   height: globals.$ion-scale-300;
@@ -113,7 +113,7 @@
 
   background: transparent;
 
-  font-size: dynamic-font(12px);
+  font-size: globals.dynamic-font(12px);
 
   text-align: center;
 
@@ -123,7 +123,7 @@
 .range-knob {
   border-width: globals.$ion-border-size-025;
   border-style: solid;
-  border-color: #{ion-color(primary, base)};
+  border-color: globals.ion-color(primary, base);
 }
 
 // Ionic Range: Disabled (based on iOS Range)

core/src/components/segment-button/segment-button.common.scss

@@ -1,4 +1,3 @@
-@import "../../themes/functions.string";
 @import "../../themes/mixins";
 
 // Segment Button: Common

core/src/components/spinner/spinner.common.scss

@@ -1,6 +1,6 @@
-@import "../../themes/functions.string";
-@import "../../themes/functions.color";
 @import "../../themes/mixins";
+// Required to use the current-color function
+@import "../../themes/functions.color";
 
 // Spinners
 // --------------------------------------------------

core/src/components/toast/toast.common.scss

@@ -1,6 +1,5 @@
 @import "../../themes/mixins";
-// Necessary for the mixins to work.
-@import "../../themes/functions.string";
+// Required to use the current-color function
 @import "../../themes/functions.color";
 
 // Toast

core/src/themes/mixins.scss

@@ -309,7 +309,7 @@
 // ----------------------------------------------------------
 @mixin svg-background-image($svg, $flip-rtl: false) {
   $url: url-encode($svg);
-  $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
+  $viewBox: string.str-split(string.str-extract($svg, "viewBox='", "'"), " ");
 
   @if $flip-rtl != true or $viewBox == null {
     @include multi-dir() {
@@ -318,9 +318,9 @@
   } @else {
     $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
     $flipped-url: $svg;
-    $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
-    $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
-    $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
+    $flipped-url: string.str-replace($flipped-url, "<path", "<path #{$transform}");
+    $flipped-url: string.str-replace($flipped-url, "<line", "<line #{$transform}");
+    $flipped-url: string.str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
     $flipped-url: url-encode($flipped-url);
 
     @include ltr() {
@@ -575,10 +575,10 @@
 
   @each $transform in $transforms {
     @if (str-index($transform, translate3d)) {
-      $transform: str-replace($transform, "translate3d(");
-      $transform: str-replace($transform, ")");
+      $transform: string.str-replace($transform, "translate3d(");
+      $transform: string.str-replace($transform, ")");
 
-      $coordinates: str-split($transform, ",");
+      $coordinates: string.str-split($transform, ",");
 
       $x: nth($coordinates, 1);
       $y: nth($coordinates, 2);