💄 Store colors in a nested map to make them reachable using criteria

src/components/spinner.scss

@@ -18,21 +18,21 @@ $logo-aspect-ratio: calc($logo-width / $logo-height);
         height: 100%;
         width: 100%;
 
-        fill: $color-primary-100;
-        stroke: $greyscale-90;
+        fill: get-color(primary, 100);
+        stroke: get-color(greyscale, 90);
 
         animation: 3s multicolor linear infinite;
         animation-timing-function: steps($steps, end);
 
         @keyframes multicolor {
             0% {
-                fill: $color-primary-100;
+                fill: get-color(primary, 100);
             }
             33% {
-                fill: $color-secondary-100;
+                fill: get-color(secondary, 100);
             }
             66% {
-                fill: $color-ternary-100;
+                fill: get-color(ternary, 100);
             }
         }