From f1bac0b4b9242f0c480e1e77ae29f364a73ccfe2 Mon Sep 17 00:00:00 2001
From: Korgan <Korgan00@hotmail.com>
Date: Sat, 6 Dec 2014 02:44:57 +0100
Subject: [PATCH] All colors mixed

---
 index.html         | 296 ++++++++++++++++++++++++++++++++++++++++++++-
 less/_buttons.less |  13 +-
 less/_colors.less  |  18 +++
 less/_mixins.less  | 111 ++++++++++++++++-
 less/_navbar.less  |   4 +-
 5 files changed, 418 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index c8c74289..43c2cfe9 100644
--- a/index.html
+++ b/index.html
@@ -569,6 +569,51 @@
                 </div>
               </div>
 
+              <div class="navbar navbar-material-light-blue-300">
+                <div class="navbar-header">
+                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </button>
+                  <a class="navbar-brand" href="javascript:void(0)">Brand</a>
+                </div>
+                <div class="navbar-collapse collapse navbar-warning-collapse">
+                  <ul class="nav navbar-nav">
+                    <li class="active"><a href="javascript:void(0)">Active</a></li>
+                    <li><a href="javascript:void(0)">Link</a></li>
+                    <li class="dropdown">
+                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                      <ul class="dropdown-menu">
+                        <li><a href="javascript:void(0)">Action</a></li>
+                        <li><a href="javascript:void(0)">Another action</a></li>
+                        <li><a href="javascript:void(0)">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Dropdown header</li>
+                        <li><a href="javascript:void(0)">Separated link</a></li>
+                        <li><a href="javascript:void(0)">One more separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                  <form class="navbar-form navbar-left">
+                    <input type="text" class="form-control col-lg-8" placeholder="Search">
+                  </form>
+                  <ul class="nav navbar-nav navbar-right">
+                    <li><a href="javascript:void(0)">Link</a></li>
+                    <li class="dropdown">
+                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                      <ul class="dropdown-menu">
+                        <li><a href="javascript:void(0)">Action</a></li>
+                        <li><a href="javascript:void(0)">Another action</a></li>
+                        <li><a href="javascript:void(0)">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li><a href="javascript:void(0)">Separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
             </div>
             <div class="well page" id="progress-bar">
               <h1 class="header">Progress Bar</h1>
@@ -673,7 +718,8 @@
             </div>
             <div class="well page" id="material-colors">
               <h1 class="header">Material Color Samples</h1>
-			  <div class="sample1">
+			  <div class="sampleRed">
+				<h2><button class="btn btn-material-red btn-lg">Red</button></h2>
                 <button class="btn btn-material-red-50">050</button>
                 <button class="btn btn-material-red-100">100</button>
                 <button class="btn btn-material-red-200">200</button>
@@ -687,7 +733,10 @@
                 <button class="btn btn-material-red-A100">A100</button>
                 <button class="btn btn-material-red-A200">A200</button>
                 <button class="btn btn-material-red-A400">A400</button>
-                <button class="btn btn-material-red-A700">A700</button><br><br>
+                <button class="btn btn-material-red-A700">A700</button>
+			  </div>
+			  <div class="samplePink">
+				<h2><button class="btn btn-material-pink btn-lg">Pink</button></h2>
                 <button class="btn btn-material-pink-50">050</button>
                 <button class="btn btn-material-pink-100">100</button>
                 <button class="btn btn-material-pink-200">200</button>
@@ -701,7 +750,27 @@
                 <button class="btn btn-material-pink-A100">A100</button>
                 <button class="btn btn-material-pink-A200">A200</button>
                 <button class="btn btn-material-pink-A400">A400</button>
