Refactor SVG and CSS animation

assets/sass/components/_logo.scss

@@ -1,14 +1,28 @@
 $_desaturate_amount: 10%;
 
-$_color_1: #f37001;
+$_color_1: hsl(28, 100%, 48%);
-$_color_2: #b8d900;
+$_color_2: hsl(69, 100%, 43%);
-$_color_3: #00a9ff;
+$_color_3: hsl(200, 100%, 50%);
-$_color_4: #a95ed5;
+$_color_4: hsl(278, 100%, 60%);
 
-$_color_1_dark: desaturate($_color_1, $_desaturate_amount);
+$_color_1_dark: hsl(28, 85%, 48%);
-$_color_2_dark: desaturate($_color_2, $_desaturate_amount);
+$_color_2_dark: hsl(69, 85%, 43%);
-$_color_3_dark: desaturate($_color_3, $_desaturate_amount);
+$_color_3_dark: hsl(200, 85%, 50%);
-$_color_4_dark: desaturate($_color_4, $_desaturate_amount);
+$_color_4_dark: hsl(278, 85%, 60%);
+
+:root {
+  --color-1: hsl(28, 100%, 48%);
+  --color-2: hsl(69, 100%, 43%);
+  --color-3: hsl(200, 100%, 50%);
+  --color-4: hsl(278, 100%, 60%);
+
+  @media (prefers-color-scheme: dark) {
+    --color-1: hsl(28, 90%, 48%);
+    --color-2: hsl(69, 90%, 43%);
+    --color-3: hsl(200, 90%, 50%);
+    --color-4: hsl(278, 90%, 60%);
+  }
+}
 
 .logo__wrapper {
   width: 7rem;
@@ -16,101 +30,66 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   margin-bottom: 2em;
 }
 
-.logo__color_1 { fill: $_color_1; transition: fill 200ms ease; }
+.logo__color {
-.logo__color_2 { fill: $_color_2; transition: fill 200ms ease; }
+  animation-duration: 0.6s;
-.logo__color_3 { fill: $_color_3; transition: fill 200ms ease; }
+  animation-iteration-count: infinite;
-.logo__color_4 { fill: $_color_4; transition: fill 200ms ease; }
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+
+.logo__color_1 {
+  animation-name: cycle_color_1;
+}
+.logo__color_2 {
+  animation-name: cycle_color_2;
+}
+.logo__color_3 {
+  animation-name: cycle_color_3;
+}
+.logo__color_4 {
+  animation-name: cycle_color_4;
+}
 
 .logo__link:hover,
 .logo__link:focus {
   .logo__color {
-    animation-duration: 0.6s;
+    animation-play-state: running;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-  }
-  .logo__color_1 {
-    animation-name: cycle_color_1;
-  }
-  .logo__color_2 {
-    animation-name: cycle_color_2;
-  }
-  .logo__color_3 {
-    animation-name: cycle_color_3;
-  }
-  .logo__color_4 {
-    animation-name: cycle_color_4;
   }
 }
 
-@media (prefers-color-scheme: light) {
+.logo__color_1 { fill: var(--color-1); }
-  @keyframes cycle_color_1 {
+.logo__color_2 { fill: var(--color-2); }
-    0%,
+.logo__color_3 { fill: var(--color-3); }
-    100% { fill: $_color_1; }
+.logo__color_4 { fill: var(--color-4); }
-    25%  { fill: $_color_2; }
-    50%  { fill: $_color_3; }
-    75%  { fill: $_color_4; }
-  }
 
-  @keyframes cycle_color_2 {
+@keyframes cycle_color_1 {
   0%,
-    100% { fill: $_color_2; }
+  100% { fill: var(--color-1); }
-    25%  { fill: $_color_3; }
+  25%  { fill: var(--color-2); }
-    50%  { fill: $_color_4; }
+  50%  { fill: var(--color-3); }
-    75%  { fill: $_color_1; }
+  75%  { fill: var(--color-4); }
-  }
-
-  @keyframes cycle_color_3 {
-    0,
-    100% { fill: $_color_3; }
-    25%  { fill: $_color_4; }
-    50%  { fill: $_color_1; }
-    75%  { fill: $_color_2; }
-  }
-
-  @keyframes cycle_color_4 {
-    0%,
-    100% { fill: $_color_4; }
-    25%  { fill: $_color_1; }
-    50%  { fill: $_color_2; }
-    75%  { fill: $_color_3; }
-  }
 }
 
-@media (prefers-color-scheme: dark) {
+@keyframes cycle_color_2 {
-  .logo__color_1 { fill: $_color_1_dark; }
-  .logo__color_2 { fill: $_color_2_dark; }
-  .logo__color_3 { fill: $_color_3_dark; }
-  .logo__color_4 { fill: $_color_4_dark; }
-
-  @keyframes cycle_color_1 {
   0%,
-    100% { fill: $_color_1_dark; }
+  100% { fill: var(--color-2); }
-    25%  { fill: $_color_2_dark; }
+  25%  { fill: var(--color-3); }
-    50%  { fill: $_color_3_dark; }
+  50%  { fill: var(--color-4); }
-    75%  { fill: $_color_4_dark; }
+  75%  { fill: var(--color-1); }
-  }
+}
-
+
-  @keyframes cycle_color_2 {
+@keyframes cycle_color_3 {
-    0%,
+  0%,
-    100% { fill: $_color_2_dark; }
+  100% { fill: var(--color-3); }
-    25%  { fill: $_color_3_dark; }
+  25%  { fill: var(--color-4); }
-    50%  { fill: $_color_4_dark; }
+  50%  { fill: var(--color-1); }
-    75%  { fill: $_color_1_dark; }
+  75%  { fill: var(--color-2); }
-  }
+}
-
+
-  @keyframes cycle_color_3 {
+@keyframes cycle_color_4 {
-    0%,
+  0%,
-    100% { fill: $_color_3_dark; }
+  100% { fill: var(--color-4); }
-    25%  { fill: $_color_4_dark; }
+  25%  { fill: var(--color-1); }
-    50%  { fill: $_color_1_dark; }
+  50%  { fill: var(--color-2); }
-    75%  { fill: $_color_2_dark; }
+  75%  { fill: var(--color-3); }
-  }
-
-  @keyframes cycle_color_4 {
-    0%,
-    100% { fill: $_color_4_dark; }
-    25%  { fill: $_color_1_dark; }
-    50%  { fill: $_color_2_dark; }
-    75%  { fill: $_color_3_dark; }
-  }
 }