refactor(scss): remove helper/shadow. Expose shadow style in CSS variables

12 files changed, 32 insertions, 34 deletions

diff --git a/assets/scss/helper/shadow.scss b/assets/scss/helper/shadow.scss
deleted file mode 100644
index ad326f9..0000000
--- a/assets/scss/helper/shadow.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@mixin box_shadow($level) {
-    @if $level == 1 {
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    } @else if $level == 2 {
-        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    } @else if $level == 3 {
-        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    } @else if $level == 4 {
-        box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-            0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    }
-}
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 6aed5be..bcc10c1 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -7,14 +7,14 @@
         display: flex;
         flex-direction: column;
         background-color: var(--card-background);
-        @include box_shadow(1);
+        box-shadow: var(--shadow-l1);
         border-radius: var(--card-border-radius);
         overflow: hidden;
 
         transition: box-shadow .3s ease;
         
         &:hover {
-            @include box_shadow(2);
+            box-shadow: var(--shadow-l2);
         }
 
         &:not(:last-of-type) {
@@ -157,7 +157,7 @@
 /* Compact style article list */
 .article-list--compact {
     border-radius: var(--card-border-radius);
-    @include box_shadow(1);
+    box-shadow: var(--shadow-l1);
     background-color: var(--card-background);
 
     & + .pagination {
@@ -205,12 +205,12 @@
         position: relative;
         height: 350px;
         width: 250px;
-        @include box_shadow(1);
+        box-shadow: var(--shadow-l1);
         transition: box-shadow 0.3s ease;
         background-color: var(--card-background);
 
         &:hover {
-            @include box_shadow(2);
+            box-shadow: var(--shadow-l2);
         }
 
         &.has-image {
diff --git a/assets/scss/partials/comments/provider/disqus.scss b/assets/scss/partials/comments/provider/disqus.scss
index a57c27d..b716351 100644
--- a/assets/scss/partials/comments/provider/disqus.scss
+++ b/assets/scss/partials/comments/provider/disqus.scss
@@ -1,6 +1,6 @@
 .disqus-container {
     background-color: var(--card-background);
     border-radius: var(--card-border-radius);
-    @include box_shadow(1);
+    box-shadow: var(--shadow-l1);
     padding: var(--content-padding);
 }
diff --git a/assets/scss/partials/layout/404.scss b/assets/scss/partials/layout/404.scss
index 8bdcca2..c1c0db1 100644
--- a/assets/scss/partials/layout/404.scss
+++ b/assets/scss/partials/layout/404.scss
@@ -1,6 +1,6 @@
 .not-found-card {
     background-color: var(--card-background);
-    @include box_shadow(1);
+    box-shadow: var(--shadow-l1);
     border-radius: var(--card-border-radius);
     padding: var(--content-padding);
 }
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 4504895..5caf8d3 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -46,7 +46,7 @@
     article {
         background: var(--card-background);
         border-radius: var(--card-border-radius);
-        @include box_shadow(1);
+        box-shadow: var(--shadow-l1);
         overflow: hidden;
 
         &.main-article {
@@ -134,10 +134,10 @@
 
         transition: box-shadow 0.3s ease;
 
-        @include box_shadow(1);
+        box-shadow: var(--shadow-l1);
 
         &:hover {
-            @include box_shadow(2);
+            box-shadow: var(--shadow-l2);
         }
 
         svg {
diff --git a/assets/scss/partials/layout/taxonomy.scss b/assets/scss/partials/layout/taxonomy.scss
index 3318457..d594b23 100644
--- a/assets/scss/partials/layout/taxonomy.scss
+++ b/assets/scss/partials/layout/taxonomy.scss
@@ -10,7 +10,7 @@
     border-radius: var(--card-border-radius);
     background-color: var(--card-background);
     padding: var(--small-card-padding);
-    @include box_shadow(1);
+    box-shadow: var(--shadow-l1);
     margin-bottom: var(--section-separation);
     display: flex;
     align-items: center;
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 36a261a..5771d22 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -136,7 +136,7 @@
         background-color: var(--card-background);
         margin-top: 0;
         padding: 15px 0;
-        @include box_shadow(1);
+        box-shadow: var(--shadow-l1);
         display: none;
 
         &.show {
diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss
index ef6b2bd..a6c6882 100644
--- a/assets/scss/partials/pagination.scss
+++ b/assets/scss/partials/pagination.scss
@@ -1,7 +1,7 @@
 .pagination {
     display: flex;
     background-color: var(--card-background);
-    @include box_shadow(1);
+    box-shadow: var(--shadow-l1);
     border-radius: var(--card-border-radius);
     overflow: hidden;
     flex-wrap: wrap;
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 973e8ea..1166a58 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -83,7 +83,7 @@
             width: 100%;
             height: 100%;
             border-radius: 100%;
-            @include box_shadow(1);
+            box-shadow: var(--shadow-l1);
         }
 
         .emoji {
@@ -97,7 +97,7 @@
             text-align: center;
             font-size: 20px;
             background-color: var(--card-background);
-            @include box_shadow(2);
+            box-shadow: var(--shadow-l2);
 
             @media (max-width: $on-desktop-large) {
                 width: 40px;
diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss
index d6a572b..3874e7d 100644
--- a/assets/scss/partials/widgets.scss
+++ b/assets/scss/partials/widgets.scss
@@ -26,7 +26,7 @@
 
         a {
             background: var(--card-background);
-            @include box_shadow(1);
+            box-shadow: var(--shadow-l1);
             border-radius: var(--tag-border-radius);
             padding: 8px 20px;
 
@@ -37,7 +37,7 @@
             transition: box-shadow 0.3s ease;
 
             &:hover {
-                @include box_shadow(2);
+                box-shadow: var(--shadow-l2);
             }
         }
     }
@@ -51,12 +51,12 @@
             background-color: var(--card-background);
             padding: 15px 25px;
             border-radius: var(--card-border-radius);
-            @include box_shadow(1);
+            box-shadow: var(--shadow-l1);
             display: flex;
             transition: box-shadow 0.3s ease;
 
             &:hover {
-                @include box_shadow(2);
+                box-shadow: var(--shadow-l2);
             }
 
             @media (max-width: $on-desktop-large) {
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 7fee808..61419c4 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,7 +1,5 @@
 @import "breakpoints.scss";
-
 @import "variables.scss";
-@import "helper/shadow.scss";
 
 @import "external/normalize.scss";
 
@@ -112,8 +110,8 @@ main.main {
     padding: 15px 20px;
     border-radius: var(--card-border-radius);
     line-height: 1.75;
-    @include box_shadow(2);
     color: var(--card-text-color-secondary);
+    box-shadow: var(--shadow-l2);
 
     @media (max-width: $on-phone) {
         max-width: 100vw;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 10e9707..5a9ecf8 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -81,6 +81,18 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --tr-even-background-color: #efefee;
 }
 
+/*
+*   Shadow style
+*   Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker
+*/
+:root {
+    --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
+        0px 0px 1px rgba(0, 0, 0, 0.04);
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --body-background: #303030;