fix(styles): use list.nth, match.floor and math.unit (#18819)

Author: 2nikhiltom

packages/grid/scss/_breakpoint.scss

@@ -19,7 +19,7 @@
 /// @group @carbon/layout
 @function -key-by-index($map, $index) {
   $keys: map.keys($map);
-  @return nth($keys, $index);
+  @return list.nth($keys, $index);
 }
 
 /// Get the value of the next breakpoint, or null for the last breakpoint

packages/grid/scss/_flex-grid.scss

@@ -281,7 +281,7 @@
 /// @group @carbon/layout
 @function -key-by-index($map, $index) {
   $keys: map.keys($map);
-  @return nth($keys, $index);
+  @return list.nth($keys, $index);
 }
 
 /// Generate the CSS for a grid for the given breakpoints and gutters

packages/layout/scss/_convert.scss

@@ -20,7 +20,7 @@ $base-font-size: 16px !default;
 /// @access public
 /// @group @carbon/layout
 @function to-rem($px) {
-  @if unit($px) != 'px' {
+  @if math.unit($px) != 'px' {
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
@@ -35,7 +35,7 @@ $base-font-size: 16px !default;
 /// @deprecated
 /// @group @carbon/layout
 @function rem($px) {
-  @if unit($px) != 'px' {
+  @if math.unit($px) != 'px' {
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
@@ -48,7 +48,7 @@ $base-font-size: 16px !default;
 /// @access public
 /// @group @carbon/layout
 @function em($px) {
-  @if unit($px) != 'px' {
+  @if math.unit($px) != 'px' {
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 

packages/layout/scss/_utilities.scss

@@ -28,7 +28,7 @@
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
   $keys: map.keys($map);
-  @return nth($keys, $index);
+  @return list.nth($keys, $index);
 }
 
 /// Pass in a map, and get the last one in the list back

packages/type/scss/_scale.scss

@@ -7,6 +7,7 @@
 
 @use '@carbon/layout';
 @use 'sass:list';
+@use 'sass:math';
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step
@@ -18,7 +19,7 @@
     @return 12px;
   }
   // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
-  @return get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2;
+  @return get-type-size($step - 1) + (math.floor(($step - 2) * 0.25) + 1) * 2;
 }
 
 /// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
@@ -36,7 +37,7 @@ $type-scale: ();
 /// @access public
 /// @group @carbon/type
 @function type-scale($step) {
-  @return nth($type-scale, $step);
+  @return list.nth($type-scale, $step);
 }
 
 /// Set the font-size value of a selector with the value at the given `$step`