-                <button class="btn btn-material-pink-A700">A700</button><br><br>
+                <button class="btn btn-material-pink-A700">A700</button>
+			  </div>
+			  <div class="samplePurple">
+				<h2><button class="btn btn-material-purple btn-lg">Purple</button></h2>
+                <button class="btn btn-material-purple-50">050</button>
+                <button class="btn btn-material-purple-100">100</button>
+                <button class="btn btn-material-purple-200">200</button>
+                <button class="btn btn-material-purple-300">300</button>
+                <button class="btn btn-material-purple-400">400</button>
+                <button class="btn btn-material-purple-500">500</button>
+                <button class="btn btn-material-purple-600">600</button>
+                <button class="btn btn-material-purple-700">700</button>
+                <button class="btn btn-material-purple-800">800</button>
+                <button class="btn btn-material-purple-900">900</button><br>
+                <button class="btn btn-material-purple-A100">A100</button>
+                <button class="btn btn-material-purple-A200">A200</button>
+                <button class="btn btn-material-purple-A400">A400</button>
+                <button class="btn btn-material-purple-A700">A700</button>
+			  </div>
+			  <div class="sampleDeepPurple">
+				<h2><button class="btn btn-material-deep-purple btn-lg">Deep Purple</button></h2>
                 <button class="btn btn-material-deep-purple-50">050</button>
                 <button class="btn btn-material-deep-purple-100">100</button>
                 <button class="btn btn-material-deep-purple-200">200</button>
@@ -715,7 +784,180 @@
                 <button class="btn btn-material-deep-purple-A100">A100</button>
                 <button class="btn btn-material-deep-purple-A200">A200</button>
                 <button class="btn btn-material-deep-purple-A400">A400</button>
