From a3db8f7247790e00a7e0f602d5cc3ed669c1bdd5 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Thu, 19 Dec 2024 15:24:49 -0300
Subject: [PATCH] fix: remove deprecation warnings from sass

---
 packages/core/src/_tokens.scss         | 10 +++++++---
 packages/core/src/_utils.scss          |  9 +++++----
 packages/core/src/components/form.scss |  5 +++--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/_tokens.scss b/packages/core/src/_tokens.scss
index 3d41eaa..8655783 100644
--- a/packages/core/src/_tokens.scss
+++ b/packages/core/src/_tokens.scss
@@ -1,12 +1,13 @@
 @use "sass:color";
+@use "sass:map";
 @use "colors";
 
 /* Using catppuccin for now, make a theme switcher later */
 @use "../themes/catppuccin/catppuccin";
 
 @function getColor($color) {
-  $ctp-theme: map-get(catppuccin.$palette, "macchiato");
-  @return map-get($ctp-theme, $color);
+  $ctp-theme: map.get(catppuccin.$palette, "macchiato");
+  @return map.get($ctp-theme, $color);
 }
 
 /*
@@ -50,7 +51,10 @@ $msp-colors: (
   "--msp-color-bg": #{getColor("mantle")},
   "--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
   "--msp-color-bg-surface-1": #{getColor("base")},
-  "--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)},
+  "--msp-color-bg-surface-2": #{color.adjust(
+      getColor("surface0"),
+      $lightness: -2%
+    )},
   "--msp-color-bg-surface-3": #{getColor("surface1")},
 
   "--msp-color-bg-accent": #{getColor("teal")},
diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss
index 82968ee..d7032e7 100644
--- a/packages/core/src/_utils.scss
+++ b/packages/core/src/_utils.scss
@@ -1,5 +1,6 @@
 @use "./tokens" as *;
 @use "./mixins";
+@use "sass:math";
 
 .msp-position-fixed {
   position: fixed;
@@ -214,20 +215,20 @@
 }
 @for $i from 0 through 100 {
   .msp-w-#{$i} {
-    width: percentage(calc($i / 100));
+    width: math.percentage(calc($i / 100));
   }
   .msp-h-#{$i} {
-    height: percentage(calc($i / 100));
+    height: math.percentage(calc($i / 100));
   }
 }
 
 @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
   .msp-w-#{$breakpoint}-#{$index} {
-    width: percentage(calc($index / 100));
+    width: math.percentage(calc($index / 100));
   }
 
   .msp-h-#{$breakpoint}-#{$index} {
-    height: percentage(calc($index / 100));
+    height: math.percentage(calc($index / 100));
   }
 }
 
diff --git a/packages/core/src/components/form.scss b/packages/core/src/components/form.scss
index 1ad5205..f381e27 100644
--- a/packages/core/src/components/form.scss
+++ b/packages/core/src/components/form.scss
@@ -2,6 +2,7 @@
 @use "../mixins";
 @use "sass:color";
 @use "sass:string";
+@use "sass:map";
 
 fieldset:not(.msp-fieldset-border) {
   min-width: 0;
@@ -72,7 +73,7 @@ input[type="checkbox"] {
     background-color: var(--msp-color-bg-checkbox);
     border-color: var(--msp-color-bg-checkbox);
 
-    $stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
+    $stroke-color: "%23#{string.slice(map.get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
     --msp-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
   }
 }
@@ -106,7 +107,7 @@ input[type="radio"] {
     background-color: var(--msp-color-bg-checkbox);
     border-color: var(--msp-color-bg-checkbox);
 
-    $fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
+    $fill-color: "%23#{string.slice(map.get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
     --msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e");
   }
 }