SF-3876 Fix new draft component theme in dark mode (#4057)

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/new-draft/draft-pending-updates/draft-pending-updates.component.scss

@@ -1,5 +1,3 @@
-@use 'src/variables';
-
 .pending-project-rows {
   display: flex;
   flex-direction: column;
@@ -39,7 +37,7 @@
 }
 
 .wait-for-sync {
-  color: variables.$lighterTextColor;
+  color: var(--mat-sys-on-surface-variant);
   font-size: 0.85em;
   margin: 8px 0 0;
 }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/new-draft/new-draft.component.scss

@@ -12,11 +12,11 @@
 
 .loading-text {
   text-align: center;
-  color: variables.$lighterTextColor;
+  color: var(--mat-sys-on-surface-variant);
 }
 
 .empty-state {
-  color: variables.$lighterTextColor;
+  color: var(--mat-sys-on-surface-variant);
 }
 
 .abort-screen {
@@ -73,7 +73,7 @@ app-copyright-banner {
 }
 
 .step-indicator {
-  color: variables.$lighterTextColor;
+  color: var(--mat-sys-on-surface-variant);
   font-size: 0.85em;
   margin: 0 0 1em;
 }
@@ -111,7 +111,7 @@ app-copyright-banner {
 }
 
 .summary-subtitle {
-  color: variables.$lighterTextColor;
+  color: var(--mat-sys-on-surface-variant);
   margin: 0;
 }
 
@@ -143,7 +143,7 @@ app-copyright-banner {
   td {
     text-align: start;
     padding: 0.75em 0.5em;
-    border-bottom: 1px solid variables.$border-color;
+    border-bottom: 1px solid var(--sf-border-color);
   }
 
   th {
@@ -152,7 +152,7 @@ app-copyright-banner {
 }
 
 .summary-empty {
-  color: variables.$greyLight;
+  color: var(--mat-sys-on-surface-variant);
   font-style: italic;
 }