From b3f7345f3f4b91ac9ac1d48e0896415c643f538e Mon Sep 17 00:00:00 2001
From: Petrik <petrik@deheus.net>
Date: Tue, 14 Jan 2025 17:37:38 +0100
Subject: [PATCH] Use "sass:math" for `percentage` function

Calling global `percentage` is deprecated. This uses "sass:math" instead.
---
 scss/components/_button-group.scss | 4 +++-
 scss/grid/_flex-grid.scss          | 4 +++-
 scss/grid/_layout.scss             | 4 +++-
 scss/grid/_position.scss           | 4 +++-
 scss/util/_math.scss               | 2 +-
 scss/util/_mixins.scss             | 3 ++-
 scss/xy-grid/_layout.scss          | 4 +++-
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 05df9be7f4..37ddca6eb0 100644
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -6,6 +6,8 @@
 /// @group button-group
 ////
 
+@use "sass:math";
+
 /// Margin for button groups.
 /// @type Number
 $buttongroup-margin: 1rem !default;
@@ -131,7 +133,7 @@ $buttongroup-radius-on-each: true !default;
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
             display: inline-block;
-            width: calc(#{percentage(divide(1, $i))} - #{$spacing});
+            width: calc(#{math.percentage(divide(1, $i))} - #{$spacing});
             margin-#{$global-right}: $spacing;
 
             &:last-child {
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index b9193bfa00..7433c084e5 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -6,6 +6,8 @@
 /// @group flex-grid
 ////
 
+@use "sass:math";
+
 /// Creates a container for a flex grid row.
 ///
 /// @param {Keyword|List} $behavior [null]
@@ -103,7 +105,7 @@
   flex-wrap: wrap;
 
   > #{$selector} {
-    $pct: percentage(divide(1, $n));
+    $pct: math.percentage(divide(1, $n));
 
     flex: 0 0 $pct;
     max-width: $pct;
diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index ba8e2812e8..a833faceb1 100644
--- a/scss/grid/_layout.scss
+++ b/scss/grid/_layout.scss
@@ -6,6 +6,8 @@
 /// @group grid
 ////
 
+@use "sass:math";
+
 /// Sizes child elements so that `$n` number of items appear on each row.
 ///
 /// @param {Number} $n - Number of elements to display per row.
@@ -21,7 +23,7 @@
 ) {
   & > #{$selector} {
     float: $global-left;
-    width: percentage(divide(1, $n));
+    width: math.percentage(divide(1, $n));
 
     // If a $gutter value is passed
     @if($gutter) {
diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index c277bb1927..fe95707ecf 100644
--- a/scss/grid/_position.scss
+++ b/scss/grid/_position.scss
@@ -6,6 +6,8 @@
 /// @group grid
 ////
 
+@use "sass:math";
+
 /// Reposition a column.
 ///
 /// @param {Number|Keyword} $position - It can be:
@@ -32,7 +34,7 @@
 
   // Push/pull
   @else if type-of($position) == 'number' {
-    $offset: percentage(divide($position, $grid-column-count));
+    $offset: math.percentage(divide($position, $grid-column-count));
 
     position: relative;
     #{$global-left}: $offset;
diff --git a/scss/util/_math.scss b/scss/util/_math.scss
index b0632b8793..9e1c7395a8 100644
--- a/scss/util/_math.scss
+++ b/scss/util/_math.scss
@@ -145,7 +145,7 @@
     }
   }
 
-  @return percentage(divide($parsed-nominator, $parsed-denominator));
+  @return math.percentage(divide($parsed-nominator, $parsed-denominator));
 }
 
 /// Divide the given `$divident` by the given `$divisor`.
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index cb9f37d1d1..0841be9383 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -7,6 +7,7 @@
 ////
 
 @use "sass:color";
+@use "sass:math";
 
 // Patch to fix issue #12080
 $-zf-bp-value: null;
@@ -197,7 +198,7 @@ $-zf-bp-value: null;
   @for $i from 2 through $max {
     &:nth-last-child(#{$i}):first-child,
     &:nth-last-child(#{$i}):first-child ~ #{$elem} {
-      width: percentage(divide(1, $i));
+      width: math.percentage(divide(1, $i));
     }
   }
 }
diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss
index d62e797c10..efd2de4286 100644
--- a/scss/xy-grid/_layout.scss
+++ b/scss/xy-grid/_layout.scss
@@ -6,6 +6,8 @@
 /// @group xy-grid
 ////
 
+@use "sass:math";
+
 /// Sizes child elements so that `$n` number of items appear on each row.
 ///
 /// @param {Number} $n - Number of elements to display per row.
@@ -28,7 +30,7 @@
   $vertical: false,
   $output: (base size gutters)
 ) {
-  $size: percentage(divide(1, $n));
+  $size: math.percentage(divide(1, $n));
 
   & > #{$selector} {
     @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);