From 0f26b89101a047f34ec8dd479544df32119aed10 Mon Sep 17 00:00:00 2001
From: rombat <pakkfan@gmail.com>
Date: Tue, 28 Oct 2014 14:44:28 +0100
Subject: [PATCH 1/3] added Material Design color palette for .panels in .less
 source files

---
 less/_panels.less    | 106 +++++++++++++++++++++++++++++++++++++++++++
 less/_variables.less |  79 ++++++++++++++++++++++++++++++++
 less/material.less   |   3 ++
 3 files changed, 188 insertions(+)
 create mode 100644 less/_panels.less

diff --git a/less/_panels.less b/less/_panels.less
new file mode 100644
index 00000000..61a108c6
--- /dev/null
+++ b/less/_panels.less
@@ -0,0 +1,106 @@
+// main: material.less
+
+// Panels mixins
+
+.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
+  border-color: @border;
+
+  & > .panel-heading {
+    color: @heading-text-color;
+    background-color: @heading-bg-color;
+    border-color: @heading-border;
+
+    + .panel-collapse > .panel-body {
+      border-top-color: @border;
+    }
+    .badge {
+      color: @heading-bg-color;
+      background-color: @heading-text-color;
+    }
+  }
+  & > .panel-footer {
+    + .panel-collapse > .panel-body {
+      border-bottom-color: @border;
+    }
+  }
+}
+
+
+
+// Contextual variations
+.panel-material-red{
+    .panel-variant(@panel-material-red-border; @panel-material-red-text; @panel-material-red-heading-bg; @panel-material-red-border);
+}
+
+.panel-material-pink{
+    .panel-variant(@panel-material-pink-border; @panel-material-pink-text; @panel-material-pink-heading-bg; @panel-material-pink-border);
+}
+
+.panel-material-purple{
+    .panel-variant(@panel-material-purple-border; @panel-material-purple-text; @panel-material-purple-heading-bg; @panel-material-purple-border);
+}
+
+.panel-material-deeppurple{
+    .panel-variant(@panel-material-deeppurple-border; @panel-material-deeppurple-text; @panel-material-deeppurple-heading-bg; @panel-material-deeppurple-border);
+}
+
+.panel-material-indigo{
+    .panel-variant(@panel-material-indigo-border; @panel-material-indigo-text; @panel-material-indigo-heading-bg; @panel-material-indigo-border);
+}
+
+.panel-material-blue{
+    .panel-variant(@panel-material-blue-border; @panel-material-blue-text; @panel-material-blue-heading-bg; @panel-material-blue-border);
+}
+
+.panel-material-lightblue{
+    .panel-variant(@panel-material-lightblue-border; @panel-material-lightblue-text; @panel-material-lightblue-heading-bg; @panel-material-lightblue-border);
+}
+
+.panel-material-cyan{
+    .panel-variant(@panel-material-cyan-border; @panel-material-cyan-text; @panel-material-cyan-heading-bg; @panel-material-cyan-border);
+}
+
+.panel-material-teal{
+    .panel-variant(@panel-material-teal-border; @panel-material-teal-text; @panel-material-teal-heading-bg; @panel-material-teal-border);
+}
+
+.panel-material-green{
+    .panel-variant(@panel-material-green-border; @panel-material-green-text; @panel-material-green-heading-bg; @panel-material-green-border);
+}
+
+.panel-material-lightgreen{
+    .panel-variant(@panel-material-lightgreen-border; @panel-material-lightgreen-text; @panel-material-lightgreen-heading-bg; @panel-material-lightgreen-border);
+}
+
+.panel-material-lime{
+    .panel-variant(@panel-material-lime-border; @panel-material-lime-text; @panel-material-lime-heading-bg; @panel-material-lime-border);
+}
+
+.panel-material-yellow{
+    .panel-variant(@panel-material-yellow-border; @panel-material-yellow-text; @panel-material-yellow-heading-bg; @panel-material-yellow-border);
+}
+
+.panel-material-amber{
+    .panel-variant(@panel-material-amber-border; @panel-material-amber-text; @panel-material-amber-heading-bg; @panel-material-amber-border);
+}
+
+.panel-material-orange{
+    .panel-variant(@panel-material-orange-border; @panel-material-orange-text; @panel-material-orange-heading-bg; @panel-material-orange-border);
+}
+
+.panel-material-deeporange{
+    .panel-variant(@panel-material-deeporange-border; @panel-material-deeporange-text; @panel-material-deeporange-heading-bg; @panel-material-deeporange-border);
+}
+
+.panel-material-brown{
+    .panel-variant(@panel-material-brown-border; @panel-material-brown-text; @panel-material-brown-heading-bg; @panel-material-brown-border);
+}
+
+.panel-material-grey{
+    .panel-variant(@panel-material-grey-border; @panel-material-grey-text; @panel-material-grey-heading-bg; @panel-material-grey-border);
+}
+
+.panel-material-bluegrey{
+    .panel-variant(@panel-material-bluegrey-border; @panel-material-bluegrey-text; @panel-material-bluegrey-heading-bg; @panel-material-bluegrey-border);
+}
+
diff --git a/less/_variables.less b/less/_variables.less
index 7902fd33..95aa7e93 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -107,3 +107,82 @@
 
 @text-disabled: #a8a8a8;
 @background-disabled: #eaeaea;
