#31 : Update colors, set reversed progress indicator

src/components/Arrow/Arrow.svelte

@@ -26,13 +26,15 @@
 
 <style>
   :root {
-    --size: 2px
+    --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;
     height: 20px;
     border-radius: 50%;
-    background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
+    background-color: var(--sc-color-rgb-light-50p);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -44,18 +46,18 @@
     opacity: 0.9;
   }
   .sc-carousel-arrow__arrow {
-    border: solid #1e1e1e;
+    border: solid var(--sc-color-hex-dark);
-    border-width: 0 var(--size) var(--size) 0;
+    border-width: 0 var(--sc-arrow-size) var(--sc-arrow-size) 0;
-    padding: var(--size);
+    padding: var(--sc-arrow-size);
     position: relative;
   }
   .sc-carousel-arrow__arrow-next {
     transform: rotate(-45deg);
-    left: calc(var(--size) / -2);
+    left: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__arrow-prev {
     transform: rotate(135deg);
-    right: calc(var(--size) / -2);
+    right: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__circle_disabled,
   .sc-carousel-arrow__circle_disabled:hover {

src/components/Carousel/Carousel.svelte

@@ -135,7 +135,7 @@
   const progressManager = new ProgressManager({
     autoplayDuration,
     onValueChange: (value) => {
-      progressValue = value
+      progressValue = 1 - value
     }
   })
 
@@ -355,6 +355,10 @@
 </div>
 
 <style>
+  :root {
+    --sc-arrow-size: 2px;
+    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+  }
   .sc-carousel__carousel-container {
     display: flex;
     width: 100%;
@@ -387,8 +391,8 @@
   }
   .sc-carousel-progress__container {
     width: 100%;
-    height: 7px;
+    height: 5px;
-    background-color: lightgray;
+    background-color: var(--sc-color-rgb-light-50p);
     position: absolute;
     bottom: 0;
   }

src/components/Dots/Dots.svelte

@@ -32,7 +32,7 @@
 
 <style>
   :root {
-    --dot-size: 10px; 
+    --sc-dot-size: 10px; 
   }
   .sc-carousel-dots__container {
     display: flex;
@@ -42,8 +42,8 @@
     padding: 0 30px;
   }
   .sc-carousel-dots__dot-container {
-    height: calc(var(--dot-size) + 10px);
+    height: calc(var(--sc-dot-size) + 10px);
-    width: calc(var(--dot-size) + 10x);
+    width: calc(var(--sc-dot-size) + 10x);
     display: flex;
     align-items: center;
     justify-content: center;

src/components/Progress/Progress.svelte

@@ -7,9 +7,9 @@
   /**
    * Progress value
    */
-  export let value = 0.5
+  export let value = 0
 
-  $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
+  $: width = Math.max(value * MAX_PERCENT, 0)
 </script>
 
 <div
@@ -20,8 +20,11 @@
 ></div>
 
 <style>
+  :root {
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5)
+  }
   .sc-carousel-progress__indicator {
     height: 100%;
-    background-color: gray;
+    background-color: var(--sc-color-hex-dark-50p);
   }
 </style>