refactor(styles): rename shadow and border variables

4 files changed, 18 insertions, 31 deletions

diff --git a/src/components/Widgets/RecentPosts/RecentPosts.module.scss b/src/components/Widgets/RecentPosts/RecentPosts.module.scss
index 95ad7fe..dc580a1 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.module.scss
+++ b/src/components/Widgets/RecentPosts/RecentPosts.module.scss
@@ -37,11 +37,11 @@
   border: fun.convert-px(3) solid var(--color-primary);
   border-radius: fun.convert-px(5);
   box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-light),
+      var(--color-shadow),
     fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-      var(--color-shadow-light),
+      var(--color-shadow),
     fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-      var(--color-shadow-light);
+      var(--color-shadow);
   transition: all 0.3s ease-in-out 0s;
 
   &:hover,
@@ -53,13 +53,13 @@
   &:hover,
   &:focus {
     box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow-lighter),
+        var(--color-shadow-light),
       fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow-lighter),
+        var(--color-shadow-light),
       fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow-lighter),
+        var(--color-shadow-light),
       fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
-        var(--color-shadow-lighter);
+        var(--color-shadow-light);
     transform: scale(1.05);
   }
 
@@ -70,7 +70,7 @@
   }
 
   &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow-light);
+    box-shadow: 0 0 0 0 var(--color-shadow);
     transform: scale(0.95);
 
     .title {
@@ -83,7 +83,7 @@
   width: 100%;
   height: clamp(fun.convert-px(100), 20vw, fun.convert-px(150));
   position: relative;
-  border: fun.convert-px(1) solid var(--color-border-light);
+  border: fun.convert-px(1) solid var(--color-border);
 }
 
 .meta {
diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss
index 3477c88..c05a56b 100644
--- a/src/components/Widgets/Sharing/Sharing.module.scss
+++ b/src/components/Widgets/Sharing/Sharing.module.scss
@@ -22,28 +22,15 @@
   align-items: center;
   padding: var(--spacing-2xs) var(--spacing-xs);
   border-radius: fun.convert-px(3);
-  color: var(--color-fg-inverted);
   font-weight: 600;
   text-decoration: none;
-  text-shadow: fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
-    var(--color-shadow-dark);
   transition: all 0.3s ease-in-out 0s;
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      font-size: var(--font-size-sm);
-    }
-  }
-
   &:hover,
   &:focus {
     color: hsl(0, 0%, 100%);
     transform: translateX(#{fun.convert-px(-3)})
       translateY(#{fun.convert-px(-3)});
-
-    @include mix.motion("reduce") {
-      text-decoration: underline;
-    }
   }
 
   &:active {
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
index c8ad759..5dfdcb7 100644
--- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss
+++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
@@ -15,24 +15,24 @@
   height: 3em;
   background: none;
   box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-light),
+      var(--color-shadow),
     fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
-      var(--color-shadow-light),
+      var(--color-shadow),
     fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
-      var(--color-shadow-light),
+      var(--color-shadow),
     0 0 0 0 var(--color-shadow);
   transition: all 0.3s linear 0s;
 
   &:hover,
   &:focus {
     box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow-light),
+        var(--color-shadow),
       fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
-        var(--color-shadow-lighter),
+        var(--color-shadow-light),
       fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
-        var(--color-shadow-lighter),
+        var(--color-shadow-light),
       fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
-        var(--color-shadow-light);
+        var(--color-shadow);
     transform: scale(1.15);
   }
 
@@ -41,7 +41,7 @@
   }
 
   &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow-light);
+    box-shadow: 0 0 0 0 var(--color-shadow);
     outline: none;
     transform: scale(0.9);
   }
diff --git a/src/components/Widgets/ToC/ToC.module.scss b/src/components/Widgets/ToC/ToC.module.scss
index a296659..a863a34 100644
--- a/src/components/Widgets/ToC/ToC.module.scss
+++ b/src/components/Widgets/ToC/ToC.module.scss
@@ -16,7 +16,7 @@
   width: 100%;
   padding: var(--spacing-2xs) var(--spacing-sm);
   background: none;
-  border-bottom: fun.convert-px(1) solid var(--color-border-lighter);
+  border-bottom: fun.convert-px(1) solid var(--color-border-light);
   text-decoration: underline solid transparent 0;
   transition: all 0.16s ease-in-out 0s, text-decoration-color 0s;