-                <button class="btn btn-material-deep-purple-A700">A700</button><br><br>
+                <button class="btn btn-material-deep-purple-A700">A700</button>
+			  </div>
+			  <div class="sampleIndigo">
+				<h2><button class="btn btn-material-indigo btn-lg">Indigo</button></h2>
+                <button class="btn btn-material-indigo-50">050</button>
+                <button class="btn btn-material-indigo-100">100</button>
+                <button class="btn btn-material-indigo-200">200</button>
+                <button class="btn btn-material-indigo-300">300</button>
+                <button class="btn btn-material-indigo-400">400</button>
+                <button class="btn btn-material-indigo-500">500</button>
+                <button class="btn btn-material-indigo-600">600</button>
+                <button class="btn btn-material-indigo-700">700</button>
+                <button class="btn btn-material-indigo-800">800</button>
+                <button class="btn btn-material-indigo-900">900</button><br>
+                <button class="btn btn-material-indigo-A100">A100</button>
+                <button class="btn btn-material-indigo-A200">A200</button>
+                <button class="btn btn-material-indigo-A400">A400</button>
+                <button class="btn btn-material-indigo-A700">A700</button>
+			  </div>
+			  <div class="sampleBlue">
+				<h2><button class="btn btn-material-blue btn-lg">Blue</button></h2>
+                <button class="btn btn-material-blue-50">050</button>
+                <button class="btn btn-material-blue-100">100</button>
+                <button class="btn btn-material-blue-200">200</button>
+                <button class="btn btn-material-blue-300">300</button>
+                <button class="btn btn-material-blue-400">400</button>
+                <button class="btn btn-material-blue-500">500</button>
+                <button class="btn btn-material-blue-600">600</button>
+                <button class="btn btn-material-blue-700">700</button>
+                <button class="btn btn-material-blue-800">800</button>
+                <button class="btn btn-material-blue-900">900</button><br>
+                <button class="btn btn-material-blue-A100">A100</button>
+                <button class="btn btn-material-blue-A200">A200</button>
+                <button class="btn btn-material-blue-A400">A400</button>
+                <button class="btn btn-material-blue-A700">A700</button>
+			  </div>
+			  <div class="sampleLightBlue">
+				<h2><button class="btn btn-material-light-blue btn-lg">Light Blue</button></h2>
+                <button class="btn btn-material-light-blue-50">050</button>
+                <button class="btn btn-material-light-blue-100">100</button>
+                <button class="btn btn-material-light-blue-200">200</button>
+                <button class="btn btn-material-light-blue-300">300</button>
+                <button class="btn btn-material-light-blue-400">400</button>
+                <button class="btn btn-material-light-blue-500">500</button>
+                <button class="btn btn-material-light-blue-600">600</button>
+                <button class="btn btn-material-light-blue-700">700</button>
+                <button class="btn btn-material-light-blue-800">800</button>
+                <button class="btn btn-material-light-blue-900">900</button><br>
+                <button class="btn btn-material-light-blue-A100">A100</button>
+                <button class="btn btn-material-light-blue-A200">A200</button>
+                <button class="btn btn-material-light-blue-A400">A400</button>
+                <button class="btn btn-material-light-blue-A700">A700</button>
+			  </div>
+			  <div class="sampleCyan">
+				<h2><button class="btn btn-material-cyan btn-lg">Cyan</button></h2>
+                <button class="btn btn-material-cyan-50">050</button>
+                <button class="btn btn-material-cyan-100">100</button>
+                <button class="btn btn-material-cyan-200">200</button>
+                <button class="btn btn-material-cyan-300">300</button>
+                <button class="btn btn-material-cyan-400">400</button>
+                <button class="btn btn-material-cyan-500">500</button>
+                <button class="btn btn-material-cyan-600">600</button>
+                <button class="btn btn-material-cyan-700">700</button>
+                <button class="btn btn-material-cyan-800">800</button>
+                <button class="btn btn-material-cyan-900">900</button><br>
+                <button class="btn btn-material-cyan-A100">A100</button>
+                <button class="btn btn-material-cyan-A200">A200</button>
+                <button class="btn btn-material-cyan-A400">A400</button>
+                <button class="btn btn-material-cyan-A700">A700</button>
+			  </div>
+			  <div class="sampleTeal">
+				<h2><button class="btn btn-material-teal btn-lg">Teal</button></h2>
+                <button class="btn btn-material-teal-50">050</button>
+                <button class="btn btn-material-teal-100">100</button>
+                <button class="btn btn-material-teal-200">200</button>
+                <button class="btn btn-material-teal-300">300</button>
+                <button class="btn btn-material-teal-400">400</button>
+                <button class="btn btn-material-teal-500">500</button>
+                <button class="btn btn-material-teal-600">600</button>
+                <button class="btn btn-material-teal-700">700</button>
+                <button class="btn btn-material-teal-800">800</button>
+                <button class="btn btn-material-teal-900">900</button><br>
+                <button class="btn btn-material-teal-A100">A100</button>
+                <button class="btn btn-material-teal-A200">A200</button>
+                <button class="btn btn-material-teal-A400">A400</button>
+                <button class="btn btn-material-teal-A700">A700</button>
+			  </div>
+			  <div class="sampleGreen">
+				<h2><button class="btn btn-material-green btn-lg">Green</button></h2>
+                <button class="btn btn-material-green-50">050</button>
+                <button class="btn btn-material-green-100">100</button>
+                <button class="btn btn-material-green-200">200</button>
+                <button class="btn btn-material-green-300">300</button>
+                <button class="btn btn-material-green-400">400</button>
+                <button class="btn btn-material-green-500">500</button>
+                <button class="btn btn-material-green-600">600</button>
+                <button class="btn btn-material-green-700">700</button>
+                <button class="btn btn-material-green-800">800</button>
+                <button class="btn btn-material-green-900">900</button><br>
+                <button class="btn btn-material-green-A100">A100</button>
+                <button class="btn btn-material-green-A200">A200</button>
+                <button class="btn btn-material-green-A400">A400</button>
+                <button class="btn btn-material-green-A700">A700</button>
+			  </div>
+			  <div class="sampleLightGreen">
+				<h2><button class="btn btn-material-light-green btn-lg">LightGreen</button></h2>
+                <button class="btn btn-material-light-green-50">050</button>
+                <button class="btn btn-material-light-green-100">100</button>
+                <button class="btn btn-material-light-green-200">200</button>
+                <button class="btn btn-material-light-green-300">300</button>
+                <button class="btn btn-material-light-green-400">400</button>
+                <button class="btn btn-material-light-green-500">500</button>
+                <button class="btn btn-material-light-green-600">600</button>
+                <button class="btn btn-material-light-green-700">700</button>
+                <button class="btn btn-material-light-green-800">800</button>
+                <button class="btn btn-material-light-green-900">900</button><br>
+                <button class="btn btn-material-light-green-A100">A100</button>
+                <button class="btn btn-material-light-green-A200">A200</button>
+                <button class="btn btn-material-light-green-A400">A400</button>
+                <button class="btn btn-material-light-green-A700">A700</button>
+			  </div>
+			  <div class="sampleLime">
+				<h2><button class="btn btn-material-lime btn-lg">Lime</button></h2>
+                <button class="btn btn-material-lime-50">050</button>
+                <button class="btn btn-material-lime-100">100</button>
+                <button class="btn btn-material-lime-200">200</button>
+                <button class="btn btn-material-lime-300">300</button>
+                <button class="btn btn-material-lime-400">400</button>
+                <button class="btn btn-material-lime-500">500</button>
+                <button class="btn btn-material-lime-600">600</button>
+                <button class="btn btn-material-lime-700">700</button>
+                <button class="btn btn-material-lime-800">800</button>
+                <button class="btn btn-material-lime-900">900</button><br>
+                <button class="btn btn-material-lime-A100">A100</button>
+                <button class="btn btn-material-lime-A200">A200</button>
+                <button class="btn btn-material-lime-A400">A400</button>
+                <button class="btn btn-material-lime-A700">A700</button>
+			  </div>
+			  <div class="sampleYellow">
+				<h2><button class="btn btn-material-yellow btn-lg">Yellow</button></h2>
+                <button class="btn btn-material-yellow-50">050</button>
+                <button class="btn btn-material-yellow-100">100</button>
+                <button class="btn btn-material-yellow-200">200</button>
+                <button class="btn btn-material-yellow-300">300</button>
+                <button class="btn btn-material-yellow-400">400</button>
+                <button class="btn btn-material-yellow-500">500</button>
+                <button class="btn btn-material-yellow-600">600</button>
+                <button class="btn btn-material-yellow-700">700</button>
+                <button class="btn btn-material-yellow-800">800</button>
+                <button class="btn btn-material-yellow-900">900</button><br>
+                <button class="btn btn-material-yellow-A100">A100</button>
+                <button class="btn btn-material-yellow-A200">A200</button>
+                <button class="btn btn-material-yellow-A400">A400</button>
+                <button class="btn btn-material-yellow-A700">A700</button>
+			  </div>
+			  <div class="sampleAmber">
+				<h2><button class="btn btn-material-amber btn-lg">Amber</button></h2>
+                <button class="btn btn-material-amber-50">050</button>
+                <button class="btn btn-material-amber-100">100</button>
+                <button class="btn btn-material-amber-200">200</button>
+                <button class="btn btn-material-amber-300">300</button>
+                <button class="btn btn-material-amber-400">400</button>
+                <button class="btn btn-material-amber-500">500</button>
+                <button class="btn btn-material-amber-600">600</button>
+                <button class="btn btn-material-amber-700">700</button>
+                <button class="btn btn-material-amber-800">800</button>
+                <button class="btn btn-material-amber-900">900</button><br>
+                <button class="btn btn-material-amber-A100">A100</button>
+                <button class="btn btn-material-amber-A200">A200</button>
+                <button class="btn btn-material-amber-A400">A400</button>
+                <button class="btn btn-material-amber-A700">A700</button>
+			  </div>
+			  <div class="sampleOrange">
+				<h2><button class="btn btn-material-orange btn-lg">Orange</button></h2>
                 <button class="btn btn-material-orange-50">050</button>
                 <button class="btn btn-material-orange-100">100</button>
                 <button class="btn btn-material-orange-200">200</button>
