refactor(styles): rename shadow and border variables

8 files changed, 46 insertions, 47 deletions

diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 8e3c2ab..890acd8 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -30,7 +30,7 @@ summary {
 }
 
 * {
-  scrollbar-color: var(--color-shadow) var(--color-bg-tertiary);
+  scrollbar-color: var(--color-shadow-dark) var(--color-bg-tertiary);
   scrollbar-width: auto;
 }
 
@@ -44,7 +44,7 @@ summary {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-shadow);
+  background-color: var(--color-shadow-dark);
   border-radius: fun.convert-px(6);
   border: fun.convert-px(3) solid var(--color-bg-tertiary);
 }
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 28c017c..4b11e64 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -15,13 +15,12 @@
   --color-primary-dark: #{var.$color_blue-dark};
   --color-primary-darker: #{var.$color_blue-darker};
   --color-secondary: #{var.$color_orange};
-  --color-border: #{var.$color_grey-dark};
-  --color-border-light: #{var.$color_grey};
-  --color-border-lighter: #{var.$color_grey-bright};
-  --color-shadow: #{var.$color_grey-dark-o70};
-  --color-shadow-light: #{var.$color_grey-dark-o40};
-  --color-shadow-lighter: #{var.$color_grey-dark-o20};
-  --color-shadow-dark: #{var.$color_grey-dark};
+  --color-border: #{var.$color_grey};
+  --color-border-dark: #{var.$color_grey-dark};
+  --color-border-light: #{var.$color_grey-bright};
+  --color-shadow: #{var.$color_grey-dark-o40};
+  --color-shadow-dark: #{var.$color_grey-dark-o70};
+  --color-shadow-light: #{var.$color_grey-dark-o20};
   --color-token-red: #{var.$color_red};
   --color-token-green: #{var.$color_green};
   --color-token-purple: #{var.$color_purple};
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss
index 0c3b617..9fe2bd4 100644
--- a/src/styles/base/_helpers.scss
+++ b/src/styles/base/_helpers.scss
@@ -34,7 +34,7 @@
     z-index: 100000;
     background: var(--color-primary);
     box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow);
+      var(--color-shadow-dark);
     clip: auto !important;
     color: var(--color-fg-inverted);
     font-size: var(--font-size-md);
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 0aea717..b94f67d 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -14,7 +14,7 @@ h2 {
     )
     0 0 / 3rem 100% no-repeat;
   font-size: var(--font-size-2xl);
-  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-lighter);
+  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
 }
 
 h3 {
@@ -208,7 +208,7 @@ var {
 
 :not(pre) > code {
   background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border-lighter);
+  border: fun.convert-px(1) solid var(--color-border-light);
   border-radius: fun.convert-px(3);
   color: var(--color-primary-darker);
   padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1)
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
index 7d23008..7b32f09 100644
--- a/src/styles/components/_wp-blocks.scss
+++ b/src/styles/components/_wp-blocks.scss
@@ -8,11 +8,11 @@
   position: relative;
   border: fun.convert-px(1) solid var(--color-primary-lighter);
   border-left: fun.convert-px(5) solid var(--color-primary-lighter);
-  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
     fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-lighter),
+      var(--color-shadow-light),
     fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-      var(--color-shadow-lighter);
+      var(--color-shadow-light);
   font-style: italic;
 
   > *:last-child {
@@ -31,7 +31,7 @@
   margin: 0 auto var(--spacing-md);
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border-lighter);
+  border: fun.convert-px(1) solid var(--color-border-light);
   color: var(--color-primary-darker);
 }
 
@@ -78,20 +78,20 @@
 
     a {
       display: block;
-      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
         fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-          var(--color-shadow-lighter),
+          var(--color-shadow-light),
         fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-          var(--color-shadow-lighter);
+          var(--color-shadow-light);
 
       &:hover,
       &:focus {
         transform: scale(1.05);
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
           fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
-            var(--color-shadow-lighter),
+            var(--color-shadow-light),
           fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
-            var(--color-shadow-lighter);
+            var(--color-shadow-light);
       }
 
       &:focus {
@@ -100,10 +100,10 @@
 
       &:active {
         transform: scale(0.95);
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
           fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-            var(--color-shadow-lighter),
-          0 0 0 0 var(--color-shadow-lighter);
+            var(--color-shadow-light),
+          0 0 0 0 var(--color-shadow-light);
         outline: none;
       }
     }
@@ -136,19 +136,19 @@
   img {
     display: block;
     margin: auto;
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
       fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-lighter),
+        var(--color-shadow-light),
       fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-lighter);
