ux(): styleguide with auto generated colors generated from the sass variable files

public/app/features/styleguide/styleguide.html

@@ -9,14 +9,19 @@
 			<i class="fa fa-random"></i>
 			Switch theme
 		</a>
+		<a class="btn btn-inverse" ng-click="ctrl.switchTheme()">
+			<i class="fa fa-refresh"></i>
+			Reload
+		</a>
 	</div>
 
 
 	<h3 class="page-heading">Colors</h3>
 	<ul>
-		<li class="style-guide-color-card">
+		<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
+			<strong>${{color.name}}</strong>
+			<em>{{color.value}}</strong>
 		</li>
 	</ul>
 
-
 </div>

public/app/features/styleguide/styleguide.ts

@@ -1,11 +1,25 @@
 
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
+import _ from 'lodash';
 
 class StyleGuideCtrl {
+  colors: any = [];
+  theme: string;
+
+  /** @ngInject **/
+  constructor($http) {
+    this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
+
+    $http.get('public/sass/styleguide.json').then(res => {
+      this.colors = _.map(res.data[this.theme], (value, key) => {
+        return {name: key, value: value};
+      });
+    });
+  }
 
   switchTheme() {
-    var other = config.bootData.user.lightTheme ? 'dark' : 'light';
+    var other = this.theme === 'dark' ? 'light' : 'dark';
     window.location.href = config.appSubUrl + '/styleguide?theme=' + other;
   }
 

public/sass/_grafana.scss

@@ -69,5 +69,6 @@
 @import "pages/alerting";
 @import "pages/apps";
 @import "pages/signup";
+@import "pages/styleguide";
 
 @import "old_responsive";

public/sass/_variables.dark.scss

@@ -5,10 +5,10 @@
 // Grays
 // -------------------------
 $black:                 #000;
+
 $gray:                  #bbb;
 $gray-dark:             #262626;
 $gray-darker:           #1f1f1f;
-
 $gray-light:            #ADAFAE;
 $gray-lighter:          #BBBFC2;
 $white:                 #fff;

public/sass/layout/_page.scss

@@ -36,8 +36,8 @@
   padding: $spacer 0;
 
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: flex-end;
+  align-items: flex-end;
   flex-wrap: wrap-reverse;
   border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
   border-image-slice: 1;
@@ -48,6 +48,10 @@
 
   h1 {
     font-style: italic;
+    flex-grow: 1;
+  }
+  button, a {
+    margin-left: $spacer;
   }
   margin-bottom: 2rem;
 }

public/sass/pages/_styleguide.scss

@@ -0,0 +1,65 @@
+.style-guide-color-card {
+  list-style: none;
+  margin: 0 $spacer $spacer 0;
+  float: left;
+  padding: $spacer*2;
+  width: 20rem;
+  border-radius: 0.5rem;
+  text-shadow: 0 0 8px #fff;
+  color: $black;
+  font-size: $font-size-sm;
+}
+
+.color-card-body-bg { background-color: $body-bg; }
+.color-card-page-bg { background-color: $page-bg; }
+.color-card-gray { background-color: $gray; }
+
+// define("areas/styleguide/static/script/app/colors", [], function() {
+//    "use strict";
+//    var a = function(a) {
+//        return 0 === a.indexOf("rgba") ? (a = a.match(/(\d{1,3})/gi),
+//        [a[0], a[1], a[2]]) : (a = a.replace(/^#/, "").match(/[0-9a-z]{2}/gi),
+//        [parseInt(a[0], 16), parseInt(a[1], 16), parseInt(a[2], 16)])
+//    }
+//      , b = function(b, c) {
+//        var d = 0
+//          , e = 0;
+//        for (b = a(b),
+//        c = a(c); e < b.length; )
+//            d += (b[e] - c[e]) * (b[e] - c[e]),
+//            e++;
+//        return Math.sqrt(d)
+//    }
+//      , c = function() {
+//        $(".color-card").removeClass("isnt-approximate is-approximate is-exact")
+//    }
+//      , d = function() {
+//        var a = $("#proximityMatch").val()
+//          , c = $(".swatch");
+//        c.each(function() {
+//            var c = $(this)
+//              , d = b(a, c.children("i").text());
+//            c.parent().removeClass("is-approximate isnt-approximate is-exact"),
+//            20 > d ? (c.css("border-color", /^#/.test(a) ? a : "#" + a),
+//            c.parent().addClass("is-approximate"),
+//            c.parent().addClass("has-match"),
+//            0 === d && c.parent().addClass("is-exact")) : c.parent().addClass("isnt-approximate")
+//        })
+//    }
+//      , e = $("#proximityMatch")
+//      , f = function() {
+//        var a = e.val();
+//        "#" == a[0] && (a = a.substring(1)),
+//        6 == a.length ? d() : c()
+//    }
+//    ;
+//    e.on("input", f),
+//    e.val() && f();
+//    var g = function() {
+//        var a = "/static/images/styleguide/leaves.jpg"
+//          , b = $("[data-colors]");
+//        "none" === b.css("background-image") ? b.css("background-image", "url('" + a + "')") : b.css("background-image", "none")
+//    }
+//    ;
+//    $("#toggle-background-image").on("click", g)
+// })

tasks/default_task.js

@@ -2,7 +2,7 @@
 module.exports = function(grunt) {
   'use strict';
 
-  grunt.registerTask('css', ['sass', 'concat:cssDark', 'concat:cssLight']);
+  grunt.registerTask('css', ['sass', 'concat:cssDark', 'concat:cssLight', 'styleguide']);
   grunt.registerTask('default', [
     'jscs',
     'jshint',

tasks/style_guide_task.js

@@ -0,0 +1,47 @@
+module.exports = function(grunt) {
+  "use strict";
+
+  function escapeRegExp(str) {
+    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+  }
+
+  function extractColour(line) {
+    var regex = /\s*:\s*(#[a-fA-F0-9]{3,6})\s*(!default|!default;)?/;
+    var matches = line.match(regex);
+    return matches ? matches[1] : matches;
+  }
+
+  function extractVariable(line) {
+    var matches = line.match(/(\$[0-9a-zA-Z_-]+)\s*(!default|!default;)?/)
+    return matches ? matches[1] : matches
+  }
+
+  function readVars(file, obj) {
+    var content = grunt.file.read(file);
+    var lines = content.split('\n');
+
+    lines.forEach(function(line) {
+      var variable = extractVariable(line);
+      if (variable) {
+        var color = extractColour(line, variable);
+        if (color) {
+          obj[variable] = color;
+        }
+      }
+    });
+  }
+
+  grunt.registerTask('styleguide', function() {
+    var data = {
+      dark: {}, light: {}
+    };
+
+    readVars('public/sass/_variables.dark.scss', data.dark);
+    readVars('public/sass/_variables.light.scss', data.light);
+
+    var styleGuideJson = grunt.config().genDir + '/sass/styleguide.json';
+    grunt.file.write(styleGuideJson, JSON.stringify(data, null, 4));
+
+  });
+
+};