+
+// Panels
+
+@panel-material-red-text:                #e84e40;
+@panel-material-red-heading-bg:          #fde0dc;
+@panel-material-red-border:              darken(spin(@panel-material-red-heading-bg, -10), 5%);
+
+@panel-material-pink-text:               #ec407a;
+@panel-material-pink-heading-bg:         #fce4ec;
+@panel-material-pink-border:             darken(spin(@panel-material-pink-heading-bg, -10), 5%);
+
+@panel-material-purple-text:             #ab47bc;
+@panel-material-purple-heading-bg:       #f3e5f5;
+@panel-material-purple-border:           darken(spin(@panel-material-purple-heading-bg, -10), 5%);
+
+@panel-material-deeppurple-text:         #7e57c2;
+@panel-material-deeppurple-heading-bg:   #ede7f6;
+@panel-material-deeppurple-border:       darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%);
+
+@panel-material-indigo-text:             #5c6bc0;
+@panel-material-indigo-heading-bg:       #e8eaf6;
+@panel-material-indigo-border:           darken(spin(@panel-material-indigo-heading-bg, -10), 5%);
+
+@panel-material-blue-text:               #738ffe;
+@panel-material-blue-heading-bg:         #e7e9fd;
+@panel-material-blue-border:             darken(spin(@panel-material-blue-heading-bg, -10), 5%);
+
+@panel-material-lightblue-text:          #29b6f6;
+@panel-material-lightblue-heading-bg:    #e1f5fe;
+@panel-material-lightblue-border:        darken(spin(@panel-material-lightblue-heading-bg, -10), 5%);
+
+@panel-material-cyan-text:               #26c6da;
+@panel-material-cyan-heading-bg:         #e0f7fa;
+@panel-material-cyan-border:             darken(spin(@panel-material-cyan-heading-bg, -10), 5%);
+
+@panel-material-teal-text:               #26a69a;
+@panel-material-teal-heading-bg:         #e0f2f1;
+@panel-material-teal-border:             darken(spin(@panel-material-teal-heading-bg, -10), 5%);
+
+@panel-material-green-text:              #2baf2b;
+@panel-material-green-heading-bg:        #d0f8ce;
+@panel-material-green-border:            darken(spin(@panel-material-green-heading-bg, -10), 5%);
+
+@panel-material-lightgreen-text:         #689f38;
+@panel-material-lightgreen-heading-bg:   #f1f8e9;
+@panel-material-lightgreen-border:       darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%);
+
+@panel-material-lime-text:               #afb42b;
+@panel-material-lime-heading-bg:         #f9fbe7;
+@panel-material-lime-border:             darken(spin(@panel-material-lime-heading-bg, -10), 5%);
+
+@panel-material-yellow-text:             #f9a825;
+@panel-material-yellow-heading-bg:       #fffde7;
+@panel-material-yellow-border:           darken(spin(@panel-material-yellow-heading-bg, -10), 5%);
+
+@panel-material-amber-text:              #ffb300;
+@panel-material-amber-heading-bg:        #fff8e1;
+@panel-material-amber-border:            darken(spin(@panel-material-amber-heading-bg, -10), 5%);
+
+@panel-material-orange-text:             #ffa726;
+@panel-material-orange-heading-bg:       #fff3e0;
+@panel-material-orange-border:           darken(spin(@panel-material-orange-heading-bg, -10), 5%);
+
+@panel-material-deeporange-text:         #ff7043;
+@panel-material-deeporange-heading-bg:   #fbe9e7;
+@panel-material-deeporange-border:       darken(spin(@panel-material-deeporange-heading-bg, -10), 5%);
+
+@panel-material-brown-text:              #8d6e63;
+@panel-material-brown-heading-bg:        #d7ccc8;
+@panel-material-brown-border:            darken(spin(@panel-material-brown-heading-bg, -10), 5%);
+
+@panel-material-grey-text:               #9e9e9e;
+@panel-material-grey-heading-bg:         #f5f5f5;
+@panel-material-grey-border:             darken(spin(@panel-material-grey-heading-bg, -10), 5%);
+
+@panel-material-bluegrey-text:           #607d8b;
+@panel-material-bluegrey-heading-bg:     #cfd8dc;
+@panel-material-bluegrey-border:         darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%);
+
diff --git a/less/material.less b/less/material.less
index 89ca952f..909931dc 100644
--- a/less/material.less
+++ b/less/material.less
@@ -34,6 +34,9 @@ h5, h6{
 // Buttons
 @import "_buttons.less";
 
+//Panels
+@import "_panels.less";
+
 // Checkboxes
 @import "_checkboxes.less";
 

From e06f43a66712503edcdd25ae854c8317b1b342d4 Mon Sep 17 00:00:00 2001
From: rombat <pakkfan@gmail.com>
Date: Tue, 28 Oct 2014 16:25:23 +0100
Subject: [PATCH 2/3] removed unnecessary border variable and updated mixins
 accordingly

---
 less/_panels.less    | 38 +++++++++++++++++++-------------------
 less/_variables.less | 19 -------------------
 2 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/less/_panels.less b/less/_panels.less
index 61a108c6..584a0611 100644
--- a/less/_panels.less
+++ b/less/_panels.less
@@ -29,78 +29,78 @@
 
 // Contextual variations
 .panel-material-red{
-    .panel-variant(@panel-material-red-border; @panel-material-red-text; @panel-material-red-heading-bg; @panel-material-red-border);
+.panel-variant((darken(spin(@panel-material-red-heading-bg, -10), 5%)); @panel-material-red-text; @panel-material-red-heading-bg; (darken(spin(@panel-material-red-heading-bg, -10), 5%)));
 }
 
 .panel-material-pink{
-    .panel-variant(@panel-material-pink-border; @panel-material-pink-text; @panel-material-pink-heading-bg; @panel-material-pink-border);
+.panel-variant((darken(spin(@panel-material-pink-heading-bg, -10), 5%)); @panel-material-pink-text; @panel-material-pink-heading-bg; (darken(spin(@panel-material-pink-heading-bg, -10), 5%)));
 }
 
 .panel-material-purple{
-    .panel-variant(@panel-material-purple-border; @panel-material-purple-text; @panel-material-purple-heading-bg; @panel-material-purple-border);
+.panel-variant((darken(spin(@panel-material-purple-heading-bg, -10), 5%)); @panel-material-purple-text; @panel-material-purple-heading-bg; (darken(spin(@panel-material-purple-heading-bg, -10), 5%)));
 }
 
 .panel-material-deeppurple{
-    .panel-variant(@panel-material-deeppurple-border; @panel-material-deeppurple-text; @panel-material-deeppurple-heading-bg; @panel-material-deeppurple-border);
+.panel-variant((darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%)); @panel-material-deeppurple-text; @panel-material-deeppurple-heading-bg; (darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%)));
 }
 
 .panel-material-indigo{
-    .panel-variant(@panel-material-indigo-border; @panel-material-indigo-text; @panel-material-indigo-heading-bg; @panel-material-indigo-border);
+.panel-variant((darken(spin(@panel-material-indigo-heading-bg, -10), 5%)); @panel-material-indigo-text; @panel-material-indigo-heading-bg; (darken(spin(@panel-material-indigo-heading-bg, -10), 5%)));
 }
 
 .panel-material-blue{
-    .panel-variant(@panel-material-blue-border; @panel-material-blue-text; @panel-material-blue-heading-bg; @panel-material-blue-border);
+.panel-variant((darken(spin(@panel-material-blue-heading-bg, -10), 5%)); @panel-material-blue-text; @panel-material-blue-heading-bg; (darken(spin(@panel-material-blue-heading-bg, -10), 5%)));
 }
 
 .panel-material-lightblue{
-    .panel-variant(@panel-material-lightblue-border; @panel-material-lightblue-text; @panel-material-lightblue-heading-bg; @panel-material-lightblue-border);
+.panel-variant((darken(spin(@panel-material-lightblue-heading-bg, -10), 5%)); @panel-material-lightblue-text; @panel-material-lightblue-heading-bg; (darken(spin(@panel-material-lightblue-heading-bg, -10), 5%)));
 }
 
 .panel-material-cyan{
-    .panel-variant(@panel-material-cyan-border; @panel-material-cyan-text; @panel-material-cyan-heading-bg; @panel-material-cyan-border);
+.panel-variant((darken(spin(@panel-material-cyan-heading-bg, -10), 5%)); @panel-material-cyan-text; @panel-material-cyan-heading-bg; (darken(spin(@panel-material-cyan-heading-bg, -10), 5%)));
 }
 
 .panel-material-teal{
-    .panel-variant(@panel-material-teal-border; @panel-material-teal-text; @panel-material-teal-heading-bg; @panel-material-teal-border);
+.panel-variant((darken(spin(@panel-material-teal-heading-bg, -10), 5%)); @panel-material-teal-text; @panel-material-teal-heading-bg; (darken(spin(@panel-material-teal-heading-bg, -10), 5%)));
 }
 
 .panel-material-green{
-    .panel-variant(@panel-material-green-border; @panel-material-green-text; @panel-material-green-heading-bg; @panel-material-green-border);
+.panel-variant((darken(spin(@panel-material-green-heading-bg, -10), 5%)); @panel-material-green-text; @panel-material-green-heading-bg; (darken(spin(@panel-material-green-heading-bg, -10), 5%)));
 }
 
 .panel-material-lightgreen{
-    .panel-variant(@panel-material-lightgreen-border; @panel-material-lightgreen-text; @panel-material-lightgreen-heading-bg; @panel-material-lightgreen-border);
+.panel-variant((darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%)); @panel-material-lightgreen-text; @panel-material-lightgreen-heading-bg; (darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%)));
 }
 
 .panel-material-lime{
-    .panel-variant(@panel-material-lime-border; @panel-material-lime-text; @panel-material-lime-heading-bg; @panel-material-lime-border);
+.panel-variant((darken(spin(@panel-material-lime-heading-bg, -10), 5%)); @panel-material-lime-text; @panel-material-lime-heading-bg; (darken(spin(@panel-material-lime-heading-bg, -10), 5%)));
 }
 
 .panel-material-yellow{
-    .panel-variant(@panel-material-yellow-border; @panel-material-yellow-text; @panel-material-yellow-heading-bg; @panel-material-yellow-border);
+.panel-variant((darken(spin(@panel-material-yellow-heading-bg, -10), 5%)); @panel-material-yellow-text; @panel-material-yellow-heading-bg; (darken(spin(@panel-material-yellow-heading-bg, -10), 5%)));
 }
 
 .panel-material-amber{
-    .panel-variant(@panel-material-amber-border; @panel-material-amber-text; @panel-material-amber-heading-bg; @panel-material-amber-border);
+.panel-variant((darken(spin(@panel-material-amber-heading-bg, -10), 5%)); @panel-material-amber-text; @panel-material-amber-heading-bg; (darken(spin(@panel-material-amber-heading-bg, -10), 5%)));
 }
 
 .panel-material-orange{
-    .panel-variant(@panel-material-orange-border; @panel-material-orange-text; @panel-material-orange-heading-bg; @panel-material-orange-border);
+.panel-variant((darken(spin(@panel-material-orange-heading-bg, -10), 5%)); @panel-material-orange-text; @panel-material-orange-heading-bg; (darken(spin(@panel-material-orange-heading-bg, -10), 5%)));
 }
 
 .panel-material-deeporange{
-    .panel-variant(@panel-material-deeporange-border; @panel-material-deeporange-text; @panel-material-deeporange-heading-bg; @panel-material-deeporange-border);
+.panel-variant((darken(spin(@panel-material-deeporange-heading-bg, -10), 5%)); @panel-material-deeporange-text; @panel-material-deeporange-heading-bg; (darken(spin(@panel-material-deeporange-heading-bg, -10), 5%)));
 }
 
 .panel-material-brown{
-    .panel-variant(@panel-material-brown-border; @panel-material-brown-text; @panel-material-brown-heading-bg; @panel-material-brown-border);
+.panel-variant((darken(spin(@panel-material-brown-heading-bg, -10), 5%)); @panel-material-brown-text; @panel-material-brown-heading-bg; (darken(spin(@panel-material-brown-heading-bg, -10), 5%)));
 }
 
 .panel-material-grey{
-    .panel-variant(@panel-material-grey-border; @panel-material-grey-text; @panel-material-grey-heading-bg; @panel-material-grey-border);
+.panel-variant((darken(spin(@panel-material-grey-heading-bg, -10), 5%)); @panel-material-grey-text; @panel-material-grey-heading-bg; (darken(spin(@panel-material-grey-heading-bg, -10), 5%)));
 }
 
 .panel-material-bluegrey{
-    .panel-variant(@panel-material-bluegrey-border; @panel-material-bluegrey-text; @panel-material-bluegrey-heading-bg; @panel-material-bluegrey-border);
+.panel-variant((darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%)); @panel-material-bluegrey-text; @panel-material-bluegrey-heading-bg; (darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%)));
 }
 
