diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html
index 056ee08e6d6..8e78264e934 100644
--- a/public/app/features/styleguide/styleguide.html
+++ b/public/app/features/styleguide/styleguide.html
@@ -9,14 +9,19 @@
Switch theme
+
+
+ Reload
+
Colors
- -
+
-
+ ${{color.name}}
+ {{color.value}}
-
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts
index 92d3bdb6f7f..f44ddc5970d 100644
--- a/public/app/features/styleguide/styleguide.ts
+++ b/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;
}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 79d4b7e1b34..2c3ba19125b 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -69,5 +69,6 @@
@import "pages/alerting";
@import "pages/apps";
@import "pages/signup";
+@import "pages/styleguide";
@import "old_responsive";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index e256e931666..ea2f604a687 100644
--- a/public/sass/_variables.dark.scss
+++ b/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;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 05853ec0afb..dc64e1b8eb4 100644
--- a/public/sass/layout/_page.scss
+++ b/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;
}
diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss
new file mode 100644
index 00000000000..06680886e9d
--- /dev/null
+++ b/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)
+// })
diff --git a/tasks/default_task.js b/tasks/default_task.js
index 3ec98fc660f..87fb171c797 100644
--- a/tasks/default_task.js
+++ b/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',
diff --git a/tasks/style_guide_task.js b/tasks/style_guide_task.js
new file mode 100644
index 00000000000..295bc10912e
--- /dev/null
+++ b/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));
+
+ });
+
+};