From bcac2dca3f25f8130a8ba4a43afea895cf406ba9 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Mon, 29 Jan 2024 23:16:47 +0700
Subject: [PATCH] refactor: shadow function

---
 scss/utils/_box-shadow.scss | 54 ++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/scss/utils/_box-shadow.scss b/scss/utils/_box-shadow.scss
index e8c0d2ee..d0c314f1 100644
--- a/scss/utils/_box-shadow.scss
+++ b/scss/utils/_box-shadow.scss
@@ -1,26 +1,42 @@
+@function shadow-layer($elevation, $blur, $opacity, $color) {
+  @return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
+}
+
 @function shadow($color) {
   $box-shadow-elevation: 1rem;
   $box-shadow-blur-strengh: 6rem;
   $box-shadow-opacity: 0.06;
 
-  @return #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
-        $box-shadow-blur-strengh * 0.029
-      )} #{rgba($color, ($box-shadow-opacity * 0.283))},
-    #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
-        $box-shadow-blur-strengh * 0.067
-      )} #{rgba($color, ($box-shadow-opacity * 0.4))},
-    #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
-        $box-shadow-blur-strengh * 0.125
-      )} #{rgba($color, ($box-shadow-opacity * 0.5))},
-    #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
-        $box-shadow-blur-strengh * 0.225
-      )} #{rgba($color, ($box-shadow-opacity * 0.6))},
-    #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
-        $box-shadow-blur-strengh * 0.417
-      )} #{rgba($color, ($box-shadow-opacity * 0.717))},
-    #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
-        $color,
-        $box-shadow-opacity
-      )},
+  @return shadow-layer(
+      $box-shadow-elevation * 0.029,
+      $box-shadow-blur-strengh * 0.029,
+      $box-shadow-opacity * 0.283,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.067,
+      $box-shadow-blur-strengh * 0.067,
+      $box-shadow-opacity * 0.4,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.125,
+      $box-shadow-blur-strengh * 0.125,
+      $box-shadow-opacity * 0.5,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.225,
+      $box-shadow-blur-strengh * 0.225,
+      $box-shadow-opacity * 0.6,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.417,
+      $box-shadow-blur-strengh * 0.417,
+      $box-shadow-opacity * 0.717,
+      $color
+    ),
+    shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
     0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
 }