Color schemes.

README.md

@@ -15,6 +15,16 @@ The format is the following:
   "text": [ "build", "passed" ],
   /* Width of the first box, width of the second box. */
   "widths": [ 33, 44 ],
+  "colorscheme": "green"
+}
+```
+
+Color schemes are located at the bottom of the file. Each scheme has a name and
+a series of color stops used to compute the gradient of the background color of
+the boxes.
+
+```js
+"green": {
   /* Gradient of the background color of the second box.
    * The main gradient is from index 1 to 2,
    * indices 0 and 4 provide the light and dark outline. */
@@ -22,6 +32,14 @@ The format is the following:
 }
 ```
 
+Usually, the first box uses the same dark grey. Rely on this default by not
+providing a `"colorA"` field (such as above). Otherwise, the `"colorA"` field
+works exactly the same way.
+
+You can also use the `"colorA"` and `"colorB"` fields directly in the badges if
+you don't want to make a color scheme for it. In that case, remove the
+`"colorscheme"` field altogether.
+
 # License
 
 All work here is licensed CC0.

badges.json

@@ -1,8 +1,15 @@
 {
-  "build-passed": {
-    "text": [ "build", "passed" ],
-    "widths": [ 33, 44 ],
-    "colorA": [ "#aaa", "#666", "#444", "#222" ],
-    "colorB": [ "#8f6", "#4c1", "#3b0", "#370" ]
+  "badges": {
+    "build-passed": {
+      "text": [ "build", "passed" ],
+      "widths": [ 33, 44 ],
+      "colorscheme": "green"
+    }
+  },
+  "colorschemes": {
+    "green": {
+      "colorA": [ "#aaa", "#666", "#444", "#222" ],
+      "colorB": [ "#8f6", "#4c1", "#3b0", "#370" ]
+    }
   }
 }

make.js

@@ -2,7 +2,9 @@ var fs = require('fs');
 var Promise = require('es6-promise').Promise;
 var dot = require('dot');
 var SVGO = require('svgo');
-var badges = require('./badges.json');
+var badgeData = require('./badges.json');
+var badges = badgeData.badges;
+var colorscheme = badgeData.colorschemes;
 var template = fs.readFileSync('./template.svg');
 var imageTemplate = dot.template(''+template);
 
@@ -16,12 +18,16 @@ function optimize(string, callback) {
 }
 
 function makeImage(name, data, cb) {
+  if (data.colorscheme) {
+    data.colorA = colorscheme[data.colorscheme].colorA;
+    data.colorB = colorscheme[data.colorscheme].colorB;
+  }
   var result = imageTemplate(data);
   // Run the SVG through SVGO.
   optimize(result, function(object) {
     var result = object.data;
     // Put this image on the sheet.
-    resultSheet += result;
+    resultSheet +=  '<p>' + result;
     // Write the image individually.
     fs.writeFileSync(name + '.svg', result);
     cb();
@@ -31,6 +37,7 @@ function makeImage(name, data, cb) {
 // Return a promise to have all images written out individually.
 function buildImages() {
   return Promise.all(Object.keys(badges).map(function(name) {
+    console.log('badge', name);
     return new Promise(function(resolve) {
       makeImage(name, badges[name], resolve);
     });
@@ -42,8 +49,10 @@ function main() {
   buildImages()
   .then(function() {
     // Write the sheet.
+    console.log('sheet');
     fs.writeFileSync(imageSheet, resultSheet);
-  });
+  })
+  .catch(function(e) { console.error(e.stack); });
 }
 
 main();

sheet.html

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="77" height="19"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#aaa"/><stop offset=".1" stop-color="#666"/><stop offset=".9" stop-color="#444"/><stop offset="1" stop-color="#222"/></linearGradient><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="77" height="18" fill="url(#a)"/><rect rx="4" x="33" width="44" height="18" fill="url(#b)"/><rect x="33" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10"><text x="16.5" y="12" filter="url(#c)">build</text><text x="55" y="12" filter="url(#c)">passed</text></g></svg>
+<p><svg xmlns="http://www.w3.org/2000/svg" width="77" height="19"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#aaa"/><stop offset=".1" stop-color="#666"/><stop offset=".9" stop-color="#444"/><stop offset="1" stop-color="#222"/></linearGradient><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="77" height="18" fill="url(#a)"/><rect rx="4" x="33" width="44" height="18" fill="url(#b)"/><rect x="33" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10"><text x="16.5" y="12" filter="url(#c)">build</text><text x="55" y="12" filter="url(#c)">passed</text></g></svg>