@@ -729,7 +971,10 @@
                 <button class="btn btn-material-orange-A100">A100</button>
                 <button class="btn btn-material-orange-A200">A200</button>
                 <button class="btn btn-material-orange-A400">A400</button>
-                <button class="btn btn-material-orange-A700">A700</button><br><br>
+                <button class="btn btn-material-orange-A700">A700</button>
+			  </div>
+			  <div class="sampleDeepOrange">
+				<h2><button class="btn btn-material-deep-orange btn-lg">Deep Orange</button></h2>
                 <button class="btn btn-material-deep-orange-50">050</button>
                 <button class="btn btn-material-deep-orange-100">100</button>
                 <button class="btn btn-material-deep-orange-200">200</button>
@@ -745,6 +990,45 @@
                 <button class="btn btn-material-deep-orange-A400">A400</button>
                 <button class="btn btn-material-deep-orange-A700">A700</button><br><br>
               </div>
+			  <div class="sampleBrown">
+				<h2><button class="btn btn-material-brown btn-lg">Brown</button></h2>
+                <button class="btn btn-material-brown-50">050</button>
+                <button class="btn btn-material-brown-100">100</button>
+                <button class="btn btn-material-brown-200">200</button>
+                <button class="btn btn-material-brown-300">300</button>
+                <button class="btn btn-material-brown-400">400</button>
+                <button class="btn btn-material-brown-500">500</button>
+                <button class="btn btn-material-brown-600">600</button>
+                <button class="btn btn-material-brown-700">700</button>
+                <button class="btn btn-material-brown-800">800</button>
+                <button class="btn btn-material-brown-900">900</button>
+			  </div>
+			  <div class="sampleGrey">
+				<h2><button class="btn btn-material-grey btn-lg">Grey</button></h2>
+                <button class="btn btn-material-grey-50">050</button>
+                <button class="btn btn-material-grey-100">100</button>
+                <button class="btn btn-material-grey-200">200</button>
+                <button class="btn btn-material-grey-300">300</button>
+                <button class="btn btn-material-grey-400">400</button>
+                <button class="btn btn-material-grey-500">500</button>
+                <button class="btn btn-material-grey-600">600</button>
+                <button class="btn btn-material-grey-700">700</button>
+                <button class="btn btn-material-grey-800">800</button>
+                <button class="btn btn-material-grey-900">900</button>
+			  </div>
+			  <div class="sampleBlueGrey">
+				<h2><button class="btn btn-material-blue-grey btn-lg">Blue Grey</button></h2>
+                <button class="btn btn-material-blue-grey-50">050</button>
+                <button class="btn btn-material-blue-grey-100">100</button>
+                <button class="btn btn-material-blue-grey-200">200</button>
+                <button class="btn btn-material-blue-grey-300">300</button>
+                <button class="btn btn-material-blue-grey-400">400</button>
+                <button class="btn btn-material-blue-grey-500">500</button>
+                <button class="btn btn-material-blue-grey-600">600</button>
+                <button class="btn btn-material-blue-grey-700">700</button>
+                <button class="btn btn-material-blue-grey-800">800</button>
+                <button class="btn btn-material-blue-grey-900">900</button>
+			  </div>
 		    </div>
             <div class="well page" id="button">
               <h1 class="header">Button</h1>