diff --git a/less/_variables.less b/less/_variables.less
index 95aa7e93..14c3c17a 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -112,77 +112,58 @@
 
 @panel-material-red-text:                #e84e40;
 @panel-material-red-heading-bg:          #fde0dc;
-@panel-material-red-border:              darken(spin(@panel-material-red-heading-bg, -10), 5%);
 
 @panel-material-pink-text:               #ec407a;
 @panel-material-pink-heading-bg:         #fce4ec;
-@panel-material-pink-border:             darken(spin(@panel-material-pink-heading-bg, -10), 5%);
 
 @panel-material-purple-text:             #ab47bc;
 @panel-material-purple-heading-bg:       #f3e5f5;
-@panel-material-purple-border:           darken(spin(@panel-material-purple-heading-bg, -10), 5%);
 
 @panel-material-deeppurple-text:         #7e57c2;
 @panel-material-deeppurple-heading-bg:   #ede7f6;
-@panel-material-deeppurple-border:       darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%);
 
 @panel-material-indigo-text:             #5c6bc0;
 @panel-material-indigo-heading-bg:       #e8eaf6;
-@panel-material-indigo-border:           darken(spin(@panel-material-indigo-heading-bg, -10), 5%);
 
 @panel-material-blue-text:               #738ffe;
 @panel-material-blue-heading-bg:         #e7e9fd;
