changeset 279:c5867677987a

Merge pull request #30 from piper-audio/dev/custom-material-theme

Dev/custom material theme

--- a/.angular-cli.json	Wed May 03 08:39:03 2017 +0100
+++ b/.angular-cli.json	Wed May 03 12:23:14 2017 +0100
@@ -20,7 +20,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "ugly",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "ugly-aesthetics.scss"
       ],
       "scripts": [
         "../node_modules/requirejs/require.js"

--- a/package.json	Wed May 03 08:39:03 2017 +0100
+++ b/package.json	Wed May 03 12:23:14 2017 +0100
@@ -49,6 +49,7 @@
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "node-sass": "^4.5.2",
     "node-watch": "^0.4.1",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",

--- a/src/styles.css	Wed May 03 08:39:03 2017 +0100
+++ b/src/styles.css	Wed May 03 12:23:14 2017 +0100
@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
 @font-face {
   font-family: 'Material Icons';
@@ -49,10 +48,3 @@
   height: 100%;
 }
 
-/* Small change to this colour to fit better with colours we use in
-   visualisations */
-
-.mat-toolbar, .mat-toolbar.mat-primary {
-  background: #0868ac;
-}
-

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ugly-aesthetics.scss	Wed May 03 12:23:14 2017 +0100
@@ -0,0 +1,43 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// 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();
+
+// Generated with http://mcg.mbitson.com - seeded with base colour of #0868ac
+// The contrast colours are taken from $mat-indigo
+$md-ugly-blue: map-merge($mat-indigo, (
+  50 : #e1edf5,
+  100 : #b5d2e6,
+  200 : #84b4d6,
+  300 : #5295c5,
+  400 : #2d7fb8,
+  500 : #0868ac,
+  600 : #0760a5,
+  700 : #06559b,
+  800 : #044b92,
+  900 : #023a82,
+  A100 : #afccff,
+  A200 : #7cabff,
+  A400 : #498bff,
+  A700 : #307bff,
+));
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$candy-app-primary: mat-palette($md-ugly-blue);
+$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$candy-app-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($candy-app-theme);

--- a/yarn.lock	Wed May 03 08:39:03 2017 +0100
+++ b/yarn.lock	Wed May 03 12:23:14 2017 +0100
@@ -3721,7 +3721,7 @@
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.3.0:
+node-sass, node-sass@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
   dependencies: