Sass variable import improvement (#445)

.angular-cli.json

@@ -17,8 +17,7 @@
       "prefix": "app",
       "styles": [
         "../node_modules/material-design-icons/iconfont/material-icons.css",
-        "styles.scss",
-        "planet-mat-theme.scss"
+        "styles.scss"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

src/app/variables.scss → src/app/_variables.scss

@@ -1,5 +1,34 @@
+@import '~@angular/material/theming';
+
+$primary-hue: 500;
+$accent-hue: 500;
+$warn-hue: 500;
+
+$planet-primary: $mat-blue;
+$planet-accent: $mat-amber;
+$planet-warn: $mat-red;
+
+$planet-app-primary: mat-palette($planet-primary, $primary-hue);
+$planet-app-accent: mat-palette($planet-accent, $accent-hue);
+$planet-app-warn: mat-palette($planet-warn, $warn-hue);
+
+$planet-app-theme: mat-light-theme($planet-app-primary, $planet-app-accent, $planet-app-warn);
+
+$primary: mat-color($planet-app-primary, $primary-hue);
+$accent: mat-color($planet-app-accent, $accent-hue);
+$primary-text: mat-contrast($planet-primary, $primary-hue);
+$accent-text: mat-contrast($planet-accent, $accent-hue);
+$light-grey: mat-color($mat-grey, 100);
+$grey: mat-color($mat-grey, 400);
+$primary-light: mat-color($planet-app-primary, 100);
+
 $font-family: Roboto, sans-serif;
 
+/*
+ * Old Planet Material Colors
+ * Saved in case we want to revert
+ * We can delete once UX finalizes colors
+
 $ole-blue-light: rgb(76, 165, 211);
 $ole-blue: rgb(42, 121, 200);
 $ole-blue-dark: rgb(0, 62, 99);
@@ -13,10 +42,6 @@ $pending: #ed9121; // Dogi's WIP label color
 $error-red: #a94442;
 // $body-margin: 8px; we won't need to use this if we use bootstrap's container class
 
-/*
- * Old Planet Material Colors
- * Saved in case we want to revert
- * We can delete once UX finalizes colors
 $planet-primary: (
   50 : #e5eff8,
   100 : #bfd7ef,

src/app/courses/request-courses/courses-request.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  templateUrl: 'courses-request.component.html',
-  styleUrls: [ 'courses-request.component.scss' ]
+  templateUrl: 'courses-request.component.html'
 })
 export class CoursesRequestComponent {}

src/planet-mat-theme.scss

@@ -5,29 +5,7 @@
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
 @include mat-core();
-@import './app/variables';
-
-$primary-hue: 500;
-$accent-hue: 500;
-$warn-hue: 500;
-
-$planet-primary: $mat-blue;
-$planet-accent: $mat-amber;
-$planet-warn: $mat-red;
-
-$planet-app-primary: mat-palette($planet-primary, $primary-hue);
-$planet-app-accent: mat-palette($planet-accent, $accent-hue);
-$planet-app-warn: mat-palette($planet-warn, $warn-hue);
-
-$planet-app-theme: mat-light-theme($planet-app-primary, $planet-app-accent, $planet-app-warn);
-
-$primary: mat-color($planet-app-primary, $primary-hue);
-$accent: mat-color($planet-app-accent, $accent-hue);
-$primary-text: mat-contrast($planet-primary, $primary-hue);
-$accent-text: mat-contrast($planet-accent, $accent-hue);
-$light-grey: mat-color($mat-grey, 100);
-$grey: mat-color($mat-grey, 400);
-$primary-light: mat-color($planet-app-primary, 100);
+@import './app/_variables';
 
 @include angular-material-theme($planet-app-theme);