-@panel-material-blue-border:             darken(spin(@panel-material-blue-heading-bg, -10), 5%);
 
 @panel-material-lightblue-text:          #29b6f6;
 @panel-material-lightblue-heading-bg:    #e1f5fe;
-@panel-material-lightblue-border:        darken(spin(@panel-material-lightblue-heading-bg, -10), 5%);
 
 @panel-material-cyan-text:               #26c6da;
 @panel-material-cyan-heading-bg:         #e0f7fa;
-@panel-material-cyan-border:             darken(spin(@panel-material-cyan-heading-bg, -10), 5%);
 
 @panel-material-teal-text:               #26a69a;
 @panel-material-teal-heading-bg:         #e0f2f1;
-@panel-material-teal-border:             darken(spin(@panel-material-teal-heading-bg, -10), 5%);
 
 @panel-material-green-text:              #2baf2b;
 @panel-material-green-heading-bg:        #d0f8ce;
-@panel-material-green-border:            darken(spin(@panel-material-green-heading-bg, -10), 5%);
 
 @panel-material-lightgreen-text:         #689f38;
 @panel-material-lightgreen-heading-bg:   #f1f8e9;
-@panel-material-lightgreen-border:       darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%);
 
 @panel-material-lime-text:               #afb42b;
 @panel-material-lime-heading-bg:         #f9fbe7;
