From 9e46d79ba74631bf9a2b0d5972f13fb523e49ea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 12 Nov 2024 14:06:17 +0100
Subject: [PATCH] fix: SASS deprecated functions

---
 apps/website/src/components/atoms/Button/Button.scss      | 8 +++++---
 .../src/components/atoms/ButtonCircle/ButtonCircle.scss   | 4 +++-
 apps/website/src/components/molecules/Poster/Poster.scss  | 4 +++-
 apps/website/src/style/tools/_mixins.scss                 | 5 +++--
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/website/src/components/atoms/Button/Button.scss b/apps/website/src/components/atoms/Button/Button.scss
index c47c598..ca7139b 100644
--- a/apps/website/src/components/atoms/Button/Button.scss
+++ b/apps/website/src/components/atoms/Button/Button.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .button {
     display: inline-flex;
     align-items: center;
@@ -116,7 +118,7 @@
         // Hover
         &:not([disabled]):hover {
             color: $color-text;
-            background-color: darken($color-secondary, 7);
+            background-color: color.adjust($color-secondary, $lightness: -7%);
         }
     }
 
@@ -128,7 +130,7 @@
 
         &[disabled] {
             background: none;
-            border: 2px solid darken($color-button, 2);
+            border: 2px solid color.adjust($color-button, $lightness: -2%);
         }
 
         // Hover
@@ -138,7 +140,7 @@
             }
         }
         &:not([disabled]):hover {
-            background: darken($color-button, 2.5);
+            background: color.adjust($color-button, $lightness: -2.5%);
         }
     }
 
diff --git a/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss b/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss
index ea21347..28ace20 100644
--- a/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss
+++ b/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .button-circle {
     position: relative;
     overflow: hidden;
@@ -97,7 +99,7 @@
         background: $color-secondary;
 
         &:hover {
-            background: darken($color-secondary, 7);
+            background: color.adjust($color-secondary, $lightness: -7%);
         }
     }
 
diff --git a/apps/website/src/components/molecules/Poster/Poster.scss b/apps/website/src/components/molecules/Poster/Poster.scss
index 13949e2..3f27e81 100644
--- a/apps/website/src/components/molecules/Poster/Poster.scss
+++ b/apps/website/src/components/molecules/Poster/Poster.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .poster {
     position: relative;
     border-radius: 6px;
@@ -93,7 +95,7 @@
 
                 &:hover {
                     @include bp (md) {
-                        background-color: darken($color-secondary, 7);
+                        background-color: color.adjust($color-secondary, $lightness: -7%);
                     }
                 }
             }
diff --git a/apps/website/src/style/tools/_mixins.scss b/apps/website/src/style/tools/_mixins.scss
index f4a5bb3..b1361ca 100644
--- a/apps/website/src/style/tools/_mixins.scss
+++ b/apps/website/src/style/tools/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 // Hide text
 %hide-text {
@@ -51,8 +52,8 @@
 // Based on Width
 @mixin bp ($size, $to: min, $sizes: $breakpoints) {
     // Size is in map
-    @if map-has-key($sizes, $size) {
-        $size: map-get($sizes, $size);
+    @if map.has-key($sizes, $size) {
+        $size: map.get($sizes, $size);
 
         @if ($to == max) {
             @media (max-width: #{$size}) {