use css variables for About screen (#1111)

src/app/components/about/about.component.scss

@@ -0,0 +1,25 @@
+.app-about {
+  .main-content {
+    padding: 10px;
+
+    article {
+      color: var(--theme-text-color);
+      padding: 25px 0 25px 0;
+
+      & > header {
+        line-height: 24px;
+        font-size: 14px;
+        font-weight: 800;
+        letter-spacing: -0.2px;
+      }
+    }
+
+    article:first-of-type {
+      padding-bottom: 0;
+    }
+
+    article:last-of-type {
+      margin-bottom: 50px;
+    }
+  }
+}

src/app/components/about/about.component.theme.scss

@@ -1,29 +0,0 @@
-@mixin aca-about-component-theme($theme) {
-  $foreground: map-get($theme, foreground);
-
-  .app-about {
-    .main-content {
-      padding: 10px;
-
-      article {
-        color: mat-color($foreground, text, 0.54);
-        padding: 25px 0 25px 0;
-
-        & > header {
-          line-height: 24px;
-          font-size: 14px;
-          font-weight: 800;
-          letter-spacing: -0.2px;
-        }
-      }
-
-      article:first-of-type {
-        padding-bottom: 0;
-      }
-
-      article:last-of-type {
-        margin-bottom: 50px;
-      }
-    }
-  }
-}

src/app/components/about/about.component.ts

@@ -34,6 +34,7 @@ import { version, dependencies } from '../../../../package.json';
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
+  styleUrls: ['about.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-about' }
 })