-@panel-material-lime-border:             darken(spin(@panel-material-lime-heading-bg, -10), 5%);
 
 @panel-material-yellow-text:             #f9a825;
 @panel-material-yellow-heading-bg:       #fffde7;
-@panel-material-yellow-border:           darken(spin(@panel-material-yellow-heading-bg, -10), 5%);
 
 @panel-material-amber-text:              #ffb300;
 @panel-material-amber-heading-bg:        #fff8e1;
-@panel-material-amber-border:            darken(spin(@panel-material-amber-heading-bg, -10), 5%);
 
 @panel-material-orange-text:             #ffa726;
 @panel-material-orange-heading-bg:       #fff3e0;
-@panel-material-orange-border:           darken(spin(@panel-material-orange-heading-bg, -10), 5%);
 
 @panel-material-deeporange-text:         #ff7043;
 @panel-material-deeporange-heading-bg:   #fbe9e7;
-@panel-material-deeporange-border:       darken(spin(@panel-material-deeporange-heading-bg, -10), 5%);
 
 @panel-material-brown-text:              #8d6e63;
 @panel-material-brown-heading-bg:        #d7ccc8;
-@panel-material-brown-border:            darken(spin(@panel-material-brown-heading-bg, -10), 5%);
 
 @panel-material-grey-text:               #9e9e9e;
 @panel-material-grey-heading-bg:         #f5f5f5;
