Use "sass:meta" for type-of function

Calling global `type-of` is deprecated. This uses "sass:meta" instead.

scss/components/_button.scss

@@ -6,6 +6,8 @@
 /// @group button
 ////
 
+@use "sass:meta";
+
 /// Font family for button elements.
 /// @type Font
 $button-font-family: inherit !default;
@@ -109,7 +111,7 @@ $button-responsive-expanded: false !default;
   text-align: center;
   cursor: pointer;
 
-  @if (type-of($button-padding) == 'map') {
+  @if (meta.type-of($button-padding) == 'map') {
     @each $size, $padding in $button-padding {
       @include breakpoint($size) {
         padding: $padding;

scss/components/_close-button.scss

@@ -6,6 +6,8 @@
 /// @group close-button
 ////
 
+@use "sass:meta";
+
 /// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
 /// @type List
 $closebutton-position: right top !default;
@@ -63,7 +65,7 @@ $closebutton-color-hover: $black !default;
 /// @return {Number} The given number or the value found in the map.
 @function -zf-get-size-val($value, $size) {
   // Check if the value is a number
-  @if type-of($value) == 'number' {
+  @if meta.type-of($value) == 'number' {
     // If it is, just return the number
     @return $value;
   }

scss/components/_dropdown-menu.scss

@@ -6,6 +6,8 @@
 /// @group dropdown-menu
 ////
 
+@use "sass:meta";
+
 /// Enables arrows for items with dropdown menus.
 /// @type Boolean
 $dropdownmenu-arrows: true !default;
@@ -260,7 +262,7 @@ $dropdown-menu-item-background-active: transparent !default;
       }
     }
 
-    @if (type-of($dropdownmenu-border-width) == 'number') {
+    @if (meta.type-of($dropdownmenu-border-width) == 'number') {
       .is-dropdown-submenu {
         margin-top: (-$dropdownmenu-border-width);
       }

scss/components/_responsive-embed.scss

@@ -6,6 +6,8 @@
 /// @group responsive-embed
 ////
 
+@use "sass:meta";
+
 /// Margin below a responsive embed container.
 /// @type Number
 $responsive-embed-margin-bottom: rem-calc(16) !default;
@@ -20,7 +22,7 @@ $responsive-embed-ratios: (
 /// Creates a responsive embed container.
 /// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
 @mixin responsive-embed($ratio: default) {
-  @if type-of($ratio) == 'string' {
+  @if meta.type-of($ratio) == 'string' {
     $ratio: map-get($responsive-embed-ratios, $ratio);
   }
   position: relative;

scss/grid/_classes.scss

@@ -6,6 +6,8 @@
 /// @group grid
 ////
 
+@use "sass:meta";
+
 /// Outputs CSS classes for the grid.
 /// @access private
 @mixin foundation-grid(
@@ -59,7 +61,7 @@
       @include grid-row-size(expand);
     }
 
-    @if type-of($grid-column-gutter) == 'map' {
+    @if meta.type-of($grid-column-gutter) == 'map' {
       // Static (unresponsive) row gutters
       //
       @each $breakpoint, $value in $grid-column-gutter {

scss/grid/_layout.scss

@@ -6,6 +6,8 @@
 /// @group grid
 ////
 
+@use "sass:meta";
+
 /// Sizes child elements so that `$n` number of items appear on each row.
 ///
 /// @param {Number} $n - Number of elements to display per row.
@@ -26,7 +28,7 @@
     // If a $gutter value is passed
     @if($gutter) {
       // Gutters
-      @if type-of($gutter) == 'map' {
+      @if meta.type-of($gutter) == 'map' {
         @each $breakpoint, $value in $gutter {
           $padding: rem-calc($value) * 0.5;
 
@@ -36,7 +38,7 @@
           }
         }
       }
-      @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+      @else if meta.type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
         $padding: rem-calc($gutter) * 0.5;
         padding-right: $padding;
         padding-left: $padding;

scss/grid/_position.scss

@@ -6,6 +6,8 @@
 /// @group grid
 ////
 
+@use "sass:meta";
+
 /// Reposition a column.
 ///
 /// @param {Number|Keyword} $position - It can be:
@@ -31,7 +33,7 @@
   }
 
   // Push/pull
-  @else if type-of($position) == 'number' {
+  @else if meta.type-of($position) == 'number' {
     $offset: percentage(divide($position, $grid-column-count));
 
     position: relative;

scss/util/_breakpoint.scss

@@ -6,6 +6,8 @@
 /// @group breakpoints
 ////
 
+@use "sass:meta";
+
 /// Patch to fix issue #12080
 $-zf-size: null;
 
@@ -78,7 +80,7 @@ $breakpoint-classes: (small medium large) !default;
   }
 
   // If a breakpoint name is given, get its value from the $breakpoints/$breakpoints-hidpi map.
-  @if type-of($bp) == 'string' {
+  @if meta.type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
       $name: $bp;
       $bp: map-get($breakpoints, $name);
@@ -250,7 +252,7 @@ $breakpoint-classes: (small medium large) !default;
   $next-number: null;
 
   @each $k, $v in $map {
-    @if type-of($v) == 'number' and $v > $number and ($next-number == null or $v < $next-number) {
+    @if meta.type-of($v) == 'number' and $v > $number and ($next-number == null or $v < $next-number) {
       $next-number: $v;
     }
   }
@@ -317,14 +319,14 @@ $breakpoint-classes: (small medium large) !default;
 /// @return {Mixed} The corresponding breakpoint value.
 @function -zf-get-bp-val($map, $value) {
   // If the given map is a single value, return it
-  @if type-of($map) == 'number' {
+  @if meta.type-of($map) == 'number' {
     @return $map;
   }
 
 
   // Check if the breakpoint name exists globally
   @if not map-has-key($breakpoints, $value) {
-    @if type-of($value) == 'number' {
+    @if meta.type-of($value) == 'number' {
       $value: -zf-closest-named-breakpoint($value);
     } @else {
       @return null;
@@ -369,7 +371,7 @@ $breakpoint-classes: (small medium large) !default;
   @if ($value != null) {
     @return $value;
   }
-  @else if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+  @else if (variable-exists(-zf-size) and meta.type-of($-zf-size) != 'number') and $-zf-size != null {
     @return $-zf-size;
   }
   @else {

scss/util/_math.scss

@@ -3,6 +3,7 @@
 // Licensed under MIT Open Source
 
 @use "sass:math";
+@use "sass:meta";
 
 ////
 /// @group functions
@@ -80,7 +81,7 @@
 /// @return {List} List of parsed values with numerator at first position and denumerator as second. These values may be null.
 @function zf-parse-fraction($fraction) {
 
-  @if type-of($fraction) == 'number' {
+  @if meta.type-of($fraction) == 'number' {
     // "50%"
     @if unit($fraction) == '%' {
       @return (strip-unit($fraction), 100);
@@ -97,11 +98,11 @@
     }
   }
 
-  @else if type-of($fraction) == 'list' {
+  @else if meta.type-of($fraction) == 'list' {
     // "50 of 100", "50/100"...
     @if length($fraction) == 3
-    and type-of(nth($fraction, 1) == 'number')
-    and type-of(nth($fraction, 3) == 'number') {
+    and meta.type-of(nth($fraction, 1) == 'number')
+    and meta.type-of(nth($fraction, 3) == 'number') {
       @return (nth($fraction, 1), nth($fraction, 3));
     }
   }
@@ -137,7 +138,7 @@
     @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
   }
   @if $parsed-denominator == null {
-    @if type-of($denominator) == 'number' {
+    @if meta.type-of($denominator) == 'number' {
       $parsed-denominator: $denominator;
     }
     @else {

scss/util/_mixins.scss

@@ -7,6 +7,7 @@
 ////
 
 @use "sass:color";
+@use "sass:meta";
 
 // Patch to fix issue #12080
 $-zf-bp-value: null;
@@ -301,15 +302,15 @@ $-zf-bp-value: null;
   @if $breakpoints == auto {
     $-list: $breakpoint-classes;
   }
-  @else if type-of($breakpoints) == 'list' {
+  @else if meta.type-of($breakpoints) == 'list' {
     $-list: $breakpoints;
   }
-  @else if type-of($breakpoints) == 'string' {
+  @else if meta.type-of($breakpoints) == 'string' {
     $-list: ($breakpoints);
     $-breakpoints-is-a-list: false;
   }
   @else {
-    @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
+    @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{meta.type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
   }
 
   // Add or remove the zero breakpoint according to `$zero-breakpoint`
@@ -351,7 +352,7 @@ $-zf-bp-value: null;
   $name: auto,
   $map: null
 ) {
-  @if $name == auto and type-of($map) == 'map' {
+  @if $name == auto and meta.type-of($map) == 'map' {
     // "auto"
     @each $k, $v in $map {
       @include breakpoint($k) {
@@ -363,7 +364,7 @@ $-zf-bp-value: null;
   }
   @else {
     // breakpoint name
-    @if type-of($name) == 'string' {
+    @if meta.type-of($name) == 'string' {
       $bp-value: -zf-get-bp-val($map, $name);
       @if $bp-value != null {
         $name: $bp-value;

scss/util/_unit.scss

@@ -2,6 +2,7 @@
 // https://get.foundation
 // Licensed under MIT Open Source
 
+@use "sass:meta";
 @import 'math';
 
 $unit-warnings: true !default;
@@ -78,7 +79,7 @@ $global-font-size: 100% !default;
 /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
 @function -zf-to-rem($value, $base: null) {
   // Check if the value is a number
-  @if type-of($value) != 'number' {
+  @if meta.type-of($value) != 'number' {
     @if $unit-warnings {
       @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
     }

scss/util/_value.scss

@@ -6,6 +6,8 @@
 /// @group functions
 ////
 
+@use "sass:meta";
+
 /// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
 ///
 /// @param {Mixed} $val - Value to check.
@@ -15,10 +17,10 @@
   @if $val == null or $val == none {
     @return false;
   }
-  @if type-of($val) == 'number' and strip-unit($val) == 0 {
+  @if meta.type-of($val) == 'number' and strip-unit($val) == 0 {
     @return false;
   }
-  @if type-of($val) == 'list' and length($val) == 0 {
+  @if meta.type-of($val) == 'list' and length($val) == 0 {
     @return false;
   }
   @return true;
@@ -56,7 +58,7 @@
 @function get-border-value($val, $elem) {
   // Find the width, style, or color and return it
   @each $v in $val {
-    $type: type-of($v);
+    $type: meta.type-of($v);
     @if $elem == width and $type == 'number' {
       @return $v;
     }
@@ -100,7 +102,7 @@
 @function map-to-list($map, $keep: 'both') {
   $keep: if(index('keys' 'values', $keep), $keep, 'both');
 
-  @if type-of($map) == 'map' {
+  @if meta.type-of($map) == 'map' {
     $keys: ();
     $values: ();
 
@@ -120,7 +122,7 @@
     }
   }
 
-  @return if(type-of($map) != 'list', ($value,), $map);
+  @return if(meta.type-of($map) != 'list', ($value,), $map);
 
 }
 
@@ -160,7 +162,7 @@
 ///
 /// @returns {List} Found value.
 @function map-safe-get($map, $key) {
-  @if (type-of($map) == 'map' or (type-of($map) == 'list' and length($map) == 0)) {
+  @if (meta.type-of($map) == 'map' or (meta.type-of($map) == 'list' and length($map) == 0)) {
     @if (map-has-key($map, $key)) {
       @return map-get($map, $key);
     }

scss/xy-grid/_cell.scss

@@ -6,6 +6,8 @@
 /// @group xy-grid
 ////
 
+@use "sass:meta";
+
 /// Returns the appropriate CSS flex value for a cell base.
 ///
 /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
@@ -96,7 +98,7 @@
 
   // Calculate the cell CSS size including gutters (string)
   // If the cell has responsive margin gutters, return a responsive map of sizes.
-  @if type-of($margin-gutter) == 'map' {
+  @if meta.type-of($margin-gutter) == 'map' {
     $responsive-css-sizes: ();
 
     @each $bp, $mg in $margin-gutter {
@@ -167,7 +169,7 @@
   $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
   $direction: if($vertical == true, height, width);
 
-  @if (type-of($sizes) == 'map') {
+  @if (meta.type-of($sizes) == 'map') {
     @include -zf-breakpoint-value(auto, $sizes) {
       #{$direction}: $-zf-bp-value;
     }