refactor(styles): rename shadow and border variables

4 files changed, 11 insertions, 12 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)