rename css variables and generate @properties to transition

src/js/main.js

@@ -424,9 +424,9 @@ let textColor = chroma($("html").css("--spice-text")).hex();
 let textColorBg = chroma($("html").css("--spice-main")).hex();
 let sidebarColor = chroma($("html").css("--spice-sidebar")).hex();
 
-function setRootColor(name, colHex) {
+function setRootColor(name, color) {
-    $("html").css(`--spice-${name}`, colHex);
+    $("html").css(`--spice-${name}`, chroma(color).hex());
-    $("html").css(`--spice-rgb-${name}`, chroma(colHex).rgb().join(","));
+    $("html").css(`--spice-${name}-rgb`, chroma(color).rgb().join(","));
 }
 
 function toggleDark(setDark) {

src/styles/Colors.scss

@@ -17,17 +17,46 @@ $colors: (
     misc: #bfbfbf
 );
 
+// Set initial Vars
 :root {
     @each $key, $color in $colors {
         --spice-#{$key}: #{$color};
-        --spice-rgb-#{$key}: #{red($color)}, #{green($color)}, #{blue($color)};
+        --spice-#{$key}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
     }
 }
 
+// Set Transitions
+@each $key, $color in $colors {
+    @property --spice-#{$key} {
+        syntax: "<color>";
+        initial-value: $color;
+        inherits: true;
+    }
+
+    @property --spice-#{$key}-rgb {
+        syntax: "<number>, <number>, <number>";
+        initial-value: #{red($color)}, #{green($color)}, #{blue($color)};
+        inherits: true;
+    }
+}
+
+:root {
+    $props: ();
+
+    @each $key, $color in $colors {
+        $props: append($props, --spice-#{$key}, comma);
+        $props: append($props, --spice-#{$key}-rgb, comma);
+    }
+
+    transition: all var(--song-transition-speed) linear;
+    transition-property: $props;
+}
+
+// Color Function
 @function spiceColor($key, $alpha: 1) {
     @if $alpha == 1 {
         @return var(--spice-#{$key});
     } @else {
-        @return rgba(var(--spice-rgb-#{$key}), $alpha);
+        @return rgba(var(--spice-#{$key}-rgb), $alpha);
     }
 }

src/styles/main.scss

@@ -49,36 +49,6 @@
     font-weight: 500;
 }
 
-/* smooth color transitions */
-@property --spice-sidebar {
-    syntax: "<color>";
-    initial-value: magenta;
-    inherits: true;
-}
-
-@property --spice-main {
-    syntax: "<color>";
-    initial-value: magenta;
-    inherits: true;
-}
-
-@property --spice-text {
-    syntax: "<color>";
-    initial-value: magenta;
-    inherits: true;
-}
-
-@property --spice-button {
-    syntax: "<color>";
-    initial-value: magenta;
-    inherits: true;
-}
-
-:root {
-    transition: all var(--song-transition-speed) linear;
-    transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button;
-}
-
 body {
     --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
     --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;