-@panel-material-grey-border:             darken(spin(@panel-material-grey-heading-bg, -10), 5%);
 
 @panel-material-bluegrey-text:           #607d8b;
 @panel-material-bluegrey-heading-bg:     #cfd8dc;
-@panel-material-bluegrey-border:         darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%);
 

From 1adf620bdc849fb2602ec210ed4826907ba35603 Mon Sep 17 00:00:00 2001
From: rombat <pakkfan@gmail.com>
Date: Tue, 28 Oct 2014 20:34:51 +0100
Subject: [PATCH 3/3] used colors for panels according to Material
 specifications, removed unnecessary variables and added 3 colors from
 Material Design color palette

---
 less/_panels.less    | 40 ++++++++++++++--------------
 less/_variables.less | 62 +++-----------------------------------------
 2 files changed, 23 insertions(+), 79 deletions(-)

diff --git a/less/_panels.less b/less/_panels.less
index 584a0611..c7bc0183 100644
--- a/less/_panels.less
+++ b/less/_panels.less
@@ -29,78 +29,78 @@
 
 // Contextual variations
 .panel-material-red{
-.panel-variant((darken(spin(@panel-material-red-heading-bg, -10), 5%)); @panel-material-red-text; @panel-material-red-heading-bg; (darken(spin(@panel-material-red-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@red, -10), 5%)); @darkbg-text; @red; (darken(spin(@red, -10), 5%)));
 }
 
 .panel-material-pink{
-.panel-variant((darken(spin(@panel-material-pink-heading-bg, -10), 5%)); @panel-material-pink-text; @panel-material-pink-heading-bg; (darken(spin(@panel-material-pink-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@pink, -10), 5%)); @darkbg-text; @pink; (darken(spin(@pink, -10), 5%)));
 }
 
 .panel-material-purple{
-.panel-variant((darken(spin(@panel-material-purple-heading-bg, -10), 5%)); @panel-material-purple-text; @panel-material-purple-heading-bg; (darken(spin(@panel-material-purple-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@purple, -10), 5%)); @darkbg-text; @purple; (darken(spin(@purple, -10), 5%)));
 }
 
 .panel-material-deeppurple{
-.panel-variant((darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%)); @panel-material-deeppurple-text; @panel-material-deeppurple-heading-bg; (darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@deeppurple, -10), 5%)); @darkbg-text; @deeppurple; (darken(spin(@deeppurple, -10), 5%)));
 }
 
 .panel-material-indigo{
-.panel-variant((darken(spin(@panel-material-indigo-heading-bg, -10), 5%)); @panel-material-indigo-text; @panel-material-indigo-heading-bg; (darken(spin(@panel-material-indigo-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@indigo, -10), 5%)); @darkbg-text; @indigo; (darken(spin(@indigo, -10), 5%)));
 }
 
 .panel-material-blue{
-.panel-variant((darken(spin(@panel-material-blue-heading-bg, -10), 5%)); @panel-material-blue-text; @panel-material-blue-heading-bg; (darken(spin(@panel-material-blue-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@blue, -10), 5%)); @darkbg-text; @blue; (darken(spin(@blue, -10), 5%)));
 }
 
 .panel-material-lightblue{
-.panel-variant((darken(spin(@panel-material-lightblue-heading-bg, -10), 5%)); @panel-material-lightblue-text; @panel-material-lightblue-heading-bg; (darken(spin(@panel-material-lightblue-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@lightblue, -10), 5%)); @darkbg-text; @lightblue; (darken(spin(@lightblue, -10), 5%)));
 }
 
 .panel-material-cyan{
-.panel-variant((darken(spin(@panel-material-cyan-heading-bg, -10), 5%)); @panel-material-cyan-text; @panel-material-cyan-heading-bg; (darken(spin(@panel-material-cyan-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@cyan, -10), 5%)); @darkbg-text; @cyan; (darken(spin(@cyan, -10), 5%)));
 }
 
 .panel-material-teal{
-.panel-variant((darken(spin(@panel-material-teal-heading-bg, -10), 5%)); @panel-material-teal-text; @panel-material-teal-heading-bg; (darken(spin(@panel-material-teal-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@teal, -10), 5%)); @darkbg-text; @teal; (darken(spin(@teal, -10), 5%)));
 }
 
 .panel-material-green{
-.panel-variant((darken(spin(@panel-material-green-heading-bg, -10), 5%)); @panel-material-green-text; @panel-material-green-heading-bg; (darken(spin(@panel-material-green-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@green, -10), 5%)); @darkbg-text; @green; (darken(spin(@green, -10), 5%)));
 }
 
 .panel-material-lightgreen{
-.panel-variant((darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%)); @panel-material-lightgreen-text; @panel-material-lightgreen-heading-bg; (darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@lightgreen, -10), 5%)); @darkbg-text; @lightgreen; (darken(spin(@lightgreen, -10), 5%)));
 }
 
 .panel-material-lime{
-.panel-variant((darken(spin(@panel-material-lime-heading-bg, -10), 5%)); @panel-material-lime-text; @panel-material-lime-heading-bg; (darken(spin(@panel-material-lime-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@lime, -10), 5%)); @lightbg-text; @lime; (darken(spin(@lime, -10), 5%)));
 }
 