@@ -989,7 +1273,7 @@
             </div>
           </div>
           <div class="col-xs-2">
-            <button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
+            <button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
         </div>
       </div>
     </div>
diff --git a/less/_buttons.less b/less/_buttons.less
index 5755079e..0517856d 100644
--- a/less/_buttons.less
+++ b/less/_buttons.less
@@ -18,18 +18,9 @@
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none !important;
 
-    .variations(~":not(.btn-link):not(.btn-flat)", background-color, @btn-default);
-
     .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
-	/*
-	.background-variations(@extra) {
-		&-material-test {
-			background-color: blue !important;
-			color:  red !important;
-		}
-	}*/
-	.background-variations(~":not(.btn-link):not(.btn-flat)");
-	.background-variations(~".btn-flat:not(.btn-link)");
+	
+	.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
 	
     &.btn-flat {
         background: none;
diff --git a/less/_colors.less b/less/_colors.less
index 44b2da88..9cf1ab6c 100644
--- a/less/_colors.less
+++ b/less/_colors.less
@@ -315,6 +315,12 @@ Then, run this script to get the list.
 @brown-700: #5d4037;
 @brown-800: #4e342e;
 @brown-900: #3e2723;
+// this colors are duplicated
+// created to keep pattern and to keep working variations and background variations mixin.
+@brown-A100: #d7ccc8;
+@brown-A200: #bcaaa4;
+@brown-A400: #8d6e63;
+@brown-A700: #5d4037;
 
 
 @grey: #9e9e9e;
@@ -328,6 +334,12 @@ Then, run this script to get the list.
 @grey-700: #616161;
 @grey-800: #424242;
 @grey-900: #212121;
+// this colors are duplicated
+// created to keep pattern and to keep working variations and background variations mixin.
+@grey-A100: #f5f5f5;
+@grey-A200: #eeeeee;
+@grey-A400: #bdbdbd;
+@grey-A700: #616161;
 
 
 @blue-grey: #607d8b;
@@ -341,6 +353,12 @@ Then, run this script to get the list.
 @blue-grey-700: #455a64;
 @blue-grey-800: #37474f;
 @blue-grey-900: #263238;
+// this colors are duplicated
+// created to keep pattern and to keep working variations and background variations mixin.
+@blue-grey-A100: #cfd8dc;
+@blue-grey-A200: #b0bec5;
+@blue-grey-A400: #78909c;
+@blue-grey-A700: #455a64;
 
 
 @black: #000000;
diff --git a/less/_mixins.less b/less/_mixins.less
index 3e51f3e6..e2a9f314 100644
--- a/less/_mixins.less
+++ b/less/_mixins.less
@@ -1,5 +1,6 @@
 // usage: .variations(~" .check", color, transparent);
 .variations(@extra, @property, @default) {
+	
     // Bootstrap shades
     &@{extra}, &-default@{extra} {
         @{property}: @default;
@@ -18,7 +19,55 @@
     }
     &-danger@{extra} {
         @{property}: @danger;
-    }
+    } 
+	
+	
+	.variations-factory(@material-color) {
+		.variations-factory-deep(@material-color-number) {
+			
+			&-material-@{material-color}@{material-color-number}@{extra} {
+				@final-color: "@{material-color}@{material-color-number}";
+        		@{property}: @@final-color;
+			}
+			
+		}
+		.variations-factory-deep(~"");
+		.variations-factory-deep(~"-50");
+		.variations-factory-deep(~"-100");
+		.variations-factory-deep(~"-200");
+		.variations-factory-deep(~"-300");
+		.variations-factory-deep(~"-400");
+		.variations-factory-deep(~"-500");
+		.variations-factory-deep(~"-600");
+		.variations-factory-deep(~"-700");
+		.variations-factory-deep(~"-800");
+		.variations-factory-deep(~"-900");
+		.variations-factory-deep(~"-A100");
+		.variations-factory-deep(~"-A200");
+		.variations-factory-deep(~"-A400");
+		.variations-factory-deep(~"-A700");
+	}
+	.variations-factory(~"red");
+	.variations-factory(~"pink");
+	.variations-factory(~"purple");
+	.variations-factory(~"deep-purple");
+	.variations-factory(~"indigo");
+	.variations-factory(~"blue");
+	.variations-factory(~"light-blue");
+	.variations-factory(~"cyan");
+	.variations-factory(~"teal");
+	.variations-factory(~"green");
+	.variations-factory(~"light-green");
+	.variations-factory(~"lime");
+	.variations-factory(~"yellow");
+	.variations-factory(~"amber");
+	.variations-factory(~"orange");
+	.variations-factory(~"deep-orange");
+	.variations-factory(~"brown");
+	.variations-factory(~"grey");
+	.variations-factory(~"blue-grey");
+	
+	/*
     // Material shades
     &-material-red@{extra} {
         @{property}: @red;
@@ -74,17 +123,51 @@
     &-material-lightgrey@{extra} {
         @{property}: @lightgrey;
     }
+	*/
 }
 
-.background-variations(@extra) {
+.background-variations(@extra, @default) {
+	
+	@contrast-factor: 40%;
+	
+	.set-background-and-font-color(@bg-color) {
+		background-color: @bg-color;
+		color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
+	}
+	
+	// bootstrap styles
+    &@{extra}, &-default@{extra} {
+		.set-background-and-font-color(@default);
+    }
+    &-primary@{extra} {
+		.set-background-and-font-color(@primary);
+    }
+    &-success@{extra} {
+		.set-background-and-font-color(@success);
+    }
+    &-info@{extra} {
+		.set-background-and-font-color(@info);
+    }
+    &-warning@{extra} {
+		.set-background-and-font-color(@warning);
+    }
+    &-danger@{extra} {
+		.set-background-and-font-color(@danger);
+    }
+	
+	// given a color build multiples dephs
 	.background-variations-factory(@material-color) {
+		
+		// given a color and its deph build css
 		.background-variations-factory-deep(@material-color-number) {
+			
 			&-material-@{material-color}@{material-color-number}@{extra} {
 				@final-background-color: "@{material-color}@{material-color-number}";
-				background-color: @@final-background-color;
-				color: contrast(@@final-background-color, @lightbg-text, @darkbg-text, 25%);
+				.set-background-and-font-color(@@final-background-color);
 			}
+			
 		}
+		
 		.background-variations-factory-deep(~"");
 		.background-variations-factory-deep(~"-50");
 		.background-variations-factory-deep(~"-100");
@@ -101,12 +184,28 @@
 		.background-variations-factory-deep(~"-A400");
 		.background-variations-factory-deep(~"-A700");
 	}
-	.background-variations-factory(~"lime");
+	
 	.background-variations-factory(~"red");
 	.background-variations-factory(~"pink");
+	.background-variations-factory(~"purple");
 	.background-variations-factory(~"deep-purple");
-	.background-variations-factory(~"deep-orange");
+	.background-variations-factory(~"indigo");
+	.background-variations-factory(~"blue");
+	.background-variations-factory(~"light-blue");
+	.background-variations-factory(~"cyan");
+	.background-variations-factory(~"teal");
+	.background-variations-factory(~"green");
+	.background-variations-factory(~"light-green");
+	.background-variations-factory(~"lime");
+	.background-variations-factory(~"yellow");
+	.background-variations-factory(~"amber");
 	.background-variations-factory(~"orange");
+	.background-variations-factory(~"deep-orange");
+	.background-variations-factory(~"brown");
+	.background-variations-factory(~"grey");
+	.background-variations-factory(~"blue-grey");
+	
+	
 }
 
 @all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
diff --git a/less/_navbar.less b/less/_navbar.less
index ecea6106..dda867f2 100644
--- a/less/_navbar.less
+++ b/less/_navbar.less
@@ -161,7 +161,9 @@
         :-ms-input-placeholder { color: @navbar-border; };
     }
 
-    .variations(~"", background-color, @primary);
+    //.variations(~"", background-color, @primary);
+	.background-variations(~"", @primary);
+	
     &-inverse {
         background-color: @navbar-inverse-bg;
     }