+        var(--color-shadow-light);
     text-align: center;
   }
 }
 
 .wp-block-video {
-  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
     fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-lighter),
+      var(--color-shadow-light),
     fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-      var(--color-shadow-lighter);
+      var(--color-shadow-light);
 }
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index b966b36..b6050d7 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -14,7 +14,7 @@
   background: var(--color-bg-secondary);
 
   &:not(:last-child) {
-    border-bottom: fun.convert-px(1) solid var(--color-border-light);
+    border-bottom: fun.convert-px(1) solid var(--color-border);
   }
 
   &:nth-child(2n) {
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index ac6646b..69a1526 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -26,7 +26,7 @@
 
 li.item {
   margin: 0 0 var(--spacing-md) 0;
-  border-bottom: fun.convert-px(1) solid var(--color-border-light);
+  border-bottom: fun.convert-px(1) solid var(--color-border);
 }
 
 .comments {
@@ -35,7 +35,7 @@ li.item {
   margin: var(--spacing-md) 0 0;
   padding: var(--spacing-md) 0 var(--spacing-lg);
   background: var(--color-bg-secondary);
-  border-top: fun.convert-px(3) solid var(--color-border-lighter);
+  border-top: fun.convert-px(3) solid var(--color-border-light);
 
   > * {
     grid-column: 2;
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
index 5086e08..e6627df 100644
--- a/src/styles/vendors/_prism.scss
+++ b/src/styles/vendors/_prism.scss
@@ -20,7 +20,7 @@
     left: 0;
     right: 0;
     background: var(--color-bg-tertiary);
-    border: fun.convert-px(1) solid var(--color-border-light);
+    border: fun.convert-px(1) solid var(--color-border);
   }
 
   .toolbar-item {
@@ -37,7 +37,7 @@
     margin-right: auto;
     padding: 0 var(--spacing-xs);
     background: var(--color-bg-secondary);
-    border-right: fun.convert-px(1) solid var(--color-border-light);
+    border-right: fun.convert-px(1) solid var(--color-border);
     color: var(--color-primary-darker);
     font-size: var(--font-size-sm);
     font-weight: 600;
@@ -56,7 +56,7 @@ pre[class*="language-"] {
   margin: var(--spacing-md) 0;
   padding: 0;
   position: relative;
-  border: fun.convert-px(1) solid var(--color-border-light);
+  border: fun.convert-px(1) solid var(--color-border);
 
   > code {
     display: block;
@@ -75,7 +75,7 @@ pre[class*="language-"] {
     pointer-events: none;
     user-select: none;
     background: var(--color-bg);
-    border-right: fun.convert-px(1) solid var(--color-border-light);
+    border-right: fun.convert-px(1) solid var(--color-border);
   }
 
   .token {
@@ -169,7 +169,7 @@ pre[class*="language-"] {
     width: 1.1ch;
     margin: 0 0.5ch 0 0;
     border: fun.convert-px(1) solid var(--color-bg);
-    outline: fun.convert-px(1) solid var(--color-border);
+    outline: fun.convert-px(1) solid var(--color-border-dark);
     overflow: hidden;
   }
 
@@ -237,11 +237,11 @@ pre.command-line {
   border: 0.4ex solid var(--color-primary);
   border-radius: fun.convert-px(30);
   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);
   color: var(--color-primary);
   font-size: var(--font-size-sm);
   font-weight: 600;
@@ -252,13 +252,13 @@ pre.command-line {
     transform: translateX(#{fun.convert-px(-2)})
       translateY(#{fun.convert-px(-2)});
     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(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
-        var(--color-shadow-lighter);
+        var(--color-shadow-light);
   }
 
   &:focus {
@@ -268,6 +268,6 @@ pre.command-line {
   &:active {
     text-decoration: none;
     transform: translateY(#{fun.convert-px(2)});
-    box-shadow: 0 0 0 0 var(--color-shadow-light);
+    box-shadow: 0 0 0 0 var(--color-shadow);
   }
 }