Use actual colors in SASS variables. Rework of #1542.

This PR replaces our color variables to use actual colors rather
than strings. It also updates the template generation and
customizer to use '#name' style placeholders instead of '$name',
so that CSSO doesn't complain about the syntax.

This PR may later be invalidated if we decide to move away from SASS,
but for now it provides a good baseline for current development.

docs/_assets/customizer.js

@@ -458,12 +458,20 @@ MaterialCustomizer = (function() {
     var primaryDark = this.getColor(primaryColor, '700');
     var accent = this.getColor(secondaryColor, 'A200');
 
-    return this.replaceDict(this.template, {
-      '\\$color-primary-dark': primaryDark,
-      '\\$color-primary-contrast': this.calculateTextColor(primary),
-      '\\$color-accent-contrast': this.calculateTextColor(accent),
-      '\\$color-primary': primary,
-      '\\$color-accent': accent
+    var initial = this.replaceDict(this.template, {
+      'rgba\\(\\#primdark': 'rgba(' + primaryDark,
+      'rgba\\(\\#primcontrast': 'rgba(' + this.calculateTextColor(primary),
+      'rgba\\(\\#acccontrast': 'rgba(' + this.calculateTextColor(accent),
+      'rgba\\(\\#primary': 'rgba(' + primary,
+      'rgba\\(\\#accent': 'rgba(' + accent
+    });
+
+    return this.replaceDict(initial, {
+      '\\#primdark': 'rgb(' + primaryDark + ')',
+      '\\#primcontrast': 'rgb(' + this.calculateTextColor(primary) + ')',
+      '\\#acccontrast': 'rgb(' + this.calculateTextColor(accent) + ')',
+      '\\#primary': 'rgb(' + primary + ')',
+      '\\#accent': 'rgb(' + accent + ')'
     });
   };
 

package.json

@@ -24,7 +24,7 @@
     "gulp-concat": "^2.4.1",
     "gulp-connect": "^2.2.0",
     "gulp-css-inline-images": "^0.1.1",
-    "gulp-csso": "^1.0.0",
+    "gulp-csso": "^1.1.0",
     "gulp-file": "^0.2.0",
     "gulp-flatten": "^0.2.0",
     "gulp-front-matter": "^1.2.2",