-.panel-material-yellow{
-.panel-variant((darken(spin(@panel-material-yellow-heading-bg, -10), 5%)); @panel-material-yellow-text; @panel-material-yellow-heading-bg; (darken(spin(@panel-material-yellow-heading-bg, -10), 5%)));
+.panel-material-lightyellow{
+.panel-variant((darken(spin(@lightyellow, -10), 5%)); @lightbg-text; @lightyellow; (darken(spin(@lightyellow, -10), 5%)));
 }
 
 .panel-material-amber{
-.panel-variant((darken(spin(@panel-material-amber-heading-bg, -10), 5%)); @panel-material-amber-text; @panel-material-amber-heading-bg; (darken(spin(@panel-material-amber-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@amber, -10), 5%)); @lightbg-text; @amber; (darken(spin(@amber, -10), 5%)));
 }
 
 .panel-material-orange{
-.panel-variant((darken(spin(@panel-material-orange-heading-bg, -10), 5%)); @panel-material-orange-text; @panel-material-orange-heading-bg; (darken(spin(@panel-material-orange-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@orange, -10), 5%)); @lightbg-text; @orange; (darken(spin(@orange, -10), 5%)));
 }
 
 .panel-material-deeporange{
-.panel-variant((darken(spin(@panel-material-deeporange-heading-bg, -10), 5%)); @panel-material-deeporange-text; @panel-material-deeporange-heading-bg; (darken(spin(@panel-material-deeporange-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@deeporange, -10), 5%)); @darkbg-text; @deeporange; (darken(spin(@deeporange, -10), 5%)));
 }
 
 .panel-material-brown{
-.panel-variant((darken(spin(@panel-material-brown-heading-bg, -10), 5%)); @panel-material-brown-text; @panel-material-brown-heading-bg; (darken(spin(@panel-material-brown-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@brown, -10), 5%)); @darkbg-text; @brown; (darken(spin(@brown, -10), 5%)));
 }
 
 .panel-material-grey{
-.panel-variant((darken(spin(@panel-material-grey-heading-bg, -10), 5%)); @panel-material-grey-text; @panel-material-grey-heading-bg; (darken(spin(@panel-material-grey-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@grey, -10), 5%)); @lightbg-text; @grey; (darken(spin(@grey, -10), 5%)));
 }
 
 .panel-material-bluegrey{
-.panel-variant((darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%)); @panel-material-bluegrey-text; @panel-material-bluegrey-heading-bg; (darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%)));
+.panel-variant((darken(spin(@bluegrey, -10), 5%)); @darkbg-text; @bluegrey; (darken(spin(@bluegrey, -10), 5%)));
 }
 
