New: Native Theme Engine

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

frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css

@@ -8,8 +8,8 @@
 .key {
   padding: 2px 4px;
   border-radius: 3px;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-  color: $white;
+  color: var(--white);
   font-size: 16px;
 }

frontend/src/Components/Page/Header/MovieSearchInput.css

@@ -12,22 +12,22 @@
 .ripple {
   composes: ripple from '~Components/Loading/LoadingIndicator.css';
 
-  border: 1px solid $toolbarColor;
+  border: 1px solid var(--toolbarColor);
 }
 
 .input {
   margin-left: 8px;
   width: 200px;
   border: none;
-  border-bottom: solid 1px $white;
+  border-bottom: solid 1px var(--white);
   border-radius: 0;
   background-color: transparent;
   box-shadow: none;
-  color: $white;
+  color: var(--white);
   transition: border 0.3s ease-out;
 
   &::placeholder {
-    color: $white;
+    color: var(--white);
     transition: color 0.3s ease-out;
   }
 
@@ -60,13 +60,13 @@
     overflow-y: auto;
     min-width: 100%;
     max-height: 230px;
-    border: 1px solid $themeDarkColor;
+    border: 1px solid var(--themeDarkColor);
     border-radius: 4px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    background-color: $themeDarkColor;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
-    color: $menuItemColor;
+    background-color: var(--themeDarkColor);
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+    color: var(--menuItemColor);
   }
 }
 
@@ -82,12 +82,12 @@
 }
 
 .highlighted {
-  background-color: $themeLightColor;
+  background-color: var(--themeLightColor);
 }
 
 .sectionTitle {
   padding: 5px 8px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .addNewMovieSuggestion {

frontend/src/Components/Page/Header/MovieSearchResult.css

@@ -21,7 +21,7 @@
 .alternateTitle {
   composes: title;
 
-  color: $disabledColor;
+  color: var(--disabledColor);
   font-size: $smallFontSize;
 }
 

frontend/src/Components/Page/Header/PageHeader.css

@@ -4,8 +4,8 @@
   align-items: center;
   flex: 0 0 auto;
   height: $headerHeight;
-  background-color: #464b51;
-  color: $white;
+  background-color: var(--pageHeaderBackgroundColor);
+  color: var(--white);
 }
 
 .logoContainer {
@@ -56,7 +56,7 @@
   line-height: 60px;
 
   &:hover {
-    color: $toobarButtonHoverColor;
+    color: var(--toobarButtonHoverColor);
   }
 }
 
@@ -67,7 +67,7 @@
   align-items: center;
   justify-content: center;
   width: 30px;
-  color: $themeRed;
+  color: var(--themeRed);
   text-align: center;
   line-height: 60px;
 

frontend/src/Components/Page/Header/PageHeaderActionsMenu.css

@@ -5,7 +5,7 @@
   text-align: center;
 
   &:hover {
-    color: $toobarButtonHoverColor;
+    color: var(--toobarButtonHoverColor);
   }
 }
 

frontend/src/Components/Page/LoadingPage.css

@@ -1,5 +1,7 @@
 .page {
   composes: page from '~./Page.css';
+
+  background-color: var(--pageBackground);
 }
 
 .logoFull {

frontend/src/Components/Page/PageContentFooter.css

@@ -2,7 +2,7 @@
   display: flex;
   flex: 0 0 auto;
   padding: 20px;
-  background-color: #f1f1f1;
+  background-color: var(--pageFooterBackground);
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Page/PageJumpBarItem.css

@@ -1,6 +1,6 @@
 .jumpBarItem {
   flex: 1 1 $jumpBarItemHeight;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   text-align: center;
   font-weight: bold;
 

frontend/src/Components/Page/Sidebar/Messages/Message.css

@@ -1,6 +1,6 @@
 .message {
   display: flex;
-  border-left: 3px solid $infoColor;
+  border-left: 3px solid var(--infoColor);
 }
 
 .iconContainer,
@@ -9,7 +9,7 @@
   justify-content: center;
   flex-direction: column;
   padding: 2px 0;
-  color: $sidebarColor;
+  color: var(--sidebarColor);
 }
 
 .iconContainer {
@@ -26,17 +26,17 @@
 /* Types */
 
 .error {
-  border-left-color: $dangerColor;
+  border-left-color: var(--dangerColor);
 }
 
 .info {
-  border-left-color: $infoColor;
+  border-left-color: var(--infoColor);
 }
 
 .success {
-  border-left-color: $successColor;
+  border-left-color: var(--successColor);
 }
 
 .warning {
-  border-left-color: $warningColor;
+  border-left-color: var(--warningColor);
 }

frontend/src/Components/Page/Sidebar/PageSidebar.css

@@ -2,7 +2,7 @@
   flex: 0 0 $sidebarWidth;
   overflow: hidden;
   width: $sidebarWidth;
-  background-color: $sidebarBackgroundColor;
+  background-color: var(--sidebarBackgroundColor);
   transition: transform 300ms ease-in-out;
   transform: translateX(0);
 }
@@ -11,8 +11,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: $sidebarBackgroundColor;
-  color: $white;
+  background-color: var(--sidebarBackgroundColor);
+  color: var(--white);
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Page/Sidebar/PageSidebarItem.css

@@ -1,21 +1,21 @@
 .item {
   border-left: 3px solid transparent;
-  color: $sidebarColor;
+  color: var(--sidebarColor);
   transition: border-left 0.3s ease-in-out;
 }
 
 .isActiveItem {
-  border-left: 3px solid $themeBlue;
+  border-left: 3px solid var(--themeBlue);
 }
 
 .link {
   display: block;
   padding: 12px 24px;
-  color: $sidebarColor;
+  color: var(--sidebarColor);
 
   &:hover,
   &:focus {
-    color: $themeBlue;
+    color: var(--themeBlue);
     text-decoration: none;
   }
 }
@@ -27,11 +27,11 @@
 }
 
 .isActiveLink {
-  color: $themeBlue;
+  color: var(--themeBlue);
 }
 
 .isActiveParentLink {
-  background-color: $sidebarActiveBackgroundColor;
+  background-color: var(--sidebarActiveBackgroundColor);
 }
 
 .iconContainer {

frontend/src/Components/Page/Toolbar/PageToolbar.css

@@ -4,8 +4,8 @@
   flex: 0 0 auto;
   padding: 0 20px;
   height: $toolbarHeight;
-  background-color: $toolbarBackgroundColor;
-  color: $toolbarColor;
+  background-color: var(--toolbarBackgroundColor);
+  color: var(--toolbarColor);
   line-height: 60px;
 }
 

frontend/src/Components/Page/Toolbar/PageToolbarButton.css

@@ -7,16 +7,16 @@
   text-align: center;
 
   &:hover {
-    color: $toobarButtonHoverColor;
+    color: var(--toobarButtonHoverColor);
   }
 
   &.isDisabled {
-    color: $disabledColor;
+    color: var(--disabledColor);
   }
 }
 
 .isDisabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .labelContainer {
@@ -28,7 +28,7 @@
 
 .label {
   padding: 0 3px;
-  color: $toolbarLabelColor;
+  color: var(--toolbarLabelColor);
   font-size: $extraSmallFontSize;
   line-height: calc($extraSmallFontSize + 1px);
 }