Merge pull request CodeByZach#130 from HubSpot/themes-in-colors

Produce theme files in 10 colors

Gruntfile.coffee

@@ -3,23 +3,36 @@ fs = require('fs')
 
 ThemeUtils = require('./docs/lib/themes.coffee')
 
+themeColors =
+  black:  '#000000'
+  white:  '#ffffff'
+  silver: '#d6d6d6'
+  red:    '#ee3148'
+  orange: '#eb7a55'
+  yellow: '#fcd25a'
+  green:  '#22df80'
+  blue:   '#2299dd'
+  pink:   '#e90f92'
+  purple: '#7c60e0'
+
 module.exports = (grunt) ->
   grunt.registerTask 'themes', 'Compile the pace theme files', ->
     done = @async()
 
     options = grunt.config('themes')
 
     grunt.file.glob options.src, (err, files) ->
-      for file in files
-        body = ThemeUtils.compileTheme fs.readFileSync(file).toString()
+      for colorName, color of themeColors
+        for file in files
+          body = ThemeUtils.compileTheme fs.readFileSync(file).toString(), {color}
 
-        body = "/* This is a compiled file, you should be editing the file in the templates directory */\n" + body
+          body = "/* This is a compiled file, you should be editing the file in the templates directory */\n" + body
 
-        name = Path.basename file
-        name = name.replace '.tmpl', ''
-        path = Path.join options.dest, name
+          name = Path.basename file
+          name = name.replace '.tmpl', ''
+          path = Path.join options.dest, colorName, name
 
-        fs.writeFileSync path, body
+          fs.writeFileSync path, body
 
       done()
 

install.json

@@ -7,7 +7,7 @@
       },
       {
         "type": "style",
-        "src": "./themes/pace-theme-{{ options.theme }}.css"
+        "src": "./themes/{{ options.color }}/pace-theme-{{ options.theme }}.css"
       }
     ]
   },
@@ -16,8 +16,8 @@
       "color": {
         "title": "Color",
         "type": "string",
-        "format": "color",
-        "default": "auto"
+        "enum": ["black", "white", "silver", "red", "orange", "yellow", "green", "blue", "pink", "purple"],
+        "default": "blue"
       },
       "theme": {
         "title": "Theme",

themes/black/pace-theme-barber-shop.css

@@ -0,0 +1,72 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace-inactive {
+  display: none;
+}
+
+.pace .pace-progress {
+  background-color: #000000;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+  height: 12px;
+  overflow: hidden;
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
+}
+
+.pace .pace-progress-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -32px;
+  bottom: 0;
+
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  -webkit-background-size: 32px 32px;
+  -moz-background-size: 32px 32px;
+  -o-background-size: 32px 32px;
+  background-size: 32px 32px;
+
+  -webkit-animation: pace-stripe-animation 500ms linear infinite;
+  -moz-animation: pace-stripe-animation 500ms linear infinite;
+  -ms-animation: pace-stripe-animation 500ms linear infinite;
+  -o-animation: pace-stripe-animation 500ms linear infinite;
+  animation: pace-stripe-animation 500ms linear infinite;
+}
+
+@-webkit-keyframes pace-stripe-animation {
+  0% { -webkit-transform: none; transform: none; }
+  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@-moz-keyframes pace-stripe-animation {
+  0% { -moz-transform: none; transform: none; }
+  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@-o-keyframes pace-stripe-animation {
+  0% { -o-transform: none; transform: none; }
+  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@-ms-keyframes pace-stripe-animation {
+  0% { -ms-transform: none; transform: none; }
+  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@keyframes pace-stripe-animation {
+  0% { transform: none; transform: none; }
+  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}

themes/black/pace-theme-big-counter.css

@@ -0,0 +1,35 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace.pace-inactive .pace-progress {
+  display: none;
+}
+
+.pace .pace-progress {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  right: 0;
+  height: 5rem;
+  width: 5rem;
+}
+
+.pace .pace-progress:after {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: .5rem;
+  content: attr(data-progress-text);
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 100;
+  font-size: 5rem;
+  line-height: 1;
+  text-align: right;
+  color: rgba(0, 0, 0, 0.19999999999999996);
+}