diff --git a/less/_variables.less b/less/_variables.less
index 14c3c17a..53175431 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -8,13 +8,16 @@
 @pink: #E91E63;
 @purple: #9C27B0;
 @deeppurple: #673AB7;
+@blue: #5677fc;
 @indigo: #3F51B5;
 @lightblue: #03A9F4;
 @cyan: #00BCD4;
 @teal: #009688;
+@green: #259b24;
 @lightgreen: #8BC34A;
 @lime: #CDDC39;
 @lightyellow: #FFEB3B;
+@amber: #ffc107;
 @orange: #FF9800;
 @deeporange: #FF5722;
 @grey: #9E9E9E;
@@ -108,62 +111,3 @@
 @text-disabled: #a8a8a8;
 @background-disabled: #eaeaea;
 
-// Panels
-
-@panel-material-red-text:                #e84e40;
-@panel-material-red-heading-bg:          #fde0dc;
-
-@panel-material-pink-text:               #ec407a;
-@panel-material-pink-heading-bg:         #fce4ec;
-
-@panel-material-purple-text:             #ab47bc;
-@panel-material-purple-heading-bg:       #f3e5f5;
-
-@panel-material-deeppurple-text:         #7e57c2;
-@panel-material-deeppurple-heading-bg:   #ede7f6;
-
-@panel-material-indigo-text:             #5c6bc0;
-@panel-material-indigo-heading-bg:       #e8eaf6;
-
-@panel-material-blue-text:               #738ffe;
-@panel-material-blue-heading-bg:         #e7e9fd;
-
-@panel-material-lightblue-text:          #29b6f6;
-@panel-material-lightblue-heading-bg:    #e1f5fe;
-
-@panel-material-cyan-text:               #26c6da;
-@panel-material-cyan-heading-bg:         #e0f7fa;
-
-@panel-material-teal-text:               #26a69a;
-@panel-material-teal-heading-bg:         #e0f2f1;
-
-@panel-material-green-text:              #2baf2b;
-@panel-material-green-heading-bg:        #d0f8ce;
-
-@panel-material-lightgreen-text:         #689f38;
-@panel-material-lightgreen-heading-bg:   #f1f8e9;
-
-@panel-material-lime-text:               #afb42b;
-@panel-material-lime-heading-bg:         #f9fbe7;
-
-@panel-material-yellow-text:             #f9a825;
-@panel-material-yellow-heading-bg:       #fffde7;
-
-@panel-material-amber-text:              #ffb300;
-@panel-material-amber-heading-bg:        #fff8e1;
-
-@panel-material-orange-text:             #ffa726;
-@panel-material-orange-heading-bg:       #fff3e0;
-
-@panel-material-deeporange-text:         #ff7043;
-@panel-material-deeporange-heading-bg:   #fbe9e7;
-
-@panel-material-brown-text:              #8d6e63;
-@panel-material-brown-heading-bg:        #d7ccc8;
-
-@panel-material-grey-text:               #9e9e9e;
-@panel-material-grey-heading-bg:         #f5f5f5;
-
-@panel-material-bluegrey-text:           #607d8b;
-@panel-material-bluegrey-heading-bg:     #cfd8dc;
-