#54 : Use CSS animations for dot size

src/components/Dot/Dot.svelte

@@ -1,33 +1,14 @@
 <script>
-  import { tweened } from 'svelte/motion';
-  import { cubicInOut } from 'svelte/easing';
-
-  const DOT_SIZE_PX = 5
-  const ACTIVE_DOT_SIZE_PX = 8
-
-  const size = tweened(DOT_SIZE_PX, {
-    duration: 250,
-    easing: cubicInOut
-  });
-
   /**
    * Indicates if dot is active
    */
   export let active = false
-
-  $: {
-    size.set(active ? ACTIVE_DOT_SIZE_PX : DOT_SIZE_PX)
-  }
 </script>
 
 <div class="sc-carousel-dot__container">
   <div
     class="sc-carousel-dot__dot"
     class:sc-carousel-dot__dot_active={active}
-    style="
-      height: {$size}px;
-      width: {$size}px;
-    "
     on:click
   ></div>
 </div>
@@ -39,20 +20,33 @@
     justify-content: center;
     height: 16px;
     width: 16px;
+  :root {
+    --sc-dot-size: 6px;
+    --sc-active-dot-size: 8px;
+    --sc-dot-size-animation-time: 250ms;
   }
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;
     display: inline-block;
     opacity: 0.5;
-    transition: opacity 100ms ease;
+    transition:
+      opacity 100ms ease,
+      height var(--sc-dot-size-animation-time) ease,
+      width var(--sc-dot-size-animation-time) ease;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
+
+    height: var(--sc-dot-size);
+    width: var(--sc-dot-size);
   }
   .sc-carousel-dot__dot:hover {
     opacity: 0.9;
   }
   .sc-carousel-dot__dot_active {
     opacity: 0.7;
+
+    height: var(--sc-active-dot-size);
+    width: var(--sc-active-dot-size);
   }
 </style>

src/components/Dots/Dots.svelte

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