diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index d5e244e..b11105d 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -27,8 +27,6 @@
 <style>
   :root {
     --sc-arrow-size: 2px;
-    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
-    --sc-color-hex-dark: #1e1e1e;
   }
   .sc-carousel-arrow__circle {
     width: 20px;
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 0048f93..8d1cd19 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -363,7 +363,11 @@
 <style>
   :root {
     --sc-arrow-size: 2px;
+
     --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5);
+    --sc-color-hex-dark: #1e1e1e;
   }
   .sc-carousel__carousel-container {
     display: flex;
@@ -402,4 +406,4 @@
     position: absolute;
     bottom: 0;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
index d865445..0e2efbd 100644
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -20,9 +20,6 @@
 ></div>
 
 <style>
-  :root {
-    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5)
-  }
   .sc-carousel-progress__indicator {
     height: 100%;
     background-color: var(--sc-color-hex-dark-50p);