From 8e9b5711ac6af91f5b1ddf4c614b89337edc8edc Mon Sep 17 00:00:00 2001
From: Petrik <petrik@deheus.net>
Date: Tue, 14 Jan 2025 17:08:32 +0100
Subject: [PATCH] Use "sass:meta" for `type-of` function

Calling global `type-of` is deprecated. This uses "sass:meta" instead.
---
 scss/components/_button.scss           |  4 +++-
 scss/components/_close-button.scss     |  4 +++-
 scss/components/_dropdown-menu.scss    |  4 +++-
 scss/components/_responsive-embed.scss |  4 +++-
 scss/grid/_classes.scss                |  4 +++-
 scss/grid/_layout.scss                 |  6 ++++--
 scss/grid/_position.scss               |  4 +++-
 scss/util/_breakpoint.scss             | 12 +++++++-----
 scss/util/_math.scss                   | 11 ++++++-----
 scss/util/_mixins.scss                 | 11 ++++++-----
 scss/util/_unit.scss                   |  3 ++-
 scss/util/_value.scss                  | 14 ++++++++------
 scss/xy-grid/_cell.scss                |  6 ++++--
 scss/xy-grid/_classes.scss             |  8 +++++---
 scss/xy-grid/_frame.scss               |  4 +++-
 scss/xy-grid/_gutters.scss             |  6 ++++--
 16 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 39d9a33fbd..c9192e6702 100644
--- a/scss/components/_button.scss
+++ b/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;
diff --git a/scss/components/_close-button.scss b/scss/components/_close-button.scss
index 49ad96844e..80be11d5f1 100644
--- a/scss/components/_close-button.scss
+++ b/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;
   }
diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 3d180a25cd..414648c505 100644
--- a/scss/components/_dropdown-menu.scss
+++ b/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);
       }
diff --git a/scss/components/_responsive-embed.scss b/scss/components/_responsive-embed.scss
index c710fca8e0..425adbd1dc 100644
--- a/scss/components/_responsive-embed.scss
+++ b/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;
diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 2230c5443a..1257f81061 100644
--- a/scss/grid/_classes.scss
+++ b/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 {
diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index ba8e2812e8..e6c80fd7ed 100644
--- a/scss/grid/_layout.scss
+++ b/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;
diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index c277bb1927..4e516a461a 100644
--- a/scss/grid/_position.scss
+++ b/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;
diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index c8fa336d56..d898a9df1f 100644
--- a/scss/util/_breakpoint.scss
+++ b/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 {
diff --git a/scss/util/_math.scss b/scss/util/_math.scss
index b0632b8793..77d2e139a0 100644
--- a/scss/util/_math.scss
+++ b/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 {
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index cb9f37d1d1..552135547d 100644
--- a/scss/util/_mixins.scss
+++ b/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;
diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index 75e0b13ab2..2e6332877f 100644
--- a/scss/util/_unit.scss
+++ b/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.';
     }
diff --git a/scss/util/_value.scss b/scss/util/_value.scss
index 419dbf33ea..12458011cd 100644
--- a/scss/util/_value.scss
+++ b/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);
     }
diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 1d43d69ebc..c5338c52c4 100644
--- a/scss/xy-grid/_cell.scss
+++ b/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;
     }
diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index cfee971429..81a611ee4a 100644
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -6,6 +6,8 @@
 /// @group xy-grid
 ////
 
+@use "sass:meta";
+
 // Margin Grid classes
 @mixin xy-base-grid-classes {
 
@@ -143,7 +145,7 @@
 
     // base styles need to all be before the auto and shrink styles
     @include -zf-each-breakpoint() {
-      @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
+      @if(meta.type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
         > .cell {
           @include xy-cell($vertical: $vertical, $output: (size gutters));
         }
@@ -156,7 +158,7 @@
       // for all prior breakpoints.
       // As their gutter is defined with their width/height, even breakpoint without a new margin must be
       // generated to not having their width/height overrided by re-adjusted smaller breakpoints.
-      @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+      @if(meta.type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         @each $bp in -zf-breakpoints-less-than($-zf-size) {
           @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
         }
@@ -206,7 +208,7 @@
       @for $i from 1 through $xy-block-grid-max {
         // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
         // for prior breakpoints based on the responsive gutter.
-        @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+        @if(meta.type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
           @each $bp in -zf-breakpoints-less-than($-zf-size) {
             @if(map-has-key($grid-margin-gutters, $bp)) {
               .grid-margin-x.#{$bp}-up-#{$i} {
diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss
index d596f8b513..cdaf5e117c 100644
--- a/scss/xy-grid/_frame.scss
+++ b/scss/xy-grid/_frame.scss
@@ -1,5 +1,7 @@
 // sass-lint:disable no-vendor-prefixes
 
+@use "sass:meta";
+
 /// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
 ///
 /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
@@ -22,7 +24,7 @@
     align-items: stretch;
   }
 
-  @if $breakpoint == null and type-of($gutters) == 'map' {
+  @if $breakpoint == null and meta.type-of($gutters) == 'map' {
     @include -zf-each-breakpoint() {
       @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
     }
diff --git a/scss/xy-grid/_gutters.scss b/scss/xy-grid/_gutters.scss
index 839e8746f6..0f99ef1c04 100644
--- a/scss/xy-grid/_gutters.scss
+++ b/scss/xy-grid/_gutters.scss
@@ -6,6 +6,8 @@
 /// @group xy-grid
 ////
 
+@use "sass:meta";
+
 /// Create gutters for a cell/container.
 ///
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
@@ -24,7 +26,7 @@
   $gutter-type: if($negative, 'margin', $gutter-type);
 
   // Output our margin gutters.
-  @if (type-of($gutters) == 'map') {
+  @if (meta.type-of($gutters) == 'map') {
     @include -zf-breakpoint-value(auto, $gutters) {
       $gutter: rem-calc($-zf-bp-value) * 0.5;
 
@@ -34,7 +36,7 @@
       }
     }
   }
-  @else if (type-of($gutters) == 'number') {
+  @else if (meta.type-of($gutters) == 'number') {
     $gutter: rem-calc($gutters) * 0.5;
 
     // Loop through each gutter position