New: Native Theme Engine

Co-Authored-By: Zak Saunders <1936903+thezak48@users.noreply.github.com>

frontend/src/Collection/AddNewCollectionMovieModalContent.css

@@ -4,7 +4,7 @@
 
 .year {
   margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .poster {

frontend/src/Collection/Overview/CollectionMovie.css

@@ -6,7 +6,7 @@ $hoverScale: 1.05;
 
   &:hover {
     z-index: 2;
-    box-shadow: 0 0 10px $black;
+    box-shadow: 0 0 10px var(--black);
     transition: all 200ms ease-in;
 
     .poster {
@@ -28,7 +28,7 @@ $hoverScale: 1.05;
 .poster {
   position: relative;
   display: block;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
 }
 
 .overlay {
@@ -44,7 +44,7 @@ $hoverScale: 1.05;
 
 .overlayTitle {
   padding: 5px;
-  color: $offWhite;
+  color: var(--offWhite);
   text-align: left;
   font-weight: bold;
   font-size: 15px;
@@ -67,7 +67,7 @@ $hoverScale: 1.05;
   z-index: 3;
   border-radius: 4px;
   background-color: #707070;
-  color: $white;
+  color: var(--white);
   font-size: $smallFontSize;
   opacity: 0;
   transition: opacity 0;
@@ -77,7 +77,7 @@ $hoverScale: 1.05;
   composes: button from '~Components/Link/IconButton.css';
 
   &:hover {
-    color: $radarrYellow;
+    color: var(--radarrYellow);
   }
 }
 
@@ -102,16 +102,16 @@ $hoverScale: 1.05;
 
   position: relative;
   display: block;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
 }
 
 .monitorToggleButton {
   composes: toggleButton from '~Components/MonitorToggleButton.css';
 
   width: 25px;
-  color: $white;
+  color: var(--white);
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }

frontend/src/Collection/Overview/CollectionMovieLabel.css

@@ -3,7 +3,7 @@
   align-items: stretch;
   overflow: hidden;
   margin: 2px 4px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
   background-color: #eee;
   cursor: default;
@@ -17,34 +17,34 @@
   padding: 0 4px;
   border-left: 4px;
   border-left-style: solid;
-  background-color: $white;
-  color: $defaultColor;
+  background-color: var(--white);
+  color: var(--defaultColor);
 }
 
 .primary {
-  border-color: $primaryColor;
+  border-color: var(--primaryColor);
 }
 
 .danger {
-  border-color: $dangerColor;
+  border-color: var(--dangerColor);
 }
 
 .success {
-  border-color: $successColor;
+  border-color: var(--successColor);
 }
 
 .purple {
-  border-color: $purple;
+  border-color: var(--purple);
 }
 
 .warning {
-  border-color: $warningColor;
+  border-color: var(--warningColor);
 }
 
 .info {
-  border-color: $infoColor;
+  border-color: var(--infoColor);
 }
 
 .queue {
-  border-color: $queueColor;
+  border-color: var(--queueColor);
 }

frontend/src/Collection/Overview/CollectionOverview.css

@@ -104,7 +104,7 @@ $hoverScale: 1.05;
   width: 25px;
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }
 
@@ -131,7 +131,7 @@ $hoverScale: 1.05;
     width: 20px;
 
     &:hover {
-      color: $iconButtonHoverLightColor;
+      color: var(--iconButtonHoverLightColor);
     }
   }
 }

frontend/src/Collection/Overview/CollectionOverviews.css

@@ -5,7 +5,7 @@
 .container {
   &:hover {
     .content {
-      background-color: $tableRowHoverBackgroundColor;
+      background-color: var(--tableRowHoverBackgroundColor);
     }
   }
 }